@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Masonry/Masonry.js

@@ -19,8 +19,8 @@ const useStyle = styleMethod(theme => ({
 });
 const Masonry = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMasonry?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMasonry?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
       gap: gap_,
       columns: columns_,
@@ -46,13 +46,13 @@ const Masonry = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [gap_, columns_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [gap_, columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -119,8 +119,8 @@ const Masonry = /*#__PURE__*/React.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
@@ -129,11 +129,11 @@ const Masonry = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (refs.init.current !== 'animated') setInit(true);
     }
   };
-  const method = React.useCallback(update, []);
+  const method = update;
   React.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();
@@ -151,11 +151,11 @@ const Masonry = /*#__PURE__*/React.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.createElement(Line, _extends({
-      ref: item => {
+      ref: item_1 => {
         if (ref) {
-          if (is('function', ref)) ref(item);else ref.current = item;
+          if (is('function', ref)) ref(item_1);else ref.current = item_1;
         }
-        refs.root.current = item;
+        refs.root.current = item_1;
       },
       gap: gap,
       direction: "row",
@@ -166,17 +166,17 @@ const Masonry = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: _objectSpread(_objectSpread({}, style), {}, {
         height: 'auto'
       }, NoMasonryProps?.style)
-    }, other), children.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-      key: index,
-      style: _objectSpread(_objectSpread({}, styles.item), item.props.style)
+    }, other), children.map((item_2, index_0) => (/*#__PURE__*/React.cloneElement(item_2, {
+      key: index_0,
+      style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
     }))));
   }
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     gap: gap,
     wrap: "wrap",
@@ -186,15 +186,15 @@ const Masonry = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     className: classNames([staticClassName('Masonry', theme) && ['onesy-Masonry-root'], className, classes.root]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), React.Children.toArray(children).map((item, index) => (/*#__PURE__*/React.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.createElement("div", {
-    key: index,
+  }, other), React.Children.toArray(children).map((item_4, index_1) => (/*#__PURE__*/React.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.createElement("div", {
+    key: index_2,
     className: classNames([staticClassName('Masonry', theme) && ['onesy-Masonry-line-break']]),
     style: {
       flex: '1 1 100%',
-      order: index + 1
+      order: index_2 + 1
     }
   })));
 });

package/esm/Medias/Medias.js

@@ -142,15 +142,15 @@ const useStyle = styleMethod(theme => ({
 const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMedias?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Link = React.useMemo(() => theme?.elements?.Link || LinkElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const AudioPlayer = React.useMemo(() => theme?.elements?.AudioPlayer || AudioPlayerElement, [theme]);
-  const VideoPlayer = React.useMemo(() => theme?.elements?.VideoPlayer || VideoPlayerElement, [theme]);
-  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [theme]);
-  const ImageGallery = React.useMemo(() => theme?.elements?.ImageGallery || ImageGalleryElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMedias?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Link = theme?.elements?.Link || LinkElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const AudioPlayer = theme?.elements?.AudioPlayer || AudioPlayerElement;
+  const VideoPlayer = theme?.elements?.VideoPlayer || VideoPlayerElement;
+  const Portal = theme?.elements?.Portal || PortalElement;
+  const ImageGallery = theme?.elements?.ImageGallery || ImageGalleryElement;
   const {
       size = 'regular',
       values: values_ = [],
@@ -185,17 +185,17 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
     root: React.useRef(undefined)
   };
   const values = is('array', values_) ? values_ : [values_];
-  const onOpen = React.useCallback(index => {
+  const onOpen = index => {
     setOpen({
       index
     });
-  }, []);
-  const onClose = React.useCallback(() => {
+  };
+  const onClose = () => {
     setOpen(null);
-  }, []);
-  const onOpenMedia = React.useCallback(media => {
+  };
+  const onOpenMedia = media => {
     window.open(media.url || media.urlSmall, 'blank_');
-  }, []);
+  };
   const items = React.useMemo(() => {
     const items_ = {
       image: [],
@@ -204,19 +204,19 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
       other: [],
       embed: []
     };
-    values.filter(item => item?.value && !!Object.keys(item.value).length).forEach(item => {
-      const media = item.value;
-      if (media) {
-        if (media.urlEmbed !== undefined) items_.embed.push(item);else if (media.mime?.startsWith('image')) items_.image.push(item);else if (media.mime?.startsWith('audio')) items_.audio.push(item);else if (media.mime?.startsWith('video')) items_.video.push(item);else items_.other.push(item);
+    values.filter(item => item?.value && !!Object.keys(item.value).length).forEach(item_0 => {
+      const media_0 = item_0.value;
+      if (media_0) {
+        if (media_0.urlEmbed !== undefined) items_.embed.push(item_0);else if (media_0.mime?.startsWith('image')) items_.image.push(item_0);else if (media_0.mime?.startsWith('audio')) items_.audio.push(item_0);else if (media_0.mime?.startsWith('video')) items_.video.push(item_0);else items_.other.push(item_0);
       }
     });
     return items_;
   }, [values]);
-  const getLink = React.useCallback((item, index) => {
-    const urlEmbed = item?.urlEmbed;
+  const getLink = (item_1, index_0) => {
+    const urlEmbed = 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');
@@ -225,50 +225,50 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (isPlatform) {
       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?.split('/').filter(Boolean).slice(-1)[0];
       if (!url?.hostname || !id) return null;
-      if (item.urlEmbed.includes('youtu.be')) {
+      if (item_1.urlEmbed.includes('youtu.be')) {
         return /*#__PURE__*/React.createElement("iframe", _extends({}, 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: classNames([otherProps?.className, classes.aspectRatioYoutube])
         }));
       }
-      if (item.urlEmbed.includes('instagram.com')) {
+      if (item_1.urlEmbed.includes('instagram.com')) {
         return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://www.instagram.com/reel/${id}/embed`,
           allowFullScreen: true,
           className: classNames([otherProps?.className, classes.aspectRatioInstagram])
         }));
       }
-      if (item.urlEmbed.includes('tiktok.com')) {
+      if (item_1.urlEmbed.includes('tiktok.com')) {
         return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://www.tiktok.com/embed/v2/${id}`,
           allowFullScreen: true,
           className: classNames([otherProps?.className, classes.aspectRatioTiktok])
         }));
       }
-      if (item.urlEmbed.includes('vimeo.com')) {
+      if (item_1.urlEmbed.includes('vimeo.com')) {
         return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
-          title: item.name || '',
+          title: item_1.name || '',
           src: `https://player.vimeo.com/video/${id}`,
           allowFullScreen: true,
           className: classNames([otherProps?.className, classes.aspectRatioVimeo])
         }));
       }
       return /*#__PURE__*/React.createElement(Link, _extends({}, otherProps, {
-        href: item?.urlEmbed,
+        href: item_1?.urlEmbed,
         target: "blank"
-      }), item.name || item.urlEmbed);
+      }), item_1.name || item_1.urlEmbed);
     }
 
     // custom embed code
@@ -279,118 +279,118 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
         __html: urlEmbed
       }
     }));
-  }, [EmbedProps]);
-  const getItem = (version, item, index) => {
-    const media = item.value;
-    const name = (item?.props?.name || !noName) && /*#__PURE__*/React.createElement(Type, _extends({
+  };
+  const getItem = (version, item_2, index_1) => {
+    const media_1 = item_2.value;
+    const name = (item_2?.props?.name || !noName) && /*#__PURE__*/React.createElement(Type, _extends({
       version: size === 'large' ? 'l2' : size === 'regular' ? 'l3' : 'l3'
     }, NameProps, {
       className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-name'], NameProps?.className, classes.name])
-    }), media?.name || l('No name'));
+    }), media_1?.name || l('No name'));
     if (version === 'embed') {
-      return getLink(media, index);
+      return getLink(media_1, index_1);
     }
     if (version === 'image') {
       return /*#__PURE__*/React.createElement(Line, _extends({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
-        onClick: () => imageGallery && onOpen(index),
+        onClick: () => imageGallery && onOpen(index_1),
         className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-image'], WrapperProps?.className, classes.wrapper, classes.wrapper_image, classes[`imageWrapper_size_${size}`]])
       }), /*#__PURE__*/React.createElement(Line, _extends({
-        key: index
-      }, ImageProps, item?.props, {
+        key: index_1
+      }, ImageProps, item_2?.props, {
         fullWidth: true,
-        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-image'], ImageProps?.className, item?.props?.className, classes.item, classes.image, classes[`image_size_${size}`]]),
+        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-image'], ImageProps?.className, item_2?.props?.className, classes.item, classes.image, classes[`image_size_${size}`]]),
         style: _objectSpread({
-          backgroundImage: `url(${media.urlSmall || media.url})`
-        }, item?.props?.style)
+          backgroundImage: `url(${media_1.urlSmall || media_1.url})`
+        }, item_2?.props?.style)
       }), /*#__PURE__*/React.createElement(Interaction, null)), name);
     }
     if (version === 'audio') {
       return /*#__PURE__*/React.createElement(Line, _extends({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-audio'], WrapperProps?.className, classes.wrapper, classes[`audioWrapper_size_${size}`]])
       }), /*#__PURE__*/React.createElement(AudioPlayer, _extends({
-        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?.props, {
+      }, media_1, AudioProps, item_2?.props, {
         fullWidth: true,
-        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-audio'], VideoProps?.className, item?.props?.className, classes.item, classes.audio])
+        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-audio'], VideoProps?.className, item_2?.props?.className, classes.item, classes.audio])
       })), name);
     }
     if (version === 'video') {
       return /*#__PURE__*/React.createElement(Line, _extends({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-video'], WrapperProps?.className, classes.wrapper, classes[`videoWrapper_size_${size}`]])
       }), /*#__PURE__*/React.createElement(VideoPlayer, _extends({
-        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?.props, {
+      }, media_1, VideoProps, item_2?.props, {
         fullWidth: true,
-        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-video'], VideoProps?.className, item?.props?.className, classes.item, classes.video])
+        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-video'], VideoProps?.className, item_2?.props?.className, classes.item, classes.video])
       })), name);
     }
     if (version === 'other') {
       return /*#__PURE__*/React.createElement(Line, _extends({
-        key: index,
+        key: index_1,
         gap: 1
       }, WrapperProps, {
         className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-wrapper', 'onesy-Medias-wrapper-other'], WrapperProps?.className, classes.wrapper, classes[`otherWrapper_size_${size}`]])
       }), /*#__PURE__*/React.createElement(Line, _extends({
-        key: index
-      }, OtherProps, item?.props, {
+        key: index_1
+      }, OtherProps, item_2?.props, {
         align: "center",
         justify: "center",
-        onClick: () => onOpenMedia(media),
+        onClick: () => onOpenMedia(media_1),
         fullWidth: true,
-        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-other'], OtherProps?.className, item?.props?.className, classes.item, classes.other, classes[`other_size_${size}`]])
+        className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-item', 'onesy-Medias-item-other'], OtherProps?.className, item_2?.props?.className, classes.item, classes.other, classes[`other_size_${size}`]])
       }), /*#__PURE__*/React.createElement(Interaction, null), /*#__PURE__*/React.createElement(IconDocument, {
         size: size === 'large' ? 44 : size === 'regular' ? 34 : 24
       })), name);
     }
     return null;
   };
-  const usable = show.filter(item => !!items[item]?.length && !!items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)).filter(Boolean).length);
+  const usable = show.filter(item_3 => !!items[item_3]?.length && !!items[item_3].map((itemMedia, indexItemMedia) => getItem(item_3, itemMedia, indexItemMedia)).filter(Boolean).length);
   if (!usable?.length) return null;
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (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: classNames([staticClassName('Medias', theme) && ['onesy-Medias-root', `onesy-Medias-size-${size}`], className, classes.root])
-  }, other), usable.map(item => /*#__PURE__*/React.createElement(Line, _extends({
-    key: item,
+  }, other), usable.map(item_5 => /*#__PURE__*/React.createElement(Line, _extends({
+    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: classNames([staticClassName('Medias', theme) && ['onesy-Medias-items', `onesy-Medias-items-${item}`], ItemsProps?.className, item === 'embed' && EmbedItemsProps?.className, item === 'image' && ImageItemsProps?.className, item === 'audio' && AudioItemsProps?.className, item === 'video' && VideoItemsProps?.className, item === 'other' && OtherItemsProps?.className, classes.items])
-  }), items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)))), refs.root.current && imageGallery && !!items.image?.length && /*#__PURE__*/React.createElement(Portal, {
+  }, ItemsProps, item_5 === 'embed' && EmbedItemsProps, item_5 === 'image' && ImageItemsProps, item_5 === 'audio' && AudioItemsProps, item_5 === 'video' && VideoItemsProps, item_5 === 'other' && OtherItemsProps, {
+    className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-items', `onesy-Medias-items-${item_5}`], ItemsProps?.className, item_5 === 'embed' && EmbedItemsProps?.className, item_5 === 'image' && ImageItemsProps?.className, item_5 === 'audio' && AudioItemsProps?.className, item_5 === 'video' && VideoItemsProps?.className, item_5 === 'other' && 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?.length && /*#__PURE__*/React.createElement(Portal, {
     element: refs.root.current?.ownerDocument?.body
   }, /*#__PURE__*/React.createElement(ImageGallery, {
     open: !!open,
     onClose: onClose,
     value: 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/esm/Menu/Menu.js

@@ -32,10 +32,10 @@ export const MENUS = {
 };
 const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenu?.props?.default), props_), [props_]);
-  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenu?.props?.default), props_);
+  const List = theme?.elements?.List || ListElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
   const {
       open: open_,
       openDefault,
@@ -86,28 +86,28 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (open) {
       MENUS.add(refs.id.current);
       if (autoSelect) {
-        const values = React.Children.toArray(refs.props.current.children).map((item, index) => (item.props?.button || item.props?.href) && !item.props?.disabled ? index : undefined).filter(item => is('number', item));
+        const values = React.Children.toArray(refs.props.current.children).map((item, index) => (item.props?.button || item.props?.href) && !item.props?.disabled ? index : undefined).filter(item_0 => is('number', item_0));
         setPreselected(values[0]);
       }
     }
     const onKeyDown = event => {
       if (refs.props.current.open && MENUS.priority(refs.id.current)) {
-        const values = React.Children.toArray(refs.props.current.children).map((item, index) => (item.props?.button || item.props?.href) && !item.props?.disabled ? index : undefined).filter(item => is('number', item));
+        const values_0 = React.Children.toArray(refs.props.current.children).map((item_1, index_0) => (item_1.props?.button || item_1.props?.href) && !item_1.props?.disabled ? index_0 : undefined).filter(item_2 => is('number', item_2));
         switch (event.key) {
           case 'ArrowUp':
             event.preventDefault();
             return setPreselected(() => {
-              let value = refs.preselected.current;
-              const index = values.findIndex(item_ => item_ === value);
-              if (index === -1) value = values[values.length - 1];else if (index > 0) value = values[index - 1];else if (refs.props.current.resetKeyboardNavigation) value = values[values.length - 1];
-              return value;
+              let value_0 = refs.preselected.current;
+              const index_2 = values_0.findIndex(item__0 => item__0 === value_0);
+              if (index_2 === -1) value_0 = values_0[values_0.length - 1];else if (index_2 > 0) value_0 = values_0[index_2 - 1];else if (refs.props.current.resetKeyboardNavigation) value_0 = values_0[values_0.length - 1];
+              return value_0;
             });
           case 'ArrowDown':
             event.preventDefault();
             return setPreselected(() => {
               let value = refs.preselected.current;
-              const index = values.findIndex(item_ => item_ === value);
-              if (index === -1) value = values[0];else if (index < values.length - 1) value = values[index + 1];else if (refs.props.current.resetKeyboardNavigation) value = values[0];
+              const index_1 = values_0.findIndex(item_ => item_ === value);
+              if (index_1 === -1) value = values_0[0];else if (index_1 < values_0.length - 1) value = values_0[index_1 + 1];else if (refs.props.current.resetKeyboardNavigation) value = values_0[0];
               return value;
             });
           case 'Escape':
@@ -115,10 +115,10 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
             return onClose();
           case 'Home':
             event.preventDefault();
-            return setPreselected(values[0]);
+            return setPreselected(values_0[0]);
           case 'End':
             event.preventDefault();
-            return setPreselected(values[values.length - 1]);
+            return setPreselected(values_0[values_0.length - 1]);
           default:
             break;
         }
@@ -134,8 +134,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     if (open) {
       if (autoSelect) {
-        const values = React.Children.toArray(refs.props.current.children).map((item, index) => (item.props?.button || item.props?.href) && !item.props?.disabled ? index : undefined).filter(item => is('number', item));
-        setPreselected(values[0]);
+        const values_1 = React.Children.toArray(refs.props.current.children).map((item_3, index_3) => (item_3.props?.button || item_3.props?.href) && !item_3.props?.disabled ? index_3 : undefined).filter(item_4 => is('number', item_4));
+        setPreselected(values_1[0]);
       }
     }
     setTimeout(() => {
@@ -143,17 +143,17 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
     return () => {
       if (include) {
-        const index = include.findIndex(item => item === refs.root.current);
-        if (index > -1) include.splice(index, 1);
+        const index_4 = include.findIndex(item_5 => item_5 === refs.root.current);
+        if (index_4 > -1) include.splice(index_4, 1);
       }
     };
   }, [open]);
   React.useEffect(() => {
     if (open !== open_) setOpen(open_);
   }, [open_]);
-  const onMouseLeave = React.useCallback(() => {
+  const onMouseLeave = () => {
     setPreselected('');
-  }, []);
+  };
   const onOpen = () => {
     if (open_ === undefined) setOpen(true);
     if (is('function', onOpen_)) onOpen_();
@@ -161,8 +161,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onClose = () => {
     if (open_ === undefined) setOpen(false);
     if (refs.props.current.autoSelectOnBlur) {
-      const item = React.Children.toArray(refs.props.current.children)[refs.preselected.current];
-      if (item && is('function', refs.props.current.onSelect)) refs.props.current.onSelect(item.props?.value !== undefined ? item.props?.value : item.props?.primary);
+      const item_6 = React.Children.toArray(refs.props.current.children)[refs.preselected.current];
+      if (item_6 && is('function', refs.props.current.onSelect)) refs.props.current.onSelect(item_6.props?.value !== undefined ? item_6.props?.value : item_6.props?.primary);
     }
     setPreselected('');
     if (is('function', onClose_)) onClose_();
@@ -178,41 +178,41 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
     WrapperProps = _objectSpread(_objectSpread({}, WrapperProps), ClickListenerProps);
   }
   if (open) MENUS.add(id);else MENUS.remove(id);
-  const methodItem = (item, index) => _objectSpread({
-    key: item.key || index,
+  const methodItem = (item_7, index_5) => _objectSpread({
+    key: item_7.key || index_5,
     role: 'menuitem',
     menuId: id,
-    MenuProps: _objectSpread(_objectSpread({}, item.props?.MenuProps), {}, {
-      className: classNames([item.props?.MenuProps?.className, refs.menuClassName.current])
+    MenuProps: _objectSpread(_objectSpread({}, item_7.props?.MenuProps), {}, {
+      className: classNames([item_7.props?.MenuProps?.className, refs.menuClassName.current])
     }),
     onClose
-  }, (item.props?.button || item.props?.href) && !item.props.disabled ? {
+  }, (item_7.props?.button || item_7.props?.href) && !item_7.props.disabled ? {
     onMouseEnter: () => {
-      setPreselected(index);
+      setPreselected(index_5);
     },
     onMouseLeave: () => {
       setPreselected('');
     },
-    preselected: index === preselected,
-    onClick: event => {
-      if (is('function', item.props?.onClick)) item.props?.onClick(event);
-      if (item.props?.menuCloseOnClick) onClose();
+    preselected: index_5 === preselected,
+    onClick: event_0 => {
+      if (is('function', item_7.props?.onClick)) item_7.props?.onClick(event_0);
+      if (item_7.props?.menuCloseOnClick) onClose();
     },
-    onKeyDown: event => {
-      if (event.target === event.currentTarget && event.key === 'Enter') {
-        if (is('function', item.props?.onClick)) item.props?.onClick();
-        if (is('function', item.props?.onKeyDown)) item.props?.onKeyDown(event);
-        if (item.props?.menuCloseOnClick) onClose();
+    onKeyDown: event_1 => {
+      if (event_1.target === event_1.currentTarget && event_1.key === 'Enter') {
+        if (is('function', item_7.props?.onClick)) item_7.props?.onClick();
+        if (is('function', item_7.props?.onKeyDown)) item_7.props?.onKeyDown(event_1);
+        if (item_7.props?.menuCloseOnClick) onClose();
       }
     }
   } : {});
   const nameValue = name || label;
   return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    ref: item => {
+    ref: item_8 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_8);else ref.current = item_8;
       }
-      refs.root.current = item;
+      refs.root.current = item_8;
     },
     open: open,
     className: classNames([staticClassName('Menu', theme) && ['onesy-Menu-root', open && `onesy-Menu-open`], className, classes.root]),
@@ -226,7 +226,7 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
       role: "menu"
     }, ListProps, {
       className: classNames(['onesy-Menu-list', ListProps?.className, classes.list])
-    }), ListProps?.noChildrenTransform ? menuItems : React.Children.toArray(menuItems).map((item, index) => (/*#__PURE__*/React.cloneElement(item, methodItem(item, index))))),
+    }), ListProps?.noChildrenTransform ? menuItems : React.Children.toArray(menuItems).map((item_9, index_6) => (/*#__PURE__*/React.cloneElement(item_9, methodItem(item_9, index_6))))),
     click: true,
     arrow: arrow,
     hover: false,
@@ -241,11 +241,11 @@ const Menu = /*#__PURE__*/React.forwardRef((props_, ref) => {
       freezeScroll: false
     }, ModalProps)
   }, other), children && /*#__PURE__*/React.cloneElement(children, {
-    ref: item => {
+    ref: item_10 => {
       if (children.ref) {
-        if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
+        if (is('function', children.ref)) children.ref(item_10);else children.ref.current = item_10;
       }
-      refs.main.current = item;
+      refs.main.current = item_10;
     }
   })));
 });