@onesy/ui-react 1.0.171 → 1.0.173

package/esm/Meta/Meta.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 = ["values", "separator", "ItemProps", "SeparatorProps", "className", "children"];
@@ -11,6 +10,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import TypeElement from '../Type';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     overflow: 'auto hidden',
@@ -21,8 +21,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Meta'
 });
-const Meta = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(8);
+const Meta = props_ => {
+  const $ = _c(7);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMeta?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -41,19 +41,21 @@ const Meta = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  const separator = is("string", separator_) ? /*#__PURE__*/React.createElement(Type, _extends({
+  const separator = is("string", separator_) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
     version: "b3",
     priority: "secondary"
-  }, SeparatorProps), separator_) : separator_;
+  }, SeparatorProps), {}, {
+    children: separator_
+  })) : separator_;
   let t2;
   if ($[0] !== Type) {
     t2 = (item, index) => {
       if (is("simple", item)) {
-        return /*#__PURE__*/React.createElement(Type, {
-          key: index,
+        return /*#__PURE__*/_jsx(Type, {
           version: "b3",
-          priority: "secondary"
-        }, item);
+          priority: "secondary",
+          children: item
+        }, index);
       }
       return /*#__PURE__*/React.cloneElement(item, {
         key: index
@@ -72,25 +74,25 @@ const Meta = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t6 = "flex-start";
   const t7 = classNames([staticClassName("Meta", theme) && ["onesy-Meta-root"], className, classes.root]);
   let t8;
-  if ($[2] !== Line || $[3] !== other || $[4] !== ref || $[5] !== t7 || $[6] !== values) {
-    t8 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[2] !== Line || $[3] !== other || $[4] !== t7 || $[5] !== values) {
+    t8 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       gap: t3,
       direction: t4,
       align: t5,
       justify: t6,
       className: t7
-    }, other), values);
+    }, other), {}, {
+      children: values
+    }));
     $[2] = Line;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t7;
-    $[6] = values;
-    $[7] = t8;
+    $[4] = t7;
+    $[5] = values;
+    $[6] = t8;
   } else {
-    t8 = $[7];
+    t8 = $[6];
   }
   return t8;
-});
+};
 Meta.displayName = 'onesy-Meta';
 export default Meta;

package/esm/Modal/Modal.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", "size", "open", "openDefault", "mainRef", "backgroundRef", "partialyOpened", "minWidth", "maxWidth", "fullScreen", "fullWidth", "background", "modalWrapper", "modalWrapperSurface", "portal", "focus", "freezeScroll", "disableKeyboardClose", "disableBackgroundClose", "backgroundInvisible", "onClose", "NoSurfaceProps", "SurfaceProps", "BackgroundProps", "PortalProps", "TransitionComponentProps", "BackgroundComponent", "TransitionComponent", "Component", "className", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "open", "openDefault", "mainRef", "backgroundRef", "partialyOpened", "minWidth", "maxWidth", "fullScreen", "fullWidth", "background", "modalWrapper", "modalWrapperSurface", "portal", "focus", "freezeScroll", "disableKeyboardClose", "disableBackgroundClose", "backgroundInvisible", "onClose", "NoSurfaceProps", "SurfaceProps", "BackgroundProps", "PortalProps", "TransitionComponentProps", "BackgroundComponent", "TransitionComponent", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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';
@@ -13,6 +12,7 @@ import FadeElement from '../Fade';
 import SurfaceElement from '../Surface';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'fixed',
@@ -136,7 +136,7 @@ let MODALS_OPEN = 0;
 
 // 1. Add padding right for freezeScroll for the scroll bar if it exists and width that it is
 
-const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Modal = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModal?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
@@ -144,6 +144,7 @@ const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Focus = theme?.elements?.Focus || FocusElement;
   const Fade = theme?.elements?.Fade || FadeElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -272,41 +273,53 @@ const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
     'aria-live': 'assertive'
   };
   let Main = children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, MainProps));
-  if (modalWrapper) Main = /*#__PURE__*/React.createElement("div", _extends({}, MainProps, {
-    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-modal-root'], classes.modalRoot])
-  }), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
-    in: inProp
-  }, TransitionComponentProps, {
-    onExited: onExited,
-    add: true
-  }), !modalWrapperSurface ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-no-surface'], NoSurfaceProps?.className, classes.noSurface])
-  }, children) : /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: mainRef,
-    tonal: tonal,
-    color: color,
-    tabIndex: "-1"
-  }, SurfaceProps, {
-    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-surface', `onesy-Modal-size-${size}`], classes.surface, classes[`minWidth_${minWidth}`], classes[`maxWidth_${maxWidth}`], classes[`size_${size}`], fullScreen && classes.fullScreen, fullWidth && classes.fullWidth, SurfaceProps?.className]),
-    onKeyDown: onKeyDown
-  }), children)));
-  return /*#__PURE__*/React.createElement(PortalComponent, PortalProps, /*#__PURE__*/React.createElement(Component, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-      setPortalElement(item);
-    },
-    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-root', open && `onesy-Modal-open`, focus && `onesy-Modal-focus`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(FocusComponent, FocusProps, background && /*#__PURE__*/React.createElement(BackgroundComponent, _extends({
-    in: inProp,
-    add: true
-  }, BackgroundProps), /*#__PURE__*/React.createElement("div", {
-    ref: backgroundRef,
-    onClick: () => !disableBackgroundClose && onClose(),
-    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-background', backgroundInvisible && 'onesy-Modal-background-invisible'], classes.background, backgroundInvisible && classes.backgroundInvisible])
-  })), Main)));
-});
+  if (modalWrapper) Main = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, MainProps), {}, {
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-modal-root'], classes.modalRoot]),
+    children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({
+      in: inProp
+    }, TransitionComponentProps), {}, {
+      onExited: onExited,
+      add: true,
+      children: !modalWrapperSurface ? /*#__PURE__*/_jsx("div", {
+        className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-no-surface'], NoSurfaceProps?.className, classes.noSurface]),
+        children: children
+      }) : /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
+        ref: mainRef,
+        tonal: tonal,
+        color: color,
+        tabIndex: "-1"
+      }, SurfaceProps), {}, {
+        className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-surface', `onesy-Modal-size-${size}`], classes.surface, classes[`minWidth_${minWidth}`], classes[`maxWidth_${maxWidth}`], classes[`size_${size}`], fullScreen && classes.fullScreen, fullWidth && classes.fullWidth, SurfaceProps?.className]),
+        onKeyDown: onKeyDown,
+        children: children
+      }))
+    }))
+  }));
+  return /*#__PURE__*/_jsx(PortalComponent, _objectSpread(_objectSpread({}, PortalProps), {}, {
+    children: /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
+      ref: item => {
+        if (ref) {
+          if (is('function', ref)) ref(item);else ref.current = item;
+        }
+        refs.root.current = item;
+        setPortalElement(item);
+      },
+      className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-root', open && `onesy-Modal-open`, focus && `onesy-Modal-focus`], className, classes.root])
+    }, other), {}, {
+      children: /*#__PURE__*/_jsxs(FocusComponent, _objectSpread(_objectSpread({}, FocusProps), {}, {
+        children: [background && /*#__PURE__*/_jsx(BackgroundComponent, _objectSpread(_objectSpread({
+          in: inProp,
+          add: true
+        }, BackgroundProps), {}, {
+          children: /*#__PURE__*/_jsx("div", {
+            ref: backgroundRef,
+            onClick: () => !disableBackgroundClose && onClose(),
+            className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-background', backgroundInvisible && 'onesy-Modal-background-invisible'], classes.background, backgroundInvisible && classes.backgroundInvisible])
+          })
+        })), Main]
+      }))
+    }))
+  }));
+};
 Modal.displayName = 'onesy-Modal';
 export default Modal;

package/esm/ModalFooter/ModalFooter.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 = ["className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     paddingTop: theme.methods.space.value('md', 'px')
@@ -16,8 +16,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ModalFooter'
 });
-const ModalFooter = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const ModalFooter = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalFooter?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -35,25 +35,25 @@ const ModalFooter = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t3 = true;
   const t4 = classNames([staticClassName("ModalFooter", theme) && ["onesy-ModalFooter-root"], className, classes.root]);
   let t5;
-  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t4) {
-    t5 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       direction: t0,
       align: t1,
       justify: t2,
       fullWidth: t3,
       className: t4
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Line;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t4;
-    $[5] = t5;
+    $[3] = t4;
+    $[4] = t5;
   } else {
-    t5 = $[5];
+    t5 = $[4];
   }
   return t5;
-});
+};
 ModalFooter.displayName = 'onesy-ModalFooter';
 export default ModalFooter;

package/esm/ModalHeader/ModalHeader.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 = ["className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line/Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     paddingBottom: theme.methods.space.value(2, 'px')
@@ -16,8 +16,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ModalHeader'
 });
-const ModalHeader = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const ModalHeader = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalHeader?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -36,26 +36,26 @@ const ModalHeader = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t4 = true;
   const t5 = classNames([staticClassName("ModalHeader", theme) && ["onesy-ModalHeader-root"], className, classes.root]);
   let t6;
-  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t5) {
-    t6 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       gap: t0,
       direction: t1,
       align: t2,
       justify: t3,
       fullWidth: t4,
       className: t5
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Line;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t5;
-    $[5] = t6;
+    $[3] = t5;
+    $[4] = t6;
   } else {
-    t6 = $[5];
+    t6 = $[4];
   }
   return t6;
-});
+};
 ModalHeader.displayName = 'onesy-ModalHeader';
 export default ModalHeader;

package/esm/ModalIcon/ModalIcon.js

@@ -1,22 +1,64 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["className", "children"];
+const _excluded = ["ref", "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) { _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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { useOnesyTheme } from '@onesy/style-react';
-const ModalIcon = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ModalIcon = props_ => {
+  const $ = _c(13);
   const theme = useOnesyTheme();
-  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalIcon?.props?.default), props_);
-  const {
-      className,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.cloneElement(children, _objectSpread({
-    ref,
-    size: 'regular'
-  }, other));
-});
+  const t0 = theme?.ui?.elements?.all?.props?.default;
+  const t1 = theme?.ui?.elements?.onesyModalIcon?.props?.default;
+  let children;
+  let other;
+  let ref;
+  if ($[0] !== props_ || $[1] !== t0 || $[2] !== t1) {
+    const props = _objectSpread(_objectSpread(_objectSpread({}, t0), t1), props_);
+    const {
+        ref: t2,
+        className,
+        children: t3
+      } = props,
+      t4 = _objectWithoutProperties(props, _excluded);
+    ref = t2;
+    children = t3;
+    other = t4;
+    $[0] = props_;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = children;
+    $[4] = other;
+    $[5] = ref;
+  } else {
+    children = $[3];
+    other = $[4];
+    ref = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== other || $[8] !== ref) {
+    let t3;
+    if ($[10] !== other || $[11] !== ref) {
+      t3 = _objectSpread({
+        ref,
+        size: "regular"
+      }, other);
+      $[10] = other;
+      $[11] = ref;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    t2 = /*#__PURE__*/React.cloneElement(children, t3);
+    $[6] = children;
+    $[7] = other;
+    $[8] = ref;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
+};
 ModalIcon.displayName = 'onesy-ModalIcon';
 export default ModalIcon;

package/esm/ModalMain/ModalMain.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 = ["className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // overflowY: 'auto',
@@ -20,8 +20,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ModalMain'
 });
-const ModalMain = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(7);
+const ModalMain = props_ => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalMain?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -40,25 +40,25 @@ const ModalMain = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t0 = align;
   const t1 = classNames([staticClassName("ModalMain", theme) && ["onesy-ModalMain-root"], className, classes.root]);
   let t2;
-  if ($[0] !== Line || $[1] !== align || $[2] !== children || $[3] !== other || $[4] !== ref || $[5] !== t1) {
-    t2 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[0] !== Line || $[1] !== align || $[2] !== children || $[3] !== other || $[4] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       align: t0,
       className: t1,
       flex: true,
       fullWidth: true
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Line;
     $[1] = align;
     $[2] = children;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t1;
-    $[6] = t2;
+    $[4] = t1;
+    $[5] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[5];
   }
   return t2;
-});
+};
 ModalMain.displayName = 'onesy-ModalMain';
 export default ModalMain;

package/esm/ModalText/ModalText.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 = ["className", "children"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-ModalText'
 });
-const ModalText = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const ModalText = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalText?.props?.default), props_);
   const Type = theme?.elements?.Type || TypeElement;
@@ -32,24 +32,24 @@ const ModalText = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t2 = "onesy-modal-text";
   const t3 = classNames([staticClassName("ModalText", theme) && ["onesy-ModalText-root"], className, classes.root]);
   let t4;
-  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t3) {
-    t4 = /*#__PURE__*/React.createElement(Type, _extends({
-      ref: ref,
+  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
       version: t0,
       align: t1,
       id: t2,
       className: t3
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Type;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t3;
-    $[5] = t4;
+    $[3] = t3;
+    $[4] = t4;
   } else {
-    t4 = $[5];
+    t4 = $[4];
   }
   return t4;
-});
+};
 ModalText.displayName = 'onesy-ModalText';
 export default ModalText;

package/esm/ModalTitle/ModalTitle.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 = ["className", "children"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-ModalTitle'
 });
-const ModalTitle = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const ModalTitle = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModalTitle?.props?.default), props_);
   const Type = theme?.elements?.Type || TypeElement;
@@ -32,24 +32,24 @@ const ModalTitle = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t2 = "onesy-modal-title";
   const t3 = classNames([staticClassName("ModalTitle", theme) && ["onesy-ModalTitle-root"], className, classes.root]);
   let t4;
-  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t3) {
-    t4 = /*#__PURE__*/React.createElement(Type, _extends({
-      ref: ref,
+  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
       version: t0,
       align: t1,
       id: t2,
       className: t3
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Type;
     $[1] = children;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t3;
-    $[5] = t4;
+    $[3] = t3;
+    $[4] = t4;
   } else {
-    t4 = $[5];
+    t4 = $[4];
   }
   return t4;
-});
+};
 ModalTitle.displayName = 'onesy-ModalTitle';
 export default ModalTitle;

package/esm/MoreOptions/MoreOptions.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 = ["menuItems", "Icon", "IconButtonProps", "className"];
@@ -11,6 +10,7 @@ import IconMaterialMoreVert from '@onesy/icons-material-rounded-react/IconMateri
 import IconButtonElement from '../IconButton';
 import MenuElement from '../Menu/Menu';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   iconButton: {
@@ -19,7 +19,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-MoreOptions'
 });
-const MoreOptions = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const MoreOptions = props_ => {
   const $ = _c(8);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMoreOptions?.props?.default), props_);
@@ -43,7 +43,7 @@ const MoreOptions = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t5 = classNames([staticClassName("MoreOptions", theme) && ["onesy-MoreOptions-icon-button"], IconButtonProps?.className, classes.iconButton]);
   let t6;
   if ($[0] !== Icon_) {
-    t6 = /*#__PURE__*/React.createElement(Icon_, null);
+    t6 = /*#__PURE__*/_jsx(Icon_, {});
     $[0] = Icon_;
     $[1] = t6;
   } else {
@@ -51,13 +51,14 @@ const MoreOptions = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t7;
   if ($[2] !== IconButton || $[3] !== IconButtonProps || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
-    t7 = /*#__PURE__*/React.createElement(IconButton, _extends({
+    t7 = /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
       color: t2,
       size: t3,
       disabled: t4
-    }, IconButtonProps, {
-      className: t5
-    }), t6);
+    }, IconButtonProps), {}, {
+      className: t5,
+      children: t6
+    }));
     $[2] = IconButton;
     $[3] = IconButtonProps;
     $[4] = t4;
@@ -67,16 +68,17 @@ const MoreOptions = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     t7 = $[7];
   }
-  return /*#__PURE__*/React.createElement(Menu, _extends({
+  return /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
     alignment: "center",
     menuItems: menuItems
-  }, other, {
+  }, other), {}, {
     ListProps: _objectSpread({
       color: "themed",
       size: "small"
     }, other?.ListProps),
-    className: t1
-  }), t7);
-});
+    className: t1,
+    children: t7
+  }));
+};
 MoreOptions.displayName = 'onesy-MoreOptions';
 export default MoreOptions;