@onesy/ui-react 1.0.171 → 1.0.173

package/esm/Placeholder/Placeholder.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", "version", "width", "height", "animation", "text", "Component", "className", "style", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   '@keyframes move': {
     '100%': {
@@ -79,7 +79,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Placeholder'
 });
-const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Placeholder = props_ => {
   const $ = _c(12);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPlaceholder?.props?.default), props_);
@@ -125,9 +125,10 @@ const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t6;
   if ($[3] !== children || $[4] !== classes.children || $[5] !== theme) {
-    t6 = children && /*#__PURE__*/React.createElement("div", {
-      className: classNames([staticClassName("Placeholder", theme) && ["onesy-Placeholder-children"], classes.children])
-    }, children);
+    t6 = children && /*#__PURE__*/_jsx("div", {
+      className: classNames([staticClassName("Placeholder", theme) && ["onesy-Placeholder-children"], classes.children]),
+      children: children
+    });
     $[3] = children;
     $[4] = classes.children;
     $[5] = theme;
@@ -137,12 +138,13 @@ const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t7;
   if ($[7] !== Surface || $[8] !== color || $[9] !== t5 || $[10] !== t6) {
-    t7 = /*#__PURE__*/React.createElement(Surface, {
+    t7 = /*#__PURE__*/_jsx(Surface, {
       version: "text",
       tonal: false,
       color: color,
-      className: t5
-    }, t6);
+      className: t5,
+      children: t6
+    });
     $[7] = Surface;
     $[8] = color;
     $[9] = t5;
@@ -151,11 +153,12 @@ const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     t7 = $[11];
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
     className: t4,
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), t7);
-});
+  }, other), {}, {
+    children: t7
+  }));
+};
 Placeholder.displayName = 'onesy-Placeholder';
 export default Placeholder;

package/esm/Portal/Portal.js

@@ -1,30 +1,53 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["element", "children"];
+const _excluded = ["ref", "element", "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 ReactDOM from 'react-dom';
 import { is } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
-const Portal = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Portal = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
-  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPortal?.props?.default), props_);
-  const {
-      element,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.cloneElement(children, _objectSpread({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+  const t0 = theme?.ui?.elements?.all?.props?.default;
+  const t1 = theme?.ui?.elements?.onesyPortal?.props?.default;
+  let t2;
+  if ($[0] !== props_ || $[1] !== t0 || $[2] !== t1) {
+    const props = _objectSpread(_objectSpread(_objectSpread({}, t0), t1), props_);
+    const {
+        ref,
+        element,
+        children
+      } = props,
+      other = _objectWithoutProperties(props, _excluded);
+    t2 = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.cloneElement(children, _objectSpread({
+      ref: item => {
+        if (ref) {
+          if (is("function", ref)) {
+            ref(item);
+          } else {
+            ref.current = item;
+          }
+        }
+        if (children.ref) {
+          if (is("function", children.ref)) {
+            children.ref(item);
+          } else {
+            children.ref.current = item;
+          }
+        }
       }
-      if (children.ref) {
-        if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
-      }
-    }
-  }, other)), element);
-});
+    }, other)), element);
+    $[0] = props_;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+};
 Portal.displayName = 'onesy-Portal';
 export default Portal;

package/esm/Properties/Properties.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", "values", "onlyWithValues", "maxWidth", "PropertyProps", "className", "children"];
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line/Line';
 import PropertyElement from '../Property';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   maxWidth_extra_small: {
@@ -33,8 +33,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Properties'
 });
-const Properties = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(8);
+const Properties = props_ => {
+  const $ = _c(7);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperties?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -64,36 +64,35 @@ const Properties = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t5 = size === "large" ? 1.5 : size === "regular" ? 1 : 0.5;
   const t6 = true;
   const t7 = classNames([staticClassName("Properties", theme) && ["onesy-Properties-root", `onesy-Properties-version-${version}`, `onesy-Properties-size-${size}`], className, classes.root, maxWidth && classes[`maxWidth_${maxWidth}`]]);
-  const t8 = values?.filter(Boolean)?.map((item_0, index) => /*#__PURE__*/React.createElement(Property, _extends({
-    key: index,
+  const t8 = values?.filter(Boolean)?.map((item_0, index) => /*#__PURE__*/_jsx(Property, _objectSpread(_objectSpread({
     version: version,
     size: size,
     name: item_0.name,
     value: item_0.value,
     separator: item_0.separator
-  }, PropertyProps, item_0.props)));
+  }, PropertyProps), item_0.props), index));
   let t9;
-  if ($[0] !== Line || $[1] !== other || $[2] !== ref || $[3] !== t4 || $[4] !== t5 || $[5] !== t7 || $[6] !== t8) {
-    t9 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[0] !== Line || $[1] !== other || $[2] !== t4 || $[3] !== t5 || $[4] !== t7 || $[5] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       gap: t4,
       rowGap: t5,
       fullWidth: t6,
       className: t7
-    }, other), t8);
+    }, other), {}, {
+      children: t8
+    }));
     $[0] = Line;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t4;
-    $[4] = t5;
-    $[5] = t7;
-    $[6] = t8;
-    $[7] = t9;
+    $[2] = t4;
+    $[3] = t5;
+    $[4] = t7;
+    $[5] = t8;
+    $[6] = t9;
   } else {
-    t9 = $[7];
+    t9 = $[6];
   }
   return t9;
-});
+};
 Properties.displayName = 'onesy-Properties';
 export default Properties;
 function _temp(item) {

package/esm/Property/Property.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 = ["version", "size", "name", "value", "separator", "responsive", "mediaQuery", "ItemProps", "NameProps", "NameWrapperProps", "ValueProps", "className", "children"];
+const _excluded = ["ref", "version", "size", "name", "value", "separator", "responsive", "mediaQuery", "ItemProps", "NameProps", "NameWrapperProps", "ValueProps", "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';
@@ -11,6 +10,7 @@ import LineElement from '../Line/Line';
 import TypeElement from '../Type';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   'version_row-50': {
@@ -48,12 +48,13 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Property'
 });
-const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Property = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperty?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       version: version_ = 'row-30',
       size = 'regular',
       name,
@@ -99,7 +100,7 @@ const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else if (['row-20', 'row-30', 'row-40', 'row-50', 'row-between'].includes(version)) {
     propsRoot.justify = 'space-between';
   }
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -108,18 +109,24 @@ const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     fullWidth: true,
     className: classNames([staticClassName('Property', theme) && ['onesy-Property-root', `onesy-Property-version-${version}`, `onesy-Property-size-${size}`], className, classes.root, classes[`version_${version}`]])
-  }, propsRoot, other), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    direction: "row"
-  }, NameWrapperProps), is('simple', name) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
-  }, ItemProps, NameProps, {
-    className: classNames([staticClassName('Property', theme) && ['onesy-Property-name'], ItemProps?.className, NameProps?.className, classes.text, classes.name])
-  }), name) : name, separator), is('simple', value) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, ItemProps, ValueProps, {
-    className: classNames([staticClassName('Property', theme) && ['onesy-Property-name'], ItemProps?.className, ValueProps?.className, classes.text, classes.name])
-  }), value) : value);
-});
+  }, propsRoot), other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+      gap: 0,
+      direction: "row"
+    }, NameWrapperProps), {}, {
+      children: [is('simple', name) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+        version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
+      }, ItemProps), NameProps), {}, {
+        className: classNames([staticClassName('Property', theme) && ['onesy-Property-name'], ItemProps?.className, NameProps?.className, classes.text, classes.name]),
+        children: name
+      })) : name, separator]
+    })), is('simple', value) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+    }, ItemProps), ValueProps), {}, {
+      className: classNames([staticClassName('Property', theme) && ['onesy-Property-name'], ItemProps?.className, ValueProps?.className, classes.text, classes.name]),
+      children: value
+    })) : value]
+  }));
+};
 Property.displayName = 'onesy-Property';
 export default Property;

package/esm/Radio/Radio.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 const _excluded = ["size", "Component", "className", "style", "children"],
@@ -11,6 +10,7 @@ import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import IconButtonElement from '../IconButton';
 import { iconSizeToFontSize, staticClassName } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -139,11 +139,12 @@ const IconItem = props => {
   }
   let t3;
   if ($[15] !== Component || $[16] !== className || $[17] !== size || $[18] !== t1 || $[19] !== t2) {
-    t3 = /*#__PURE__*/React.createElement(Component, {
+    t3 = /*#__PURE__*/_jsx(Component, {
       className: className,
       style: t1,
-      size: size
-    }, t2);
+      size: size,
+      children: t2
+    });
     $[15] = Component;
     $[16] = className;
     $[17] = size;
@@ -155,7 +156,7 @@ const IconItem = props => {
   }
   return t3;
 };
-const Radio = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Radio = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadio?.props?.default), props_);
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
@@ -225,15 +226,14 @@ const Radio = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let colorValue = color;
   if (!value) colorValue = colorUnchecked;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     tabIndex: !disabled ? 0 : -1,
     tonal: tonal,
     color: colorValue,
     version: version,
     size: size,
     onKeyDown: onKeyDown,
-    firstLevelChildren: /*#__PURE__*/React.createElement("input", {
+    firstLevelChildren: /*#__PURE__*/_jsx("input", {
       ref: item => {
         if (inputRef) inputRef.current = item;
         refs.input.current = item;
@@ -251,18 +251,22 @@ const Radio = /*#__PURE__*/React.forwardRef((props_, ref) => {
     disabled: disabled,
     Component: Component,
     className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
-  }, other), is('function', render) ? render(value, _objectSpread(_objectSpread(_objectSpread({}, props), other), {}, {
-    tonal,
-    color,
-    version
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconItem, {
-    Component: "div",
-    className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-box'], classes.icon, classes.iconBox, classes[`iconBox_size_${size}`], classes[version], disabled && classes.disabled]),
-    style: styles.iconBox
-  }), /*#__PURE__*/React.createElement(IconItem, {
-    Component: "div",
-    className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-dot', value && 'onesy-Radio-icon-dot-checked'], classes.icon, classes.iconDot, value && classes.checked])
-  })));
-});
+  }, other), {}, {
+    children: is('function', render) ? render(value, _objectSpread(_objectSpread(_objectSpread({}, props), other), {}, {
+      tonal,
+      color,
+      version
+    })) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(IconItem, {
+        Component: "div",
+        className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-box'], classes.icon, classes.iconBox, classes[`iconBox_size_${size}`], classes[version], disabled && classes.disabled]),
+        style: styles.iconBox
+      }), /*#__PURE__*/_jsx(IconItem, {
+        Component: "div",
+        className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-dot', value && 'onesy-Radio-icon-dot-checked'], classes.icon, classes.iconDot, value && classes.checked])
+      })]
+    })
+  }));
+};
 Radio.displayName = 'onesy-Radio';
 export default Radio;

package/esm/Radios/Radios.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", "uncheck", "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-Radios'
 });
-const Radios = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Radios = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadios?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -76,8 +76,7 @@ const Radios = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if (is('function', onChange)) onChange(valueNew);
   };
-  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',
@@ -86,27 +85,32 @@ const Radios = /*#__PURE__*/React.forwardRef((props_, ref) => {
     "aria-labelledby": refs.ids.label,
     Component: Component,
     className: classNames([staticClassName('Radios', theme) && ['onesy-Radios-root', `onesy-Radios-version-${version}`, `onesy-Radios-size-${size}`, disabled && `onesy-Radios-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('Radios', theme) && ['onesy-Radios-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, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index,
-    checked: item.props.value === value,
-    onChange: () => onUpdate(item.props.value),
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-    color: item.props.color !== undefined ? item.props.color : color,
-    colorUnchecked: item.props.colorUnchecked !== undefined ? item.props.colorUnchecked : colorUnchecked,
-    version: item.props.version !== undefined ? item.props.version : version,
-    size: item.props.size !== undefined ? item.props.size : size,
-    disabled: item.props.disabled !== undefined ? item.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('Radios', theme) && ['onesy-Radios-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, index) => (/*#__PURE__*/React.cloneElement(item, {
+        key: index,
+        checked: item.props.value === value,
+        onChange: () => onUpdate(item.props.value),
+        tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+        color: item.props.color !== undefined ? item.props.color : color,
+        colorUnchecked: item.props.colorUnchecked !== undefined ? item.props.colorUnchecked : colorUnchecked,
+        version: item.props.version !== undefined ? item.props.version : version,
+        size: item.props.size !== undefined ? item.props.size : size,
+        disabled: item.props.disabled !== undefined ? item.props.disabled : disabled
+      })))
+    }))]
+  }));
+};
 Radios.displayName = 'onesy-Radios';
 export default Radios;

package/esm/Rating/Rating.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", "colorInactive", "size", "value", "valueDefault", "valueActive", "valueActiveDefault", "onChange", "onChangeActive", "values", "precision", "onlyValue", "readOnly", "disabled", "icon", "icons", "iconInactive", "iconActive", "IconProps", "IconActiveProps", "IconInactiveProps", "Component", "className", "children"];
+const _excluded = ["ref", "tonal", "color", "colorInactive", "size", "value", "valueDefault", "valueActive", "valueActiveDefault", "onChange", "onChangeActive", "values", "precision", "onlyValue", "readOnly", "disabled", "icon", "icons", "iconInactive", "iconActive", "IconProps", "IconActiveProps", "IconInactiveProps", "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';
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import IconMaterialGrade from '@onesy/icons-material-rounded-react/IconMaterialGradeW100';
 import IconMaterialGradeFilled from '@onesy/icons-material-rounded-react/IconMaterialGradeW100Filled';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'inline-flex',
@@ -59,10 +59,11 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Rating'
 });
-const Rating = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Rating = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRating?.props?.default), props_);
   const {
+      ref,
       tonal = true,
       color = 'primary',
       colorInactive = 'default',
@@ -80,8 +81,8 @@ const Rating = /*#__PURE__*/React.forwardRef((props_, ref) => {
       disabled,
       icon,
       icons,
-      iconInactive = /*#__PURE__*/React.createElement(IconMaterialGrade, null),
-      iconActive = /*#__PURE__*/React.createElement(IconMaterialGradeFilled, null),
+      iconInactive = /*#__PURE__*/_jsx(IconMaterialGrade, {}),
+      iconActive = /*#__PURE__*/_jsx(IconMaterialGradeFilled, {}),
       IconProps,
       IconActiveProps,
       IconInactiveProps,
@@ -306,7 +307,7 @@ const Rating = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return icons?.[index_0]?.iconActive || icons?.[index_0]?.icon || icon || iconActive;
   };
   const selected = index_1 => value > index_1 - 1 && value <= index_1;
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = ref;
@@ -322,30 +323,34 @@ const Rating = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onTouchStart: onMouseDown,
     onKeyDown: onKeyDown,
     className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-root', `onesy-Rating-size-${size}`, hover && `onesy-Button-hover`, mouseDown && `onesy-Button-mouse-down`, focus && [`onesy-Button-focus`, [undefined, 0].includes(value) && `onesy-Button-focus-noValue`], readOnly && `onesy-Rating-read-only`, disabled && `onesy-Rating-disabled`], className, classes.root, focus && [classes.focus, [undefined, 0].includes(value) && classes.focus_outline], readOnly && classes.readOnly, disabled && classes.disabled])
-  }, other), new Array(values).fill(undefined).map((item_0, index_2) => {
-    const IconInactive = getIcon(index_2 + 1);
-    const IconActive = getIcon(index_2 + 1, false);
-    return /*#__PURE__*/React.createElement("span", {
-      ref: item_ => refs.values.current.push(item_),
-      key: index_2,
-      onClick: onClick,
-      className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon-wrapper', focus && selected(index_2 + 1) && 'onesy-Rating-focus'], classes.iconWrapper, focus && selected(index_2 + 1) && classes.focus_outline, (readOnly || disabled) && classes.iconWrapper_readOnly])
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-inactive'], classes.icon, classes.inactive])
-    }, /*#__PURE__*/React.cloneElement(IconInactive, _objectSpread(_objectSpread({
-      color: colorInactive,
-      size: IconInactive.props?.size !== undefined ? IconInactive.props?.size : size
-    }, IconProps), IconInactiveProps))), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-active'], classes.icon, classes.active]),
-      style: {
-        width: width(index_2 + 1)
-      }
-    }, /*#__PURE__*/React.cloneElement(IconActive, _objectSpread(_objectSpread({
-      tonal: IconActive.props?.tonal !== undefined ? IconActive.props?.tonal : tonal,
-      color: IconActive.props?.color !== undefined ? IconActive.props?.color : color,
-      size: IconActive.props?.size !== undefined ? IconActive.props?.size : size
-    }, IconProps), IconActiveProps))));
+  }, other), {}, {
+    children: new Array(values).fill(undefined).map((item_0, index_2) => {
+      const IconInactive = getIcon(index_2 + 1);
+      const IconActive = getIcon(index_2 + 1, false);
+      return /*#__PURE__*/_jsxs("span", {
+        ref: item_ => refs.values.current.push(item_),
+        onClick: onClick,
+        className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon-wrapper', focus && selected(index_2 + 1) && 'onesy-Rating-focus'], classes.iconWrapper, focus && selected(index_2 + 1) && classes.focus_outline, (readOnly || disabled) && classes.iconWrapper_readOnly]),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-inactive'], classes.icon, classes.inactive]),
+          children: /*#__PURE__*/React.cloneElement(IconInactive, _objectSpread(_objectSpread({
+            color: colorInactive,
+            size: IconInactive.props?.size !== undefined ? IconInactive.props?.size : size
+          }, IconProps), IconInactiveProps))
+        }), /*#__PURE__*/_jsx("span", {
+          className: classNames([staticClassName('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-active'], classes.icon, classes.active]),
+          style: {
+            width: width(index_2 + 1)
+          },
+          children: /*#__PURE__*/React.cloneElement(IconActive, _objectSpread(_objectSpread({
+            tonal: IconActive.props?.tonal !== undefined ? IconActive.props?.tonal : tonal,
+            color: IconActive.props?.color !== undefined ? IconActive.props?.color : color,
+            size: IconActive.props?.size !== undefined ? IconActive.props?.size : size
+          }, IconProps), IconActiveProps))
+        })]
+      }, index_2);
+    })
   }));
-});
+};
 Rating.displayName = 'onesy-Rating';
 export default Rating;

package/esm/Reset/Reset.js

@@ -3,6 +3,7 @@ const _excluded = ["children"];
 import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { reset } from '@onesy/style-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useReset = reset();
 const Reset = props => {
   const $ = _c(5);
@@ -25,7 +26,9 @@ const Reset = props => {
   useReset(other);
   let t0;
   if ($[3] !== children) {
-    t0 = /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    t0 = /*#__PURE__*/_jsx(React.Fragment, {
+      children: children
+    });
     $[3] = children;
     $[4] = t0;
   } else {