@onesy/ui-react 1.0.0

package/esm/SectionBoxes/index.js

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

package/esm/SectionCards/SectionCards.js

@@ -0,0 +1,235 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["size", "values", "ItemProps", "ItemsProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { is, isEnvironment, textToInnerHTML } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SectionElement from '../Section/Section';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import ButtonElement from '../Button';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCards?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+      size = 'regular',
+      values = [],
+      ItemProps,
+      ItemsProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const navigate = isEnvironment('browser') && useNavigate();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const getItem = React.useCallback((item, index) => {
+    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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundColor: themed ? theme.methods.palette.color.value(undefined, 95, true, palette) : palette?.main
+      });
+    }
+    if (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 (item.backgroundGradient?.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 (item.backgroundGradient?.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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundImage: backgroundImageStyle
+      });
+    }
+    if (item.backgroundImage) {
+      const url = item.backgroundImage?.url || item.backgroundImage?.urlSmall || (is('string', item.backgroundImage) ? item.backgroundImage : '');
+      if (url) {
+        styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+          backgroundImage: `url('${url}')`
+        });
+      }
+    }
+    let styleOverlay = {};
+    if (item.overlay) {
+      const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
+      styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
+        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+      });
+    }
+    const urlVideo = item.backgroundVideo?.url || item.backgroundVideo?.urlSmall || (is('string', item.backgroundVideo) ? item.backgroundVideo : '');
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      key: index,
+      gap: size === 'large' ? 3 : size === 'regular' ? 2 : 1,
+      align: "center",
+      justify: "center",
+      fullWidth: true
+    }, ItemProps, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item'], ItemProps?.className, classes.item, classes[`item_size_${size}`]])
+    }), /*#__PURE__*/React.createElement(Line, _extends({
+      fullWidth: true
+    }, item.propsImage, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-image'], item.propsImage?.className, classes.background, item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
+      style: _objectSpread({}, styleBackground)
+    }), urlVideo && /*#__PURE__*/React.createElement("video", {
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      className: classes.backgroundVideo
+    }, /*#__PURE__*/React.createElement("source", {
+      src: urlVideo
+    })), item.overlay && /*#__PURE__*/React.createElement("div", {
+      className: classNames([classes.backgroundOverlay, item.overlayBlur && classes.backgroundOverlayBlur]),
+      style: _objectSpread({}, styleOverlay)
+    })), /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 1,
+      align: "center",
+      fullWidth: true
+    }, item.propsMain, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-main'], item.propsMain?.className, classes.main])
+    }), (item.name || item.description) && /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 1,
+      align: "center",
+      fullWidth: true
+    }, item.propsWrapperText, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-wrapper-text'], item.propsWrapperText?.className, classes.wrapperText])
+    }), item.name && /*#__PURE__*/React.createElement(Type, _extends({
+      version: size === 'large' ? 'h3' : size === 'regular' ? 't1' : 't2',
+      align: "center",
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(item.name)
+      }
+    }, item.propsName, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-name'], item.propsName?.className])
+    })), item.description && /*#__PURE__*/React.createElement(Type, _extends({
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+      priority: "secondary",
+      align: "center",
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(item.description)
+      }
+    }, item.propsDescription, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-description'], item.propsDescription?.className])
+    }))), item.buttonText && /*#__PURE__*/React.createElement(Line, _extends({
+      align: "center",
+      fullWidth: true
+    }, item.propsActions, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-actions'], item.propsActions?.className, classes.actions])
+    }), /*#__PURE__*/React.createElement(Button, _extends({
+      version: "filled",
+      color: "primary",
+      size: size,
+      onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
+    }, item.propsButton, {
+      className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-button'], item.propsButton?.className, classes.button])
+    }), item.buttonText || 'Click here'))));
+  }, [theme, size]);
+  return /*#__PURE__*/React.createElement(Section, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    maxWidth: false,
+    MainProps: {
+      justify: 'center',
+      align: 'center'
+    },
+    className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-root', `onesy-SectionCards-size-${size}`], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: size === 'large' ? 3.5 : size === 'regular' ? 2.5 : 1.5,
+    justify: "flex-start",
+    align: "flex-start",
+    direction: "row"
+  }, ItemsProps, {
+    className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-items'], ItemsProps?.className, classes.items])
+  }), values?.map((item, index) => getItem(item, index))));
+});
+Element.displayName = 'onesy-SectionCards';
+export default Element;

package/esm/SectionCards/index.js

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

package/esm/SectionCarousel/SectionCarousel.js

@@ -0,0 +1,260 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["size", "values", "responsive", "fullHeight", "ItemProps", "CarouselProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { is, isEnvironment, textToInnerHTML } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SectionElement from '../Section/Section';
+import ButtonElement from '../Button';
+import CarouselElement from '../Carousel';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCarousel?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const Carousel = React.useMemo(() => theme?.elements?.Carousel || CarouselElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      size: size_ = 'regular',
+      values: values_ = [],
+      responsive = true,
+      fullHeight,
+      ItemProps,
+      CarouselProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const navigate = isEnvironment('browser') && useNavigate();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const laptop = useMediaQuery('(max-width: 1440px)', {
+    element: refs.root.current
+  });
+  const mobile = useMediaQuery('(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_?.slice(0, 4);
+  const getItem = React.useCallback((item, index) => {
+    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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundColor: themed ? theme.methods.palette.color.value(undefined, 95, true, palette) : palette?.main
+      });
+    }
+    if (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 (item.backgroundGradient?.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 (item.backgroundGradient?.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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundImage: backgroundImageStyle
+      });
+    }
+    if (item.backgroundImage) {
+      const url = item.backgroundImage?.url || item.backgroundImage?.urlSmall || (is('string', item.backgroundImage) ? item.backgroundImage : '');
+      if (url) {
+        styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+          backgroundImage: `url('${url}')`
+        });
+      }
+    }
+    let styleOverlay = {};
+    if (item.overlay) {
+      const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
+      styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
+        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+      });
+    }
+    const urlVideo = item.backgroundVideo?.url || item.backgroundVideo?.urlSmall || (is('string', item.backgroundVideo) ? item.backgroundVideo : '');
+    return /*#__PURE__*/React.createElement(Section, _extends({
+      key: index,
+      size: size,
+      gap: 0,
+      align: "flex-start",
+      justify: "center",
+      fullWidth: true
+    }, ItemProps, {
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item'], ItemProps?.className, classes.item, classes[`item_size_${size}`]])
+    }), /*#__PURE__*/React.createElement(Line, {
+      gap: 1,
+      align: "flex-start",
+      justify: "center",
+      fullWidth: true,
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-main'], classes.main, classes.background, item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
+      style: _objectSpread({}, styleBackground)
+    }, urlVideo && /*#__PURE__*/React.createElement("video", {
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-background-video'], classes.backgroundVideo])
+    }, /*#__PURE__*/React.createElement("source", {
+      src: urlVideo
+    })), item.overlay && /*#__PURE__*/React.createElement("div", {
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-background-overlay'], classes.backgroundOverlay, item.overlayBlur && classes.backgroundOverlayBlur]),
+      style: _objectSpread({}, styleOverlay)
+    }), item.name && /*#__PURE__*/React.createElement(Type, _extends({
+      version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3',
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(item.name)
+      }
+    }, item.propsName, {
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-name'], item.propsName?.className, classes.text])
+    })), item.description && /*#__PURE__*/React.createElement(Type, _extends({
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b2',
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: textToInnerHTML(item.description)
+      }
+    }, item.propsDescription, {
+      className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-description'], item.propsDescription?.className, classes.text])
+    })), item.buttonText && /*#__PURE__*/React.createElement(Line, _extends({
+      direction: "row",
+      align: "center",
+      justify: "flex-start",
+      fullWidth: true
+    }, item.propsButtonWrapper, {
+      style: _objectSpread({
+        marginTop: 12
+      }, item.propsButtonWrapper?.style)
+    }), /*#__PURE__*/React.createElement(Button, _extends({
+      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: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-button'], item.propsButton?.className, classes.button])
+    }), item.buttonText || 'Click here'))));
+  }, [theme, size]);
+  return /*#__PURE__*/React.createElement(Section, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    maxWidth: false,
+    padding: !values?.length,
+    className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-root', `onesy-SectionCarousel-size-${size}`], className, classes.root])
+  }, other), !!values?.length && /*#__PURE__*/React.createElement(Carousel, _extends({
+    items: values?.map((item, index) => getItem(item, index)),
+    autoPlay: true
+  }, CarouselProps, {
+    className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-items'], CarouselProps?.className, classes.items, classes[`size_${size}`], fullHeight && classes.fullHeight])
+  })));
+});
+Element.displayName = 'onesy-SectionCarousel';
+export default Element;

package/esm/SectionCarousel/index.js

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

package/esm/SectionContact/SectionContact.js

@@ -0,0 +1,160 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["map", "mapPosition", "heading", "summary", "address", "phone", "email", "IconAddress", "IconPhone", "IconEmail", "MapProps", "HeadingProps", "SummaryProps", "PropertiesProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is, textToInnerHTML } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialMap from '@amaui/icons-material-rounded-react/IconMaterialMapW100';
+import IconMaterialCall from '@amaui/icons-material-rounded-react/IconMaterialCallW100';
+import IconMaterialMail from '@amaui/icons-material-rounded-react/IconMaterialMailW100';
+import LineElement from '../Line';
+import PropertiesElement from '../Properties';
+import SectionElement from '../Section/Section';
+import TypeElement from '../Type';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  text: {
+    wordBreak: 'break-word'
+  },
+  map: {
+    position: 'relative',
+    height: '400px',
+    borderRadius: theme.methods.shape.radius.value(3),
+    overflow: 'hidden'
+  },
+  backgroundOverlay: {
+    position: 'absolute',
+    inset: '0',
+    zIndex: '4'
+  }
+}), {
+  name: 'onesy-SectionContact'
+});
+const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionContact?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Properties = React.useMemo(() => theme?.elements?.Properties || PropertiesElement, [theme]);
+  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      map,
+      mapPosition: mapPosition_ = 'bottom',
+      heading,
+      summary,
+      address,
+      phone,
+      email,
+      IconAddress = IconMaterialMap,
+      IconPhone = IconMaterialCall,
+      IconEmail = IconMaterialMail,
+      MapProps,
+      HeadingProps,
+      SummaryProps,
+      PropertiesProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const mobile = useMediaQuery('(max-width: 768px)', {
+    element: refs.root.current
+  });
+  let mapPosition = mapPosition_;
+  if (mobile) {
+    if (mapPosition === 'left') mapPosition = 'top';else if (mapPosition === 'right') mapPosition = 'bottom';
+  }
+  let styleOverlay = {};
+  if (map?.overlay) {
+    const palette = theme.palette.color[map?.overlay] || theme.methods.color(map?.overlay);
+    styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
+      backgroundColor: theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.54)
+    });
+  }
+  const mapElement = map?.apiKey && map?.latitude && map?.longitude && /*#__PURE__*/React.createElement(Line, {
+    fullWidth: true,
+    className: classNames([staticClassName('SectionContact', theme) && ['onesy-SectionContact-map'], classes.map])
+  }, map.overlay && /*#__PURE__*/React.createElement("div", {
+    className: classNames([classes.backgroundOverlay]),
+    style: _objectSpread({}, styleOverlay)
+  }), /*#__PURE__*/React.createElement("iframe", {
+    title: "onesy-google-map",
+    src: `https://www.google.com/maps/embed/v1/place?q=${map?.latitude},${map?.longitude}${map?.apiKey ? `&key=${map?.apiKey}` : ''}`,
+    width: "100%",
+    height: "100%",
+    loading: "lazy",
+    allowFullScreen: true,
+    referrerPolicy: "no-referrer-when-downgrade"
+  }));
+  const properties = [];
+  if (address) properties.push({
+    name: /*#__PURE__*/React.createElement(IconAddress, null),
+    value: address
+  });
+  if (phone) properties.push({
+    name: /*#__PURE__*/React.createElement(IconPhone, null),
+    value: phone
+  });
+  if (email) properties.push({
+    name: /*#__PURE__*/React.createElement(IconEmail, null),
+    value: email
+  });
+  return /*#__PURE__*/React.createElement(Section, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    MainProps: {
+      gap: 4
+    },
+    className: classNames([staticClassName('SectionContact', theme) && ['onesy-SectionContact-root'], className, classes.root])
+  }, other), mapPosition === 'top' && mapElement, /*#__PURE__*/React.createElement(Line, {
+    gap: 4,
+    direction: "row",
+    fullWidth: true
+  }, mapPosition === 'left' && mapElement, /*#__PURE__*/React.createElement(Line, {
+    gap: 5,
+    flex: true,
+    fullWidth: true,
+    style: {
+      paddingTop: ['left', 'right'].includes(mapPosition) ? 24 : 0
+    }
+  }, (heading || summary) && /*#__PURE__*/React.createElement(Line, {
+    gap: 0.5
+  }, heading && /*#__PURE__*/React.createElement(Type, _extends({
+    version: "t1",
+    dangerouslySetInnerHTML: {
+      __html: textToInnerHTML(heading)
+    }
+  }, HeadingProps, {
+    className: classNames([staticClassName('SectionContact', theme) && ['onesy-SectionContact-heading'], HeadingProps?.className, classes.text])
+  })), summary && /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b3",
+    dangerouslySetInnerHTML: {
+      __html: textToInnerHTML(summary)
+    }
+  }, SummaryProps, {
+    className: classNames([staticClassName('SectionContact', theme) && ['onesy-SectionContact-summary'], SummaryProps?.className, classes.text])
+  }))), !!properties.length && /*#__PURE__*/React.createElement(Properties, _extends({
+    version: "row",
+    gap: 1,
+    values: properties
+  }, PropertiesProps, {
+    PropertyProps: _objectSpread({
+      responsive: false
+    }, PropertiesProps?.PropertyProps)
+  }))), mapPosition === 'right' && mapElement), mapPosition === 'bottom' && mapElement);
+});
+Element.displayName = 'onesy-SectionContact';
+export default Element;

package/esm/SectionContact/index.js

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