@haklex/rich-renderer-mermaid 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -1,1837 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useColorScheme } from "@haklex/rich-editor";
 import { usePortalTheme, presentDialog } from "@haklex/rich-editor-ui";
-import React, { forwardRef, createElement, useRef, useImperativeHandle, useEffect, useContext, useState, useId, useCallback } from "react";
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-const toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-const hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-  return false;
-};
-const Icon = forwardRef(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => createElement(
-    "svg",
-    {
-      ref,
-      ...defaultAttributes,
-      width: size,
-      height: size,
-      stroke: color,
-      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      className: mergeClasses("lucide", className),
-      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-      ...rest
-    },
-    [
-      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-      ...Array.isArray(children) ? children : [children]
-    ]
-  )
-);
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef(
-    ({ className, ...props }, ref) => createElement(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-const __iconNode$b = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
-  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
-];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
-const __iconNode$a = [
-  ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
-  ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
-  ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
-];
-const CodeXml = createLucideIcon("code-xml", __iconNode$a);
-const __iconNode$9 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M12 3v18", key: "108xh3" }]
-];
-const Columns2 = createLucideIcon("columns-2", __iconNode$9);
-const __iconNode$8 = [
-  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
-  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
-];
-const Copy = createLucideIcon("copy", __iconNode$8);
-const __iconNode$7 = [
-  ["path", { d: "M12 15V3", key: "m9g1x1" }],
-  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
-  ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
-];
-const Download = createLucideIcon("download", __iconNode$7);
-const __iconNode$6 = [
-  [
-    "path",
-    {
-      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
-      key: "1nclc0"
-    }
-  ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-];
-const Eye = createLucideIcon("eye", __iconNode$6);
-const __iconNode$5 = [
-  ["path", { d: "M2 16s9-15 20-4C11 23 2 8 2 8", key: "h4oh4o" }]
-];
-const FishSymbol = createLucideIcon("fish-symbol", __iconNode$5);
-const __iconNode$4 = [
-  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
-  ["path", { d: "m21 3-7 7", key: "1l2asr" }],
-  ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
-  ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
-];
-const Maximize2 = createLucideIcon("maximize-2", __iconNode$4);
-const __iconNode$3 = [
-  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
-  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
-];
-const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$3);
-const __iconNode$2 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-const X = createLucideIcon("x", __iconNode$2);
-const __iconNode$1 = [
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
-  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
-  ["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
-  ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
-];
-const ZoomIn = createLucideIcon("zoom-in", __iconNode$1);
-const __iconNode = [
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
-  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
-  ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
-];
-const ZoomOut = createLucideIcon("zoom-out", __iconNode);
-var roundNumber = function(num, decimal) {
-  return Number(num.toFixed(decimal));
-};
-var checkIsNumber = function(num, defaultValue) {
-  return defaultValue;
-};
-var handleCallback = function(context, event, callback) {
-  if (callback && typeof callback === "function") {
-    callback(context, event);
-  }
-};
-var easeOut = function(t) {
-  return -Math.cos(t * Math.PI) / 2 + 0.5;
-};
-var linear = function(t) {
-  return t;
-};
-var easeInQuad = function(t) {
-  return t * t;
-};
-var easeOutQuad = function(t) {
-  return t * (2 - t);
-};
-var easeInOutQuad = function(t) {
-  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-};
-var easeInCubic = function(t) {
-  return t * t * t;
-};
-var easeOutCubic = function(t) {
-  return --t * t * t + 1;
-};
-var easeInOutCubic = function(t) {
-  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-};
-var easeInQuart = function(t) {
-  return t * t * t * t;
-};
-var easeOutQuart = function(t) {
-  return 1 - --t * t * t * t;
-};
-var easeInOutQuart = function(t) {
-  return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
-};
-var easeInQuint = function(t) {
-  return t * t * t * t * t;
-};
-var easeOutQuint = function(t) {
-  return 1 + --t * t * t * t * t;
-};
-var easeInOutQuint = function(t) {
-  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
-};
-var animations = {
-  easeOut,
-  linear,
-  easeInQuad,
-  easeOutQuad,
-  easeInOutQuad,
-  easeInCubic,
-  easeOutCubic,
-  easeInOutCubic,
-  easeInQuart,
-  easeOutQuart,
-  easeInOutQuart,
-  easeInQuint,
-  easeOutQuint,
-  easeInOutQuint
-};
-var handleCancelAnimationFrame = function(animation) {
-  if (typeof animation === "number") {
-    cancelAnimationFrame(animation);
-  }
-};
-var handleCancelAnimation = function(contextInstance) {
-  if (!contextInstance.mounted)
-    return;
-  handleCancelAnimationFrame(contextInstance.animation);
-  contextInstance.animate = false;
-  contextInstance.animation = null;
-  contextInstance.velocity = null;
-};
-function handleSetupAnimation(contextInstance, animationName, animationTime, callback) {
-  if (!contextInstance.mounted)
-    return;
-  var startTime = (/* @__PURE__ */ new Date()).getTime();
-  var lastStep = 1;
-  handleCancelAnimation(contextInstance);
-  contextInstance.animation = function() {
-    if (!contextInstance.mounted) {
-      return handleCancelAnimationFrame(contextInstance.animation);
-    }
-    var frameTime = (/* @__PURE__ */ new Date()).getTime() - startTime;
-    var animationProgress = frameTime / animationTime;
-    var animationType = animations[animationName];
-    var step = animationType(animationProgress);
-    if (frameTime >= animationTime) {
-      callback(lastStep);
-      contextInstance.animation = null;
-    } else if (contextInstance.animation) {
-      callback(step);
-      requestAnimationFrame(contextInstance.animation);
-    }
-  };
-  requestAnimationFrame(contextInstance.animation);
-}
-function isValidTargetState(targetState) {
-  var scale = targetState.scale, positionX = targetState.positionX, positionY = targetState.positionY;
-  if (Number.isNaN(scale) || Number.isNaN(positionX) || Number.isNaN(positionY)) {
-    return false;
-  }
-  return true;
-}
-function animate(contextInstance, targetState, animationTime, animationName) {
-  var isValid = isValidTargetState(targetState);
-  if (!contextInstance.mounted || !isValid)
-    return;
-  var setTransformState = contextInstance.setTransformState;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  var scaleDiff = targetState.scale - scale;
-  var positionXDiff = targetState.positionX - positionX;
-  var positionYDiff = targetState.positionY - positionY;
-  if (animationTime === 0) {
-    setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
-  } else {
-    handleSetupAnimation(contextInstance, animationName, animationTime, function(step) {
-      var newScale = scale + scaleDiff * step;
-      var newPositionX = positionX + positionXDiff * step;
-      var newPositionY = positionY + positionYDiff * step;
-      setTransformState(newScale, newPositionX, newPositionY);
-    });
-  }
-}
-function getComponentsSizes(wrapperComponent, contentComponent, newScale) {
-  var wrapperWidth = wrapperComponent.offsetWidth;
-  var wrapperHeight = wrapperComponent.offsetHeight;
-  var contentWidth = contentComponent.offsetWidth;
-  var contentHeight = contentComponent.offsetHeight;
-  var newContentWidth = contentWidth * newScale;
-  var newContentHeight = contentHeight * newScale;
-  var newDiffWidth = wrapperWidth - newContentWidth;
-  var newDiffHeight = wrapperHeight - newContentHeight;
-  return {
-    wrapperWidth,
-    wrapperHeight,
-    newContentWidth,
-    newDiffWidth,
-    newContentHeight,
-    newDiffHeight
-  };
-}
-var getBounds = function(wrapperWidth, newContentWidth, diffWidth, wrapperHeight, newContentHeight, diffHeight, centerZoomedOut) {
-  var scaleWidthFactor = wrapperWidth > newContentWidth ? diffWidth * (centerZoomedOut ? 1 : 0.5) : 0;
-  var scaleHeightFactor = wrapperHeight > newContentHeight ? diffHeight * (centerZoomedOut ? 1 : 0.5) : 0;
-  var minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;
-  var maxPositionX = scaleWidthFactor;
-  var minPositionY = wrapperHeight - newContentHeight - scaleHeightFactor;
-  var maxPositionY = scaleHeightFactor;
-  return { minPositionX, maxPositionX, minPositionY, maxPositionY };
-};
-var calculateBounds = function(contextInstance, newScale) {
-  var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-  var centerZoomedOut = contextInstance.setup.centerZoomedOut;
-  if (!wrapperComponent || !contentComponent) {
-    throw new Error("Components are not mounted");
-  }
-  var _a = getComponentsSizes(wrapperComponent, contentComponent, newScale), wrapperWidth = _a.wrapperWidth, wrapperHeight = _a.wrapperHeight, newContentWidth = _a.newContentWidth, newDiffWidth = _a.newDiffWidth, newContentHeight = _a.newContentHeight, newDiffHeight = _a.newDiffHeight;
-  var bounds = getBounds(wrapperWidth, newContentWidth, newDiffWidth, wrapperHeight, newContentHeight, newDiffHeight, Boolean(centerZoomedOut));
-  return bounds;
-};
-var boundLimiter = function(value, minBound, maxBound, isActive) {
-  if (!isActive)
-    return roundNumber(value, 2);
-  if (value < minBound)
-    return roundNumber(minBound, 2);
-  if (value > maxBound)
-    return roundNumber(maxBound, 2);
-  return roundNumber(value, 2);
-};
-var handleCalculateBounds = function(contextInstance, newScale) {
-  var bounds = calculateBounds(contextInstance, newScale);
-  contextInstance.bounds = bounds;
-  return bounds;
-};
-function getMouseBoundedPosition(positionX, positionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent) {
-  var minPositionX = bounds.minPositionX, minPositionY = bounds.minPositionY, maxPositionX = bounds.maxPositionX, maxPositionY = bounds.maxPositionY;
-  var paddingX = 0;
-  var paddingY = 0;
-  if (wrapperComponent) {
-    paddingX = paddingValueX;
-    paddingY = paddingValueY;
-  }
-  var x = boundLimiter(positionX, minPositionX - paddingX, maxPositionX + paddingX, limitToBounds);
-  var y = boundLimiter(positionY, minPositionY - paddingY, maxPositionY + paddingY, limitToBounds);
-  return { x, y };
-}
-function handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds) {
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  var scaleDifference = newScale - scale;
-  if (typeof mouseX !== "number" || typeof mouseY !== "number") {
-    console.error("Mouse X and Y position were not provided!");
-    return { x: positionX, y: positionY };
-  }
-  var calculatedPositionX = positionX - mouseX * scaleDifference;
-  var calculatedPositionY = positionY - mouseY * scaleDifference;
-  var newPositions = getMouseBoundedPosition(calculatedPositionX, calculatedPositionY, bounds, limitToBounds, 0, 0, null);
-  return newPositions;
-}
-function checkZoomBounds(zoom, minScale, maxScale, zoomPadding, enablePadding) {
-  var scalePadding = enablePadding ? zoomPadding : 0;
-  var minScaleWithPadding = minScale - scalePadding;
-  if (!Number.isNaN(maxScale) && zoom >= maxScale)
-    return maxScale;
-  if (!Number.isNaN(minScale) && zoom <= minScaleWithPadding)
-    return minScaleWithPadding;
-  return zoom;
-}
-var isPanningStartAllowed = function(contextInstance, event) {
-  var excluded = contextInstance.setup.panning.excluded;
-  var isInitialized = contextInstance.isInitialized, wrapperComponent = contextInstance.wrapperComponent;
-  var target = event.target;
-  var targetIsShadowDom = "shadowRoot" in target && "composedPath" in event;
-  var isWrapperChild = targetIsShadowDom ? event.composedPath().some(function(el) {
-    if (!(el instanceof Element)) {
-      return false;
-    }
-    return wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(el);
-  }) : wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);
-  var isAllowed = isInitialized && target && isWrapperChild;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var isPanningAllowed = function(contextInstance) {
-  var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning, setup = contextInstance.setup;
-  var disabled = setup.panning.disabled;
-  var isAllowed = isInitialized && isPanning && !disabled;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var handlePanningSetup = function(contextInstance, event) {
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;
-  contextInstance.isPanning = true;
-  var x = event.clientX;
-  var y = event.clientY;
-  contextInstance.startCoords = { x: x - positionX, y: y - positionY };
-};
-var handleTouchPanningSetup = function(contextInstance, event) {
-  var touches = event.touches;
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY;
-  contextInstance.isPanning = true;
-  var oneFingerTouch = touches.length === 1;
-  if (oneFingerTouch) {
-    var x = touches[0].clientX;
-    var y = touches[0].clientY;
-    contextInstance.startCoords = { x: x - positionX, y: y - positionY };
-  }
-};
-function handlePanToBounds(contextInstance) {
-  var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
-  var _b = contextInstance.setup, disabled = _b.disabled, limitToBounds = _b.limitToBounds, centerZoomedOut = _b.centerZoomedOut;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  if (disabled || !wrapperComponent || !contextInstance.bounds)
-    return;
-  var _c = contextInstance.bounds, maxPositionX = _c.maxPositionX, minPositionX = _c.minPositionX, maxPositionY = _c.maxPositionY, minPositionY = _c.minPositionY;
-  var xChanged = positionX > maxPositionX || positionX < minPositionX;
-  var yChanged = positionY > maxPositionY || positionY < minPositionY;
-  var mousePosX = positionX > maxPositionX ? wrapperComponent.offsetWidth : contextInstance.setup.minPositionX || 0;
-  var mousePosY = positionY > maxPositionY ? wrapperComponent.offsetHeight : contextInstance.setup.minPositionY || 0;
-  var _d = handleCalculateZoomPositions(contextInstance, mousePosX, mousePosY, scale, contextInstance.bounds, limitToBounds || centerZoomedOut), x = _d.x, y = _d.y;
-  return {
-    scale,
-    positionX: xChanged ? x : positionX,
-    positionY: yChanged ? y : positionY
-  };
-}
-function handleNewPosition(contextInstance, newPositionX, newPositionY, paddingValueX, paddingValueY) {
-  var limitToBounds = contextInstance.setup.limitToBounds;
-  var wrapperComponent = contextInstance.wrapperComponent, bounds = contextInstance.bounds;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  if (wrapperComponent === null || bounds === null || newPositionX === positionX && newPositionY === positionY) {
-    return;
-  }
-  var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), x = _b.x, y = _b.y;
-  contextInstance.setTransformState(scale, x, y);
-}
-var getPanningClientPosition = function(contextInstance, clientX, clientY) {
-  var startCoords = contextInstance.startCoords, transformState = contextInstance.transformState;
-  var panning = contextInstance.setup.panning;
-  var lockAxisX = panning.lockAxisX, lockAxisY = panning.lockAxisY;
-  var positionX = transformState.positionX, positionY = transformState.positionY;
-  if (!startCoords) {
-    return { x: positionX, y: positionY };
-  }
-  var mouseX = clientX - startCoords.x;
-  var mouseY = clientY - startCoords.y;
-  var newPositionX = lockAxisX ? positionX : mouseX;
-  var newPositionY = lockAxisY ? positionY : mouseY;
-  return { x: newPositionX, y: newPositionY };
-};
-var getPaddingValue = function(contextInstance, size) {
-  var setup = contextInstance.setup, transformState = contextInstance.transformState;
-  var scale = transformState.scale;
-  var minScale = setup.minScale, disablePadding = setup.disablePadding;
-  if (size > 0 && scale >= minScale && !disablePadding) {
-    return size;
-  }
-  return 0;
-};
-var isVelocityCalculationAllowed = function(contextInstance) {
-  var mounted = contextInstance.mounted;
-  var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;
-  var scale = contextInstance.transformState.scale;
-  var disabledVelocity = velocityAnimation.disabled;
-  var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var isVelocityAllowed = function(contextInstance) {
-  var mounted = contextInstance.mounted, velocity = contextInstance.velocity, bounds = contextInstance.bounds;
-  var _a = contextInstance.setup, disabled = _a.disabled, velocityAnimation = _a.velocityAnimation;
-  var scale = contextInstance.transformState.scale;
-  var disabledVelocity = velocityAnimation.disabled;
-  var isAllowed = !disabledVelocity || scale > 1 || !disabled || mounted;
-  if (!isAllowed)
-    return false;
-  if (!velocity || !bounds)
-    return false;
-  return true;
-};
-function getVelocityMoveTime(contextInstance, velocity) {
-  var velocityAnimation = contextInstance.setup.velocityAnimation;
-  var equalToMove = velocityAnimation.equalToMove, animationTime = velocityAnimation.animationTime, sensitivity = velocityAnimation.sensitivity;
-  if (equalToMove) {
-    return animationTime * velocity * sensitivity;
-  }
-  return animationTime;
-}
-function getVelocityPosition(newPosition, startPosition, currentPosition, isLocked, limitToBounds, minPosition, maxPosition, minTarget, maxTarget, step) {
-  if (limitToBounds) {
-    if (startPosition > maxPosition && currentPosition > maxPosition) {
-      var calculatedPosition = maxPosition + (newPosition - maxPosition) * step;
-      if (calculatedPosition > maxTarget)
-        return maxTarget;
-      if (calculatedPosition < maxPosition)
-        return maxPosition;
-      return calculatedPosition;
-    }
-    if (startPosition < minPosition && currentPosition < minPosition) {
-      var calculatedPosition = minPosition + (newPosition - minPosition) * step;
-      if (calculatedPosition < minTarget)
-        return minTarget;
-      if (calculatedPosition > minPosition)
-        return minPosition;
-      return calculatedPosition;
-    }
-  }
-  if (isLocked)
-    return startPosition;
-  return boundLimiter(newPosition, minPosition, maxPosition, limitToBounds);
-}
-function getSizeMultiplier(wrapperComponent, equalToMove) {
-  var defaultMultiplier = 1;
-  if (equalToMove) {
-    return Math.min(defaultMultiplier, wrapperComponent.offsetWidth / window.innerWidth);
-  }
-  return defaultMultiplier;
-}
-function handleCalculateVelocity(contextInstance, position) {
-  var isAllowed = isVelocityCalculationAllowed(contextInstance);
-  if (!isAllowed) {
-    return;
-  }
-  var lastMousePosition = contextInstance.lastMousePosition, velocityTime = contextInstance.velocityTime, setup = contextInstance.setup;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var equalToMove = setup.velocityAnimation.equalToMove;
-  var now = Date.now();
-  if (lastMousePosition && velocityTime && wrapperComponent) {
-    var sizeMultiplier = getSizeMultiplier(wrapperComponent, equalToMove);
-    var distanceX = position.x - lastMousePosition.x;
-    var distanceY = position.y - lastMousePosition.y;
-    var velocityX = distanceX / sizeMultiplier;
-    var velocityY = distanceY / sizeMultiplier;
-    var interval = now - velocityTime;
-    var speed = distanceX * distanceX + distanceY * distanceY;
-    var velocity = Math.sqrt(speed) / interval;
-    contextInstance.velocity = { velocityX, velocityY, total: velocity };
-  }
-  contextInstance.lastMousePosition = position;
-  contextInstance.velocityTime = now;
-}
-function handleVelocityPanning(contextInstance) {
-  var velocity = contextInstance.velocity, bounds = contextInstance.bounds, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var isAllowed = isVelocityAllowed(contextInstance);
-  if (!isAllowed || !velocity || !bounds || !wrapperComponent) {
-    return;
-  }
-  var velocityX = velocity.velocityX, velocityY = velocity.velocityY, total = velocity.total;
-  var maxPositionX = bounds.maxPositionX, minPositionX = bounds.minPositionX, maxPositionY = bounds.maxPositionY, minPositionY = bounds.minPositionY;
-  var limitToBounds = setup.limitToBounds, alignmentAnimation = setup.alignmentAnimation;
-  var zoomAnimation = setup.zoomAnimation, panning = setup.panning;
-  var lockAxisY = panning.lockAxisY, lockAxisX = panning.lockAxisX;
-  var animationType = zoomAnimation.animationType;
-  var sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, velocityAlignmentTime = alignmentAnimation.velocityAlignmentTime;
-  var alignAnimationTime = velocityAlignmentTime;
-  var moveAnimationTime = getVelocityMoveTime(contextInstance, total);
-  var finalAnimationTime = Math.max(moveAnimationTime, alignAnimationTime);
-  var paddingValueX = getPaddingValue(contextInstance, sizeX);
-  var paddingValueY = getPaddingValue(contextInstance, sizeY);
-  var paddingX = paddingValueX * wrapperComponent.offsetWidth / 100;
-  var paddingY = paddingValueY * wrapperComponent.offsetHeight / 100;
-  var maxTargetX = maxPositionX + paddingX;
-  var minTargetX = minPositionX - paddingX;
-  var maxTargetY = maxPositionY + paddingY;
-  var minTargetY = minPositionY - paddingY;
-  var startState = contextInstance.transformState;
-  var startTime = (/* @__PURE__ */ new Date()).getTime();
-  handleSetupAnimation(contextInstance, animationType, finalAnimationTime, function(step) {
-    var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-    var frameTime = (/* @__PURE__ */ new Date()).getTime() - startTime;
-    var animationProgress = frameTime / alignAnimationTime;
-    var alignAnimation = animations[alignmentAnimation.animationType];
-    var alignStep = 1 - alignAnimation(Math.min(1, animationProgress));
-    var customStep = 1 - step;
-    var newPositionX = positionX + velocityX * customStep;
-    var newPositionY = positionY + velocityY * customStep;
-    var currentPositionX = getVelocityPosition(newPositionX, startState.positionX, positionX, lockAxisX, limitToBounds, minPositionX, maxPositionX, minTargetX, maxTargetX, alignStep);
-    var currentPositionY = getVelocityPosition(newPositionY, startState.positionY, positionY, lockAxisY, limitToBounds, minPositionY, maxPositionY, minTargetY, maxTargetY, alignStep);
-    if (positionX !== newPositionX || positionY !== newPositionY) {
-      contextInstance.setTransformState(scale, currentPositionX, currentPositionY);
-    }
-  });
-}
-function handlePanningStart(contextInstance, event) {
-  var scale = contextInstance.transformState.scale;
-  handleCancelAnimation(contextInstance);
-  handleCalculateBounds(contextInstance, scale);
-  if (window.TouchEvent !== void 0 && event instanceof TouchEvent) {
-    handleTouchPanningSetup(contextInstance, event);
-  } else {
-    handlePanningSetup(contextInstance, event);
-  }
-}
-function handleAlignToBounds(contextInstance, customAnimationTime) {
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, minScale = _a.minScale, alignmentAnimation = _a.alignmentAnimation;
-  var disabled = alignmentAnimation.disabled, sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY, animationTime = alignmentAnimation.animationTime, animationType = alignmentAnimation.animationType;
-  var isDisabled = disabled || scale < minScale || !sizeX && !sizeY;
-  if (isDisabled)
-    return;
-  var targetState = handlePanToBounds(contextInstance);
-  if (targetState) {
-    animate(contextInstance, targetState, customAnimationTime !== null && customAnimationTime !== void 0 ? customAnimationTime : animationTime, animationType);
-  }
-}
-function handlePanning(contextInstance, clientX, clientY) {
-  var startCoords = contextInstance.startCoords, setup = contextInstance.setup;
-  var _a = setup.alignmentAnimation, sizeX = _a.sizeX, sizeY = _a.sizeY;
-  if (!startCoords)
-    return;
-  var _b = getPanningClientPosition(contextInstance, clientX, clientY), x = _b.x, y = _b.y;
-  var paddingValueX = getPaddingValue(contextInstance, sizeX);
-  var paddingValueY = getPaddingValue(contextInstance, sizeY);
-  handleCalculateVelocity(contextInstance, { x, y });
-  handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);
-}
-function handlePanningEnd(contextInstance) {
-  if (contextInstance.isPanning) {
-    var velocityDisabled = contextInstance.setup.panning.velocityDisabled;
-    var velocity = contextInstance.velocity, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    contextInstance.isPanning = false;
-    contextInstance.animate = false;
-    contextInstance.animation = null;
-    var wrapperRect = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.getBoundingClientRect();
-    var contentRect = contentComponent === null || contentComponent === void 0 ? void 0 : contentComponent.getBoundingClientRect();
-    var wrapperWidth = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) || 0;
-    var wrapperHeight = (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.height) || 0;
-    var contentWidth = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.width) || 0;
-    var contentHeight = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.height) || 0;
-    var isZoomed = wrapperWidth < contentWidth || wrapperHeight < contentHeight;
-    var shouldAnimate = !velocityDisabled && velocity && (velocity === null || velocity === void 0 ? void 0 : velocity.total) > 0.1 && isZoomed;
-    if (shouldAnimate) {
-      handleVelocityPanning(contextInstance);
-    } else {
-      handleAlignToBounds(contextInstance);
-    }
-  }
-}
-function handleZoomToPoint(contextInstance, scale, mouseX, mouseY) {
-  var _a = contextInstance.setup, minScale = _a.minScale, maxScale = _a.maxScale, limitToBounds = _a.limitToBounds;
-  var newScale = checkZoomBounds(roundNumber(scale, 2), minScale, maxScale, 0, false);
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var _b = handleCalculateZoomPositions(contextInstance, mouseX, mouseY, newScale, bounds, limitToBounds), x = _b.x, y = _b.y;
-  return { scale: newScale, positionX: x, positionY: y };
-}
-function handleAlignToScaleBounds(contextInstance, mousePositionX, mousePositionY) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var _a = contextInstance.setup, minScale = _a.minScale, limitToBounds = _a.limitToBounds, zoomAnimation = _a.zoomAnimation;
-  var disabled = zoomAnimation.disabled, animationTime = zoomAnimation.animationTime, animationType = zoomAnimation.animationType;
-  var isDisabled = disabled || scale >= minScale;
-  if (scale >= 1 || limitToBounds) {
-    handleAlignToBounds(contextInstance);
-  }
-  if (isDisabled || !wrapperComponent || !contextInstance.mounted)
-    return;
-  var mouseX = mousePositionX || wrapperComponent.offsetWidth / 2;
-  var mouseY = mousePositionY || wrapperComponent.offsetHeight / 2;
-  var targetState = handleZoomToPoint(contextInstance, minScale, mouseX, mouseY);
-  if (targetState) {
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
-}
-var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-function __spreadArray(to, from, pack) {
-  for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-var initialState = {
-  scale: 1,
-  positionX: 0,
-  positionY: 0
-};
-var initialSetup = {
-  disabled: false,
-  minPositionX: null,
-  maxPositionX: null,
-  minPositionY: null,
-  maxPositionY: null,
-  minScale: 1,
-  maxScale: 8,
-  limitToBounds: true,
-  centerZoomedOut: false,
-  centerOnInit: false,
-  disablePadding: false,
-  smooth: true,
-  wheel: {
-    step: 0.2,
-    disabled: false,
-    smoothStep: 1e-3,
-    wheelDisabled: false,
-    touchPadDisabled: false,
-    activationKeys: [],
-    excluded: []
-  },
-  panning: {
-    disabled: false,
-    velocityDisabled: false,
-    lockAxisX: false,
-    lockAxisY: false,
-    allowLeftClickPan: true,
-    allowMiddleClickPan: true,
-    allowRightClickPan: true,
-    wheelPanning: false,
-    activationKeys: [],
-    excluded: []
-  },
-  pinch: {
-    step: 5,
-    disabled: false,
-    excluded: []
-  },
-  doubleClick: {
-    disabled: false,
-    step: 0.7,
-    mode: "zoomIn",
-    animationType: "easeOut",
-    animationTime: 200,
-    excluded: []
-  },
-  zoomAnimation: {
-    disabled: false,
-    size: 0.4,
-    animationTime: 200,
-    animationType: "easeOut"
-  },
-  alignmentAnimation: {
-    disabled: false,
-    sizeX: 100,
-    sizeY: 100,
-    animationTime: 200,
-    velocityAlignmentTime: 400,
-    animationType: "easeOut"
-  },
-  velocityAnimation: {
-    disabled: false,
-    sensitivity: 1,
-    animationTime: 400,
-    animationType: "easeOut",
-    equalToMove: true
-  }
-};
-var baseClasses = {
-  wrapperClass: "react-transform-wrapper",
-  contentClass: "react-transform-component"
-};
-var createState = function(props) {
-  var _a, _b, _c, _d;
-  return {
-    previousScale: (_a = props.initialScale) !== null && _a !== void 0 ? _a : initialState.scale,
-    scale: (_b = props.initialScale) !== null && _b !== void 0 ? _b : initialState.scale,
-    positionX: (_c = props.initialPositionX) !== null && _c !== void 0 ? _c : initialState.positionX,
-    positionY: (_d = props.initialPositionY) !== null && _d !== void 0 ? _d : initialState.positionY
-  };
-};
-var createSetup = function(props) {
-  var newSetup = __assign({}, initialSetup);
-  Object.keys(props).forEach(function(key) {
-    var validValue = typeof props[key] !== "undefined";
-    var validParameter = typeof initialSetup[key] !== "undefined";
-    if (validParameter && validValue) {
-      var dataType = Object.prototype.toString.call(initialSetup[key]);
-      var isObject = dataType === "[object Object]";
-      var isArray = dataType === "[object Array]";
-      if (isObject) {
-        newSetup[key] = __assign(__assign({}, initialSetup[key]), props[key]);
-      } else if (isArray) {
-        newSetup[key] = __spreadArray(__spreadArray([], initialSetup[key], true), props[key]);
-      } else {
-        newSetup[key] = props[key];
-      }
-    }
-  });
-  return newSetup;
-};
-var handleCalculateButtonZoom = function(contextInstance, delta, step) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, smooth = setup.smooth;
-  var size = zoomAnimation.size;
-  if (!wrapperComponent) {
-    throw new Error("Wrapper is not mounted");
-  }
-  var targetScale = smooth ? scale * Math.exp(delta * step) : scale + delta * step;
-  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, false);
-  return newScale;
-};
-function handleZoomToViewCenter(contextInstance, delta, step, animationTime, animationType) {
-  var wrapperComponent = contextInstance.wrapperComponent;
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  if (!wrapperComponent)
-    return console.error("No WrapperComponent found");
-  var wrapperWidth = wrapperComponent.offsetWidth;
-  var wrapperHeight = wrapperComponent.offsetHeight;
-  var mouseX = (wrapperWidth / 2 - positionX) / scale;
-  var mouseY = (wrapperHeight / 2 - positionY) / scale;
-  var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-  var targetState = handleZoomToPoint(contextInstance, newScale, mouseX, mouseY);
-  if (!targetState) {
-    return console.error("Error during zoom event. New transformation state was not calculated.");
-  }
-  animate(contextInstance, targetState, animationTime, animationType);
-}
-function resetTransformations(contextInstance, animationTime, animationType, onResetTransformation) {
-  var setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var limitToBounds = setup.limitToBounds;
-  var initialTransformation = createState(contextInstance.props);
-  var _a = contextInstance.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-  if (!wrapperComponent)
-    return;
-  var newBounds = calculateBounds(contextInstance, initialTransformation.scale);
-  var boundedPositions = getMouseBoundedPosition(initialTransformation.positionX, initialTransformation.positionY, newBounds, limitToBounds, 0, 0, wrapperComponent);
-  var newState = {
-    scale: initialTransformation.scale,
-    positionX: boundedPositions.x,
-    positionY: boundedPositions.y
-  };
-  if (scale === initialTransformation.scale && positionX === initialTransformation.positionX && positionY === initialTransformation.positionY) {
-    return;
-  }
-  onResetTransformation === null || onResetTransformation === void 0 ? void 0 : onResetTransformation();
-  animate(contextInstance, newState, animationTime, animationType);
-}
-function getOffset(element, wrapper, content, state) {
-  var offset = element.getBoundingClientRect();
-  var wrapperOffset = wrapper.getBoundingClientRect();
-  var contentOffset = content.getBoundingClientRect();
-  var xOff = wrapperOffset.x * state.scale;
-  var yOff = wrapperOffset.y * state.scale;
-  return {
-    x: (offset.x - contentOffset.x + xOff) / state.scale,
-    y: (offset.y - contentOffset.y + yOff) / state.scale
-  };
-}
-function calculateZoomToNode(contextInstance, node, customZoom) {
-  var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent, transformState = contextInstance.transformState;
-  var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, minScale = _a.minScale, maxScale = _a.maxScale;
-  if (!wrapperComponent || !contentComponent)
-    return transformState;
-  var wrapperRect = wrapperComponent.getBoundingClientRect();
-  var nodeRect = node.getBoundingClientRect();
-  var nodeOffset = getOffset(node, wrapperComponent, contentComponent, transformState);
-  var nodeLeft = nodeOffset.x;
-  var nodeTop = nodeOffset.y;
-  var nodeWidth = nodeRect.width / transformState.scale;
-  var nodeHeight = nodeRect.height / transformState.scale;
-  var scaleX = wrapperComponent.offsetWidth / nodeWidth;
-  var scaleY = wrapperComponent.offsetHeight / nodeHeight;
-  var newScale = checkZoomBounds(customZoom || Math.min(scaleX, scaleY), minScale, maxScale, 0, false);
-  var offsetX = (wrapperRect.width - nodeWidth * newScale) / 2;
-  var offsetY = (wrapperRect.height - nodeHeight * newScale) / 2;
-  var newPositionX = (wrapperRect.left - nodeLeft) * newScale + offsetX;
-  var newPositionY = (wrapperRect.top - nodeTop) * newScale + offsetY;
-  var bounds = calculateBounds(contextInstance, newScale);
-  var _b = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, 0, 0, wrapperComponent), x = _b.x, y = _b.y;
-  return { positionX: x, positionY: y, scale: newScale };
-}
-var zoomIn = function(contextInstance) {
-  return function(step, animationTime, animationType) {
-    if (step === void 0) {
-      step = 0.5;
-    }
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleZoomToViewCenter(contextInstance, 1, step, animationTime, animationType);
-  };
-};
-var zoomOut = function(contextInstance) {
-  return function(step, animationTime, animationType) {
-    if (step === void 0) {
-      step = 0.5;
-    }
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleZoomToViewCenter(contextInstance, -1, step, animationTime, animationType);
-  };
-};
-var setTransform = function(contextInstance) {
-  return function(newPositionX, newPositionY, newScale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 300;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    var _a = contextInstance.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
-    var wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    var disabled = contextInstance.setup.disabled;
-    if (disabled || !wrapperComponent || !contentComponent)
-      return;
-    var targetState = {
-      positionX: Number.isNaN(newPositionX) ? positionX : newPositionX,
-      positionY: Number.isNaN(newPositionY) ? positionY : newPositionY,
-      scale: Number.isNaN(newScale) ? scale : newScale
-    };
-    animate(contextInstance, targetState, animationTime, animationType);
-  };
-};
-var resetTransform = function(contextInstance) {
-  return function(animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 200;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    resetTransformations(contextInstance, animationTime, animationType);
-  };
-};
-var centerView = function(contextInstance) {
-  return function(scale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 200;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    var transformState = contextInstance.transformState, wrapperComponent = contextInstance.wrapperComponent, contentComponent = contextInstance.contentComponent;
-    if (wrapperComponent && contentComponent) {
-      var targetState = getCenterPosition(scale || transformState.scale, wrapperComponent, contentComponent);
-      animate(contextInstance, targetState, animationTime, animationType);
-    }
-  };
-};
-var zoomToElement = function(contextInstance) {
-  return function(node, scale, animationTime, animationType) {
-    if (animationTime === void 0) {
-      animationTime = 600;
-    }
-    if (animationType === void 0) {
-      animationType = "easeOut";
-    }
-    handleCancelAnimation(contextInstance);
-    var wrapperComponent = contextInstance.wrapperComponent;
-    var target = typeof node === "string" ? document.getElementById(node) : node;
-    if (wrapperComponent && target && wrapperComponent.contains(target)) {
-      var targetState = calculateZoomToNode(contextInstance, target, scale);
-      animate(contextInstance, targetState, animationTime, animationType);
-    }
-  };
-};
-var getControls = function(contextInstance) {
-  return {
-    instance: contextInstance,
-    zoomIn: zoomIn(contextInstance),
-    zoomOut: zoomOut(contextInstance),
-    setTransform: setTransform(contextInstance),
-    resetTransform: resetTransform(contextInstance),
-    centerView: centerView(contextInstance),
-    zoomToElement: zoomToElement(contextInstance)
-  };
-};
-var getState = function(contextInstance) {
-  return {
-    instance: contextInstance,
-    state: contextInstance.transformState
-  };
-};
-var getContext = function(contextInstance) {
-  var ref = {};
-  Object.assign(ref, getState(contextInstance));
-  Object.assign(ref, getControls(contextInstance));
-  return ref;
-};
-var passiveSupported = false;
-function makePassiveEventOption() {
-  try {
-    var options = {
-      get passive() {
-        passiveSupported = true;
-        return false;
-      }
-    };
-    return options;
-  } catch (err) {
-    passiveSupported = false;
-    return passiveSupported;
-  }
-}
-var matchPrefix = ".".concat(baseClasses.wrapperClass);
-var isExcludedNode = function(node, excluded) {
-  return excluded.some(function(exclude) {
-    return node.matches("".concat(matchPrefix, " ").concat(exclude, ", ").concat(matchPrefix, " .").concat(exclude, ", ").concat(matchPrefix, " ").concat(exclude, " *, ").concat(matchPrefix, " .").concat(exclude, " *"));
-  });
-};
-var cancelTimeout = function(timeout) {
-  if (timeout) {
-    clearTimeout(timeout);
-  }
-};
-var getTransformStyles = function(x, y, scale) {
-  return "translate(".concat(x, "px, ").concat(y, "px) scale(").concat(scale, ")");
-};
-var getCenterPosition = function(scale, wrapperComponent, contentComponent) {
-  var contentWidth = contentComponent.offsetWidth * scale;
-  var contentHeight = contentComponent.offsetHeight * scale;
-  var centerPositionX = (wrapperComponent.offsetWidth - contentWidth) / 2;
-  var centerPositionY = (wrapperComponent.offsetHeight - contentHeight) / 2;
-  return {
-    scale,
-    positionX: centerPositionX,
-    positionY: centerPositionY
-  };
-};
-function mergeRefs(refs) {
-  return function(value) {
-    refs.forEach(function(ref) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}
-var isWheelAllowed = function(contextInstance, event) {
-  var _a = contextInstance.setup.wheel, disabled = _a.disabled, wheelDisabled = _a.wheelDisabled, touchPadDisabled = _a.touchPadDisabled, excluded = _a.excluded;
-  var isInitialized = contextInstance.isInitialized, isPanning = contextInstance.isPanning;
-  var target = event.target;
-  var isAllowed = isInitialized && !isPanning && !disabled && target;
-  if (!isAllowed)
-    return false;
-  if (wheelDisabled && !event.ctrlKey)
-    return false;
-  if (touchPadDisabled && event.ctrlKey)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var getDeltaY = function(event) {
-  if (event) {
-    return event.deltaY < 0 ? 1 : -1;
-  }
-  return 0;
-};
-function getDelta(event, customDelta) {
-  var deltaY = getDeltaY(event);
-  var delta = checkIsNumber(customDelta, deltaY);
-  return delta;
-}
-function getMousePosition(event, contentComponent, scale) {
-  var contentRect = contentComponent.getBoundingClientRect();
-  var mouseX = 0;
-  var mouseY = 0;
-  if ("clientX" in event) {
-    mouseX = (event.clientX - contentRect.left) / scale;
-    mouseY = (event.clientY - contentRect.top) / scale;
-  } else {
-    var touch = event.touches[0];
-    mouseX = (touch.clientX - contentRect.left) / scale;
-    mouseY = (touch.clientY - contentRect.top) / scale;
-  }
-  if (Number.isNaN(mouseX) || Number.isNaN(mouseY))
-    console.error("No mouse or touch offset found");
-  return {
-    x: mouseX,
-    y: mouseY
-  };
-}
-var handleCalculateWheelZoom = function(contextInstance, delta, step, disable, getTarget) {
-  var scale = contextInstance.transformState.scale;
-  var wrapperComponent = contextInstance.wrapperComponent, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  if (!wrapperComponent) {
-    throw new Error("Wrapper is not mounted");
-  }
-  var targetScale = scale + delta * step;
-  var paddingEnabled = disable ? false : !disabled;
-  var newScale = checkZoomBounds(roundNumber(targetScale, 3), minScale, maxScale, size, paddingEnabled && !disablePadding);
-  return newScale;
-};
-var handleWheelZoomStop = function(contextInstance, event) {
-  var previousWheelEvent = contextInstance.previousWheelEvent;
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, maxScale = _a.maxScale, minScale = _a.minScale;
-  if (!previousWheelEvent)
-    return false;
-  if (scale < maxScale || scale > minScale)
-    return true;
-  if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-    return true;
-  if (previousWheelEvent.deltaY > 0 && previousWheelEvent.deltaY < event.deltaY)
-    return true;
-  if (previousWheelEvent.deltaY < 0 && previousWheelEvent.deltaY > event.deltaY)
-    return true;
-  if (Math.sign(previousWheelEvent.deltaY) !== Math.sign(event.deltaY))
-    return true;
-  return false;
-};
-var isPinchStartAllowed = function(contextInstance, event) {
-  var _a = contextInstance.setup.pinch, disabled = _a.disabled, excluded = _a.excluded;
-  var isInitialized = contextInstance.isInitialized;
-  var target = event.target;
-  var isAllowed = isInitialized && !disabled && target;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var isPinchAllowed = function(contextInstance) {
-  var disabled = contextInstance.setup.pinch.disabled;
-  var isInitialized = contextInstance.isInitialized, pinchStartDistance = contextInstance.pinchStartDistance;
-  var isAllowed = isInitialized && !disabled && pinchStartDistance;
-  if (!isAllowed)
-    return false;
-  return true;
-};
-var calculateTouchMidPoint = function(event, scale, contentComponent) {
-  var contentRect = contentComponent.getBoundingClientRect();
-  var touches = event.touches;
-  var firstPointX = roundNumber(touches[0].clientX - contentRect.left, 5);
-  var firstPointY = roundNumber(touches[0].clientY - contentRect.top, 5);
-  var secondPointX = roundNumber(touches[1].clientX - contentRect.left, 5);
-  var secondPointY = roundNumber(touches[1].clientY - contentRect.top, 5);
-  return {
-    x: (firstPointX + secondPointX) / 2 / scale,
-    y: (firstPointY + secondPointY) / 2 / scale
-  };
-};
-var getTouchDistance = function(event) {
-  return Math.sqrt(Math.pow(event.touches[0].pageX - event.touches[1].pageX, 2) + Math.pow(event.touches[0].pageY - event.touches[1].pageY, 2));
-};
-var calculatePinchZoom = function(contextInstance, currentDistance) {
-  var pinchStartScale = contextInstance.pinchStartScale, pinchStartDistance = contextInstance.pinchStartDistance, setup = contextInstance.setup;
-  var maxScale = setup.maxScale, minScale = setup.minScale, zoomAnimation = setup.zoomAnimation, disablePadding = setup.disablePadding;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  if (!pinchStartScale || pinchStartDistance === null || !currentDistance) {
-    throw new Error("Pinch touches distance was not provided");
-  }
-  if (currentDistance < 0) {
-    return contextInstance.transformState.scale;
-  }
-  var touchProportion = currentDistance / pinchStartDistance;
-  var scaleDifference = touchProportion * pinchStartScale;
-  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale, size, !disabled && !disablePadding);
-};
-var wheelStopEventTime = 160;
-var wheelAnimationTime = 100;
-var handleWheelStart = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheelStart = _a.onWheelStart, onZoomStart = _a.onZoomStart;
-  if (!contextInstance.wheelStopEventTimer) {
-    handleCancelAnimation(contextInstance);
-    handleCallback(getContext(contextInstance), event, onWheelStart);
-    handleCallback(getContext(contextInstance), event, onZoomStart);
-  }
-};
-var handleWheelZoom = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheel = _a.onWheel, onZoom = _a.onZoom;
-  var contentComponent = contextInstance.contentComponent, setup = contextInstance.setup, transformState = contextInstance.transformState;
-  var scale = transformState.scale;
-  var limitToBounds = setup.limitToBounds, centerZoomedOut = setup.centerZoomedOut, zoomAnimation = setup.zoomAnimation, wheel = setup.wheel, disablePadding = setup.disablePadding, smooth = setup.smooth;
-  var size = zoomAnimation.size, disabled = zoomAnimation.disabled;
-  var step = wheel.step, smoothStep = wheel.smoothStep;
-  if (!contentComponent) {
-    throw new Error("Component not mounted");
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  var delta = getDelta(event, null);
-  var zoomStep = smooth ? smoothStep * Math.abs(event.deltaY) : step;
-  var newScale = handleCalculateWheelZoom(contextInstance, delta, zoomStep, !event.ctrlKey);
-  if (scale === newScale)
-    return;
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var mousePosition = getMousePosition(event, contentComponent, scale);
-  var isPaddingDisabled = disabled || size === 0 || centerZoomedOut || disablePadding;
-  var isLimitedToBounds = limitToBounds && isPaddingDisabled;
-  var _b = handleCalculateZoomPositions(contextInstance, mousePosition.x, mousePosition.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;
-  contextInstance.previousWheelEvent = event;
-  contextInstance.setTransformState(newScale, x, y);
-  handleCallback(getContext(contextInstance), event, onWheel);
-  handleCallback(getContext(contextInstance), event, onZoom);
-};
-var handleWheelStop = function(contextInstance, event) {
-  var _a = contextInstance.props, onWheelStop = _a.onWheelStop, onZoomStop = _a.onZoomStop;
-  cancelTimeout(contextInstance.wheelAnimationTimer);
-  contextInstance.wheelAnimationTimer = setTimeout(function() {
-    if (!contextInstance.mounted)
-      return;
-    handleAlignToScaleBounds(contextInstance, event.x, event.y);
-    contextInstance.wheelAnimationTimer = null;
-  }, wheelAnimationTime);
-  var hasStoppedZooming = handleWheelZoomStop(contextInstance, event);
-  if (hasStoppedZooming) {
-    cancelTimeout(contextInstance.wheelStopEventTimer);
-    contextInstance.wheelStopEventTimer = setTimeout(function() {
-      if (!contextInstance.mounted)
-        return;
-      contextInstance.wheelStopEventTimer = null;
-      handleCallback(getContext(contextInstance), event, onWheelStop);
-      handleCallback(getContext(contextInstance), event, onZoomStop);
-    }, wheelStopEventTime);
-  }
-};
-var getTouchCenter = function(event) {
-  var totalX = 0;
-  var totalY = 0;
-  for (var i = 0; i < 2; i += 1) {
-    totalX += event.touches[i].clientX;
-    totalY += event.touches[i].clientY;
-  }
-  var x = totalX / 2;
-  var y = totalY / 2;
-  return { x, y };
-};
-var handlePinchStart = function(contextInstance, event) {
-  var distance = getTouchDistance(event);
-  contextInstance.pinchStartDistance = distance;
-  contextInstance.lastDistance = distance;
-  contextInstance.pinchStartScale = contextInstance.transformState.scale;
-  contextInstance.isPanning = false;
-  var center = getTouchCenter(event);
-  contextInstance.pinchLastCenterX = center.x;
-  contextInstance.pinchLastCenterY = center.y;
-  handleCancelAnimation(contextInstance);
-};
-var handlePinchZoom = function(contextInstance, event) {
-  var contentComponent = contextInstance.contentComponent, pinchStartDistance = contextInstance.pinchStartDistance, wrapperComponent = contextInstance.wrapperComponent;
-  var scale = contextInstance.transformState.scale;
-  var _a = contextInstance.setup, limitToBounds = _a.limitToBounds, centerZoomedOut = _a.centerZoomedOut, zoomAnimation = _a.zoomAnimation, alignmentAnimation = _a.alignmentAnimation;
-  var disabled = zoomAnimation.disabled, size = zoomAnimation.size;
-  if (pinchStartDistance === null || !contentComponent)
-    return;
-  var midPoint = calculateTouchMidPoint(event, scale, contentComponent);
-  if (!Number.isFinite(midPoint.x) || !Number.isFinite(midPoint.y))
-    return;
-  var currentDistance = getTouchDistance(event);
-  var newScale = calculatePinchZoom(contextInstance, currentDistance);
-  var center = getTouchCenter(event);
-  var panX = center.x - (contextInstance.pinchLastCenterX || 0);
-  var panY = center.y - (contextInstance.pinchLastCenterY || 0);
-  if (newScale === scale && panX === 0 && panY === 0)
-    return;
-  contextInstance.pinchLastCenterX = center.x;
-  contextInstance.pinchLastCenterY = center.y;
-  var bounds = handleCalculateBounds(contextInstance, newScale);
-  var isPaddingDisabled = disabled || size === 0 || centerZoomedOut;
-  var isLimitedToBounds = limitToBounds && isPaddingDisabled;
-  var _b = handleCalculateZoomPositions(contextInstance, midPoint.x, midPoint.y, newScale, bounds, isLimitedToBounds), x = _b.x, y = _b.y;
-  contextInstance.pinchMidpoint = midPoint;
-  contextInstance.lastDistance = currentDistance;
-  var sizeX = alignmentAnimation.sizeX, sizeY = alignmentAnimation.sizeY;
-  var paddingValueX = getPaddingValue(contextInstance, sizeX);
-  var paddingValueY = getPaddingValue(contextInstance, sizeY);
-  var newPositionX = x + panX;
-  var newPositionY = y + panY;
-  var _c = getMouseBoundedPosition(newPositionX, newPositionY, bounds, limitToBounds, paddingValueX, paddingValueY, wrapperComponent), finalX = _c.x, finalY = _c.y;
-  contextInstance.setTransformState(newScale, finalX, finalY);
-};
-var handlePinchStop = function(contextInstance) {
-  var pinchMidpoint = contextInstance.pinchMidpoint;
-  contextInstance.velocity = null;
-  contextInstance.lastDistance = null;
-  contextInstance.pinchMidpoint = null;
-  contextInstance.pinchStartScale = null;
-  contextInstance.pinchStartDistance = null;
-  handleAlignToScaleBounds(contextInstance, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.x, pinchMidpoint === null || pinchMidpoint === void 0 ? void 0 : pinchMidpoint.y);
-};
-var handleDoubleClickStop = function(contextInstance, event) {
-  var onZoomStop = contextInstance.props.onZoomStop;
-  var animationTime = contextInstance.setup.doubleClick.animationTime;
-  cancelTimeout(contextInstance.doubleClickStopEventTimer);
-  contextInstance.doubleClickStopEventTimer = setTimeout(function() {
-    contextInstance.doubleClickStopEventTimer = null;
-    handleCallback(getContext(contextInstance), event, onZoomStop);
-  }, animationTime);
-};
-var handleDoubleClickResetMode = function(contextInstance, event) {
-  var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;
-  var _b = contextInstance.setup.doubleClick, animationTime = _b.animationTime, animationType = _b.animationType;
-  handleCallback(getContext(contextInstance), event, onZoomStart);
-  resetTransformations(contextInstance, animationTime, animationType, function() {
-    return handleCallback(getContext(contextInstance), event, onZoom);
-  });
-  handleDoubleClickStop(contextInstance, event);
-};
-function getDoubleClickScale(mode, scale) {
-  if (mode === "toggle") {
-    return scale === 1 ? 1 : -1;
-  }
-  return mode === "zoomOut" ? -1 : 1;
-}
-function handleDoubleClick(contextInstance, event) {
-  var setup = contextInstance.setup, doubleClickStopEventTimer = contextInstance.doubleClickStopEventTimer, transformState = contextInstance.transformState, contentComponent = contextInstance.contentComponent;
-  var scale = transformState.scale;
-  var _a = contextInstance.props, onZoomStart = _a.onZoomStart, onZoom = _a.onZoom;
-  var _b = setup.doubleClick, disabled = _b.disabled, mode = _b.mode, step = _b.step, animationTime = _b.animationTime, animationType = _b.animationType;
-  if (disabled)
-    return;
-  if (doubleClickStopEventTimer)
-    return;
-  if (mode === "reset") {
-    return handleDoubleClickResetMode(contextInstance, event);
-  }
-  if (!contentComponent)
-    return console.error("No ContentComponent found");
-  var delta = getDoubleClickScale(mode, contextInstance.transformState.scale);
-  var newScale = handleCalculateButtonZoom(contextInstance, delta, step);
-  if (scale === newScale)
-    return;
-  handleCallback(getContext(contextInstance), event, onZoomStart);
-  var mousePosition = getMousePosition(event, contentComponent, scale);
-  var targetState = handleZoomToPoint(contextInstance, newScale, mousePosition.x, mousePosition.y);
-  if (!targetState) {
-    return console.error("Error during zoom event. New transformation state was not calculated.");
-  }
-  handleCallback(getContext(contextInstance), event, onZoom);
-  animate(contextInstance, targetState, animationTime, animationType);
-  handleDoubleClickStop(contextInstance, event);
-}
-var isDoubleClickAllowed = function(contextInstance, event) {
-  var isInitialized = contextInstance.isInitialized, setup = contextInstance.setup, wrapperComponent = contextInstance.wrapperComponent;
-  var _a = setup.doubleClick, disabled = _a.disabled, excluded = _a.excluded;
-  var target = event.target;
-  var isWrapperChild = wrapperComponent === null || wrapperComponent === void 0 ? void 0 : wrapperComponent.contains(target);
-  var isAllowed = isInitialized && target && isWrapperChild && !disabled;
-  if (!isAllowed)
-    return false;
-  var isExcluded = isExcludedNode(target, excluded);
-  if (isExcluded)
-    return false;
-  return true;
-};
-var ZoomPanPinch = (
-  /** @class */
-  /* @__PURE__ */ (function() {
-    function ZoomPanPinch2(props) {
-      var _this = this;
-      this.mounted = true;
-      this.pinchLastCenterX = null;
-      this.pinchLastCenterY = null;
-      this.onChangeCallbacks = /* @__PURE__ */ new Set();
-      this.onInitCallbacks = /* @__PURE__ */ new Set();
-      this.wrapperComponent = null;
-      this.contentComponent = null;
-      this.isInitialized = false;
-      this.bounds = null;
-      this.previousWheelEvent = null;
-      this.wheelStopEventTimer = null;
-      this.wheelAnimationTimer = null;
-      this.isPanning = false;
-      this.isWheelPanning = false;
-      this.startCoords = null;
-      this.lastTouch = null;
-      this.distance = null;
-      this.lastDistance = null;
-      this.pinchStartDistance = null;
-      this.pinchStartScale = null;
-      this.pinchMidpoint = null;
-      this.doubleClickStopEventTimer = null;
-      this.velocity = null;
-      this.velocityTime = null;
-      this.lastMousePosition = null;
-      this.animate = false;
-      this.animation = null;
-      this.maxBounds = null;
-      this.pressedKeys = {};
-      this.mount = function() {
-        _this.initializeWindowEvents();
-      };
-      this.unmount = function() {
-        _this.cleanupWindowEvents();
-      };
-      this.update = function(newProps) {
-        _this.props = newProps;
-        handleCalculateBounds(_this, _this.transformState.scale);
-        _this.setup = createSetup(newProps);
-      };
-      this.initializeWindowEvents = function() {
-        var _a, _b;
-        var passive = makePassiveEventOption();
-        var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;
-        var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;
-        (_b = _this.wrapperComponent) === null || _b === void 0 ? void 0 : _b.addEventListener("wheel", _this.onWheelPanning, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mousedown", _this.onPanningStart, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mousemove", _this.onPanning, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("mouseup", _this.onPanningStop, passive);
-        currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.addEventListener("mouseleave", _this.clearPanning, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("keyup", _this.setKeyUnPressed, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.addEventListener("keydown", _this.setKeyPressed, passive);
-      };
-      this.cleanupWindowEvents = function() {
-        var _a, _b;
-        var passive = makePassiveEventOption();
-        var currentDocument = (_a = _this.wrapperComponent) === null || _a === void 0 ? void 0 : _a.ownerDocument;
-        var currentWindow = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.defaultView;
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mousedown", _this.onPanningStart, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mousemove", _this.onPanning, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("mouseup", _this.onPanningStop, passive);
-        currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.removeEventListener("mouseleave", _this.clearPanning, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("keyup", _this.setKeyUnPressed, passive);
-        currentWindow === null || currentWindow === void 0 ? void 0 : currentWindow.removeEventListener("keydown", _this.setKeyPressed, passive);
-        document.removeEventListener("mouseleave", _this.clearPanning, passive);
-        handleCancelAnimation(_this);
-        (_b = _this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-      };
-      this.handleInitializeWrapperEvents = function(wrapper) {
-        var passive = makePassiveEventOption();
-        wrapper.addEventListener("wheel", _this.onWheelZoom, passive);
-        wrapper.addEventListener("dblclick", _this.onDoubleClick, passive);
-        wrapper.addEventListener("touchstart", _this.onTouchPanningStart, passive);
-        wrapper.addEventListener("touchmove", _this.onTouchPanning, passive);
-        wrapper.addEventListener("touchend", _this.onTouchPanningStop, passive);
-      };
-      this.handleInitialize = function(wrapper, contentComponent) {
-        var isCentered = false;
-        var centerOnInit = _this.setup.centerOnInit;
-        var hasTarget = function(entries, target) {
-          for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-            var entry = entries_1[_i];
-            if (entry.target === target) {
-              return true;
-            }
-          }
-          return false;
-        };
-        _this.applyTransformation();
-        _this.onInitCallbacks.forEach(function(callback) {
-          callback(getContext(_this));
-        });
-        _this.observer = new ResizeObserver(function(entries) {
-          if (hasTarget(entries, wrapper) || hasTarget(entries, contentComponent)) {
-            if (centerOnInit && !isCentered) {
-              var currentWidth = contentComponent.offsetWidth;
-              var currentHeight = contentComponent.offsetHeight;
-              if (currentWidth > 0 || currentHeight > 0) {
-                isCentered = true;
-                _this.setCenter();
-              }
-            } else {
-              handleCancelAnimation(_this);
-              handleCalculateBounds(_this, _this.transformState.scale);
-              handleAlignToBounds(_this, 0);
-            }
-          }
-        });
-        _this.observer.observe(wrapper);
-        _this.observer.observe(contentComponent);
-      };
-      this.onWheelZoom = function(event) {
-        var disabled = _this.setup.disabled;
-        if (disabled)
-          return;
-        var isAllowed = isWheelAllowed(_this, event);
-        if (!isAllowed)
-          return;
-        var keysPressed = _this.isPressingKeys(_this.setup.wheel.activationKeys);
-        if (!keysPressed)
-          return;
-        handleWheelStart(_this, event);
-        handleWheelZoom(_this, event);
-        handleWheelStop(_this, event);
-      };
-      this.onWheelPanning = function(event) {
-        var _a = _this.setup, disabled = _a.disabled, wheel = _a.wheel, panning = _a.panning;
-        if (!_this.wrapperComponent || !_this.contentComponent || disabled || !wheel.wheelDisabled || panning.disabled || !panning.wheelPanning || event.ctrlKey) {
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        var _b = _this.transformState, positionX = _b.positionX, positionY = _b.positionY;
-        var mouseX = positionX - event.deltaX;
-        var mouseY = positionY - event.deltaY;
-        var newPositionX = panning.lockAxisX ? positionX : mouseX;
-        var newPositionY = panning.lockAxisY ? positionY : mouseY;
-        var _c = _this.setup.alignmentAnimation, sizeX = _c.sizeX, sizeY = _c.sizeY;
-        var paddingValueX = getPaddingValue(_this, sizeX);
-        var paddingValueY = getPaddingValue(_this, sizeY);
-        if (newPositionX === positionX && newPositionY === positionY)
-          return;
-        handleNewPosition(_this, newPositionX, newPositionY, paddingValueX, paddingValueY);
-      };
-      this.onPanningStart = function(event) {
-        var disabled = _this.setup.disabled;
-        var onPanningStart = _this.props.onPanningStart;
-        if (disabled)
-          return;
-        var isAllowed = isPanningStartAllowed(_this, event);
-        if (!isAllowed)
-          return;
-        var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
-        if (!keysPressed)
-          return;
-        if (event.button === 0 && !_this.setup.panning.allowLeftClickPan)
-          return;
-        if (event.button === 1 && !_this.setup.panning.allowMiddleClickPan)
-          return;
-        if (event.button === 2 && !_this.setup.panning.allowRightClickPan)
-          return;
-        event.preventDefault();
-        event.stopPropagation();
-        handleCancelAnimation(_this);
-        handlePanningStart(_this, event);
-        handleCallback(getContext(_this), event, onPanningStart);
-      };
-      this.onPanning = function(event) {
-        var disabled = _this.setup.disabled;
-        var onPanning = _this.props.onPanning;
-        if (disabled)
-          return;
-        var isAllowed = isPanningAllowed(_this);
-        if (!isAllowed)
-          return;
-        var keysPressed = _this.isPressingKeys(_this.setup.panning.activationKeys);
-        if (!keysPressed)
-          return;
-        event.preventDefault();
-        event.stopPropagation();
-        handlePanning(_this, event.clientX, event.clientY);
-        handleCallback(getContext(_this), event, onPanning);
-      };
-      this.onPanningStop = function(event) {
-        var onPanningStop = _this.props.onPanningStop;
-        if (_this.isPanning) {
-          handlePanningEnd(_this);
-          handleCallback(getContext(_this), event, onPanningStop);
-        }
-      };
-      this.onPinchStart = function(event) {
-        var disabled = _this.setup.disabled;
-        var _a = _this.props, onPinchingStart = _a.onPinchingStart, onZoomStart = _a.onZoomStart;
-        if (disabled)
-          return;
-        var isAllowed = isPinchStartAllowed(_this, event);
-        if (!isAllowed)
-          return;
-        handlePinchStart(_this, event);
-        handleCancelAnimation(_this);
-        handleCallback(getContext(_this), event, onPinchingStart);
-        handleCallback(getContext(_this), event, onZoomStart);
-      };
-      this.onPinch = function(event) {
-        var disabled = _this.setup.disabled;
-        var _a = _this.props, onPinching = _a.onPinching, onZoom = _a.onZoom;
-        if (disabled)
-          return;
-        var isAllowed = isPinchAllowed(_this);
-        if (!isAllowed)
-          return;
-        event.preventDefault();
-        event.stopPropagation();
-        handlePinchZoom(_this, event);
-        handleCallback(getContext(_this), event, onPinching);
-        handleCallback(getContext(_this), event, onZoom);
-      };
-      this.onPinchStop = function(event) {
-        var _a = _this.props, onPinchingStop = _a.onPinchingStop, onZoomStop = _a.onZoomStop;
-        if (_this.pinchStartScale) {
-          handlePinchStop(_this);
-          handleCallback(getContext(_this), event, onPinchingStop);
-          handleCallback(getContext(_this), event, onZoomStop);
-        }
-      };
-      this.onTouchPanningStart = function(event) {
-        var disabled = _this.setup.disabled;
-        var onPanningStart = _this.props.onPanningStart;
-        if (disabled)
-          return;
-        var isAllowed = isPanningStartAllowed(_this, event);
-        if (!isAllowed)
-          return;
-        var isDoubleTap = _this.lastTouch && +/* @__PURE__ */ new Date() - _this.lastTouch < 200 && event.touches.length === 1;
-        if (!isDoubleTap) {
-          _this.lastTouch = +/* @__PURE__ */ new Date();
-          handleCancelAnimation(_this);
-          var touches = event.touches;
-          var isPanningAction = touches.length === 1;
-          var isPinchAction = touches.length === 2;
-          if (isPanningAction) {
-            handleCancelAnimation(_this);
-            handlePanningStart(_this, event);
-            handleCallback(getContext(_this), event, onPanningStart);
-          }
-          if (isPinchAction) {
-            _this.onPinchStart(event);
-          }
-        }
-      };
-      this.onTouchPanning = function(event) {
-        var disabled = _this.setup.disabled;
-        var onPanning = _this.props.onPanning;
-        if (_this.isPanning && event.touches.length === 1) {
-          if (disabled)
-            return;
-          var isAllowed = isPanningAllowed(_this);
-          if (!isAllowed)
-            return;
-          event.preventDefault();
-          event.stopPropagation();
-          var touch = event.touches[0];
-          handlePanning(_this, touch.clientX, touch.clientY);
-          handleCallback(getContext(_this), event, onPanning);
-        } else if (event.touches.length > 1) {
-          _this.onPinch(event);
-        }
-      };
-      this.onTouchPanningStop = function(event) {
-        _this.onPanningStop(event);
-        _this.onPinchStop(event);
-      };
-      this.onDoubleClick = function(event) {
-        var disabled = _this.setup.disabled;
-        if (disabled)
-          return;
-        var isAllowed = isDoubleClickAllowed(_this, event);
-        if (!isAllowed)
-          return;
-        handleDoubleClick(_this, event);
-      };
-      this.clearPanning = function(event) {
-        if (_this.isPanning) {
-          _this.onPanningStop(event);
-        }
-      };
-      this.setKeyPressed = function(e) {
-        _this.pressedKeys[e.key] = true;
-      };
-      this.setKeyUnPressed = function(e) {
-        _this.pressedKeys[e.key] = false;
-      };
-      this.isPressingKeys = function(keys) {
-        if (!keys.length) {
-          return true;
-        }
-        return Boolean(keys.find(function(key) {
-          return _this.pressedKeys[key];
-        }));
-      };
-      this.setTransformState = function(scale, positionX, positionY) {
-        var onTransformed = _this.props.onTransformed;
-        if (!Number.isNaN(scale) && !Number.isNaN(positionX) && !Number.isNaN(positionY)) {
-          if (scale !== _this.transformState.scale) {
-            _this.transformState.previousScale = _this.transformState.scale;
-            _this.transformState.scale = scale;
-          }
-          _this.transformState.positionX = positionX;
-          _this.transformState.positionY = positionY;
-          _this.applyTransformation();
-          var ctx_1 = getContext(_this);
-          _this.onChangeCallbacks.forEach(function(callback) {
-            return callback(ctx_1);
-          });
-          handleCallback(ctx_1, { scale, positionX, positionY }, onTransformed);
-        } else {
-          console.error("Detected NaN set state values");
-        }
-      };
-      this.setCenter = function() {
-        if (_this.wrapperComponent && _this.contentComponent) {
-          var targetState = getCenterPosition(_this.transformState.scale, _this.wrapperComponent, _this.contentComponent);
-          _this.setTransformState(targetState.scale, targetState.positionX, targetState.positionY);
-        }
-      };
-      this.handleTransformStyles = function(x, y, scale) {
-        if (_this.props.customTransform) {
-          return _this.props.customTransform(x, y, scale);
-        }
-        return getTransformStyles(x, y, scale);
-      };
-      this.applyTransformation = function() {
-        if (!_this.mounted || !_this.contentComponent)
-          return;
-        var _a = _this.transformState, scale = _a.scale, positionX = _a.positionX, positionY = _a.positionY;
-        var transform = _this.handleTransformStyles(positionX, positionY, scale);
-        _this.contentComponent.style.transform = transform;
-      };
-      this.getContext = function() {
-        return getContext(_this);
-      };
-      this.onChange = function(callback) {
-        if (!_this.onChangeCallbacks.has(callback)) {
-          _this.onChangeCallbacks.add(callback);
-        }
-        return function() {
-          _this.onChangeCallbacks.delete(callback);
-        };
-      };
-      this.onInit = function(callback) {
-        if (!_this.onInitCallbacks.has(callback)) {
-          _this.onInitCallbacks.add(callback);
-        }
-        return function() {
-          _this.onInitCallbacks.delete(callback);
-        };
-      };
-      this.init = function(wrapperComponent, contentComponent) {
-        _this.cleanupWindowEvents();
-        _this.wrapperComponent = wrapperComponent;
-        _this.contentComponent = contentComponent;
-        handleCalculateBounds(_this, _this.transformState.scale);
-        _this.handleInitializeWrapperEvents(wrapperComponent);
-        _this.handleInitialize(wrapperComponent, contentComponent);
-        _this.initializeWindowEvents();
-        _this.isInitialized = true;
-        var ctx = getContext(_this);
-        handleCallback(ctx, void 0, _this.props.onInit);
-      };
-      this.props = props;
-      this.setup = createSetup(this.props);
-      this.transformState = createState(this.props);
-    }
-    return ZoomPanPinch2;
-  })()
-);
-var Context = React.createContext(null);
-var getContent = function(children, ctx) {
-  if (typeof children === "function") {
-    return children(ctx);
-  }
-  return children;
-};
-var TransformWrapper = React.forwardRef(function(props, ref) {
-  var instance = useRef(new ZoomPanPinch(props)).current;
-  var content = getContent(props.children, getControls(instance));
-  useImperativeHandle(ref, function() {
-    return getControls(instance);
-  }, [instance]);
-  useEffect(function() {
-    instance.update(props);
-  }, [instance, props]);
-  return React.createElement(Context.Provider, { value: instance }, content);
-});
-React.forwardRef(function(props, ref) {
-  var localRef = useRef(null);
-  var instance = useContext(Context);
-  useEffect(function() {
-    return instance.onChange(function(ctx) {
-      if (localRef.current) {
-        var positionX = 0;
-        var positionY = 0;
-        localRef.current.style.transform = instance.handleTransformStyles(positionX, positionY, 1 / ctx.instance.transformState.scale);
-      }
-    });
-  }, [instance]);
-  return React.createElement("div", __assign({}, props, { ref: mergeRefs([localRef, ref]) }));
-});
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-  if (typeof document === "undefined") {
-    return;
-  }
-  var head = document.head || document.getElementsByTagName("head")[0];
-  var style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-var css_248z = ".transform-component-module_wrapper__SPB86 {\n  position: relative;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  overflow: hidden;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  transform: translate3d(0, 0, 0);\n}\n.transform-component-module_content__FBWxo {\n  display: flex;\n  flex-wrap: wrap;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  margin: 0;\n  padding: 0;\n  transform-origin: 0% 0%;\n}\n.transform-component-module_content__FBWxo img {\n  pointer-events: none;\n}\n";
-var styles = { "wrapper": "transform-component-module_wrapper__SPB86", "content": "transform-component-module_content__FBWxo" };
-styleInject(css_248z);
-var TransformComponent = function(_a) {
-  var children = _a.children, _b = _a.wrapperClass, wrapperClass = _b === void 0 ? "" : _b, _c = _a.contentClass, contentClass = _c === void 0 ? "" : _c, wrapperStyle = _a.wrapperStyle, contentStyle = _a.contentStyle, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.contentProps, contentProps = _e === void 0 ? {} : _e;
-  var _f = useContext(Context), init = _f.init, cleanupWindowEvents = _f.cleanupWindowEvents;
-  var wrapperRef = useRef(null);
-  var contentRef = useRef(null);
-  useEffect(function() {
-    var wrapper = wrapperRef.current;
-    var content = contentRef.current;
-    if (wrapper !== null && content !== null && init) {
-      init === null || init === void 0 ? void 0 : init(wrapper, content);
-    }
-    return function() {
-      cleanupWindowEvents === null || cleanupWindowEvents === void 0 ? void 0 : cleanupWindowEvents();
-    };
-  }, []);
-  return React.createElement(
-    "div",
-    __assign({}, wrapperProps, { ref: wrapperRef, className: "".concat(baseClasses.wrapperClass, " ").concat(styles.wrapper, " ").concat(wrapperClass), style: wrapperStyle }),
-    React.createElement("div", __assign({}, contentProps, { ref: contentRef, className: "".concat(baseClasses.contentClass, " ").concat(styles.content, " ").concat(contentClass), style: contentStyle }), children)
-  );
-};
-var useTransformContext = function() {
-  var libraryContext = useContext(Context);
-  if (!libraryContext) {
-    throw new Error("Transform context must be placed inside TransformWrapper");
-  }
-  return libraryContext;
-};
-var useControls = function() {
-  var libraryContext = useTransformContext();
-  return getControls(libraryContext);
-};
+import { FishSymbol, Copy, Download, RotateCcw, X, ZoomIn, ZoomOut, Maximize2, CircleAlert, Code2, Columns2, Eye } from "lucide-react";
+import { useState, useId, useEffect, useCallback, useRef } from "react";
+import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
 var mermaidContainer = "_36yqie0";
 var mermaidEditHint = "_36yqie1";
 var zoomControls = "_36yqie2";
@@ -2328,13 +500,13 @@ const MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme })
     onSave(code);
     dismiss();
   }, [code, onSave, dismiss]);
-  const viewBtn = (mode, Icon2) => /* @__PURE__ */ jsx(
+  const viewBtn = (mode, Icon) => /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: `${editorViewItem}${activeView === mode ? ` ${editorViewItemActive}` : ""}`,
       onClick: () => setActiveView(mode),
-      children: /* @__PURE__ */ jsx(Icon2, { size: 14 })
+      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2358,7 +530,7 @@ const MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: editorHeaderRight, children: [
         /* @__PURE__ */ jsxs("div", { className: editorViewToggle, children: [
-          viewBtn("code", CodeXml),
+          viewBtn("code", Code2),
           viewBtn("split", Columns2),
           viewBtn("preview", Eye)
         ] }),
@@ -2452,16 +624,16 @@ const MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme })
   ] });
 };
 const ZoomControls = () => {
-  const { zoomIn: zoomIn2, zoomOut: zoomOut2, resetTransform: resetTransform2 } = useControls();
+  const { zoomIn, zoomOut, resetTransform } = useControls();
   return /* @__PURE__ */ jsxs("div", { className: zoomControls, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: zoomBtn, onClick: () => zoomIn2(), children: /* @__PURE__ */ jsx(ZoomIn, { size: 14 }) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: zoomBtn, onClick: () => zoomOut2(), children: /* @__PURE__ */ jsx(ZoomOut, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: zoomBtn, onClick: () => zoomIn(), children: /* @__PURE__ */ jsx(ZoomIn, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: zoomBtn, onClick: () => zoomOut(), children: /* @__PURE__ */ jsx(ZoomOut, { size: 14 }) }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         className: zoomBtn,
-        onClick: () => resetTransform2(),
+        onClick: () => resetTransform(),
         children: /* @__PURE__ */ jsx(Maximize2, { size: 14 })
       }
     )