flex-image-viewer 1.0.0

package/dist/FlexImageViewer/index.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useCallback, useEffect } from "react";
+import { useDeepCompareEffect } from "ahooks";
+import { ViewerProvider, useViewerDispatch, useViewerState } from "../context/ViewerContext.js";
+import { useImageOperations } from "../hooks/useImageOperations.js";
+import Modal from "../components/Modal.js";
+import Header from "./Header/index.js";
+import Content from "./Content/index.js";
+import Info from "./Info/index.js";
+import Thumbnail from "./Thumbnail/index.js";
+import Footer from "./Footer/index.js";
+import "rc-slider/assets/index.css";
+import "rc-tooltip/assets/bootstrap.css";
+import "./index.css";
+function FlexImageViewerInner({ files, current = 1, loop = false, onIndexChange, headerProps, footerProps, onClear, onClose, wheelZoom = true, wheelZoomStep = 0.1, renderInfo, getSrc, getThumbnail, preload, disableRightClick = false, ...rest }) {
+    const state = useViewerState();
+    const dispatch = useViewerDispatch();
+    const prevCurrentRef = react.useRef(current);
+    useEffect(()=>{
+        if (current !== prevCurrentRef.current) {
+            prevCurrentRef.current = current;
+            if (current !== state.currentIndex) dispatch({
+                type: 'SET_CURRENT_INDEX',
+                payload: current
+            });
+        }
+    }, [
+        current,
+        state.currentIndex,
+        dispatch
+    ]);
+    useEffect(()=>{
+        if (state.currentIndex !== current && onIndexChange) onIndexChange(state.currentIndex);
+    }, [
+        state.currentIndex,
+        current,
+        onIndexChange
+    ]);
+    useDeepCompareEffect(()=>{
+        dispatch({
+            type: 'SET_LOOP',
+            payload: loop
+        });
+        dispatch({
+            type: 'INITIALIZE_FILES',
+            payload: {
+                files: files ?? []
+            }
+        });
+    }, [
+        files,
+        loop
+    ]);
+    const imageOps = useImageOperations(state, dispatch);
+    const handleClear = useCallback(()=>{
+        imageOps.clear();
+        onClear?.();
+    }, [
+        imageOps,
+        onClear
+    ]);
+    const handleClose = useCallback(()=>{
+        onClose?.();
+    }, [
+        onClose
+    ]);
+    return /*#__PURE__*/ jsx(Modal, {
+        onClose: handleClose,
+        ...rest,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: `flex-image-viewer ${state.thumbnailVisible ? 'with-thumbnail' : ''} ${state.infoVisible ? 'with-info' : ''}`,
+            children: [
+                /*#__PURE__*/ jsx(Header, {
+                    renderAction: headerProps?.renderAction,
+                    onClose: handleClose,
+                    onClear: handleClear,
+                    updateCurrentFile: imageOps.updateCurrentFile
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex-image-viewer-main",
+                    children: [
+                        /*#__PURE__*/ jsx(Content, {
+                            preload: preload,
+                            wheelZoom: wheelZoom,
+                            wheelZoomStep: wheelZoomStep,
+                            disableRightClick: disableRightClick,
+                            getSrc: getSrc,
+                            onClose: handleClose
+                        }),
+                        /*#__PURE__*/ jsx(Info, {
+                            renderInfo: renderInfo
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Thumbnail, {
+                    getThumbnail: getThumbnail
+                }),
+                /*#__PURE__*/ jsx(Footer, {
+                    renderAction: footerProps?.renderAction,
+                    updateCurrentFile: imageOps.updateCurrentFile
+                })
+            ]
+        })
+    });
+}
+function FlexImageViewer(props) {
+    const { current = 1, files } = props;
+    return /*#__PURE__*/ jsx(ViewerProvider, {
+        initialCurrent: current,
+        initialFilesLength: files?.length ?? 0,
+        children: /*#__PURE__*/ jsx(FlexImageViewerInner, {
+            ...props
+        })
+    });
+}
+const src_FlexImageViewer = FlexImageViewer;
+export default src_FlexImageViewer;

package/dist/components/ActionItem.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+function ActionItem({ children, onClick }) {
+    return /*#__PURE__*/ jsx("li", {
+        className: "flex-image-viewer-action-item",
+        onClick: onClick,
+        children: children
+    });
+}
+export default ActionItem;

package/dist/components/BaseActions.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import rc_slider from "rc-slider";
+import rc_tooltip from "rc-tooltip";
+import { Icon, PercentSelect } from "./index.js";
+import { TOOLTIP_CONFIG } from "../utils/dict.js";
+import ActionItem from "./ActionItem.js";
+import { getScaleValue, getSliderValue } from "./PercentSelect.js";
+function BaseActions(props) {
+    const { items, contextValues, renderAction, onAction } = props;
+    const actionElements = useMemo(()=>{
+        const elementsMap = {};
+        items.forEach((item)=>{
+            const { key, type, tooltipKey, iconName, tooltipPlacement = 'topRight', valueKey } = item;
+            let content = null;
+            if ('slider' === type) {
+                if (!valueKey) return;
+                const value = contextValues[valueKey];
+                content = /*#__PURE__*/ jsx(rc_slider, {
+                    value: getSliderValue(value),
+                    onChange: (val)=>{
+                        if (!Array.isArray(val) && null !== val) onAction(key, getScaleValue(val));
+                    },
+                    min: getSliderValue(10),
+                    style: {
+                        width: 100,
+                        position: 'relative',
+                        top: 6
+                    }
+                });
+            } else if ('select' === type) {
+                if (!valueKey) return;
+                const value = contextValues[valueKey];
+                content = /*#__PURE__*/ jsx(PercentSelect, {
+                    value: value,
+                    onChange: (val)=>onAction(key, val)
+                });
+            } else {
+                const handleClick = (e)=>{
+                    onAction(key, void 0, e);
+                };
+                const ariaLabel = tooltipKey ? TOOLTIP_CONFIG[tooltipKey] || tooltipKey : key;
+                content = /*#__PURE__*/ jsx(rc_tooltip, {
+                    overlay: tooltipKey ? TOOLTIP_CONFIG[tooltipKey] : '',
+                    placement: tooltipPlacement,
+                    showArrow: false,
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: iconName || key,
+                        onClick: handleClick,
+                        "aria-label": ariaLabel
+                    }, key)
+                });
+            }
+            elementsMap[key] = content;
+        });
+        return elementsMap;
+    }, [
+        items,
+        contextValues,
+        onAction
+    ]);
+    return /*#__PURE__*/ jsx("ul", {
+        className: "flex-image-viewer-actions",
+        children: renderAction ? renderAction(actionElements, contextValues) : Object.keys(actionElements).map((key)=>/*#__PURE__*/ jsx(ActionItem, {
+                children: actionElements[key]
+            }, key))
+    });
+}
+export default BaseActions;

package/dist/components/Icon/index.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { ReactComponent } from "./svg/arrow-left.js";
+import { ReactComponent as arrow_right_js_ReactComponent } from "./svg/arrow-right.js";
+import { ReactComponent as caret_right_js_ReactComponent } from "./svg/caret-right.js";
+import { ReactComponent as check_js_ReactComponent } from "./svg/check.js";
+import { ReactComponent as clear_js_ReactComponent } from "./svg/clear.js";
+import { ReactComponent as close_js_ReactComponent } from "./svg/close.js";
+import { ReactComponent as default_image_js_ReactComponent } from "./svg/default-image.js";
+import { ReactComponent as down_js_ReactComponent } from "./svg/down.js";
+import { ReactComponent as info_circle_js_ReactComponent } from "./svg/info-circle.js";
+import { ReactComponent as rotate_left_js_ReactComponent } from "./svg/rotate-left.js";
+import { ReactComponent as rotate_right_js_ReactComponent } from "./svg/rotate-right.js";
+import { ReactComponent as save_js_ReactComponent } from "./svg/save.js";
+import { ReactComponent as size_js_ReactComponent } from "./svg/size.js";
+import { ReactComponent as thumbnail_js_ReactComponent } from "./svg/thumbnail.js";
+import { ReactComponent as zoom_adapt_js_ReactComponent } from "./svg/zoom-adapt.js";
+import { ReactComponent as zoom_in_js_ReactComponent } from "./svg/zoom-in.js";
+import { ReactComponent as zoom_out_js_ReactComponent } from "./svg/zoom-out.js";
+const icons = {
+    ArrowLeft: ReactComponent,
+    ArrowRight: arrow_right_js_ReactComponent,
+    CaretRight: caret_right_js_ReactComponent,
+    Check: check_js_ReactComponent,
+    Clear: clear_js_ReactComponent,
+    Close: close_js_ReactComponent,
+    DefaultImage: default_image_js_ReactComponent,
+    Down: down_js_ReactComponent,
+    Info: info_circle_js_ReactComponent,
+    RotateLeft: rotate_left_js_ReactComponent,
+    RotateRight: rotate_right_js_ReactComponent,
+    Save: save_js_ReactComponent,
+    Size: size_js_ReactComponent,
+    Thumbnail: thumbnail_js_ReactComponent,
+    ZoomAdapt: zoom_adapt_js_ReactComponent,
+    ZoomIn: zoom_in_js_ReactComponent,
+    ZoomOut: zoom_out_js_ReactComponent
+};
+const Icon = ({ name, ...props })=>{
+    const IconComponent = icons[name];
+    if (!IconComponent) return null;
+    return /*#__PURE__*/ jsx(IconComponent, {
+        className: "flex-image-viewer-icon",
+        ...props
+    });
+};
+const components_Icon = Icon;
+export default components_Icon;

package/dist/components/Icon/svg/arrow-left.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgArrowLeft = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "arrow-left",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"
+        })
+    });
+export { SvgArrowLeft as ReactComponent };

package/dist/components/Icon/svg/arrow-right.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgArrowRight = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "arrow-right",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M869 487.8 491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4"
+        })
+    });
+export { SvgArrowRight as ReactComponent };

package/dist/components/Icon/svg/caret-right.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgCaretRight = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "caret-right",
+        viewBox: "0 0 1024 1024",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M715.8 493.5 335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37"
+        })
+    });
+export { SvgCaretRight as ReactComponent };

package/dist/components/Icon/svg/check.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgCheck = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "check",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8"
+        })
+    });
+export { SvgCheck as ReactComponent };

package/dist/components/Icon/svg/clear.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgClear = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "clear",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "m899.1 869.6-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0 0 25.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0 0 21.2-30M204 390h272V182h72v208h272v104H204zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260z"
+        })
+    });
+export { SvgClear as ReactComponent };

package/dist/components/Icon/svg/close.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgClose = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        fillRule: "evenodd",
+        "aria-hidden": "true",
+        "data-icon": "close",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.1.1 0 0 1 0 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 0 1 0 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 0 1-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 0 1-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7a.17.17 0 0 1-.06-.07.12.12 0 0 1 0-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7a.2.2 0 0 1-.06-.09.12.12 0 0 1 0-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 0 1 .07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 0 1 .07 0"
+        })
+    });
+export { SvgClose as ReactComponent };

package/dist/components/Icon/svg/default-image.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgDefaultImage = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        width: 194,
+        height: 195,
+        ...props,
+        children: /*#__PURE__*/ jsx("image", {
+            xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAGOElEQVR4nOzdq04kawBFYV4dh8PhQOHA4XA4HA6Jw+F4ACY/CQk0091FX2rvhk8sdU4YsnatrkvXZI5eX1/fwMFfPwaO0r8AOGg4BoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoSwQs7T09Pb7e3tr+Dx8TF+sDUjhCViXl5e3o6Pj38NJycn8YOtGSEsETM+QdMH765xVhDCjz8hhJD/lHZGKBAjhPwGQigQI4T8BkIoECOE/AZCKBAjhPwGQvgFIZydnb0/skw/KfLUaNreHp/uOIS7u7svP+f5+fnt8vIyHoHHp0KY7YwwvsFd9uXc6empEArO9M4IM4Sw6gurm5sbIRQc8EKYIYRVP2+cLVwa5Q94ITgjeMVCCNl7hIF7hPynvhBmCmE8Ln14ePh2o3x9fR2/LPLUSAizf48wPv0vLi7eSR/8QnBGOOhvlsfZZdeXU17DdrN8cCGMP39cVo1vqIXgHuFPhnB/f//lr4vu6lUNZwRnhIMJ4erq6tvvMmIQgqdGB3tG+Ollzfn5+dLfZ5wlnBH2t7eX7vYUwsd3ClNjGP/fuCdYNda2r2m4NBLCrGeEz5c3U164G/cA4y3VKb/XNm+yCkEIs4Xwv0/2dTe8479P/b22eZIkBCHMEsI42Jdd3iz7eZ+fEP0khk2eJAlBCHsPYRyY6z7ZF294V72btI5NHqsKQQh7D2HxHaNljPuHxfuITfnpkyQhCGGvISz+9cx1jKc/654QTWX82ULY3qPHp1uGsItP9m35OMs4IwghEsKqL8DmZsqTJJdGzgg7D2HKF2BzMuWxqhCEsNMQpjwhSrDuSZIQhLDTEJoPqEP9vdO4Wd7ggEr/6zfrEIIQZvlkPVScEZwRhCAEl0bOCM4I7hFcGrk0crPsHsE9gqdGW90s++dl8480PT4tEPPxBdV4QW68SnHIjHeRPDFysxwPCv0OfKFWMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDoRQMALyDv4BAAD//zV2iPgAAAAGSURBVAMAlL34JkeunpYAAAAASUVORK5CYII=",
+            width: 145.5,
+            height: 146.25,
+            preserveAspectRatio: "none",
+            transform: "scale(1.33333)"
+        })
+    });
+export { SvgDefaultImage as ReactComponent };

package/dist/components/Icon/svg/down.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgDown = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "down",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7"
+        })
+    });
+export { SvgDown as ReactComponent };

package/dist/components/Icon/svg/info-circle.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgInfoCircle = (props)=>/*#__PURE__*/ jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "info-circle",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0m72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8"
+            })
+        ]
+    });
+export { SvgInfoCircle as ReactComponent };

package/dist/components/Icon/svg/rotate-left.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgRotateLeft = (props)=>/*#__PURE__*/ jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "rotate-left",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 0 1 6.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3"
+            })
+        ]
+    });
+export { SvgRotateLeft as ReactComponent };

package/dist/components/Icon/svg/rotate-right.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgRotateRight = (props)=>/*#__PURE__*/ jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "rotate-right",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 0 0 123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H396V494h440z"
+            })
+        ]
+    });
+export { SvgRotateRight as ReactComponent };

package/dist/components/Icon/svg/save.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgSave = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "save",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M893.3 293.3 730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2M384 184h256v104H384zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144m0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80"
+        })
+    });
+export { SvgSave as ReactComponent };

package/dist/components/Icon/svg/size.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgSize = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "size_svg__icon",
+        style: {
+            width: "1em",
+            height: "1em",
+            verticalAlign: "middle",
+            fill: "currentColor",
+            overflow: "hidden"
+        },
+        viewBox: "0 0 1024 1024",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M906.667 938.667H832a32.427 32.427 0 0 1-32-32 32.427 32.427 0 0 1 32-32h42.667V832a32.427 32.427 0 0 1 32-32 32.427 32.427 0 0 1 32 32v74.667a32.427 32.427 0 0 1-32 32M117.333 224a32.427 32.427 0 0 1-32-32v-74.667a32.427 32.427 0 0 1 32-32H192a32.427 32.427 0 0 1 32 32 32.427 32.427 0 0 1-32 32h-42.667V192a32.427 32.427 0 0 1-32 32M448 85.333h128q32 0 32 32t-32 32H448q-32 0-32-32t32-32M906.667 224a32.427 32.427 0 0 1-32-32v-42.667H832a32.427 32.427 0 0 1-32-32 32.427 32.427 0 0 1 32-32h74.667a32.427 32.427 0 0 1 32 32V192a32.427 32.427 0 0 1-32 32M906.667 416q32 0 32 32v128q0 32-32 32t-32-32V448q0-32 32-32M565.333 341.333H202.667a116.91 116.91 0 0 0-108.374 72.534 112.2 112.2 0 0 0-8.96 44.8v362.666a117.333 117.333 0 0 0 117.334 117.334h362.666a112.2 112.2 0 0 0 44.8-8.96 116.91 116.91 0 0 0 72.534-108.374V458.667a117.333 117.333 0 0 0-117.334-117.334m53.334 480a53.333 53.333 0 0 1-53.334 53.334H202.667a53.333 53.333 0 0 1-53.334-53.334V458.667a53.333 53.333 0 0 1 53.334-53.334h362.666a53.333 53.333 0 0 1 53.334 53.334z"
+        })
+    });
+export { SvgSize as ReactComponent };

package/dist/components/Icon/svg/thumbnail.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgThumbnail = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "thumbnail_svg__icon",
+        style: {
+            width: "1em",
+            height: "1em",
+            verticalAlign: "middle",
+            fill: "currentColor",
+            overflow: "hidden"
+        },
+        viewBox: "0 0 1024 1024",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M213.333 85.333c-70.186 0-128 57.814-128 128V640c0 70.187 57.814 128 128 128h597.334c70.186 0 128-57.813 128-128V213.333c0-70.186-57.814-128-128-128zm0 85.334h597.334c24.362 0 42.666 18.304 42.666 42.666V640c0 24.363-18.304 42.667-42.666 42.667H213.333c-24.362 0-42.666-18.304-42.666-42.667V213.333c0-24.362 18.304-42.666 42.666-42.666m-42.666 682.666A42.667 42.667 0 0 0 128 896a42.667 42.667 0 0 0 42.667 42.667h42.666A42.667 42.667 0 0 0 256 896a42.667 42.667 0 0 0-42.667-42.667zm213.333 0A42.667 42.667 0 0 0 341.333 896 42.667 42.667 0 0 0 384 938.667h42.667A42.667 42.667 0 0 0 469.333 896a42.667 42.667 0 0 0-42.666-42.667zm213.333 0A42.667 42.667 0 0 0 554.667 896a42.667 42.667 0 0 0 42.666 42.667H640A42.667 42.667 0 0 0 682.667 896 42.667 42.667 0 0 0 640 853.333zm213.334 0A42.667 42.667 0 0 0 768 896a42.667 42.667 0 0 0 42.667 42.667h42.666A42.667 42.667 0 0 0 896 896a42.667 42.667 0 0 0-42.667-42.667z"
+        })
+    });
+export { SvgThumbnail as ReactComponent };

package/dist/components/Icon/svg/zoom-adapt.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgZoomAdapt = (props)=>/*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "zoom-adapt_svg__icon",
+        style: {
+            width: "1em",
+            height: "1em",
+            verticalAlign: "middle",
+            fill: "currentColor",
+            overflow: "hidden"
+        },
+        viewBox: "0 0 1024 1024",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M873.13 901.559H153.162a34.62 34.62 0 0 1-33.743-33.792v-719.92a34.62 34.62 0 0 1 33.743-33.793h719.97a34.62 34.62 0 0 1 33.743 33.792v719.92a34.62 34.62 0 0 1-33.743 33.793m-699.391-54.32h678.863V168.374H173.739z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M755.712 410.77a30.574 30.574 0 0 1-30.037-30.037v-85.43h-85.48a30.574 30.574 0 0 1-30.037-30.038c0-16.19 13.897-30.038 30.037-30.038h115.517c16.14 0 30.037 13.849 30.037 30.038v115.468a30.574 30.574 0 0 1-30.037 30.037m-485.132 0a30.574 30.574 0 0 1-29.989-30.037V265.265c0-16.19 13.849-30.038 29.989-30.038h115.566c16.091 0 29.988 13.849 29.988 30.038a30.574 30.574 0 0 1-30.037 30.037h-85.48v85.431a30.574 30.574 0 0 1-30.037 30.037m115.566 369.616H270.58a30.574 30.574 0 0 1-29.989-30.038V634.88c0-16.189 13.849-30.037 29.989-30.037 16.189 0 30.037 13.848 30.037 30.037v85.43h85.48c16.189 0 30.037 13.898 30.037 30.038a30.574 30.574 0 0 1-30.037 30.038zm369.566 0H640.195a30.574 30.574 0 0 1-30.037-30.038c0-16.14 13.897-30.037 30.037-30.037h85.48V634.88c0-16.189 13.848-30.037 30.037-30.037 16.14 0 30.037 13.848 30.037 30.037v115.468a30.574 30.574 0 0 1-30.037 30.038"
+            })
+        ]
+    });
+export { SvgZoomAdapt as ReactComponent };

package/dist/components/Icon/svg/zoom-in.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgZoomIn = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "zoom-in",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"
+        })
+    });
+export { SvgZoomIn as ReactComponent };

package/dist/components/Icon/svg/zoom-out.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgZoomOut = (props)=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        "data-icon": "zoom-out",
+        viewBox: "64 64 896 896",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"
+        })
+    });
+export { SvgZoomOut as ReactComponent };