@onesy/ui-react 1.0.172 → 1.0.174

package/ListSubheader/ListSubheader.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 _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _ListItem = _interopRequireDefault(require("../ListItem"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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; }
@@ -29,9 +29,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ListSubheader'
 });
-const ListSubheader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ListSubheader = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(6);
+  const $ = (0, _compilerRuntime.c)(5);
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyListSubheader) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const ListItem = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
@@ -45,22 +45,20 @@ const ListSubheader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } = useStyle();
   const t0 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ListSubheader", theme) && ["onesy-ListSubheader-root"], className, classes.root]);
   let t1;
-  if ($[0] !== ListItem || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== ListItem || $[1] !== children || $[2] !== other || $[3] !== t0) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
       secondary: children,
       className: t0
     }, other));
     $[0] = ListItem;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t0;
-    $[5] = t1;
+    $[3] = t0;
+    $[4] = t1;
   } else {
-    t1 = $[5];
+    t1 = $[4];
   }
   return t1;
-});
+};
 ListSubheader.displayName = 'onesy-ListSubheader';
 var _default = exports.default = ListSubheader;

package/MainProgress/MainProgress.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"));
@@ -13,6 +12,7 @@ var _styleReact = require("@onesy/style-react");
 var _useOpen = _interopRequireDefault(require("../useOpen"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _Context = _interopRequireDefault(require("./Context"));
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "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; }
@@ -45,7 +45,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-MainProgress'
 });
-const MainProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const MainProgress = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyMainProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -71,14 +71,16 @@ const MainProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       done
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
-    value: value
-  }, open.open && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)(['onesy-MainProgress-root', className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, {
-    className: classes.loader
-  })), children);
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
+    value: value,
+    children: [open.open && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      fullWidth: true,
+      className: (0, _styleReact.classNames)(['onesy-MainProgress-root', className, classes.root])
+    }, other), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        className: classes.loader
+      })
+    })), children]
+  });
+};
 var _default = exports.default = MainProgress;

package/MainProgressMaterial/MainProgressMaterial.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,6 +14,7 @@ var _Fade = _interopRequireDefault(require("../Fade"));
 var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
 var _Context = _interopRequireDefault(require("./Context"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["min", "max", "firstIncrement", "incrementMin", "incrementMax", "stepMin", "stepMax", "stepInterval", "onStart", "onIncrement", "onUpdate", "onDone", "fixed", "position", "TransitionComponent", "TransitionComponentProps", "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; }
@@ -43,7 +43,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-MainProgressMaterial'
 });
-const MainProgressMaterial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const MainProgressMaterial = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyMainProgressMaterial) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -174,17 +174,19 @@ const MainProgressMaterial = /*#__PURE__*/_react.default.forwardRef((props_, ref
   refs.value_.current.increment = increment;
   refs.value_.current.update = update;
   refs.value_.current.done = done;
-  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
-    value: refs.value_.current
-  }, /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
-    in: inProp,
-    onExited: onExited
-  }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement(LinearProgress, (0, _extends2.default)({
-    ref: ref,
-    value: value,
-    version: "determinate",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MainProgressMaterial', theme) && [`onesy-MainProgressMaterial-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
-  }, other, refs.linearProgress.current))), children);
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
+    value: refs.value_.current,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
+      in: inProp,
+      onExited: onExited
+    }, TransitionComponentProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgress, _objectSpread(_objectSpread({
+        value: value,
+        version: "determinate",
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MainProgressMaterial', theme) && [`onesy-MainProgressMaterial-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
+      }, other), refs.linearProgress.current))
+    })), children]
+  });
+};
 MainProgressMaterial.displayName = 'onesy-MainProgressMaterial';
 var _default = exports.default = MainProgressMaterial;

package/Markdown/Markdown.js

@@ -5,14 +5,14 @@ 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"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _utils2 = require("../utils");
-const _excluded = ["value", "render", "elementClassNames", "elementStyles", "onAdded", "onUpdate", "onStart", "Component", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "value", "render", "elementClassNames", "elementStyles", "onAdded", "onUpdate", "onStart", "Component", "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 => ({
@@ -178,11 +178,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Markdown'
 });
 const escapeRegExp = value => value.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
-const Markdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Markdown = props_ => {
   var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyMarkdown) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
+      ref,
       value,
       render,
       elementClassNames,
@@ -686,7 +687,7 @@ ${listItem(other_, level_1)}
       if ((0, _utils.is)('function', onUpdate)) onUpdate();
     }
   }, [init, value]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
     ref: item_15 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_15);else ref.current = item_15;
@@ -695,6 +696,6 @@ ${listItem(other_, level_1)}
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Markdown', theme) && ['onesy-Markdown-root'], className, classes.root])
   }, other));
-});
+};
 Markdown.displayName = 'onesy-Markdown';
 var _default = exports.default = Markdown;

package/Masonry/Masonry.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"));
@@ -14,7 +13,8 @@ var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["gap", "columns", "className", "style", "noMasonry", "NoMasonryProps", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "gap", "columns", "className", "style", "noMasonry", "NoMasonryProps", "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 => ({
@@ -24,12 +24,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Masonry'
 });
-const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Masonry = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyMasonry) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
+      ref,
       gap: gap_,
       columns: columns_,
       className,
@@ -158,7 +159,7 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   if (!useMasonry) {
     styles.item.width = columns === 1 ? '100%' : `calc(${100 / columns}% - ${gap * theme.space.unit * (columns - 1) / columns}px)`;
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread(_objectSpread({
       ref: item_1 => {
         if (ref) {
           if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
@@ -169,17 +170,19 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       direction: "row",
       wrap: "wrap",
       fullWidth: true
-    }, NoMasonryProps, {
+    }, NoMasonryProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-root', 'onesy-Masonry-noMasonry'], NoMasonryProps === null || NoMasonryProps === void 0 ? void 0 : NoMasonryProps.className, className, classes.root]),
       style: _objectSpread(_objectSpread({}, style), {}, {
         height: 'auto'
       }, NoMasonryProps === null || NoMasonryProps === void 0 ? void 0 : NoMasonryProps.style)
-    }, other), children.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
-      key: index_0,
-      style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
-    }))));
+    }, other), {}, {
+      children: children.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
+        key: index_0,
+        style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
+      })))
+    }));
   }
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_3 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
@@ -194,17 +197,18 @@ const Masonry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     fullWidth: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-root'], className, classes.root]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), _react.default.Children.toArray(children).map((item_4, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
-    key: index_1,
-    style: _objectSpread(_objectSpread({}, styles.item), item_4.props.style)
-  }))), columns > 1 && new Array(columns - 1).fill(true).map((item_5, index_2) => /*#__PURE__*/_react.default.createElement("div", {
-    key: index_2,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-line-break']]),
-    style: {
-      flex: '1 1 100%',
-      order: index_2 + 1
-    }
-  })));
-});
+  }, other), {}, {
+    children: [_react.default.Children.toArray(children).map((item_4, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
+      key: index_1,
+      style: _objectSpread(_objectSpread({}, styles.item), item_4.props.style)
+    }))), columns > 1 && new Array(columns - 1).fill(true).map((item_5, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Masonry', theme) && ['onesy-Masonry-line-break']]),
+      style: {
+        flex: '1 1 100%',
+        order: index_2 + 1
+      }
+    }, index_2))]
+  }));
+};
 Masonry.displayName = 'onesy-Masonry';
 var _default = exports.default = Masonry;