@onesy/ui-react
Version:
UI for React
418 lines (415 loc) • 23.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialDraftW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDraftW100"));
var _Link = _interopRequireDefault(require("../Link"));
var _Type = _interopRequireDefault(require("../Type"));
var _Interaction = _interopRequireDefault(require("../Interaction"));
var _Line = _interopRequireDefault(require("../Line/Line"));
var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer"));
var _Portal = _interopRequireDefault(require("../Portal"));
var _ImageGallery = _interopRequireDefault(require("../ImageGallery"));
var _utils2 = require("../utils");
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 => ({
root: {},
items: {
maxWidth: '100%',
padding: theme.methods.space.value(0.5, 'px'),
overflow: 'auto hidden'
},
item: {},
wrapper: {
position: 'relative',
flex: '0 0 auto'
},
wrapper_image: {
transition: theme.methods.transitions.make('transform'),
'&:active': {
transform: 'scale(0.94)'
}
},
wrapper_other: {
transition: theme.methods.transitions.make('transform'),
'&:active': {
transform: 'scale(0.94)'
}
},
name: {
wordBreak: 'break-word'
},
image: {
position: 'relative',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
aspectRatio: '16 / 9'
},
imageWrapper_size_small: {
width: '174px'
},
imageWrapper_size_regular: {
width: '214px'
},
imageWrapper_size_large: {
width: '254px'
},
image_size_small: {
borderRadius: theme.methods.shape.radius.value(1)
},
image_size_regular: {
borderRadius: theme.methods.shape.radius.value(2)
},
image_size_large: {
borderRadius: theme.methods.shape.radius.value(3)
},
audioWrapper_size_small: {
width: '324px'
},
audioWrapper_size_regular: {
width: '340px'
},
audioWrapper_size_large: {
width: '440px'
},
videoWrapper_size_small: {
width: '324px'
},
videoWrapper_size_regular: {
width: '340px'
},
videoWrapper_size_large: {
width: '440px'
},
other: {
position: 'relative',
aspectRatio: '3 / 4',
cursor: 'pointer',
userSelect: 'none',
background: theme.palette.background.secondary.tertiary,
boxShadow: theme.shadows.values.default[1]
},
otherWrapper_size_small: {
width: '74px'
},
otherWrapper_size_regular: {
width: '94px'
},
otherWrapper_size_large: {
width: '114px'
},
other_size_small: {
borderRadius: theme.methods.shape.radius.value(1)
},
other_size_regular: {
borderRadius: theme.methods.shape.radius.value(2)
},
other_size_large: {
borderRadius: theme.methods.shape.radius.value(3)
},
externalLinks: {
overflow: 'auto hidden'
},
aspectRatioYoutube: {
aspectRatio: '16 / 9',
width: '100%',
maxWidth: '750px'
},
aspectRatioVimeo: {
aspectRatio: '16 / 9',
width: '440px'
},
aspectRatioInstagram: {
aspectRatio: '3 / 5.6',
width: '340px'
},
aspectRatioTiktok: {
aspectRatio: '3 / 6.84',
width: '324px'
},
customEmbed: {
maxWidth: '750px'
}
}), {
name: 'onesy-Medias'
});
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;
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 {
ref,
size = 'regular',
values: values_ = [],
imageGallery = true,
show = ['embed', 'image', 'video', 'audio', 'other'],
noName = true,
IconDocument = _IconMaterialDraftW.default,
NameProps,
WrapperProps,
EmbedProps,
ImageProps,
AudioProps,
VideoProps,
OtherProps,
ItemsProps,
EmbedItemsProps = {
fullWidth: true
},
ImageItemsProps,
AudioItemsProps,
VideoItemsProps,
OtherItemsProps,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [open, setOpen] = _react.default.useState();
const refs = {
root: _react.default.useRef(undefined)
};
const values = (0, _utils.is)('array', values_) ? values_ : [values_];
const onOpen = index => {
setOpen({
index
});
};
const onClose = () => {
setOpen(null);
};
const onOpenMedia = media => {
window.open(media.url || media.urlSmall, 'blank_');
};
const items = _react.default.useMemo(() => {
const items_ = {
image: [],
audio: [],
video: [],
other: [],
embed: []
};
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 = (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_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');
// predefined
if (isPlatform) {
var _url$pathname, _url;
let url;
try {
url = new URL(item_1.urlEmbed);
} catch (error) {
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_1.urlEmbed.includes('youtu.be')) {
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",
allowFullScreen: true,
className: (0, _styleReact.classNames)([otherProps === null || otherProps === void 0 ? void 0 : otherProps.className, classes.aspectRatioYoutube])
}));
}
if (item_1.urlEmbed.includes('instagram.com')) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
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_1.urlEmbed.includes('tiktok.com')) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({}, otherProps), {}, {
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_1.urlEmbed.includes('vimeo.com')) {
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__*/(0, _jsxRuntime.jsx)(Link, _objectSpread(_objectSpread({}, otherProps), {}, {
href: item_1 === null || item_1 === void 0 ? void 0 : item_1.urlEmbed,
target: "blank",
children: item_1.name || item_1.urlEmbed
}));
}
// custom embed code
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: {
__html: urlEmbed
}
}));
};
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__*/(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]),
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__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 1
}, 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}`]]),
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__*/(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}`]]),
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__*/(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}`]]),
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__*/(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}`]]),
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;
};
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__*/(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;
}
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), {}, {
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;