@onesy/ui-react 1.0.164 → 1.0.167

package/Masonry/Masonry.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints } from '../types';
-export type IMasonry = Omit<ILine, 'gap'> & {
+export declare type IMasonry = Omit<ILine, 'gap'> & {
     gap?: number | Partial<Record<IValueBreakpoints, number>>;
     columns?: number | Partial<Record<IValueBreakpoints, number>>;
     noMasonry?: boolean;

package/Masonry/Masonry.js

@@ -25,15 +25,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Masonry'
 });
 const Masonry = /*#__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.onesyMasonry) === 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.onesyMasonry) === 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 {
       gap: gap_,
       columns: columns_,
@@ -59,13 +54,13 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [gap_, 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_, 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
     });
   });
@@ -132,8 +127,8 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       });
 
       // update height (biggest column height)
-      Object.keys(columns__).forEach(column => {
-        if (columns__[column] > highestValue) highestValue = columns__[column];
+      Object.keys(columns__).forEach(column_0 => {
+        if (columns__[column_0] > highestValue) highestValue = columns__[column_0];
       });
 
       // Height
@@ -142,11 +137,11 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (refs.init.current !== 'animated') setInit(true);
     }
   };
-  const method = _react.default.useCallback(update, []);
+  const method = update;
   _react.default.useEffect(() => {
     setTimeout(update);
     const observer = new ResizeObserver(method);
-    [refs.root.current, ...Array.from(refs.root.current.children)].forEach(item => observer.observe(item));
+    [refs.root.current, ...Array.from(refs.root.current.children)].forEach(item_0 => observer.observe(item_0));
     return () => {
       // Clean up
       observer.disconnect();
@@ -164,11 +159,11 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (!useMasonry) {
     styles.item.width = columns === 1 ? '100%' : `calc(${100 / columns}% - ${gap * theme.space.unit * (columns - 1) / columns}px)`;
     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;
       },
       gap: gap,
       direction: "row",
@@ -179,17 +174,17 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       style: _objectSpread(_objectSpread({}, style), {}, {
         height: 'auto'
       }, NoMasonryProps === null || NoMasonryProps === void 0 ? void 0 : NoMasonryProps.style)
-    }, other), children.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-      key: index,
-      style: _objectSpread(_objectSpread({}, styles.item), item.props.style)
+    }, other), children.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
+      key: index_0,
+      style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
     }))));
   }
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     gap: gap,
     wrap: "wrap",
@@ -199,15 +194,15 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     fullWidth: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-root'], className, classes.root]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), _react.default.Children.toArray(children).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index,
-    style: _objectSpread(_objectSpread({}, styles.item), item.props.style)
-  }))), columns > 1 && new Array(columns - 1).fill(true).map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
-    key: index,
+  }, other), _react.default.Children.toArray(children).map((item_4, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
+    key: index_1,
+    style: _objectSpread(_objectSpread({}, styles.item), item_4.props.style)
+  }))), columns > 1 && new Array(columns - 1).fill(true).map((item_5, index_2) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index_2,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-line-break']]),
     style: {
       flex: '1 1 100%',
-      order: index + 1
+      order: index_2 + 1
     }
   })));
 });

package/Medias/Medias.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IMediaObject, IPropsAny } from '../types';
-export type IMediasItem = {
+export declare type IMediasItem = {
     value: IMediaObject;
     props?: any;
 };
-export type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
-export type IMedias = ILine & {
+export declare type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
+export declare type IMedias = ILine & {
     size?: 'small' | 'regular' | 'large';
     values?: IMediasItem | IMediasItem[];
     imageGallery?: boolean;

package/Medias/Medias.js

@@ -147,45 +147,18 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Medias'
 });
 const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _items$image, _refs$root$current;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _items$image, _refs$root$current;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  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.onesyMedias) === 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 Link = _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.Link) || _Link.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.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 AudioPlayer = _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.AudioPlayer) || _AudioPlayer.default;
-  }, [theme]);
-  const VideoPlayer = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.VideoPlayer) || _VideoPlayer.default;
-  }, [theme]);
-  const Portal = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Portal) || _Portal.default;
-  }, [theme]);
-  const ImageGallery = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ImageGallery) || _ImageGallery.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.onesyMedias) === 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 Link = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Link) || _Link.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.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 AudioPlayer = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.AudioPlayer) || _AudioPlayer.default;
+  const VideoPlayer = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.VideoPlayer) || _VideoPlayer.default;
+  const Portal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Portal) || _Portal.default;
+  const ImageGallery = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ImageGallery) || _ImageGallery.default;
   const {
       size = 'regular',
       values: values_ = [],
@@ -220,17 +193,17 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     root: _react.default.useRef(undefined)
   };
   const values = (0, _utils.is)('array', values_) ? values_ : [values_];
-  const onOpen = _react.default.useCallback(index => {
+  const onOpen = index => {
     setOpen({
       index
     });
-  }, []);
-  const onClose = _react.default.useCallback(() => {
+  };
+  const onClose = () => {
     setOpen(null);
-  }, []);
-  const onOpenMedia = _react.default.useCallback(media => {
+  };
+  const onOpenMedia = media => {
     window.open(media.url || media.urlSmall, 'blank_');
-  }, []);
+  };
   const items = _react.default.useMemo(() => {
     const items_ = {
       image: [],
@@ -239,20 +212,20 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       other: [],
       embed: []
     };
-    values.filter(item => (item === null || item === void 0 ? void 0 : item.value) && !!Object.keys(item.value).length).forEach(item => {
-      const media = item.value;
-      if (media) {
-        var _media$mime, _media$mime2, _media$mime3;
-        if (media.urlEmbed !== undefined) items_.embed.push(item);else if ((_media$mime = media.mime) !== null && _media$mime !== void 0 && _media$mime.startsWith('image')) items_.image.push(item);else if ((_media$mime2 = media.mime) !== null && _media$mime2 !== void 0 && _media$mime2.startsWith('audio')) items_.audio.push(item);else if ((_media$mime3 = media.mime) !== null && _media$mime3 !== void 0 && _media$mime3.startsWith('video')) items_.video.push(item);else items_.other.push(item);
+    values.filter(item => (item === null || item === void 0 ? void 0 : item.value) && !!Object.keys(item.value).length).forEach(item_0 => {
+      const media_0 = item_0.value;
+      if (media_0) {
+        var _media_0$mime, _media_0$mime2, _media_0$mime3;
+        if (media_0.urlEmbed !== undefined) items_.embed.push(item_0);else if ((_media_0$mime = media_0.mime) !== null && _media_0$mime !== void 0 && _media_0$mime.startsWith('image')) items_.image.push(item_0);else if ((_media_0$mime2 = media_0.mime) !== null && _media_0$mime2 !== void 0 && _media_0$mime2.startsWith('audio')) items_.audio.push(item_0);else if ((_media_0$mime3 = media_0.mime) !== null && _media_0$mime3 !== void 0 && _media_0$mime3.startsWith('video')) items_.video.push(item_0);else items_.other.push(item_0);
       }
     });
     return items_;
   }, [values]);
-  const getLink = _react.default.useCallback((item, index) => {
-    const urlEmbed = item === null || item === void 0 ? void 0 : item.urlEmbed;
+  const getLink = (item_1, index_0) => {
+    const urlEmbed = item_1 === null || item_1 === void 0 ? void 0 : item_1.urlEmbed;
     if (!urlEmbed) return null;
     const otherProps = _objectSpread({
-      key: index
+      key: index_0
     }, EmbedProps);
     const urlEmbedStart = urlEmbed.replace('http://', '').replace('https://', '');
     const isPlatform = urlEmbedStart.startsWith('youtu') || urlEmbedStart.startsWith('www.youtu') || urlEmbedStart.startsWith('instagram') || urlEmbedStart.startsWith('www.instagram') || urlEmbedStart.startsWith('tiktok') || urlEmbedStart.startsWith('www.tiktok') || urlEmbedStart.startsWith('vimeo') || urlEmbedStart.startsWith('www.vimeo');
@@ -262,50 +235,50 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       var _url$pathname, _url;
       let url;
       try {
-        url = new URL(item.urlEmbed);
+        url = new URL(item_1.urlEmbed);
       } catch (error) {
-        console.log('Invalid embed URL', item);
+        console.log('Invalid embed URL', item_1);
         return null;
       }
       const id = (_url$pathname = url.pathname) === null || _url$pathname === void 0 ? void 0 : _url$pathname.split('/').filter(Boolean).slice(-1)[0];
       if (!((_url = url) !== null && _url !== void 0 && _url.hostname) || !id) return null;
-      if (item.urlEmbed.includes('youtu.be')) {
+      if (item_1.urlEmbed.includes('youtu.be')) {
         return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://www.youtube.com/embed/${id}`,
           allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
           allowFullScreen: true,
           className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.aspectRatioYoutube])
         }));
       }
-      if (item.urlEmbed.includes('instagram.com')) {
+      if (item_1.urlEmbed.includes('instagram.com')) {
         return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://www.instagram.com/reel/${id}/embed`,
           allowFullScreen: true,
           className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.aspectRatioInstagram])
         }));
       }
-      if (item.urlEmbed.includes('tiktok.com')) {
+      if (item_1.urlEmbed.includes('tiktok.com')) {
         return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://www.tiktok.com/embed/v2/${id}`,
           allowFullScreen: true,
           className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.aspectRatioTiktok])
         }));
       }
-      if (item.urlEmbed.includes('vimeo.com')) {
+      if (item_1.urlEmbed.includes('vimeo.com')) {
         return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://player.vimeo.com/video/${id}`,
           allowFullScreen: true,
           className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.aspectRatioVimeo])
         }));
       }
       return /*#__PURE__*/_react.default.createElement(Link, (0, _extends2.default)({}, otherProps, {
-        href: item === null || item === void 0 ? void 0 : item.urlEmbed,
+        href: item_1 === null || item_1 === void 0 ? void 0 : item_1.urlEmbed,
         target: "blank"
-      }), item.name || item.urlEmbed);
+      }), item_1.name || item_1.urlEmbed);
     }
 
     // custom embed code
@@ -316,126 +289,126 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         __html: urlEmbed
       }
     }));
-  }, [EmbedProps]);
-  const getItem = (version, item, index) => {
-    var _item$props;
-    const media = item.value;
-    const name = ((item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.name) || !noName) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+  };
+  const getItem = (version, item_2, index_1) => {
+    var _item_2$props;
+    const media_1 = item_2.value;
+    const name = ((item_2 === null || item_2 === void 0 || (_item_2$props = item_2.props) === null || _item_2$props === void 0 ? void 0 : _item_2$props.name) || !noName) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
       version: size === 'large' ? 'l2' : size === 'regular' ? 'l3' : 'l3'
     }, NameProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-name'], NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.name])
-    }), (media === null || media === void 0 ? void 0 : media.name) || l('No name'));
+    }), (media_1 === null || media_1 === void 0 ? void 0 : media_1.name) || l('No name'));
     if (version === 'embed') {
-      return getLink(media, index);
+      return getLink(media_1, index_1);
     }
     if (version === 'image') {
-      var _item$props2, _item$props3;
+      var _item_2$props2, _item_2$props3;
       return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
-        onClick: () => imageGallery && onOpen(index),
+        onClick: () => imageGallery && onOpen(index_1),
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-image'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes.wrapper_image, classes[`imageWrapper_size_${size}`]])
       }), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index
-      }, ImageProps, item === null || item === void 0 ? void 0 : item.props, {
+        key: index_1
+      }, ImageProps, item_2 === null || item_2 === void 0 ? void 0 : item_2.props, {
         fullWidth: true,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-image'], ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className, item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.className, classes.item, classes.image, classes[`image_size_${size}`]]),
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-image'], ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className, item_2 === null || item_2 === void 0 || (_item_2$props2 = item_2.props) === null || _item_2$props2 === void 0 ? void 0 : _item_2$props2.className, classes.item, classes.image, classes[`image_size_${size}`]]),
         style: _objectSpread({
-          backgroundImage: `url(${media.urlSmall || media.url})`
-        }, item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.style)
+          backgroundImage: `url(${media_1.urlSmall || media_1.url})`
+        }, item_2 === null || item_2 === void 0 || (_item_2$props3 = item_2.props) === null || _item_2$props3 === void 0 ? void 0 : _item_2$props3.style)
       }), /*#__PURE__*/_react.default.createElement(Interaction, null)), name);
     }
     if (version === 'audio') {
-      var _item$props4;
+      var _item_2$props4;
       return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-audio'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes[`audioWrapper_size_${size}`]])
       }), /*#__PURE__*/_react.default.createElement(AudioPlayer, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         tonal: true,
         color: "primary",
-        src: media.url || media.urlSmall,
+        src: media_1.url || media_1.urlSmall,
         size: size
-      }, media, AudioProps, item === null || item === void 0 ? void 0 : item.props, {
+      }, media_1, AudioProps, item_2 === null || item_2 === void 0 ? void 0 : item_2.props, {
         fullWidth: true,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-audio'], VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className, item === null || item === void 0 || (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.className, classes.item, classes.audio])
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-audio'], VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className, item_2 === null || item_2 === void 0 || (_item_2$props4 = item_2.props) === null || _item_2$props4 === void 0 ? void 0 : _item_2$props4.className, classes.item, classes.audio])
       })), name);
     }
     if (version === 'video') {
-      var _item$props5;
+      var _item_2$props5;
       return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-video'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes[`videoWrapper_size_${size}`]])
       }), /*#__PURE__*/_react.default.createElement(VideoPlayer, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         tonal: true,
         color: "primary",
-        src: media.url || media.urlSmall,
+        src: media_1.url || media_1.urlSmall,
         size: size
-      }, media, VideoProps, item === null || item === void 0 ? void 0 : item.props, {
+      }, media_1, VideoProps, item_2 === null || item_2 === void 0 ? void 0 : item_2.props, {
         fullWidth: true,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-video'], VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className, item === null || item === void 0 || (_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.className, classes.item, classes.video])
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-video'], VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className, item_2 === null || item_2 === void 0 || (_item_2$props5 = item_2.props) === null || _item_2$props5 === void 0 ? void 0 : _item_2$props5.className, classes.item, classes.video])
       })), name);
     }
     if (version === 'other') {
-      var _item$props6;
+      var _item_2$props6;
       return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-other'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes[`otherWrapper_size_${size}`]])
       }), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index
-      }, OtherProps, item === null || item === void 0 ? void 0 : item.props, {
+        key: index_1
+      }, OtherProps, item_2 === null || item_2 === void 0 ? void 0 : item_2.props, {
         align: "center",
         justify: "center",
-        onClick: () => onOpenMedia(media),
+        onClick: () => onOpenMedia(media_1),
         fullWidth: true,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-other'], OtherProps === null || OtherProps === void 0 ? void 0 : OtherProps.className, item === null || item === void 0 || (_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.className, classes.item, classes.other, classes[`other_size_${size}`]])
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-other'], OtherProps === null || OtherProps === void 0 ? void 0 : OtherProps.className, item_2 === null || item_2 === void 0 || (_item_2$props6 = item_2.props) === null || _item_2$props6 === void 0 ? void 0 : _item_2$props6.className, classes.item, classes.other, classes[`other_size_${size}`]])
       }), /*#__PURE__*/_react.default.createElement(Interaction, null), /*#__PURE__*/_react.default.createElement(IconDocument, {
         size: size === 'large' ? 44 : size === 'regular' ? 34 : 24
       })), name);
     }
     return null;
   };
-  const usable = show.filter(item => {
-    var _items$item;
-    return !!((_items$item = items[item]) !== null && _items$item !== void 0 && _items$item.length) && !!items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)).filter(Boolean).length;
+  const usable = show.filter(item_3 => {
+    var _items$item_;
+    return !!((_items$item_ = items[item_3]) !== null && _items$item_ !== void 0 && _items$item_.length) && !!items[item_3].map((itemMedia, indexItemMedia) => getItem(item_3, itemMedia, indexItemMedia)).filter(Boolean).length;
   });
   if (!(usable !== null && usable !== void 0 && usable.length)) return null;
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     gap: size === 'large' ? 3 : size === 'regular' ? 2 : 1.5,
     fullWidth: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-root', `onesy-Medias-size-${size}`], className, classes.root])
-  }, other), usable.map(item => /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    key: item,
+  }, other), usable.map(item_5 => /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    key: item_5,
     gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1,
-    direction: item === 'embed' ? 'column' : 'row',
-    align: item === 'embed' ? 'center' : 'flex-start',
-    justify: item === 'embed' ? 'center' : 'flex-start',
+    direction: item_5 === 'embed' ? 'column' : 'row',
+    align: item_5 === 'embed' ? 'center' : 'flex-start',
+    justify: item_5 === 'embed' ? 'center' : 'flex-start',
     fullWidth: true
-  }, ItemsProps, item === 'embed' && EmbedItemsProps, item === 'image' && ImageItemsProps, item === 'audio' && AudioItemsProps, item === 'video' && VideoItemsProps, item === 'other' && OtherItemsProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-items', `onesy-Medias-items-${item}`], ItemsProps === null || ItemsProps === void 0 ? void 0 : ItemsProps.className, item === 'embed' && (EmbedItemsProps === null || EmbedItemsProps === void 0 ? void 0 : EmbedItemsProps.className), item === 'image' && (ImageItemsProps === null || ImageItemsProps === void 0 ? void 0 : ImageItemsProps.className), item === 'audio' && (AudioItemsProps === null || AudioItemsProps === void 0 ? void 0 : AudioItemsProps.className), item === 'video' && (VideoItemsProps === null || VideoItemsProps === void 0 ? void 0 : VideoItemsProps.className), item === 'other' && (OtherItemsProps === null || OtherItemsProps === void 0 ? void 0 : OtherItemsProps.className), classes.items])
-  }), items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)))), refs.root.current && imageGallery && !!((_items$image = items.image) !== null && _items$image !== void 0 && _items$image.length) && /*#__PURE__*/_react.default.createElement(Portal, {
+  }, ItemsProps, item_5 === 'embed' && EmbedItemsProps, item_5 === 'image' && ImageItemsProps, item_5 === 'audio' && AudioItemsProps, item_5 === 'video' && VideoItemsProps, item_5 === 'other' && OtherItemsProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-items', `onesy-Medias-items-${item_5}`], ItemsProps === null || ItemsProps === void 0 ? void 0 : ItemsProps.className, item_5 === 'embed' && (EmbedItemsProps === null || EmbedItemsProps === void 0 ? void 0 : EmbedItemsProps.className), item_5 === 'image' && (ImageItemsProps === null || ImageItemsProps === void 0 ? void 0 : ImageItemsProps.className), item_5 === 'audio' && (AudioItemsProps === null || AudioItemsProps === void 0 ? void 0 : AudioItemsProps.className), item_5 === 'video' && (VideoItemsProps === null || VideoItemsProps === void 0 ? void 0 : VideoItemsProps.className), item_5 === 'other' && (OtherItemsProps === null || OtherItemsProps === void 0 ? void 0 : OtherItemsProps.className), classes.items])
+  }), items[item_5].map((itemMedia_0, indexItemMedia_0) => getItem(item_5, itemMedia_0, indexItemMedia_0)))), refs.root.current && imageGallery && !!((_items$image = items.image) !== null && _items$image !== void 0 && _items$image.length) && /*#__PURE__*/_react.default.createElement(Portal, {
     element: (_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 || (_refs$root$current = _refs$root$current.ownerDocument) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.body
   }, /*#__PURE__*/_react.default.createElement(ImageGallery, {
     open: !!open,
     onClose: onClose,
     value: open === null || open === void 0 ? void 0 : open.index,
-    items: items.image.map(item => _objectSpread(_objectSpread({}, item.value), {}, {
-      url: item.value.url || item.value.urlSmall,
-      urlSmall: item.value.urlSmall || item.value.url
+    items: items.image.map(item_6 => _objectSpread(_objectSpread({}, item_6.value), {}, {
+      url: item_6.value.url || item_6.value.urlSmall,
+      urlSmall: item_6.value.urlSmall || item_6.value.url
     }))
   })));
 });

package/Menu/Menu.d.ts

@@ -7,7 +7,7 @@ export declare const MENUS: {
     add: (value: any) => void;
     remove: (value: any) => void;
 };
-export type IMenu = Omit<ITooltip, 'name' | 'label'> & {
+export declare type IMenu = Omit<ITooltip, 'name' | 'label'> & {
     open?: boolean;
     openDefault?: boolean;
     name?: ((method: (item: any, index: number) => any) => any) | IElement;