@onesy/ui-react 1.0.171 → 1.0.173

package/Whiteboard/Whiteboard.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 _date = require("@onesy/date");
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-const _excluded = ["valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "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 => ({
@@ -69,12 +69,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
 });
 const colorSelect = 'hsl(244deg 64% 64%)';
 const colorSelectBackground = 'hsla(244deg 64% 64% / 4%)';
-const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Whiteboard = 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.onesyWhiteboard) === 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,
       valueDefault,
       onChange: onChangeProps,
       // 10%
@@ -1395,7 +1396,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       height: size.height
     }
   };
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_24 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_24);else ref.current = item_24;
@@ -1405,25 +1406,28 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     flex: true,
     fullWidth: true,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Whiteboard', theme) && ['onesy-Whiteboard-root'], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement("div", {
-    id: "controls",
-    style: {
-      position: 'absolute',
-      zIndex: 14,
-      top: 12,
-      left: '50%'
-    }
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "file",
-    accept: "image/*",
-    onChange: onChangeInputFile
-  })), /*#__PURE__*/_react.default.createElement("canvas", (0, _extends2.default)({
-    ref: refs.ui,
-    onMouseDown: onMouseDown,
-    onTouchStart: onTouchStart,
-    onWheel: onWheel,
-    className: (0, _styleReact.classNames)([classes.canvas, classes.interactive, tool === 'pan' && classes[!mouseDown ? 'pan' : 'panning'], tool === 'image' && classes.image, tool === 'text' && classes.text, ['pen', 'eraser', 'zoom'].includes(tool) && classes[tool], ['circle', 'rectangle', 'triangle', 'line', 'arrow'].includes(tool) && classes.object])
-  }, propsCanvas)));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "controls",
+      style: {
+        position: 'absolute',
+        zIndex: 14,
+        top: 12,
+        left: '50%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "file",
+        accept: "image/*",
+        onChange: onChangeInputFile
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", _objectSpread({
+      ref: refs.ui,
+      onMouseDown: onMouseDown,
+      onTouchStart: onTouchStart,
+      onWheel: onWheel,
+      className: (0, _styleReact.classNames)([classes.canvas, classes.interactive, tool === 'pan' && classes[!mouseDown ? 'pan' : 'panning'], tool === 'image' && classes.image, tool === 'text' && classes.text, ['pen', 'eraser', 'zoom'].includes(tool) && classes[tool], ['circle', 'rectangle', 'triangle', 'line', 'arrow'].includes(tool) && classes.object])
+    }, propsCanvas))]
+  }));
+};
 Whiteboard.displayName = 'onesy-Whiteboard';
 var _default = exports.default = Whiteboard;

package/Widgets/Widgets.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 _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Move = _interopRequireDefault(require("../Move"));
 var _Context = _interopRequireDefault(require("./Context"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "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; }
@@ -94,7 +94,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Widgets'
 });
-const Widgets = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Widgets = 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;
@@ -156,57 +156,63 @@ const Widgets = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.value.current.close = close;
   refs.value.current.closeAll = closeAll;
   const widgetsToUse = [...(widgets || [])].reverse();
-  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
-    value: refs.value.current
-  }, (widgets === null || widgets === void 0 ? void 0 : widgets.length) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SpeedDial, (0, _extends2.default)({
-    ref: ref,
-    direction: "top",
-    position: "bottom",
-    alignment: "start",
-    Icon: Icon_,
-    noRotate: true
-  }, SpeedDialProps, other), widgets.map((item_1, index) => {
-    const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
-    return /*#__PURE__*/_react.default.createElement(SpeedDialItem, {
-      key: index,
-      onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
-      label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
-      Icon: item_1.Icon
-    });
-  })), widgetsToUse.map((item_2, index_0) => {
-    const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
-    const WidgetWrapper = Move;
-    const WidgetWrapperProps = _objectSpread({
-      version: 'fixed',
-      manage: true,
-      manageLevel: 1,
-      disabled: !(move && item_2.move !== false)
-    }, MoveProps);
-    return /*#__PURE__*/_react.default.createElement(Transition, {
-      key: index_0,
-      in: openItems.includes(valueItem_1),
-      removeOnExited: true
-    }, status => {
-      var _item_2$element$type;
-      return /*#__PURE__*/_react.default.createElement(WidgetWrapper, (0, _extends2.default)({
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
-      }, WidgetWrapperProps), /*#__PURE__*/_react.default.createElement(IconButton, {
-        onClick: () => close(valueItem_1),
-        color: "default",
-        version: "filled",
-        size: "small",
-        elevation: false,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton])
-      }, /*#__PURE__*/_react.default.createElement(IconCloseItem, null)), /*#__PURE__*/_react.default.cloneElement(item_2.element, _objectSpread({
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
-      }, ['onesy-Weather', 'onesy-Watch'].includes((_item_2$element$type = item_2.element.type) === null || _item_2$element$type === void 0 ? void 0 : _item_2$element$type.displayName) ? {
-        shadow: true,
-        style: {
-          boxShadow: 'none'
-        }
-      } : undefined)));
-    });
-  })), children);
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
+    value: refs.value.current,
+    children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDial, _objectSpread(_objectSpread(_objectSpread({
+        direction: "top",
+        position: "bottom",
+        alignment: "start",
+        Icon: Icon_,
+        noRotate: true
+      }, SpeedDialProps), other), {}, {
+        children: widgets.map((item_1, index) => {
+          const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialItem, {
+            onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
+            label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
+            Icon: item_1.Icon
+          }, index);
+        })
+      })), widgetsToUse.map((item_2, index_0) => {
+        const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
+        const WidgetWrapper = Move;
+        const WidgetWrapperProps = _objectSpread({
+          version: 'fixed',
+          manage: true,
+          manageLevel: 1,
+          disabled: !(move && item_2.move !== false)
+        }, MoveProps);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
+          in: openItems.includes(valueItem_1),
+          removeOnExited: true,
+          children: status => {
+            var _item_2$element$type;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(WidgetWrapper, _objectSpread(_objectSpread({
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
+            }, WidgetWrapperProps), {}, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+                onClick: () => close(valueItem_1),
+                color: "default",
+                version: "filled",
+                size: "small",
+                elevation: false,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton]),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCloseItem, {})
+              }), /*#__PURE__*/_react.default.cloneElement(item_2.element, _objectSpread({
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
+              }, ['onesy-Weather', 'onesy-Watch'].includes((_item_2$element$type = item_2.element.type) === null || _item_2$element$type === void 0 ? void 0 : _item_2$element$type.displayName) ? {
+                shadow: true,
+                style: {
+                  boxShadow: 'none'
+                }
+              } : undefined))]
+            }));
+          }
+        }, index_0);
+      })]
+    }), children]
+  });
+};
 Widgets.displayName = 'onesy-Widgets';
 var _default = exports.default = Widgets;

package/WindowSplit/WindowSplit.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 _Divider = _interopRequireDefault(require("../Divider"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "StartProps", "EndProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "StartProps", "EndProps", "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 => ({
@@ -89,7 +89,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-WindowSplit'
 });
-const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const WindowSplit = 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.onesyWindowSplit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -97,6 +97,7 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
   const Divider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
   const {
+      ref,
       tonal = false,
       color = 'inverted',
       valueDefault,
@@ -115,8 +116,8 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onMouseEnter: onMouseEnter_,
       onMouseLeave: onMouseLeave_,
       iconButtonComponent,
-      iconOrientationHorizontal = /*#__PURE__*/_react.default.createElement(_IconMaterialSwapHorizW.default, null),
-      iconOrientationVertical = /*#__PURE__*/_react.default.createElement(_IconMaterialSwapVertW.default, null),
+      iconOrientationHorizontal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSwapHorizW.default, {}),
+      iconOrientationVertical = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSwapVertW.default, {}),
       IconButtonProps = {
         version: 'filled',
         elevation: false
@@ -313,7 +314,7 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
   // Only 2 children to use
   const children = _react.default.Children.toArray(children_).slice(0, 2);
-  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;
@@ -328,55 +329,61 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, focus_ && {
     onFocus,
     onBlur
-  }, {
+  }), {}, {
     onKeyDown: !noKeyboard ? onKeyDown : undefined,
     id: refs.ids.root,
     "aria-orientation": orientation,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-root', focus && `onesy-WindowSplit-focus`, mouseDown && `onesy-WindowSplit-mouse-down`], className, classes.root, mouseDown && classes[`mouseDown_orientation_${orientation}`], focus_ && focus && !mouseDown && classes.focus])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: direction,
-    align: "unset",
-    justify: "unset",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-wrapper'], classes.wrapper])
-  }, children[0] && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    direction: "row",
-    align: "unset",
-    justify: "unset"
-  }, StartProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-start'], StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.item, classes.start]),
-    style: _objectSpread(_objectSpread({}, styles.start), StartProps === null || StartProps === void 0 ? void 0 : StartProps.style)
-  }), children[0]), children[1] && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    direction: "row",
-    align: "unset",
-    justify: "unset"
-  }, EndProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-end'], EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.item, classes.end]),
-    style: _objectSpread(_objectSpread({}, styles.end), EndProps === null || EndProps === void 0 ? void 0 : EndProps.style)
-  }), children[1])), !noDivider && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
-    onTouchStart: onTouchStart,
-    onMouseDown: event_7 => {
-      onMouseDown();
-      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event_7);
-    },
-    orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
-  }, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
-    style: _objectSpread(_objectSpread({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style)
-  })), iconButton && !noDivider && (iconButtonComponent && /*#__PURE__*/_react.default.cloneElement(iconButtonComponent, _objectSpread({
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`]])
-  }, SeparatorProps)) || /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onFocus: onFocusIconButton,
-    onBlur: onBlurIconButton,
-    onTouchStart: onTouchStart,
-    onMouseDown: event_8 => {
-      onMouseDown();
-      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event_8);
-    }
-  }, SeparatorProps, IconButtonProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),
-    style: _objectSpread(_objectSpread({}, styles.divider), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style)
-  }), orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined)));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 0,
+      direction: direction,
+      align: "unset",
+      justify: "unset",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-wrapper'], classes.wrapper]),
+      children: [children[0] && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        direction: "row",
+        align: "unset",
+        justify: "unset"
+      }, StartProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-start'], StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.item, classes.start]),
+        style: _objectSpread(_objectSpread({}, styles.start), StartProps === null || StartProps === void 0 ? void 0 : StartProps.style),
+        children: children[0]
+      })), children[1] && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        direction: "row",
+        align: "unset",
+        justify: "unset"
+      }, EndProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-end'], EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.item, classes.end]),
+        style: _objectSpread(_objectSpread({}, styles.end), EndProps === null || EndProps === void 0 ? void 0 : EndProps.style),
+        children: children[1]
+      }))]
+    }), !noDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
+      onTouchStart: onTouchStart,
+      onMouseDown: event_7 => {
+        onMouseDown();
+        if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event_7);
+      },
+      orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
+    }, DividerProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
+      style: _objectSpread(_objectSpread({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style)
+    })), iconButton && !noDivider && (iconButtonComponent && /*#__PURE__*/_react.default.cloneElement(iconButtonComponent, _objectSpread({
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`]])
+    }, SeparatorProps)) || /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
+      onFocus: onFocusIconButton,
+      onBlur: onBlurIconButton,
+      onTouchStart: onTouchStart,
+      onMouseDown: event_8 => {
+        onMouseDown();
+        if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event_8);
+      }
+    }, SeparatorProps), IconButtonProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),
+      style: _objectSpread(_objectSpread({}, styles.divider), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style),
+      children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined
+    })))]
+  }));
+};
 WindowSplit.displayName = 'onesy-WindowSplit';
 var _default = exports.default = WindowSplit;

package/Zoom/Zoom.js

@@ -12,12 +12,13 @@ var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _ = require("..");
-const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "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; }
-const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Zoom = props_ => {
   var _theme$ui, _theme$ui2;
-  const $ = (0, _compilerRuntime.c)(32);
+  const $ = (0, _compilerRuntime.c)(33);
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyZoom) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default;
@@ -48,11 +49,13 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let className;
   let inProp;
   let other;
+  let ref;
   let style;
   let timing_function;
   if ($[5] !== props) {
     const {
-        in: t5,
+        ref: t5,
+        in: t6,
         prefix,
         run,
         append,
@@ -65,8 +68,8 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         removeOnExited,
         delay,
         duration: duration_,
-        timing_function: t6,
-        addTransition: t7,
+        timing_function: t7,
+        addTransition: t8,
         onTransition,
         onAppended,
         onAdd,
@@ -79,37 +82,40 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onExiting,
         onExited,
         onRemoved,
-        className: t8,
-        style: t9,
-        children: t10
+        className: t9,
+        style: t10,
+        children: t11
       } = props,
-      t11 = (0, _objectWithoutProperties2.default)(props, _excluded);
-    inProp = t5;
-    timing_function = t6;
-    addTransition = t7;
-    className = t8;
-    style = t9;
-    children = t10;
-    other = t11;
+      t12 = (0, _objectWithoutProperties2.default)(props, _excluded);
+    ref = t5;
+    inProp = t6;
+    timing_function = t7;
+    addTransition = t8;
+    className = t9;
+    style = t10;
+    children = t11;
+    other = t12;
     $[5] = props;
     $[6] = addTransition;
     $[7] = children;
     $[8] = className;
     $[9] = inProp;
     $[10] = other;
-    $[11] = style;
-    $[12] = timing_function;
+    $[11] = ref;
+    $[12] = style;
+    $[13] = timing_function;
   } else {
     addTransition = $[6];
     children = $[7];
     className = $[8];
     inProp = $[9];
     other = $[10];
-    style = $[11];
-    timing_function = $[12];
+    ref = $[11];
+    style = $[12];
+    timing_function = $[13];
   }
   let t5;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = status => {
       var _refs$root;
       const {
@@ -152,13 +158,13 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       return allStyles[status];
     };
-    $[13] = t5;
+    $[14] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[14];
   }
   const styles = t5;
   let duration;
-  if ($[14] !== theme) {
+  if ($[15] !== theme) {
     duration = (status_0, t6) => {
       const property = t6 === undefined ? "transform" : t6;
       const properties = {
@@ -166,23 +172,23 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       return `${((0, _utils.is)("simple", duration) ? duration : duration[status_0]) || properties[property]}ms`;
     };
-    $[14] = theme;
-    $[15] = duration;
+    $[15] = theme;
+    $[16] = duration;
   } else {
-    duration = $[15];
+    duration = $[16];
   }
   let t6;
-  if ($[16] !== theme || $[17] !== timing_function) {
+  if ($[17] !== theme || $[18] !== timing_function) {
     t6 = status_1 => ((0, _utils.is)("simple", timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
-    $[16] = theme;
-    $[17] = timing_function;
-    $[18] = t6;
+    $[17] = theme;
+    $[18] = timing_function;
+    $[19] = t6;
   } else {
-    t6 = $[18];
+    t6 = $[19];
   }
   const timingFunction = t6;
   let t7;
-  if ($[19] !== addTransition || $[20] !== children || $[21] !== className || $[22] !== duration || $[23] !== inProp || $[24] !== other || $[25] !== ref || $[26] !== style || $[27] !== timingFunction) {
+  if ($[20] !== addTransition || $[21] !== children || $[22] !== className || $[23] !== duration || $[24] !== inProp || $[25] !== other || $[26] !== ref || $[27] !== style || $[28] !== timingFunction) {
     t7 = (status_2, ref_) => {
       var _children, _children2;
       return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
@@ -217,29 +223,31 @@ const Zoom = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }, styles(status_2)), (_children2 = children) === null || _children2 === void 0 || (_children2 = _children2.props) === null || _children2 === void 0 ? void 0 : _children2.style), style)
       }));
     };
-    $[19] = addTransition;
-    $[20] = children;
-    $[21] = className;
-    $[22] = duration;
-    $[23] = inProp;
-    $[24] = other;
-    $[25] = ref;
-    $[26] = style;
-    $[27] = timingFunction;
-    $[28] = t7;
+    $[20] = addTransition;
+    $[21] = children;
+    $[22] = className;
+    $[23] = duration;
+    $[24] = inProp;
+    $[25] = other;
+    $[26] = ref;
+    $[27] = style;
+    $[28] = timingFunction;
+    $[29] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[29];
   }
   let t8;
-  if ($[29] !== props || $[30] !== t7) {
-    t8 = /*#__PURE__*/_react.default.createElement(_.Transition, props, t7);
-    $[29] = props;
-    $[30] = t7;
-    $[31] = t8;
+  if ($[30] !== props || $[31] !== t7) {
+    t8 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Transition, _objectSpread(_objectSpread({}, props), {}, {
+      children: t7
+    }));
+    $[30] = props;
+    $[31] = t7;
+    $[32] = t8;
   } else {
-    t8 = $[31];
+    t8 = $[32];
   }
   return t8;
-});
+};
 Zoom.displayName = 'onesy-Zoom';
 var _default = exports.default = Zoom;