@onesy/ui-react 1.0.171 → 1.0.173

package/esm/Move/Move.js

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["version", "manage", "manageLevel", "disabled", "onMouseDown", "onTouchStart", "Component", "className", "style", "children"];
+const _excluded = ["ref", "version", "manage", "manageLevel", "disabled", "onMouseDown", "onTouchStart", "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) { _defineProperty(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; }
 import React from 'react';
 import { element, is, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     pointerEvents: 'auto',
@@ -16,13 +16,14 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Move'
 });
-const Move = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Move = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMove?.props?.default), props_);
   const {
     classes
   } = useStyle();
   const {
+      ref,
       version = 'regular',
       manage = false,
       manageLevel = 0,
@@ -144,7 +145,7 @@ const Move = /*#__PURE__*/React.forwardRef((props_, ref) => {
       rootDocument.removeEventListener('touchmove', onTouchMove);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
@@ -155,7 +156,9 @@ const Move = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onTouchStart: onTouchStart,
     className: classNames([staticClassName('Move', theme) && ['onesy-Move-root'], className, classes.root]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 Move.displayName = 'onesy-Move';
 export default Move;

package/esm/NavigationBar/NavigationBar.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["color", "tonal", "version", "value", "valueDefault", "onChange", "fixed", "className", "style", "children"];
@@ -11,6 +10,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     zIndex: theme.z_index.app_bar,
@@ -25,7 +25,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NavigationBar'
 });
-const NavigationBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NavigationBar = props_ => {
   const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationBar?.props?.default), props_);
@@ -134,8 +134,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   })));
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
     Component: Line,
     color: color,
     tonal: tonal,
@@ -145,7 +144,9 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     gap: 1,
     className: classNames([staticClassName("NavigationBar", theme) && ["onesy-NavigationBar-root"], className, classes.root, fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 NavigationBar.displayName = 'onesy-NavigationBar';
 export default NavigationBar;

package/esm/NavigationDrawer/NavigationDrawer.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "open", "openDefault", "position", "direction", "swipe", "swipeTouchAnywhere", "swipeBackgroundFollow", "min", "removeOnExited", "onClose", "TransitionComponentProps", "Component", "className", "children"];
@@ -11,6 +10,7 @@ import ModalElement from '../Modal';
 import SlideElement from '../Slide';
 import useSwipe from '../useSwipe';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '& .onesy-Modal-surface': {
@@ -80,7 +80,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NavigationDrawer'
 });
-const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NavigationDrawer = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationDrawer?.props?.default), props_);
   const Modal = theme?.elements?.Modal || ModalElement;
@@ -210,8 +210,7 @@ const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     other.openDefault = false;
     TransitionComponentProps.min = TransitionComponentProps.min !== undefined ? TransitionComponentProps.min : min;
   }
-  return /*#__PURE__*/React.createElement(Modal, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
     open: open,
     mainRef: refs.modal,
     backgroundRef: refs.background,
@@ -229,7 +228,9 @@ const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     portal: position === 'fixed',
     className: classNames([staticClassName('NavigationDrawer', theme) && ['onesy-NavigationDrawer-root'], className, classes.root, classes[`position_${position}`], classes[`direction_${direction}`], classes[`version_${version}`], classes[`version_${version}_position_${position}`]])
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 NavigationDrawer.displayName = 'onesy-NavigationDrawer';
 export default NavigationDrawer;

package/esm/NavigationItem/NavigationItem.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "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) { _defineProperty(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; }
 import React from 'react';
@@ -12,6 +11,7 @@ import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import TransitionElement from '../Transition';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'inline-flex',
@@ -102,7 +102,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NavigationItem'
 });
-const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NavigationItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -110,6 +110,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const Transition = theme?.elements?.Transition || TransitionElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'regular',
@@ -218,7 +219,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
   }
   const Icon = selected && iconSelected || icon;
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+  return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
     name: nameTooltip ?? name ?? value,
     position: "top",
     alignment: "center",
@@ -226,49 +227,58 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     touch: false,
     hover: false,
     focus: false
-  }, TooltipProps), /*#__PURE__*/React.createElement("span", _extends({
-    tabIndex: !disabled ? 0 : undefined,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    onTouchStart: onTouchStart,
-    onMouseDown: onMouseDown,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
-    style: _objectSpread({}, style)
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    direction: "column",
-    align: "center",
-    justify: "center",
-    gap: 0.25,
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-item'], classes.item])
-  }, Icon && /*#__PURE__*/React.createElement(Line, {
-    Component: "span",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon-wrapper'], classes.iconWrapper, ['none', 'auto'].includes(version) && classes.iconWrapper_center, ['auto'].includes(version) && selected && classes.iconWrapper_center_selected])
-  }, /*#__PURE__*/React.createElement(Transition, {
-    in: hover || focus || selected
-  }, status => /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-indicator'], classes.indicator, classes[`indicator_${status}`], selected && classes.indicator_selected, hover && classes.indicator_hover, focus && classes.indicator_focus, mouseDown && classes.indicator_pressed]),
-    style: styles.indicator
-  })), /*#__PURE__*/React.createElement(IconWrapperComponent, _extends({}, IconWrapperProps, {
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon'], IconWrapperProps?.className, classes.icon])
-  }), /*#__PURE__*/React.cloneElement(Icon, {
-    style: _objectSpread(_objectSpread({}, Icon.props.style), styles.icon)
-  }))), (version === 'regular' || version === 'auto' && selected) && /*#__PURE__*/React.createElement(Type, _extends({
-    version: "b3"
-  }, LabelProps, {
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label', LabelProps?.className]]),
-    style: _objectSpread(_objectSpread({}, styles.label), LabelProps?.style)
-  }), name))));
-});
+  }, TooltipProps), {}, {
+    children: /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+      tabIndex: !disabled ? 0 : undefined,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onTouchStart: onTouchStart,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
+      style: _objectSpread({}, style)
+    }, other), {}, {
+      children: /*#__PURE__*/_jsxs(Line, {
+        ref: item => {
+          if (ref) {
+            if (is('function', ref)) ref(item);else ref.current = item;
+          }
+          refs.root.current = item;
+        },
+        direction: "column",
+        align: "center",
+        justify: "center",
+        gap: 0.25,
+        className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-item'], classes.item]),
+        children: [Icon && /*#__PURE__*/_jsxs(Line, {
+          Component: "span",
+          align: "center",
+          justify: "center",
+          className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon-wrapper'], classes.iconWrapper, ['none', 'auto'].includes(version) && classes.iconWrapper_center, ['auto'].includes(version) && selected && classes.iconWrapper_center_selected]),
+          children: [/*#__PURE__*/_jsx(Transition, {
+            in: hover || focus || selected,
+            children: status => /*#__PURE__*/_jsx("span", {
+              className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-indicator'], classes.indicator, classes[`indicator_${status}`], selected && classes.indicator_selected, hover && classes.indicator_hover, focus && classes.indicator_focus, mouseDown && classes.indicator_pressed]),
+              style: styles.indicator
+            })
+          }), /*#__PURE__*/_jsx(IconWrapperComponent, _objectSpread(_objectSpread({}, IconWrapperProps), {}, {
+            className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon'], IconWrapperProps?.className, classes.icon]),
+            children: /*#__PURE__*/React.cloneElement(Icon, {
+              style: _objectSpread(_objectSpread({}, Icon.props.style), styles.icon)
+            })
+          }))]
+        }), (version === 'regular' || version === 'auto' && selected) && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: "b3"
+        }, LabelProps), {}, {
+          className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label', LabelProps?.className]]),
+          style: _objectSpread(_objectSpread({}, styles.label), LabelProps?.style),
+          children: name
+        }))]
+      })
+    }))
+  }));
+};
 NavigationItem.displayName = 'onesy-NavigationItem';
 export default NavigationItem;

package/esm/NavigationRail/NavigationRail.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "className", "style", "children"];
@@ -13,6 +12,7 @@ import SurfaceElement from '../Surface';
 import DividerElement from '../Divider';
 import NavigationBarElement from '../NavigationBar';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -59,7 +59,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NavigationRail'
 });
-const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NavigationRail = props_ => {
   const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationRail?.props?.default), props_);
@@ -161,8 +161,7 @@ const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   })));
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     Component: Line,
     color: color,
     tonal: tonal,
@@ -172,23 +171,27 @@ const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
     gap: 0,
     className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-root", `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), header && /*#__PURE__*/React.createElement(Line, {
-    align: "center",
-    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-header"], classes.header])
-  }, header), children && /*#__PURE__*/React.createElement(NavigationBar, _extends({
-    version: version,
-    direction: "column",
-    justify: justify,
-    gap: 2,
-    color: color,
-    tonal: tonal
-  }, NavigationBarProps, {
-    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-main"], NavigationBarProps?.className, classes.main])
-  }), children), border && /*#__PURE__*/React.createElement(Divider, _extends({
-    orientation: "vertical"
-  }, DividerProps, {
-    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-divider"], DividerProps?.className, classes.divider])
-  })));
-});
+  }, other), {}, {
+    children: [header && /*#__PURE__*/_jsx(Line, {
+      align: "center",
+      className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-header"], classes.header]),
+      children: header
+    }), children && /*#__PURE__*/_jsx(NavigationBar, _objectSpread(_objectSpread({
+      version: version,
+      direction: "column",
+      justify: justify,
+      gap: 2,
+      color: color,
+      tonal: tonal
+    }, NavigationBarProps), {}, {
+      className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-main"], NavigationBarProps?.className, classes.main]),
+      children: children
+    })), border && /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({
+      orientation: "vertical"
+    }, DividerProps), {}, {
+      className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-divider"], DividerProps?.className, classes.divider])
+    }))]
+  }));
+};
 NavigationRail.displayName = 'onesy-NavigationRail';
 export default NavigationRail;

package/esm/NotFound/NotFound.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "buttonText", "ButtonProps", "TypeProps", "className"];
@@ -12,6 +11,7 @@ import SectionElement from '../Section';
 import TypeElement from '../Type';
 import ButtonElement from '../Button';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   fullHeight: {
@@ -20,7 +20,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NotFound'
 });
-const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NotFound = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNotFound?.props?.default), props_);
@@ -48,26 +48,29 @@ const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onTo = () => {
     if (link) window.open(link, 'blank');else navigate(to);
   };
-  return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Section, _objectSpread(_objectSpread({
     flex: true,
     fullWidth: true,
     align: "center",
     justify: "center",
     className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-root`], className, classes.root, fullHeight && classes.fullHeight])
-  }, other), start, /*#__PURE__*/React.createElement(Type, _extends({
-    version: "h3",
-    align: "center"
-  }, TypeProps, {
-    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-type`], TypeProps?.className])
-  }), name), is('function', renderButton) ? renderButton({}) : /*#__PURE__*/React.createElement(Button, _extends({
-    color: "default",
-    version: "outlined",
-    size: "small",
-    onClick: onTo
-  }, ButtonProps, {
-    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-button`], ButtonProps?.className, classes.button])
-  }), buttonText), end);
-});
+  }, other), {}, {
+    children: [start, /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+      version: "h3",
+      align: "center"
+    }, TypeProps), {}, {
+      className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-type`], TypeProps?.className]),
+      children: name
+    })), is('function', renderButton) ? renderButton({}) : /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      color: "default",
+      version: "outlined",
+      size: "small",
+      onClick: onTo
+    }, ButtonProps), {}, {
+      className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-button`], ButtonProps?.className, classes.button]),
+      children: buttonText
+    })), end]
+  }));
+};
 NotFound.displayName = 'onesy-NotFound';
 export default NotFound;

package/esm/NumericTextField/NumericTextField.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["valueDefault", "value", "onChange", "version", "size", "min", "max", "increment", "decrement", "incrementValue", "decrementValue", "onFocus", "onBlur", "IconIncrement", "IconDecrement", "IconButtonProps", "IconProps", "className"];
+const _excluded = ["ref", "valueDefault", "value", "onChange", "version", "size", "min", "max", "increment", "decrement", "incrementValue", "decrementValue", "onFocus", "onBlur", "IconIncrement", "IconDecrement", "IconButtonProps", "IconProps", "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) { _defineProperty(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; }
 import React from 'react';
@@ -12,17 +11,19 @@ import IconMaterialKeyboardArrowDown from '@onesy/icons-material-rounded-react/I
 import AdvancedTextFieldElement from '../AdvancedTextField';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-NumericTextField'
 });
-const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const NumericTextField = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNumericTextField?.props?.default), props_);
   const AdvancedTextField = theme?.elements?.AdvancedTextField || AdvancedTextFieldElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       valueDefault,
       value: value_,
       onChange: onChange_,
@@ -168,13 +169,17 @@ const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size: 24,
     fontSize: '1.5rem'
   };
-  if (decrement) end.push(/*#__PURE__*/React.createElement(IconButton, _extends({
+  if (decrement) end.push(/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
     onClick: onDecrement
-  }, iconButtonProps, IconButtonProps), /*#__PURE__*/React.createElement(IconDecrement, IconProps)));
-  if (increment) end.push(/*#__PURE__*/React.createElement(IconButton, _extends({
+  }, iconButtonProps), IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconDecrement, _objectSpread({}, IconProps))
+  })));
+  if (increment) end.push(/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
     onClick: onIncrement
-  }, iconButtonProps, IconButtonProps), /*#__PURE__*/React.createElement(IconIncrement, IconProps)));
-  return /*#__PURE__*/React.createElement(AdvancedTextField, _extends({
+  }, iconButtonProps), IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconIncrement, _objectSpread({}, IconProps))
+  })));
+  return /*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -200,6 +205,6 @@ const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     endVerticalAlign: "center",
     className: classNames([staticClassName('NumericTextField', theme) && ['onesy-NumericTextField-root', `onesy-NumericTextField-version-${version}`, `onesy-NumericTextField-size-${size}`], className, classes.root])
   }, other));
-});
+};
 NumericTextField.displayName = 'onesy-NumericTextField';
 export default NumericTextField;

package/esm/Page/Page.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["back", "forward", "noHeader", "name", "IconBack", "IconForward", "Component", "className", "children"];
@@ -15,6 +14,7 @@ import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -34,7 +34,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy'
 });
-const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Page = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPage?.props?.default), props_);
@@ -61,38 +61,47 @@ const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const IconButtonProps = {
     color: 'inherit'
   };
-  const navigation = (back || forward) && /*#__PURE__*/React.createElement(Line, {
+  const navigation = (back || forward) && /*#__PURE__*/_jsxs(Line, {
     direction: "row",
     align: "center",
     justify: "space-between",
-    fullWidth: true
-  }, back ? /*#__PURE__*/React.createElement(Tooltip, {
-    name: (back?.name !== undefined ? back.name : back?.label) || l('Back')
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => navigate(back?.to)
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBack, null))) : /*#__PURE__*/React.createElement("span", null), forward ? /*#__PURE__*/React.createElement(Tooltip, {
-    name: (forward?.name !== undefined ? forward.name : forward?.label) || l('Forward')
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => navigate(forward?.to)
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconForward, null))) : /*#__PURE__*/React.createElement("span", null));
-  const header = !noHeader && (navigation || name) && /*#__PURE__*/React.createElement(Line, {
+    fullWidth: true,
+    children: [back ? /*#__PURE__*/_jsx(Tooltip, {
+      name: (back?.name !== undefined ? back.name : back?.label) || l('Back'),
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => navigate(back?.to)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconBack, {})
+      }))
+    }) : /*#__PURE__*/_jsx("span", {}), forward ? /*#__PURE__*/_jsx(Tooltip, {
+      name: (forward?.name !== undefined ? forward.name : forward?.label) || l('Forward'),
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => navigate(forward?.to)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconForward, {})
+      }))
+    }) : /*#__PURE__*/_jsx("span", {})]
+  });
+  const header = !noHeader && (navigation || name) && /*#__PURE__*/_jsxs(Line, {
     gap: 2,
     direction: "column",
-    fullWidth: true
-  }, navigation, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    fullWidth: true
-  }, is('string', name) ? /*#__PURE__*/React.createElement(Type, {
-    version: "t1",
-    color: "inherit",
-    align: "center",
-    className: classes.name
-  }, name) : name));
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+    fullWidth: true,
+    children: [navigation, /*#__PURE__*/_jsx(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      fullWidth: true,
+      children: is('string', name) ? /*#__PURE__*/_jsx(Type, {
+        version: "t1",
+        color: "inherit",
+        align: "center",
+        className: classes.name,
+        children: name
+      }) : name
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     gap: 4,
     direction: "column",
     justify: "unset",
@@ -100,14 +109,17 @@ const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     flex: true,
     className: classNames([staticClassName('Page', theme) && ['onesy-Page-root'], className, classes.root])
-  }, other), header, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    justify: "unset",
-    align: "unset",
-    fullWidth: true,
-    flex: true
-  }, children));
-});
+  }, other), {}, {
+    children: [header, /*#__PURE__*/_jsx(Line, {
+      gap: 0,
+      direction: "column",
+      justify: "unset",
+      align: "unset",
+      fullWidth: true,
+      flex: true,
+      children: children
+    })]
+  }));
+};
 Page.displayName = 'onesy-Page';
 export default Page;