@onesy/ui-react 1.0.172 → 1.0.173

package/ColorTextField/ColorTextField.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -18,11 +17,12 @@ var _FormRow = _interopRequireDefault(require("../FormRow"));
 var _Slider = _interopRequireDefault(require("../Slider"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
-  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
+  _excluded2 = ["ref", "name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
 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 SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SliderInput = props => {
   var _theme$elements, _theme$elements2, _theme$elements3;
   const $ = (0, _compilerRuntime.c)(43);
   const theme = (0, _styleReact.useOnesyTheme)();
@@ -91,9 +91,10 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
   let t4;
   if ($[12] !== Type || $[13] !== min) {
-    t4 = /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, min);
+    t4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      version: "b3",
+      children: min
+    });
     $[12] = Type;
     $[13] = min;
     $[14] = t4;
@@ -114,9 +115,10 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
   let t6;
   if ($[18] !== Type || $[19] !== max) {
-    t6 = /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, max);
+    t6 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      version: "b3",
+      children: max
+    });
     $[18] = Type;
     $[19] = max;
     $[20] = t6;
@@ -158,7 +160,7 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
   let t10;
   if ($[29] !== Slider || $[30] !== max || $[31] !== min || $[32] !== onChange || $[33] !== other || $[34] !== t8 || $[35] !== t9 || $[36] !== value) {
-    t10 = /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+    t10 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       value: value,
       onChange: onChange,
       valueDefault: 100,
@@ -168,7 +170,7 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       tooltip: true,
       marks: t8,
       labels: true
-    }, other, {
+    }, other), {}, {
       style: t9
     }));
     $[29] = Slider;
@@ -185,12 +187,13 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
   let t11;
   if ($[38] !== FormRow || $[39] !== t10 || $[40] !== t2 || $[41] !== t3) {
-    t11 = /*#__PURE__*/_react.default.createElement(FormRow, {
+    t11 = /*#__PURE__*/(0, _jsxRuntime.jsx)(FormRow, {
       gap: 1,
       description: t2,
       fullWidth: true,
-      className: t3
-    }, t10);
+      className: t3,
+      children: t10
+    });
     $[38] = FormRow;
     $[39] = t10;
     $[40] = t2;
@@ -200,7 +203,7 @@ const SliderInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     t11 = $[42];
   }
   return t11;
-});
+};
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
     margin: '0',
@@ -237,7 +240,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ColorTextField'
 });
-const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ColorTextField = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -245,6 +248,7 @@ const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Line = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Line) || _Line.default;
   const TextField = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.TextField) || _TextField.default;
   const {
+      ref,
       name,
       version = 'outlined',
       size = 'regular',
@@ -322,14 +326,15 @@ const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange();
     }, 14);
   };
-  const root = /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
+  const root = /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread({
     name: name,
     value: opacity ? valueColor : value,
     onChange: opacity ? onChangeColor : onChange,
     version: version,
     size: size,
     endVerticalAlign: "center",
-    end: /*#__PURE__*/_react.default.createElement("input", {
+    end: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: ref,
       type: "color",
       value: opacity ? valueColor : value,
       onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
@@ -340,19 +345,20 @@ const ColorTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     style: style
   }, !opacity && other));
   if (opacity) {
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref,
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       gap: 1,
       fullWidth: true
-    }, WrapperProps), root, /*#__PURE__*/_react.default.createElement(SliderInput, {
-      name: l('Opacity'),
-      value: valueOpacity,
-      onChange: onChangeOpacity,
-      min: 0,
-      max: 100
+    }, WrapperProps), {}, {
+      children: [root, /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderInput, {
+        name: l('Opacity'),
+        value: valueOpacity,
+        onChange: onChangeOpacity,
+        min: 0,
+        max: 100
+      })]
     }));
   }
   return root;
-});
+};
 ColorTextField.displayName = 'onesy-ColorTextField';
 var _default = exports.default = ColorTextField;

package/ColumnChart/ColumnChart.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");
@@ -15,6 +14,7 @@ var _styleReact = require("@onesy/style-react");
 var _Chart = _interopRequireDefault(require("../Chart"));
 var _ColumnChartItem = _interopRequireDefault(require("../ColumnChartItem"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["values", "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; }
@@ -23,9 +23,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ColumnChart'
 });
-const ColumnChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ColumnChart = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
-  const $ = (0, _compilerRuntime.c)(9);
+  const $ = (0, _compilerRuntime.c)(8);
   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.onesyColumnChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Chart = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Chart) || _Chart.default;
@@ -54,32 +54,31 @@ const ColumnChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t1 = "hidden";
   const t2 = true;
   const t3 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("ColumnChart", theme) && ["onesy-ColumnChart-root"], className, classes.root]);
-  const t4 = (0, _utils.is)("array", values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(ColumnChartItem, (0, _extends2.default)({
-    key: index,
+  const t4 = (0, _utils.is)("array", values) && values.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnChartItem, _objectSpread({
     width: widthItem
-  }, item)));
+  }, item), index));
   let t5;
-  if ($[1] !== Chart || $[2] !== onUpdateRects || $[3] !== other || $[4] !== ref || $[5] !== t3 || $[6] !== t4 || $[7] !== values) {
-    t5 = /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
-      ref: ref,
+  if ($[1] !== Chart || $[2] !== onUpdateRects || $[3] !== other || $[4] !== t3 || $[5] !== t4 || $[6] !== values) {
+    t5 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Chart, _objectSpread(_objectSpread({
       values: values,
       pointsVisibility: t1,
       elementTooltip: t2,
       onUpdateRects: onUpdateRects,
       className: t3
-    }, other), t4);
+    }, other), {}, {
+      children: t4
+    }));
     $[1] = Chart;
     $[2] = onUpdateRects;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t3;
-    $[6] = t4;
-    $[7] = values;
-    $[8] = t5;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = values;
+    $[7] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[7];
   }
   return t5;
-});
+};
 ColumnChart.displayName = 'onesy-ColumnChart';
 var _default = exports.default = ColumnChart;

package/ColumnChartItem/ColumnChartItem.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,6 +15,7 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "name", "values", "width", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "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; }
@@ -31,7 +31,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ColumnChartItem'
 });
-const ColumnChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ColumnChartItem = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   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.onesyColumnChartItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -93,20 +93,22 @@ const ColumnChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
   const LegendItem = legendItemProps => {
-    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)('ColumnChartItem', theme) && ['onesy-ColumnChartItem-legend-item'], legendItemProps === null || legendItemProps === void 0 ? void 0 : legendItemProps.className, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ColumnChartItem', theme) && ['onesy-ColumnChartItem-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, legendItemProps), LegendItemProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ColumnChartItem', theme) && ['onesy-ColumnChartItem-legend-item'], legendItemProps === null || legendItemProps === void 0 ? void 0 : legendItemProps.className, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ColumnChartItem', theme) && ['onesy-ColumnChartItem-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -126,22 +128,24 @@ const ColumnChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       values_.x = (0, _utils.valueFromPercentageWithinRange)(values_.x, 0, width);
       values_.y = (0, _utils.valueFromPercentageWithinRange)(values_.y, 0, height);
       const value_ = [values_.x, height - values_.y].map(item_ => Math.abs(item_));
-      const element = /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-        x: value_[0] - widthItem / 2,
-        y: value_[1],
-        width: widthItem,
-        height: height - value_[1],
-        fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
-        stroke: "none",
-        Component: "rect"
-      }, PathProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scaleY(0)'
-        }), {}, {
-          transformOrigin: 'bottom'
-        }, refs.pathStyle.current)
-      })));
+      const element = /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
+          x: value_[0] - widthItem / 2,
+          y: value_[1],
+          width: widthItem,
+          height: height - value_[1],
+          fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
+          stroke: "none",
+          Component: "rect"
+        }, PathProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scaleY(0)'
+          }), {}, {
+            transformOrigin: 'bottom'
+          }, refs.pathStyle.current)
+        }))
+      });
 
       // Legend item
       if ((0, _utils.is)('function', updateLegend)) {
@@ -156,7 +160,7 @@ const ColumnChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
                 name,
                 values
               },
-              element: /*#__PURE__*/_react.default.createElement(LegendItem, null)
+              element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {})
             });
           }
           return newValues;
@@ -196,6 +200,6 @@ const ColumnChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   return value && /*#__PURE__*/_react.default.cloneElement(value, _objectSpread({
     className
   }, other));
-});
+};
 ColumnChartItem.displayName = 'onesy-ColumnChartItem';
 var _default = exports.default = ColumnChartItem;

package/Confirm/Confirm.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"));
@@ -20,6 +19,7 @@ var _ModalMain = _interopRequireDefault(require("../ModalMain"));
 var _ModalText = _interopRequireDefault(require("../ModalText"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["throwError", "onOpen", "onClose", "className", "children"],
   _excluded2 = ["name", "description", "buttons", "throwError", "ButtonNegativeProps", "ButtonPositiveProps", "modal"];
 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; }
@@ -45,7 +45,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Confirm'
 });
-const Confirm = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Confirm = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _buttons$negative, _buttons$negative2, _buttons$positive, _buttons$positive2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -128,38 +128,54 @@ const Confirm = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   // Add to the value
   refs.value.current.open = open;
   refs.value.current.close = close;
-  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
-    value: refs.value.current
-  }, children, /*#__PURE__*/_react.default.createElement(Modal, (0, _extends2.default)({
-    ref: ref,
-    open: openModal,
-    onClose: close,
-    SurfaceProps: {
-      tonal: true,
-      color: 'primary',
-      className: (0, _styleReact.classNames)([classes.surface])
-    },
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Confirm', theme) && [`onesy-Confirm-root`], className, classes.root])
-  }, other, otherModal), (0, _utils.is)('function', modal) ? modal({
-    resolve: refs.promise.resolve.current,
-    reject: refs.promise.reject.current
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, name !== false && /*#__PURE__*/_react.default.createElement(ModalHeader, null, (0, _utils.is)('string', name) ? /*#__PURE__*/_react.default.createElement(ModalTitle, {
-    version: "t1",
-    weight: 500
-  }, name || l('Confirmation')) : name), /*#__PURE__*/_react.default.createElement(ModalMain, null, (0, _utils.is)('string', description) ? /*#__PURE__*/_react.default.createElement(ModalText, {
-    version: "b1",
-    weight: 200
-  }, description !== undefined ? description : l('Are you sure you want to proceed?')) : description), /*#__PURE__*/_react.default.createElement(ModalFooter, null, /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    version: "text",
-    color: "inherit",
-    tonal: true,
-    onClick: () => close(false)
-  }, ButtonNegativeProps), (buttons === null || buttons === void 0 || (_buttons$negative = buttons.negative) === null || _buttons$negative === void 0 ? void 0 : _buttons$negative.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$negative2 = buttons.negative) === null || _buttons$negative2 === void 0 ? void 0 : _buttons$negative2.text : l('Cancel')), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    version: "text",
-    color: "inherit",
-    tonal: true,
-    onClick: () => close(true)
-  }, ButtonPositiveProps), (buttons === null || buttons === void 0 || (_buttons$positive = buttons.positive) === null || _buttons$positive === void 0 ? void 0 : _buttons$positive.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$positive2 = buttons.positive) === null || _buttons$positive2 === void 0 ? void 0 : _buttons$positive2.text : l('Confirm'))))));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
+    value: refs.value.current,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread(_objectSpread({
+      open: openModal,
+      onClose: close,
+      SurfaceProps: {
+        tonal: true,
+        color: 'primary',
+        className: (0, _styleReact.classNames)([classes.surface])
+      },
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Confirm', theme) && [`onesy-Confirm-root`], className, classes.root])
+    }, other), otherModal), {}, {
+      children: (0, _utils.is)('function', modal) ? modal({
+        resolve: refs.promise.resolve.current,
+        reject: refs.promise.reject.current
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [name !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
+          children: (0, _utils.is)('string', name) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalTitle, {
+            version: "t1",
+            weight: 500,
+            children: name || l('Confirmation')
+          }) : name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalMain, {
+          children: (0, _utils.is)('string', description) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalText, {
+            version: "b1",
+            weight: 200,
+            children: description !== undefined ? description : l('Are you sure you want to proceed?')
+          }) : description
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModalFooter, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+            version: "text",
+            color: "inherit",
+            tonal: true,
+            onClick: () => close(false)
+          }, ButtonNegativeProps), {}, {
+            children: (buttons === null || buttons === void 0 || (_buttons$negative = buttons.negative) === null || _buttons$negative === void 0 ? void 0 : _buttons$negative.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$negative2 = buttons.negative) === null || _buttons$negative2 === void 0 ? void 0 : _buttons$negative2.text : l('Cancel')
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+            version: "text",
+            color: "inherit",
+            tonal: true,
+            onClick: () => close(true)
+          }, ButtonPositiveProps), {}, {
+            children: (buttons === null || buttons === void 0 || (_buttons$positive = buttons.positive) === null || _buttons$positive === void 0 ? void 0 : _buttons$positive.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$positive2 = buttons.positive) === null || _buttons$positive2 === void 0 ? void 0 : _buttons$positive2.text : l('Confirm')
+          }))]
+        })]
+      })
+    }))]
+  });
+};
 Confirm.displayName = 'onesy-Confirm';
 var _default = exports.default = Confirm;

package/Container/Container.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 = ["alignment", "paddingVertical", "paddingHorizontal", "fullWidth", "maxWidth", "Component", "style", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "alignment", "paddingVertical", "paddingHorizontal", "fullWidth", "maxWidth", "Component", "style", "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 => ({
@@ -88,12 +88,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Container'
 });
-const Container = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Container = 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.onesyContainer) === 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,
       alignment: alignment_,
       paddingVertical: paddingVertical_,
       paddingHorizontal: paddingHorizontal_,
@@ -136,7 +137,7 @@ const Container = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (!classes[`maxWidth_${maxWidth}`]) styles.root.maxWidth = maxWidth;
   if (!['both', 'start', 'end', 'none'].includes(paddingHorizontal)) styles.root.paddingInline = paddingHorizontal;
   if (!['both', 'start', 'end', 'none'].includes(paddingVertical)) styles.root.paddingBlock = paddingVertical;
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -147,7 +148,9 @@ const Container = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "row",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Container', theme) && ['onesy-Container-root'], className, classes.root, classes[`alignment_${alignment}`], classes[`maxWidth_${maxWidth}`], classes[`padding_vertical_${paddingVertical}`], classes[`padding_horizontal_${paddingHorizontal}`], fullWidth && classes.fullWidth]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 Container.displayName = 'onesy-Container';
 var _default = exports.default = Container;