@onesy/ui-react 1.0.171 → 1.0.173

package/PieChart/PieChart.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"));
@@ -18,7 +17,8 @@ var _Chart = _interopRequireDefault(require("../Chart"));
 var _Path = _interopRequireDefault(require("../Path"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
   _excluded2 = ["item", "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; }
@@ -59,7 +59,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-PieChart'
 });
-const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const PieChart = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -70,6 +70,7 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Chart = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Chart) || _Chart.default;
   const Path = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Path) || _Path.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       values,
@@ -129,20 +130,23 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       tone = 'main',
       name = 'No name'
     } = item_0;
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
+    }, LegendItemProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-legend-item'], className_, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
-    }, other_), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, other_), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -158,7 +162,7 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       const legend_ = values.map(item_1 => {
         return {
           item: item_1,
-          element: /*#__PURE__*/_react.default.createElement(LegendItem, {
+          element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {
             item: item_1
           })
         };
@@ -223,30 +227,33 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
         return {
           item: item_2,
-          element: /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-            d: d,
-            fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
-            stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
-            strokeWidth: gap
-          }, PathProps, {
-            style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
-              opacity: 0,
-              transform: 'scale(0)'
-            }), {}, {
-              transformBox: 'fill-box',
-              transformOrigin: 'center'
-            }, refs.pathStyle.current)
-          })), partPercentage >= 7 && /*#__PURE__*/_react.default.createElement("text", {
-            x: angleTextCoordinates.x,
-            y: angleTextCoordinates.y,
-            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
-            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
-            style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
-              opacity: 0
-            }), refs.animate.current && refs.init.current === 'animated' && {
-              opacity: 1
-            }), refs.pathStyle.current)
-          }, `${partPercentage.toFixed(1)}%`.replace('.0%', '%')))
+          element: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
+              d: d,
+              fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
+              stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
+              strokeWidth: gap
+            }, PathProps), {}, {
+              style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+                opacity: 0,
+                transform: 'scale(0)'
+              }), {}, {
+                transformBox: 'fill-box',
+                transformOrigin: 'center'
+              }, refs.pathStyle.current)
+            })), partPercentage >= 7 && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
+              x: angleTextCoordinates.x,
+              y: angleTextCoordinates.y,
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
+              fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
+              style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+                opacity: 0
+              }), refs.animate.current && refs.init.current === 'animated' && {
+                opacity: 1
+              }), refs.pathStyle.current),
+              children: `${partPercentage.toFixed(1)}%`.replace('.0%', '%')
+            })]
+          })
         };
       });
 
@@ -301,54 +308,64 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const valueValue = values__[0];
     const valuePercentage = (valueValue / valueTotal_0 * 100).toFixed(1).replace('.0', '');
     return {
-      element: /*#__PURE__*/_react.default.createElement(Line, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
         tonal: tonal,
         color: color,
         elevation: 1,
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-append'], classes.append])
-      }, /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
-        style: {
-          background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
-        }
-      }), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, name_0)), /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 0.4,
-        direction: "column"
-      }, /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, (names === null || names === void 0 ? void 0 : names.value) || l('Value')), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, valueValue)), /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, (names === null || names === void 0 ? void 0 : names.percentage) || l('Percentage')), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, valuePercentage, "%"))))
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-append'], classes.append]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
+            style: {
+              background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b3",
+            children: name_0
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0.4,
+          direction: "column",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: (names === null || names === void 0 ? void 0 : names.value) || l('Value')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b3",
+              children: valueValue
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: (names === null || names === void 0 ? void 0 : names.percentage) || l('Percentage')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+              version: "b3",
+              children: [valuePercentage, "%"]
+            })]
+          })]
+        })]
+      })
     };
   };
-  return /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chart, _objectSpread({
     ref: item_3 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
@@ -370,6 +387,6 @@ const PieChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     noMain: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PieChart', theme) && ['onesy-PieChart-root'], className, classes.root])
   }, other));
-});
+};
 PieChart.displayName = 'onesy-PieChart';
 var _default = exports.default = PieChart;

package/Placeholder/Placeholder.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 _Surface = _interopRequireDefault(require("../Surface"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "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; }
@@ -86,7 +86,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Placeholder'
 });
-const Placeholder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Placeholder = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
   const $ = (0, _compilerRuntime.c)(12);
   const theme = (0, _styleReact.useOnesyTheme)();
@@ -133,9 +133,10 @@ const Placeholder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t6;
   if ($[3] !== children || $[4] !== classes.children || $[5] !== theme) {
-    t6 = children && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)("Placeholder", theme) && ["onesy-Placeholder-children"], classes.children])
-    }, children);
+    t6 = children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)("Placeholder", theme) && ["onesy-Placeholder-children"], classes.children]),
+      children: children
+    });
     $[3] = children;
     $[4] = classes.children;
     $[5] = theme;
@@ -145,12 +146,13 @@ const Placeholder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t7;
   if ($[7] !== Surface || $[8] !== color || $[9] !== t5 || $[10] !== t6) {
-    t7 = /*#__PURE__*/_react.default.createElement(Surface, {
+    t7 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
       version: "text",
       tonal: false,
       color: color,
-      className: t5
-    }, t6);
+      className: t5,
+      children: t6
+    });
     $[7] = Surface;
     $[8] = color;
     $[9] = t5;
@@ -159,11 +161,12 @@ const Placeholder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } else {
     t7 = $[11];
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
     className: t4,
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), t7);
-});
+  }, other), {}, {
+    children: t7
+  }));
+};
 Placeholder.displayName = 'onesy-Placeholder';
 var _default = exports.default = Placeholder;

package/Portal/Portal.js

@@ -7,32 +7,55 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
-const _excluded = ["element", "children"];
+const _excluded = ["ref", "element", "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 Portal = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Portal = props_ => {
   var _theme$ui, _theme$ui2;
+  const $ = (0, _compilerRuntime.c)(4);
   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.onesyPortal) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  const {
-      element,
-      children
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
-    ref: item => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+  const t0 = 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;
+  const t1 = 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.onesyPortal) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default;
+  let t2;
+  if ($[0] !== props_ || $[1] !== t0 || $[2] !== t1) {
+    const props = _objectSpread(_objectSpread(_objectSpread({}, t0), t1), props_);
+    const {
+        ref,
+        element,
+        children
+      } = props,
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+    t2 = /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
+      ref: item => {
+        if (ref) {
+          if ((0, _utils.is)("function", ref)) {
+            ref(item);
+          } else {
+            ref.current = item;
+          }
+        }
+        if (children.ref) {
+          if ((0, _utils.is)("function", children.ref)) {
+            children.ref(item);
+          } else {
+            children.ref.current = item;
+          }
+        }
       }
-      if (children.ref) {
-        if ((0, _utils.is)('function', children.ref)) children.ref(item);else children.ref.current = item;
-      }
-    }
-  }, other)), element);
-});
+    }, other)), element);
+    $[0] = props_;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+};
 Portal.displayName = 'onesy-Portal';
 var _default = exports.default = Portal;

package/Properties/Properties.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");
@@ -14,6 +13,7 @@ var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line/Line"));
 var _Property = _interopRequireDefault(require("../Property"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "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; }
@@ -40,9 +40,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Properties'
 });
-const Properties = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Properties = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _filter;
-  const $ = (0, _compilerRuntime.c)(8);
+  const $ = (0, _compilerRuntime.c)(7);
   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.onesyProperties) === 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;
@@ -72,36 +72,35 @@ const Properties = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t5 = size === "large" ? 1.5 : size === "regular" ? 1 : 0.5;
   const t6 = true;
   const t7 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Properties", theme) && ["onesy-Properties-root", `onesy-Properties-version-${version}`, `onesy-Properties-size-${size}`], className, classes.root, maxWidth && classes[`maxWidth_${maxWidth}`]]);
-  const t8 = values === null || values === void 0 || (_filter = values.filter(Boolean)) === null || _filter === void 0 ? void 0 : _filter.map((item_0, index) => /*#__PURE__*/_react.default.createElement(Property, (0, _extends2.default)({
-    key: index,
+  const t8 = values === null || values === void 0 || (_filter = values.filter(Boolean)) === null || _filter === void 0 ? void 0 : _filter.map((item_0, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Property, _objectSpread(_objectSpread({
     version: version,
     size: size,
     name: item_0.name,
     value: item_0.value,
     separator: item_0.separator
-  }, PropertyProps, item_0.props)));
+  }, PropertyProps), item_0.props), index));
   let t9;
-  if ($[0] !== Line || $[1] !== other || $[2] !== ref || $[3] !== t4 || $[4] !== t5 || $[5] !== t7 || $[6] !== t8) {
-    t9 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Line || $[1] !== other || $[2] !== t4 || $[3] !== t5 || $[4] !== t7 || $[5] !== t8) {
+    t9 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
       gap: t4,
       rowGap: t5,
       fullWidth: t6,
       className: t7
-    }, other), t8);
+    }, other), {}, {
+      children: t8
+    }));
     $[0] = Line;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t4;
-    $[4] = t5;
-    $[5] = t7;
-    $[6] = t8;
-    $[7] = t9;
+    $[2] = t4;
+    $[3] = t5;
+    $[4] = t7;
+    $[5] = t8;
+    $[6] = t9;
   } else {
-    t9 = $[7];
+    t9 = $[6];
   }
   return t9;
-});
+};
 Properties.displayName = 'onesy-Properties';
 var _default = exports.default = Properties;
 function _temp(item) {

package/Property/Property.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 _Line = _interopRequireDefault(require("../Line/Line"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["version", "size", "name", "value", "separator", "responsive", "mediaQuery", "ItemProps", "NameProps", "NameWrapperProps", "ValueProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "version", "size", "name", "value", "separator", "responsive", "mediaQuery", "ItemProps", "NameProps", "NameWrapperProps", "ValueProps", "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 => ({
@@ -55,13 +55,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Property'
 });
-const Property = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Property = 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.onesyProperty) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
+      ref,
       version: version_ = 'row-30',
       size = 'regular',
       name,
@@ -107,7 +108,7 @@ const Property = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } else if (['row-20', 'row-30', 'row-40', 'row-50', 'row-between'].includes(version)) {
     propsRoot.justify = 'space-between';
   }
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
@@ -116,18 +117,24 @@ const Property = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     },
     fullWidth: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Property', theme) && ['onesy-Property-root', `onesy-Property-version-${version}`, `onesy-Property-size-${size}`], className, classes.root, classes[`version_${version}`]])
-  }, propsRoot, other), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    direction: "row"
-  }, NameWrapperProps), (0, _utils.is)('simple', name) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
-  }, ItemProps, NameProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Property', theme) && ['onesy-Property-name'], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.text, classes.name])
-  }), name) : name, separator), (0, _utils.is)('simple', value) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, ItemProps, ValueProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Property', theme) && ['onesy-Property-name'], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, ValueProps === null || ValueProps === void 0 ? void 0 : ValueProps.className, classes.text, classes.name])
-  }), value) : value);
-});
+  }, propsRoot), other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+      gap: 0,
+      direction: "row"
+    }, NameWrapperProps), {}, {
+      children: [(0, _utils.is)('simple', name) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+        version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
+      }, ItemProps), NameProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Property', theme) && ['onesy-Property-name'], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.text, classes.name]),
+        children: name
+      })) : name, separator]
+    })), (0, _utils.is)('simple', value) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+    }, ItemProps), ValueProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Property', theme) && ['onesy-Property-name'], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, ValueProps === null || ValueProps === void 0 ? void 0 : ValueProps.className, classes.text, classes.name]),
+      children: value
+    })) : value]
+  }));
+};
 Property.displayName = 'onesy-Property';
 var _default = exports.default = Property;