@onesy/ui-react 1.0.164 → 1.0.167

package/ImageGallery/ImageGallery.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IMediaObject } from '../types';
-export type IImageGallery = ILine & {
+export declare type IImageGallery = ILine & {
     version?: 'regular' | 'modal';
     open?: boolean;
     size?: 'small' | 'regular' | 'large';

package/ImageGallery/ImageGallery.js

@@ -159,32 +159,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ImageGallery'
 });
 const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$more$current3, _refs$more$current4, _refs$more$current5, _refs$more$current6;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _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 props = _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_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Image = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Image) || _Image.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Interaction) || _Interaction.default;
+  const Backdrop = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Backdrop) || _Backdrop.default;
   const {
       version = 'modal',
       size = 'regular',
@@ -251,7 +233,7 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.incrementZoom.current = incrementZoom;
   refs.minZoom.current = minZoom;
   refs.maxZoom.current = maxZoom;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     setTimeout(() => {
       var _refs$more$current, _refs$more$current2;
       setMoveValue({
@@ -260,15 +242,15 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       });
       setLoaded(true);
     }, 14);
-  }, []);
-  const cleanUp = _react.default.useCallback(() => {
+  };
+  const cleanUp = () => {
     refs.mouseDown.current = false;
-  }, []);
+  };
   _react.default.useEffect(() => {
     const onKeyDown = event => {
       setKeyDown(event.metaKey || event.ctrlKey);
     };
-    const onKeyUp = event => {
+    const onKeyUp = event_0 => {
       setKeyDown(null);
     };
     window.document.addEventListener('keydown', onKeyDown);
@@ -288,7 +270,7 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (value_ !== undefined && value !== value_) setValue((0, _utils.clamp)(value_, 0, length));
   }, [value_]);
-  const onResetZoom = _react.default.useCallback(() => {
+  const onResetZoom = () => {
     refs.zoom.current = null;
     if (refs.imageWrapper.current) {
       refs.imageWrapper.current.style.transition = 'none';
@@ -299,21 +281,21 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         refs.imageWrapper.current.style.removeProperty('transition');
       }, 14);
     }
-  }, []);
-  const onValue = _react.default.useCallback(index => {
+  };
+  const onValue = index => {
     onResetZoom();
     setValue(index);
-  }, [onResetZoom]);
-  const onOpen = _react.default.useCallback(() => {
+  };
+  const onOpen = () => {
     setOpen(true);
-  }, []);
-  const onClose = _react.default.useCallback(() => {
+  };
+  const onClose = () => {
     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();
@@ -323,25 +305,25 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
     refs.more.current.scrollTo(moveValue_);
   };
-  const onMouseDown = _react.default.useCallback(event => {
+  const onMouseDown = event_1 => {
     refs.mouseDown.current = true;
     refs.mouseMovePrevious.current = {
-      x: event.clientX,
-      y: event.clientY
+      x: event_1.clientX,
+      y: event_1.clientY
     };
-  }, []);
-  const onMouseUp = _react.default.useCallback(() => {
+  };
+  const onMouseUp = () => {
     refs.mouseDown.current = false;
     refs.mouseMovePrevious.current = null;
-  }, []);
-  const onWheel = _react.default.useCallback(event => {
+  };
+  const onWheel = event_2 => {
     var _refs$zoom$current, _refs$image$current, _refs$zoom$current2;
     if (!refs.useZoom.current) return;
-    event.preventDefault();
-    event.stopPropagation();
+    event_2.preventDefault();
+    event_2.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;
+    const up = event_2.wheelDelta > 0 || event_2.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
@@ -359,29 +341,29 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       refs.imageWrapper.current.style.transform = `scale(${scale})`;
     }
-  }, []);
-  const onMouseMove = _react.default.useCallback(event => {
+  };
+  const onMouseMove = event_3 => {
     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);
+    const x = event_3.x - (((_refs$mouseMovePrevio = refs.mouseMovePrevious.current) === null || _refs$mouseMovePrevio === void 0 ? void 0 : _refs$mouseMovePrevio.x) || 0);
+    const y = event_3.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
+      x: event_3.clientX,
+      y: event_3.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) {
+    const imageBoundingRect_0 = refs.image.current.getBoundingClientRect();
+    if (imageBoundingRect_0.left <= 0 && imageBoundingRect_0.left + x <= 0 && imageBoundingRect_0.width + imageBoundingRect_0.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) {
+    if (imageBoundingRect_0.top <= 0 && imageBoundingRect_0.top + y <= 0 && imageBoundingRect_0.height + imageBoundingRect_0.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, {
@@ -398,7 +380,7 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       window.removeEventListener('touchend', onMouseUp);
     };
   }, [imageRef, refs.useZoom.current]);
-  const onScroll = _react.default.useCallback(event => {
+  const onScroll = event_4 => {
     if (!refs.useZoom.current) return;
     if (arrows) {
       setMoveValue({
@@ -406,7 +388,7 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         top: refs.more.current.scrollTop
       });
     }
-  }, [arrows]);
+  };
   const iconButtonProps = _objectSpread({
     version: 'filled',
     color: 'default',
@@ -426,9 +408,9 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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 onDragStartImage = event_5 => {
+    event_5.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",
@@ -479,31 +461,31 @@ const ImageGallery = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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]),
+  }, items.map((item_0, index_0) => /*#__PURE__*/_react.default.createElement(Line, {
+    onClick: () => onValue(index_0),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageGallery', theme) && ['onesy-ImageGallery-item', value === index_0 && 'onesy-ImageGallery-item-selected'], classes.item, value === index_0 && classes.itemSelected]),
     style: {
-      backgroundImage: `url('${(item === null || item === void 0 ? void 0 : item.urlSmall) || (item === null || item === void 0 ? void 0 : item.url) || item}')`
+      backgroundImage: `url('${(item_0 === null || item_0 === void 0 ? void 0 : item_0.urlSmall) || (item_0 === null || item_0 === void 0 ? void 0 : item_0.url) || item_0}')`
     }
   }, /*#__PURE__*/_react.default.createElement(Interaction, null)))), arrows && arrowPost, endThumbnails)));
   if (version === 'regular') {
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: item => {
+      ref: item_1 => {
         if (ref) {
-          if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+          if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
         }
-        refs.root.current = item;
+        refs.root.current = item_1;
       },
       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 => {
+    ref: item_2 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     open: open,
     onClose: onClose,

package/ImageList/ImageList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IValueBreakpoints } from '../types';
-export type IImageList = IBaseElement & {
+export declare type IImageList = IBaseElement & {
     version?: 'standard' | 'vowen' | 'masonry';
     gap?: number | Partial<Record<IValueBreakpoints, number>>;
     rowGap?: number | Partial<Record<IValueBreakpoints, number>>;

package/ImageList/ImageList.js

@@ -41,11 +41,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ImageList'
 });
 const ImageList = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   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.onesyImageList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _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.onesyImageList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     classes
   } = useStyle();
@@ -69,13 +67,13 @@ const ImageList = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [gap_, rowGap_, columnGap_, columns_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [gap_, rowGap_, columnGap_, columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -113,29 +111,29 @@ const ImageList = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Wrapper = version !== 'masonry' ? _react.default.Fragment : 'div';
   const WrapperProps = {};
   if (version === 'masonry') {
-    WrapperProps.ref = item => {
+    WrapperProps.ref = item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     };
     WrapperProps.style = _objectSpread({}, style);
     other.style = _objectSpread({}, styles.root);
   } else {
-    other.ref = item => {
+    other.ref = item_1 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     };
     other.style = _objectSpread(_objectSpread({}, styles.root), style);
   }
   return /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageList', theme) && [`onesy-ImageList-root`], className, classes.root, classes[`version_${version}`]])
-  }, other), _react.default.Children.toArray(children).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
+  }, other), _react.default.Children.toArray(children).map((item_2, index) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
     key: index,
     version,
-    style: _objectSpread(_objectSpread({}, styles.item), item.props.style)
+    style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
   })))));
 });
 ImageList.displayName = 'onesy-ImageList';

package/ImageListItem/ImageListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints } from '../types';
-export type IImageListItem = ILine & {
+export declare type IImageListItem = ILine & {
     rows?: number | Partial<Record<IValueBreakpoints, number>>;
     columns?: number | Partial<Record<IValueBreakpoints, number>>;
     version?: 'standard' | 'vowen' | 'masonry';

package/ImageListItem/ImageListItem.js

@@ -36,15 +36,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ImageListItem'
 });
 const ImageListItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   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.onesyImageListItem) === 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 props = _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.onesyImageListItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
       rows: rows_,
       columns: columns_,
@@ -65,13 +60,13 @@ const ImageListItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [rows_, columns_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [rows_, columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -87,11 +82,11 @@ const ImageListItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const children = _react.default.Children.toArray(children_);
   if (children.length > 1) other.justify = 'flex-end';
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 0,
     direction: "column",

package/ImageListItemBox/ImageListItemBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IListItem } from '../ListItem/ListItem';
-export type IImageListItemBox = IListItem & {
+export declare type IImageListItemBox = IListItem & {
     position?: 'top' | 'bottom';
     backgroundOpacity?: number;
 };

package/ImageListItemBox/ImageListItemBox.js

@@ -8,6 +8,7 @@ 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 _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _ListItem = _interopRequireDefault(require("../ListItem"));
@@ -33,32 +34,45 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ImageListItemBox'
 });
 const ImageListItemBox = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(8);
   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.onesyImageListItemBox) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const ListItem = _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.ListItem) || _ListItem.default;
-  }, [theme]);
+  const props = _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.onesyImageListItemBox) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
   const {
       position,
-      backgroundOpacity = 0.74,
-      Component = 'div',
+      backgroundOpacity: t0,
+      Component: t1,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const backgroundOpacity = t0 === undefined ? 0.74 : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    ref: ref,
-    backgroundOpacity: backgroundOpacity,
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ImageListItemBox', theme) && ['onesy-ImageListItemBox-root'], className, classes.root, position && classes[`position_${position}`]])
-  }, other), children);
+  const t2 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ImageListItemBox", theme) && ["onesy-ImageListItemBox-root"], className, classes.root, position && classes[`position_${position}`]]);
+  let t3;
+  if ($[0] !== Component || $[1] !== ListItem || $[2] !== backgroundOpacity || $[3] !== children || $[4] !== other || $[5] !== ref || $[6] !== t2) {
+    t3 = /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      ref: ref,
+      backgroundOpacity: backgroundOpacity,
+      Component: Component,
+      className: t2
+    }, other), children);
+    $[0] = Component;
+    $[1] = ListItem;
+    $[2] = backgroundOpacity;
+    $[3] = children;
+    $[4] = other;
+    $[5] = ref;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
 });
 ImageListItemBox.displayName = 'onesy-ImageListItemBox';
 var _default = exports.default = ImageListItemBox;

package/Info/Info.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IMenu } from '../Menu/Menu';
-export type IInfo = IMenu & {
+export declare type IInfo = IMenu & {
     name?: string;
     title?: string;
     render?: () => any;