"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/LightboxImage.tsx
var LightboxImage_exports = {};
__export(LightboxImage_exports, {
  LightboxImage: () => LightboxImage
});
module.exports = __toCommonJS(LightboxImage_exports);
var import_styled = __toESM(require("@emotion/styled"), 1);
var import_react = require("react");

// src/styles/z-index.tsx
var z = {
  card: 1,
  fieldError: 1,
  textInput: 2,
  select: 3,
  selectFocused: 4,
  walletActionPreviewTopGradient: 1,
  headerContainer: 99,
  smBanner: 99,
  headerTop: 100,
  navMenu: 100,
  smNavMenu: 100,
  navAction: 101,
  smNavAction: 100,
  // keep under navDropdown
  notificationBanner: 170,
  qrReaderVideo: 180,
  qrReaderOverlay: 181,
  modalOverlay: 190,
  modalContainer: 191,
  dropdown: 192,
  tooltip: 193,
  toast: 200
};

// src/components/LightboxImage.tsx
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
var LightboxImage = ({ children }) => {
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
  const [boundingRect, setBoundingRect] = (0, import_react.useState)({
    x: 0,
    y: 0,
    width: 0,
    height: 0
  });
  const imageRef = (0, import_react.useRef)(null);
  const handleMouseUp = () => {
    setIsOpen(!isOpen);
  };
  const handleSetBoundingRect = (ref) => {
    var _a;
    const rect = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
    if (rect) {
      setBoundingRect({
        x: rect.x,
        y: rect.y,
        width: rect.width,
        height: rect.height
      });
    }
  };
  (0, import_react.useEffect)(() => {
    handleSetBoundingRect(imageRef);
  }, [imageRef]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DummyImage, { isOpen, boundingRect }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      StyledImage,
      {
        isOpen,
        ref: imageRef,
        boundingRect,
        onMouseDown: () => handleSetBoundingRect(imageRef),
        onMouseUp: handleMouseUp,
        children
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
  ] });
};
var DummyImage = import_styled.default.div`
  ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
`;
var StyledImage = import_styled.default.div`
  display: flex;
  justify-content: start;
  align-items: center;
  z-index: ${z.modalContainer};

  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-out;

  ${(props) => props.isOpen ? `
    animation-direction: normal;
    position: fixed;
    animation-name: zoomIn;
    pointer-events: none;
  ` : `
    &:hover {
      cursor: zoom-in;
    }
  `}

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @keyframes zoomIn {
    from {
      ${(props) => {
  const { x, y, width, height } = props.boundingRect;
  return `
          top: ${y}px;
          left: ${x}px;
          width: ${width}px;
          height: ${height}px;
        `;
}}
    }
    to {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 24px;
    }
  }
`;
var Lightbox = import_styled.default.div`
  transition: opacity 0.2s ease-out;
  position: fixed;
  opacity: 0;
  z-index: ${z.modalOverlay};
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  ${({ theme, isOpen }) => isOpen ? `
    opacity: 1;
    background: ${theme.bg};

    &:hover {
      cursor: zoom-out;
    }
  ` : `
    pointer-events: none;
  `}
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  LightboxImage
});
