@onesy/ui-react 1.0.164 → 1.0.167

package/esm/PieChart/PieChart.js

@@ -55,12 +55,12 @@ const useStyle = styleMethod(theme => ({
 const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPieChart?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPieChart?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Chart = theme?.elements?.Chart || ChartElement;
+  const Path = theme?.elements?.Path || PathElement;
   const {
       tonal = true,
       color = 'primary',
@@ -92,13 +92,13 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [animate_, animateTimeout_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [animate_, animateTimeout_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -110,9 +110,9 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = React.useCallback(props__ => {
+  const LegendItem = props__ => {
     const {
-        item = {},
+        item: item_0 = {},
         className: className_
       } = props__,
       other_ = _objectWithoutProperties(props__, _excluded2);
@@ -120,7 +120,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       color: color_,
       tone = 'main',
       name = 'No name'
-    } = item;
+    } = item_0;
     return /*#__PURE__*/React.createElement(Line, _extends({
       gap: 1,
       direction: "row",
@@ -135,7 +135,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }), /*#__PURE__*/React.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -147,18 +147,18 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       } = refs.rects.current.wrapper;
 
       // Legend
-      const legend_ = values.map(item => {
+      const legend_ = values.map(item_1 => {
         return {
-          item,
+          item: item_1,
           element: /*#__PURE__*/React.createElement(LegendItem, {
-            item: item
+            item: item_1
           })
         };
       });
       const center = width / 2;
       const radius = width / 2 - gap / 2;
       const total = 360;
-      const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+      const valueTotal = values.reduce((result_0, itemValue) => result_0 += itemValue.values[0], 0);
       const angles = {
         start: angleToCoordinates(0, center, center, radius)
       };
@@ -168,12 +168,12 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       let d = '';
 
       // Elements
-      const elements_ = copy(values).map((item, index) => {
+      const elements_ = copy(values).map((item_2, index) => {
         const {
-          color: color_,
-          tone = 'main'
-        } = item;
-        const partPercentage = percentageFromValueWithinRange(item.values[0], 0, valueTotal);
+          color: color__0,
+          tone: tone_0 = 'main'
+        } = item_2;
+        const partPercentage = percentageFromValueWithinRange(item_2.values[0], 0, valueTotal);
         let part = total * (partPercentage / 100);
         if (partPercentage === 100) part -= 0.0001;
         const startInner = angleToCoordinates(anglePreviousInner, center, center, radius * innerOffset);
@@ -214,10 +214,10 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
           value_ = ['M', angles.moveInner.x, angles.moveInner.y, 'L', angles.move.x, angles.move.y];
         }
         return {
-          item,
+          item: item_2,
           element: /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
             d: d,
-            fill: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone],
+            fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
             stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
             strokeWidth: gap
           }, PathProps, {
@@ -232,7 +232,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
             x: angleTextCoordinates.x,
             y: angleTextCoordinates.y,
             className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
-            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone], true, 'light'),
+            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
             style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
               opacity: 0
             }), refs.animate.current && refs.init.current === 'animated' && {
@@ -252,7 +252,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       });
     }
   };
-  const initMethod = React.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -270,7 +270,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   React.useEffect(() => {
     make();
     initMethod();
@@ -281,14 +281,14 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   const tooltipRender = is('function', tooltipRender_) ? tooltipRender_ : values_ => {
     const {
-      name,
-      color: color_,
-      tone = 'main',
+      name: name_0,
+      color: color__1,
+      tone: tone_1 = 'main',
       values: values__
     } = values_;
-    const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+    const valueTotal_0 = values.reduce((result_1, itemValue_0) => result_1 += itemValue_0.values[0], 0);
     const valueValue = values__[0];
-    const valuePercentage = (valueValue / valueTotal * 100).toFixed(1).replace('.0', '');
+    const valuePercentage = (valueValue / valueTotal_0 * 100).toFixed(1).replace('.0', '');
     return {
       element: /*#__PURE__*/React.createElement(Line, {
         tonal: tonal,
@@ -305,11 +305,11 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, /*#__PURE__*/React.createElement("span", {
         className: classNames([staticClassName('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
         style: {
-          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+          background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
         }
       }), /*#__PURE__*/React.createElement(Type, {
         version: "b3"
-      }, name)), /*#__PURE__*/React.createElement(Line, {
+      }, name_0)), /*#__PURE__*/React.createElement(Line, {
         gap: 0.4,
         direction: "column"
       }, /*#__PURE__*/React.createElement(Line, {
@@ -338,11 +338,11 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   };
   return /*#__PURE__*/React.createElement(Chart, _extends({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     tonal: tonal,
     color: color,

package/esm/Placeholder/Placeholder.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["color", "version", "width", "height", "animation", "text", "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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
@@ -79,42 +80,82 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Placeholder'
 });
 const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(12);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPlaceholder?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPlaceholder?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
-      color = 'default',
-      version = 'rounded',
+      color: t0,
+      version: t1,
       width,
       height,
-      animation = 'pulse',
+      animation: t2,
       text,
-      Component = 'div',
+      Component: t3,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const color = t0 === undefined ? "default" : t0;
+  const version = t1 === undefined ? "rounded" : t1;
+  const animation = t2 === undefined ? "pulse" : t2;
+  const Component = t3 === undefined ? "div" : t3;
   const {
     classes
   } = useStyle();
   const styles = {
     root: {}
   };
-  if (width !== undefined) styles.root.width = width;
-  if (height !== undefined) styles.root.height = height;
+  if (width !== undefined) {
+    styles.root.width = width;
+  }
+  if (height !== undefined) {
+    styles.root.height = height;
+  }
+  const t4 = classNames([staticClassName("Placeholder", theme) && ["onesy-Placeholder-root"], className, classes.root, classes[`version_${version}`], animation && animation && classes[`animation_${animation}`], text && classes.text]);
+  let t5;
+  if ($[0] !== classes.wrapper || $[1] !== theme) {
+    t5 = classNames([staticClassName("Placeholder", theme) && ["onesy-Placeholder-wrapper"], classes.wrapper]);
+    $[0] = classes.wrapper;
+    $[1] = theme;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  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);
+    $[3] = children;
+    $[4] = classes.children;
+    $[5] = theme;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== Surface || $[8] !== color || $[9] !== t5 || $[10] !== t6) {
+    t7 = /*#__PURE__*/React.createElement(Surface, {
+      version: "text",
+      tonal: false,
+      color: color,
+      className: t5
+    }, t6);
+    $[7] = Surface;
+    $[8] = color;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-root`], className, classes.root, classes[`version_${version}`], animation && animation && classes[`animation_${animation}`], text && classes.text]),
+    className: t4,
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/React.createElement(Surface, {
-    version: "text",
-    tonal: false,
-    color: color,
-    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-wrapper`], classes.wrapper])
-  }, children && /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-children`], classes.children])
-  }, children)));
+  }, other), t7);
 });
 Placeholder.displayName = 'onesy-Placeholder';
 export default Placeholder;

package/esm/Portal/Portal.js

@@ -9,7 +9,7 @@ import { is } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
 const Portal = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPortal?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPortal?.props?.default), props_);
   const {
       element,
       children

package/esm/Properties/Properties.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "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 { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line/Line';
@@ -33,39 +34,68 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Properties'
 });
 const Properties = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperties?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Property = React.useMemo(() => theme?.elements?.Property || PropertyElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperties?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Property = theme?.elements?.Property || PropertyElement;
   const {
-      version = 'row-30',
-      size = 'regular',
-      values = [],
-      onlyWithValues = true,
+      version: t0,
+      size: t1,
+      values: t2,
+      onlyWithValues: t3,
       maxWidth,
       PropertyProps,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const version = t0 === undefined ? "row-30" : t0;
+  const size = t1 === undefined ? "regular" : t1;
+  const values = t2 === undefined ? [] : t2;
+  const onlyWithValues = t3 === undefined ? true : t3;
   const {
     classes
   } = useStyle();
-  if (!values?.length || onlyWithValues && !values.every(item => item.value !== undefined)) return null;
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
-    rowGap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
-    fullWidth: true,
-    className: classNames([staticClassName('Properties', theme) && ['onesy-Properties-root', `onesy-Properties-version-${version}`, `onesy-Properties-size-${size}`], className, classes.root, maxWidth && classes[`maxWidth_${maxWidth}`]])
-  }, other), values?.filter(Boolean)?.map((item, index) => /*#__PURE__*/React.createElement(Property, _extends({
+  if (!values?.length || onlyWithValues && !values.every(_temp)) {
+    return null;
+  }
+  const t4 = size === "large" ? 1.5 : size === "regular" ? 1 : 0.5;
+  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,
     version: version,
     size: size,
-    name: item.name,
-    value: item.value,
-    separator: item.separator
-  }, PropertyProps, item.props))));
+    name: item_0.name,
+    value: item_0.value,
+    separator: item_0.separator
+  }, PropertyProps, item_0.props)));
+  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,
+      gap: t4,
+      rowGap: t5,
+      fullWidth: t6,
+      className: t7
+    }, other), t8);
+    $[0] = Line;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = t7;
+    $[6] = t8;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+  return t9;
 });
 Properties.displayName = 'onesy-Properties';
-export default Properties;
+export default Properties;
+function _temp(item) {
+  return item.value !== undefined;
+}

package/esm/Property/Property.js

@@ -50,9 +50,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperty?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  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 {
       version: version_ = 'row-30',
       size = 'regular',

package/esm/Radio/Radio.js

@@ -5,6 +5,7 @@ const _excluded = ["size", "Component", "className", "style", "children"],
   _excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -72,29 +73,92 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Radio'
 });
 const IconItem = props => {
-  const {
+  const $ = _c(21);
+  let children;
+  let className;
+  let other;
+  let size;
+  let style;
+  let t0;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       size,
-      Component = 'span',
+      Component: t0,
       className,
       style,
       children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const styles = {
-    root: {}
-  };
-  const fontSize = iconSizeToFontSize(size);
-  styles.root.fontSize = `calc(${fontSize} / 1.2)`;
-  return /*#__PURE__*/React.createElement(Component, {
-    className: className,
-    style: _objectSpread(_objectSpread({}, style), styles.root),
-    size: size
-  }, children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, other)));
+    } = _props);
+    other = _objectWithoutProperties(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = className;
+    $[3] = other;
+    $[4] = size;
+    $[5] = style;
+    $[6] = t0;
+  } else {
+    children = $[1];
+    className = $[2];
+    other = $[3];
+    size = $[4];
+    style = $[5];
+    t0 = $[6];
+  }
+  const Component = t0 === undefined ? "span" : t0;
+  let styles;
+  if ($[7] !== size) {
+    styles = {
+      root: {}
+    };
+    const fontSize = iconSizeToFontSize(size);
+    styles.root.fontSize = `calc(${fontSize} / 1.2)`;
+    $[7] = size;
+    $[8] = styles;
+  } else {
+    styles = $[8];
+  }
+  let t1;
+  if ($[9] !== style || $[10] !== styles.root) {
+    t1 = _objectSpread(_objectSpread({}, style), styles.root);
+    $[9] = style;
+    $[10] = styles.root;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  let t2;
+  if ($[12] !== children || $[13] !== other) {
+    t2 = children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, other));
+    $[12] = children;
+    $[13] = other;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  let t3;
+  if ($[15] !== Component || $[16] !== className || $[17] !== size || $[18] !== t1 || $[19] !== t2) {
+    t3 = /*#__PURE__*/React.createElement(Component, {
+      className: className,
+      style: t1,
+      size: size
+    }, t2);
+    $[15] = Component;
+    $[16] = className;
+    $[17] = size;
+    $[18] = t1;
+    $[19] = t2;
+    $[20] = t3;
+  } else {
+    t3 = $[20];
+  }
+  return t3;
 };
 const Radio = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadio?.props?.default), props_), [props_]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadio?.props?.default), props_);
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       tonal = true,
       color = 'primary',
@@ -138,8 +202,8 @@ const Radio = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onChange)) onChange(event.target.checked, event);
     }
   };
-  const onKeyDown = event => {
-    switch (event.key) {
+  const onKeyDown = event_0 => {
+    switch (event_0.key) {
       case 'Enter':
         if (refs.input.current) refs.input.current.click();
         break;

package/esm/Radios/Radios.js

@@ -24,9 +24,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Radios = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadios?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRadios?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color = 'primary',
@@ -70,12 +70,12 @@ const Radios = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (checked !== undefined && checked !== refs.value.current) setValue(checked);
   }, [checked]);
   const children = React.Children.toArray(children_);
-  const onUpdate = React.useCallback(valueNew_ => {
+  const onUpdate = valueNew_ => {
     let valueNew = valueNew_;
     if (uncheck && refs.value.current === valueNew) valueNew = '';
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if (is('function', onChange)) onChange(valueNew);
-  }, [uncheck]);
+  };
   return /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
     gap: 1,