@onesy/ui-react 1.0.59 → 1.0.63

package/esm/ScreenCapture/ScreenCapture.js

@@ -1,402 +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 = ["tonal", "color", "nameDefault", "name", "onChangeName", "view", "entirePage", "free", "type", "quality", "onInit", "onView", "onEntirePage", "onFree", "onFreeSave", "onFreeClose", "IconView", "IconEntirePage", "IconFree", "IconDownload", "TextFieldProps", "TooltipProps", "IconButtonProps", "ImageCropProps", "Component", "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 { canvasCrop, download, is, isEnvironment, isOS, wait } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialFitScreen from '@onesy/icons-material-rounded-react/IconMaterialFitScreenW100';
-import IconMaterialDocumentScanner from '@onesy/icons-material-rounded-react/IconMaterialDocumentScannerW100';
-import IconMaterialCropFree from '@onesy/icons-material-rounded-react/IconMaterialCropFreeW100';
-import IconMaterialDownload from '@onesy/icons-material-rounded-react/IconMaterialDownloadW100';
-import TooltipElement from '../Tooltip';
-import SurfaceElement from '../Surface';
-import TextFieldElement from '../TextField';
-import IconButtonElement from '../IconButton';
-import ImageCropElement from '../ImageCrop';
-import PortalElement from '../Portal';
-import LineElement from '../Line';
-import useMediaQuery from '../useMediaQuery';
-import { IconDoneAnimated } from '../Buttons/Buttons';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    padding: `${theme.methods.space.value(2.5, 'px')} ${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`,
-    borderRadius: theme.methods.shape.radius.value('rg', 'px')
-  },
-  wrapper: {
-    inset: '0',
-    position: 'fixed',
-    background: '#000',
-    zIndex: theme.z_index.tooltip + 4
-  }
-}), {
-  name: 'onesy-ScreenCapture'
-});
-const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScreenCapture?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const ImageCrop = React.useMemo(() => theme?.elements?.ImageCrop || ImageCropElement, [theme]);
-  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [theme]);
-  const {
-      tonal = true,
-      color = 'primary',
-      nameDefault,
-      name: name_ = `onesy-screenshot.${props.type !== undefined ? props.type.split('/')[1] : 'png'}`,
-      onChangeName,
-      view = true,
-      entirePage = true,
-      free = true,
-      type = `image/png`,
-      quality = 1,
-      onInit: onInit_,
-      onView: onView_,
-      onEntirePage: onEntirePage_,
-      onFree: onFree_,
-      onFreeSave: onFreeSave_,
-      onFreeClose: onFreeClose_,
-      IconView = IconMaterialFitScreen,
-      IconEntirePage = IconMaterialDocumentScanner,
-      IconFree = IconMaterialCropFree,
-      IconDownload = IconMaterialDownload,
-      TextFieldProps,
-      TooltipProps,
-      IconButtonProps,
-      ImageCropProps = {
-        type: `image/png`,
-        quality: 1
-      },
-      Component = 'div',
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const [init, setInit] = React.useState(false);
-  const [name, setName] = React.useState(nameDefault !== undefined ? nameDefault : name_);
-  const [loading, setLoading] = React.useState([]);
-  const [done, setDone] = React.useState([]);
-  const [canvas, setCanvas] = React.useState();
-  const [canvasSelectorValue, setCanvasSelectorValue] = React.useState();
-  const [supported, setSupported] = React.useState(true);
-  const refs = {
-    root: React.useRef(null),
-    canvas: React.useRef(null),
-    canvasSelectorValue: React.useRef(null),
-    element: React.useRef(null)
-  };
-  const touch = useMediaQuery('(pointer: coarse)', {
-    element: refs.root.current
-  });
-  refs.canvas.current = canvas;
-  refs.canvasSelectorValue.current = canvasSelectorValue;
-  const onInit = React.useCallback(() => {
-    const value = !(touch || isOS('mobile'));
-    setInit(true);
-    setSupported(value);
-    if (is('function', onInit_)) onInit_(value);
-  }, [touch, onInit_]);
-  React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    const method = event => {
-      switch (event.key) {
-        case 'V':
-        case 'v':
-          if (event.metaKey && event.shiftKey) onView(event);
-          break;
-
-        // case 'E':
-        // case 'e':
-        //   if (event.metaKey && event.shiftKey) onEntirePage(event as any);
-
-        //   break;
-
-        case 'F':
-        case 'f':
-          if (event.metaKey && event.shiftKey) onFree(event);
-          break;
-        case 'S':
-        case 's':
-          if (event.metaKey) {
-            if (refs.canvas.current) onFreeSave(event);
-          }
-          break;
-        case 'Enter':
-          if (refs.canvas.current) onFreeSave(event);
-          break;
-        case 'Escape':
-          if (refs.canvas.current) onFreeClose(event);
-          break;
-        default:
-          break;
-      }
-    };
-    rootDocument.addEventListener('keydown', method);
-    onInit();
-    return () => {
-      // Clean up
-      rootDocument.removeEventListener('keydown', method);
-      if (refs.canvas.current) {
-        setCanvas('');
-        if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
-      }
-    };
-  }, []);
-  React.useEffect(() => {
-    if (init) {
-      if (name_ !== name) setName(name_);
-    }
-  }, [name_]);
-  React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    if (canvas) {
-      rootDocument.body.style.overflow = 'hidden';
-    } else {
-      setCanvasSelectorValue(false);
-      if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
-    }
-  }, [canvas]);
-  const onChange = value_ => {
-    // Update inner or controlled
-    if (!props.hasOwnProperty('value')) setName(value_);
-    if (is('function', onChangeName)) onChangeName(value_);
-  };
-  const trackToValue = React.useCallback(async function (track) {
-    let version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'canvas';
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    const canvasElement = document.createElement('canvas');
-    const {
-      width,
-      height
-    } = track.getSettings();
-    canvasElement.width = width || window.innerWidth;
-    canvasElement.height = height || window.innerHeight;
-
-    // Hide elements
-    const elements = Array.from(rootDocument.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
-      if (element.parentElement.classList.contains('onesy-Move-root')) return element.parentElement;
-      return element;
-    });
-    elements.forEach(item => item.style.visibility = 'hidden');
-
-    // Wait for media options window to hide
-    await wait(414);
-
-    // Draw the frame
-    canvasElement.getContext('2d').drawImage(refs.element.current, 0, 0);
-
-    // Unhide the elements
-    elements.forEach(item => item.style.removeProperty('visibility'));
-    if (version === 'canvas') return canvasElement;
-    const image = canvasElement.toDataURL(type, quality);
-    return image;
-  }, [type, quality]);
-  const make = React.useCallback(async function () {
-    let version = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image';
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    refs.element.current = rootDocument.createElement('video');
-    let tracks;
-    const cleanUp = () => {
-      // Stop tracks
-      (tracks || []).forEach(item => item.stop());
-
-      // Unload the element
-      refs.element.current = undefined;
-    };
-    try {
-      refs.element.current.srcObject = await window.navigator.mediaDevices.getDisplayMedia(_objectSpread({
-        preferCurrentTab: true
-      }, options));
-      const mediaStream = refs.element.current.srcObject;
-      if (!mediaStream) throw new Error('No media stream');
-
-      // Required to work
-      await refs.element.current.play();
-      tracks = mediaStream.getVideoTracks();
-      const track = tracks[0];
-      const value = await trackToValue(track, version);
-
-      // Clean up
-      cleanUp();
-      return value;
-    } catch (error) {
-      console.log('ScreenCapture make', error);
-
-      // Clean up
-      cleanUp();
-    }
-  }, []);
-  const onView = React.useCallback(async event => {
-    setLoading(items => [...items, 'view']);
-    try {
-      const image = await make();
-      download(name, image);
-    } catch (error) {
-      console.log('onView', error);
-    }
-    setLoading(items => items.filter(item => item !== 'view'));
-    setDone(items => [...items, 'view']);
-    setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'view'));
-    }, 1400);
-    if (is('function', onView_)) onView_(event);
-  }, [name, make]);
-
-  // const onEntirePage = async (event: React.MouseEvent<any>) => {
-  //   setLoading(items => [...items, 'entirePage']);
-
-  //   try {
-  //     const rootDocument = isEnvironment('browser') ? (refs.root.current?.ownerDocument || window.document) : undefined;
-
-  //     await elementToCanvas(rootDocument.body, {
-  //       response: 'download',
-
-  //       filter: ['.onesy-Widgets-root', '#onesy-screen-capture'],
-
-  //       download: {
-  //         name,
-  //         type,
-  //         quality
-  //       }
-  //     });
-  //   }
-  //   catch (error) {
-  //     console.log('onEntirePage', error);
-  //   }
-
-  //   setLoading(items => items.filter(item => item !== 'entirePage'));
-
-  //   setDone(items => [...items, 'entirePage']);
-
-  //   setTimeout(() => {
-  //     setDone(items => items.filter(item => item !== 'entirePage'));
-  //   }, 1400);
-
-  //   if (is('function', onEntirePage_)) onEntirePage_(event);
-  // };
-
-  const onFree = async event => {
-    setLoading(items => [...items, 'free']);
-
-    // Update canvas
-    try {
-      const valueCanvas = await make('canvas');
-      setCanvas(valueCanvas);
-    } catch (error) {
-      console.log('onFree', error);
-    }
-    setLoading(items => items.filter(item => item !== 'free'));
-    if (is('function', onFree_)) onFree_(event);
-  };
-  const onFreeSave = event => {
-    // Crop the canvas
-    const valueCanvas = canvasCrop(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
-
-    // Download the image from canvas datauri
-    // of the image type and quality, name
-    const uri = valueCanvas.toDataURL(type, quality);
-    download(name, uri, type);
-
-    // Clear the image
-    setCanvas('');
-    setDone(items => [...items, 'free']);
-    setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'free'));
-    }, 1400);
-    if (is('function', onFreeSave_)) onFreeSave_(event);
-  };
-  const onFreeClose = event => {
-    // Clear the image
-    setCanvas('');
-    if (is('function', onFreeClose_)) onFreeClose_(event);
-  };
-  const onImageCropSelectorChange = React.useCallback(values => {
-    setCanvasSelectorValue(values);
-  }, []);
-  const iconButtonProps = {
-    tonal,
-    color: 'inherit',
-    elevation: false
-  };
-  const textFieldProps = {
-    tonal,
-    color: 'inherit',
-    version: 'text',
-    size: 'small',
-    fullWidth: true
-  };
-  const tooltipProps = {
-    position: 'top',
-    portal: false,
-    interactive: false
-  };
-  if (!supported) return null;
-  const rootDocumentElement = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    id: "onesy-screen-capture",
-    tonal: tonal,
-    color: color,
-    gap: 0,
-    direction: "column",
-    align: "center",
-    Component: Line,
-    AdditionalProps: {
-      Component
-    },
-    className: classNames([staticClassName('ScreenCapture', theme) && ['onesy-ScreenCapture-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, view && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "View"
-  }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onView,
-    loading: loading.includes('view'),
-    disabled: done.includes('view')
-  }, iconButtonProps, IconButtonProps), done.includes('view') ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
-    add: true,
-    in: true
-  }) : /*#__PURE__*/React.createElement(IconView, null))), free && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: canvas ? 'Save' : 'Free form'
-  }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: event => canvas ? onFreeSave(event) : onFree(event),
-    loading: loading.includes('free'),
-    disabled: done.includes('free')
-  }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
-    add: true,
-    in: true
-  }) : canvas ? /*#__PURE__*/React.createElement(IconDownload, null) : /*#__PURE__*/React.createElement(IconFree, null)))), /*#__PURE__*/React.createElement(TextField, _extends({
-    label: "Name",
-    value: name,
-    onChange: onChange
-  }, textFieldProps, TextFieldProps)), canvas && /*#__PURE__*/React.createElement(Portal, {
-    element: rootDocumentElement.body
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper])
-  }, /*#__PURE__*/React.createElement(ImageCrop, _extends({
-    image: canvas,
-    onSelectorChange: onImageCropSelectorChange,
-    TooltipProps: {
-      portal: false
-    }
-  }, ImageCropProps)))));
-});
-ScreenCapture.displayName = 'onesy-ScreenCapture';
-export default ScreenCapture;

package/esm/SectionAction/SectionAction.js

@@ -1,58 +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", "text", "link", "to", "ButtonProps", "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 } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import SectionElement from '../Section/Section';
-import ButtonElement from '../Button';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {}
-}), {
-  name: 'onesy-SectionAction'
-});
-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?.onesySectionAction?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const {
-      size = 'regular',
-      text,
-      link,
-      to,
-      ButtonProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const navigate = isEnvironment('browser') && useNavigate();
-  const refs = {
-    root: React.useRef(undefined)
-  };
-  return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    className: classNames([staticClassName('SectionAction', theme) && ['onesy-SectionAction-root', `onesy-SectionAction-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Button, _extends({
-    tonal: true,
-    version: "filled",
-    size: size === 'large' ? 'regular' : size === 'regular' ? 'small' : 'small',
-    onClick: to || link ? () => to ? navigate(to) : window.open(link, 'blank') : undefined
-  }, ButtonProps, {
-    className: classNames([staticClassName('SectionAction', theme) && ['onesy-SectionAction-item-button'], ButtonProps?.className, classes.button])
-  }), text || 'Click here'));
-});
-Element.displayName = 'onesy-SectionAction';
-export default Element;

package/esm/SectionBoxes/SectionBoxes.js

@@ -1,218 +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", "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: {},
-  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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionBoxes?.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: values_ = [],
-      responsive = true,
-      ItemProps,
-      ItemsProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const navigate = isEnvironment('browser') && useNavigate();
-  const refs = {
-    root: React.useRef(undefined)
-  };
-
-  // 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(Line, _extends({
-      key: index,
-      gap: 1,
-      align: "flex-start",
-      justify: "center",
-      fullWidth: true
-    }, ItemProps, {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item'], ItemProps?.className, classes.item, classes[`item_size_${size}`], item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
-      style: _objectSpread({}, styleBackground)
-    }), urlVideo && /*#__PURE__*/React.createElement("video", {
-      autoPlay: true,
-      muted: true,
-      loop: true,
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-video'], classes.backgroundVideo])
-    }, /*#__PURE__*/React.createElement("source", {
-      src: urlVideo
-    })), item.overlay && /*#__PURE__*/React.createElement("div", {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-overlay'], classes.backgroundOverlay, item.overlayBlur && classes.backgroundOverlayBlur]),
-      style: _objectSpread({}, styleOverlay)
-    }), (item.name || item.description) && /*#__PURE__*/React.createElement(Line, _extends({
-      gap: 1,
-      align: "center",
-      fullWidth: true
-    }, item.propsWrapperText, {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-wrapper-text'], item.propsWrapperText?.className, classes.wrapperText])
-    }), item.name && /*#__PURE__*/React.createElement(Type, _extends({
-      version: size === 'large' ? 'h2' : size === 'regular' ? 'h3' : 't1',
-      align: "center",
-      fullWidth: true,
-      dangerouslySetInnerHTML: {
-        __html: textToInnerHTML(item.name)
-      }
-    }, item.propsName, {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-name'], item.propsName?.className, classes.text])
-    })), item.description && /*#__PURE__*/React.createElement(Type, _extends({
-      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-      align: "center",
-      fullWidth: true,
-      dangerouslySetInnerHTML: {
-        __html: textToInnerHTML(item.description)
-      }
-    }, item.propsDescription, {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-description'], item.propsDescription?.className, classes.text])
-    }))), item.buttonText && /*#__PURE__*/React.createElement(Line, _extends({
-      align: "center",
-      fullWidth: true
-    }, item.propsActions, {
-      className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-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('SectionBoxes', theme) && ['onesy-SectionBoxes-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('SectionBoxes', theme) && ['onesy-SectionBoxes-root', `onesy-SectionBoxes-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    align: "unset",
-    fullWidth: true,
-    direction: responsive ? {
-      default: 'row',
-      1100: 'column'
-    } : 'row'
-  }, ItemsProps, {
-    className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-items'], ItemsProps?.className, classes.items])
-  }), values?.map((item, index) => getItem(item, index))));
-});
-Element.displayName = 'onesy-SectionBoxes';
-export default Element;