@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Interaction/Interaction.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { is, getID, debounce, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName, Transition, Transitions, useMediaQuery } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const other = {
   pointerEvents: 'none',
   borderRadius: 'inherit',
@@ -132,10 +133,11 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Interaction'
 });
-const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Interaction = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyInteraction?.props?.default), props_);
   const {
+    ref,
     wave = true,
     background = true,
     border: hasBorder,
@@ -313,20 +315,20 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
         top = y - width / 2;
         left = x - width / 2;
       }
-      setWaves(items => [...items, /*#__PURE__*/React.createElement(Transition, {
-        key: getID(),
+      setWaves(items => [...items, /*#__PURE__*/_jsx(Transition, {
         duration: "complex",
         enterOnAdd: true,
-        className: true
-      }, /*#__PURE__*/React.createElement("span", {
-        className: wave_version === 'simple' ? classes.waveSimple : classes.wave,
-        style: {
-          top: `${top}px`,
-          left: `${left}px`,
-          width: `${width}px`,
-          height: `${width}px`
-        }
-      }))]);
+        className: true,
+        children: /*#__PURE__*/_jsx("span", {
+          className: wave_version === 'simple' ? classes.waveSimple : classes.wave,
+          style: {
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${width}px`,
+            height: `${width}px`
+          }
+        })
+      }, getID())]);
     }
   };
   const addWavePulse = () => {
@@ -342,20 +344,20 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
       const width_0 = Math.round(Math.sqrt(x_0 ** 2 + y_0 ** 2) * 2);
       const top_0 = y_0 - width_0 / 2;
       const left_0 = x_0 - width_0 / 2;
-      setWaves(items_0 => [...items_0, /*#__PURE__*/React.createElement(Transition, {
-        key: getID(),
+      setWaves(items_0 => [...items_0, /*#__PURE__*/_jsx(Transition, {
         duration: "complex",
         enterOnAdd: true,
-        className: true
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classNames([classes.wave, classes.pulse]),
-        style: {
-          top: `${top_0}px`,
-          left: `${left_0}px`,
-          width: `${width_0}px`,
-          height: `${width_0}px`
-        }
-      }))]);
+        className: true,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classNames([classes.wave, classes.pulse]),
+          style: {
+            top: `${top_0}px`,
+            left: `${left_0}px`,
+            width: `${width_0}px`,
+            height: `${width_0}px`
+          }
+        })
+      }, getID())]);
     }
   };
   const removeWaves = () => {
@@ -368,39 +370,42 @@ const Interaction = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const remove = value_1 => {
     if (has(value_1)) setInteractions(items_2 => [...items_2].filter(item => item !== value_1));
   };
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsxs("span", {
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
       refs.root.current = item_0;
     },
-    className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-root', disabled && `onesy-Interaction-disabled`], className, classes.root])
-  }, background && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-background'], classes.background, (preselected || has('mouse-in')) && classes.hovered, selected && classes.selected, dragged && classes.dragged])
-  }), /*#__PURE__*/React.createElement(Transitions, {
-    TransitionProps: {
-      noAbruption: true,
-      duration: {
-        enter: 'complex',
-        exit: refs.mouse.current.press < 500 ? 350 : 500
+    className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-root', disabled && `onesy-Interaction-disabled`], className, classes.root]),
+    children: [background && /*#__PURE__*/_jsx("span", {
+      className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-background'], classes.background, (preselected || has('mouse-in')) && classes.hovered, selected && classes.selected, dragged && classes.dragged])
+    }), /*#__PURE__*/_jsx(Transitions, {
+      TransitionProps: {
+        noAbruption: true,
+        duration: {
+          enter: 'complex',
+          exit: refs.mouse.current.press < 500 ? 350 : 500
+        },
+        style: {
+          transitionDuration: refs.mouse.current.press < 500 ? 340 : 500
+        }
       },
-      style: {
-        transitionDuration: refs.mouse.current.press < 500 ? 340 : 500
-      }
-    }
-  }, waves), hasBorder && /*#__PURE__*/React.createElement(Transition, {
-    in: border
-  }, status => /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-border'], classes.border]),
-    style: {
-      opacity: status?.indexOf('enter') > -1 ? theme.palette.visual_contrast.default.opacity.quaternary : 0,
-      transition: status?.indexOf('exit') > -1 ? theme.methods.transitions.make('opacity', {
-        duration: 'complex',
-        timing_function: 'standard'
-      }) : undefined
-    }
-  })));
-});
+      children: waves
+    }), hasBorder && /*#__PURE__*/_jsx(Transition, {
+      in: border,
+      children: status => /*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('Interaction', theme) && ['onesy-Interaction-border'], classes.border]),
+        style: {
+          opacity: status?.indexOf('enter') > -1 ? theme.palette.visual_contrast.default.opacity.quaternary : 0,
+          transition: status?.indexOf('exit') > -1 ? theme.methods.transitions.make('opacity', {
+            duration: 'complex',
+            timing_function: 'standard'
+          }) : undefined
+        }
+      })
+    })]
+  });
+};
 Interaction.displayName = 'onesy-Interaction';
 export default Interaction;

package/esm/Keyframes/Keyframes.js

@@ -7,6 +7,7 @@ import OnesySubscription from '@onesy/subscription';
 import { classNames, useOnesyTheme } from '@onesy/style-react';
 import KeyframesContext from './Context';
 import { reflow } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const Keyframes = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyKeyframes?.props?.default), props_);
@@ -167,16 +168,17 @@ const Keyframes = props_ => {
   const value = {
     status
   };
-  return /*#__PURE__*/React.createElement(KeyframesContext.Provider, {
-    value: value
-  }, is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
-    ref: item_0 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_0);else ref.current = item_0;
+  return /*#__PURE__*/_jsx(KeyframesContext.Provider, {
+    value: value,
+    children: is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
+      ref: item_0 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_0);else ref.current = item_0;
+        }
+        refs.root.current = item_0;
       }
-      refs.root.current = item_0;
-    }
-  }));
+    })
+  });
 };
 Keyframes.displayName = 'onesy-Keyframes';
 export default Keyframes;

package/esm/Label/Label.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", "colorUnchecked", "version", "position", "size", "input", "name", "label", "valueDefault", "checkedDefault", "checked", "onChange", "error", "helperText", "footer", "disabled", "LabelProps", "TypeProps", "TextProps", "Component", "className", "children"];
@@ -10,6 +9,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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     cursor: 'pointer',
@@ -40,7 +40,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Label'
 });
-const Label = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Label = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLabel?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -107,55 +107,64 @@ const Label = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const footer = footer_ || helperText;
   let gap = size === 'small' ? 1 : size === 'regular' ? 1.5 : 2;
   if (version === 'text') gap = size === 'small' ? 0.25 : size === 'regular' ? 0.5 : 0.75;
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column"
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: gap,
-    direction: ['top', 'bottom'].includes(position) ? position === 'bottom' ? 'column-reverse' : 'column' : position === 'end' ? 'row-reverse' : 'row',
-    align: align,
-    justify: justify,
-    role: "group",
-    "aria-labelledby": refs.ids.label,
-    "aria-disabled": disabled,
-    disabled: disabled,
-    Component: Component
-  }, LabelProps, {
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-root', `onesy-Label-version-${version}`, `onesy-Label-size-${size}`, disabled && `onesy-Label-disabled`], LabelProps?.className, className, classes.root, disabled && classes.disabled])
-  }), Input && /*#__PURE__*/React.cloneElement(Input, {
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-input'], classes.input]),
-    tonal: Input?.props?.tonal !== undefined ? Input.props.tonal : tonal,
-    color: Input?.props?.color !== undefined ? Input.props.color : color,
-    colorUnchecked: Input?.props?.colorUnchecked !== undefined ? Input.props.colorUnchecked : colorUnchecked,
-    version: Input?.props?.version !== undefined ? Input.props.version : version,
-    size: Input?.props?.size !== undefined ? Input.props.size : size,
-    onChange: onUpdate,
-    checked: value,
-    disabled
-  }), Text?.length === 1 && is('simple', Text[0]) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-    id: refs.ids.label
-  }, TypeProps, TextProps, {
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-text'], TextProps?.className, TypeProps?.className, classes.text, disabled && classes.text_disabled])
-  }), Text[0]) : /*#__PURE__*/React.createElement(Line, _extends({
-    direction: "row",
-    id: refs.ids.label
-  }, TextProps, {
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-text-wrapper'], TextProps?.className])
-  }), Text?.map((item_0, index) => is('simple', item_0) ? /*#__PURE__*/React.createElement(Type, {
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, item_0) : /*#__PURE__*/React.cloneElement(item_0, {
-    key: index
-  })))), footer && /*#__PURE__*/React.createElement(React.Fragment, null, helperText !== undefined && /*#__PURE__*/React.createElement(Line, {
-    gap: 2,
-    direction: "row",
-    justify: "space-between",
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-footer'], classes.footer])
-  }, helperText && /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    className: classNames([staticClassName('Label', theme) && ['onesy-Label-helper-text', error && 'onesy-Label-error'], classes.helperText, error && classes.error_color])
-  }, helperText)), footer_));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+      gap: gap,
+      direction: ['top', 'bottom'].includes(position) ? position === 'bottom' ? 'column-reverse' : 'column' : position === 'end' ? 'row-reverse' : 'row',
+      align: align,
+      justify: justify,
+      role: "group",
+      "aria-labelledby": refs.ids.label,
+      "aria-disabled": disabled,
+      disabled: disabled,
+      Component: Component
+    }, LabelProps), {}, {
+      className: classNames([staticClassName('Label', theme) && ['onesy-Label-root', `onesy-Label-version-${version}`, `onesy-Label-size-${size}`, disabled && `onesy-Label-disabled`], LabelProps?.className, className, classes.root, disabled && classes.disabled]),
+      children: [Input && /*#__PURE__*/React.cloneElement(Input, {
+        className: classNames([staticClassName('Label', theme) && ['onesy-Label-input'], classes.input]),
+        tonal: Input?.props?.tonal !== undefined ? Input.props.tonal : tonal,
+        color: Input?.props?.color !== undefined ? Input.props.color : color,
+        colorUnchecked: Input?.props?.colorUnchecked !== undefined ? Input.props.colorUnchecked : colorUnchecked,
+        version: Input?.props?.version !== undefined ? Input.props.version : version,
+        size: Input?.props?.size !== undefined ? Input.props.size : size,
+        onChange: onUpdate,
+        checked: value,
+        disabled
+      }), Text?.length === 1 && is('simple', Text[0]) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+        id: refs.ids.label
+      }, TypeProps), TextProps), {}, {
+        className: classNames([staticClassName('Label', theme) && ['onesy-Label-text'], TextProps?.className, TypeProps?.className, classes.text, disabled && classes.text_disabled]),
+        children: Text[0]
+      })) : /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        direction: "row",
+        id: refs.ids.label
+      }, TextProps), {}, {
+        className: classNames([staticClassName('Label', theme) && ['onesy-Label-text-wrapper'], TextProps?.className]),
+        children: Text?.map((item_0, index) => is('simple', item_0) ? /*#__PURE__*/_jsx(Type, {
+          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+          children: item_0
+        }) : /*#__PURE__*/React.cloneElement(item_0, {
+          key: index
+        }))
+      }))]
+    })), footer && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [helperText !== undefined && /*#__PURE__*/_jsx(Line, {
+        gap: 2,
+        direction: "row",
+        justify: "space-between",
+        className: classNames([staticClassName('Label', theme) && ['onesy-Label-footer'], classes.footer]),
+        children: helperText && /*#__PURE__*/_jsx(Type, {
+          version: "b3",
+          className: classNames([staticClassName('Label', theme) && ['onesy-Label-helper-text', error && 'onesy-Label-error'], classes.helperText, error && classes.error_color]),
+          children: helperText
+        })
+      }), footer_]
+    })]
+  }));
+};
 Label.displayName = 'onesy-Label';
 export default Label;

package/esm/Labels/Labels.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", "colorUnchecked", "version", "size", "name", "label", "direction", "align", "justify", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "WrapperProps", "LabelProps", "Component", "className", "children"];
@@ -10,6 +9,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, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   label_disabled: {
@@ -22,7 +22,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Labels'
 });
-const Labels = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Labels = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLabels?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -78,8 +78,7 @@ const Labels = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setValue(value__);
     if (is('function', onChange)) onChange(value__);
   };
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 1,
     direction: direction,
     align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
@@ -88,27 +87,32 @@ const Labels = /*#__PURE__*/React.forwardRef((props_, ref) => {
     "aria-labelledby": refs.ids.label,
     Component: Component,
     className: classNames([staticClassName('Labels', theme) && ['onesy-Labels-root', `onesy-Labels-version-${version}`, `onesy-Labels-size-${size}`, `onesy-Labels-version-${version}`, disabled && `onesy-Labels-disabled`], className, classes.root, disabled && classes.disabled])
-  }, other), label && /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'regular' ? 'l2' : size === 'large' ? 'l1' : 'l3',
-    id: refs.ids.label
-  }, LabelProps, {
-    className: classNames([staticClassName('Labels', theme) && ['onesy-Labels-label'], LabelProps?.className, classes.label, disabled && classes.label_disabled])
-  }), label), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 1,
-    direction: direction,
-    align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
-    justify: justify
-  }, WrapperProps), children.map((item_0, index_0) => (/*#__PURE__*/React.cloneElement(item_0, {
-    key: index_0,
-    checked: value.includes(item_0.props.value),
-    onChange: () => onUpdate(item_0.props.value),
-    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
-    color: item_0.props.color !== undefined ? item_0.props.color : color,
-    colorUnchecked: item_0.props.colorUnchecked !== undefined ? item_0.props.colorUnchecked : colorUnchecked,
-    version: item_0.props.version !== undefined ? item_0.props.version : version,
-    size: item_0.props.size !== undefined ? item_0.props.size : size,
-    disabled: item_0.props.disabled !== undefined ? item_0.props.disabled : disabled
-  })))));
-});
+  }, other), {}, {
+    children: [label && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+      version: size === 'regular' ? 'l2' : size === 'large' ? 'l1' : 'l3',
+      id: refs.ids.label
+    }, LabelProps), {}, {
+      className: classNames([staticClassName('Labels', theme) && ['onesy-Labels-label'], LabelProps?.className, classes.label, disabled && classes.label_disabled]),
+      children: label
+    })), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+      gap: 1,
+      direction: direction,
+      align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
+      justify: justify
+    }, WrapperProps), {}, {
+      children: children.map((item_0, index_0) => (/*#__PURE__*/React.cloneElement(item_0, {
+        key: index_0,
+        checked: value.includes(item_0.props.value),
+        onChange: () => onUpdate(item_0.props.value),
+        tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+        color: item_0.props.color !== undefined ? item_0.props.color : color,
+        colorUnchecked: item_0.props.colorUnchecked !== undefined ? item_0.props.colorUnchecked : colorUnchecked,
+        version: item_0.props.version !== undefined ? item_0.props.version : version,
+        size: item_0.props.size !== undefined ? item_0.props.size : size,
+        disabled: item_0.props.disabled !== undefined ? item_0.props.disabled : disabled
+      })))
+    }))]
+  }));
+};
 Labels.displayName = 'onesy-Labels';
 export default Labels;

package/esm/Line/Line.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 = ["display", "align", "justify", "direction", "gap", "rowGap", "columnGap", "divider", "wrap", "flex", "flexNo", "fullWidth", "DividerProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "display", "align", "justify", "direction", "gap", "rowGap", "columnGap", "divider", "wrap", "flex", "flexNo", "fullWidth", "DividerProps", "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';
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import DividerElement from '../Divider';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName, valueBreakpoints } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'flex',
@@ -201,11 +201,12 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Line'
 });
-const Line = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Line = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLine?.props?.default), props_);
   const Divider = theme?.elements?.Divider || DividerElement;
   const {
+      ref,
       display: display_,
       align: align_,
       justify: justify_,
@@ -268,11 +269,11 @@ const Line = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     if (!valuesGaps.includes(gap)) styles.root.gap = is('string', gap) ? gap : `${gap * theme.space.unit}px`;
   }
-  const Divider_ = /*#__PURE__*/React.createElement(Divider, _extends({
+  const Divider_ = /*#__PURE__*/_jsx(Divider, _objectSpread({
     flex: true,
     orientation: direction.includes('row') ? 'vertical' : 'horizontal'
   }, DividerProps));
-  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;
@@ -281,7 +282,9 @@ const Line = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     className: classNames([staticClassName('Line', theme) && ['onesy-Line-root', `onesy-Line-direction-${direction}`], className, classes.root, classes[`display_${display.replace('-', '_')}`], classes[`wrap_${wrap}`], classes[`direction_${direction}`], classes[`align_${align}`], classes[`justify_${justify}`], classes[`gap_${String(gap).replace('.', '')}`], classes[`rowGap_${String(rowGap).replace('.', '')}`], classes[`columnGap_${String(columnGap).replace('.', '')}`], flex && classes.flex, flexNo && classes.flexNo, fullWidth && classes.fullWidth]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), React.Children.toArray(children).flatMap((item_1, index) => !divider || index === children.length - 1 ? [item_1] : [item_1, Divider_]));
-});
+  }, other), {}, {
+    children: React.Children.toArray(children).flatMap((item_1, index) => !divider || index === children.length - 1 ? [item_1] : [item_1, Divider_])
+  }));
+};
 Line.displayName = 'onesy-Line';
 export default Line;

package/esm/LineChart/LineChart.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", "smooth", "smoothRatio", "className"];
@@ -11,13 +10,14 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import ChartElement from '../Chart';
 import LineChartItemElement from '../LineChartItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-LineChart'
 });
-const LineChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(7);
+const LineChart = props_ => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLineChart?.props?.default), props_);
   const Chart = theme?.elements?.Chart || ChartElement;
@@ -33,29 +33,28 @@ const LineChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const t0 = classNames([staticClassName("LineChart", theme) && ["onesy-LineChart-root"], className, classes.root]);
-  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/React.createElement(LineChartItem, _extends({
-    key: index,
+  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/_jsx(LineChartItem, _objectSpread({
     smooth: smooth,
     smoothRatio: smoothRatio
-  }, item)));
+  }, item), index));
   let t2;
-  if ($[0] !== Chart || $[1] !== other || $[2] !== ref || $[3] !== t0 || $[4] !== t1 || $[5] !== values) {
-    t2 = /*#__PURE__*/React.createElement(Chart, _extends({
-      ref: ref,
+  if ($[0] !== Chart || $[1] !== other || $[2] !== t0 || $[3] !== t1 || $[4] !== values) {
+    t2 = /*#__PURE__*/_jsx(Chart, _objectSpread(_objectSpread({
       values: values,
       className: t0
-    }, other), t1);
+    }, other), {}, {
+      children: t1
+    }));
     $[0] = Chart;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t0;
-    $[4] = t1;
-    $[5] = values;
-    $[6] = t2;
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = values;
+    $[5] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[5];
   }
   return t2;
-});
+};
 LineChart.displayName = 'onesy-LineChart';
 export default LineChart;