@onesy/ui-react 1.0.0

package/Markdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Markdown';

package/Markdown/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Markdown_1 = require("./Markdown");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Markdown_1).default; } });

package/Markdown/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Markdown/index.js",
+  "types": "./index.d.ts"
+}

package/Masonry/Masonry.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IValueBreakpoints } from '../types';
+export interface IMasonry extends Omit<ILine, 'gap'> {
+    gap?: number | Partial<Record<IValueBreakpoints, number>>;
+    columns?: number | Partial<Record<IValueBreakpoints, number>>;
+    noMasonry?: boolean;
+    NoMasonryProps?: any;
+}
+declare const Masonry: React.FC<IMasonry>;
+export default Masonry;

package/Masonry/Masonry.js

@@ -0,0 +1,189 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line"));
+const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative'
+    }
+}), { name: 'onesy-Masonry' });
+const Masonry = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyMasonry) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const { gap: gap_, columns: columns_, className, style, noMasonry, NoMasonryProps, children: children_ } = props, other = __rest(props, ["gap", "columns", "className", "style", "noMasonry", "NoMasonryProps", "children"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        gap: react_1.default.useRef(undefined),
+        columns: react_1.default.useRef(undefined),
+        init: react_1.default.useRef(undefined),
+        useMasonry: react_1.default.useRef(undefined)
+    };
+    const keys = react_1.default.useMemo(() => {
+        const result = [];
+        const items = [gap_, columns_];
+        items.forEach(item => {
+            if ((0, utils_1.is)('object', item))
+                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+        });
+        return (0, utils_1.unique)(result);
+    }, [gap_, columns_]);
+    const breakpoints = {};
+    keys.forEach(key => {
+        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+    });
+    refs.init.current = init;
+    const styles = {
+        root: {},
+        item: {}
+    };
+    const gap = (0, utils_2.valueBreakpoints)(gap_, 2, breakpoints, theme) || 0;
+    const columns = (0, utils_2.valueBreakpoints)(columns_, { 400: 1, 500: 2, 700: 3, 1100: 4, 1400: 5, 1700: 6, 2000: 7, default: 4 }, breakpoints, theme);
+    refs.gap.current = gap;
+    refs.columns.current = columns;
+    const children = react_1.default.Children.toArray(children_);
+    let useMasonry = true;
+    if (columns === 1 || children.length < columns)
+        useMasonry = false;
+    if (noMasonry)
+        useMasonry = false;
+    refs.useMasonry.current = useMasonry;
+    const update = () => {
+        if (!refs.useMasonry.current) {
+            if (refs.root.current) {
+                refs.root.current.style.removeProperty('height');
+            }
+            return;
+        }
+        if (refs.root.current) {
+            // Get all children
+            const elements = Array.from(refs.root.current.children).slice(0, refs.columns.current > 1 ? -(refs.columns.current - 1) : undefined);
+            const width = refs.columns.current === 1 ? '100%' : `calc(${100 / refs.columns.current}% - ${(gap * theme.space.unit * (refs.columns.current - 1)) / refs.columns.current}px)`;
+            const columns__ = {};
+            const order = {};
+            for (let i = 1; i < refs.columns.current + 1; i++)
+                columns__[i] = 0;
+            // order them by adding to lowest available order value
+            let lowestColumn = 1;
+            let lowestValue = Number.MAX_SAFE_INTEGER;
+            let highestValue = Number.MIN_SAFE_INTEGER;
+            elements.forEach((element, index) => {
+                // Width
+                element.style.width = width;
+                // Update lowest column
+                lowestValue = Number.MAX_SAFE_INTEGER;
+                Object.keys(columns__).forEach(column => {
+                    if (columns__[column] < lowestValue) {
+                        lowestColumn = +column;
+                        lowestValue = columns__[column];
+                    }
+                });
+                const addition = columns__[lowestColumn] === 0 ? 0 : (refs.gap.current * theme.space.unit);
+                columns__[lowestColumn] += element.clientHeight + addition;
+                order[index] = lowestColumn;
+                // Order
+                element.style.order = String(lowestColumn);
+            });
+            // update height (biggest column height)
+            Object.keys(columns__).forEach(column => {
+                if (columns__[column] > highestValue)
+                    highestValue = columns__[column];
+            });
+            // Height
+            const height = highestValue + (gap * theme.space.unit);
+            refs.root.current.style.height = `${height}px`;
+            if (refs.init.current !== 'animated')
+                setInit(true);
+        }
+    };
+    const method = react_1.default.useCallback(update, []);
+    react_1.default.useEffect(() => {
+        setTimeout(update);
+        const observer = new ResizeObserver(method);
+        [refs.root.current, ...Array.from(refs.root.current.children)].forEach((item) => observer.observe(item));
+        return () => {
+            // Clean up
+            observer.disconnect();
+        };
+    }, []);
+    react_1.default.useEffect(method, [children.length, gap, columns]);
+    styles.item.margin = 0;
+    styles.root.gap = 'unset';
+    styles.root.rowGap = `${gap * theme.space.unit}px`;
+    styles.root.columnGap = `${(gap / 2) * theme.space.unit}px`;
+    if (!init) {
+        styles.root.position = 'fixed';
+        styles.root.visibility = 'hidden';
+    }
+    if (!useMasonry) {
+        styles.item.width = columns === 1 ? '100%' : `calc(${100 / columns}% - ${(gap * theme.space.unit * (columns - 1)) / columns}px)`;
+        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
+                if (ref) {
+                    if ((0, utils_1.is)('function', ref))
+                        ref(item);
+                    else
+                        ref.current = item;
+                }
+                refs.root.current = item;
+            }, gap: gap, direction: 'row', wrap: 'wrap', fullWidth: true }, NoMasonryProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('Masonry', theme) && [
+                    'onesy-Masonry-root',
+                    'onesy-Masonry-noMasonry'
+                ],
+                NoMasonryProps === null || NoMasonryProps === void 0 ? void 0 : NoMasonryProps.className,
+                className,
+                classes.root
+            ]), style: Object.assign(Object.assign(Object.assign({}, style), { height: 'auto' }), NoMasonryProps === null || NoMasonryProps === void 0 ? void 0 : NoMasonryProps.style) }, other, { children: children.map((item, index) => (react_1.default.cloneElement(item, {
+                key: index,
+                style: Object.assign(Object.assign({}, styles.item), item.props.style)
+            }))) })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, gap: gap, wrap: 'wrap', align: 'unset', justify: 'unset', direction: 'column', fullWidth: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Masonry', theme) && [
+                'onesy-Masonry-root'
+            ],
+            className,
+            classes.root
+        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [react_1.default.Children.toArray(children).map((item, index) => (react_1.default.cloneElement(item, {
+                key: index,
+                style: Object.assign(Object.assign({}, styles.item), item.props.style)
+            }))), columns > 1 && new Array(columns - 1).fill(true).map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Masonry', theme) && [
+                        'onesy-Masonry-line-break'
+                    ]
+                ]), style: {
+                    flex: '1 1 100%',
+                    order: index + 1
+                } }, index)))] })));
+});
+Masonry.displayName = 'onesy-Masonry';
+exports.default = Masonry;

package/Masonry/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Masonry';

package/Masonry/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Masonry_1 = require("./Masonry");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Masonry_1).default; } });

package/Masonry/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Masonry/index.js",
+  "types": "./index.d.ts"
+}

package/Medias/Medias.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IMediaObject, IPropsAny } from '../types';
+export interface IMediasItem {
+    value: IMediaObject;
+    props?: any;
+}
+export declare type IMediasMediaVersion = 'embed' | 'image' | 'audio' | 'video' | 'other';
+export interface IMedias extends ILine {
+    size?: 'small' | 'regular' | 'large';
+    values?: IMediasItem | IMediasItem[];
+    imageGallery?: boolean;
+    show?: IMediasMediaVersion[];
+    noName?: boolean;
+    IconDocument?: any;
+    NameProps?: IPropsAny;
+    WrapperProps?: IPropsAny;
+    EmbedProps?: IPropsAny;
+    ImageProps?: IPropsAny;
+    AudioProps?: IPropsAny;
+    VideoProps?: IPropsAny;
+    OtherProps?: IPropsAny;
+    ItemsProps?: IPropsAny;
+    EmbedItemsProps?: IPropsAny;
+    ImageItemsProps?: IPropsAny;
+    AudioItemsProps?: IPropsAny;
+    VideoItemsProps?: IPropsAny;
+    OtherItemsProps?: IPropsAny;
+}
+declare const Medias: React.FC<IMedias>;
+export default Medias;

package/Medias/Medias.js

@@ -0,0 +1,368 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialDraftW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialDraftW100"));
+const Link_1 = __importDefault(require("../Link"));
+const Type_1 = __importDefault(require("../Type"));
+const Interaction_1 = __importDefault(require("../Interaction"));
+const Line_1 = __importDefault(require("../Line/Line"));
+const AudioPlayer_1 = __importDefault(require("../AudioPlayer"));
+const VideoPlayer_1 = __importDefault(require("../VideoPlayer"));
+const Portal_1 = __importDefault(require("../Portal"));
+const ImageGallery_1 = __importDefault(require("../ImageGallery"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.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'
+    }
+}), { name: 'onesy-Medias' });
+const Medias = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyMedias) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Link = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Link) || Link_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
+    const AudioPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AudioPlayer) || AudioPlayer_1.default; }, [theme]);
+    const VideoPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.VideoPlayer) || VideoPlayer_1.default; }, [theme]);
+    const Portal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Portal) || Portal_1.default; }, [theme]);
+    const ImageGallery = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ImageGallery) || ImageGallery_1.default; }, [theme]);
+    const { size = 'regular', values: values_ = [], imageGallery = true, show = ['embed', 'image', 'video', 'audio', 'other'], noName = true, IconDocument = IconMaterialDraftW100_1.default, NameProps, WrapperProps, EmbedProps, ImageProps, AudioProps, VideoProps, OtherProps, ItemsProps, EmbedItemsProps = { fullWidth: true }, ImageItemsProps, AudioItemsProps, VideoItemsProps, OtherItemsProps, className, children } = props, other = __rest(props, ["size", "values", "imageGallery", "show", "noName", "IconDocument", "NameProps", "WrapperProps", "EmbedProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "ItemsProps", "EmbedItemsProps", "ImageItemsProps", "AudioItemsProps", "VideoItemsProps", "OtherItemsProps", "className", "children"]);
+    const { classes } = useStyle();
+    const [open, setOpen] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    const values = (0, utils_1.is)('array', values_) ? values_ : [values_];
+    const onOpen = react_1.default.useCallback((index) => {
+        setOpen({
+            index
+        });
+    }, []);
+    const onClose = react_1.default.useCallback(() => {
+        setOpen(null);
+    }, []);
+    const onOpenMedia = react_1.default.useCallback((media) => {
+        window.open(media.url || media.urlSmall, 'blank_');
+    }, []);
+    const items = react_1.default.useMemo(() => {
+        const items_ = {
+            image: [],
+            audio: [],
+            video: [],
+            other: [],
+            embed: []
+        };
+        values.filter(Boolean).forEach(item => {
+            var _a, _b, _c;
+            const media = item.value;
+            if (media) {
+                if (media.urlEmbed !== undefined)
+                    items_.embed.push(item);
+                else if ((_a = media.mime) === null || _a === void 0 ? void 0 : _a.startsWith('image'))
+                    items_.image.push(item);
+                else if ((_b = media.mime) === null || _b === void 0 ? void 0 : _b.startsWith('audio'))
+                    items_.audio.push(item);
+                else if ((_c = media.mime) === null || _c === void 0 ? void 0 : _c.startsWith('video'))
+                    items_.video.push(item);
+                else
+                    items_.other.push(item);
+            }
+        });
+        return items_;
+    }, [values]);
+    const getLink = react_1.default.useCallback((item, index) => {
+        var _a;
+        if (!(item === null || item === void 0 ? void 0 : item.urlEmbed))
+            return null;
+        let url;
+        try {
+            url = new URL(item.urlEmbed);
+        }
+        catch (error) {
+            console.log('Invalid embed URL', item);
+            return null;
+        }
+        const id = (_a = url.pathname) === null || _a === void 0 ? void 0 : _a.split('/').filter(Boolean).slice(-1)[0];
+        if (!(url === null || url === void 0 ? void 0 : url.hostname) || !id)
+            return null;
+        if (item.urlEmbed.includes('youtu.be')) {
+            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.youtube.com/embed/${id}`, allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share', allowFullScreen: true, className: classes.aspectRatioYoutube }, index));
+        }
+        if (item.urlEmbed.includes('instagram.com')) {
+            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.instagram.com/reel/${id}/embed`, allowFullScreen: true, className: classes.aspectRatioInstagram }, index));
+        }
+        if (item.urlEmbed.includes('tiktok.com')) {
+            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.tiktok.com/embed/v2/${id}`, allowFullScreen: true, className: classes.aspectRatioTiktok }, index));
+        }
+        if (item.urlEmbed.includes('vimeo.com')) {
+            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://player.vimeo.com/video/${id}`, allowFullScreen: true, className: classes.aspectRatioVimeo }, index));
+        }
+        return ((0, jsx_runtime_1.jsx)(Link, Object.assign({ href: item === null || item === void 0 ? void 0 : item.urlEmbed, target: 'blank' }, { children: item.name || item.urlEmbed }), index));
+    }, []);
+    const getItem = (version, item, index) => {
+        var _a, _b, _c, _d, _e, _f;
+        const media = item.value;
+        const name = (((_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.name) || !noName) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l2' : size === 'regular' ? 'l3' : 'l3' }, NameProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('Medias', theme) && [
+                    'onesy-Medias-name'
+                ],
+                NameProps === null || NameProps === void 0 ? void 0 : NameProps.className,
+                classes.name
+            ]) }, { children: (media === null || media === void 0 ? void 0 : media.name) || 'No name' })));
+        if (version === 'embed') {
+            return getLink(media, index);
+        }
+        if (version === 'image') {
+            return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1 }, WrapperProps, { onClick: () => imageGallery && onOpen(index), className: (0, style_react_1.classNames)([
+                    (0, utils_2.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: [(0, jsx_runtime_1.jsx)(Line, Object.assign({}, ImageProps, item === null || item === void 0 ? void 0 : item.props, { fullWidth: true, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Medias', theme) && [
+                                'onesy-Medias-item',
+                                'onesy-Medias-item-image'
+                            ],
+                            ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className,
+                            (_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.className,
+                            classes.item,
+                            classes.image,
+                            classes[`image_size_${size}`]
+                        ]), style: Object.assign({ backgroundImage: `url(${media.urlSmall || media.url})` }, (_c = item === null || item === void 0 ? void 0 : item.props) === null || _c === void 0 ? void 0 : _c.style) }, { children: (0, jsx_runtime_1.jsx)(Interaction, {}) }), index), name] }), index));
+        }
+        if (version === 'audio') {
+            return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1 }, WrapperProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.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: [(0, jsx_runtime_1.jsx)(AudioPlayer, Object.assign({ tonal: true, color: 'primary', src: media.url || media.urlSmall, size: size }, media, AudioProps, item === null || item === void 0 ? void 0 : item.props, { fullWidth: true, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Medias', theme) && [
+                                'onesy-Medias-item',
+                                'onesy-Medias-item-audio'
+                            ],
+                            VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className,
+                            (_d = item === null || item === void 0 ? void 0 : item.props) === null || _d === void 0 ? void 0 : _d.className,
+                            classes.item,
+                            classes.audio
+                        ]) }), index), name] }), index));
+        }
+        if (version === 'video') {
+            return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1 }, WrapperProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.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: [(0, jsx_runtime_1.jsx)(VideoPlayer, Object.assign({ tonal: true, color: 'primary', src: media.url || media.urlSmall, size: size }, media, VideoProps, item === null || item === void 0 ? void 0 : item.props, { fullWidth: true, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Medias', theme) && [
+                                'onesy-Medias-item',
+                                'onesy-Medias-item-video'
+                            ],
+                            VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className,
+                            (_e = item === null || item === void 0 ? void 0 : item.props) === null || _e === void 0 ? void 0 : _e.className,
+                            classes.item,
+                            classes.video
+                        ]) }), index), name] }), index));
+        }
+        if (version === 'other') {
+            return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1 }, WrapperProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.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: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({}, OtherProps, item === null || item === void 0 ? void 0 : item.props, { align: 'center', justify: 'center', onClick: () => onOpenMedia(media), fullWidth: true, className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Medias', theme) && [
+                                'onesy-Medias-item',
+                                'onesy-Medias-item-other'
+                            ],
+                            OtherProps === null || OtherProps === void 0 ? void 0 : OtherProps.className,
+                            (_f = item === null || item === void 0 ? void 0 : item.props) === null || _f === void 0 ? void 0 : _f.className,
+                            classes.item,
+                            classes.other,
+                            classes[`other_size_${size}`]
+                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Interaction, {}), (0, jsx_runtime_1.jsx)(IconDocument, { size: size === 'large' ? 44 : size === 'regular' ? 34 : 24 })] }), index), name] }), index));
+        }
+        return null;
+    };
+    const usable = show.filter(item => {
+        var _a;
+        return (!!((_a = items[item]) === null || _a === void 0 ? void 0 : _a.length) &&
+            !!items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)).filter(Boolean).length);
+    });
+    if (!(usable === null || usable === void 0 ? void 0 : usable.length))
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, gap: size === 'large' ? 3 : size === 'regular' ? 2 : 1.5, fullWidth: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Medias', theme) && [
+                'onesy-Medias-root',
+                `onesy-Medias-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [usable.map(item => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ 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' }, ItemsProps, (item === 'embed' && EmbedItemsProps), (item === 'image' && ImageItemsProps), (item === 'audio' && AudioItemsProps), (item === 'video' && VideoItemsProps), (item === 'other' && OtherItemsProps), { className: (0, style_react_1.classNames)([
+                    (0, utils_2.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
+                ]) }, { children: items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)) }), item))), refs.root.current && imageGallery && !!((_a = items.image) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(Portal, Object.assign({ element: (_c = (_b = refs.root.current) === null || _b === void 0 ? void 0 : _b.ownerDocument) === null || _c === void 0 ? void 0 : _c.body }, { children: (0, jsx_runtime_1.jsx)(ImageGallery, { open: !!open, onClose: onClose, value: open === null || open === void 0 ? void 0 : open.index, items: items.image.map(item => (Object.assign(Object.assign({}, item.value), { url: item.value.url || item.value.urlSmall, urlSmall: item.value.urlSmall || item.value.url }))) }) })))] })));
+});
+Medias.displayName = 'onesy-Medias';
+exports.default = Medias;

package/Medias/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Medias';

package/Medias/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Medias_1 = require("./Medias");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Medias_1).default; } });