@onesy/ui-react 1.0.0

package/ImageEdit/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ImageEdit';

package/ImageEdit/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImageEdit_1 = require("./ImageEdit");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImageEdit_1).default; } });

package/ImageEdit/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/ImageEdit/index.js",
+  "types": "./index.d.ts"
+}

package/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IElementReference, IMediaObject } from '../types';
+export interface IImageGallery extends ILine {
+    version?: 'regular' | 'modal';
+    open?: boolean;
+    size?: 'small' | 'regular' | 'large';
+    onClose?: () => any;
+    value?: number;
+    items?: IMediaObject[];
+    incrementZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    overflow?: boolean;
+    arrows?: boolean;
+    startMain?: any;
+    endMain?: any;
+    startImage?: any;
+    endImage?: any;
+    startThumbnails?: any;
+    endThumbnails?: any;
+    ImageProps?: any;
+    ImageWrapperProps?: any;
+    IconButtonProps?: any;
+    IconStart?: IElementReference;
+    IconEnd?: IElementReference;
+    IconClose?: IElementReference;
+}
+declare const ImageGallery: React.FC<IImageGallery>;
+export default ImageGallery;

package/ImageGallery/ImageGallery.js

@@ -0,0 +1,483 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialNavigateNextW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100"));
+const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
+const Image_1 = __importDefault(require("../Image"));
+const Line_1 = __importDefault(require("../Line"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Interaction_1 = __importDefault(require("../Interaction"));
+const Backdrop_1 = __importDefault(require("../Backdrop"));
+const utils_2 = require("../utils");
+const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        '&.onesy-Backdrop-root': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            userSelect: 'none',
+            zIndex: '14000'
+        },
+        '& .onesy-Backdrop-backdrop-root': {
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
+        }
+    },
+    version_regular: {
+        minHeight: 'clamp(240px, 100%, 100vh)'
+    },
+    pointerEventsAuto: {
+        pointerEvents: 'auto'
+    },
+    wrapper: {
+        height: '100%'
+    },
+    header: {
+        padding: theme.methods.space.value(3, 'px'),
+        zIndex: '1'
+    },
+    main: {
+        position: 'relative',
+        zIndex: '14'
+    },
+    main_version_modal: {
+        height: '0',
+        padding: theme.methods.space.value(5, 'px'),
+        '& .onesy-Image-root': {
+            maxHeight: '100%',
+            // pointerEvents: 'none'
+        }
+    },
+    main_version_regular_size_small: {
+        height: '340px'
+    },
+    main_version_regular_size_regular: {
+        height: '540px'
+    },
+    main_version_regular_size_large: {
+        height: '740px'
+    },
+    noOverflow: {
+        overflow: 'hidden'
+    },
+    footer: {
+        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
+        zIndex: '1'
+    },
+    imageWrapper: {
+        position: 'relative',
+        height: '0px',
+        pointerEvents: 'none',
+        // zIndex: 1,
+        transition: theme.methods.transitions.make(['transform'], { duration: 100, timing_function: 'ease' })
+    },
+    image: {
+        objectFit: 'contain',
+        width: 'auto',
+        height: 'auto',
+        maxHeight: '100%',
+        maxWidth: '100%'
+    },
+    itemsWrapper: {
+        position: 'relative',
+        pointerEvents: 'auto',
+        maxWidth: '100%',
+        userSelect: 'none'
+    },
+    items: {
+        maxWidth: '1024px',
+        overflow: 'auto hidden',
+        '&::-webkit-scrollbar': {
+            width: '16px',
+            height: '16px'
+        },
+        '&::-webkit-scrollbar-track, &::-webkit-scrollbar-corner': {
+            background: 'transparent'
+        },
+        '&::-webkit-scrollbar-thumb': {
+            borderRadius: theme.methods.shape.radius.value(1, 'px'),
+            border: '4px solid transparent',
+            backgroundClip: 'content-box',
+            backgroundColor: 'rgba(221, 221, 221, 0.4)',
+            '&:hover': {
+                backgroundColor: 'rgba(221, 221, 221, 0.7)'
+            }
+        }
+    },
+    item: {
+        width: '140px',
+        height: '140px',
+        position: 'relative',
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        flex: '0 0 auto',
+        border: '2px solid transparent',
+        cursor: 'pointer',
+        userSelect: 'none',
+        transition: theme.methods.transitions.make(['border', 'transform']),
+        '&:active': {
+            transform: 'scale(0.94)'
+        }
+    },
+    itemSelected: {
+        border: '2px solid !important',
+        borderColor: `${theme.methods.palette.color.value('secondary', 30)} !important`
+    },
+    arrow: {
+        flex: '0 0 auto',
+        alignSelf: 'center',
+        justifySelf: 'center',
+        transition: theme.methods.transitions.make(['opacity'], { duration: 'xxs' }),
+        '&[disabled]': {
+            opacity: '0'
+        }
+    }
+}), { name: 'onesy-ImageGallery' });
+const ImageGallery = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c, _d;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyImageGallery) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Image = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Image) || Image_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
+    const Backdrop = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Backdrop) || Backdrop_1.default; }, [theme]);
+    const { version = 'modal', size = 'regular', open: open_, onClose: onClose_, value: value_, items, minZoom: minZoom_ = 1, maxZoom: maxZoom_ = 2, incrementZoom = 0.07, overflow = true, arrows = true, startMain, endMain, startImage, endImage, startThumbnails, endThumbnails, ImageProps, ImageWrapperProps, IconButtonProps, IconStart = IconMaterialNavigateBeforeW100_1.default, IconEnd = IconMaterialNavigateNextW100_1.default, IconClose = IconMaterialCloseW100_1.default, className } = props, other = __rest(props, ["version", "size", "open", "onClose", "value", "items", "minZoom", "maxZoom", "incrementZoom", "overflow", "arrows", "startMain", "endMain", "startImage", "endImage", "startThumbnails", "endThumbnails", "ImageProps", "ImageWrapperProps", "IconButtonProps", "IconStart", "IconEnd", "IconClose", "className"]);
+    const { classes } = useStyle();
+    const [loaded, setLoaded] = react_1.default.useState(false);
+    const [open, setOpen] = react_1.default.useState(false);
+    const [value, setValue] = react_1.default.useState(0);
+    const [moveValue, setMoveValue] = react_1.default.useState();
+    const [imageRef, setImageRef] = react_1.default.useState();
+    const [keyDown, setKeyDown] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        version: react_1.default.useRef(version),
+        more: react_1.default.useRef(undefined),
+        image: react_1.default.useRef(),
+        imageWrapper: react_1.default.useRef(undefined),
+        media: react_1.default.useRef(undefined),
+        zoom: react_1.default.useRef(undefined),
+        incrementZoom: react_1.default.useRef(undefined),
+        minZoom: react_1.default.useRef(undefined),
+        maxZoom: react_1.default.useRef(undefined),
+        mouseDown: react_1.default.useRef(undefined),
+        mouseMovePrevious: react_1.default.useRef(undefined),
+        keyDown: react_1.default.useRef(keyDown),
+        useZoom: react_1.default.useRef(false)
+    };
+    const touch = (0, useMediaQuery_1.default)('(pointer: coarse)', { element: refs.root.current });
+    const minZoom = (0, utils_1.clamp)(minZoom_, 0.1, 1);
+    const maxZoom = (0, utils_1.clamp)(maxZoom_, 1, 100);
+    const length = (0, utils_1.clamp)(((items === null || items === void 0 ? void 0 : items.length) || 0) - 1, 0);
+    const media = items === null || items === void 0 ? void 0 : items[value];
+    refs.version.current = version;
+    refs.media.current = !!media;
+    refs.keyDown.current = keyDown;
+    refs.useZoom.current = version === 'modal' || keyDown;
+    refs.incrementZoom.current = incrementZoom;
+    refs.minZoom.current = minZoom;
+    refs.maxZoom.current = maxZoom;
+    const init = react_1.default.useCallback(() => {
+        setTimeout(() => {
+            var _a, _b;
+            setMoveValue({
+                left: (_a = refs.more.current) === null || _a === void 0 ? void 0 : _a.scrollLeft,
+                top: (_b = refs.more.current) === null || _b === void 0 ? void 0 : _b.scrollTop
+            });
+            setLoaded(true);
+        }, 14);
+    }, []);
+    const cleanUp = react_1.default.useCallback(() => {
+        refs.mouseDown.current = false;
+    }, []);
+    react_1.default.useEffect(() => {
+        const onKeyDown = (event) => {
+            setKeyDown(event.metaKey || event.ctrlKey);
+        };
+        const onKeyUp = (event) => {
+            setKeyDown(null);
+        };
+        window.document.addEventListener('keydown', onKeyDown);
+        window.document.addEventListener('keyup', onKeyUp);
+        return () => {
+            window.document.removeEventListener('keydown', onKeyDown);
+            window.document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        // init
+        if (open)
+            init();
+        else
+            cleanUp();
+    }, [open]);
+    react_1.default.useEffect(() => {
+        if (open_ !== undefined && open !== open_)
+            setOpen(open_);
+    }, [open_]);
+    react_1.default.useEffect(() => {
+        if (value_ !== undefined && value !== value_)
+            setValue((0, utils_1.clamp)(value_, 0, length));
+    }, [value_]);
+    const onResetZoom = react_1.default.useCallback(() => {
+        refs.zoom.current = null;
+        if (refs.imageWrapper.current) {
+            refs.imageWrapper.current.style.transition = 'none';
+            refs.imageWrapper.current.style.removeProperty('transform');
+            refs.imageWrapper.current.style.removeProperty('left');
+            refs.imageWrapper.current.style.removeProperty('top');
+            setTimeout(() => {
+                refs.imageWrapper.current.style.removeProperty('transition');
+            }, 14);
+        }
+    }, []);
+    const onValue = react_1.default.useCallback((index) => {
+        onResetZoom();
+        setValue(index);
+    }, [onResetZoom]);
+    const onOpen = react_1.default.useCallback(() => {
+        setOpen(true);
+    }, []);
+    const onClose = react_1.default.useCallback(() => {
+        setOpen(false);
+        setTimeout(() => {
+            setLoaded(false);
+        }, 140);
+        if ((0, utils_1.is)('function', onClose_))
+            onClose_();
+    }, [onClose_]);
+    const move = (forward_ = true) => {
+        const forward = forward_;
+        const rect = refs.more.current.getBoundingClientRect();
+        const moveValue_ = {
+            left: refs.more.current.scrollLeft + (forward ? 1 : -1) * rect.width,
+            behavior: 'smooth'
+        };
+        refs.more.current.scrollTo(moveValue_);
+    };
+    const onMouseDown = react_1.default.useCallback((event) => {
+        refs.mouseDown.current = true;
+        refs.mouseMovePrevious.current = {
+            x: event.clientX,
+            y: event.clientY
+        };
+    }, []);
+    const onMouseUp = react_1.default.useCallback(() => {
+        refs.mouseDown.current = false;
+        refs.mouseMovePrevious.current = null;
+    }, []);
+    const onWheel = react_1.default.useCallback((event) => {
+        var _a, _b, _c;
+        if (!refs.useZoom.current)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        let scale = ((_a = refs.zoom.current) === null || _a === void 0 ? void 0 : _a.scale) !== undefined ? refs.zoom.current.scale : 1;
+        const part = refs.incrementZoom.current;
+        const up = event.wheelDelta > 0 || event.deltaY < 0;
+        scale = (0, utils_1.clamp)(up ? scale + part : scale - part, refs.minZoom.current, refs.maxZoom.current);
+        // Only allow in 100's decimal places, ie. 1.01
+        scale = Math.round(scale * 100) / 100;
+        const imageBoundingRect = (_b = refs.image.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (imageBoundingRect.width <= window.innerWidth) {
+            refs.imageWrapper.current.style.removeProperty('left');
+        }
+        if (imageBoundingRect.height <= window.innerHeight) {
+            refs.imageWrapper.current.style.removeProperty('top');
+        }
+        if (scale !== ((_c = refs.zoom.current) === null || _c === void 0 ? void 0 : _c.scale)) {
+            refs.zoom.current = {
+                scale
+            };
+            refs.imageWrapper.current.style.transform = `scale(${scale})`;
+        }
+    }, []);
+    const onMouseMove = react_1.default.useCallback((event) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!refs.useZoom.current)
+            return;
+        if (!(refs.mouseDown.current && refs.image.current))
+            return;
+        const x = event.x - (((_a = refs.mouseMovePrevious.current) === null || _a === void 0 ? void 0 : _a.x) || 0);
+        const y = event.y - (((_b = refs.mouseMovePrevious.current) === null || _b === void 0 ? void 0 : _b.y) || 0);
+        refs.mouseMovePrevious.current = {
+            x: event.clientX,
+            y: event.clientY
+        };
+        let left = Number((_e = (_d = (_c = refs.imageWrapper.current) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.left) === null || _e === void 0 ? void 0 : _e.replace('px', '')) || 0;
+        let top = Number((_h = (_g = (_f = refs.imageWrapper.current) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.top) === null || _h === void 0 ? void 0 : _h.replace('px', '')) || 0;
+        const imageBoundingRect = refs.image.current.getBoundingClientRect();
+        if ((imageBoundingRect.left <= 0 &&
+            ((imageBoundingRect.left + x <= 0) &&
+                (imageBoundingRect.width + imageBoundingRect.left + x >= window.innerWidth)))) {
+            left += x;
+            refs.imageWrapper.current.style.left = `${left}px`;
+        }
+        if ((imageBoundingRect.top <= 0 &&
+            ((imageBoundingRect.top + y <= 0) &&
+                (imageBoundingRect.height + imageBoundingRect.top + y >= window.innerHeight)))) {
+            top += y;
+            refs.imageWrapper.current.style.top = `${top}px`;
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        if (refs.useZoom.current) {
+            if (imageRef)
+                imageRef.addEventListener('wheel', onWheel, { passive: false });
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+            window.addEventListener('touchend', onMouseUp);
+        }
+        return () => {
+            if (imageRef)
+                imageRef.removeEventListener('wheel', onWheel);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+            window.removeEventListener('touchend', onMouseUp);
+        };
+    }, [imageRef, refs.useZoom.current]);
+    const onScroll = react_1.default.useCallback((event) => {
+        if (!refs.useZoom.current)
+            return;
+        if (arrows) {
+            setMoveValue({
+                left: refs.more.current.scrollLeft,
+                top: refs.more.current.scrollTop
+            });
+        }
+    }, [arrows]);
+    const iconButtonProps = Object.assign({ version: 'filled', color: 'default', tonal: true, size: 'small' }, IconButtonProps);
+    const arrowPre = moveValue && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false), disabled: !moveValue || ((_a = refs.more.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0 }, iconButtonProps, { className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                'onesy-ImageGallery-arrow',
+                'onesy-ImageGallery-arrow-start'
+            ],
+            iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.className,
+            classes.arrow
+        ]) }, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })));
+    const arrowPost = moveValue && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(), disabled: Math.ceil(((_b = refs.more.current) === null || _b === void 0 ? void 0 : _b.clientWidth) + ((_c = refs.more.current) === null || _c === void 0 ? void 0 : _c.scrollLeft)) === ((_d = refs.more.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) }, iconButtonProps, { className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                'onesy-ImageGallery-arrow',
+                'onesy-ImageGallery-arrow-end'
+            ],
+            iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.className,
+            classes.arrow
+        ]) }, { children: (0, jsx_runtime_1.jsx)(IconEnd, {}) })));
+    const more = !!(items === null || items === void 0 ? void 0 : items.length);
+    const onDragStartImage = react_1.default.useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const url = (media === null || media === void 0 ? void 0 : media.url) || (media === null || media === void 0 ? void 0 : media.urlSmall) || ((0, utils_1.is)('string', media) ? media : '');
+    const main = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ justify: 'center', align: 'center', flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                        'onesy-ImageGallery-main'
+                    ],
+                    classes.main,
+                    classes[`main_version_${version}`],
+                    classes[`main_version_${version}_size_${size}`],
+                    !overflow && classes.noOverflow
+                ]) }, { children: [startMain, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: refs.imageWrapper, justify: 'center', align: 'center', fullWidth: true, flex: true }, ImageWrapperProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                                'onesy-ImageGallery-image-wrapper'
+                            ],
+                            ImageWrapperProps === null || ImageWrapperProps === void 0 ? void 0 : ImageWrapperProps.className,
+                            classes.imageWrapper
+                        ]), style: Object.assign({}, ImageWrapperProps === null || ImageWrapperProps === void 0 ? void 0 : ImageWrapperProps.style) }, { children: [startImage, url && ((0, jsx_runtime_1.jsx)(Image, Object.assign({ ref: (item) => {
+                                    refs.image.current = item;
+                                    setImageRef(item);
+                                }, src: url, alt: media === null || media === void 0 ? void 0 : media.name, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onTouchStart: onMouseDown, onTouchEnd: onMouseUp, onDragStart: onDragStartImage, lazyLoad: version === 'regular' }, ImageProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                                        'onesy-ImageGallery-image'
+                                    ],
+                                    ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className,
+                                    classes.image,
+                                    classes.pointerEventsAuto
+                                ]) }))), endImage] })), endMain] })), more && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                        'onesy-ImageGallery-footer'
+                    ],
+                    classes.footer
+                ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', justify: 'center', align: 'center', className: (0, style_react_1.classNames)([
+                        classes.itemsWrapper
+                    ]) }, { children: [startThumbnails, arrows && arrowPre, (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.more, gap: 1, direction: 'row', align: 'center', justify: 'flex-start', fullWidth: true, onScroll: onScroll, className: (0, style_react_1.classNames)([
+                                classes.items
+                            ]) }, { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ onClick: () => onValue(index), className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                                        'onesy-ImageGallery-item',
+                                        value === index && 'onesy-ImageGallery-item-selected'
+                                    ],
+                                    classes.item,
+                                    value === index && classes.itemSelected
+                                ]), style: {
+                                    backgroundImage: `url('${(item === null || item === void 0 ? void 0 : item.urlSmall) || (item === null || item === void 0 ? void 0 : item.url) || item}')`
+                                } }, { children: (0, jsx_runtime_1.jsx)(Interaction, {}) })))) })), arrows && arrowPost, endThumbnails] })) })))] });
+    if (version === 'regular') {
+        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
+                if (ref) {
+                    if ((0, utils_1.is)('function', ref))
+                        ref(item);
+                    else
+                        ref.current = item;
+                }
+                refs.root.current = item;
+            }, fullWidth: true, className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                    'onesy-ImageGallery-root',
+                    `onesy-ImageGallery-version-${version}`,
+                    `onesy-ImageGallery-size-${size}`
+                ],
+                className,
+                classes.root,
+                classes[`version_${version}`]
+            ]) }, other, { children: main })));
+    }
+    return ((0, jsx_runtime_1.jsx)(Backdrop, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, open: open, onClose: onClose, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                'onesy-ImageGallery-root',
+                `onesy-ImageGallery-version-${version}`
+            ],
+            className,
+            classes.root,
+            classes[`version_${version}`]
+        ]) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, fullWidth: true, className: classes.wrapper }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', justify: 'flex-end', fullWidth: true, className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('ImageGallery', theme) && [
+                            'onesy-ImageGallery-header'
+                        ],
+                        classes.header
+                    ]) }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'filled', color: theme.palette.light ? 'default' : 'inverted', onClick: onClose, className: (0, style_react_1.classNames)([
+                            classes.pointerEventsAuto
+                        ]) }, { children: (0, jsx_runtime_1.jsx)(IconClose, {}) })) })), main] })) })));
+});
+ImageGallery.displayName = 'onesy-ImageGallery';
+exports.default = ImageGallery;

package/ImageGallery/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ImageGallery';

package/ImageGallery/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImageGallery_1 = require("./ImageGallery");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImageGallery_1).default; } });

package/ImageGallery/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/ImageGallery/index.js",
+  "types": "./index.d.ts"
+}

package/ImageList/ImageList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IBaseElement, IValueBreakpoints } from '../types';
+export interface IImageList extends IBaseElement {
+    version?: 'standard' | 'vowen' | 'masonry';
+    gap?: number | Partial<Record<IValueBreakpoints, number>>;
+    rowGap?: number | Partial<Record<IValueBreakpoints, number>>;
+    columnGap?: number | Partial<Record<IValueBreakpoints, number>>;
+    columns?: number | Partial<Record<IValueBreakpoints, number>>;
+}
+declare const ImageList: React.FC<IImageList>;
+export default ImageList;