@paperless/core 1.9.3 → 1.10.0

package/hydrate/index.js

@@ -4949,7 +4949,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
   /*hydrateAppClosure start*/
 
 
-const NAMESPACE = 'paperless';
+const NAMESPACE$1 = 'paperless';
 const BUILD = /* paperless */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 function queryNonceMetaTagContent(e) {
@@ -5471,12 +5471,12 @@ const callRender = (e, t, o, n) => {
  BUILD.isDev ), n()) : (e.$flags$ |= 64, addHydratedFlag(o), 
  (safeCall(s, "componentDidLoad"), 
  BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), (e.$onRenderResolve$ && (e.$onRenderResolve$(), 
- e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), 
+ e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick$1((() => scheduleUpdate(e, !1))), 
  e.$flags$ &= -517);
 }, appDidLoad = e => {
- addHydratedFlag(doc.documentElement), nextTick((() => emitEvent(win, "appload", {
+ addHydratedFlag(doc.documentElement), nextTick$1((() => emitEvent(win, "appload", {
   detail: {
-   namespace: NAMESPACE
+   namespace: NAMESPACE$1
   }
  }))), BUILD.profile  ;
 }, safeCall = (e, t, o) => {
@@ -5746,7 +5746,7 @@ const cmpModules = new Map, getModule = e => {
    consoleError(e);
   }
  }));
-}, resolved = Promise.resolve(), nextTick = e => resolved.then(e), defaultConsoleError = e => {
+}, resolved = Promise.resolve(), nextTick$1 = e => resolved.then(e), defaultConsoleError = e => {
  null != e && console.error(e.stack || e.message || e);
 }, consoleError = (e, t) => (defaultConsoleError)(e, t), plt = {
  $flags$: 0,
@@ -5924,7 +5924,7 @@ class AvatarGroup {
   }; }
 }
 
-const backdropComponentCss = "/*!@.fixed*/.fixed.sc-p-backdrop{position:fixed!important}/*!@.left-0*/.left-0.sc-p-backdrop{left:0!important}/*!@.top-0*/.top-0.sc-p-backdrop{top:0!important}/*!@.flex*/.flex.sc-p-backdrop{display:flex!important}/*!@.h-full*/.h-full.sc-p-backdrop{height:100%!important}/*!@.max-h-screen*/.max-h-screen.sc-p-backdrop{max-height:100vh!important}/*!@.w-full*/.w-full.sc-p-backdrop{width:100%!important}/*!@.animate-fade-in*/.animate-fade-in.sc-p-backdrop{animation:fadeIn .2s ease forwards!important}/*!@.items-start*/.items-start.sc-p-backdrop{align-items:flex-start!important}/*!@.items-end*/.items-end.sc-p-backdrop{align-items:flex-end!important}/*!@.justify-center*/.justify-center.sc-p-backdrop{justify-content:center!important}/*!@.overflow-y-auto*/.overflow-y-auto.sc-p-backdrop{overflow-y:auto!important}/*!@.p-0*/.p-0.sc-p-backdrop{padding:0!important}/*!@**/*.sc-p-backdrop{box-sizing:border-box}/*!@:host*/.sc-p-backdrop-h{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:center;padding:4rem}}/*!@:host(.blurred)*/.blurred.sc-p-backdrop-h{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}/*!@:host(.closing)*/.closing.sc-p-backdrop-h{animation:fadeOut .2s ease forwards}/*!@:host(.closing) .content-container*/.closing.sc-p-backdrop-h .content-container.sc-p-backdrop{overflow:hidden}/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{padding:0}}@media (min-width:64rem){/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{padding:0}}@media (min-width:40rem){/*!@.tablet\\:p-0*/.tablet\\:p-0.sc-p-backdrop{padding:0!important}/*!@.tablet\\:px-16*/.tablet\\:px-16.sc-p-backdrop{padding-left:4rem!important;padding-right:4rem!important}}";
+const backdropComponentCss = "/*!@.fixed*/.fixed.sc-p-backdrop{position:fixed!important}/*!@.left-0*/.left-0.sc-p-backdrop{left:0!important}/*!@.top-0*/.top-0.sc-p-backdrop{top:0!important}/*!@.flex*/.flex.sc-p-backdrop{display:flex!important}/*!@.h-full*/.h-full.sc-p-backdrop{height:100%!important}/*!@.max-h-screen*/.max-h-screen.sc-p-backdrop{max-height:100vh!important}/*!@.w-full*/.w-full.sc-p-backdrop{width:100%!important}/*!@.animate-fade-in*/.animate-fade-in.sc-p-backdrop{animation:fadeIn .2s ease forwards!important}/*!@.items-start*/.items-start.sc-p-backdrop{align-items:flex-start!important}/*!@.items-end*/.items-end.sc-p-backdrop{align-items:flex-end!important}/*!@.justify-center*/.justify-center.sc-p-backdrop{justify-content:center!important}/*!@.overflow-y-auto*/.overflow-y-auto.sc-p-backdrop{overflow-y:auto!important}/*!@.p-0*/.p-0.sc-p-backdrop{padding:0!important}/*!@**/*.sc-p-backdrop{box-sizing:border-box}/*!@:host*/.sc-p-backdrop-h{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){/*!@:host .content-container*/.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:center;padding:4rem}}/*!@:host(.blurred)*/.blurred.sc-p-backdrop-h{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}/*!@:host(.closing)*/.closing.sc-p-backdrop-h{animation:fadeOut .2s ease forwards}/*!@:host(.closing) .content-container*/.closing.sc-p-backdrop-h .content-container.sc-p-backdrop{overflow:hidden}/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{padding:0}}@media (min-width:64rem){/*!@:host(.variant-drawer) .content-container*/.variant-drawer.sc-p-backdrop-h .content-container.sc-p-backdrop{padding:0}}@media (min-width:40rem){/*!@.tablet\\:p-0*/.tablet\\:p-0.sc-p-backdrop{padding:0!important}/*!@.tablet\\:px-16*/.tablet\\:px-16.sc-p-backdrop{padding-left:4rem!important;padding-right:4rem!important}}/*!@.static*/.static.sc-p-backdrop{position:static!important}";
 
 class Backdrop {
   constructor(hostRef) {
@@ -11921,7 +11921,7 @@ class Calendar {
   }; }
 }
 
-const cardBodyComponentCss = ".px-4{padding-left:1rem!important;padding-right:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}p-card-body{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding:1.5rem 1rem}p-card-body[inherit-text]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}";
+const cardBodyComponentCss = ".px-4{padding-left:1rem!important;padding-right:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}p-card-body{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding:1.5rem 1rem}p-card-body[inherit-text]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}.static{position:static!important}";
 
 class CardBody {
   constructor(hostRef) {
@@ -12240,6 +12240,2826 @@ class Counter {
   }; }
 }
 
+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))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+const WINDOW = IS_BROWSER ? window : {};
+const IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
+const HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
+const NAMESPACE = 'cropper';
+const CROPPER_CANVAS = `${NAMESPACE}-canvas`;
+const CROPPER_CROSSHAIR = `${NAMESPACE}-crosshair`;
+const CROPPER_GIRD = `${NAMESPACE}-grid`;
+const CROPPER_HANDLE = `${NAMESPACE}-handle`;
+const CROPPER_IMAGE = `${NAMESPACE}-image`;
+const CROPPER_SELECTION = `${NAMESPACE}-selection`;
+const CROPPER_SHADE = `${NAMESPACE}-shade`;
+const CROPPER_VIEWER = `${NAMESPACE}-viewer`;
+// Actions
+const ACTION_SELECT = 'select';
+const ACTION_MOVE = 'move';
+const ACTION_SCALE = 'scale';
+const ACTION_ROTATE = 'rotate';
+const ACTION_TRANSFORM = 'transform';
+const ACTION_NONE = 'none';
+const ACTION_RESIZE_NORTH = 'n-resize';
+const ACTION_RESIZE_EAST = 'e-resize';
+const ACTION_RESIZE_SOUTH = 's-resize';
+const ACTION_RESIZE_WEST = 'w-resize';
+const ACTION_RESIZE_NORTHEAST = 'ne-resize';
+const ACTION_RESIZE_NORTHWEST = 'nw-resize';
+const ACTION_RESIZE_SOUTHEAST = 'se-resize';
+const ACTION_RESIZE_SOUTHWEST = 'sw-resize';
+// Attributes
+const ATTRIBUTE_ACTION = 'action';
+// Native events
+const EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
+const EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
+const EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
+const EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
+const EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
+const EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
+const EVENT_ERROR = 'error';
+const EVENT_KEYDOWN = 'keydown';
+const EVENT_LOAD = 'load';
+const EVENT_WHEEL = 'wheel';
+// Custom events
+const EVENT_ACTION = 'action';
+const EVENT_ACTION_END = 'actionend';
+const EVENT_ACTION_MOVE = 'actionmove';
+const EVENT_ACTION_START = 'actionstart';
+const EVENT_CHANGE = 'change';
+const EVENT_TRANSFORM = 'transform';
+
+/**
+ * Check if the given value is a string.
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if the given value is a string, else `false`.
+ */
+function isString(value) {
+    return typeof value === 'string';
+}
+/**
+ * Check if the given value is not a number.
+ */
+const isNaN$1 = Number.isNaN || WINDOW.isNaN;
+/**
+ * Check if the given value is a number.
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if the given value is a number, else `false`.
+ */
+function isNumber(value) {
+    return typeof value === 'number' && !isNaN$1(value);
+}
+/**
+ * Check if the given value is a positive number.
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if the given value is a positive number, else `false`.
+ */
+function isPositiveNumber(value) {
+    return isNumber(value) && value > 0 && value < Infinity;
+}
+/**
+ * Check if the given value is undefined.
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if the given value is undefined, else `false`.
+ */
+function isUndefined(value) {
+    return typeof value === 'undefined';
+}
+/**
+ * Check if the given value is an object.
+ * @param {*} value - The value to check.
+ * @returns {boolean} Returns `true` if the given value is an object, else `false`.
+ */
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
+const { hasOwnProperty } = Object.prototype;
+/**
+ * Check if the given value is a plain object.
+ * @param {*} value - The value to check.
+ * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.
+ */
+function isPlainObject(value) {
+    if (!isObject(value)) {
+        return false;
+    }
+    try {
+        const { constructor } = value;
+        const { prototype } = constructor;
+        return constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
+    }
+    catch (error) {
+        return false;
+    }
+}
+/**
+ * Check if the given value is a function.
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if the given value is a function, else `false`.
+ */
+function isFunction$1(value) {
+    return typeof value === 'function';
+}
+/**
+ * Check if the given node is an element.
+ * @param {*} node The node to check.
+ * @returns {boolean} Returns `true` if the given node is an element; otherwise, `false`.
+ */
+function isElement$1(node) {
+    return typeof node === 'object' && node !== null && node.nodeType === 1;
+}
+const REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
+/**
+ * Transform the given string from camelCase to kebab-case.
+ * @param {string} value The value to transform.
+ * @returns {string} Returns the transformed value.
+ */
+function toKebabCase(value) {
+    return String(value).replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();
+}
+const REGEXP_KEBAB_CASE = /-[A-z\d]/g;
+/**
+ * Transform the given string from kebab-case to camelCase.
+ * @param {string} value The value to transform.
+ * @returns {string} Returns the transformed value.
+ */
+function toCamelCase(value) {
+    return value.replace(REGEXP_KEBAB_CASE, (substring) => substring.slice(1).toUpperCase());
+}
+const REGEXP_SPACES = /\s\s*/;
+/**
+ * Remove event listener from the event target.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener}
+ * @param {EventTarget} target The target of the event.
+ * @param {string} types The types of the event.
+ * @param {EventListenerOrEventListenerObject} listener The listener of the event.
+ * @param {EventListenerOptions} [options] The options specify characteristics about the event listener.
+ */
+function off(target, types, listener, options) {
+    types.trim().split(REGEXP_SPACES).forEach((type) => {
+        target.removeEventListener(type, listener, options);
+    });
+}
+/**
+ * Add event listener to the event target.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener}
+ * @param {EventTarget} target The target of the event.
+ * @param {string} types The types of the event.
+ * @param {EventListenerOrEventListenerObject} listener The listener of the event.
+ * @param {AddEventListenerOptions} [options] The options specify characteristics about the event listener.
+ */
+function on(target, types, listener, options) {
+    types.trim().split(REGEXP_SPACES).forEach((type) => {
+        target.addEventListener(type, listener, options);
+    });
+}
+/**
+ * Add once event listener to the event target.
+ * @param {EventTarget} target The target of the event.
+ * @param {string} types The types of the event.
+ * @param {EventListenerOrEventListenerObject} listener The listener of the event.
+ * @param {AddEventListenerOptions} [options] The options specify characteristics about the event listener.
+ */
+function once(target, types, listener, options) {
+    on(target, types, listener, Object.assign(Object.assign({}, options), { once: true }));
+}
+const defaultEventOptions = {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+};
+/**
+ * Dispatch event on the event target.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent}
+ * @param {EventTarget} target The target of the event.
+ * @param {string} type The name of the event.
+ * @param {*} [detail] The data passed when initializing the event.
+ * @param {CustomEventInit} [options] The other event options.
+ * @returns {boolean} Returns the result value.
+ */
+function emit(target, type, detail, options) {
+    return target.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign(Object.assign({}, defaultEventOptions), { detail }), options)));
+}
+const resolvedPromise = Promise.resolve();
+/**
+ * Defers the callback to be executed after the next DOM update cycle.
+ * @param {*} [context] The `this` context.
+ * @param {Function} [callback] The callback to execute after the next DOM update cycle.
+ * @returns {Promise} A promise that resolves to nothing.
+ */
+function nextTick(context, callback) {
+    return callback
+        ? resolvedPromise.then(context ? callback.bind(context) : callback)
+        : resolvedPromise;
+}
+/**
+ * Get the offset base on the document.
+ * @param {Element} element The target element.
+ * @returns {object} The offset data.
+ */
+function getOffset(element) {
+    const { documentElement } = element.ownerDocument;
+    const box = element.getBoundingClientRect();
+    return {
+        left: box.left + (WINDOW.pageXOffset - documentElement.clientLeft),
+        top: box.top + (WINDOW.pageYOffset - documentElement.clientTop),
+    };
+}
+const REGEXP_ANGLE_UNIT = /deg|g?rad|turn$/i;
+/**
+ * Convert an angle to a radian number.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/angle}
+ * @param {number|string} angle The angle to convert.
+ * @returns {number} Returns the radian number.
+ */
+function toAngleInRadian(angle) {
+    const value = parseFloat(angle) || 0;
+    if (value !== 0) {
+        const [unit = 'rad'] = String(angle).match(REGEXP_ANGLE_UNIT) || [];
+        switch (unit.toLowerCase()) {
+            case 'deg':
+                return (value / 360) * (Math.PI * 2);
+            case 'grad':
+                return (value / 400) * (Math.PI * 2);
+            case 'turn':
+                return value * (Math.PI * 2);
+        }
+    }
+    return value;
+}
+const SIZE_ADJUSTMENT_TYPE_CONTAIN = 'contain';
+const SIZE_ADJUSTMENT_TYPE_COVER = 'cover';
+/**
+ * Get the max sizes in a rectangle under the given aspect ratio.
+ * @param {object} data The original sizes.
+ * @param {string} [type] The adjust type.
+ * @returns {object} Returns the result sizes.
+ */
+function getAdjustedSizes(data, type = SIZE_ADJUSTMENT_TYPE_CONTAIN) {
+    const { aspectRatio } = data;
+    let { width, height } = data;
+    const isValidWidth = isPositiveNumber(width);
+    const isValidHeight = isPositiveNumber(height);
+    if (isValidWidth && isValidHeight) {
+        const adjustedWidth = height * aspectRatio;
+        if ((type === SIZE_ADJUSTMENT_TYPE_CONTAIN && adjustedWidth > width)
+            || (type === SIZE_ADJUSTMENT_TYPE_COVER && adjustedWidth < width)) {
+            height = width / aspectRatio;
+        }
+        else {
+            width = height * aspectRatio;
+        }
+    }
+    else if (isValidWidth) {
+        height = width / aspectRatio;
+    }
+    else if (isValidHeight) {
+        width = height * aspectRatio;
+    }
+    return {
+        width,
+        height,
+    };
+}
+/**
+ * Multiply multiple matrices.
+ * @param {Array} matrix The first matrix.
+ * @param {Array} args The rest matrices.
+ * @returns {Array} Returns the result matrix.
+ */
+function multiplyMatrices(matrix, ...args) {
+    if (args.length === 0) {
+        return matrix;
+    }
+    const [a1, b1, c1, d1, e1, f1] = matrix;
+    const [a2, b2, c2, d2, e2, f2] = args[0];
+    // ┌ a1 c1 e1 ┐   ┌ a2 c2 e2 ┐
+    // │ b1 d1 f1 │ × │ b2 d2 f2 │
+    // └ 0  0  1  ┘   └ 0  0  1  ┘
+    matrix = [
+        a1 * a2 + c1 * b2 /* + e1 * 0 */,
+        b1 * a2 + d1 * b2 /* + f1 * 0 */,
+        a1 * c2 + c1 * d2 /* + e1 * 0 */,
+        b1 * c2 + d1 * d2 /* + f1 * 0 */,
+        a1 * e2 + c1 * f2 + e1 /* * 1 */,
+        b1 * e2 + d1 * f2 + f1 /* * 1 */,
+    ];
+    return multiplyMatrices(matrix, ...args.slice(1));
+}
+
+var style$8 = `:host([hidden]){display:none!important}`;
+
+const REGEXP_SUFFIX = /left|top|width|height/i;
+const DEFAULT_SHADOW_ROOT_MODE = 'open';
+const shadowRoots = new WeakMap();
+const styleSheets = new WeakMap();
+const tagNames = new Map();
+const supportsAdoptedStyleSheets = WINDOW.document && Array.isArray(WINDOW.document.adoptedStyleSheets) && 'replaceSync' in WINDOW.CSSStyleSheet.prototype;
+class CropperElement extends HTMLElement {
+    get $sharedStyle() {
+        return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style$8}`;
+    }
+    constructor() {
+        var _a, _b;
+        super();
+        this.shadowRootMode = DEFAULT_SHADOW_ROOT_MODE;
+        this.slottable = true;
+        const name = (_b = (_a = Object.getPrototypeOf(this)) === null || _a === void 0 ? void 0 : _a.constructor) === null || _b === void 0 ? void 0 : _b.$name;
+        if (name) {
+            tagNames.set(name, this.tagName.toLowerCase());
+        }
+    }
+    static get observedAttributes() {
+        return [
+            'shadow-root-mode',
+            'slottable',
+            'theme-color',
+        ];
+    }
+    // Convert attribute to property
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        const propertyName = toCamelCase(name);
+        const oldPropertyValue = this[propertyName];
+        let newPropertyValue = newValue;
+        switch (typeof oldPropertyValue) {
+            case 'boolean':
+                newPropertyValue = newValue !== null && newValue !== 'false';
+                break;
+            case 'number':
+                newPropertyValue = Number(newValue);
+                break;
+        }
+        this[propertyName] = newPropertyValue;
+        switch (name) {
+            case 'theme-color': {
+                const styleSheet = styleSheets.get(this);
+                const styles = this.$sharedStyle;
+                if (styleSheet && styles) {
+                    if (supportsAdoptedStyleSheets) {
+                        styleSheet.replaceSync(styles);
+                    }
+                    else {
+                        styleSheet.textContent = styles;
+                    }
+                }
+                break;
+            }
+        }
+    }
+    // Convert property to attribute
+    $propertyChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        name = toKebabCase(name);
+        switch (typeof newValue) {
+            case 'boolean':
+                if (newValue === true) {
+                    if (!this.hasAttribute(name)) {
+                        this.setAttribute(name, '');
+                    }
+                }
+                else {
+                    this.removeAttribute(name);
+                }
+                break;
+            case 'number':
+                if (isNaN$1(newValue)) {
+                    newValue = '';
+                }
+                else {
+                    newValue = String(newValue);
+                }
+            // Fall through
+            // case 'string':
+            // eslint-disable-next-line no-fallthrough
+            default:
+                if (newValue) {
+                    if (this.getAttribute(name) !== newValue) {
+                        this.setAttribute(name, newValue);
+                    }
+                }
+                else {
+                    this.removeAttribute(name);
+                }
+        }
+    }
+    connectedCallback() {
+        // Observe properties after observed attributes
+        Object.getPrototypeOf(this).constructor.observedAttributes.forEach((attribute) => {
+            const property = toCamelCase(attribute);
+            let value = this[property];
+            if (!isUndefined(value)) {
+                this.$propertyChangedCallback(property, undefined, value);
+            }
+            Object.defineProperty(this, property, {
+                enumerable: true,
+                configurable: true,
+                get() {
+                    return value;
+                },
+                set(newValue) {
+                    const oldValue = value;
+                    value = newValue;
+                    this.$propertyChangedCallback(property, oldValue, newValue);
+                },
+            });
+        });
+        const shadow = this.attachShadow({
+            mode: this.shadowRootMode || DEFAULT_SHADOW_ROOT_MODE,
+        });
+        if (!this.shadowRoot) {
+            shadowRoots.set(this, shadow);
+        }
+        styleSheets.set(this, this.$addStyles(this.$sharedStyle));
+        if (this.$style) {
+            this.$addStyles(this.$style);
+        }
+        if (this.$template) {
+            const template = document.createElement('template');
+            template.innerHTML = this.$template;
+            shadow.appendChild(template.content);
+        }
+        if (this.slottable) {
+            const slot = document.createElement('slot');
+            shadow.appendChild(slot);
+        }
+    }
+    disconnectedCallback() {
+        if (styleSheets.has(this)) {
+            styleSheets.delete(this);
+        }
+        if (shadowRoots.has(this)) {
+            shadowRoots.delete(this);
+        }
+    }
+    // eslint-disable-next-line class-methods-use-this
+    $getTagNameOf(name) {
+        var _a;
+        return (_a = tagNames.get(name)) !== null && _a !== void 0 ? _a : name;
+    }
+    $setStyles(properties) {
+        Object.keys(properties).forEach((property) => {
+            let value = properties[property];
+            if (isNumber(value)) {
+                if (value !== 0 && REGEXP_SUFFIX.test(property)) {
+                    value = `${value}px`;
+                }
+                else {
+                    value = String(value);
+                }
+            }
+            this.style[property] = value;
+        });
+        return this;
+    }
+    /**
+     * Outputs the shadow root of the element.
+     * @returns {ShadowRoot} Returns the shadow root.
+     */
+    $getShadowRoot() {
+        return this.shadowRoot || shadowRoots.get(this);
+    }
+    /**
+     * Adds styles to the shadow root.
+     * @param {string} styles The styles to add.
+     * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
+     */
+    $addStyles(styles) {
+        let styleSheet;
+        const shadow = this.$getShadowRoot();
+        if (supportsAdoptedStyleSheets) {
+            styleSheet = new CSSStyleSheet();
+            styleSheet.replaceSync(styles);
+            shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.concat(styleSheet);
+        }
+        else {
+            styleSheet = document.createElement('style');
+            styleSheet.textContent = styles;
+            shadow.appendChild(styleSheet);
+        }
+        return styleSheet;
+    }
+    /**
+     * Dispatches an event at the element.
+     * @param {string} type The name of the event.
+     * @param {*} [detail] The data passed when initializing the event.
+     * @param {CustomEventInit} [options] The other event options.
+     * @returns {boolean} Returns the result value.
+     */
+    $emit(type, detail, options) {
+        return emit(this, type, detail, options);
+    }
+    /**
+     * Defers the callback to be executed after the next DOM update cycle.
+     * @param {Function} [callback] The callback to execute after the next DOM update cycle.
+     * @returns {Promise} A promise that resolves to nothing.
+     */
+    $nextTick(callback) {
+        return nextTick(this, callback);
+    }
+    /**
+     * Defines the constructor as a new custom element.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
+     * @param {string|object} [name] The element name.
+     * @param {object} [options] The element definition options.
+     */
+    static $define(name, options) {
+        if (isObject(name)) {
+            options = name;
+            name = '';
+        }
+        if (!name) {
+            name = this.$name || this.name;
+        }
+        name = toKebabCase(name);
+        if (IS_BROWSER && WINDOW.customElements && !WINDOW.customElements.get(name)) {
+            customElements.define(name, this, options);
+        }
+    }
+}
+CropperElement.$version = '2.0.0-beta.4';
+
+var style$7 = `:host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}`;
+
+class CropperCanvas extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$onPointerDown = null;
+        this.$onPointerMove = null;
+        this.$onPointerUp = null;
+        this.$onWheel = null;
+        this.$wheeling = false;
+        this.$pointers = new Map();
+        this.$style = style$7;
+        this.$action = ACTION_NONE;
+        this.background = false;
+        this.disabled = false;
+        this.scaleStep = 0.1;
+        this.themeColor = '#39f';
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'background',
+            'disabled',
+            'scale-step',
+        ]);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.disabled) {
+            this.$bind();
+        }
+    }
+    disconnectedCallback() {
+        if (!this.disabled) {
+            this.$unbind();
+        }
+        super.disconnectedCallback();
+    }
+    $propertyChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        super.$propertyChangedCallback(name, oldValue, newValue);
+        switch (name) {
+            case 'disabled':
+                if (newValue) {
+                    this.$unbind();
+                }
+                else {
+                    this.$bind();
+                }
+                break;
+        }
+    }
+    $bind() {
+        if (!this.$onPointerDown) {
+            this.$onPointerDown = this.$handlePointerDown.bind(this);
+            on(this, EVENT_POINTER_DOWN, this.$onPointerDown);
+        }
+        if (!this.$onPointerMove) {
+            this.$onPointerMove = this.$handlePointerMove.bind(this);
+            on(this.ownerDocument, EVENT_POINTER_MOVE, this.$onPointerMove);
+        }
+        if (!this.$onPointerUp) {
+            this.$onPointerUp = this.$handlePointerUp.bind(this);
+            on(this.ownerDocument, EVENT_POINTER_UP, this.$onPointerUp);
+        }
+        if (!this.$onWheel) {
+            this.$onWheel = this.$handleWheel.bind(this);
+            on(this, EVENT_WHEEL, this.$onWheel, {
+                passive: false,
+                capture: true,
+            });
+        }
+    }
+    $unbind() {
+        if (this.$onPointerDown) {
+            off(this, EVENT_POINTER_DOWN, this.$onPointerDown);
+            this.$onPointerDown = null;
+        }
+        if (this.$onPointerMove) {
+            off(this.ownerDocument, EVENT_POINTER_MOVE, this.$onPointerMove);
+            this.$onPointerMove = null;
+        }
+        if (this.$onPointerUp) {
+            off(this.ownerDocument, EVENT_POINTER_UP, this.$onPointerUp);
+            this.$onPointerUp = null;
+        }
+        if (this.$onWheel) {
+            off(this, EVENT_WHEEL, this.$onWheel, {
+                capture: true,
+            });
+            this.$onWheel = null;
+        }
+    }
+    $handlePointerDown(event) {
+        const { buttons, button, type } = event;
+        if (this.disabled || (
+        // Handle pointer or mouse event, and ignore touch event
+        ((type === 'pointerdown' && event.pointerType === 'mouse') || type === 'mousedown') && (
+        // No primary button (Usually the left button)
+        (isNumber(buttons) && buttons !== 1) || (isNumber(button) && button !== 0)
+            // Open context menu
+            || event.ctrlKey))) {
+            return;
+        }
+        const { $pointers } = this;
+        let action = '';
+        if (event.changedTouches) {
+            Array.from(event.changedTouches).forEach(({ identifier, pageX, pageY, }) => {
+                $pointers.set(identifier, {
+                    startX: pageX,
+                    startY: pageY,
+                    endX: pageX,
+                    endY: pageY,
+                });
+            });
+        }
+        else {
+            const { pointerId = 0, pageX, pageY } = event;
+            $pointers.set(pointerId, {
+                startX: pageX,
+                startY: pageY,
+                endX: pageX,
+                endY: pageY,
+            });
+        }
+        if ($pointers.size > 1) {
+            action = ACTION_TRANSFORM;
+        }
+        else if (isElement$1(event.target)) {
+            action = event.target.action || event.target.getAttribute(ATTRIBUTE_ACTION) || '';
+        }
+        if (this.$emit(EVENT_ACTION_START, {
+            action,
+            relatedEvent: event,
+        }) === false) {
+            return;
+        }
+        // Prevent page zooming in the browsers for iOS.
+        event.preventDefault();
+        this.$action = action;
+        this.style.willChange = 'transform';
+    }
+    $handlePointerMove(event) {
+        const { $action, $pointers } = this;
+        if (this.disabled || $action === ACTION_NONE || $pointers.size === 0) {
+            return;
+        }
+        if (this.$emit(EVENT_ACTION_MOVE, {
+            action: $action,
+            relatedEvent: event,
+        }) === false) {
+            return;
+        }
+        // Prevent page scrolling.
+        event.preventDefault();
+        if (event.changedTouches) {
+            Array.from(event.changedTouches).forEach(({ identifier, pageX, pageY, }) => {
+                const pointer = $pointers.get(identifier);
+                if (pointer) {
+                    Object.assign(pointer, {
+                        endX: pageX,
+                        endY: pageY,
+                    });
+                }
+            });
+        }
+        else {
+            const { pointerId = 0, pageX, pageY } = event;
+            const pointer = $pointers.get(pointerId);
+            if (pointer) {
+                Object.assign(pointer, {
+                    endX: pageX,
+                    endY: pageY,
+                });
+            }
+        }
+        const detail = {
+            action: $action,
+            relatedEvent: event,
+        };
+        if ($action === ACTION_TRANSFORM) {
+            const pointers2 = new Map($pointers);
+            let maxRotateRate = 0;
+            let maxScaleRate = 0;
+            let rotate = 0;
+            let scale = 0;
+            let centerX = event.pageX;
+            let centerY = event.pageY;
+            $pointers.forEach((pointer, pointerId) => {
+                pointers2.delete(pointerId);
+                pointers2.forEach((pointer2) => {
+                    let x1 = pointer2.startX - pointer.startX;
+                    let y1 = pointer2.startY - pointer.startY;
+                    let x2 = pointer2.endX - pointer.endX;
+                    let y2 = pointer2.endY - pointer.endY;
+                    let z1 = 0;
+                    let z2 = 0;
+                    let a1 = 0;
+                    let a2 = 0;
+                    if (x1 === 0) {
+                        if (y1 < 0) {
+                            a1 = Math.PI * 2;
+                        }
+                        else if (y1 > 0) {
+                            a1 = Math.PI;
+                        }
+                    }
+                    else if (x1 > 0) {
+                        a1 = (Math.PI / 2) + Math.atan(y1 / x1);
+                    }
+                    else if (x1 < 0) {
+                        a1 = (Math.PI * 1.5) + Math.atan(y1 / x1);
+                    }
+                    if (x2 === 0) {
+                        if (y2 < 0) {
+                            a2 = Math.PI * 2;
+                        }
+                        else if (y2 > 0) {
+                            a2 = Math.PI;
+                        }
+                    }
+                    else if (x2 > 0) {
+                        a2 = (Math.PI / 2) + Math.atan(y2 / x2);
+                    }
+                    else if (x2 < 0) {
+                        a2 = (Math.PI * 1.5) + Math.atan(y2 / x2);
+                    }
+                    if (a2 > 0 || a1 > 0) {
+                        const rotateRate = a2 - a1;
+                        const absRotateRate = Math.abs(rotateRate);
+                        if (absRotateRate > maxRotateRate) {
+                            maxRotateRate = absRotateRate;
+                            rotate = rotateRate;
+                            centerX = (pointer.startX + pointer2.startX) / 2;
+                            centerY = (pointer.startY + pointer2.startY) / 2;
+                        }
+                    }
+                    x1 = Math.abs(x1);
+                    y1 = Math.abs(y1);
+                    x2 = Math.abs(x2);
+                    y2 = Math.abs(y2);
+                    if (x1 > 0 && y1 > 0) {
+                        z1 = Math.sqrt((x1 * x1) + (y1 * y1));
+                    }
+                    else if (x1 > 0) {
+                        z1 = x1;
+                    }
+                    else if (y1 > 0) {
+                        z1 = y1;
+                    }
+                    if (x2 > 0 && y2 > 0) {
+                        z2 = Math.sqrt((x2 * x2) + (y2 * y2));
+                    }
+                    else if (x2 > 0) {
+                        z2 = x2;
+                    }
+                    else if (y2 > 0) {
+                        z2 = y2;
+                    }
+                    if (z1 > 0 && z2 > 0) {
+                        const scaleRate = (z2 - z1) / z1;
+                        const absScaleRate = Math.abs(scaleRate);
+                        if (absScaleRate > maxScaleRate) {
+                            maxScaleRate = absScaleRate;
+                            scale = scaleRate;
+                            centerX = (pointer.startX + pointer2.startX) / 2;
+                            centerY = (pointer.startY + pointer2.startY) / 2;
+                        }
+                    }
+                });
+            });
+            const rotatable = maxRotateRate > 0;
+            const scalable = maxScaleRate > 0;
+            if (rotatable && scalable) {
+                detail.rotate = rotate;
+                detail.scale = scale;
+                detail.centerX = centerX;
+                detail.centerY = centerY;
+            }
+            else if (rotatable) {
+                detail.action = ACTION_ROTATE;
+                detail.rotate = rotate;
+                detail.centerX = centerX;
+                detail.centerY = centerY;
+            }
+            else if (scalable) {
+                detail.action = ACTION_SCALE;
+                detail.scale = scale;
+                detail.centerX = centerX;
+                detail.centerY = centerY;
+            }
+            else {
+                detail.action = ACTION_NONE;
+            }
+        }
+        else {
+            const [pointer] = Array.from($pointers.values());
+            Object.assign(detail, pointer);
+        }
+        // Override the starting coordinate
+        $pointers.forEach((pointer) => {
+            pointer.startX = pointer.endX;
+            pointer.startY = pointer.endY;
+        });
+        if (detail.action !== ACTION_NONE) {
+            this.$emit(EVENT_ACTION, detail, {
+                cancelable: false,
+            });
+        }
+    }
+    $handlePointerUp(event) {
+        const { $action, $pointers } = this;
+        if (this.disabled || $action === ACTION_NONE) {
+            return;
+        }
+        if (this.$emit(EVENT_ACTION_END, {
+            action: $action,
+            relatedEvent: event,
+        }) === false) {
+            return;
+        }
+        event.preventDefault();
+        if (event.changedTouches) {
+            Array.from(event.changedTouches).forEach(({ identifier, }) => {
+                $pointers.delete(identifier);
+            });
+        }
+        else {
+            const { pointerId = 0 } = event;
+            $pointers.delete(pointerId);
+        }
+        if ($pointers.size === 0) {
+            this.style.willChange = '';
+            this.$action = ACTION_NONE;
+        }
+    }
+    $handleWheel(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        // Limit wheel speed to prevent zoom too fast (#21)
+        if (this.$wheeling) {
+            return;
+        }
+        this.$wheeling = true;
+        // Debounce by 50ms
+        setTimeout(() => {
+            this.$wheeling = false;
+        }, 50);
+        const delta = event.deltaY > 0 ? -1 : 1;
+        const scale = delta * this.scaleStep;
+        this.$emit(EVENT_ACTION, {
+            action: ACTION_SCALE,
+            scale,
+            relatedEvent: event,
+        }, {
+            cancelable: false,
+        });
+    }
+    /**
+     * Changes the current action to a new one.
+     * @param {string} action The new action.
+     * @returns {CropperCanvas} Returns `this` for chaining.
+     */
+    $setAction(action) {
+        if (isString(action)) {
+            this.$action = action;
+        }
+        return this;
+    }
+    /**
+     * Generates a real canvas element, with the image draw into if there is one.
+     * @param {object} [options] The available options.
+     * @param {number} [options.width] The width of the canvas.
+     * @param {number} [options.height] The height of the canvas.
+     * @param {Function} [options.beforeDraw] The function called before drawing the image onto the canvas.
+     * @returns {Promise} Returns a promise that resolves to the generated canvas element.
+     */
+    $toCanvas(options) {
+        return new Promise((resolve, reject) => {
+            if (!this.isConnected) {
+                reject(new Error('The current element is not connected to the DOM.'));
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            let width = this.offsetWidth;
+            let height = this.offsetHeight;
+            let scale = 1;
+            if (isPlainObject(options)
+                && (isPositiveNumber(options.width) || isPositiveNumber(options.height))) {
+                ({ width, height } = getAdjustedSizes({
+                    aspectRatio: width / height,
+                    width: options.width,
+                    height: options.height,
+                }));
+                scale = width / this.offsetWidth;
+            }
+            canvas.width = width;
+            canvas.height = height;
+            const cropperImage = this.querySelector(this.$getTagNameOf(CROPPER_IMAGE));
+            if (!cropperImage) {
+                resolve(canvas);
+                return;
+            }
+            cropperImage.$ready().then((image) => {
+                const context = canvas.getContext('2d');
+                if (context) {
+                    const [a, b, c, d, e, f] = cropperImage.$getTransform();
+                    let newE = e;
+                    let newF = f;
+                    let destWidth = image.naturalWidth;
+                    let destHeight = image.naturalHeight;
+                    if (scale !== 1) {
+                        newE *= scale;
+                        newF *= scale;
+                        destWidth *= scale;
+                        destHeight *= scale;
+                    }
+                    const centerX = destWidth / 2;
+                    const centerY = destHeight / 2;
+                    context.fillStyle = 'transparent';
+                    context.fillRect(0, 0, width, height);
+                    if (isPlainObject(options) && isFunction$1(options.beforeDraw)) {
+                        options.beforeDraw.call(this, context, canvas);
+                    }
+                    context.save();
+                    // Move the transform origin to the center of the image.
+                    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
+                    context.translate(centerX, centerY);
+                    context.transform(a, b, c, d, newE, newF);
+                    // Reset the transform origin to the top-left of the image.
+                    context.translate(-centerX, -centerY);
+                    context.drawImage(image, 0, 0, destWidth, destHeight);
+                    context.restore();
+                }
+                resolve(canvas);
+            }).catch(reject);
+        });
+    }
+}
+CropperCanvas.$name = CROPPER_CANVAS;
+CropperCanvas.$version = '2.0.0-beta.4';
+
+var style$6 = `:host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}`;
+
+const canvasCache$2 = new WeakMap();
+const NATIVE_ATTRIBUTES = [
+    'alt',
+    'crossorigin',
+    'decoding',
+    'importance',
+    'loading',
+    'referrerpolicy',
+    'sizes',
+    'src',
+    'srcset',
+];
+class CropperImage extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$matrix = [1, 0, 0, 1, 0, 0];
+        this.$onLoad = null;
+        this.$onCanvasAction = null;
+        this.$onCanvasActionEnd = null;
+        this.$onCanvasActionStart = null;
+        this.$actionStartTarget = null;
+        this.$style = style$6;
+        this.$image = new Image();
+        this.rotatable = true;
+        this.scalable = true;
+        this.skewable = true;
+        this.slottable = false;
+        this.translatable = true;
+    }
+    set $canvas(element) {
+        canvasCache$2.set(this, element);
+    }
+    get $canvas() {
+        return canvasCache$2.get(this);
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat(NATIVE_ATTRIBUTES, [
+            'rotatable',
+            'scalable',
+            'skewable',
+            'translatable',
+        ]);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+        // Inherits the native attributes
+        if (NATIVE_ATTRIBUTES.includes(name)) {
+            this.$image.setAttribute(name, newValue);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const { $image } = this;
+        const $canvas = this.closest(this.$getTagNameOf(CROPPER_CANVAS));
+        if ($canvas) {
+            this.$canvas = $canvas;
+            this.$setStyles({
+                // Make it a block element to avoid side effects (#1074).
+                display: 'block',
+                position: 'absolute',
+            });
+            this.$onCanvasActionStart = (event) => {
+                var _a, _b;
+                this.$actionStartTarget = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.relatedEvent) === null || _b === void 0 ? void 0 : _b.target;
+            };
+            this.$onCanvasActionEnd = () => {
+                this.$actionStartTarget = null;
+            };
+            this.$onCanvasAction = this.$handleAction.bind(this);
+            on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+            on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
+            on($canvas, EVENT_ACTION, this.$onCanvasAction);
+        }
+        this.$onLoad = this.$handleLoad.bind(this);
+        on($image, EVENT_LOAD, this.$onLoad);
+        this.$getShadowRoot().appendChild($image);
+    }
+    disconnectedCallback() {
+        const { $image, $canvas } = this;
+        if ($canvas) {
+            if (this.$onCanvasActionStart) {
+                off($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+                this.$onCanvasActionStart = null;
+            }
+            if (this.$onCanvasActionEnd) {
+                off($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
+                this.$onCanvasActionEnd = null;
+            }
+            if (this.$onCanvasAction) {
+                off($canvas, EVENT_ACTION, this.$onCanvasAction);
+                this.$onCanvasAction = null;
+            }
+        }
+        if ($image && this.$onLoad) {
+            off($image, EVENT_LOAD, this.$onLoad);
+            this.$onLoad = null;
+        }
+        this.$getShadowRoot().removeChild($image);
+        super.disconnectedCallback();
+    }
+    $handleLoad() {
+        const { $image } = this;
+        this.$setStyles({
+            width: $image.naturalWidth,
+            height: $image.naturalHeight,
+        });
+        if (this.$canvas) {
+            this.$center('cover');
+        }
+    }
+    $handleAction(event) {
+        if (this.hidden || !(this.rotatable || this.scalable || this.translatable)) {
+            return;
+        }
+        const { $canvas } = this;
+        const { detail } = event;
+        if (detail) {
+            const { relatedEvent } = detail;
+            let { action } = detail;
+            if (action === ACTION_TRANSFORM && (!this.rotatable || !this.scalable)) {
+                if (this.rotatable) {
+                    action = ACTION_ROTATE;
+                }
+                else if (this.scalable) {
+                    action = ACTION_SCALE;
+                }
+                else {
+                    action = ACTION_NONE;
+                }
+            }
+            switch (action) {
+                case ACTION_MOVE:
+                    if (this.translatable) {
+                        const cropperSelectionTagName = this.$getTagNameOf(CROPPER_SELECTION);
+                        let selection = $canvas.querySelector(cropperSelectionTagName);
+                        if (selection && selection.multiple && !selection.active) {
+                            selection = $canvas.querySelector(`${cropperSelectionTagName}[active]`);
+                        }
+                        if (!selection || selection.hidden || !selection.movable
+                            || !(this.$actionStartTarget && selection.contains(this.$actionStartTarget))) {
+                            this.$move(detail.endX - detail.startX, detail.endY - detail.startY);
+                        }
+                    }
+                    break;
+                case ACTION_ROTATE:
+                    if (this.rotatable) {
+                        if (relatedEvent) {
+                            const { x, y } = this.getBoundingClientRect();
+                            this.$rotate(detail.rotate, relatedEvent.clientX - x, relatedEvent.clientY - y);
+                        }
+                        else {
+                            this.$rotate(detail.rotate);
+                        }
+                    }
+                    break;
+                case ACTION_SCALE:
+                    if (this.scalable) {
+                        if (relatedEvent) {
+                            const { x, y } = this.getBoundingClientRect();
+                            this.$zoom(detail.scale, relatedEvent.clientX - x, relatedEvent.clientY - y);
+                        }
+                        else {
+                            this.$zoom(detail.scale);
+                        }
+                    }
+                    break;
+                case ACTION_TRANSFORM:
+                    if (this.rotatable && this.scalable) {
+                        const { rotate } = detail;
+                        let { scale } = detail;
+                        if (scale < 0) {
+                            scale = 1 / (1 - scale);
+                        }
+                        else {
+                            scale += 1;
+                        }
+                        const cos = Math.cos(rotate);
+                        const sin = Math.sin(rotate);
+                        const [scaleX, skewY, skewX, scaleY] = [
+                            cos * scale,
+                            sin * scale,
+                            -sin * scale,
+                            cos * scale,
+                        ];
+                        if (relatedEvent) {
+                            const clientRect = this.getBoundingClientRect();
+                            const x = relatedEvent.clientX - clientRect.x;
+                            const y = relatedEvent.clientY - clientRect.y;
+                            const [a, b, c, d] = this.$matrix;
+                            const originX = clientRect.width / 2;
+                            const originY = clientRect.height / 2;
+                            const moveX = x - originX;
+                            const moveY = y - originY;
+                            const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
+                            const translateY = (moveY - (b * translateX)) / d;
+                            /**
+                             * Equals to
+                             * this.$rotate(rotate, x, y);
+                             * this.$scale(scale, x, y);
+                             */
+                            this.$transform(scaleX, skewY, skewX, scaleY, translateX * (1 - scaleX) + translateY * skewX, translateY * (1 - scaleY) + translateX * skewY);
+                        }
+                        else {
+                            /**
+                             * Equals to
+                             * this.$rotate(rotate);
+                             * this.$scale(scale);
+                             */
+                            this.$transform(scaleX, skewY, skewX, scaleY, 0, 0);
+                        }
+                    }
+                    break;
+            }
+        }
+    }
+    /**
+     * Defers the callback to execute after successfully loading the image.
+     * @param {Function} [callback] The callback to execute after successfully loading the image.
+     * @returns {Promise} Returns a promise that resolves to the image element.
+     */
+    $ready(callback) {
+        const { $image } = this;
+        const promise = new Promise((resolve, reject) => {
+            const error = new Error('Failed to load the image source');
+            if ($image.complete) {
+                if ($image.naturalWidth > 0 && $image.naturalHeight > 0) {
+                    resolve($image);
+                }
+                else {
+                    reject(error);
+                }
+            }
+            else {
+                const onLoad = () => {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    off($image, EVENT_ERROR, onError);
+                    resolve($image);
+                };
+                const onError = () => {
+                    off($image, EVENT_LOAD, onLoad);
+                    reject(error);
+                };
+                once($image, EVENT_LOAD, onLoad);
+                once($image, EVENT_ERROR, onError);
+            }
+        });
+        if (isFunction$1(callback)) {
+            promise.then((image) => {
+                callback(image);
+                return image;
+            });
+        }
+        return promise;
+    }
+    /**
+     * Aligns the image to the center of its parent element.
+     * @param {string} [size] The size of the image.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $center(size) {
+        const { parentElement } = this;
+        if (!parentElement) {
+            return this;
+        }
+        const container = parentElement.getBoundingClientRect();
+        const containerWidth = container.width;
+        const containerHeight = container.height;
+        const { x, y, width, height, } = this.getBoundingClientRect();
+        const startX = x + (width / 2);
+        const startY = y + (height / 2);
+        const endX = container.x + (containerWidth / 2);
+        const endY = container.y + (containerHeight / 2);
+        this.$move(endX - startX, endY - startY);
+        if (size && (width !== containerWidth || height !== containerHeight)) {
+            const scaleX = containerWidth / width;
+            const scaleY = containerHeight / height;
+            switch (size) {
+                case 'cover':
+                    this.$scale(Math.max(scaleX, scaleY));
+                    break;
+                case 'contain':
+                    this.$scale(Math.min(scaleX, scaleY));
+                    break;
+            }
+        }
+        return this;
+    }
+    /**
+     * Moves the image.
+     * @param {number} x The moving distance in the horizontal direction.
+     * @param {number} [y] The moving distance in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $move(x, y = x) {
+        if (this.translatable && isNumber(x) && isNumber(y)) {
+            const [a, b, c, d] = this.$matrix;
+            const e = ((x * d) - (c * y)) / ((a * d) - (c * b));
+            const f = (y - (b * e)) / d;
+            this.$translate(e, f);
+        }
+        return this;
+    }
+    /**
+     * Moves the image to a specific position.
+     * @param {number} x The new position in the horizontal direction.
+     * @param {number} [y] The new position in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $moveTo(x, y = x) {
+        if (this.translatable && isNumber(x) && isNumber(y)) {
+            const [a, b, c, d] = this.$matrix;
+            const e = ((x * d) - (c * y)) / ((a * d) - (c * b));
+            const f = (y - (b * e)) / d;
+            this.$setTransform(a, b, c, d, e, f);
+        }
+        return this;
+    }
+    /**
+     * Rotates the image.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate}
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate}
+     * @param {number|string} angle The rotation angle (in radians).
+     * @param {number} [x] The rotation origin in the horizontal, defaults to the center of the image.
+     * @param {number} [y] The rotation origin in the vertical, defaults to the center of the image.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $rotate(angle, x, y) {
+        if (this.rotatable) {
+            const radian = toAngleInRadian(angle);
+            const cos = Math.cos(radian);
+            const sin = Math.sin(radian);
+            const [scaleX, skewY, skewX, scaleY] = [cos, sin, -sin, cos];
+            if (isNumber(x) && isNumber(y)) {
+                const [a, b, c, d] = this.$matrix;
+                const { width, height } = this.getBoundingClientRect();
+                const originX = width / 2;
+                const originY = height / 2;
+                const moveX = x - originX;
+                const moveY = y - originY;
+                const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
+                const translateY = (moveY - (b * translateX)) / d;
+                /**
+                 * Equals to
+                 * this.$translate(translateX, translateX);
+                 * this.$rotate(angle);
+                 * this.$translate(-translateX, -translateX);
+                 */
+                this.$transform(scaleX, skewY, skewX, scaleY, translateX * (1 - scaleX) - translateY * skewX, translateY * (1 - scaleY) - translateX * skewY);
+            }
+            else {
+                this.$transform(scaleX, skewY, skewX, scaleY, 0, 0);
+            }
+        }
+        return this;
+    }
+    /**
+     * Zooms the image.
+     * @param {number} scale The zoom factor. Positive numbers for zooming in, and negative numbers for zooming out.
+     * @param {number} [x] The zoom origin in the horizontal, defaults to the center of the image.
+     * @param {number} [y] The zoom origin in the vertical, defaults to the center of the image.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $zoom(scale, x, y) {
+        if (!this.scalable || scale === 0) {
+            return this;
+        }
+        if (scale < 0) {
+            scale = 1 / (1 - scale);
+        }
+        else {
+            scale += 1;
+        }
+        if (isNumber(x) && isNumber(y)) {
+            const [a, b, c, d] = this.$matrix;
+            const { width, height } = this.getBoundingClientRect();
+            const originX = width / 2;
+            const originY = height / 2;
+            const moveX = x - originX;
+            const moveY = y - originY;
+            const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
+            const translateY = (moveY - (b * translateX)) / d;
+            /**
+             * Equals to
+             * this.$translate(translateX, translateX);
+             * this.$scale(scale);
+             * this.$translate(-translateX, -translateX);
+             */
+            this.$transform(scale, 0, 0, scale, translateX * (1 - scale), translateY * (1 - scale));
+        }
+        else {
+            this.$scale(scale);
+        }
+        return this;
+    }
+    /**
+     * Scales the image.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale}
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale}
+     * @param {number} x The scaling factor in the horizontal direction.
+     * @param {number} [y] The scaling factor in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $scale(x, y = x) {
+        if (this.scalable) {
+            this.$transform(x, 0, 0, y, 0, 0);
+        }
+        return this;
+    }
+    /**
+     * Skews the image.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew}
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform}
+     * @param {number|string} x The skewing angle in the horizontal direction.
+     * @param {number|string} [y] The skewing angle in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $skew(x, y = 0) {
+        if (this.skewable) {
+            const radianX = toAngleInRadian(x);
+            const radianY = toAngleInRadian(y);
+            this.$transform(1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0);
+        }
+        return this;
+    }
+    /**
+     * Translates the image.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate}
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate}
+     * @param {number} x The translating distance in the horizontal direction.
+     * @param {number} [y] The translating distance in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $translate(x, y = x) {
+        if (this.translatable && isNumber(x) && isNumber(y)) {
+            this.$transform(1, 0, 0, 1, x, y);
+        }
+        return this;
+    }
+    /**
+     * Transforms the image.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix}
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform}
+     * @param {number} a The scaling factor in the horizontal direction.
+     * @param {number} b The skewing angle in the vertical direction.
+     * @param {number} c The skewing angle in the horizontal direction.
+     * @param {number} d The scaling factor in the vertical direction.
+     * @param {number} e The translating distance in the horizontal direction.
+     * @param {number} f The translating distance in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $transform(a, b, c, d, e, f) {
+        if (isNumber(a)
+            && isNumber(b)
+            && isNumber(c)
+            && isNumber(d)
+            && isNumber(e)
+            && isNumber(f)) {
+            return this.$setTransform(multiplyMatrices(this.$matrix, [a, b, c, d, e, f]));
+        }
+        return this;
+    }
+    /**
+     * Resets (overrides) the current transform to the specific identity matrix.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform}
+     * @param {number|Array} a The scaling factor in the horizontal direction.
+     * @param {number} b The skewing angle in the vertical direction.
+     * @param {number} c The skewing angle in the horizontal direction.
+     * @param {number} d The scaling factor in the vertical direction.
+     * @param {number} e The translating distance in the horizontal direction.
+     * @param {number} f The translating distance in the vertical direction.
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $setTransform(a, b, c, d, e, f) {
+        if (this.rotatable || this.scalable || this.skewable || this.translatable) {
+            if (Array.isArray(a)) {
+                [a, b, c, d, e, f] = a;
+            }
+            if (isNumber(a)
+                && isNumber(b)
+                && isNumber(c)
+                && isNumber(d)
+                && isNumber(e)
+                && isNumber(f)) {
+                const newMatrix = [a, b, c, d, e, f];
+                if (this.$emit(EVENT_TRANSFORM, {
+                    matrix: newMatrix,
+                    oldMatrix: this.$matrix,
+                }) === false) {
+                    return this;
+                }
+                this.$matrix = newMatrix;
+                this.style.transform = `matrix(${newMatrix.join(', ')})`;
+            }
+        }
+        return this;
+    }
+    /**
+     * Retrieves the current transformation matrix being applied to the element.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform}
+     * @returns {Array} Returns the readonly transformation matrix.
+     */
+    $getTransform() {
+        return this.$matrix.slice();
+    }
+    /**
+     * Resets the current transform to the initial identity matrix.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform}
+     * @returns {CropperImage} Returns `this` for chaining.
+     */
+    $resetTransform() {
+        return this.$setTransform([1, 0, 0, 1, 0, 0]);
+    }
+}
+CropperImage.$name = CROPPER_IMAGE;
+CropperImage.$version = '2.0.0-beta.4';
+
+var style$5 = `:host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}`;
+
+const canvasCache$1 = new WeakMap();
+class CropperShade extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$onCanvasChange = null;
+        this.$onCanvasActionEnd = null;
+        this.$onCanvasActionStart = null;
+        this.$style = style$5;
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+        this.height = 0;
+        this.slottable = false;
+        this.themeColor = 'rgba(0, 0, 0, 0.65)';
+    }
+    set $canvas(element) {
+        canvasCache$1.set(this, element);
+    }
+    get $canvas() {
+        return canvasCache$1.get(this);
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'height',
+            'width',
+            'x',
+            'y',
+        ]);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $canvas = this.closest(this.$getTagNameOf(CROPPER_CANVAS));
+        if ($canvas) {
+            this.$canvas = $canvas;
+            this.style.position = 'absolute';
+            const $selection = $canvas.querySelector(this.$getTagNameOf(CROPPER_SELECTION));
+            if ($selection) {
+                this.$onCanvasActionStart = (event) => {
+                    if ($selection.hidden && event.detail.action === ACTION_SELECT) {
+                        this.hidden = false;
+                    }
+                };
+                this.$onCanvasActionEnd = (event) => {
+                    if ($selection.hidden && event.detail.action === ACTION_SELECT) {
+                        this.hidden = true;
+                    }
+                };
+                this.$onCanvasChange = (event) => {
+                    const { x, y, width, height, } = event.detail;
+                    this.$change(x, y, width, height);
+                    if ($selection.hidden || (x === 0 && y === 0 && width === 0 && height === 0)) {
+                        this.hidden = true;
+                    }
+                };
+                on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+                on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
+                on($canvas, EVENT_CHANGE, this.$onCanvasChange);
+            }
+        }
+        this.$render();
+    }
+    disconnectedCallback() {
+        const { $canvas } = this;
+        if ($canvas) {
+            if (this.$onCanvasActionStart) {
+                off($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+                this.$onCanvasActionStart = null;
+            }
+            if (this.$onCanvasActionEnd) {
+                off($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
+                this.$onCanvasActionEnd = null;
+            }
+            if (this.$onCanvasChange) {
+                off($canvas, EVENT_CHANGE, this.$onCanvasChange);
+                this.$onCanvasChange = null;
+            }
+        }
+        super.disconnectedCallback();
+    }
+    /**
+     * Changes the position and/or size of the shade.
+     * @param {number} x The new position in the horizontal direction.
+     * @param {number} y The new position in the vertical direction.
+     * @param {number} [width] The new width.
+     * @param {number} [height] The new height.
+     * @returns {CropperShade} Returns `this` for chaining.
+     */
+    $change(x, y, width = this.width, height = this.height) {
+        if (!isNumber(x)
+            || !isNumber(y)
+            || !isNumber(width)
+            || !isNumber(height)
+            || (x === this.x && y === this.y && width === this.width && height === this.height)) {
+            return this;
+        }
+        if (this.hidden) {
+            this.hidden = false;
+        }
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        return this.$render();
+    }
+    /**
+     * Resets the shade to its initial position and size.
+     * @returns {CropperShade} Returns `this` for chaining.
+     */
+    $reset() {
+        return this.$change(0, 0, 0, 0);
+    }
+    /**
+     * Refreshes the position or size of the shade.
+     * @returns {CropperShade} Returns `this` for chaining.
+     */
+    $render() {
+        return this.$setStyles({
+            transform: `translate(${this.x}px, ${this.y}px)`,
+            width: this.width,
+            height: this.height,
+            outlineWidth: WINDOW.innerWidth,
+        });
+    }
+}
+CropperShade.$name = CROPPER_SHADE;
+CropperShade.$version = '2.0.0-beta.4';
+
+var style$4 = `:host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}`;
+
+class CropperHandle extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$onCanvasCropEnd = null;
+        this.$onCanvasCropStart = null;
+        this.$style = style$4;
+        this.action = ACTION_NONE;
+        this.plain = false;
+        this.slottable = false;
+        this.themeColor = 'rgba(51, 153, 255, 0.5)';
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'action',
+            'plain',
+        ]);
+    }
+}
+CropperHandle.$name = CROPPER_HANDLE;
+CropperHandle.$version = '2.0.0-beta.4';
+
+var style$3 = `:host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}`;
+
+const canvasCache = new WeakMap();
+class CropperSelection extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$onCanvasAction = null;
+        this.$onCanvasActionStart = null;
+        this.$onCanvasActionEnd = null;
+        this.$onDocumentKeyDown = null;
+        this.$action = '';
+        this.$actionStartTarget = null;
+        this.$style = style$3;
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+        this.height = 0;
+        this.aspectRatio = NaN;
+        this.initialAspectRatio = NaN;
+        this.initialCoverage = NaN;
+        this.active = false;
+        this.movable = false;
+        this.resizable = false;
+        this.zoomable = false;
+        this.multiple = false;
+        this.keyboard = false;
+        this.outlined = false;
+        this.precise = false;
+    }
+    set $canvas(element) {
+        canvasCache.set(this, element);
+    }
+    get $canvas() {
+        return canvasCache.get(this);
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'active',
+            'aspect-ratio',
+            'height',
+            'initial-aspect-ratio',
+            'initial-coverage',
+            'keyboard',
+            'movable',
+            'multiple',
+            'outlined',
+            'precise',
+            'resizable',
+            'width',
+            'x',
+            'y',
+            'zoomable',
+        ]);
+    }
+    $propertyChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        super.$propertyChangedCallback(name, oldValue, newValue);
+        switch (name) {
+            case 'aspectRatio':
+                if (!isPositiveNumber(newValue)) {
+                    this.aspectRatio = NaN;
+                }
+                break;
+            case 'initialAspectRatio':
+                if (!isPositiveNumber(newValue)) {
+                    this.initialAspectRatio = NaN;
+                }
+                break;
+            case 'initialCoverage':
+                if (!isPositiveNumber(newValue) || newValue > 1) {
+                    this.initialCoverage = NaN;
+                }
+                break;
+            case 'keyboard':
+                this.$nextTick(() => {
+                    if (this.$canvas) {
+                        if (newValue) {
+                            if (!this.$onDocumentKeyDown) {
+                                this.$onDocumentKeyDown = this.$handleKeyDown.bind(this);
+                                on(this.ownerDocument, EVENT_KEYDOWN, this.$onDocumentKeyDown);
+                            }
+                        }
+                        else if (this.$onDocumentKeyDown) {
+                            off(this.ownerDocument, EVENT_KEYDOWN, this.$onDocumentKeyDown);
+                            this.$onDocumentKeyDown = null;
+                        }
+                    }
+                });
+                break;
+            case 'multiple':
+                this.$nextTick(() => {
+                    if (this.$canvas) {
+                        const selections = this.$getSelections();
+                        if (newValue) {
+                            selections.forEach((selection) => {
+                                selection.active = false;
+                            });
+                            this.active = true;
+                            this.$emit(EVENT_CHANGE, {
+                                x: this.x,
+                                y: this.y,
+                                width: this.width,
+                                height: this.height,
+                            });
+                        }
+                        else {
+                            this.active = false;
+                            selections.slice(1).forEach((selection) => {
+                                this.$removeSelection(selection);
+                            });
+                        }
+                    }
+                });
+                break;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $canvas = this.closest(this.$getTagNameOf(CROPPER_CANVAS));
+        if ($canvas) {
+            this.$canvas = $canvas;
+            this.$setStyles({
+                position: 'absolute',
+                transform: `translate(${this.x}px, ${this.y}px)`,
+            });
+            if (!this.hidden) {
+                this.$render();
+            }
+            const { initialCoverage, parentElement } = this;
+            if (isPositiveNumber(initialCoverage) && parentElement) {
+                const aspectRatio = this.aspectRatio || this.initialAspectRatio;
+                const { offsetWidth, offsetHeight } = parentElement;
+                let width = offsetWidth * initialCoverage;
+                let height = offsetHeight * initialCoverage;
+                if (isPositiveNumber(aspectRatio)) {
+                    ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }));
+                }
+                this.$change(this.x, this.y, width, height);
+                this.$center();
+            }
+            this.$onCanvasActionStart = this.$handleActionStart.bind(this);
+            this.$onCanvasActionEnd = this.$handleActionEnd.bind(this);
+            this.$onCanvasAction = this.$handleAction.bind(this);
+            on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+            on($canvas, EVENT_ACTION_END, this.$onCanvasActionStart);
+            on($canvas, EVENT_ACTION, this.$onCanvasAction);
+        }
+        else {
+            this.$render();
+        }
+    }
+    disconnectedCallback() {
+        const { $canvas } = this;
+        if ($canvas) {
+            if (this.$onCanvasActionStart) {
+                off($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
+                this.$onCanvasActionStart = null;
+            }
+            if (this.$onCanvasActionEnd) {
+                off($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
+                this.$onCanvasActionEnd = null;
+            }
+            if (this.$onCanvasAction) {
+                off($canvas, EVENT_ACTION, this.$onCanvasAction);
+                this.$onCanvasAction = null;
+            }
+        }
+        super.disconnectedCallback();
+    }
+    $getSelections() {
+        let selections = [];
+        if (this.parentElement) {
+            selections = Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(CROPPER_SELECTION)));
+        }
+        return selections;
+    }
+    $createSelection() {
+        const newSelection = this.cloneNode(true);
+        if (this.hasAttribute('id')) {
+            newSelection.removeAttribute('id');
+        }
+        this.active = false;
+        if (this.parentElement) {
+            this.parentElement.insertBefore(newSelection, this.nextSibling);
+        }
+        return newSelection;
+    }
+    $removeSelection(selection = this) {
+        if (this.parentElement) {
+            const selections = this.$getSelections();
+            if (selections.length > 1) {
+                const index = selections.indexOf(selection);
+                const activeSelection = selections[index + 1] || selections[index - 1];
+                if (activeSelection) {
+                    selection.active = false;
+                    this.parentElement.removeChild(selection);
+                    activeSelection.active = true;
+                    activeSelection.$emit(EVENT_CHANGE, {
+                        x: activeSelection.x,
+                        y: activeSelection.y,
+                        width: activeSelection.width,
+                        height: activeSelection.height,
+                    });
+                }
+            }
+            else {
+                this.$reset();
+                this.hidden = true;
+            }
+        }
+    }
+    $handleActionStart(event) {
+        var _a, _b;
+        const relatedTarget = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.relatedEvent) === null || _b === void 0 ? void 0 : _b.target;
+        this.$action = '';
+        this.$actionStartTarget = relatedTarget;
+        if (!this.hidden
+            && this.multiple
+            && !this.active
+            && relatedTarget === this
+            && this.parentElement) {
+            this.$getSelections().forEach((selection) => {
+                selection.active = false;
+            });
+            this.active = true;
+            this.$emit(EVENT_CHANGE, {
+                x: this.x,
+                y: this.y,
+                width: this.width,
+                height: this.height,
+            });
+        }
+    }
+    $handleAction(event) {
+        const { currentTarget, detail } = event;
+        if (currentTarget && detail) {
+            const { relatedEvent } = detail;
+            let { action } = detail;
+            // Switching to another selection
+            if (!action && this.multiple) {
+                // Get the `action` property from the focusing in selection
+                action = this.$action || (relatedEvent === null || relatedEvent === void 0 ? void 0 : relatedEvent.target.action);
+                this.$action = action;
+            }
+            if (!action
+                || (this.hidden && action !== ACTION_SELECT)
+                || (this.multiple && !this.active && action !== ACTION_SCALE)) {
+                return;
+            }
+            const moveX = detail.endX - detail.startX;
+            const moveY = detail.endY - detail.startY;
+            const { width, height } = this;
+            let { aspectRatio } = this;
+            // Locking aspect ratio by holding shift key
+            if (!isPositiveNumber(aspectRatio) && event.shiftKey) {
+                aspectRatio = isPositiveNumber(width) && isPositiveNumber(height) ? width / height : 1;
+            }
+            switch (action) {
+                case ACTION_SELECT: {
+                    const { $canvas } = this;
+                    const offset = getOffset(currentTarget);
+                    (this.multiple && !this.hidden ? this.$createSelection() : this).$change(detail.startX - offset.left, detail.startY - offset.top, moveX, moveY, aspectRatio);
+                    action = ACTION_RESIZE_SOUTHEAST;
+                    if (moveX < 0) {
+                        if (moveY > 0) {
+                            action = ACTION_RESIZE_SOUTHWEST;
+                        }
+                        else if (moveY < 0) {
+                            action = ACTION_RESIZE_NORTHWEST;
+                        }
+                    }
+                    else if (moveX > 0) {
+                        if (moveY < 0) {
+                            action = ACTION_RESIZE_NORTHEAST;
+                        }
+                    }
+                    if ($canvas) {
+                        $canvas.$action = action;
+                    }
+                    break;
+                }
+                case ACTION_MOVE:
+                    if (this.movable
+                        && (this.$actionStartTarget && this.contains(this.$actionStartTarget))) {
+                        this.$move(moveX, moveY);
+                    }
+                    break;
+                case ACTION_SCALE:
+                    if (relatedEvent && this.zoomable) {
+                        const offset = getOffset(currentTarget);
+                        this.$zoom(detail.scale, relatedEvent.pageX - offset.left, relatedEvent.pageY - offset.top);
+                    }
+                    break;
+                default:
+                    this.$resize(action, moveX, moveY, aspectRatio);
+            }
+        }
+    }
+    $handleActionEnd() {
+        this.$action = '';
+        this.$actionStartTarget = null;
+    }
+    $handleKeyDown(event) {
+        if (this.hidden
+            || !this.keyboard
+            || (this.multiple && !this.active)
+            || event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Backspace':
+                if (event.metaKey) {
+                    event.preventDefault();
+                    this.$removeSelection();
+                }
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.$removeSelection();
+                break;
+            // Move to the left
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.$move(-1, 0);
+                break;
+            // Move to the right
+            case 'ArrowRight':
+                event.preventDefault();
+                this.$move(1, 0);
+                break;
+            // Move to the top
+            case 'ArrowUp':
+                event.preventDefault();
+                this.$move(0, -1);
+                break;
+            // Move to the bottom
+            case 'ArrowDown':
+                event.preventDefault();
+                this.$move(0, 1);
+                break;
+            case '+':
+                event.preventDefault();
+                this.$zoom(0.1);
+                break;
+            case '-':
+                event.preventDefault();
+                this.$zoom(-0.1);
+                break;
+        }
+    }
+    /**
+     * Aligns the selection to the center of its parent element.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $center() {
+        const { parentElement } = this;
+        if (!parentElement) {
+            return this;
+        }
+        const x = (parentElement.offsetWidth - this.width) / 2;
+        const y = (parentElement.offsetHeight - this.height) / 2;
+        return this.$change(x, y);
+    }
+    /**
+     * Moves the selection.
+     * @param {number} x The moving distance in the horizontal direction.
+     * @param {number} [y] The moving distance in the vertical direction.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $move(x, y = x) {
+        return this.$moveTo(this.x + x, this.y + y);
+    }
+    /**
+     * Moves the selection to a specific position.
+     * @param {number} x The new position in the horizontal direction.
+     * @param {number} [y] The new position in the vertical direction.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $moveTo(x, y = x) {
+        if (!this.movable) {
+            return this;
+        }
+        return this.$change(x, y);
+    }
+    /**
+     * Adjusts the size the selection on a specific side or corner.
+     * @param {string} action Indicates the side or corner to resize.
+     * @param {number} [offsetX] The horizontal offset of the specific side or corner.
+     * @param {number} [offsetY] The vertical offset of the specific side or corner.
+     * @param {number} [aspectRatio] The aspect ratio for computing the new size if it is necessary.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $resize(action, offsetX = 0, offsetY = 0, aspectRatio = this.aspectRatio) {
+        if (!this.resizable) {
+            return this;
+        }
+        const hasValidAspectRatio = isPositiveNumber(aspectRatio);
+        const { $canvas } = this;
+        let { x, y, width, height, } = this;
+        switch (action) {
+            case ACTION_RESIZE_NORTH:
+                y += offsetY;
+                height -= offsetY;
+                if (height < 0) {
+                    action = ACTION_RESIZE_SOUTH;
+                    height = -height;
+                    y -= height;
+                }
+                if (hasValidAspectRatio) {
+                    offsetX = offsetY * aspectRatio;
+                    x += offsetX / 2;
+                    width -= offsetX;
+                    if (width < 0) {
+                        width = -width;
+                        x -= width;
+                    }
+                }
+                break;
+            case ACTION_RESIZE_EAST:
+                width += offsetX;
+                if (width < 0) {
+                    action = ACTION_RESIZE_WEST;
+                    width = -width;
+                    x -= width;
+                }
+                if (hasValidAspectRatio) {
+                    offsetY = offsetX / aspectRatio;
+                    y -= offsetY / 2;
+                    height += offsetY;
+                    if (height < 0) {
+                        height = -height;
+                        y -= height;
+                    }
+                }
+                break;
+            case ACTION_RESIZE_SOUTH:
+                height += offsetY;
+                if (height < 0) {
+                    action = ACTION_RESIZE_NORTH;
+                    height = -height;
+                    y -= height;
+                }
+                if (hasValidAspectRatio) {
+                    offsetX = offsetY * aspectRatio;
+                    x -= offsetX / 2;
+                    width += offsetX;
+                    if (width < 0) {
+                        width = -width;
+                        x -= width;
+                    }
+                }
+                break;
+            case ACTION_RESIZE_WEST:
+                x += offsetX;
+                width -= offsetX;
+                if (width < 0) {
+                    action = ACTION_RESIZE_EAST;
+                    width = -width;
+                    x -= width;
+                }
+                if (hasValidAspectRatio) {
+                    offsetY = offsetX / aspectRatio;
+                    y += offsetY / 2;
+                    height -= offsetY;
+                    if (height < 0) {
+                        height = -height;
+                        y -= height;
+                    }
+                }
+                break;
+            case ACTION_RESIZE_NORTHEAST:
+                if (hasValidAspectRatio) {
+                    offsetY = -offsetX / aspectRatio;
+                }
+                y += offsetY;
+                height -= offsetY;
+                width += offsetX;
+                if (width < 0 && height < 0) {
+                    action = ACTION_RESIZE_SOUTHWEST;
+                    width = -width;
+                    height = -height;
+                    x -= width;
+                    y -= height;
+                }
+                else if (width < 0) {
+                    action = ACTION_RESIZE_NORTHWEST;
+                    width = -width;
+                    x -= width;
+                }
+                else if (height < 0) {
+                    action = ACTION_RESIZE_SOUTHEAST;
+                    height = -height;
+                    y -= height;
+                }
+                break;
+            case ACTION_RESIZE_NORTHWEST:
+                if (hasValidAspectRatio) {
+                    offsetY = offsetX / aspectRatio;
+                }
+                x += offsetX;
+                y += offsetY;
+                width -= offsetX;
+                height -= offsetY;
+                if (width < 0 && height < 0) {
+                    action = ACTION_RESIZE_SOUTHEAST;
+                    width = -width;
+                    height = -height;
+                    x -= width;
+                    y -= height;
+                }
+                else if (width < 0) {
+                    action = ACTION_RESIZE_NORTHEAST;
+                    width = -width;
+                    x -= width;
+                }
+                else if (height < 0) {
+                    action = ACTION_RESIZE_SOUTHWEST;
+                    height = -height;
+                    y -= height;
+                }
+                break;
+            case ACTION_RESIZE_SOUTHEAST:
+                if (hasValidAspectRatio) {
+                    offsetY = offsetX / aspectRatio;
+                }
+                width += offsetX;
+                height += offsetY;
+                if (width < 0 && height < 0) {
+                    action = ACTION_RESIZE_NORTHWEST;
+                    width = -width;
+                    height = -height;
+                    x -= width;
+                    y -= height;
+                }
+                else if (width < 0) {
+                    action = ACTION_RESIZE_SOUTHWEST;
+                    width = -width;
+                    x -= width;
+                }
+                else if (height < 0) {
+                    action = ACTION_RESIZE_NORTHEAST;
+                    height = -height;
+                    y -= height;
+                }
+                break;
+            case ACTION_RESIZE_SOUTHWEST:
+                if (hasValidAspectRatio) {
+                    offsetY = -offsetX / aspectRatio;
+                }
+                x += offsetX;
+                width -= offsetX;
+                height += offsetY;
+                if (width < 0 && height < 0) {
+                    action = ACTION_RESIZE_NORTHEAST;
+                    width = -width;
+                    height = -height;
+                    x -= width;
+                    y -= height;
+                }
+                else if (width < 0) {
+                    action = ACTION_RESIZE_SOUTHEAST;
+                    width = -width;
+                    x -= width;
+                }
+                else if (height < 0) {
+                    action = ACTION_RESIZE_NORTHWEST;
+                    height = -height;
+                    y -= height;
+                }
+                break;
+        }
+        if ($canvas) {
+            $canvas.$setAction(action);
+        }
+        return this.$change(x, y, width, height);
+    }
+    /**
+     * Zooms the selection.
+     * @param {number} scale The zoom factor. Positive numbers for zooming in, and negative numbers for zooming out.
+     * @param {number} [x] The zoom origin in the horizontal, defaults to the center of the selection.
+     * @param {number} [y] The zoom origin in the vertical, defaults to the center of the selection.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $zoom(scale, x, y) {
+        if (!this.zoomable || scale === 0) {
+            return this;
+        }
+        if (scale < 0) {
+            scale = 1 / (1 - scale);
+        }
+        else {
+            scale += 1;
+        }
+        const { width, height } = this;
+        const newWidth = width * scale;
+        const newHeight = height * scale;
+        let newX = this.x;
+        let newY = this.y;
+        if (isNumber(x) && isNumber(y)) {
+            newX -= (newWidth - width) * ((x - this.x) / width);
+            newY -= (newHeight - height) * ((y - this.y) / height);
+        }
+        else {
+            // Zoom from the center of the selection
+            newX -= (newWidth - width) / 2;
+            newY -= (newHeight - height) / 2;
+        }
+        return this.$change(newX, newY, newWidth, newHeight);
+    }
+    /**
+     * Changes the position and/or size of the selection.
+     * @param {number} x The new position in the horizontal direction.
+     * @param {number} y The new position in the vertical direction.
+     * @param {number} [width] The new width.
+     * @param {number} [height] The new height.
+     * @param {number} [aspectRatio] The new aspect ratio for this change only.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $change(x, y, width = this.width, height = this.height, aspectRatio = this.aspectRatio) {
+        if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height)) {
+            return this;
+        }
+        if (!this.precise) {
+            x = Math.round(x);
+            y = Math.round(y);
+            width = Math.round(width);
+            height = Math.round(height);
+        }
+        if (x === this.x && y === this.y && width === this.width && height === this.height) {
+            return this;
+        }
+        if (this.hidden) {
+            this.hidden = false;
+        }
+        if (isPositiveNumber(aspectRatio)) {
+            ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }, 'cover'));
+        }
+        if (this.$emit(EVENT_CHANGE, {
+            x,
+            y,
+            width,
+            height,
+        }) === false) {
+            return this;
+        }
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        return this.$render();
+    }
+    /**
+     * Resets the selection to its initial position and size.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $reset() {
+        return this.$change(0, 0, 0, 0);
+    }
+    /**
+     * Refreshes the position or size of the selection.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $render() {
+        return this.$setStyles({
+            transform: `translate(${this.x}px, ${this.y}px)`,
+            width: this.width,
+            height: this.height,
+        });
+    }
+    /**
+     * Generates a real canvas element, with the image (selected area only) draw into if there is one.
+     * @param {object} [options] The available options.
+     * @param {number} [options.width] The width of the canvas.
+     * @param {number} [options.height] The height of the canvas.
+     * @param {Function} [options.beforeDraw] The function called before drawing the image onto the canvas.
+     * @returns {Promise} Returns a promise that resolves to the generated canvas element.
+     */
+    $toCanvas(options) {
+        return new Promise((resolve, reject) => {
+            if (!this.isConnected) {
+                reject(new Error('The current element is not connected to the DOM.'));
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            let { width, height } = this;
+            let scale = 1;
+            if (isPlainObject(options)
+                && (isPositiveNumber(options.width) || isPositiveNumber(options.height))) {
+                ({ width, height } = getAdjustedSizes({
+                    aspectRatio: width / height,
+                    width: options.width,
+                    height: options.height,
+                }));
+                scale = width / this.width;
+            }
+            canvas.width = width;
+            canvas.height = height;
+            if (!this.$canvas) {
+                resolve(canvas);
+                return;
+            }
+            const cropperImage = this.$canvas.querySelector(this.$getTagNameOf(CROPPER_IMAGE));
+            if (!cropperImage) {
+                resolve(canvas);
+                return;
+            }
+            cropperImage.$ready().then((image) => {
+                const context = canvas.getContext('2d');
+                if (context) {
+                    const [a, b, c, d, e, f] = cropperImage.$getTransform();
+                    const offsetX = -this.x;
+                    const offsetY = -this.y;
+                    const translateX = ((offsetX * d) - (c * offsetY)) / ((a * d) - (c * b));
+                    const translateY = (offsetY - (b * translateX)) / d;
+                    let newE = a * translateX + c * translateY + e;
+                    let newF = b * translateX + d * translateY + f;
+                    let destWidth = image.naturalWidth;
+                    let destHeight = image.naturalHeight;
+                    if (scale !== 1) {
+                        newE *= scale;
+                        newF *= scale;
+                        destWidth *= scale;
+                        destHeight *= scale;
+                    }
+                    const centerX = destWidth / 2;
+                    const centerY = destHeight / 2;
+                    context.fillStyle = 'transparent';
+                    context.fillRect(0, 0, width, height);
+                    if (isPlainObject(options) && isFunction$1(options.beforeDraw)) {
+                        options.beforeDraw.call(this, context, canvas);
+                    }
+                    context.save();
+                    // Move the transform origin to the center of the image.
+                    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
+                    context.translate(centerX, centerY);
+                    context.transform(a, b, c, d, newE, newF);
+                    // Move the transform origin to the top-left of the image.
+                    context.translate(-centerX, -centerY);
+                    context.drawImage(image, 0, 0, destWidth, destHeight);
+                    context.restore();
+                }
+                resolve(canvas);
+            }).catch(reject);
+        });
+    }
+}
+CropperSelection.$name = CROPPER_SELECTION;
+CropperSelection.$version = '2.0.0-beta.4';
+
+var style$2 = `:host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}`;
+
+class CropperGrid extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$style = style$2;
+        this.bordered = false;
+        this.columns = 3;
+        this.covered = false;
+        this.rows = 3;
+        this.slottable = false;
+        this.themeColor = 'rgba(238, 238, 238, 0.5)';
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'bordered',
+            'columns',
+            'covered',
+            'rows',
+        ]);
+    }
+    $propertyChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        super.$propertyChangedCallback(name, oldValue, newValue);
+        if (name === 'rows' || name === 'columns') {
+            this.$render();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.$render();
+    }
+    $render() {
+        const shadow = this.$getShadowRoot();
+        const fragment = document.createDocumentFragment();
+        for (let i = 0; i < this.rows; i += 1) {
+            const row = document.createElement('span');
+            row.setAttribute('role', 'row');
+            for (let j = 0; j < this.columns; j += 1) {
+                const column = document.createElement('span');
+                column.setAttribute('role', 'gridcell');
+                row.appendChild(column);
+            }
+            fragment.appendChild(row);
+        }
+        if (shadow) {
+            shadow.innerHTML = '';
+            shadow.appendChild(fragment);
+        }
+    }
+}
+CropperGrid.$name = CROPPER_GIRD;
+CropperGrid.$version = '2.0.0-beta.4';
+
+var style$1 = `:host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}`;
+
+class CropperCrosshair extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$style = style$1;
+        this.centered = false;
+        this.slottable = false;
+        this.themeColor = 'rgba(238, 238, 238, 0.5)';
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'centered',
+        ]);
+    }
+}
+CropperCrosshair.$name = CROPPER_CROSSHAIR;
+CropperCrosshair.$version = '2.0.0-beta.4';
+
+var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
+
+const imageCache = new WeakMap();
+const selectionCache = new WeakMap();
+const sourceImageCache = new WeakMap();
+const RESIZE_BOTH = 'both';
+const RESIZE_HORIZONTAL = 'horizontal';
+const RESIZE_VERTICAL = 'vertical';
+const RESIZE_NONE = 'none';
+class CropperViewer extends CropperElement {
+    constructor() {
+        super(...arguments);
+        this.$onSelectionChange = null;
+        this.$onSourceImageLoad = null;
+        this.$onSourceImageTransform = null;
+        this.$scale = 1;
+        this.$style = style;
+        this.resize = RESIZE_VERTICAL;
+        this.selection = '';
+        this.slottable = false;
+    }
+    set $image(element) {
+        imageCache.set(this, element);
+    }
+    get $image() {
+        return imageCache.get(this);
+    }
+    set $sourceImage(element) {
+        sourceImageCache.set(this, element);
+    }
+    get $sourceImage() {
+        return sourceImageCache.get(this);
+    }
+    set $selection(element) {
+        selectionCache.set(this, element);
+    }
+    get $selection() {
+        return selectionCache.get(this);
+    }
+    static get observedAttributes() {
+        return super.observedAttributes.concat([
+            'resize',
+            'selection',
+        ]);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let $selection = null;
+        if (this.selection) {
+            $selection = this.ownerDocument.querySelector(this.selection);
+        }
+        else {
+            $selection = this.closest(this.$getTagNameOf(CROPPER_SELECTION));
+        }
+        if (isElement$1($selection)) {
+            this.$selection = $selection;
+            this.$onSelectionChange = this.$handleSelectionChange.bind(this);
+            on($selection, EVENT_CHANGE, this.$onSelectionChange);
+            const $canvas = $selection.closest(this.$getTagNameOf(CROPPER_CANVAS));
+            if ($canvas) {
+                const $sourceImage = $canvas.querySelector(this.$getTagNameOf(CROPPER_IMAGE));
+                if ($sourceImage) {
+                    this.$sourceImage = $sourceImage;
+                    this.$image = $sourceImage.cloneNode(true);
+                    this.$getShadowRoot().appendChild(this.$image);
+                    this.$onSourceImageLoad = this.$handleSourceImageLoad.bind(this);
+                    this.$onSourceImageTransform = this.$handleSourceImageTransform.bind(this);
+                    on($sourceImage.$image, EVENT_LOAD, this.$onSourceImageLoad);
+                    on($sourceImage, EVENT_TRANSFORM, this.$onSourceImageTransform);
+                }
+            }
+            this.$render();
+        }
+    }
+    disconnectedCallback() {
+        const { $selection, $sourceImage } = this;
+        if ($selection && this.$onSelectionChange) {
+            off($selection, EVENT_CHANGE, this.$onSelectionChange);
+            this.$onSelectionChange = null;
+        }
+        if ($sourceImage && this.$onSourceImageLoad) {
+            off($sourceImage.$image, EVENT_LOAD, this.$onSourceImageLoad);
+            this.$onSourceImageLoad = null;
+        }
+        if ($sourceImage && this.$onSourceImageTransform) {
+            off($sourceImage, EVENT_TRANSFORM, this.$onSourceImageTransform);
+            this.$onSourceImageTransform = null;
+        }
+        super.disconnectedCallback();
+    }
+    $handleSelectionChange(event) {
+        this.$render(event.detail);
+    }
+    $handleSourceImageLoad() {
+        const { $image, $sourceImage } = this;
+        const oldSrc = $image.getAttribute('src');
+        const newSrc = $sourceImage.getAttribute('src');
+        if (newSrc && newSrc !== oldSrc) {
+            $image.setAttribute('src', newSrc);
+            $image.$ready(() => {
+                setTimeout(() => {
+                    const { x, y } = this.$selection;
+                    this.$transformImageByOffset($sourceImage.$getTransform(), -x, -y);
+                });
+            });
+        }
+    }
+    $handleSourceImageTransform(event) {
+        const { x, y } = this.$selection;
+        this.$transformImageByOffset(event.detail.matrix, -x, -y);
+    }
+    $render(selection) {
+        const { x, y, width, height, } = selection || this.$selection;
+        const styles = {};
+        const { clientWidth, clientHeight } = this;
+        let newWidth = clientWidth;
+        let newHeight = clientHeight;
+        let scale = NaN;
+        switch (this.resize) {
+            case RESIZE_BOTH:
+                scale = 1;
+                newWidth = width;
+                newHeight = height;
+                styles.width = width;
+                styles.height = height;
+                break;
+            case RESIZE_HORIZONTAL:
+                scale = clientHeight / height;
+                newWidth = width * scale;
+                styles.width = newWidth;
+                break;
+            case RESIZE_VERTICAL:
+                scale = clientWidth / width;
+                newHeight = height * scale;
+                styles.height = newHeight;
+                break;
+            case RESIZE_NONE:
+            default:
+                if (clientWidth > 0) {
+                    scale = clientWidth / width;
+                }
+                else if (clientHeight > 0) {
+                    scale = clientHeight / height;
+                }
+        }
+        this.$scale = scale;
+        this.$setStyles(styles);
+        if (this.$sourceImage) {
+            this.$transformImageByOffset(this.$sourceImage.$getTransform(), -x, -y);
+        }
+    }
+    $transformImageByOffset(matrix, x, y) {
+        const { $image, $scale, $sourceImage, } = this;
+        if ($sourceImage && $image && $scale > 0) {
+            const [a, b, c, d, e, f] = matrix;
+            const translateX = ((x * d) - (c * y)) / ((a * d) - (c * b));
+            const translateY = (y - (b * translateX)) / d;
+            const newE = a * translateX + c * translateY + e;
+            const newF = b * translateX + d * translateY + f;
+            $image.$ready((image) => {
+                this.$setStyles.call($image, {
+                    width: image.naturalWidth * $scale,
+                    height: image.naturalHeight * $scale,
+                });
+            });
+            $image.$setTransform(a, b, c, d, newE * $scale, newF * $scale);
+        }
+    }
+}
+CropperViewer.$name = CROPPER_VIEWER;
+CropperViewer.$version = '2.0.0-beta.4';
+
+/*! Cropper.js v2.0.0-beta.4 | (c) 2015-present Chen Fengyuan | MIT */
+CropperCanvas.$define();
+CropperCrosshair.$define();
+CropperGrid.$define();
+CropperHandle.$define();
+CropperImage.$define();
+CropperSelection.$define();
+CropperShade.$define();
+CropperViewer.$define();
+
+const cropperComponentCss = "/*!@.relative*/.relative.sc-p-cropper{position:relative!important}/*!@.mb-6*/.mb-6.sc-p-cropper{margin-bottom:1.5rem!important}/*!@.flex*/.flex.sc-p-cropper{display:flex!important}/*!@.h-4*/.h-4.sc-p-cropper{height:1rem!important}/*!@.h-\\[2px\\]*/.h-\\[2px\\].sc-p-cropper{height:2px!important}/*!@.w-4*/.w-4.sc-p-cropper{width:1rem!important}/*!@.w-full*/.w-full.sc-p-cropper{width:100%!important}/*!@.appearance-none*/.appearance-none.sc-p-cropper{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}/*!@.flex-col*/.flex-col.sc-p-cropper{flex-direction:column!important}/*!@.items-center*/.items-center.sc-p-cropper{align-items:center!important}/*!@.justify-between*/.justify-between.sc-p-cropper{justify-content:space-between!important}/*!@.rounded-round*/.rounded-round.sc-p-cropper{border-radius:100%!important}/*!@.border-0*/.border-0.sc-p-cropper{border-width:0!important}/*!@**/*.sc-p-cropper{box-sizing:border-box}/*!@:host*/.sc-p-cropper-h{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}/*!@:host .p-input[type=range]*/.sc-p-cropper-h .p-input[type=range].sc-p-cropper{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;position:relative}/*!@:host .p-input[type=range]::-moz-range-track,:host .p-input[type=range]::-webkit-slider-runnable-track*/.sc-p-cropper-h .p-input[type=range].sc-p-cropper::-moz-range-track,.sc-p-cropper-h .p-input[type=range].sc-p-cropper::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));height:2px}/*!@:host .p-input[type=range]::-moz-range-thumb,:host .p-input[type=range]::-webkit-slider-thumb*/.sc-p-cropper-h .p-input[type=range].sc-p-cropper::-moz-range-thumb,.sc-p-cropper-h .p-input[type=range].sc-p-cropper::-webkit-slider-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-radius:100%;border-width:0;height:1rem;width:1rem}/*!@.static*/.static.sc-p-cropper{position:static!important}/*!@.hidden*/.hidden.sc-p-cropper{display:none!important}/*!@.h-\\[17\\.5rem\\]*/.h-\\[17\\.5rem\\].sc-p-cropper{height:17.5rem!important}/*!@.transform*/.transform.sc-p-cropper{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}/*!@.resize*/.resize.sc-p-cropper{resize:both!important}/*!@.gap-2*/.gap-2.sc-p-cropper{gap:.5rem!important}/*!@.rounded*/.rounded.sc-p-cropper{border-radius:.25rem!important}/*!@.border-b*/.border-b.sc-p-cropper{border-bottom-width:1px!important}/*!@.border-solid*/.border-solid.sc-p-cropper{border-style:solid!important}/*!@.border-mystic-medium*/.border-mystic-medium.sc-p-cropper{--tw-border-opacity:1!important;border-color:rgb(227 236 243/var(--tw-border-opacity))!important}/*!@.bg-white*/.bg-white.sc-p-cropper{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}/*!@.px-14*/.px-14.sc-p-cropper{padding-left:3.5rem!important;padding-right:3.5rem!important}/*!@.text-storm-vague*/.text-storm-vague.sc-p-cropper{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}@media (min-width:40rem){/*!@.tablet\\:max-w-xs*/.tablet\\:max-w-xs.sc-p-cropper{max-width:20rem!important}/*!@.tablet\\:px-1*/.tablet\\:px-1.sc-p-cropper{padding-left:.25rem!important;padding-right:.25rem!important}}";
+
+class Cropper {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 3);
+    this._maxScale = 0;
+    this._minScale = 0;
+    this.variant = 'user';
+    this.value = undefined;
+    this.returnType = 'base64';
+    this._loaded = false;
+    this._currentScale = 0;
+  }
+  onResize() {
+    if (this._resizeDebounceTimeout) {
+      clearTimeout(this._resizeDebounceTimeout);
+    }
+    this._resizeDebounceTimeout = setTimeout(() => {
+      this._selectionRef.$center();
+      this._imageRef.$center();
+    }, 200);
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this._loaded = true;
+    }, 200);
+  }
+  render() {
+    return (hAsync(Host, { class: "p-cropper" }, this._loaded && (hAsync("cropper-canvas", { class: "h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white", onAction: () => this._onAction() }, hAsync("cropper-image", { src: this.value, alt: "Picture", ref: (ref) => this._setImageRef(ref), scalable: true, crossorigin: "anonymous" }), hAsync("cropper-shade", { class: clsx({
+        'rounded-round': this.variant === 'user',
+        rounded: this.variant === 'company',
+      }), "theme-color": "rgba(255, 255, 255, 0.5)", hidden: true }), hAsync("cropper-selection", { "initial-coverage": "0.7", "aspect-ratio": "1", ref: (ref) => (this._selectionRef = ref) }), hAsync("cropper-handle", { action: "move", plain: true }))), hAsync("div", { class: "flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1" }, hAsync("p-icon", { variant: "minus" }), hAsync("input", { class: "p-input w-full", type: "range", min: "0", max: "100", value: this._currentScale, onInput: (ev) => this._onInput(ev.target.value), step: "0.5" }), hAsync("p-icon", { variant: "plus" }))));
+  }
+  _setImageRef(ref) {
+    if (this._imageRef) {
+      return;
+    }
+    this._imageRef = ref;
+    this._imageRef.$ready((image) => setTimeout(() => this._setInitialState(image), 200));
+  }
+  _setInitialState(image) {
+    let scale;
+    if (image.naturalWidth > image.naturalHeight) {
+      // set scale by height
+      scale = 200 / image.naturalHeight;
+    }
+    if (image.naturalHeight >= image.naturalWidth) {
+      // set scale by width
+      scale = 200 / image.naturalWidth;
+    }
+    const current = this._imageRef.$getTransform();
+    this._minScale = scale;
+    this._maxScale = current[0];
+    this._selectionRef.$resize('nw-resize', 200, 200, 1);
+    this._selectionRef.$center();
+    this._setScale(scale);
+    this._toCanvas();
+  }
+  _onAction() {
+    this._setCurrentScale();
+    this._toCanvas();
+  }
+  _setScale(scale, setCenter = true, setCurrentScale = true) {
+    const transform = this._imageRef.$getTransform();
+    this._imageRef.$setTransform([
+      scale,
+      0,
+      0,
+      scale,
+      transform[4],
+      transform[5],
+    ]);
+    if (setCenter) {
+      this._imageRef.$center();
+    }
+    if (setCurrentScale) {
+      this._setCurrentScale();
+    }
+  }
+  _setCurrentScale() {
+    const transform = this._imageRef.$getTransform();
+    const current = transform[0];
+    if (current < this._minScale) {
+      this._setScale(this._minScale, true, false);
+      this._currentScale = 0;
+      return;
+    }
+    if (current > this._maxScale) {
+      this._setScale(this._maxScale, true, false);
+      this._currentScale = 100;
+      return;
+    }
+    if (current === this._minScale) {
+      this._currentScale = 0;
+      return;
+    }
+    if (current === this._maxScale) {
+      this._currentScale = 100;
+      return;
+    }
+    const minMaxDiff = this._maxScale - this._minScale;
+    const currentDiff = current - this._minScale;
+    const percentage = (currentDiff / minMaxDiff) * 100;
+    this._currentScale = percentage;
+  }
+  _onInput(value) {
+    const transform = this._imageRef.$getTransform();
+    const current = transform[0];
+    const minMaxDiff = this._maxScale - this._minScale;
+    const toSet = minMaxDiff * (value / 100);
+    if (toSet === current) {
+      return;
+    }
+    this._setScale(toSet + this._minScale, false, false);
+    this._currentScale = value;
+    this._toCanvas();
+  }
+  _toCanvas() {
+    if (this._toCanvasDebounceTimeout) {
+      clearTimeout(this._toCanvasDebounceTimeout);
+    }
+    this._toCanvasDebounceTimeout = setTimeout(async () => {
+      const canvas = await this._selectionRef.$toCanvas();
+      if (this.returnType === 'canvas') {
+        this.valueChange.emit(canvas);
+        return;
+      }
+      const data = canvas.toDataURL('image/png');
+      this.valueChange.emit(data);
+    }, 200);
+  }
+  static get style() { return cropperComponentCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "p-cropper",
+    "$members$": {
+      "variant": [513],
+      "value": [8],
+      "returnType": [1, "return-type"],
+      "_loaded": [32],
+      "_currentScale": [32]
+    },
+    "$listeners$": [[9, "resize", "onResize"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["variant", "variant"]]
+  }; }
+}
+
 const childOf = (c, p) => {
   while ((c = c.parentNode) && c !== p)
     ;
@@ -12885,18 +15705,9 @@ var person = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
-var plan = `<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>⚛️ Atoms/icons/plan</title>
-    <defs>
-        <rect id="path-1" x="0" y="-4.54747351e-13" width="16" height="16"></rect>
-    </defs>
-    <g id="⚛️-Atoms/icons/plan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <g id="Bounding-box"></g>
-        <path d="M10.4142136,-0.985786282 L13.4142136,2.01421372 C13.7892863,2.38928647 14,2.8979943 14,3.42842728 L14,13.6000002 C14,14.7045697 13.1045695,15.6000002 12,15.6000002 L6,15.6000002 C4.8954305,15.6000002 4,14.7045697 4,13.6000002 L4,3.42842728 C4,2.8979943 4.21071368,2.38928647 4.58578644,2.01421372 L7.58578644,-0.985786282 C8.36683502,-1.76683487 9.63316498,-1.76683487 10.4142136,-0.985786282 Z M9.23357664,6.60000016 C8.9026764,6.60000016 8.59975669,6.66786719 8.32481752,6.80360126 C8.04987835,6.93933534 7.81386861,7.13462619 7.61678832,7.38947384 C7.41970803,7.64432149 7.2676399,7.95872592 7.16058394,8.33268714 C7.05352798,8.70664835 7,9.12908603 7,9.60000016 C7,10.0764544 7.05352798,10.5002772 7.16058394,10.8714683 C7.2676399,11.2426594 7.41970803,11.5556788 7.61678832,11.8105265 C7.81386861,12.0653741 8.04987835,12.260665 8.32481752,12.396399 C8.59975669,12.5321331 8.9026764,12.6000002 9.23357664,12.6000002 C9.47688564,12.6000002 9.69221411,12.5695292 9.87956204,12.5085874 C10.06691,12.4476456 10.2323601,12.3673132 10.3759124,12.2675902 C10.5194647,12.1678672 10.6411192,12.0556788 10.7408759,11.9310251 C10.8406326,11.8063713 10.9270073,11.6803326 11,11.5529087 L10.2043796,10.8880888 C9.97080292,11.3590029 9.64720195,11.59446 9.23357664,11.59446 C8.99026764,11.59446 8.77858881,11.5127425 8.59854015,11.3493076 C8.41849148,11.1858727 8.29440389,10.9462605 8.22627737,10.6304711 L9.90510949,10.6304711 L9.90510949,9.88254863 L8.16788321,9.88254863 L8.16788321,9.31745168 L9.90510949,9.31745168 L9.90510949,8.56952924 L8.22627737,8.56952924 C8.29927007,8.27036027 8.4270073,8.0349032 8.60948905,7.86315805 C8.7919708,7.6914129 9,7.60554032 9.23357664,7.60554032 C9.44768856,7.60554032 9.62408759,7.65955694 9.76277372,7.76759018 C9.90145985,7.87562342 10.0243309,8.03767329 10.1313869,8.25373977 L10.9270073,7.59723007 C10.8491484,7.47534642 10.7627737,7.35346276 10.6678832,7.2315791 C10.5729927,7.10969545 10.459854,7.00304725 10.3284672,6.9116345 C10.1970803,6.82022176 10.0425791,6.74542952 9.8649635,6.68725777 C9.68734793,6.62908603 9.47688564,6.60000016 9.23357664,6.60000016 Z M9,1.60000016 C8.44771525,1.60000016 8,2.04771541 8,2.60000016 C8,3.15228491 8.44771525,3.60000016 9,3.60000016 C9.55228475,3.60000016 10,3.15228491 10,2.60000016 C10,2.04771541 9.55228475,1.60000016 9,1.60000016 Z" id="Combined-Shape" fill="currentColor" mask="url(#mask-2)" transform="translate(9, 7.0142) rotate(45) translate(-9, -7.0142)"></path>
+var plan = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="currentColor" d="M16,2.07320636 L16,6.4711412 C16,7.02098971 15.7815735,7.54831786 15.3927719,7.93711947 L7.93711947,15.3927719 C7.12748203,16.2024094 5.81480036,16.2024094 5.00516292,15.3927719 L0.607228085,10.9948371 C-0.202409362,10.1851996 -0.202409362,8.87251797 0.607228085,8.06288053 L8.06288053,0.607228085 C8.45168214,0.218426472 8.97901029,0 9.5288588,0 L13.9267936,0 C15.0717939,0 16,0.928206105 16,2.07320636 Z M9.57430689,6.76811139 C9.33176061,6.52556511 9.05997795,6.35327405 8.75895892,6.25123822 C8.4579399,6.1492024 8.14180125,6.11935591 7.81054298,6.16169875 C7.47928471,6.20404159 7.13736539,6.32303234 6.78478502,6.51867099 C6.43220465,6.71430965 6.083327,6.98471645 5.73815206,7.32989139 C5.38891623,7.67912721 5.11749422,8.02902009 4.923886,8.37957001 C4.73027779,8.73011994 4.61230226,9.07102404 4.56995942,9.40228231 C4.52761657,9.73354058 4.55746307,10.0496792 4.65949889,10.3506983 C4.76153472,10.6517173 4.93382578,10.9234999 5.17637206,11.1660462 C5.35471492,11.3443891 5.53488319,11.4798877 5.71687689,11.572542 C5.89887059,11.6651963 6.07902651,11.7275866 6.25734467,11.759713 C6.43566282,11.7918394 6.60706711,11.798778 6.77155751,11.7805288 C6.93604792,11.7622795 7.09174469,11.7332061 7.23864783,11.6933087 L7.14277249,10.6228218 C6.6263884,10.7967876 6.21660494,10.7321791 5.91342208,10.4289962 C5.73507922,10.2506533 5.63981894,10.0355971 5.62764124,9.78382734 C5.61546353,9.53205761 5.70014181,9.26546963 5.88167606,8.98406337 L7.11224177,10.2146291 L7.66046079,9.66641006 L6.3870928,8.39304206 L6.80130273,7.97883213 L8.07467072,9.25220013 L8.62288975,8.7039811 L7.39232404,7.4734154 C7.66511451,7.30763064 7.93133198,7.22867317 8.19097645,7.23654298 C8.45062092,7.24441279 8.66604773,7.33395227 8.83725687,7.50516141 C8.99419859,7.66210313 9.08390356,7.83099529 9.1063718,8.01183791 C9.12884003,8.19268053 9.10012239,8.40152446 9.02021886,8.6383697 L10.0846145,8.74033637 C10.1168842,8.59392726 10.1429118,8.44127615 10.1626975,8.28238304 C10.1824832,8.12348993 10.1777257,7.96238853 10.1484252,7.79907884 C10.1191246,7.63576915 10.0606987,7.46769953 9.97314772,7.29486999 C9.88559669,7.12204045 9.75264975,6.94645425 9.57430689,6.76811139 Z M13.0680434,2.93195656 C12.6632247,2.52713783 12.0068839,2.52713783 11.6020652,2.93195656 C11.1972464,3.33677528 11.1972464,3.99311611 11.6020652,4.39793483 C12.0068839,4.80275356 12.6632247,4.80275356 13.0680434,4.39793483 C13.4728622,3.99311611 13.4728622,3.33677528 13.0680434,2.93195656 Z" mask="url(#b)"/>
     </g>
 </svg>`;
 
@@ -15161,7 +17972,7 @@ class Datepicker {
   }; }
 }
 
-const dividerComponentCss = "/*!@.my-2*/.my-2.sc-p-divider{margin-bottom:.5rem!important;margin-top:.5rem!important}/*!@.block*/.block.sc-p-divider{display:block!important}/*!@.flex*/.flex.sc-p-divider{display:flex!important}/*!@.h-px*/.h-px.sc-p-divider{height:1px!important}/*!@.w-full*/.w-full.sc-p-divider{width:100%!important}/*!@.bg-mystic-medium*/.bg-mystic-medium.sc-p-divider{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}/*!@**/*.sc-p-divider{box-sizing:border-box}/*!@:host*/.sc-p-divider-h{display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}/*!@:host .content*/.sc-p-divider-h .content.sc-p-divider{align-items:center;display:flex;width:100%}/*!@:host .content:after,:host .content:before*/.sc-p-divider-h .content.sc-p-divider:after,.sc-p-divider-h .content.sc-p-divider:before{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}/*!@.items-center*/.items-center.sc-p-divider{align-items:center!important}/*!@.px-2*/.px-2.sc-p-divider{padding-left:.5rem!important;padding-right:.5rem!important}";
+const dividerComponentCss = "/*!@.my-2*/.my-2.sc-p-divider{margin-bottom:.5rem!important;margin-top:.5rem!important}/*!@.block*/.block.sc-p-divider{display:block!important}/*!@.flex*/.flex.sc-p-divider{display:flex!important}/*!@.h-px*/.h-px.sc-p-divider{height:1px!important}/*!@.w-full*/.w-full.sc-p-divider{width:100%!important}/*!@.bg-mystic-medium*/.bg-mystic-medium.sc-p-divider{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}/*!@**/*.sc-p-divider{box-sizing:border-box}/*!@:host*/.sc-p-divider-h{display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}/*!@:host .content*/.sc-p-divider-h .content.sc-p-divider{align-items:center;display:flex;width:100%}/*!@:host .content:after,:host .content:before*/.sc-p-divider-h .content.sc-p-divider:after,.sc-p-divider-h .content.sc-p-divider:before{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}/*!@.static*/.static.sc-p-divider{position:static!important}/*!@.items-center*/.items-center.sc-p-divider{align-items:center!important}/*!@.px-2*/.px-2.sc-p-divider{padding-left:.5rem!important;padding-right:.5rem!important}";
 
 class Divider {
   constructor(hostRef) {
@@ -17233,6 +20044,7 @@ class Modal {
     this.showMobileFooter = false;
     this.backdropClickClose = true;
     this.scrollLock = true;
+    this.padding = true;
     this._closing = false;
   }
   componentWillLoad() {
@@ -17249,7 +20061,7 @@ class Modal {
     const footerContent = hAsync("slot", { name: "footer" });
     return (hAsync(Host, { class: "p-modal" }, hAsync("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, hAsync("p-modal-container", { size: this.size, closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (hAsync("p-modal-header", { showClose: this.showClose, onClose: (ev) => this.close(ev.detail) }, this._hasHeaderSlot
       ? headerContent
-      : this.header)), hAsync("p-modal-body", { variant: this.variant, rounded: !this._hasFooterSlot }, bodyContent), this._hasFooterSlot && (hAsync("p-modal-footer", null, footerContent))))));
+      : this.header)), hAsync("p-modal-body", { variant: this.variant, rounded: !this._hasFooterSlot, padding: this.padding }, bodyContent), this._hasFooterSlot && (hAsync("p-modal-footer", null, footerContent))))));
   }
   _backdropClick(ev) {
     if (!this.backdropClickClose) {
@@ -17280,6 +20092,7 @@ class Modal {
       "showMobileFooter": [4, "show-mobile-footer"],
       "backdropClickClose": [4, "backdrop-click-close"],
       "scrollLock": [4, "scroll-lock"],
+      "padding": [4],
       "_closing": [32]
     },
     "$listeners$": undefined,
@@ -17311,16 +20124,17 @@ class ModalBody$1 {
   }; }
 }
 
-const modalBodyComponentCss = "/*!@.rounded-b-none*/.rounded-b-none.sc-p-modal-body{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}/*!@.px-6*/.px-6.sc-p-modal-body{padding-left:1.5rem!important;padding-right:1.5rem!important}/*!@**/*.sc-p-modal-body{box-sizing:border-box}/*!@:host*/.sc-p-modal-body-h{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){/*!@:host*/.sc-p-modal-body-h{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){/*!@:host*/.sc-p-modal-body-h{padding-left:3.5rem;padding-right:3.5rem}}/*!@:host(.variant-table)*/.variant-table.sc-p-modal-body-h{padding-left:1.5rem;padding-right:1.5rem}/*!@:host(.is-rounded)*/.is-rounded.sc-p-modal-body-h{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){/*!@:host(.is-rounded)*/.is-rounded.sc-p-modal-body-h{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){/*!@.tablet\\:px-10*/.tablet\\:px-10.sc-p-modal-body{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){/*!@.desktop-xs\\:px-14*/.desktop-xs\\:px-14.sc-p-modal-body{padding-left:3.5rem!important;padding-right:3.5rem!important}}/*!@.static*/.static.sc-p-modal-body{position:static!important}/*!@.rounded*/.rounded.sc-p-modal-body{border-radius:.25rem!important}";
+const modalBodyComponentCss = "/*!@.rounded-b-none*/.rounded-b-none.sc-p-modal-body{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}/*!@.px-6*/.px-6.sc-p-modal-body{padding-left:1.5rem!important;padding-right:1.5rem!important}/*!@.py-6*/.py-6.sc-p-modal-body{padding-bottom:1.5rem!important;padding-top:1.5rem!important}/*!@**/*.sc-p-modal-body{box-sizing:border-box}/*!@:host*/.sc-p-modal-body-h{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){/*!@:host*/.sc-p-modal-body-h{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){/*!@:host*/.sc-p-modal-body-h{padding-left:3.5rem;padding-right:3.5rem}}/*!@:host(.variant-table)*/.variant-table.sc-p-modal-body-h{padding-left:1.5rem;padding-right:1.5rem}/*!@:host(.is-rounded)*/.is-rounded.sc-p-modal-body-h{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){/*!@:host(.is-rounded)*/.is-rounded.sc-p-modal-body-h{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}/*!@:host(.no-padding)*/.no-padding.sc-p-modal-body-h{padding:0}@media (min-width:40rem){/*!@.tablet\\:px-10*/.tablet\\:px-10.sc-p-modal-body{padding-left:2.5rem!important;padding-right:2.5rem!important}}/*!@.static*/.static.sc-p-modal-body{position:static!important}/*!@.rounded*/.rounded.sc-p-modal-body{border-radius:.25rem!important}";
 
 class ModalBody {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.variant = 'default';
     this.rounded = false;
+    this.padding = true;
   }
   render() {
-    return (hAsync(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'}` }, hAsync("slot", null)));
+    return (hAsync(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'} ${!this.padding && 'no-padding'}` }, hAsync("slot", null)));
   }
   static get style() { return modalBodyComponentCss; }
   static get cmpMeta() { return {
@@ -17328,7 +20142,8 @@ class ModalBody {
     "$tagName$": "p-modal-body",
     "$members$": {
       "variant": [1],
-      "rounded": [4]
+      "rounded": [4],
+      "padding": [4]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -20355,6 +23170,7 @@ registerComponents([
   CardHeader,
   ContentSlider,
   Counter,
+  Cropper,
   Datepicker,
   Divider,
   Drawer,