@onesy/ui-react 1.0.172 → 1.0.174

package/esm/HTMLCanvas/HTMLCanvas.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 = ["size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "Component", "className", "children"];
+const _excluded = ["ref", "size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "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';
@@ -18,6 +17,7 @@ import ListItemElement from '../ListItem';
 import LabelElement from '../Label';
 import SwitchElement from '../Switch';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {
     position: 'relative',
@@ -93,7 +93,7 @@ const useStyle = style(theme => ({
 }), {
   name: 'onesy-HTMLCanvas'
 });
-const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const HTMLCanvas = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyHTMLCanvas?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -106,6 +106,7 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Label = theme?.elements?.Label || LabelElement;
   const Switch = theme?.elements?.Switch || SwitchElement;
   const {
+      ref,
       size = 'regular',
       width = 240_000,
       height = 240_000,
@@ -557,7 +558,7 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
     viewportStyles.left = Math.abs(positions.left) / zoomPerSize * zoomAdjusted_0;
     viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted_0;
-    return /*#__PURE__*/React.createElement(Line, {
+    return /*#__PURE__*/_jsxs(Line, {
       ref: refs.miniMap,
       onMouseDown: onMouseDownMiniMap,
       onTouchStart: onTouchStartMiniMap,
@@ -565,13 +566,14 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: {
         width: width_,
         height: height_
-      }
-    }, /*#__PURE__*/React.createElement(Line, {
-      className: classes.miniMapMain
-    }), /*#__PURE__*/React.createElement(Line, {
-      className: classes.miniMapViewport,
-      style: _objectSpread({}, viewportStyles)
-    }));
+      },
+      children: [/*#__PURE__*/_jsx(Line, {
+        className: classes.miniMapMain
+      }), /*#__PURE__*/_jsx(Line, {
+        className: classes.miniMapViewport,
+        style: _objectSpread({}, viewportStyles)
+      })]
+    });
   }, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
   const updateMiniMap = debounce(() => {
     const root_6 = refs.root.current;
@@ -636,7 +638,7 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     // mini map
     if (useMiniMap) updateMiniMap();
   }, [children, useMiniMap]);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item_4 => {
       if (ref) {
         if (is('function', ref)) ref(item_4);
@@ -654,67 +656,79 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onTouchStart: onTouchStart,
     Component: Component,
     className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-root'], className, classes.root, keyDown === ' ' && classes.move, disabled && classes.disabled])
-  }, other), pre, !noActions && /*#__PURE__*/React.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions])
-  }, !noGuideLines && /*#__PURE__*/React.createElement(Label, {
-    value: showGuidelines,
-    onChange: onShowGuidelines,
-    size: "small"
-  }, /*#__PURE__*/React.createElement(Switch, null), "Guidelines"), !noFitCenter && /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-end"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    name: "Fit"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    size: size,
-    onClick: onCenter
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconCenter, null)))), !noZoomMenu && /*#__PURE__*/React.createElement(Menu, {
-    menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item_5.name,
-      primary: /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, item_5.name),
-      value: item_5.name,
-      selected: +positions.zoom.toFixed(2) === +(item_5.value || 0).toFixed(2)
-    }, item_5.props, {
-      size: "small",
-      button: true
-    }))),
-    className: classes.menu
-  }, /*#__PURE__*/React.createElement(Line, {
-    align: "center",
-    justify: "center",
-    className: classes.zoom
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
-    align: "center",
-    whiteSpace: "nowrap",
-    fullWidth: true
-  }, (positions.zoom * 100).toFixed(0), "%")))), /*#__PURE__*/React.createElement(Line, _extends({}, ContainerProps, {
-    ref: item_6 => {
-      if (ContainerProps?.ref) {
-        if (is('function', ContainerProps?.ref)) ContainerProps.ref(item_6);
-        ContainerProps.ref.current = item_6;
-      }
-      refs.container.current = item_6;
-    },
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    flex: true,
-    fullWidth: true,
-    className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps?.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
-    style: _objectSpread({
-      width,
-      height
-    }, ContainerProps?.style)
-  }), children), useMiniMap && miniMap, post);
-});
+  }, other), {}, {
+    children: [pre, !noActions && /*#__PURE__*/_jsxs(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      justify: "flex-start",
+      className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions]),
+      children: [!noGuideLines && /*#__PURE__*/_jsxs(Label, {
+        value: showGuidelines,
+        onChange: onShowGuidelines,
+        size: "small",
+        children: [/*#__PURE__*/_jsx(Switch, {}), "Guidelines"]
+      }), !noFitCenter && /*#__PURE__*/_jsx(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "flex-end",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          name: "Fit",
+          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            size: size,
+            onClick: onCenter
+          }, IconButtonProps), {}, {
+            children: /*#__PURE__*/_jsx(IconCenter, {})
+          }))
+        })
+      }), !noZoomMenu && /*#__PURE__*/_jsx(Menu, {
+        menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/_jsx(ListItem, _objectSpread(_objectSpread({
+          primary: /*#__PURE__*/_jsx(Type, {
+            version: "b3",
+            children: item_5.name
+          }),
+          value: item_5.name,
+          selected: +positions.zoom.toFixed(2) === +(item_5.value || 0).toFixed(2)
+        }, item_5.props), {}, {
+          size: "small",
+          button: true
+        }), item_5.name)),
+        className: classes.menu,
+        children: /*#__PURE__*/_jsx(Line, {
+          align: "center",
+          justify: "center",
+          className: classes.zoom,
+          children: /*#__PURE__*/_jsxs(Type, {
+            version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
+            align: "center",
+            whiteSpace: "nowrap",
+            fullWidth: true,
+            children: [(positions.zoom * 100).toFixed(0), "%"]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({}, ContainerProps), {}, {
+      ref: item_6 => {
+        if (ContainerProps?.ref) {
+          if (is('function', ContainerProps?.ref)) ContainerProps.ref(item_6);
+          ContainerProps.ref.current = item_6;
+        }
+        refs.container.current = item_6;
+      },
+      gap: 0,
+      align: "unset",
+      justify: "unset",
+      flex: true,
+      fullWidth: true,
+      className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps?.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
+      style: _objectSpread({
+        width,
+        height
+      }, ContainerProps?.style),
+      children: children
+    })), useMiniMap && miniMap, post]
+  }));
+};
 HTMLCanvas.displayName = 'onesy-HTMLCanvas';
 export default HTMLCanvas;

package/esm/IFrame/IFrame.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 = ["id", "src", "WrapperProps", "className", "children"];
+const _excluded = ["ref", "id", "src", "WrapperProps", "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';
@@ -10,6 +9,7 @@ import { is, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import { importIframeStyles, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100%',
@@ -24,11 +24,12 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-IFrame'
 });
-const IFrame = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const IFrame = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIFrame?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const {
+      ref,
       id,
       src,
       WrapperProps,
@@ -89,32 +90,37 @@ const IFrame = /*#__PURE__*/React.forwardRef((props_, ref) => {
     refresh();
     if (!init) setInit(true);
   }, [id, refs.root.current, children, theme]);
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     flex: true,
     fullWidth: true
-  }, WrapperProps), /*#__PURE__*/React.createElement(Line, {
-    className: classes.hidden
-  }, children), src && /*#__PURE__*/React.createElement("iframe", _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      setRoot(item);
-    },
-    title: id,
-    src: src,
-    className: classNames([staticClassName('IFrame', theme) && ['onesy-IFrame-root'], className, classes.root])
-  }, other), init && iframeBody && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.cloneElement(children, {
-    iframeRef: refs.root.current,
-    style: _objectSpread(_objectSpread({}, children?.props.style), {}, {
-      transition: theme.methods.transitions.make('opacity')
-    }, show ? {
-      opacity: 1
-    } : {
-      opacity: 0
-    })
-  }), iframeBody)));
-});
+  }, WrapperProps), {}, {
+    children: [/*#__PURE__*/_jsx(Line, {
+      className: classes.hidden,
+      children: children
+    }), src && /*#__PURE__*/_jsx("iframe", _objectSpread(_objectSpread({
+      ref: item => {
+        if (ref) {
+          if (is('function', ref)) ref(item);else ref.current = item;
+        }
+        setRoot(item);
+      },
+      title: id,
+      src: src,
+      className: classNames([staticClassName('IFrame', theme) && ['onesy-IFrame-root'], className, classes.root])
+    }, other), {}, {
+      children: init && iframeBody && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.cloneElement(children, {
+        iframeRef: refs.root.current,
+        style: _objectSpread(_objectSpread({}, children?.props.style), {}, {
+          transition: theme.methods.transitions.make('opacity')
+        }, show ? {
+          opacity: 1
+        } : {
+          opacity: 0
+        })
+      }), iframeBody)
+    }))]
+  }));
+};
 IFrame.displayName = 'onesy-IFrame';
 export default IFrame;

package/esm/Icon/Icon.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 = ["viewBox", "name", "short_name", "tonal", "tone", "color", "size", "noRtl", "disabled", "Component", "className", "style", "children"];
@@ -8,6 +7,7 @@ import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { iconSizeToFontSize, staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const rtl_icons = ['ArrowForwardIos', 'ArrowBackIos', 'ArrowBack', 'ArrowForward', 'ArrowLeft', 'ArrowRight', 'AssignmentReturn', 'CallMade', 'CallMissedOutgoing', 'ChevronLeft', 'ChevronRight', 'DeviceUnknown', 'FeaturedPlayList', 'FlightLand', 'FormatIndentIncrease', 'Functions', 'Input', 'Label', 'LastPage', 'LiveHelp', 'NavigateBefore', 'Note', 'QueueMusic', 'ReplyAll', 'ShortText', 'StarHalf', 'Toc', 'Undo', 'WrapText', 'FirstPage', 'LastPage', 'NavigateNext', 'NavigateBefore'];
 const useStyle = styleMethod(theme => ({
   root: {
@@ -37,8 +37,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Icon'
 });
-const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(15);
+const Icon = props_ => {
+  const $ = _c(14);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIcon?.props?.default), props_);
   const {
@@ -118,9 +118,8 @@ const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
     t9 = $[6];
   }
   let t10;
-  if ($[7] !== Component || $[8] !== children || $[9] !== other || $[10] !== ref || $[11] !== t8 || $[12] !== t9 || $[13] !== viewBox) {
-    t10 = /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
+  if ($[7] !== Component || $[8] !== children || $[9] !== other || $[10] !== t8 || $[11] !== t9 || $[12] !== viewBox) {
+    t10 = /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
       className: t8,
       viewBox: viewBox,
       width: "1em",
@@ -128,19 +127,20 @@ const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
       focusable: "false",
       "aria-hidden": true,
       style: t9
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[7] = Component;
     $[8] = children;
     $[9] = other;
-    $[10] = ref;
-    $[11] = t8;
-    $[12] = t9;
-    $[13] = viewBox;
-    $[14] = t10;
+    $[10] = t8;
+    $[11] = t9;
+    $[12] = viewBox;
+    $[13] = t10;
   } else {
-    t10 = $[14];
+    t10 = $[13];
   }
   return t10;
-});
+};
 Icon.displayName = 'onesy-Icon';
 export default Icon;

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

package/esm/Image/Image.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", "src", "url", "urlSmall", "sources", "alt", "description", "alignDescription", "width", "height", "align", "responsive", "lazyLoad", "fullWidth", "maxWidth", "loading", "RootProps", "NoImageProps", "DescriptionProps", "UseVisibleProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "src", "url", "urlSmall", "sources", "alt", "description", "alignDescription", "width", "height", "align", "responsive", "lazyLoad", "fullWidth", "maxWidth", "loading", "RootProps", "NoImageProps", "DescriptionProps", "UseVisibleProps", "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 SurfaceElement from '../Surface';
 import LineElement from '../Line';
 import useVisible from '../useVisible/useVisible';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -114,13 +114,14 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Image'
 });
-const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Image = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImage?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const Type = theme?.elements?.Type || TypeElement;
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       src,
@@ -228,7 +229,7 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('Image', theme) && ['onesy-Image-picture'], classes.picture])
   } : {};
   if (!rootIsImage && !noImage) {
-    const imgElement = /*#__PURE__*/React.createElement("img", {
+    const imgElement = /*#__PURE__*/_jsx("img", {
       src: src,
       alt: alt || '',
       width: width,
@@ -237,14 +238,17 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([staticClassName('Image', theme) && ['onesy-Image-img'], className, classes.img]),
       style: style
     });
-    other.children = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Wrapper, WrapperProps, sources?.length && sources.map((item, index) => /*#__PURE__*/React.createElement("source", _extends({
-      key: index
-    }, item))), children, imgElement), description && /*#__PURE__*/React.createElement(Type, _extends({
-      Component: "figcaption",
-      version: "b3"
-    }, DescriptionProps, {
-      className: classNames([staticClassName('Image', theme) && ['onesy-Image-figcaption'], DescriptionProps?.className, className, classes.figcaption, classes[`align_description_${alignDescription}`]])
-    }), description));
+    other.children = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+        children: [sources?.length && sources.map((item, index) => /*#__PURE__*/_jsx("source", _objectSpread({}, item), index)), children, imgElement]
+      })), description && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+        Component: "figcaption",
+        version: "b3"
+      }, DescriptionProps), {}, {
+        className: classNames([staticClassName('Image', theme) && ['onesy-Image-figcaption'], DescriptionProps?.className, className, classes.figcaption, classes[`align_description_${alignDescription}`]]),
+        children: description
+      }))]
+    });
   }
   if (noImage) {
     Component = Line;
@@ -253,7 +257,7 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
     other.style = style;
     delete other.Component;
   }
-  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;
@@ -261,9 +265,9 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setRoot(item_0);
       refs.root.current = item_0;
     }
-  }, RootProps, {
+  }, RootProps), {}, {
     className: classNames([staticClassName('Image', theme) && ['onesy-Image-root', noImage && 'onesy-Image-no-image', picture && !description && `onesy-Image-picture`], RootProps?.className, className, classes.root, classes[`align_${align}`], noImage && classes.noImage, responsive && classes.responsive, maxWidth && classes[`maxWidth_${maxWidth}`], fullWidth && classes.fullWidth, rootIsImage && classes.root_img, picture && !description && classes.root_picture, description && classes.root_figure])
   }, other));
-});
+};
 Image.displayName = 'onesy-Image';
 export default Image;