@onesy/ui-react 1.0.59 → 1.0.63

package/esm/SectionCards/SectionCards.js

@@ -1,235 +0,0 @@
-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/SectionCarousel/SectionCarousel.js

@@ -1,260 +0,0 @@
-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/SectionMedia/SectionMedia.js

@@ -1,142 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["value", "size", "name", "IconDocument", "MediaProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "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 { cleanValue, is } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialDraft from '@onesy/icons-material-rounded-react/IconMaterialDraftW100';
-import AudioPlayerElement from '../AudioPlayer';
-import ImageElement from '../Image';
-import InteractionElement from '../Interaction';
-import LineElement from '../Line';
-import SectionElement from '../Section/Section';
-import TypeElement from '../Type';
-import VideoPlayerElement from '../VideoPlayer';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionMedia?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Image = React.useMemo(() => theme?.elements?.Image || ImageElement, [theme]);
-  const AudioPlayer = React.useMemo(() => theme?.elements?.AudioPlayer || AudioPlayerElement, [theme]);
-  const VideoPlayer = React.useMemo(() => theme?.elements?.VideoPlayer || VideoPlayerElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const {
-      value,
-      size = 'regular',
-      name,
-      IconDocument = IconMaterialDraft,
-      MediaProps,
-      ImageProps,
-      AudioProps,
-      VideoProps,
-      OtherProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const refs = {
-    root: React.useRef(undefined)
-  };
-  const onOpenMedia = React.useCallback(media => {
-    window.open(media.url || media.urlSmall, 'blank_');
-  }, []);
-  let element;
-  if (value) {
-    const mime = value.mime;
-    if (mime?.includes('image')) element = /*#__PURE__*/React.createElement(Image, _extends({
-      src: value?.url || value?.urlSmall || (is('string', value) ? value : ''),
-      maxWidth: "rg",
-      fullWidth: true
-    }, MediaProps, ImageProps, {
-      className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-item', 'onesy-SectionMedia-item-image'], MediaProps?.className, ImageProps?.className])
-    }));else if (mime?.includes('audio')) element = /*#__PURE__*/React.createElement(AudioPlayer, _extends({
-      size: size
-    }, value, MediaProps, AudioProps, {
-      className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-item', 'onesy-SectionMedia-item-audio'], MediaProps?.className, AudioProps?.className])
-    }));else if (mime?.includes('video')) element = /*#__PURE__*/React.createElement(VideoPlayer, _extends({
-      size: size
-    }, value, MediaProps, VideoProps, {
-      className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-item', 'onesy-SectionMedia-item-video'], MediaProps?.className, VideoProps?.className])
-    }));else element = /*#__PURE__*/React.createElement(Line, {
-      gap: 1,
-      className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-wrapper', 'onesy-SectionMedia-wrapper-other'], classes.wrapper, classes[`otherWrapper_size_${size}`]])
-    }, /*#__PURE__*/React.createElement(Line, _extends({
-      align: "center",
-      justify: "center",
-      onClick: () => onOpenMedia(value),
-      fullWidth: true
-    }, MediaProps, OtherProps, {
-      className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-item', 'onesy-SectionMedia-item-other'], MediaProps?.className, OtherProps?.className, classes.other, classes[`other_size_${size}`]])
-    }), /*#__PURE__*/React.createElement(Interaction, null), /*#__PURE__*/React.createElement(IconDocument, {
-      size: size === 'large' ? 44 : size === 'regular' ? 34 : 24
-    })));
-  }
-  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: "small",
-    align: "center",
-    className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-root', `onesy-SectionMedia-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    align: "center",
-    fullWidth: true
-  }, element, name && /*#__PURE__*/React.createElement(Type, {
-    version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3',
-    align: "center",
-    fullWidth: true,
-    className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-name'], classes.name])
-  }, cleanValue(value?.name || 'No name', {
-    capitalize: true
-  }))));
-});
-Element.displayName = 'onesy-SectionMedia';
-export default Element;