@onesy/ui-react 1.0.0

package/SectionBoxes/SectionBoxes.js

@@ -0,0 +1,211 @@
+"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: {},
+    item: {
+        position: 'relative',
+        maxWidth: '768px',
+        zIndex: '14',
+        flex: '1 1'
+    },
+    item_size_small: {
+        padding: `${theme.methods.space.value(4.25, 'px')} ${theme.methods.space.value(2, '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(4, 'px')}`
+    },
+    actions: {
+        marginTop: 12
+    },
+    text: {
+        '&.onesy-Type-root': {
+            color: 'white',
+            mixBlendMode: 'difference'
+        }
+    },
+    button: {
+        transition: theme.methods.transitions.make('transform'),
+        '&:active': {
+            transform: 'scale(0.94)'
+        }
+    },
+    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'
+    },
+    backgroundOverlayBlur: {
+        backdropFilter: 'blur(12px)'
+    }
+}), { name: 'onesy-SectionBoxes' });
+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.onesySectionBoxes) === 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: values_ = [], responsive = true, ItemProps, ItemsProps, className } = props, other = __rest(props, ["size", "values", "responsive", "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)
+    };
+    // 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, _l;
+        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: 1, align: 'flex-start', justify: 'center', fullWidth: true }, ItemProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionBoxes', theme) && [
+                    'onesy-SectionBoxes-item'
+                ],
+                ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className,
+                classes.item,
+                classes[`item_size_${size}`],
+                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)('SectionBoxes', theme) && [
+                            'onesy-SectionBoxes-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)('SectionBoxes', theme) && [
+                            'onesy-SectionBoxes-item-background-overlay'
+                        ],
+                        classes.backgroundOverlay,
+                        item.overlayBlur && classes.backgroundOverlayBlur
+                    ]), style: Object.assign({}, styleOverlay) })), (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)('SectionBoxes', theme) && [
+                            'onesy-SectionBoxes-item-wrapper-text'
+                        ],
+                        (_g = item.propsWrapperText) === null || _g === void 0 ? void 0 : _g.className,
+                        classes.wrapperText
+                    ]) }, { children: [item.name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h2' : size === 'regular' ? 'h3' : 't1', align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
+                                __html: (0, utils_1.textToInnerHTML)(item.name)
+                            } }, item.propsName, { className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('SectionBoxes', theme) && [
+                                    'onesy-SectionBoxes-item-name'
+                                ],
+                                (_h = item.propsName) === null || _h === void 0 ? void 0 : _h.className,
+                                classes.text
+                            ]) }))), item.description && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
+                                __html: (0, utils_1.textToInnerHTML)(item.description)
+                            } }, item.propsDescription, { className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('SectionBoxes', theme) && [
+                                    'onesy-SectionBoxes-item-description'
+                                ],
+                                (_j = item.propsDescription) === null || _j === void 0 ? void 0 : _j.className,
+                                classes.text
+                            ]) })))] }))), 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)('SectionBoxes', theme) && [
+                            'onesy-SectionBoxes-item-actions'
+                        ],
+                        (_k = item.propsActions) === null || _k === void 0 ? void 0 : _k.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)('SectionBoxes', theme) && [
+                                'onesy-SectionBoxes-item-button'
+                            ],
+                            (_l = item.propsButton) === null || _l === void 0 ? void 0 : _l.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)('SectionBoxes', theme) && [
+                'onesy-SectionBoxes-root',
+                `onesy-SectionBoxes-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, align: 'unset', fullWidth: true, direction: responsive ? {
+                default: 'row',
+                1100: 'column'
+            } : 'row' }, ItemsProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionBoxes', theme) && [
+                    'onesy-SectionBoxes-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-SectionBoxes';
+exports.default = Element;

package/SectionBoxes/index.d.ts

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

package/SectionBoxes/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 SectionBoxes_1 = require("./SectionBoxes");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionBoxes_1).default; } });

package/SectionBoxes/package.json

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

package/SectionCards/SectionCards.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TPaletteVersion } from '@onesy/style-react';
+import { ISection } from '../Section/Section';
+import { IMediaObject, IPropsAny } from '../types';
+export interface ISectionCardsItem {
+    name?: any;
+    description?: any;
+    buttonText?: any;
+    to?: string;
+    link?: string;
+    backgroundColor?: TPaletteVersion;
+    backgroundGradient?: TPaletteVersion[];
+    backgroundImage?: IMediaObject;
+    backgroundVideo?: IMediaObject;
+    overlay?: TPaletteVersion;
+    overlayBlur?: number | boolean;
+    themed?: boolean;
+    propsMain?: any;
+    propsImage?: any;
+    propsName?: any;
+    propsDescription?: any;
+    propsButton?: any;
+    propsWrapperText?: any;
+    propsActions?: any;
+}
+export interface ISectionCards extends ISection {
+    size?: 'small' | 'regular' | 'large';
+    values?: ISectionCardsItem[];
+    ItemProps?: IPropsAny;
+    ItemsProps?: IPropsAny;
+}
+declare const Element: React.FC<ISectionCards>;
+export default Element;

package/SectionCards/SectionCards.js

@@ -0,0 +1,221 @@
+"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/SectionCards/index.d.ts

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

package/SectionCards/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 SectionCards_1 = require("./SectionCards");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionCards_1).default; } });

package/SectionCards/package.json

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

package/SectionCarousel/SectionCarousel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TPaletteVersion } from '@onesy/style-react';
+import { ISection } from '../Section/Section';
+import { IMediaObject, IPropsAny } from '../types';
+export interface ISectionCarouselItem {
+    name?: any;
+    description?: any;
+    buttonText?: any;
+    to?: string;
+    link?: string;
+    backgroundColor?: TPaletteVersion;
+    backgroundGradient?: TPaletteVersion[];
+    backgroundImage?: IMediaObject;
+    backgroundVideo?: IMediaObject;
+    overlay?: TPaletteVersion;
+    overlayBlur?: number | boolean;
+    themed?: boolean;
+    propsName?: any;
+    propsDescription?: any;
+    propsButton?: any;
+    propsButtonWrapper?: any;
+}
+export interface ISectionCarousel extends ISection {
+    size?: 'small' | 'regular' | 'large';
+    values?: ISectionCarouselItem[];
+    fullHeight?: boolean;
+    responsive?: boolean;
+    ItemProps?: IPropsAny;
+    CarouselProps?: IPropsAny;
+}
+declare const Element: React.FC<ISectionCarousel>;
+export default Element;