@onesy/ui-react 1.0.172 → 1.0.174

package/Medias/Medias.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -21,7 +20,8 @@ var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer"));
 var _Portal = _interopRequireDefault(require("../Portal"));
 var _ImageGallery = _interopRequireDefault(require("../ImageGallery"));
 var _utils2 = require("../utils");
-const _excluded = ["size", "values", "imageGallery", "show", "noName", "IconDocument", "NameProps", "WrapperProps", "EmbedProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "ItemsProps", "EmbedItemsProps", "ImageItemsProps", "AudioItemsProps", "VideoItemsProps", "OtherItemsProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "size", "values", "imageGallery", "show", "noName", "IconDocument", "NameProps", "WrapperProps", "EmbedProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "ItemsProps", "EmbedItemsProps", "ImageItemsProps", "AudioItemsProps", "VideoItemsProps", "OtherItemsProps", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -146,7 +146,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Medias'
 });
-const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Medias = props_ => {
   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;
@@ -160,6 +160,7 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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 {
+      ref,
       size = 'regular',
       values: values_ = [],
       imageGallery = true,
@@ -243,7 +244,7 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       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_1.urlEmbed.includes('youtu.be')) {
-        return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
           title: item_1.name || '',
           src: `https://www.youtube.com/embed/${id}`,
           allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
@@ -252,7 +253,7 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }));
       }
       if (item_1.urlEmbed.includes('instagram.com')) {
-        return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
           title: item_1.name || '',
           src: `https://www.instagram.com/reel/${id}/embed`,
           allowFullScreen: true,
@@ -260,7 +261,7 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }));
       }
       if (item_1.urlEmbed.includes('tiktok.com')) {
-        return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
           title: item_1.name || '',
           src: `https://www.tiktok.com/embed/v2/${id}`,
           allowFullScreen: true,
@@ -268,21 +269,22 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }));
       }
       if (item_1.urlEmbed.includes('vimeo.com')) {
-        return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, otherProps, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
           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, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, _objectSpread(_objectSpread({}, otherProps), {}, {
         href: item_1 === null || item_1 === void 0 ? void 0 : item_1.urlEmbed,
-        target: "blank"
-      }), item_1.name || item_1.urlEmbed);
+        target: "blank",
+        children: item_1.name || item_1.urlEmbed
+      }));
     }
 
     // custom embed code
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({}, otherProps, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({}, otherProps), {}, {
       className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.customEmbed]),
       fullWidth: true,
       dangerouslySetInnerHTML: {
@@ -293,86 +295,83 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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)({
+    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__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
       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_1 === null || media_1 === void 0 ? void 0 : media_1.name) || l('No name'));
+    }, NameProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Medias', theme) && ['onesy-Medias-name'], NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.name]),
+      children: (media_1 === null || media_1 === void 0 ? void 0 : media_1.name) || l('No name')
+    }));
     if (version === 'embed') {
       return getLink(media_1, index_1);
     }
     if (version === 'image') {
       var _item_2$props2, _item_2$props3;
-      return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index_1,
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
         gap: 1
-      }, WrapperProps, {
+      }, WrapperProps), {}, {
         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_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_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_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);
+        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}`]]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread(_objectSpread({}, 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_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_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),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {})
+        }), index_1), name]
+      }), index_1);
     }
     if (version === 'audio') {
       var _item_2$props4;
-      return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index_1,
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
         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_1,
-        tonal: true,
-        color: "primary",
-        src: media_1.url || media_1.urlSmall,
-        size: size
-      }, 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_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);
+      }, 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}`]]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioPlayer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          tonal: true,
+          color: "primary",
+          src: media_1.url || media_1.urlSmall,
+          size: size
+        }, 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_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])
+        }), index_1), name]
+      }), index_1);
     }
     if (version === 'video') {
       var _item_2$props5;
-      return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index_1,
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
         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_1,
-        tonal: true,
-        color: "primary",
-        src: media_1.url || media_1.urlSmall,
-        size: size
-      }, 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_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);
+      }, 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}`]]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          tonal: true,
+          color: "primary",
+          src: media_1.url || media_1.urlSmall,
+          size: size
+        }, 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_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])
+        }), index_1), name]
+      }), index_1);
     }
     if (version === 'other') {
       var _item_2$props6;
-      return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-        key: index_1,
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
         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_1
-      }, OtherProps, item_2 === null || item_2 === void 0 ? void 0 : item_2.props, {
-        align: "center",
-        justify: "center",
-        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_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);
+      }, 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}`]]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({}, OtherProps), item_2 === null || item_2 === void 0 ? void 0 : item_2.props), {}, {
+          align: "center",
+          justify: "center",
+          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_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}`]]),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDocument, {
+            size: size === 'large' ? 44 : size === 'regular' ? 34 : 24
+          })]
+        }), index_1), name]
+      }), index_1);
     }
     return null;
   };
@@ -381,7 +380,7 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_4 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
@@ -391,26 +390,29 @@ const Medias = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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_5 => /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    key: item_5,
-    gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1,
-    direction: item_5 === 'embed' ? 'column' : 'row',
-    align: item_5 === 'embed' ? 'center' : 'flex-start',
-    justify: item_5 === 'embed' ? 'center' : 'flex-start',
-    fullWidth: true
-  }, 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_6 => _objectSpread(_objectSpread({}, item_6.value), {}, {
-      url: item_6.value.url || item_6.value.urlSmall,
-      urlSmall: item_6.value.urlSmall || item_6.value.url
-    }))
-  })));
-});
+  }, other), {}, {
+    children: [usable.map(item_5 => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1,
+      direction: item_5 === 'embed' ? 'column' : 'row',
+      align: item_5 === 'embed' ? 'center' : 'flex-start',
+      justify: item_5 === 'embed' ? 'center' : 'flex-start',
+      fullWidth: true
+    }, 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]),
+      children: items[item_5].map((itemMedia_0, indexItemMedia_0) => getItem(item_5, itemMedia_0, indexItemMedia_0))
+    }), item_5)), refs.root.current && imageGallery && !!((_items$image = items.image) !== null && _items$image !== void 0 && _items$image.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(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,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageGallery, {
+        open: !!open,
+        onClose: onClose,
+        value: open === null || open === void 0 ? void 0 : open.index,
+        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
+        }))
+      })
+    })]
+  }));
+};
 Medias.displayName = 'onesy-Medias';
 var _default = exports.default = Medias;

package/Menu/Menu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MENUS = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -15,7 +14,8 @@ var _List = _interopRequireDefault(require("../List"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _ClickListener = _interopRequireDefault(require("../ClickListener"));
 var _utils2 = require("../utils");
-const _excluded = ["open", "openDefault", "name", "label", "menuItems", "arrow", "anchor", "anchorElement", "autoSelect", "autoSelectOnBlur", "resetKeyboardNavigation", "closeOnClickAway", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onSelect", "onOpen", "onClose", "ListProps", "ModalProps", "WrapperProps", "ClickListenerProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "open", "openDefault", "name", "label", "menuItems", "arrow", "anchor", "anchorElement", "autoSelect", "autoSelectOnBlur", "resetKeyboardNavigation", "closeOnClickAway", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onSelect", "onOpen", "onClose", "ListProps", "ModalProps", "WrapperProps", "ClickListenerProps", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -37,7 +37,7 @@ const MENUS = exports.MENUS = {
     MENUS.open = MENUS.open.filter(Boolean);
   }
 };
-const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Menu = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyMenu) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -45,6 +45,7 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
   const ClickListener = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.ClickListener) || _ClickListener.default;
   const {
+      ref,
       open: open_,
       openDefault,
       name,
@@ -231,47 +232,52 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     } : {});
   };
   const nameValue = name || label;
-  return /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    ref: item_8 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_8);else ref.current = item_8;
-      }
-      refs.root.current = item_8;
-    },
-    open: open,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Menu', theme) && ['onesy-Menu-root', open && `onesy-Menu-open`], className, classes.root]),
-    onMouseLeave: onMouseLeave,
-    anchor: anchor,
-    anchorElement: anchorElement,
-    label: nameValue ? (0, _utils.is)('function', nameValue) ? nameValue(methodItem) : nameValue : menuItems && /*#__PURE__*/_react.default.createElement(List, (0, _extends2.default)({
-      menu: true,
-      menuOpen: open,
-      include: refs.include.current,
-      role: "menu"
-    }, ListProps, {
-      className: (0, _styleReact.classNames)(['onesy-Menu-list', ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list])
-    }), ListProps !== null && ListProps !== void 0 && ListProps.noChildrenTransform ? menuItems : _react.default.Children.toArray(menuItems).map((item_9, index_6) => (/*#__PURE__*/_react.default.cloneElement(item_9, methodItem(item_9, index_6))))),
-    click: true,
-    arrow: arrow,
-    hover: false,
-    focus: false,
-    longPress: false,
-    noMargin: !arrow,
-    onOpen: onOpen,
-    onClose: onClose,
-    ModalProps: _objectSpread({
-      background: true,
-      backgroundInvisible: true,
-      freezeScroll: false
-    }, ModalProps)
-  }, other), children && /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item_10 => {
-      if (children.ref) {
-        if ((0, _utils.is)('function', children.ref)) children.ref(item_10);else children.ref.current = item_10;
-      }
-      refs.main.current = item_10;
-    }
-  })));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+      ref: item_8 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_8);else ref.current = item_8;
+        }
+        refs.root.current = item_8;
+      },
+      open: open,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Menu', theme) && ['onesy-Menu-root', open && `onesy-Menu-open`], className, classes.root]),
+      onMouseLeave: onMouseLeave,
+      anchor: anchor,
+      anchorElement: anchorElement,
+      label: nameValue ? (0, _utils.is)('function', nameValue) ? nameValue(methodItem) : nameValue : menuItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, _objectSpread(_objectSpread({
+        menu: true,
+        menuOpen: open,
+        include: refs.include.current,
+        role: "menu"
+      }, ListProps), {}, {
+        className: (0, _styleReact.classNames)(['onesy-Menu-list', ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list]),
+        children: ListProps !== null && ListProps !== void 0 && ListProps.noChildrenTransform ? menuItems : _react.default.Children.toArray(menuItems).map((item_9, index_6) => (/*#__PURE__*/_react.default.cloneElement(item_9, methodItem(item_9, index_6))))
+      })),
+      click: true,
+      arrow: arrow,
+      hover: false,
+      focus: false,
+      longPress: false,
+      noMargin: !arrow,
+      onOpen: onOpen,
+      onClose: onClose,
+      ModalProps: _objectSpread({
+        background: true,
+        backgroundInvisible: true,
+        freezeScroll: false
+      }, ModalProps)
+    }, other), {}, {
+      children: children && /*#__PURE__*/_react.default.cloneElement(children, {
+        ref: item_10 => {
+          if (children.ref) {
+            if ((0, _utils.is)('function', children.ref)) children.ref(item_10);else children.ref.current = item_10;
+          }
+          refs.main.current = item_10;
+        }
+      })
+    }))
+  }));
+};
 Menu.displayName = 'onesy-Menu';
 var _default = exports.default = Menu;