@onesy/ui-react 1.0.59 → 1.0.63

package/SectionCards/SectionCards.js

@@ -1,221 +0,0 @@
-"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 react_router_dom_1 = require("react-router-dom");
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Section_1 = __importDefault(require("../Section/Section"));
-const Line_1 = __importDefault(require("../Line"));
-const Type_1 = __importDefault(require("../Type"));
-const Button_1 = __importDefault(require("../Button"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    main: {
-        maxWidth: '768px',
-        zIndex: '14'
-    },
-    items: {
-        padding: `${theme.methods.space.value(2, 'px')} 0`,
-        overflow: 'auto hidden',
-        maxWidth: '100%'
-    },
-    item: {
-        position: 'relative',
-        flex: '0 0 auto',
-        width: '100%',
-        background: theme.palette.background.default.primary,
-        '&:active': {
-            '& $background': {
-                borderRadius: theme.methods.shape.radius.value(5)
-            }
-        }
-    },
-    item_size_small: {
-        maxWidth: '174px',
-    },
-    item_size_regular: {
-        maxWidth: '254px',
-    },
-    item_size_large: {
-        maxWidth: '314px',
-    },
-    actions: {
-        marginTop: 12
-    },
-    background: {
-        position: 'relative',
-        aspectRatio: '3 / 4',
-        borderRadius: theme.methods.shape.radius.value(3),
-        zIndex: '1',
-        transition: theme.methods.transitions.make('border-radius')
-    },
-    backgroundImage: {
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat'
-    },
-    backgroundVideo: {
-        position: 'absolute',
-        inset: '0',
-        minHeight: '100%',
-        minWidth: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        zIndex: '1'
-    },
-    backgroundOverlay: {
-        position: 'absolute',
-        inset: '0',
-        zIndex: '4'
-    },
-    backgroundOverlayBlur: {
-        backdropFilter: 'blur(12px)'
-    }
-}), { name: 'onesy-SectionCards' });
-const Element = 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.onesySectionCards) === 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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_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 Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const { size = 'regular', values = [], ItemProps, ItemsProps, className } = props, other = __rest(props, ["size", "values", "ItemProps", "ItemsProps", "className"]);
-    const { classes } = useStyle();
-    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
-    const refs = {
-        root: react_1.default.useRef(undefined)
-    };
-    const getItem = react_1.default.useCallback((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        let styleBackground = {};
-        const themed = [undefined, true].includes(item.themed);
-        if (item.backgroundColor) {
-            const palette = theme.palette.color[item.backgroundColor] || theme.methods.color(item.backgroundColor);
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: themed ? theme.methods.palette.color.value(undefined, 95, true, palette) : palette === null || palette === void 0 ? void 0 : palette.main });
-        }
-        if ((0, utils_1.is)('array', item.backgroundGradient) && item.backgroundGradient.length >= 2) {
-            const palette1 = theme.palette.color[item.backgroundGradient[0]] || theme.methods.color(item.backgroundGradient[0]);
-            const palette2 = theme.palette.color[item.backgroundGradient[1]] || theme.methods.color(item.backgroundGradient[1]);
-            const palette3 = theme.palette.color[item.backgroundGradient[2]] || theme.methods.color(item.backgroundGradient[2]);
-            let backgroundImageStyle = '';
-            if (((_a = item.backgroundGradient) === null || _a === void 0 ? void 0 : _a.length) === 2) {
-                backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 100%)`;
-            }
-            if (((_b = item.backgroundGradient) === null || _b === void 0 ? void 0 : _b.length) === 3) {
-                backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(palette3.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 40%, ${palette3.main} 100%)`;
-            }
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: backgroundImageStyle });
-        }
-        if (item.backgroundImage) {
-            const url = ((_c = item.backgroundImage) === null || _c === void 0 ? void 0 : _c.url) || ((_d = item.backgroundImage) === null || _d === void 0 ? void 0 : _d.urlSmall) || ((0, utils_1.is)('string', item.backgroundImage) ? item.backgroundImage : '');
-            if (url) {
-                styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: `url('${url}')` });
-            }
-        }
-        let styleOverlay = {};
-        if (item.overlay) {
-            const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
-            styleOverlay = Object.assign(Object.assign({}, styleOverlay), { backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette === null || palette === void 0 ? void 0 : palette.main });
-        }
-        const urlVideo = ((_e = item.backgroundVideo) === null || _e === void 0 ? void 0 : _e.url) || ((_f = item.backgroundVideo) === null || _f === void 0 ? void 0 : _f.urlSmall) || ((0, utils_1.is)('string', item.backgroundVideo) ? item.backgroundVideo : '');
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: size === 'large' ? 3 : size === 'regular' ? 2 : 1, align: 'center', justify: 'center', fullWidth: true }, ItemProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SectionCards', theme) && [
-                    'onesy-SectionCards-item'
-                ],
-                ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className,
-                classes.item,
-                classes[`item_size_${size}`]
-            ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ fullWidth: true }, item.propsImage, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SectionCards', theme) && [
-                            'onesy-SectionCards-item-image'
-                        ],
-                        (_g = item.propsImage) === null || _g === void 0 ? void 0 : _g.className,
-                        classes.background,
-                        item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage
-                    ]), style: Object.assign({}, styleBackground) }, { children: [urlVideo && ((0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, className: classes.backgroundVideo }, { children: (0, jsx_runtime_1.jsx)("source", { src: urlVideo }) }))), item.overlay && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                classes.backgroundOverlay,
-                                item.overlayBlur && classes.backgroundOverlayBlur
-                            ]), style: Object.assign({}, styleOverlay) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, align: 'center', fullWidth: true }, item.propsMain, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SectionCards', theme) && [
-                            'onesy-SectionCards-item-main'
-                        ],
-                        (_h = item.propsMain) === null || _h === void 0 ? void 0 : _h.className,
-                        classes.main
-                    ]) }, { children: [(item.name || item.description) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, align: 'center', fullWidth: true }, item.propsWrapperText, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('SectionCards', theme) && [
-                                    'onesy-SectionCards-item-wrapper-text'
-                                ],
-                                (_j = item.propsWrapperText) === null || _j === void 0 ? void 0 : _j.className,
-                                classes.wrapperText
-                            ]) }, { children: [item.name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h3' : size === 'regular' ? 't1' : 't2', align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
-                                        __html: (0, utils_1.textToInnerHTML)(item.name)
-                                    } }, item.propsName, { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('SectionCards', theme) && [
-                                            'onesy-SectionCards-item-name'
-                                        ],
-                                        (_k = item.propsName) === null || _k === void 0 ? void 0 : _k.className
-                                    ]) }))), item.description && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', priority: 'secondary', align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
-                                        __html: (0, utils_1.textToInnerHTML)(item.description)
-                                    } }, item.propsDescription, { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('SectionCards', theme) && [
-                                            'onesy-SectionCards-item-description'
-                                        ],
-                                        (_l = item.propsDescription) === null || _l === void 0 ? void 0 : _l.className
-                                    ]) })))] }))), item.buttonText && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', fullWidth: true }, item.propsActions, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('SectionCards', theme) && [
-                                    'onesy-SectionCards-item-actions'
-                                ],
-                                (_m = item.propsActions) === null || _m === void 0 ? void 0 : _m.className,
-                                classes.actions
-                            ]) }, { children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'filled', color: 'primary', size: size, onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank') }, item.propsButton, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('SectionCards', theme) && [
-                                        'onesy-SectionCards-item-button'
-                                    ],
-                                    (_o = item.propsButton) === null || _o === void 0 ? void 0 : _o.className,
-                                    classes.button
-                                ]) }, { children: item.buttonText || 'Click here' })) })))] }))] }), index));
-    }, [theme, size]);
-    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, maxWidth: false, MainProps: {
-            justify: 'center',
-            align: 'center'
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('SectionCards', theme) && [
-                'onesy-SectionCards-root',
-                `onesy-SectionCards-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: size === 'large' ? 3.5 : size === 'regular' ? 2.5 : 1.5, justify: 'flex-start', align: 'flex-start', direction: 'row' }, ItemsProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SectionCards', theme) && [
-                    'onesy-SectionCards-items'
-                ],
-                ItemsProps === null || ItemsProps === void 0 ? void 0 : ItemsProps.className,
-                classes.items
-            ]) }, { children: values === null || values === void 0 ? void 0 : values.map((item, index) => getItem(item, index)) })) })));
-});
-Element.displayName = 'onesy-SectionCards';
-exports.default = Element;

package/SectionCarousel/SectionCarousel.js

@@ -1,246 +0,0 @@
-"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 react_router_dom_1 = require("react-router-dom");
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Section_1 = __importDefault(require("../Section/Section"));
-const Button_1 = __importDefault(require("../Button"));
-const Carousel_1 = __importDefault(require("../Carousel"));
-const Line_1 = __importDefault(require("../Line"));
-const Type_1 = __importDefault(require("../Type"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    size_small: {
-        '&.onesy-Carousel-root': {
-            height: '340px'
-        }
-    },
-    size_regular: {
-        '&.onesy-Carousel-root': {
-            height: '540px'
-        }
-    },
-    size_large: {
-        '&.onesy-Carousel-root': {
-            height: '740px'
-        }
-    },
-    fullHeight: {
-        '&.onesy-Carousel-root': {
-            height: '100vh'
-        }
-    },
-    main: {
-        padding: '0 96px !important',
-        zIndex: '14 !important'
-    },
-    item: {
-        position: 'relative',
-        height: '100%'
-    },
-    item_size_small: {
-        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    item_size_regular: {
-        padding: `${theme.methods.space.value(6.75, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    item_size_large: {
-        padding: `${theme.methods.space.value(9.25, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    text: {
-        '&.onesy-Type-root': {
-            color: 'white !important',
-            mixBlendMode: 'difference'
-        }
-    },
-    button: {
-        transition: theme.methods.transitions.make('transform'),
-        '&:active': {
-            transform: 'scale(0.94)'
-        }
-    },
-    background: {
-        position: 'absolute',
-        inset: '0',
-        overflow: 'hidden',
-        zIndex: '1'
-    },
-    backgroundImage: {
-        backgroundSize: 'cover !important',
-        backgroundPosition: 'center !important',
-        backgroundRepeat: 'no-repeat !important'
-    },
-    backgroundVideo: {
-        position: 'absolute',
-        inset: '0',
-        minHeight: '100%',
-        minWidth: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        zIndex: '1'
-    },
-    backgroundOverlay: {
-        position: 'absolute',
-        inset: '0'
-    },
-    backgroundOverlayBlur: {
-        backdropFilter: 'blur(12px)'
-    },
-    '@media only screen and (max-width: 640px)': {
-        $main: {
-            paddingInline: 72
-        }
-    }
-}), { name: 'onesy-SectionCarousel' });
-const Element = 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.onesySectionCarousel) === 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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
-    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const Carousel = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Carousel) || Carousel_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 { size: size_ = 'regular', values: values_ = [], responsive = true, fullHeight, ItemProps, CarouselProps, className } = props, other = __rest(props, ["size", "values", "responsive", "fullHeight", "ItemProps", "CarouselProps", "className"]);
-    const { classes } = useStyle();
-    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
-    const refs = {
-        root: react_1.default.useRef(undefined)
-    };
-    const laptop = (0, useMediaQuery_1.default)('(max-width: 1440px)', { element: refs.root.current });
-    const mobile = (0, useMediaQuery_1.default)('(max-width: 768px)', { element: refs.root.current });
-    let size = size_;
-    if (responsive) {
-        if (laptop)
-            size = 'regular';
-        else if (mobile)
-            size = 'small';
-    }
-    // Max 4
-    const values = values_ === null || values_ === void 0 ? void 0 : values_.slice(0, 4);
-    const getItem = react_1.default.useCallback((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        let styleBackground = {};
-        const themed = [undefined, true].includes(item.themed);
-        if (item.backgroundColor) {
-            const palette = theme.palette.color[item.backgroundColor] || theme.methods.color(item.backgroundColor);
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: themed ? theme.methods.palette.color.value(undefined, 95, true, palette) : palette === null || palette === void 0 ? void 0 : palette.main });
-        }
-        if ((0, utils_1.is)('array', item.backgroundGradient) && item.backgroundGradient.length >= 2) {
-            const palette1 = theme.palette.color[item.backgroundGradient[0]] || theme.methods.color(item.backgroundGradient[0]);
-            const palette2 = theme.palette.color[item.backgroundGradient[1]] || theme.methods.color(item.backgroundGradient[1]);
-            const palette3 = theme.palette.color[item.backgroundGradient[2]] || theme.methods.color(item.backgroundGradient[2]);
-            let backgroundImageStyle = '';
-            if (((_a = item.backgroundGradient) === null || _a === void 0 ? void 0 : _a.length) === 2) {
-                backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 100%)`;
-            }
-            if (((_b = item.backgroundGradient) === null || _b === void 0 ? void 0 : _b.length) === 3) {
-                backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(palette3.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 40%, ${palette3.main} 100%)`;
-            }
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: backgroundImageStyle });
-        }
-        if (item.backgroundImage) {
-            const url = ((_c = item.backgroundImage) === null || _c === void 0 ? void 0 : _c.url) || ((_d = item.backgroundImage) === null || _d === void 0 ? void 0 : _d.urlSmall) || ((0, utils_1.is)('string', item.backgroundImage) ? item.backgroundImage : '');
-            if (url) {
-                styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: `url('${url}')` });
-            }
-        }
-        let styleOverlay = {};
-        if (item.overlay) {
-            const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
-            styleOverlay = Object.assign(Object.assign({}, styleOverlay), { backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette === null || palette === void 0 ? void 0 : palette.main });
-        }
-        const urlVideo = ((_e = item.backgroundVideo) === null || _e === void 0 ? void 0 : _e.url) || ((_f = item.backgroundVideo) === null || _f === void 0 ? void 0 : _f.urlSmall) || ((0, utils_1.is)('string', item.backgroundVideo) ? item.backgroundVideo : '');
-        return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ size: size, gap: 0, align: 'flex-start', justify: 'center', fullWidth: true }, ItemProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                    'onesy-SectionCarousel-item'
-                ],
-                ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className,
-                classes.item,
-                classes[`item_size_${size}`]
-            ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, align: 'flex-start', justify: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                        'onesy-SectionCarousel-item-main'
-                    ],
-                    classes.main,
-                    classes.background,
-                    item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage
-                ]), style: Object.assign({}, styleBackground) }, { children: [urlVideo && ((0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                                'onesy-SectionCarousel-item-background-video'
-                            ],
-                            classes.backgroundVideo
-                        ]) }, { children: (0, jsx_runtime_1.jsx)("source", { src: urlVideo }) }))), item.overlay && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                                'onesy-SectionCarousel-item-background-overlay'
-                            ],
-                            classes.backgroundOverlay,
-                            item.overlayBlur && classes.backgroundOverlayBlur
-                        ]), style: Object.assign({}, styleOverlay) })), item.name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3', fullWidth: true, dangerouslySetInnerHTML: {
-                            __html: (0, utils_1.textToInnerHTML)(item.name)
-                        } }, item.propsName, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                                'onesy-SectionCarousel-item-name'
-                            ],
-                            (_g = item.propsName) === null || _g === void 0 ? void 0 : _g.className,
-                            classes.text
-                        ]) }))), item.description && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b2', fullWidth: true, dangerouslySetInnerHTML: {
-                            __html: (0, utils_1.textToInnerHTML)(item.description)
-                        } }, item.propsDescription, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                                'onesy-SectionCarousel-item-description'
-                            ],
-                            (_h = item.propsDescription) === null || _h === void 0 ? void 0 : _h.className,
-                            classes.text
-                        ]) }))), item.buttonText && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-start', fullWidth: true }, item.propsButtonWrapper, { style: Object.assign({ marginTop: 12 }, (_j = item.propsButtonWrapper) === null || _j === void 0 ? void 0 : _j.style) }, { children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'filled', color: 'primary', size: size === 'large' ? 'regular' : size === 'regular' ? 'small' : 'small', onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank') }, item.propsButton, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                                    'onesy-SectionCarousel-item-button'
-                                ],
-                                (_k = item.propsButton) === null || _k === void 0 ? void 0 : _k.className,
-                                classes.button
-                            ]) }, { children: item.buttonText || 'Click here' })) })))] })) }), index));
-    }, [theme, size]);
-    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, maxWidth: false, padding: !(values === null || values === void 0 ? void 0 : values.length), className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                'onesy-SectionCarousel-root',
-                `onesy-SectionCarousel-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: !!(values === null || values === void 0 ? void 0 : values.length) && ((0, jsx_runtime_1.jsx)(Carousel, Object.assign({ items: values === null || values === void 0 ? void 0 : values.map((item, index) => getItem(item, index)), autoPlay: true }, CarouselProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SectionCarousel', theme) && [
-                    'onesy-SectionCarousel-items'
-                ],
-                CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className,
-                classes.items,
-                classes[`size_${size}`],
-                fullHeight && classes.fullHeight
-            ]) }))) })));
-});
-Element.displayName = 'onesy-SectionCarousel';
-exports.default = Element;

package/SectionMedia/SectionMedia.js

@@ -1,155 +0,0 @@
-"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("@onesy/icons-material-rounded-react/IconMaterialDraftW100"));
-const AudioPlayer_1 = __importDefault(require("../AudioPlayer"));
-const Image_1 = __importDefault(require("../Image"));
-const Interaction_1 = __importDefault(require("../Interaction"));
-const Line_1 = __importDefault(require("../Line"));
-const Section_1 = __importDefault(require("../Section/Section"));
-const Type_1 = __importDefault(require("../Type"));
-const VideoPlayer_1 = __importDefault(require("../VideoPlayer"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    name: {
-        wordBreak: 'break-word'
-    },
-    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: {
-        maxWidth: '74px',
-        width: '90vw'
-    },
-    otherWrapper_size_regular: {
-        maxWidth: '94px',
-        width: '90vw'
-    },
-    otherWrapper_size_large: {
-        maxWidth: '114px',
-        width: '90vw'
-    },
-    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)
-    }
-}), { name: 'onesy-SectionMedia' });
-const Element = 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.onesySectionMedia) === 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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
-    const Image = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Image) || Image_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 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 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 { value, size = 'regular', name, IconDocument = IconMaterialDraftW100_1.default, MediaProps, ImageProps, AudioProps, VideoProps, OtherProps, className } = props, other = __rest(props, ["value", "size", "name", "IconDocument", "MediaProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "className"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined)
-    };
-    const onOpenMedia = react_1.default.useCallback((media) => {
-        window.open(media.url || media.urlSmall, 'blank_');
-    }, []);
-    let element;
-    if (value) {
-        const mime = value.mime;
-        if (mime === null || mime === void 0 ? void 0 : mime.includes('image'))
-            element = ((0, jsx_runtime_1.jsx)(Image, Object.assign({ src: (value === null || value === void 0 ? void 0 : value.url) || (value === null || value === void 0 ? void 0 : value.urlSmall) || ((0, utils_1.is)('string', value) ? value : ''), maxWidth: 'rg', fullWidth: true }, MediaProps, ImageProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                        'onesy-SectionMedia-item',
-                        'onesy-SectionMedia-item-image'
-                    ],
-                    MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
-                    ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className
-                ]) })));
-        else if (mime === null || mime === void 0 ? void 0 : mime.includes('audio'))
-            element = ((0, jsx_runtime_1.jsx)(AudioPlayer, Object.assign({ size: size }, value, MediaProps, AudioProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                        'onesy-SectionMedia-item',
-                        'onesy-SectionMedia-item-audio'
-                    ],
-                    MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
-                    AudioProps === null || AudioProps === void 0 ? void 0 : AudioProps.className
-                ]) })));
-        else if (mime === null || mime === void 0 ? void 0 : mime.includes('video'))
-            element = ((0, jsx_runtime_1.jsx)(VideoPlayer, Object.assign({ size: size }, value, MediaProps, VideoProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                        'onesy-SectionMedia-item',
-                        'onesy-SectionMedia-item-video'
-                    ],
-                    MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
-                    VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className
-                ]) })));
-        else
-            element = ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                        'onesy-SectionMedia-wrapper',
-                        'onesy-SectionMedia-wrapper-other'
-                    ],
-                    classes.wrapper,
-                    classes[`otherWrapper_size_${size}`]
-                ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ align: 'center', justify: 'center', onClick: () => onOpenMedia(value), fullWidth: true }, MediaProps, OtherProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                            'onesy-SectionMedia-item',
-                            'onesy-SectionMedia-item-other'
-                        ],
-                        MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
-                        OtherProps === null || OtherProps === void 0 ? void 0 : OtherProps.className,
-                        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 })] })) })));
-    }
-    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, maxWidth: 'small', align: 'center', className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                'onesy-SectionMedia-root',
-                `onesy-SectionMedia-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ align: 'center', fullWidth: true }, { children: [element, name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SectionMedia', theme) && [
-                            'onesy-SectionMedia-name'
-                        ],
-                        classes.name
-                    ]) }, { children: (0, utils_1.cleanValue)((value === null || value === void 0 ? void 0 : value.name) || 'No name', { capitalize: true }) })))] })) })));
-});
-Element.displayName = 'onesy-SectionMedia';
-exports.default = Element;