@onesy/ui-react 1.0.172 → 1.0.173

package/ScreenCapture/ScreenCapture.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -25,7 +24,8 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _Buttons = require("../Buttons/Buttons");
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -42,7 +42,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ScreenCapture'
 });
-const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ScreenCapture = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _refs$root$current5;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -55,6 +55,7 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const ImageCrop = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ImageCrop) || _ImageCrop.default;
   const Portal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Portal) || _Portal.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       nameDefault,
@@ -351,7 +352,7 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   if (!supported) return null;
   const rootDocumentElement = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_6 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_6);else ref.current = item_6;
@@ -369,44 +370,57 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       Component
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-root'], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, view && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('View')
-  }, tooltipProps, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onView,
-    loading: loading.includes('view'),
-    disabled: done.includes('view')
-  }, iconButtonProps, IconButtonProps), done.includes('view') ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
-    add: true,
-    in: true
-  }) : /*#__PURE__*/_react.default.createElement(IconView, null))), free && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: canvas ? l('Save') : l('Free form')
-  }, tooltipProps, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: event_4 => canvas ? onFreeSave(event_4) : onFree(event_4),
-    loading: loading.includes('free'),
-    disabled: done.includes('free')
-  }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
-    add: true,
-    in: true
-  }) : canvas ? /*#__PURE__*/_react.default.createElement(IconDownload, null) : /*#__PURE__*/_react.default.createElement(IconFree, null)))), /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
-    name: l('Name'),
-    value: name,
-    onChange: onChange
-  }, textFieldProps, TextFieldProps)), canvas && /*#__PURE__*/_react.default.createElement(Portal, {
-    element: rootDocumentElement.body
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper])
-  }, /*#__PURE__*/_react.default.createElement(ImageCrop, (0, _extends2.default)({
-    image: canvas,
-    onSelectorChange: onImageCropSelectorChange,
-    TooltipProps: {
-      portal: false
-    }
-  }, ImageCropProps)))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      children: [view && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread(_objectSpread({
+        name: l('View')
+      }, tooltipProps), TooltipProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
+          onClick: onView,
+          loading: loading.includes('view'),
+          disabled: done.includes('view')
+        }, iconButtonProps), IconButtonProps), {}, {
+          children: done.includes('view') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
+            add: true,
+            in: true
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconView, {})
+        }))
+      })), free && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread(_objectSpread({
+        name: canvas ? l('Save') : l('Free form')
+      }, tooltipProps), TooltipProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
+          onClick: event_4 => canvas ? onFreeSave(event_4) : onFree(event_4),
+          loading: loading.includes('free'),
+          disabled: done.includes('free')
+        }, iconButtonProps), IconButtonProps), {}, {
+          children: done.includes('free') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
+            add: true,
+            in: true
+          }) : canvas ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDownload, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFree, {})
+        }))
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread(_objectSpread({
+      name: l('Name'),
+      value: name,
+      onChange: onChange
+    }, textFieldProps), TextFieldProps)), canvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(Portal, {
+      element: rootDocumentElement.body,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageCrop, _objectSpread({
+          image: canvas,
+          onSelectorChange: onImageCropSelectorChange,
+          TooltipProps: {
+            portal: false
+          }
+        }, ImageCropProps))
+      })
+    })]
+  }));
+};
 ScreenCapture.displayName = 'onesy-ScreenCapture';
 var _default = exports.default = ScreenCapture;

package/Section/Section.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -16,7 +15,8 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Reveal = _interopRequireDefault(require("../Reveal"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["themed", "title", "description", "show", "reveal", "backgroundColor", "backgroundGradient", "backgroundImage", "backgroundVideo", "overlay", "overlayBlur", "size", "margin", "marginVertical", "padding", "maxWidth", "start", "end", "MainProps", "RevealProps", "TitleProps", "DescriptionProps", "HeaderProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "themed", "title", "description", "show", "reveal", "backgroundColor", "backgroundGradient", "backgroundImage", "backgroundVideo", "overlay", "overlayBlur", "size", "margin", "marginVertical", "padding", "maxWidth", "start", "end", "MainProps", "RevealProps", "TitleProps", "DescriptionProps", "HeaderProps", "className", "children"];
 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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -233,7 +233,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Section'
 });
-const Section = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Section = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySection) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_), props_ === null || props_ === void 0 ? void 0 : props_.AdditionalProps);
@@ -241,6 +241,7 @@ const Section = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const Reveal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Reveal) || _Reveal.default;
   const {
+      ref,
       themed = true,
       title: title_,
       description: description_,
@@ -350,58 +351,67 @@ const Section = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     wrapperProps = _objectSpread({}, RevealProps);
   }
   if (show !== undefined && !show) return null;
-  return /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item_0 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
-      }
-      refs.root.current = item_0;
-    },
-    gap: 4,
-    direction: "column",
-    align: "center",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-root', `onesy-Section-size-${size}`], className, classes.root, margin !== false && margin && (classes[`margin_${margin}`] || classes[`margin_${size}`]), marginVertical !== false && !margin && marginVertical && (classes[`margin_vertical_${marginVertical}`] || classes[`margin_vertical_${size}`]), padding !== false && (classes[`padding_${padding}`] || classes[`padding_${size}`])])
-  }, other), start, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([classes.background, backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
-    style: _objectSpread({}, styleBackground)
-  }, urlVideo && /*#__PURE__*/_react.default.createElement("video", {
-    autoPlay: true,
-    muted: true,
-    loop: true,
-    className: classes.backgroundVideo
-  }, /*#__PURE__*/_react.default.createElement("source", {
-    src: urlVideo
-  })), overlay && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([classes.backgroundOverlay, overlayBlur && classes.backgroundOverlayBlur]),
-    style: _objectSpread({}, styleOverlay)
-  })), (title || description) && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 1,
-    align: "center",
-    fullWidth: true
-  }, HeaderProps, {
-    className: (0, _styleReact.classNames)([HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, maxWidth && classes[`maxWidth_${maxWidth}`]])
-  }), (0, _utils.is)('string', title) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3',
-    align: "center"
-  }, TitleProps, {
-    dangerouslySetInnerHTML: {
-      __html: (0, _utils.textToInnerHTML)(title)
-    }
-  })), (0, _utils.is)('string', description) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-    align: "center"
-  }, DescriptionProps, {
-    dangerouslySetInnerHTML: {
-      __html: (0, _utils.textToInnerHTML)(description)
-    }
-  }))), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: "column",
-    align: "center",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, maxWidth && classes[`maxWidth_${maxWidth}`]])
-  }, MainProps), children), end));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+      ref: item_0 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
+        }
+        refs.root.current = item_0;
+      },
+      gap: 4,
+      direction: "column",
+      align: "center",
+      fullWidth: true,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-root', `onesy-Section-size-${size}`], className, classes.root, margin !== false && margin && (classes[`margin_${margin}`] || classes[`margin_${size}`]), marginVertical !== false && !margin && marginVertical && (classes[`margin_vertical_${marginVertical}`] || classes[`margin_vertical_${size}`]), padding !== false && (classes[`padding_${padding}`] || classes[`padding_${size}`])])
+    }, other), {}, {
+      children: [start, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _styleReact.classNames)([classes.background, backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
+        style: _objectSpread({}, styleBackground),
+        children: [urlVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+          autoPlay: true,
+          muted: true,
+          loop: true,
+          className: classes.backgroundVideo,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+            src: urlVideo
+          })
+        }), overlay && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _styleReact.classNames)([classes.backgroundOverlay, overlayBlur && classes.backgroundOverlayBlur]),
+          style: _objectSpread({}, styleOverlay)
+        })]
+      }), (title || description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+        gap: 1,
+        align: "center",
+        fullWidth: true
+      }, HeaderProps), {}, {
+        className: (0, _styleReact.classNames)([HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, maxWidth && classes[`maxWidth_${maxWidth}`]]),
+        children: [(0, _utils.is)('string', title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+          version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3',
+          align: "center"
+        }, TitleProps), {}, {
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.textToInnerHTML)(title)
+          }
+        })), (0, _utils.is)('string', description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+          align: "center"
+        }, DescriptionProps), {}, {
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.textToInnerHTML)(description)
+          }
+        }))]
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        gap: 2,
+        direction: "column",
+        align: "center",
+        fullWidth: true,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, maxWidth && classes[`maxWidth_${maxWidth}`]])
+      }, MainProps), {}, {
+        children: children
+      })), end]
+    }))
+  }));
+};
 Section.displayName = 'onesy-Section';
 var _default = exports.default = Section;

package/SectionAction/SectionAction.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -15,7 +14,8 @@ var _styleReact = require("@onesy/style-react");
 var _Section = _interopRequireDefault(require("../Section/Section"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils2 = require("../utils");
-const _excluded = ["size", "text", "link", "to", "ButtonProps", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -23,7 +23,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SectionAction'
 });
-const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Element = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -31,6 +31,7 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Section = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Section) || _Section.default;
   const Button = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Button) || _Button.default;
   const {
+      ref,
       size = 'regular',
       text,
       link,
@@ -46,7 +47,7 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const refs = {
     root: _react.default.useRef(undefined)
   };
-  return /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
@@ -54,14 +55,17 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       refs.root.current = item;
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionAction', theme) && ['onesy-SectionAction-root', `onesy-SectionAction-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionAction', theme) && ['onesy-SectionAction-item-button'], ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className, classes.button])
-  }), text || l('Click here')));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+      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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionAction', theme) && ['onesy-SectionAction-item-button'], ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className, classes.button]),
+      children: text || l('Click here')
+    }))
+  }));
+};
 Element.displayName = 'onesy-SectionAction';
 var _default = exports.default = Element;

package/SectionBoxes/SectionBoxes.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,7 +16,8 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils2 = require("../utils");
-const _excluded = ["size", "values", "responsive", "ItemProps", "ItemsProps", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -76,7 +76,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SectionBoxes'
 });
-const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Element = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -86,6 +86,7 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const Button = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Button) || _Button.default;
   const {
+      ref,
       size = 'regular',
       values: values_ = [],
       responsive = true,
@@ -147,64 +148,68 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       });
     }
     const urlVideo = ((_item$backgroundVideo = item.backgroundVideo) === null || _item$backgroundVideo === void 0 ? void 0 : _item$backgroundVideo.url) || ((_item$backgroundVideo2 = item.backgroundVideo) === null || _item$backgroundVideo2 === void 0 ? void 0 : _item$backgroundVideo2.urlSmall) || ((0, _utils.is)('string', item.backgroundVideo) ? item.backgroundVideo : '');
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      key: index,
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       gap: 1,
       align: "flex-start",
       justify: "center",
       fullWidth: true
-    }, ItemProps, {
+    }, ItemProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item'], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, classes.item, classes[`item_size_${size}`], item.backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
-      style: _objectSpread({}, styleBackground)
-    }), urlVideo && /*#__PURE__*/_react.default.createElement("video", {
-      autoPlay: true,
-      muted: true,
-      loop: true,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-video'], classes.backgroundVideo])
-    }, /*#__PURE__*/_react.default.createElement("source", {
-      src: urlVideo
-    })), item.overlay && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-overlay'], classes.backgroundOverlay, item.overlayBlur && classes.backgroundOverlayBlur]),
-      style: _objectSpread({}, styleOverlay)
-    }), (item.name || item.description) && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      gap: 1,
-      align: "center",
-      fullWidth: true
-    }, item.propsWrapperText, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-wrapper-text'], (_item$propsWrapperTex = item.propsWrapperText) === null || _item$propsWrapperTex === void 0 ? void 0 : _item$propsWrapperTex.className, classes.wrapperText])
-    }), item.name && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-      version: size === 'large' ? 'h2' : size === 'regular' ? 'h3' : 't1',
-      align: "center",
-      fullWidth: true,
-      dangerouslySetInnerHTML: {
-        __html: (0, _utils.textToInnerHTML)(item.name)
-      }
-    }, item.propsName, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-name'], (_item$propsName = item.propsName) === null || _item$propsName === void 0 ? void 0 : _item$propsName.className, classes.text])
-    })), item.description && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-      align: "center",
-      fullWidth: true,
-      dangerouslySetInnerHTML: {
-        __html: (0, _utils.textToInnerHTML)(item.description)
-      }
-    }, item.propsDescription, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-description'], (_item$propsDescriptio = item.propsDescription) === null || _item$propsDescriptio === void 0 ? void 0 : _item$propsDescriptio.className, classes.text])
-    }))), item.buttonText && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      align: "center",
-      fullWidth: true
-    }, item.propsActions, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-actions'], (_item$propsActions = item.propsActions) === null || _item$propsActions === void 0 ? void 0 : _item$propsActions.className, classes.actions])
-    }), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-      version: "filled",
-      color: "primary",
-      size: size,
-      onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
-    }, item.propsButton, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-button'], (_item$propsButton = item.propsButton) === null || _item$propsButton === void 0 ? void 0 : _item$propsButton.className, classes.button])
-    }), item.buttonText || l('Click here'))));
+      style: _objectSpread({}, styleBackground),
+      children: [urlVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-video'], classes.backgroundVideo]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+          src: urlVideo
+        })
+      }), item.overlay && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-background-overlay'], classes.backgroundOverlay, item.overlayBlur && classes.backgroundOverlayBlur]),
+        style: _objectSpread({}, styleOverlay)
+      }), (item.name || item.description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+        gap: 1,
+        align: "center",
+        fullWidth: true
+      }, item.propsWrapperText), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-wrapper-text'], (_item$propsWrapperTex = item.propsWrapperText) === null || _item$propsWrapperTex === void 0 ? void 0 : _item$propsWrapperTex.className, classes.wrapperText]),
+        children: [item.name && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+          version: size === 'large' ? 'h2' : size === 'regular' ? 'h3' : 't1',
+          align: "center",
+          fullWidth: true,
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.textToInnerHTML)(item.name)
+          }
+        }, item.propsName), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-name'], (_item$propsName = item.propsName) === null || _item$propsName === void 0 ? void 0 : _item$propsName.className, classes.text])
+        })), item.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+          align: "center",
+          fullWidth: true,
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.textToInnerHTML)(item.description)
+          }
+        }, item.propsDescription), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-description'], (_item$propsDescriptio = item.propsDescription) === null || _item$propsDescriptio === void 0 ? void 0 : _item$propsDescriptio.className, classes.text])
+        }))]
+      })), item.buttonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        align: "center",
+        fullWidth: true
+      }, item.propsActions), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-actions'], (_item$propsActions = item.propsActions) === null || _item$propsActions === void 0 ? void 0 : _item$propsActions.className, classes.actions]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+          version: "filled",
+          color: "primary",
+          size: size,
+          onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
+        }, item.propsButton), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-item-button'], (_item$propsButton = item.propsButton) === null || _item$propsButton === void 0 ? void 0 : _item$propsButton.className, classes.button]),
+          children: item.buttonText || l('Click here')
+        }))
+      }))]
+    }), index);
   };
-  return /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -214,17 +219,20 @@ const Element = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     maxWidth: false,
     padding: !(values !== null && values !== void 0 && values.length),
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-root', `onesy-SectionBoxes-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    align: "unset",
-    fullWidth: true,
-    direction: responsive ? {
-      default: 'row',
-      1100: 'column'
-    } : 'row'
-  }, ItemsProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-items'], ItemsProps === null || ItemsProps === void 0 ? void 0 : ItemsProps.className, classes.items])
-  }), values === null || values === void 0 ? void 0 : values.map((item_1, index_0) => getItem(item_1, index_0))));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      gap: 0,
+      align: "unset",
+      fullWidth: true,
+      direction: responsive ? {
+        default: 'row',
+        1100: 'column'
+      } : 'row'
+    }, ItemsProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SectionBoxes', theme) && ['onesy-SectionBoxes-items'], ItemsProps === null || ItemsProps === void 0 ? void 0 : ItemsProps.className, classes.items]),
+      children: values === null || values === void 0 ? void 0 : values.map((item_1, index_0) => getItem(item_1, index_0))
+    }))
+  }));
+};
 Element.displayName = 'onesy-SectionBoxes';
 var _default = exports.default = Element;