@yogiswara/honcho-editor-ui 2.0.7 → 2.1.0

package/dist/color.d.ts

@@ -0,0 +1,9 @@
+export declare const neutral: {
+    white: string;
+    10: string;
+    25: string;
+    50: string;
+    75: string;
+    100: string;
+    200: string;
+};

package/dist/color.js

@@ -0,0 +1,9 @@
+export const neutral = {
+    white: "#FFFFFF",
+    10: "#F9F9F9",
+    25: "#DBDBDB",
+    50: "#8D8D8D",
+    75: "#575757",
+    100: "#0A0A1C",
+    200: "#000000",
+};

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { GallerySetup } from "../../../hooks/editor/type";
+import { AdjustmentValues } from "../../../lib/editor/honcho-editor";
+interface PhotoData extends GallerySetup {
+    adjustments?: Partial<AdjustmentValues>;
+    frame?: string;
+}
+interface ImageGalleryProps {
+    imageCollection: PhotoData[];
+    isSelectedMode: boolean;
+    isHiddenGallery: boolean;
+    enableEditor: boolean;
+    onPreview: (photo: PhotoData) => () => void;
+    onSelectedMode: () => void;
+    onToggleSelect: (photo: PhotoData) => () => void;
+}
+declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
+export default AlbumImageGallery;

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.js

@@ -1,52 +1,32 @@
-"use strict";
-// "use client";
-// import React from "react";
-// import { Box } from "@mui/material";
-// import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
-// import ImageItem from "../GalleryAlbum/ImageItem";
-// import { GallerySetup } from "../../../hooks/editor/type";
-// interface ImageGalleryProps {
-// 	imageCollection: GallerySetup[];
-// 	isSelectedMode: boolean;
-// 	isHiddenGallery: boolean;
-// 	onPreview: (photo: unknown) => () => void;
-// 	onSelectedMode: () => void;
-// 	onToggleSelect: (photo: unknown) => () => void;
-// }
-// const AlbumImageGallery: React.FC<ImageGalleryProps> = (props) => {
-// 	const {
-// 		imageCollection,
-// 		isSelectedMode,
-// 		isHiddenGallery,
-// 		onPreview,
-// 		onSelectedMode,
-// 		onToggleSelect,
-// 	} = props;
-// 	return (
-// 		<section>
-// 			<ResponsiveMasonry columnsCountBreakPoints={{ 750: 2, 900: 4 }}>
-// 				<Masonry>
-// 					{imageCollection.map((photo, index) => (
-// 						<Box key={photo.key} sx={{ m: 0.5 }}>
-// 							<ImageItem
-// 								margin="0px"
-// 								index={index}
-// 								photo={photo}
-// 								direction="column"
-// 								isFullScreenMode={false}
-// 								isSelected={photo.isSelected}
-// 								isSelectedMode={isSelectedMode}
-// 								isHiddenGallery={isHiddenGallery}
-// 								onPreview={onPreview(photo)}
-// 								onSelectedMode={onSelectedMode}
-// 								onToggleSelect={onToggleSelect(photo)}
-// 								frame={photo.frame}
-// 							/>
-// 						</Box>
-// 					))}
-// 				</Masonry>
-// 			</ResponsiveMasonry>
-// 		</section>
-// 	);
-// };
-// export default AlbumImageGallery;
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import GalleryImageItem from "./ImageItem";
+const AlbumImageGallery = (props) => {
+    const { imageCollection, isSelectedMode, isHiddenGallery, enableEditor, // Destructure the new prop
+    onPreview, onSelectedMode, onToggleSelect, } = props;
+    return (_jsx("section", { children: _jsx(ResponsiveMasonry, { columnsCountBreakPoints: { 750: 2, 900: 4 }, children: _jsx(Masonry, { children: imageCollection.map((photo, index) => {
+                    // This guard clause is still important for runtime safety.
+                    if (!photo.key || !photo.src) {
+                        console.warn("Skipping item without a key or src:", photo);
+                        return null;
+                    }
+                    // NEW: Create a new object that matches the 'PhotoProps' interface.
+                    // This explicitly tells TypeScript that all required fields are present.
+                    const imageItemPhotoProps = {
+                        key: photo.key,
+                        src: photo.src,
+                        width: photo.width,
+                        height: photo.height,
+                        alt: photo.alt,
+                        // We pass the original photo object in the generic 'photo' property
+                        // in case ImageItem needs it for other operations.
+                        photo: photo,
+                    };
+                    return (_jsx(Box, { sx: { m: 0.5 }, children: _jsx(GalleryImageItem, { margin: "0px", index: index, 
+                            // UPDATED: Pass the new, correctly-typed object.
+                            photo: imageItemPhotoProps, direction: "column", isFullScreenMode: false, isSelected: photo.isSelected, isSelectedMode: isSelectedMode, isHiddenGallery: isHiddenGallery, onPreview: onPreview(photo), onSelectedMode: onSelectedMode, onToggleSelect: onToggleSelect(photo), enableEditor: enableEditor, adjustments: photo.adjustments, frame: photo.frame }) }, photo.key));
+                }) }) }) }));
+};
+export default AlbumImageGallery;

package/dist/components/editor/GalleryAlbum/ImageItem.d.ts

@@ -0,0 +1,28 @@
+import type { AdjustmentValues } from "../../../lib/editor/honcho-editor";
+import { GallerySetup } from "../../../hooks/editor/type";
+interface PhotoProps<T> {
+    src: string;
+    alt?: string;
+    width: number;
+    height: number;
+    key: string;
+    photo?: T;
+}
+interface Props {
+    margin?: any;
+    index: number;
+    photo: PhotoProps<GallerySetup>;
+    direction: "row" | "column";
+    isSelectedMode: boolean;
+    isFullScreenMode: boolean;
+    isSelected?: boolean;
+    isHiddenGallery: boolean;
+    onToggleSelect: () => void;
+    onPreview: () => void;
+    onSelectedMode: () => void;
+    enableEditor?: boolean;
+    adjustments?: Partial<AdjustmentValues>;
+    frame?: string | null;
+}
+declare const GalleryImageItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default GalleryImageItem;

package/dist/components/editor/GalleryAlbum/ImageItem.js

@@ -1,246 +1,165 @@
-"use strict";
-// import { CSSProperties, useMemo } from "react";
-// import { Box, CardMedia, useTheme } from "@mui/material";
-// import { TickCircle } from "iconsax-react";
-// import CustomTickIcon from "@/assets/svg/Tick";
-// import { useImageProcessor } from "@/lib/hooks/useImageProcessor";
-// import type { AdjustmentValues } from "@/lib/honcho-editor";
-// import { GallerySetup } from "../../../hooks/editor/type";
-// import { neutral } from "@/color";
-// import { log } from "@/utils/logger";
-// const imgStyle = {
-// 	transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
-// 	width: "100%",
-// 	// objectFit: "contain",
-// 	//height: "100%",
-// };
-// const selectedImgStyle = {
-// 	borderRadius: "8px",
-// 	transform: "translateZ(0px) scale3d(1, 1, 1)",
-// 	// transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
-// };
-// interface PhotoProps<T> {
-// 	src: string;
-// 	alt: string;
-// 	width: number;
-// 	height: number;
-// 	key: string;
-// 	// other properties
-// 	photo?: T;
-// }
-// interface Props {
-// 	margin?: any;
-// 	index: number;
-// 	photo: PhotoProps<GallerySetup>;
-// 	// onClick: renderImageClickHandler | null
-// 	direction: "row" | "column";
-// 	isSelectedMode: boolean;
-// 	isFullScreenMode: boolean; // this preview Mode we plan to use this component on there
-// 	isSelected: boolean;
-// 	isHiddenGallery: boolean;
-// 	onToggleSelect: () => void;
-// 	onPreview: () => void;
-// 	onSelectedMode: () => void;
-// 	// NEW: Editor interceptor props
-// 	enableEditor?: boolean;
-// 	adjustments?: Partial<AdjustmentValues>;
-// 	frame?: string | null;
-// }
-// const ImageItem = (props: Props) => {
-// 	const { photo, margin, enableEditor = true, adjustments, frame } = props;
-// 	const theme = useTheme();
-// 	// Memoize adjustments to prevent infinite re-renders
-// 	const memoizedAdjustments = useMemo(() => ({
-// 		...adjustments,
-// 		exposure: 50,
-// 	}), [adjustments]);
-// 	// Use the image processor hook
-// 	const { processedImageSrc, isProcessingComplete } = useImageProcessor({
-// 		photoId: photo.key,
-// 		photoSrc: photo.src,
-// 		enableEditor,
-// 		adjustments: memoizedAdjustments,
-// 		frame
-// 	});
-// 	const styleHiddenGallery: CSSProperties = useMemo(() => {
-// 		if (props.isHiddenGallery) {
-// 			return { filter: "blur(20px)", pointerEvents: "none" };
-// 		} else {
-// 			return {};
-// 		}
-// 	}, [props.isHiddenGallery]);
-// 	const commonStyle = useMemo(() => {
-// 		return {
-// 			backgroundColor: neutral.white,
-// 			overflow: "hidden",
-// 			position: "relative",
-// 			width: "100%",
-// 			aspectRatio: `${photo.width}/${photo.height}`,
-// 		};
-// 	}, [props.direction, props.photo]);
-// 	const handleImageClick = () => {
-// 		log.debug(
-// 			{
-// 				isFullMode: props.isFullScreenMode,
-// 				isShowGallery: props.isHiddenGallery,
-// 			},
-// 			"handleImageClick"
-// 		);
-// 		if (!props.isFullScreenMode && !props.isHiddenGallery) {
-// 			if (props.isSelectedMode) {
-// 				log.debug("handleImageClick with toggle select");
-// 				props.onToggleSelect();
-// 			} else {
-// 				log.debug("handleImageClick with preview");
-// 				props.onPreview();
-// 			}
-// 		}
-// 	};
-// 	const handleImageSelectedIconClick = () => {
-// 		log.debug("handleImageSelectedIconClick");
-// 		if (!props.isFullScreenMode) {
-// 			if (!props.isSelectedMode) {
-// 				props.onSelectedMode();
-// 			}
-// 			props.onToggleSelect();
-// 		}
-// 	};
-// 	const imageSx = useMemo(() => {
-// 		const baseStyles = props.isSelected ? {
-// 			...imgStyle,
-// 			...selectedImgStyle,
-// 			...styleHiddenGallery,
-// 			aspectRatio: `${photo.width}/${photo.height}`,
-// 		} : {
-// 			...imgStyle,
-// 			...styleHiddenGallery,
-// 		};
-// 		return {
-// 			...baseStyles,
-// 			opacity: isProcessingComplete ? 1 : 0,
-// 			transition: 'opacity 0.3s ease-in-out',
-// 		};
-// 	}, [props.isSelected, styleHiddenGallery, photo.width, photo.height, isProcessingComplete]);
-// 	const boxNotSelected = useMemo(
-// 		() => ({
-// 			margin,
-// 			// height: photo.height,
-// 			width: "100%",
-// 			...commonStyle,
-// 			transition: ".3s",
-// 			// "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
-// 			"&:-webkit-transition": { transition: ".3s" },
-// 			"&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
-// 			cursor:
-// 				props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
-// 			backgroundColor: props.isFullScreenMode
-// 				? "rgba(0,0,0,0.1)"
-// 				: "transparent",
-// 		}),
-// 		[margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]
-// 	);
-// 	const boxSelected = useMemo(
-// 		() => ({
-// 			margin,
-// 			// height: photo.height,
-// 			width: "100%",
-// 			...commonStyle,
-// 			cursor:
-// 				props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
-// 			transition: ".3s",
-// 			"&:-webkit-transition": { transition: ".3s" },
-// 			padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
-// 			backgroundColor: theme.palette.light["Surface-Variant-2"],
-// 		}),
-// 		[
-// 			margin,
-// 			commonStyle,
-// 			theme.palette.light,
-// 			props.isFullScreenMode,
-// 			props.isHiddenGallery,
-// 		]
-// 	);
-// 	const boxOuterSx = useMemo(() => {
-// 		if (props.isFullScreenMode) {
-// 			return {
-// 				margin,
-// 				width: "100%",
-// 				...commonStyle,
-// 			};
-// 		} else {
-// 			if (props.isSelected) {
-// 				return { ...boxSelected };
-// 			} else {
-// 				return { ...boxNotSelected };
-// 			}
-// 		}
-// 	}, [
-// 		props.isFullScreenMode,
-// 		photo.height,
-// 		photo.width,
-// 		commonStyle,
-// 		boxSelected,
-// 		boxNotSelected,
-// 		margin,
-// 		props.isSelected,
-// 	]);
-// 	return (
-// 		<Box id={"Box_image"} key={photo.key} sx={boxOuterSx} className={"image"}>
-// 			{!props.isHiddenGallery &&
-// 				(props.isSelected ? (
-// 					<Box
-// 						color={"primary.dark1"}
-// 						onClick={handleImageSelectedIconClick}
-// 						sx={{
-// 							position: "absolute",
-// 							width: "19px",
-// 							height: "19px",
-// 							zIndex: "2",
-// 							left: "5px",
-// 							top: "5px",
-// 							borderRadius: { xs: "50%", sm: 0 },
-// 						}}
-// 						className={"checkbox"}
-// 					>
-// 						<CustomTickIcon />
-// 					</Box>
-// 				) : (
-// 					<Box
-// 						color={"neutral.light2"}
-// 						onClick={handleImageSelectedIconClick}
-// 						sx={{
-// 							position: "absolute",
-// 							width: "19px",
-// 							height: "19px",
-// 							zIndex: "1",
-// 							left: "5px",
-// 							top: "5px",
-// 							display: "none",
-// 							visibility: {
-// 								xs: props.isSelectedMode ? "visible" : "hidden",
-// 								sm: "visible",
-// 							},
-// 						}}
-// 						className={"checkbox"}
-// 					>
-// 						<TickCircle
-// 							style={{ width: "24px", height: "24px" }}
-// 							color="white"
-// 						/>
-// 					</Box>
-// 				))}
-// 			<CardMedia
-// 				id="card_media"
-// 				component="img"
-// 				className="image"
-// 				loading="lazy"
-// 				alt={photo.alt}
-// 				sx={imageSx}
-// 				src={processedImageSrc}
-// 				width="100%"
-// 				onClick={handleImageClick}
-// 			/>
-// 		</Box>
-// 	);
-// };
-// export default ImageItem;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, CardMedia, useTheme } from "@mui/material";
+import { TickCircle } from "iconsax-react";
+import CustomTickIcon from "../svg/Tick";
+import { neutral } from "../../../color";
+const initialAdjustments = {
+    temperature: 0, tint: 0, saturation: 0, vibrance: 0, exposure: 0, contrast: 0,
+    highlights: 0, shadows: 0, whites: 0, blacks: 0, clarity: 0, sharpness: 0,
+};
+const imgStyle = {
+    transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
+    width: "100%",
+    // objectFit: "contain",
+    //height: "100%",
+};
+const selectedImgStyle = {
+    borderRadius: "8px",
+    transform: "translateZ(0px) scale3d(1, 1, 1)",
+    // transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
+};
+const GalleryImageItem = (props) => {
+    const { photo, margin, adjustments, isSelected = false } = props;
+    const theme = useTheme();
+    const hasAdjustments = useMemo(() => {
+        if (!adjustments)
+            return false;
+        return Object.keys(initialAdjustments).some(key => adjustments[key] !== initialAdjustments[key]);
+    }, [adjustments]);
+    const styleHiddenGallery = useMemo(() => {
+        if (props.isHiddenGallery) {
+            return { filter: "blur(20px)", pointerEvents: "none" };
+        }
+        else {
+            return {};
+        }
+    }, [props.isHiddenGallery]);
+    const commonStyle = useMemo(() => {
+        return {
+            backgroundColor: neutral.white,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${photo.width}/${photo.height}`,
+        };
+    }, [props.direction, props.photo]);
+    const handleImageClick = () => {
+        console.debug({
+            isFullMode: props.isFullScreenMode,
+            isShowGallery: props.isHiddenGallery,
+        }, "handleImageClick");
+        if (!props.isFullScreenMode && !props.isHiddenGallery) {
+            if (props.isSelectedMode) {
+                console.debug("handleImageClick with toggle select");
+                props.onToggleSelect();
+            }
+            else {
+                console.debug("handleImageClick with preview");
+                props.onPreview();
+            }
+        }
+    };
+    const handleImageSelectedIconClick = () => {
+        console.debug("handleImageSelectedIconClick");
+        if (!props.isFullScreenMode) {
+            if (!props.isSelectedMode) {
+                props.onSelectedMode();
+            }
+            props.onToggleSelect();
+        }
+    };
+    const imageSx = useMemo(() => {
+        const baseStyles = isSelected ? {
+            ...imgStyle,
+            ...selectedImgStyle,
+            ...styleHiddenGallery,
+            aspectRatio: `${photo.width}/${photo.height}`,
+        } : {
+            ...imgStyle,
+            ...styleHiddenGallery,
+        };
+        return {
+            ...baseStyles,
+            opacity: 1, // Previously depended on isProcessingComplete
+            transition: 'opacity 0.3s ease-in-out',
+        };
+    }, [isSelected, styleHiddenGallery, photo.width, photo.height]);
+    const boxNotSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        transition: ".3s",
+        // "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
+        "&:-webkit-transition": { transition: ".3s" },
+        "&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        backgroundColor: props.isFullScreenMode
+            ? "rgba(0,0,0,0.1)"
+            : "transparent",
+    }), [margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]);
+    const boxSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        transition: ".3s",
+        "&:-webkit-transition": { transition: ".3s" },
+        padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
+        backgroundColor: theme.palette.light["Surface-Variant-2"],
+    }), [
+        margin,
+        commonStyle,
+        theme.palette.light,
+        props.isFullScreenMode,
+        props.isHiddenGallery,
+    ]);
+    const boxOuterSx = useMemo(() => {
+        if (props.isFullScreenMode) {
+            return {
+                margin,
+                ...commonStyle,
+            };
+        }
+        else {
+            if (props.isSelected) {
+                return { ...boxSelected };
+            }
+            else {
+                return { ...boxNotSelected };
+            }
+        }
+    }, [
+        props.isFullScreenMode,
+        photo.height,
+        photo.width,
+        commonStyle,
+        boxSelected,
+        boxNotSelected,
+        margin,
+        props.isSelected,
+    ]);
+    return (_jsxs(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: [!props.isHiddenGallery &&
+                (hasAdjustments && isSelected ? (_jsx(Box, { color: "primary.dark1", onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "2",
+                        left: "5px",
+                        top: "5px",
+                        borderRadius: { xs: "50%", sm: 0 },
+                    }, className: "checkbox", children: _jsx(CustomTickIcon, {}) })) : (_jsx(Box, { color: "neutral.light2", onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "1",
+                        left: "5px",
+                        top: "5px",
+                        display: "none",
+                        visibility: {
+                            xs: props.isSelectedMode ? "visible" : "hidden",
+                            sm: "visible",
+                        },
+                    }, className: "checkbox", children: _jsx(TickCircle, { style: { width: "24px", height: "24px" }, color: "white" }) }))), _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: photo.alt ?? "Image", sx: imageSx, src: photo.src, width: "100%", onClick: handleImageClick })] }, photo.key));
+};
+export default GalleryImageItem;

package/dist/components/editor/svg/Tick.d.ts

@@ -0,0 +1,2 @@
+declare const Tick: () => import("react/jsx-runtime").JSX.Element;
+export default Tick;

package/dist/components/editor/svg/Tick.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+const Tick = () => {
+    return (_jsx(SvgIcon, { style: { width: "29px", height: "29px" }, children: _jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "5", y: "5", width: "22", height: "22", rx: "11", fill: "black" }), _jsx("path", { d: "M20 13L14.5 18.5L12 16", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+};
+export default Tick;

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { default as HModalMobile } from './components/editor/HModalMobile';
 export { default as HPresetOptionsMenu } from './components/editor/HPresetOptionMenu';
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
+export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { default as useColors } from './themes/colors';

package/dist/index.js

@@ -18,6 +18,8 @@ export { default as HModalMobile } from './components/editor/HModalMobile';
 export { default as HPresetOptionsMenu } from './components/editor/HPresetOptionMenu';
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
+export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -49,6 +49,7 @@
   "keywords": [],
   "author": "",
   "dependencies": {
+    "iconsax-react": "^0.0.8",
     "react-responsive-masonry": "^2.7.1"
   }
 }