@onesy/ui-react 1.0.130 → 1.0.132

package/ImageGallery/ImageGallery.js

@@ -1,483 +1,528 @@
 "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("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
-const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
-const IconMaterialCloseW100_1 = __importDefault(require("@onesy/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)'
-            }
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialNavigateNextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
+var _IconMaterialNavigateBeforeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Interaction = _interopRequireDefault(require("../Interaction"));
+var _Backdrop = _interopRequireDefault(require("../Backdrop"));
+var _utils2 = require("../utils");
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+const _excluded = ["version", "size", "open", "onClose", "value", "items", "minZoom", "maxZoom", "incrementZoom", "overflow", "arrows", "startMain", "endMain", "startImage", "endImage", "startThumbnails", "endThumbnails", "ImageProps", "ImageWrapperProps", "IconButtonProps", "IconStart", "IconEnd", "IconClose", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    '&.onesy-Backdrop-root': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      userSelect: 'none',
+      zIndex: '14000'
     },
-    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)'
-        }
+    '& .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'
     },
-    itemSelected: {
-        border: '2px solid !important',
-        borderColor: `${theme.methods.palette.color.value('secondary', 30)} !important`
+    '&::-webkit-scrollbar-track, &::-webkit-scrollbar-corner': {
+      background: 'transparent'
     },
-    arrow: {
-        flex: '0 0 auto',
-        alignSelf: 'center',
-        justifySelf: 'center',
-        transition: theme.methods.transitions.make(['opacity'], { duration: 'xxs' }),
-        '&[disabled]': {
-            opacity: '0'
-        }
+    '&::-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(null),
-        version: react_1.default.useRef(version),
-        more: react_1.default.useRef(null),
-        image: react_1.default.useRef(null),
-        imageWrapper: react_1.default.useRef(null),
-        media: react_1.default.useRef(null),
-        zoom: react_1.default.useRef(null),
-        incrementZoom: react_1.default.useRef(null),
-        minZoom: react_1.default.useRef(null),
-        maxZoom: react_1.default.useRef(null),
-        mouseDown: react_1.default.useRef(null),
-        mouseMovePrevious: react_1.default.useRef(null),
-        keyDown: react_1.default.useRef(keyDown),
-        useZoom: react_1.default.useRef(false)
+  }
+}), {
+  name: 'onesy-ImageGallery'
+});
+const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _refs$more$current3, _refs$more$current4, _refs$more$current5, _refs$more$current6;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageGallery) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Image = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Image) || _Image.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Interaction = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Interaction) || _Interaction.default;
+  }, [theme]);
+  const Backdrop = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Backdrop) || _Backdrop.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 = _IconMaterialNavigateBeforeW.default,
+      IconEnd = _IconMaterialNavigateNextW.default,
+      IconClose = _IconMaterialCloseW.default,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [loaded, setLoaded] = _react.default.useState(false);
+  const [open, setOpen] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(0);
+  const [moveValue, setMoveValue] = _react.default.useState();
+  const [imageRef, setImageRef] = _react.default.useState();
+  const [keyDown, setKeyDown] = _react.default.useState();
+  const refs = {
+    root: _react.default.useRef(null),
+    version: _react.default.useRef(version),
+    more: _react.default.useRef(null),
+    image: _react.default.useRef(null),
+    imageWrapper: _react.default.useRef(null),
+    media: _react.default.useRef(null),
+    zoom: _react.default.useRef(null),
+    incrementZoom: _react.default.useRef(null),
+    minZoom: _react.default.useRef(null),
+    maxZoom: _react.default.useRef(null),
+    mouseDown: _react.default.useRef(null),
+    mouseMovePrevious: _react.default.useRef(null),
+    keyDown: _react.default.useRef(keyDown),
+    useZoom: _react.default.useRef(false)
+  };
+  const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
+    element: refs.root.current
+  });
+  const minZoom = (0, _utils.clamp)(minZoom_, 0.1, 1);
+  const maxZoom = (0, _utils.clamp)(maxZoom_, 1, 100);
+  const length = (0, _utils.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.default.useCallback(() => {
+    setTimeout(() => {
+      var _refs$more$current, _refs$more$current2;
+      setMoveValue({
+        left: (_refs$more$current = refs.more.current) === null || _refs$more$current === void 0 ? void 0 : _refs$more$current.scrollLeft,
+        top: (_refs$more$current2 = refs.more.current) === null || _refs$more$current2 === void 0 ? void 0 : _refs$more$current2.scrollTop
+      });
+      setLoaded(true);
+    }, 14);
+  }, []);
+  const cleanUp = _react.default.useCallback(() => {
+    refs.mouseDown.current = false;
+  }, []);
+  _react.default.useEffect(() => {
+    const onKeyDown = event => {
+      setKeyDown(event.metaKey || event.ctrlKey);
     };
-    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 onKeyUp = event => {
+      setKeyDown(null);
     };
-    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 })));
+    window.document.addEventListener('keydown', onKeyDown);
+    window.document.addEventListener('keyup', onKeyUp);
+    return () => {
+      window.document.removeEventListener('keydown', onKeyDown);
+      window.document.removeEventListener('keyup', onKeyUp);
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    // init
+    if (open) init();else cleanUp();
+  }, [open]);
+  _react.default.useEffect(() => {
+    if (open_ !== undefined && open !== open_) setOpen(open_);
+  }, [open_]);
+  _react.default.useEffect(() => {
+    if (value_ !== undefined && value !== value_) setValue((0, _utils.clamp)(value_, 0, length));
+  }, [value_]);
+  const onResetZoom = _react.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.default.useCallback(index => {
+    onResetZoom();
+    setValue(index);
+  }, [onResetZoom]);
+  const onOpen = _react.default.useCallback(() => {
+    setOpen(true);
+  }, []);
+  const onClose = _react.default.useCallback(() => {
+    setOpen(false);
+    setTimeout(() => {
+      setLoaded(false);
+    }, 140);
+    if ((0, _utils.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.default.useCallback(event => {
+    refs.mouseDown.current = true;
+    refs.mouseMovePrevious.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, []);
+  const onMouseUp = _react.default.useCallback(() => {
+    refs.mouseDown.current = false;
+    refs.mouseMovePrevious.current = null;
+  }, []);
+  const onWheel = _react.default.useCallback(event => {
+    var _refs$zoom$current, _refs$image$current, _refs$zoom$current2;
+    if (!refs.useZoom.current) return;
+    event.preventDefault();
+    event.stopPropagation();
+    let scale = ((_refs$zoom$current = refs.zoom.current) === null || _refs$zoom$current === void 0 ? void 0 : _refs$zoom$current.scale) !== undefined ? refs.zoom.current.scale : 1;
+    const part = refs.incrementZoom.current;
+    const up = event.wheelDelta > 0 || event.deltaY < 0;
+    scale = (0, _utils.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 = (_refs$image$current = refs.image.current) === null || _refs$image$current === void 0 ? void 0 : _refs$image$current.getBoundingClientRect();
+    if (imageBoundingRect.width <= window.innerWidth) {
+      refs.imageWrapper.current.style.removeProperty('left');
     }
-    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] })) })));
+    if (imageBoundingRect.height <= window.innerHeight) {
+      refs.imageWrapper.current.style.removeProperty('top');
+    }
+    if (scale !== ((_refs$zoom$current2 = refs.zoom.current) === null || _refs$zoom$current2 === void 0 ? void 0 : _refs$zoom$current2.scale)) {
+      refs.zoom.current = {
+        scale
+      };
+      refs.imageWrapper.current.style.transform = `scale(${scale})`;
+    }
+  }, []);
+  const onMouseMove = _react.default.useCallback(event => {
+    var _refs$mouseMovePrevio, _refs$mouseMovePrevio2, _refs$imageWrapper$cu, _refs$imageWrapper$cu2;
+    if (!refs.useZoom.current) return;
+    if (!(refs.mouseDown.current && refs.image.current)) return;
+    const x = event.x - (((_refs$mouseMovePrevio = refs.mouseMovePrevious.current) === null || _refs$mouseMovePrevio === void 0 ? void 0 : _refs$mouseMovePrevio.x) || 0);
+    const y = event.y - (((_refs$mouseMovePrevio2 = refs.mouseMovePrevious.current) === null || _refs$mouseMovePrevio2 === void 0 ? void 0 : _refs$mouseMovePrevio2.y) || 0);
+    refs.mouseMovePrevious.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    let left = Number((_refs$imageWrapper$cu = refs.imageWrapper.current) === null || _refs$imageWrapper$cu === void 0 || (_refs$imageWrapper$cu = _refs$imageWrapper$cu.style) === null || _refs$imageWrapper$cu === void 0 || (_refs$imageWrapper$cu = _refs$imageWrapper$cu.left) === null || _refs$imageWrapper$cu === void 0 ? void 0 : _refs$imageWrapper$cu.replace('px', '')) || 0;
+    let top = Number((_refs$imageWrapper$cu2 = refs.imageWrapper.current) === null || _refs$imageWrapper$cu2 === void 0 || (_refs$imageWrapper$cu2 = _refs$imageWrapper$cu2.style) === null || _refs$imageWrapper$cu2 === void 0 || (_refs$imageWrapper$cu2 = _refs$imageWrapper$cu2.top) === null || _refs$imageWrapper$cu2 === void 0 ? void 0 : _refs$imageWrapper$cu2.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.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.default.useCallback(event => {
+    if (!refs.useZoom.current) return;
+    if (arrows) {
+      setMoveValue({
+        left: refs.more.current.scrollLeft,
+        top: refs.more.current.scrollTop
+      });
+    }
+  }, [arrows]);
+  const iconButtonProps = _objectSpread({
+    version: 'filled',
+    color: 'default',
+    tonal: true,
+    size: 'small'
+  }, IconButtonProps);
+  const arrowPre = moveValue && /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: () => move(false),
+    disabled: !moveValue || ((_refs$more$current3 = refs.more.current) === null || _refs$more$current3 === void 0 ? void 0 : _refs$more$current3.scrollLeft) === 0
+  }, iconButtonProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-arrow', 'onesy-ImageGallery-arrow-start'], iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.className, classes.arrow])
+  }), /*#__PURE__*/_react.default.createElement(IconStart, null));
+  const arrowPost = moveValue && /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: () => move(),
+    disabled: Math.ceil(((_refs$more$current4 = refs.more.current) === null || _refs$more$current4 === void 0 ? void 0 : _refs$more$current4.clientWidth) + ((_refs$more$current5 = refs.more.current) === null || _refs$more$current5 === void 0 ? void 0 : _refs$more$current5.scrollLeft)) === ((_refs$more$current6 = refs.more.current) === null || _refs$more$current6 === void 0 ? void 0 : _refs$more$current6.scrollWidth)
+  }, iconButtonProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-arrow', 'onesy-ImageGallery-arrow-end'], iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.className, classes.arrow])
+  }), /*#__PURE__*/_react.default.createElement(IconEnd, null));
+  const more = !!(items !== null && items !== void 0 && items.length);
+  const onDragStartImage = _react.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.is)('string', media) ? media : '');
+  const main = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Line, {
+    justify: "center",
+    align: "center",
+    flex: true,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-main'], classes.main, classes[`main_version_${version}`], classes[`main_version_${version}_size_${size}`], !overflow && classes.noOverflow])
+  }, startMain, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: refs.imageWrapper,
+    justify: "center",
+    align: "center",
+    fullWidth: true,
+    flex: true
+  }, ImageWrapperProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-image-wrapper'], ImageWrapperProps === null || ImageWrapperProps === void 0 ? void 0 : ImageWrapperProps.className, classes.imageWrapper]),
+    style: _objectSpread({}, ImageWrapperProps === null || ImageWrapperProps === void 0 ? void 0 : ImageWrapperProps.style)
+  }), startImage, url && /*#__PURE__*/_react.default.createElement(Image, (0, _extends2.default)({
+    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, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-image'], ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className, classes.image, classes.pointerEventsAuto])
+  })), endImage), endMain), more && /*#__PURE__*/_react.default.createElement(Line, {
+    align: "center",
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-footer'], classes.footer])
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    justify: "center",
+    align: "center",
+    className: (0, _styleReact.classNames)([classes.itemsWrapper])
+  }, startThumbnails, arrows && arrowPre, /*#__PURE__*/_react.default.createElement(Line, {
+    ref: refs.more,
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "flex-start",
+    fullWidth: true,
+    onScroll: onScroll,
+    className: (0, _styleReact.classNames)([classes.items])
+  }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
+    onClick: () => onValue(index),
+    className: (0, _styleReact.classNames)([(0, _utils2.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}')`
+    }
+  }, /*#__PURE__*/_react.default.createElement(Interaction, null)))), arrows && arrowPost, endThumbnails)));
+  if (version === 'regular') {
+    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: item => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        }
+        refs.root.current = item;
+      },
+      fullWidth: true,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-root', `onesy-ImageGallery-version-${version}`, `onesy-ImageGallery-size-${size}`], className, classes.root, classes[`version_${version}`]])
+    }, other), main);
+  }
+  return /*#__PURE__*/_react.default.createElement(Backdrop, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    open: open,
+    onClose: onClose,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-root', `onesy-ImageGallery-version-${version}`], className, classes.root, classes[`version_${version}`]])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0,
+    fullWidth: true,
+    className: classes.wrapper
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    direction: "row",
+    justify: "flex-end",
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-header'], classes.header])
+  }, /*#__PURE__*/_react.default.createElement(IconButton, {
+    version: "filled",
+    color: theme.palette.light ? 'default' : 'inverted',
+    onClick: onClose,
+    className: (0, _styleReact.classNames)([classes.pointerEventsAuto])
+  }, /*#__PURE__*/_react.default.createElement(IconClose, null))), main));
 });
 ImageGallery.displayName = 'onesy-ImageGallery';
-exports.default = ImageGallery;
+var _default = exports.default = ImageGallery;