infinity-forge 14.0.9 → 14.1.2

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/crop-canvas.js

@@ -1,153 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropCanvas = void 0;
-exports.toNaturalCropArea = toNaturalCropArea;
-exports.toDisplayCropArea = toDisplayCropArea;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var ui_1 = require("../../../../../../../../ui/index.js");
-/** Calcula o retângulo de recorte em coordenadas de DISPLAY (px do box),
- *  respeitando object-fit: contain sem depender de getBoundingClientRect. */
-function computeDisplayCropArea(cropArea, imgEl, imageDimensions) {
-    var boxW = imgEl.clientWidth; // tamanho da CAIXA do <img>
-    var boxH = imgEl.clientHeight;
-    var natW = imageDimensions.width; // dimensões NATURAIS
-    var natH = imageDimensions.height;
-    if (!boxW || !boxH || !natW || !natH)
-        return cropArea;
-    var imgAspect = natW / natH;
-    var boxAspect = boxW / boxH;
-    var scale;
-    var offsetX = 0;
-    var offsetY = 0;
-    if (imgAspect > boxAspect) {
-        // limitado pela largura → largura ocupa boxW, altura centraliza
-        scale = boxW / natW;
-        var renderedH = natH * scale;
-        offsetY = (boxH - renderedH) / 2;
-    }
-    else {
-        // limitado pela altura → altura ocupa boxH, largura centraliza
-        scale = boxH / natH;
-        var renderedW = natW * scale;
-        offsetX = (boxW - renderedW) / 2;
-    }
-    return {
-        x: cropArea.x * scale + offsetX,
-        y: cropArea.y * scale + offsetY,
-        width: cropArea.width * scale,
-        height: cropArea.height * scale,
-    };
-}
-/** Converte de DISPLAY → NATURAL (útil para salvar/enviar ao backend/canvas). */
-function toNaturalCropArea(displayArea, imgEl, imageDimensions) {
-    var boxW = imgEl.clientWidth;
-    var boxH = imgEl.clientHeight;
-    var natW = imageDimensions.width;
-    var natH = imageDimensions.height;
-    if (!boxW || !boxH || !natW || !natH)
-        return displayArea;
-    var imgAspect = natW / natH;
-    var boxAspect = boxW / boxH;
-    var scale;
-    var offsetX = 0;
-    var offsetY = 0;
-    if (imgAspect > boxAspect) {
-        scale = boxW / natW;
-        var renderedH = natH * scale;
-        offsetY = (boxH - renderedH) / 2;
-    }
-    else {
-        scale = boxH / natH;
-        var renderedW = natW * scale;
-        offsetX = (boxW - renderedW) / 2;
-    }
-    return {
-        x: (displayArea.x - offsetX) / scale,
-        y: (displayArea.y - offsetY) / scale,
-        width: displayArea.width / scale,
-        height: displayArea.height / scale,
-    };
-}
-/** Converte NATURAL → DISPLAY usando a mesma base do componente. */
-function toDisplayCropArea(cropArea, imageRef, _containerRef, // não utilizado; mantido por compat.
-imageDimensions) {
-    if (!imageRef)
-        return cropArea;
-    return computeDisplayCropArea(cropArea, imageRef, imageDimensions);
-}
-function CropCanvasComponent(_a) {
-    var file = _a.file, imageDimensions = _a.imageDimensions, cropArea = _a.cropArea, displayCropArea = _a.displayCropArea, onStart = _a.onStart, imageRef = _a.imageRef;
-    var containerRef = (0, react_1.useRef)(null); // só para overlay (posicionamento absoluto)
-    var _b = (0, react_1.useState)(displayCropArea), calculatedDisplayArea = _b[0], setCalculatedDisplayArea = _b[1];
-    // Recalcula sempre que cropArea ou tamanho do <img> mudar.
-    (0, react_1.useEffect)(function () {
-        if (!imageRef.current)
-            return;
-        setCalculatedDisplayArea(computeDisplayCropArea(cropArea, imageRef.current, imageDimensions));
-    }, [cropArea, imageRef, imageDimensions]);
-    // Mantém sync em resize/onLoad (janela, container flex, etc.)
-    (0, react_1.useEffect)(function () {
-        if (!imageRef.current)
-            return;
-        var recompute = function () {
-            if (!imageRef.current)
-                return;
-            setCalculatedDisplayArea(computeDisplayCropArea(cropArea, imageRef.current, imageDimensions));
-        };
-        var ro = new ResizeObserver(recompute);
-        ro.observe(imageRef.current);
-        imageRef.current.addEventListener('load', recompute);
-        return function () {
-            var _a;
-            ro.disconnect();
-            (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', recompute);
-        };
-    }, [imageRef, cropArea, imageDimensions]);
-    var handleResizeStart = (0, react_1.useCallback)(function (e, direction) {
-        e.stopPropagation();
-        onStart(e, 'resize', direction);
-    }, [onStart]);
-    var handleMoveStart = (0, react_1.useCallback)(function (e) {
-        onStart(e, 'move');
-    }, [onStart]);
-    var clearCropAreaStyle = (0, react_1.useMemo)(function () { return ({
-        left: "".concat(calculatedDisplayArea.x, "px"),
-        top: "".concat(calculatedDisplayArea.y, "px"),
-        width: "".concat(calculatedDisplayArea.width, "px"),
-        height: "".concat(calculatedDisplayArea.height, "px"),
-        boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.4)',
-    }); }, [calculatedDisplayArea]);
-    var cropSelectionAreaStyle = (0, react_1.useMemo)(function () { return ({
-        left: "".concat(calculatedDisplayArea.x, "px"),
-        top: "".concat(calculatedDisplayArea.y, "px"),
-        width: "".concat(calculatedDisplayArea.width, "px"),
-        height: "".concat(calculatedDisplayArea.height, "px"),
-    }); }, [calculatedDisplayArea]);
-    var formattedDimensions = (0, react_1.useMemo)(function () { return ({
-        width: Math.round(cropArea.width),
-        height: Math.round(cropArea.height),
-        aspectRatio: cropArea.width && cropArea.height
-            ? "".concat((cropArea.width / cropArea.height).toFixed(2), ":1")
-            : 'Free',
-    }); }, [cropArea.width, cropArea.height]);
-    if (imageDimensions.width === 0 || imageDimensions.height === 0) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: 'loading-wrapper', children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconLoading' }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'crop-area-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'crop-image-box', children: [(0, jsx_runtime_1.jsx)("img", { className: 'crop-image', ref: imageRef, src: file === null || file === void 0 ? void 0 : file.url, alt: 'Image to crop' }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-overlay', ref: containerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: 'dimmed-overlay' }), (0, jsx_runtime_1.jsx)("div", { className: 'clear-crop-area', style: clearCropAreaStyle }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-selection-area', style: cropSelectionAreaStyle, onMouseDown: handleMoveStart, onTouchStart: handleMoveStart, children: [(0, jsx_runtime_1.jsx)("div", { className: 'corner-handle nw', onMouseDown: function (e) { return handleResizeStart(e, 'nw'); }, onTouchStart: function (e) { return handleResizeStart(e, 'nw'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle ne', onMouseDown: function (e) { return handleResizeStart(e, 'ne'); }, onTouchStart: function (e) { return handleResizeStart(e, 'ne'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle sw', onMouseDown: function (e) { return handleResizeStart(e, 'sw'); }, onTouchStart: function (e) { return handleResizeStart(e, 'sw'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle se', onMouseDown: function (e) { return handleResizeStart(e, 'se'); }, onTouchStart: function (e) { return handleResizeStart(e, 'se'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle n', onMouseDown: function (e) { return handleResizeStart(e, 'n'); }, onTouchStart: function (e) { return handleResizeStart(e, 'n'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle s', onMouseDown: function (e) { return handleResizeStart(e, 's'); }, onTouchStart: function (e) { return handleResizeStart(e, 's'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle w', onMouseDown: function (e) { return handleResizeStart(e, 'w'); }, onTouchStart: function (e) { return handleResizeStart(e, 'w'); } }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle e', onMouseDown: function (e) { return handleResizeStart(e, 'e'); }, onTouchStart: function (e) { return handleResizeStart(e, 'e'); } })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimensions', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimension-item', children: [(0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconLeftArrowBar' }), formattedDimensions.width, " \u00D7 ", formattedDimensions.height, " px"] }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimension-item', children: ["Aspect Ratio: ", formattedDimensions.aspectRatio] })] })] }));
-}
-exports.CropCanvas = (0, react_1.memo)(CropCanvasComponent, function (prevProps, nextProps) {
-    var _a, _b;
-    return (((_a = prevProps.file) === null || _a === void 0 ? void 0 : _a.url) === ((_b = nextProps.file) === null || _b === void 0 ? void 0 : _b.url) &&
-        prevProps.imageDimensions.width === nextProps.imageDimensions.width &&
-        prevProps.imageDimensions.height === nextProps.imageDimensions.height &&
-        prevProps.cropArea.x === nextProps.cropArea.x &&
-        prevProps.cropArea.y === nextProps.cropArea.y &&
-        prevProps.cropArea.width === nextProps.cropArea.width &&
-        prevProps.cropArea.height === nextProps.cropArea.height &&
-        prevProps.displayCropArea.x === nextProps.displayCropArea.x &&
-        prevProps.displayCropArea.y === nextProps.displayCropArea.y &&
-        prevProps.displayCropArea.width === nextProps.displayCropArea.width &&
-        prevProps.displayCropArea.height === nextProps.displayCropArea.height);
-});
-//# sourceMappingURL=crop-canvas.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/crop-canvas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"crop-canvas.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/crop-canvas.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/index.d.ts

@@ -1 +0,0 @@
-export { CropCanvas } from './crop-canvas.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropCanvas = void 0;
-var crop_canvas_1 = require("./crop-canvas.js");
-Object.defineProperty(exports, "CropCanvas", { enumerable: true, get: function () { return crop_canvas_1.CropCanvas; } });
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-canvas/index.ts"],"names":[],"mappings":";;;AAAA,6CAA0C;AAAjC,yGAAA,UAAU,OAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/crop-interface.d.ts

@@ -1,9 +0,0 @@
-import { FileSystemType } from '../../../../../../../../ui/index.js';
-interface CropInterfaceProps {
-    file: FileSystemType | null;
-    onCancel: () => void;
-    onError: (error: string) => void;
-    onApplyCrop?: (croppedFile: FileSystemType) => void;
-}
-export declare function CropInterface({ file, onCancel, onError, onApplyCrop }: CropInterfaceProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/crop-interface.js

@@ -1,56 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropInterface = CropInterface;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var hooks_1 = require("../../hooks/index.js");
-var crop_actions_1 = require("../crop-actions/index.js");
-var crop_canvas_1 = require("../crop-canvas/index.js");
-var preview_panel_1 = __importDefault(require("../preview-panel/index.js"));
-function CropInterface(_a) {
-    var file = _a.file, onCancel = _a.onCancel, onError = _a.onError, onApplyCrop = _a.onApplyCrop;
-    var imageRef = (0, react_1.useRef)(null);
-    var _b = (0, hooks_1.useCropState)({
-        file: file,
-    }), imageDimensions = _b.imageDimensions, cropArea = _b.cropArea, setCropArea = _b.setCropArea, aspectRatio = _b.aspectRatio, restoreOriginal = _b.restoreOriginal, setAspectRatioPreset = _b.setAspectRatioPreset;
-    var _c = (0, hooks_1.useCropInteractions)({
-        imageDimensions: imageDimensions,
-        cropArea: cropArea,
-        setCropArea: setCropArea,
-        aspectRatio: aspectRatio,
-        imageRef: imageRef,
-    }), handleStart = _c.handleStart, getDisplayScale = _c.getDisplayScale;
-    var _d = (0, hooks_1.useCropOperations)({
-        file: file,
-        cropArea: cropArea,
-        onApplyCrop: onApplyCrop,
-        onCancel: onCancel,
-        onError: onError,
-    }), isLoading = _d.isLoading, handleApplyCrop = _d.handleApplyCrop;
-    var memoizedGetDisplayScale = (0, react_1.useCallback)(function () {
-        return getDisplayScale();
-    }, [getDisplayScale]);
-    var displayCropArea = (0, react_1.useMemo)(function () {
-        var scale = memoizedGetDisplayScale();
-        return {
-            x: cropArea.x * scale,
-            y: cropArea.y * scale,
-            width: cropArea.width * scale,
-            height: cropArea.height * scale,
-        };
-    }, [cropArea.x, cropArea.y, cropArea.width, cropArea.height, memoizedGetDisplayScale]);
-    var memoizedHandleStart = (0, react_1.useCallback)(function (e, action, direction) {
-        handleStart(e, action, direction);
-    }, [handleStart]);
-    var memoizedRestoreOriginal = (0, react_1.useCallback)(function () {
-        restoreOriginal();
-    }, [restoreOriginal]);
-    var memoizedSetAspectRatioPreset = (0, react_1.useCallback)(function (ratio) {
-        setAspectRatioPreset(ratio);
-    }, [setAspectRatioPreset]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'crop-interface', children: [(0, jsx_runtime_1.jsx)(crop_actions_1.CropActions, { onRestore: memoizedRestoreOriginal, onCancel: onCancel, onApply: handleApplyCrop, isLoading: isLoading }), (0, jsx_runtime_1.jsxs)("div", { className: 'main-crop-area', children: [(0, jsx_runtime_1.jsx)(crop_canvas_1.CropCanvas, { file: file, imageDimensions: imageDimensions, cropArea: cropArea, displayCropArea: displayCropArea, onStart: memoizedHandleStart, imageRef: imageRef }), (0, jsx_runtime_1.jsx)(preview_panel_1.default, { file: file, imageDimensions: imageDimensions, cropArea: cropArea, onAspectRatioChange: memoizedSetAspectRatioPreset })] })] }));
-}
-//# sourceMappingURL=crop-interface.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/crop-interface.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"crop-interface.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/crop-interface.tsx"],"names":[],"mappings":";;;;;AAgBA,sCAmFC;;AAnGD,+BAAoD;AAGpD,qCAAkF;AAClF,gDAA6C;AAC7C,8CAA2C;AAC3C,mEAA2C;AAU3C,SAAgB,aAAa,CAAC,EAA4D;QAA1D,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA;IAClE,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IAEzC,IAAA,KAAiG,IAAA,oBAAY,EAAC;QAClH,IAAI,MAAA;KACL,CAAC,EAFM,eAAe,qBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,eAAe,qBAAA,EAAE,oBAAoB,0BAEhG,CAAA;IAEI,IAAA,KAAmC,IAAA,2BAAmB,EAAC;QAC3D,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,WAAW,aAAA;QACX,WAAW,aAAA;QACX,QAAQ,UAAA;KACT,CAAC,EANM,WAAW,iBAAA,EAAE,eAAe,qBAMlC,CAAA;IAEI,IAAA,KAAiC,IAAA,yBAAiB,EAAC;QACvD,IAAI,MAAA;QACJ,QAAQ,UAAA;QACR,WAAW,aAAA;QACX,QAAQ,UAAA;QACR,OAAO,SAAA;KACR,CAAC,EANM,SAAS,eAAA,EAAE,eAAe,qBAMhC,CAAA;IAEF,IAAM,uBAAuB,GAAG,IAAA,mBAAW,EAAC;QAC1C,OAAO,eAAe,EAAE,CAAA;IAC1B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,IAAM,eAAe,GAAoB,IAAA,eAAO,EAAC;QAC/C,IAAM,KAAK,GAAG,uBAAuB,EAAE,CAAA;QACvC,OAAO;YACL,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK;YACrB,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK;YACrB,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,KAAK;YAC7B,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,KAAK;SAChC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEtF,IAAM,mBAAmB,GAAG,IAAA,mBAAW,EACrC,UAAC,CAAsC,EAAE,MAAyB,EAAE,SAAe;QACjF,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;IACnC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,IAAM,uBAAuB,GAAG,IAAA,mBAAW,EAAC;QAC1C,eAAe,EAAE,CAAA;IACnB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,IAAM,4BAA4B,GAAG,IAAA,mBAAW,EAC9C,UAAC,KAAa;QACZ,oBAAoB,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAA;IAED,OAAO,CACL,iCAAK,SAAS,EAAC,gBAAgB,aAC7B,uBAAC,0BAAW,IACV,SAAS,EAAE,uBAAuB,EAClC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,SAAS,GACpB,EAEF,iCAAK,SAAS,EAAC,gBAAgB,aAC7B,uBAAC,wBAAU,IACT,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,QAAQ,GAClB,EAEF,uBAAC,uBAAY,IACX,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,4BAA4B,GACjD,IACE,IACF,CACP,CAAA;AACH,CAAC"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.d.ts

@@ -1 +0,0 @@
-export { CropInterface } from './crop-interface.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropInterface = void 0;
-var crop_interface_1 = require("./crop-interface.js");
-Object.defineProperty(exports, "CropInterface", { enumerable: true, get: function () { return crop_interface_1.CropInterface; } });
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.ts"],"names":[],"mappings":";;;AAAA,mDAAgD;AAAvC,+GAAA,aAAa,OAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.d.ts

@@ -1 +0,0 @@
-export declare const cropInterfaceStyles: import("styled-components").RuleSet<object>;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.js

@@ -1,11 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cropInterfaceStyles = void 0;
-var styled_components_1 = require("styled-components");
-exports.cropInterfaceStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .crop-interface {\n    .actions-wrapper {\n      border-bottom: 1px solid #e5e7eb;\n      padding: 1.5rem 2rem;\n      background: #f9fafb;\n      display: flex;\n      justify-content: space-between;\n      gap: 1rem;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        padding: 1rem;\n        gap: 0.5rem;\n\n        .actions-group {\n          flex-direction: column;\n          width: 100%;\n\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n\n        > div:last-child {\n          width: 100%;\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        gap: 0.5rem;\n      }\n\n      .actions-group {\n        display: flex;\n        gap: 1rem;\n        align-items: center;\n\n        @media (max-width: 1024px) {\n          gap: 0.5rem;\n          > div {\n            width: 100%;\n          }\n        }\n      }\n\n      .button-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        svg {\n          width: 1.6rem;\n          height: 1.6rem;\n          margin-right: 1rem;\n          stroke: currentColor;\n        }\n      }\n\n      button {\n        max-width: fit-content;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 1rem;\n          font-size: 1.3rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n\n        &.cancel {\n          color: #dc2626;\n\n          &:hover {\n            background: #dc262610;\n          }\n\n          svg {\n            fill: #dc2626;\n          }\n        }\n\n        &.accept {\n          color: #fff;\n          background: #10b981;\n\n          &:hover {\n            background: rgb(12, 136, 94);\n          }\n        }\n      }\n    }\n\n    .main-crop-area {\n      display: flex;\n      background: rgb(243 244 246);\n      min-height: 500px;\n      align-items: flex-start;\n      justify-content: center;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        height: auto;\n        align-items: center;\n      }\n    }\n\n    .crop-area-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      max-width: 100%;\n      padding: 2rem;\n      flex: 1;\n      height: 100%;\n\n      @media (max-width: 1024px) {\n        padding: 1rem;\n        flex: none;\n        height: auto;\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.5rem;\n      }\n    }\n\n    .crop-image-box {\n      position: relative;\n      background: #fff;\n      border-radius: 1rem;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      width: min(90vw, 500px);\n      height: min(90vw, 460px);\n      max-width: 100vw;\n      max-height: 100vw;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto;\n      min-width: 250px;\n      min-height: 250px;\n\n      @media (max-width: 1024px) {\n        max-width: 100vw;\n        max-height: 100vw;\n        min-width: 180px;\n        min-height: 180px;\n      }\n\n      @media (max-width: 768px) {\n        min-width: 120px;\n        min-height: 120px;\n        border-radius: 0.5rem;\n      }\n\n      .crop-image {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        pointer-events: none;\n        user-select: none;\n        flex-shrink: 0;\n      }\n    }\n\n    .loading-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 2rem;\n\n      @media (max-width: 768px) {\n        padding: 1rem;\n      }\n    }\n\n    .loading-text {\n      color: #6b7280;\n    }\n\n    .crop-overlay {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    .dimmed-overlay {\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.4);\n      pointer-events: none;\n    }\n\n    .clear-crop-area {\n      position: absolute;\n      background: transparent;\n    }\n\n    .crop-selection-area {\n      position: absolute;\n      border: 2px dashed #fff;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      cursor: move;\n      touch-action: none;\n      pointer-events: auto;\n      z-index: 3;\n\n      @media (max-width: 1024px) {\n        border-width: 3px;\n        cursor: default;\n      }\n\n      @media (max-width: 768px) {\n        border-width: 2px;\n      }\n    }\n\n    .corner-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n      z-index: 10;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.nw {\n        top: -4px;\n        left: -4px;\n        cursor: nw-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          left: -5px;\n        }\n      }\n\n      &.ne {\n        top: -4px;\n        right: -4px;\n        cursor: ne-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          right: -5px;\n        }\n      }\n\n      &.sw {\n        bottom: -4px;\n        left: -4px;\n        cursor: sw-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          left: -5px;\n        }\n      }\n\n      &.se {\n        bottom: -4px;\n        right: -4px;\n        cursor: se-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          right: -5px;\n        }\n      }\n    }\n\n    .edge-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n      z-index: 10;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.n {\n        top: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: n-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n        }\n      }\n\n      &.s {\n        bottom: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: s-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n        }\n      }\n\n      &.w {\n        left: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: w-resize;\n\n        @media (max-width: 1024px) {\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          left: -5px;\n        }\n      }\n\n      &.e {\n        right: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: e-resize;\n\n        @media (max-width: 1024px) {\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          right: -5px;\n        }\n      }\n    }\n\n    .crop-dimensions {\n      margin-top: 1.5rem;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n      font-size: 1.4rem;\n      color: #4b5563;\n      flex-shrink: 0;\n\n      @media (max-width: 1024px) {\n        margin-top: 1rem;\n        gap: 0.75rem;\n        font-size: 1.3rem;\n      }\n\n      @media (max-width: 768px) {\n        margin-top: 0.75rem;\n        gap: 0.5rem;\n        font-size: 1.2rem;\n        flex-direction: column;\n      }\n\n      svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-right: 1rem;\n        stroke: currentColor;\n\n        @media (max-width: 768px) {\n          width: 1.3rem;\n          height: 1.3rem;\n          margin-right: 0.75rem;\n        }\n      }\n    }\n\n    .crop-dimension-item {\n      display: flex;\n      align-items: center;\n\n      @media (max-width: 768px) {\n        font-size: 1.1rem;\n      }\n    }\n\n    .action-buttons-inner {\n      @media (min-width: 640px) {\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n      }\n    }\n\n    .action-buttons-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.75rem;\n    }\n  }\n"], ["\n  .crop-interface {\n    .actions-wrapper {\n      border-bottom: 1px solid #e5e7eb;\n      padding: 1.5rem 2rem;\n      background: #f9fafb;\n      display: flex;\n      justify-content: space-between;\n      gap: 1rem;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        padding: 1rem;\n        gap: 0.5rem;\n\n        .actions-group {\n          flex-direction: column;\n          width: 100%;\n\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n\n        > div:last-child {\n          width: 100%;\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        gap: 0.5rem;\n      }\n\n      .actions-group {\n        display: flex;\n        gap: 1rem;\n        align-items: center;\n\n        @media (max-width: 1024px) {\n          gap: 0.5rem;\n          > div {\n            width: 100%;\n          }\n        }\n      }\n\n      .button-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        svg {\n          width: 1.6rem;\n          height: 1.6rem;\n          margin-right: 1rem;\n          stroke: currentColor;\n        }\n      }\n\n      button {\n        max-width: fit-content;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 1rem;\n          font-size: 1.3rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n\n        &.cancel {\n          color: #dc2626;\n\n          &:hover {\n            background: #dc262610;\n          }\n\n          svg {\n            fill: #dc2626;\n          }\n        }\n\n        &.accept {\n          color: #fff;\n          background: #10b981;\n\n          &:hover {\n            background: rgb(12, 136, 94);\n          }\n        }\n      }\n    }\n\n    .main-crop-area {\n      display: flex;\n      background: rgb(243 244 246);\n      min-height: 500px;\n      align-items: flex-start;\n      justify-content: center;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        height: auto;\n        align-items: center;\n      }\n    }\n\n    .crop-area-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      max-width: 100%;\n      padding: 2rem;\n      flex: 1;\n      height: 100%;\n\n      @media (max-width: 1024px) {\n        padding: 1rem;\n        flex: none;\n        height: auto;\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.5rem;\n      }\n    }\n\n    .crop-image-box {\n      position: relative;\n      background: #fff;\n      border-radius: 1rem;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      width: min(90vw, 500px);\n      height: min(90vw, 460px);\n      max-width: 100vw;\n      max-height: 100vw;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto;\n      min-width: 250px;\n      min-height: 250px;\n\n      @media (max-width: 1024px) {\n        max-width: 100vw;\n        max-height: 100vw;\n        min-width: 180px;\n        min-height: 180px;\n      }\n\n      @media (max-width: 768px) {\n        min-width: 120px;\n        min-height: 120px;\n        border-radius: 0.5rem;\n      }\n\n      .crop-image {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        pointer-events: none;\n        user-select: none;\n        flex-shrink: 0;\n      }\n    }\n\n    .loading-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 2rem;\n\n      @media (max-width: 768px) {\n        padding: 1rem;\n      }\n    }\n\n    .loading-text {\n      color: #6b7280;\n    }\n\n    .crop-overlay {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    .dimmed-overlay {\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.4);\n      pointer-events: none;\n    }\n\n    .clear-crop-area {\n      position: absolute;\n      background: transparent;\n    }\n\n    .crop-selection-area {\n      position: absolute;\n      border: 2px dashed #fff;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      cursor: move;\n      touch-action: none;\n      pointer-events: auto;\n      z-index: 3;\n\n      @media (max-width: 1024px) {\n        border-width: 3px;\n        cursor: default;\n      }\n\n      @media (max-width: 768px) {\n        border-width: 2px;\n      }\n    }\n\n    .corner-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n      z-index: 10;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.nw {\n        top: -4px;\n        left: -4px;\n        cursor: nw-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          left: -5px;\n        }\n      }\n\n      &.ne {\n        top: -4px;\n        right: -4px;\n        cursor: ne-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          right: -5px;\n        }\n      }\n\n      &.sw {\n        bottom: -4px;\n        left: -4px;\n        cursor: sw-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          left: -5px;\n        }\n      }\n\n      &.se {\n        bottom: -4px;\n        right: -4px;\n        cursor: se-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          right: -5px;\n        }\n      }\n    }\n\n    .edge-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n      z-index: 10;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.n {\n        top: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: n-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n        }\n      }\n\n      &.s {\n        bottom: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: s-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n        }\n      }\n\n      &.w {\n        left: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: w-resize;\n\n        @media (max-width: 1024px) {\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          left: -5px;\n        }\n      }\n\n      &.e {\n        right: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: e-resize;\n\n        @media (max-width: 1024px) {\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          right: -5px;\n        }\n      }\n    }\n\n    .crop-dimensions {\n      margin-top: 1.5rem;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n      font-size: 1.4rem;\n      color: #4b5563;\n      flex-shrink: 0;\n\n      @media (max-width: 1024px) {\n        margin-top: 1rem;\n        gap: 0.75rem;\n        font-size: 1.3rem;\n      }\n\n      @media (max-width: 768px) {\n        margin-top: 0.75rem;\n        gap: 0.5rem;\n        font-size: 1.2rem;\n        flex-direction: column;\n      }\n\n      svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-right: 1rem;\n        stroke: currentColor;\n\n        @media (max-width: 768px) {\n          width: 1.3rem;\n          height: 1.3rem;\n          margin-right: 0.75rem;\n        }\n      }\n    }\n\n    .crop-dimension-item {\n      display: flex;\n      align-items: center;\n\n      @media (max-width: 768px) {\n        font-size: 1.1rem;\n      }\n    }\n\n    .action-buttons-inner {\n      @media (min-width: 640px) {\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n      }\n    }\n\n    .action-buttons-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.75rem;\n    }\n  }\n"])));
-var templateObject_1;
-//# sourceMappingURL=styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAuC;AAE1B,QAAA,mBAAmB,OAAG,uBAAG,2nTAAA,ujTAierC,KAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/crop-styles.d.ts

@@ -1 +0,0 @@
-export declare const CropGlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/crop-styles.js

@@ -1,13 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropGlobalStyles = void 0;
-var styled_components_1 = require("styled-components");
-var styles_1 = require("../crop-interface/styles.js");
-var styles_2 = require("../preview-panel/styles.js");
-exports.CropGlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  @media (max-width: 1024px) {\n    .ReactModal__Content {\n      max-width: 95vw !important;\n      max-height: 95vh !important;\n      border-radius: 1rem !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 1rem !important;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .ReactModal__Content {\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 0 !important;\n    }\n  }\n"], ["\n  ", "\n  ", "\n  \n  @media (max-width: 1024px) {\n    .ReactModal__Content {\n      max-width: 95vw !important;\n      max-height: 95vh !important;\n      border-radius: 1rem !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 1rem !important;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .ReactModal__Content {\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 0 !important;\n    }\n  }\n"])), styles_1.cropInterfaceStyles, styles_2.previewPanelStyles);
-var templateObject_1;
-//# sourceMappingURL=crop-styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/crop-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"crop-styles.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/crop-styles.tsx"],"names":[],"mappings":";;;;;;;AAAA,uDAAqD;AACrD,mDAA8D;AAC9D,kDAA4D;AAE/C,QAAA,gBAAgB,OAAG,qCAAiB,ooBAAA,MAC7C,EAAmB,MACnB,EAAkB,gjBA0BrB,KA3BG,4BAAmB,EACnB,2BAAkB,EA0BrB"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/index.d.ts

@@ -1 +0,0 @@
-export { CropGlobalStyles } from './crop-styles.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CropGlobalStyles = void 0;
-var crop_styles_1 = require("./crop-styles.js");
-Object.defineProperty(exports, "CropGlobalStyles", { enumerable: true, get: function () { return crop_styles_1.CropGlobalStyles; } });
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-styles/index.ts"],"names":[],"mappings":";;;AAAA,6CAAgD;AAAvC,+GAAA,gBAAgB,OAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './preview-panel/index.js';
-export * from './crop-interface/index.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./preview-panel/index.js"), exports);
-__exportStar(require("./crop-interface/index.js"), exports);
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA+B;AAC/B,mDAAgC"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.d.ts

@@ -1,4 +0,0 @@
-import { PreviewPanelProps } from './interfaces.js';
-declare function PreviewPanelComponent({ file, imageDimensions, cropArea, onAspectRatioChange }: PreviewPanelProps): import("react/jsx-runtime").JSX.Element;
-declare const PreviewPanel: import("react").MemoExoticComponent<typeof PreviewPanelComponent>;
-export default PreviewPanel;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.js

@@ -1,82 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var ui_1 = require("../../../../../../../../ui/index.js");
-var crop_utils_1 = require("../../utils/crop-utils.js");
-function PreviewPanelComponent(_a) {
-    var _this = this;
-    var file = _a.file, imageDimensions = _a.imageDimensions, cropArea = _a.cropArea, onAspectRatioChange = _a.onAspectRatioChange;
-    var _b = (0, react_1.useState)(''), previewUrl = _b[0], setPreviewUrl = _b[1];
-    var aspectRatios = (0, react_1.useMemo)(function () { return [
-        { label: '1:1', value: '1:1' },
-        { label: '4:3', value: '4:3' },
-        { label: '16:9', value: '16:9' },
-        { label: 'Free', value: 'free' },
-    ]; }, []);
-    var handleAspectRatioChange = (0, react_1.useCallback)(function (value) {
-        onAspectRatioChange(value);
-    }, [onAspectRatioChange]);
-    (0, react_1.useEffect)(function () {
-        var generatePreview = function () { return __awaiter(_this, void 0, void 0, function () {
-            var preview, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, (0, crop_utils_1.getCropPreview)(file, cropArea, 300)];
-                    case 1:
-                        preview = _a.sent();
-                        setPreviewUrl(preview);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_1 = _a.sent();
-                        console.error('Preview generation error:', error_1);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        generatePreview();
-    }, [file, imageDimensions, cropArea]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'preview-panel', children: [(0, jsx_runtime_1.jsxs)("h3", { className: 'title', children: [(0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconEye' }), "Pr\u00E9via do Recorte:"] }), (0, jsx_runtime_1.jsx)("div", { className: 'preview-image-container', children: (0, jsx_runtime_1.jsx)("div", { className: 'preview-image-box', children: previewUrl ? ((0, jsx_runtime_1.jsx)("img", { className: 'preview-image', src: previewUrl, alt: 'Crop preview' })) : ((0, jsx_runtime_1.jsx)("div", { className: 'preview-image-loading', children: "Generating preview..." })) }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'quick-ratios-wrapper', children: [(0, jsx_runtime_1.jsx)("span", { className: 'quick-ratios-label', children: "Propor\u00E7\u00F5es R\u00E1pidas" }), (0, jsx_runtime_1.jsx)("div", { className: 'quick-ratios-grid', children: aspectRatios.map(function (ratio) { return ((0, jsx_runtime_1.jsx)("button", { onClick: function () { return handleAspectRatioChange(ratio.value); }, children: ratio.label }, ratio.value)); }) })] })] }));
-}
-var PreviewPanel = (0, react_1.memo)(PreviewPanelComponent);
-exports.default = PreviewPanel;
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAuE;AAEvE,2BAA2B;AAE3B,qDAAuD;AAGvD,SAAS,qBAAqB,CAAC,EAA2E;IAA1G,iBA8DC;QA9DgC,IAAI,UAAA,EAAE,eAAe,qBAAA,EAAE,QAAQ,cAAA,EAAE,mBAAmB,yBAAA;IAC7E,IAAA,KAA8B,IAAA,gBAAQ,EAAS,EAAE,CAAC,EAAjD,UAAU,QAAA,EAAE,aAAa,QAAwB,CAAA;IAExD,IAAM,YAAY,GAAG,IAAA,eAAO,EAC1B,cAAM,OAAA;QACJ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;QAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;QAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QAChC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;KACjC,EALK,CAKL,EACD,EAAE,CACH,CAAA;IAED,IAAM,uBAAuB,GAAG,IAAA,mBAAW,EACzC,UAAC,KAAa;QACZ,mBAAmB,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,IAAM,eAAe,GAAG;;;;;;wBAEJ,qBAAM,IAAA,2BAAc,EAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAA;;wBAAnD,OAAO,GAAG,SAAyC;wBACzD,aAAa,CAAC,OAAO,CAAC,CAAA;;;;wBAEtB,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,OAAK,CAAC,CAAA;;;;;aAEpD,CAAA;QAED,eAAe,EAAE,CAAA;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAA;IAErC,OAAO,CACL,iCAAK,SAAS,EAAC,eAAe,aAC5B,gCAAI,SAAS,EAAC,OAAO,aACnB,uBAAC,SAAI,IAAC,IAAI,EAAC,SAAS,GAAG,+BAEpB,EAEL,gCAAK,SAAS,EAAC,yBAAyB,YACtC,gCAAK,SAAS,EAAC,mBAAmB,YAC/B,UAAU,CAAC,CAAC,CAAC,CACZ,gCAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,cAAc,GAAG,CACtE,CAAC,CAAC,CAAC,CACF,gCAAK,SAAS,EAAC,uBAAuB,sCAA4B,CACnE,GACG,GACF,EAEN,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAM,SAAS,EAAC,oBAAoB,kDAA0B,EAC9D,gCAAK,SAAS,EAAC,mBAAmB,YAC/B,YAAY,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CAC3B,mCAA0B,OAAO,EAAE,cAAM,OAAA,uBAAuB,CAAC,KAAK,CAAC,KAAK,CAAC,EAApC,CAAoC,YAC1E,KAAK,CAAC,KAAK,IADD,KAAK,CAAC,KAAK,CAEf,CACV,EAJ4B,CAI5B,CAAC,GACE,IACF,IACF,CACP,CAAA;AACH,CAAC;AAED,IAAM,YAAY,GAAG,IAAA,YAAI,EAAC,qBAAqB,CAAC,CAAA;AAEhD,kBAAe,YAAY,CAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.d.ts

@@ -1,11 +0,0 @@
-import { FileSystemType } from '../../../../../../../../ui/index.js';
-import { DisplayCropArea } from '../../shared/types.js';
-export interface PreviewPanelProps {
-    file: FileSystemType;
-    imageDimensions: {
-        width: number;
-        height: number;
-    };
-    cropArea: DisplayCropArea;
-    onAspectRatioChange: (ratio: string) => void;
-}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=interfaces.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.ts"],"names":[],"mappings":""}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.d.ts

@@ -1 +0,0 @@
-export declare const previewPanelStyles: import("styled-components").RuleSet<object>;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.js

@@ -1,11 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.previewPanelStyles = void 0;
-var styled_components_1 = require("styled-components");
-exports.previewPanelStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .preview-panel {\n    width: 100%;\n    min-width: 35rem;\n    max-width: 35rem;\n    background: #fff;\n    border-left: 1px solid #e5e7eb;\n    padding: 2rem;\n\n    @media (max-width: 1024px) {\n      max-width: 100%;\n      border-left: none;\n      border-top: 1px solid #e5e7eb;\n      padding: 1.5rem;\n    }\n\n    @media (max-width: 768px) {\n      padding: 1rem;\n    }\n\n    .title {\n      font-size: 1.8rem;\n      font-weight: 600;\n      color: #1f2937;\n      margin-bottom: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      justify-content: flex-start;\n\n      @media (max-width: 768px) {\n        font-size: 1.6rem;\n        margin-bottom: 0.75rem;\n      }\n\n      svg {\n        width: 2rem;\n        height: 2rem;\n        fill: rgb(59 130 246);\n\n        @media (max-width: 768px) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n      }\n    }\n\n    .preview-image-container {\n      background: #f3f4f6;\n      border-radius: 0.5rem;\n      padding: 1rem;\n      margin-bottom: 1.5rem;\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        margin-bottom: 1rem;\n      }\n    }\n\n    .preview-image-box {\n      aspect-ratio: 1 / 1;\n      background: #fff;\n      border-radius: 0.5rem;\n      overflow: hidden;\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n\n      @media (max-width: 1024px) {\n        max-width: 200px;\n        margin: 0 auto;\n      }\n\n      @media (max-width: 768px) {\n        max-width: 150px;\n      }\n    }\n\n    .preview-image {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    .preview-image-loading {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #9ca3af;\n      font-size: 1.3rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.2rem;\n      }\n    }\n\n    .quick-ratios-wrapper {\n      margin-bottom: 2rem;\n\n      @media (max-width: 768px) {\n        margin-bottom: 1rem;\n      }\n    }\n\n    .quick-ratios-label {\n      display: block;\n      font-size: 1.4rem;\n      font-weight: 500;\n      color: #374151;\n      margin-bottom: 0.75rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.3rem;\n        margin-bottom: 0.5rem;\n      }\n    }\n\n    .quick-ratios-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.5rem;\n\n      @media (max-width: 768px) {\n        gap: 0.4rem;\n      }\n\n      button {\n        max-width: 100%;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 0.75rem;\n          font-size: 1.2rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n      }\n    }\n  }\n"], ["\n  .preview-panel {\n    width: 100%;\n    min-width: 35rem;\n    max-width: 35rem;\n    background: #fff;\n    border-left: 1px solid #e5e7eb;\n    padding: 2rem;\n\n    @media (max-width: 1024px) {\n      max-width: 100%;\n      border-left: none;\n      border-top: 1px solid #e5e7eb;\n      padding: 1.5rem;\n    }\n\n    @media (max-width: 768px) {\n      padding: 1rem;\n    }\n\n    .title {\n      font-size: 1.8rem;\n      font-weight: 600;\n      color: #1f2937;\n      margin-bottom: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      justify-content: flex-start;\n\n      @media (max-width: 768px) {\n        font-size: 1.6rem;\n        margin-bottom: 0.75rem;\n      }\n\n      svg {\n        width: 2rem;\n        height: 2rem;\n        fill: rgb(59 130 246);\n\n        @media (max-width: 768px) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n      }\n    }\n\n    .preview-image-container {\n      background: #f3f4f6;\n      border-radius: 0.5rem;\n      padding: 1rem;\n      margin-bottom: 1.5rem;\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        margin-bottom: 1rem;\n      }\n    }\n\n    .preview-image-box {\n      aspect-ratio: 1 / 1;\n      background: #fff;\n      border-radius: 0.5rem;\n      overflow: hidden;\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n\n      @media (max-width: 1024px) {\n        max-width: 200px;\n        margin: 0 auto;\n      }\n\n      @media (max-width: 768px) {\n        max-width: 150px;\n      }\n    }\n\n    .preview-image {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    .preview-image-loading {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #9ca3af;\n      font-size: 1.3rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.2rem;\n      }\n    }\n\n    .quick-ratios-wrapper {\n      margin-bottom: 2rem;\n\n      @media (max-width: 768px) {\n        margin-bottom: 1rem;\n      }\n    }\n\n    .quick-ratios-label {\n      display: block;\n      font-size: 1.4rem;\n      font-weight: 500;\n      color: #374151;\n      margin-bottom: 0.75rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.3rem;\n        margin-bottom: 0.5rem;\n      }\n    }\n\n    .quick-ratios-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.5rem;\n\n      @media (max-width: 768px) {\n        gap: 0.4rem;\n      }\n\n      button {\n        max-width: 100%;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 0.75rem;\n          font-size: 1.2rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n      }\n    }\n  }\n"])));
-var templateObject_1;
-//# sourceMappingURL=styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAuC;AAE1B,QAAA,kBAAkB,OAAG,uBAAG,muGAAA,+pGA4JpC,KAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export { useCropState } from './use-crop-state.js';
-export { useCropInteractions } from './use-crop-interactions.js';
-export { useCropOperations } from './use-crop-operations.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/hooks/index.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCropOperations = exports.useCropInteractions = exports.useCropState = void 0;
-var use_crop_state_1 = require("./use-crop-state.js");
-Object.defineProperty(exports, "useCropState", { enumerable: true, get: function () { return use_crop_state_1.useCropState; } });
-var use_crop_interactions_1 = require("./use-crop-interactions.js");
-Object.defineProperty(exports, "useCropInteractions", { enumerable: true, get: function () { return use_crop_interactions_1.useCropInteractions; } });
-var use_crop_operations_1 = require("./use-crop-operations.js");
-Object.defineProperty(exports, "useCropOperations", { enumerable: true, get: function () { return use_crop_operations_1.useCropOperations; } });
-//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/hooks/index.ts"],"names":[],"mappings":";;;AAAA,mDAA+C;AAAtC,8GAAA,YAAY,OAAA;AACrB,iEAA6D;AAApD,4HAAA,mBAAmB,OAAA;AAC5B,6DAAyD;AAAhD,wHAAA,iBAAiB,OAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/hooks/use-crop-interactions.d.ts

@@ -1,13 +0,0 @@
-import { ImageDimensions, ResizeDirection, DisplayCropArea } from '../shared/types.js';
-interface UseCropInteractionsProps {
-    imageDimensions: ImageDimensions;
-    cropArea: DisplayCropArea;
-    setCropArea: (area: DisplayCropArea | ((prev: DisplayCropArea) => DisplayCropArea)) => void;
-    aspectRatio: number | null;
-    imageRef: React.RefObject<HTMLImageElement>;
-}
-export declare function useCropInteractions({ imageDimensions, cropArea, setCropArea, aspectRatio, imageRef, }: UseCropInteractionsProps): {
-    handleStart: (e: React.MouseEvent | React.TouchEvent, action: "move" | "resize", direction?: ResizeDirection) => void;
-    getDisplayScale: () => number;
-};
-export {};