@onesy/ui-react 1.0.164 → 1.0.167

package/Radio/Radio.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -79,35 +80,93 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Radio'
 });
 const IconItem = props => {
-  const {
+  const $ = (0, _compilerRuntime.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
-  const styles = {
-    root: {}
-  };
-  const fontSize = (0, _utils2.iconSizeToFontSize)(size);
-  styles.root.fontSize = `calc(${fontSize} / 1.2)`;
-  return /*#__PURE__*/_react.default.createElement(Component, {
-    className: className,
-    style: _objectSpread(_objectSpread({}, style), styles.root),
-    size: size
-  }, children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, other)));
+    } = _props);
+    other = (0, _objectWithoutProperties2.default)(_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 = (0, _utils2.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.default.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.default.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.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRadio) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRadio) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
   const {
       tonal = true,
       color = 'primary',
@@ -151,8 +210,8 @@ const Radio = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if ((0, _utils.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/Radios/Radios.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IVersion, IElement, IPropsAny } from '../types';
-export type IRadios = Omit<ILine, 'onChange'> & {
+export declare type IRadios = Omit<ILine, 'onChange'> & {
     colorUnchecked?: IColor;
     version?: IVersion;
     name?: IElement;

package/Radios/Radios.js

@@ -30,19 +30,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Radios'
 });
 const Radios = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRadios) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRadios) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
       tonal = true,
       color = 'primary',
@@ -86,12 +78,12 @@ const Radios = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (checked !== undefined && checked !== refs.value.current) setValue(checked);
   }, [checked]);
   const children = _react.default.Children.toArray(children_);
-  const onUpdate = _react.default.useCallback(valueNew_ => {
+  const onUpdate = valueNew_ => {
     let valueNew = valueNew_;
     if (uncheck && refs.value.current === valueNew) valueNew = '';
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if ((0, _utils.is)('function', onChange)) onChange(valueNew);
-  }, [uncheck]);
+  };
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
     gap: 1,

package/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IColor, IElement } from '../types';
-export type IRating = Omit<IBaseElement, 'onChange'> & {
+export declare type IRating = Omit<IBaseElement, 'onChange'> & {
     colorInactive?: IColor;
     value?: number;
     valueDefault?: number;

package/Rating/Rating.js

@@ -67,12 +67,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Rating'
 });
 const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _String$split$;
+  var _theme$ui, _theme$ui2, _String$split$;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRating) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRating) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
       tonal = true,
       color = 'primary',
@@ -159,37 +156,37 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         } = rect;
 
         // Value to the precision point value
-        const value__ = valuePrecision((x - rect.x) / width_);
-        const valueNew = value__;
-        if (valueNew !== valuePrevious) {
+        const value___0 = valuePrecision((x - rect.x) / width_);
+        const valueNew_0 = value___0;
+        if (valueNew_0 !== valuePrevious) {
           if (!props.hasOwnProperty('value')) {
             // Inner controlled value
-            if (refs.hover.current) setValueActive(valueNew);else setValue(valueNew);
+            if (refs.hover.current) setValueActive(valueNew_0);else setValue(valueNew_0);
           }
           if (refs.hover.current) {
-            if ((0, _utils.is)('function', onChangeActive)) onChangeActive(valueNew);
+            if ((0, _utils.is)('function', onChangeActive)) onChangeActive(valueNew_0);
           } else {
-            if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+            if ((0, _utils.is)('function', onChange)) onChange(valueNew_0);
           }
         }
       }
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       if (!refs.props.current.disabled && !refs.props.current.readOnly && refs.mouseDown.current) {
-        const valuePrevious = refs.hover.current ? refs.valueActive.current : refs.value.current;
-        const x = event.touches[0].clientX;
-        const rect = refs.root.current.getBoundingClientRect();
+        const valuePrevious_0 = refs.hover.current ? refs.valueActive.current : refs.value.current;
+        const x_0 = event_0.touches[0].clientX;
+        const rect_0 = refs.root.current.getBoundingClientRect();
         const {
-          width: width_
-        } = rect;
+          width: width__0
+        } = rect_0;
 
         // Value to the precision point value
-        const value__ = valuePrecision((x - rect.x) / width_);
-        const valueNew = value__;
-        if (valueNew !== valuePrevious) {
+        const value___1 = valuePrecision((x_0 - rect_0.x) / width__0);
+        const valueNew_1 = value___1;
+        if (valueNew_1 !== valuePrevious_0) {
           // Inner controlled value
-          if (!props.hasOwnProperty('value')) setValue(valueNew);
-          if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+          if (!props.hasOwnProperty('value')) setValue(valueNew_1);
+          if ((0, _utils.is)('function', onChange)) onChange(valueNew_1);
         }
       }
     };
@@ -216,40 +213,40 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (init && valueActive_ !== valueActive) setValueActive(valueActive_);
   }, [valueActive_]);
-  const onMouseDown = _react.default.useCallback(() => {
+  const onMouseDown = () => {
     if (!disabled && !readOnly) setMouseDown(true);
-  }, [disabled, readOnly]);
-  const onClick = _react.default.useCallback(event => {
+  };
+  const onClick = event_1 => {
     if (!disabled && !readOnly) {
       // Make precision value
       // if value is same as previous value clear
       // otherwise update the value y
-      const x = event.clientX;
-      const rect = refs.root.current.getBoundingClientRect();
+      const x_1 = event_1.clientX;
+      const rect_1 = refs.root.current.getBoundingClientRect();
       const {
-        width: width_
-      } = rect;
-      const valueNew = valuePrecision((x - rect.x) / width_);
-      if (value === valueNew) onClear();else {
-        if (!props.hasOwnProperty('value')) setValue(valueNew);
-        if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+        width: width__1
+      } = rect_1;
+      const valueNew_2 = valuePrecision((x_1 - rect_1.x) / width__1);
+      if (value === valueNew_2) onClear();else {
+        if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+        if ((0, _utils.is)('function', onChange)) onChange(valueNew_2);
       }
     }
-  }, [disabled, readOnly, value, valueActive]);
+  };
   const move = (forward_ = true) => {
     const forward = theme.direction === 'ltr' ? forward_ : !forward_;
-    let value__ = refs.value.current || 0;
+    let value___2 = refs.value.current || 0;
 
     // previous value
-    const previous = (0, _utils.clamp)(+(value__ - precision).toFixed(valueDecimals), min, max);
+    const previous_0 = (0, _utils.clamp)(+(value___2 - precision).toFixed(valueDecimals), min, max);
 
     // next value
-    const next = (0, _utils.clamp)(+(value__ + precision).toFixed(valueDecimals), min, max);
-    value__ = forward ? next : previous;
-    const valueNew = value__;
-    if (valueNew !== refs.value.current) {
-      if (!props.hasOwnProperty('value')) setValue(valueNew);
-      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+    const next_0 = (0, _utils.clamp)(+(value___2 + precision).toFixed(valueDecimals), min, max);
+    value___2 = forward ? next_0 : previous_0;
+    const valueNew_3 = value___2;
+    if (valueNew_3 !== refs.value.current) {
+      if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew_3);
     }
   };
   const onClear = () => {
@@ -257,12 +254,12 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if ((0, _utils.is)('function', onChange)) onChange('');
     setHover(false);
   };
-  const onKeyDown = _react.default.useCallback(event => {
+  const onKeyDown = event_2 => {
     if (!disabled && !readOnly) {
-      if (['Enter', 'Escape', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+      if (['Enter', 'Escape', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End'].includes(event_2.key)) {
         // Prevent default
-        event.preventDefault();
-        switch (event.key) {
+        event_2.preventDefault();
+        switch (event_2.key) {
           case 'End':
             if (!props.hasOwnProperty('value')) setValue(0);
             if ((0, _utils.is)('function', onChange)) return onChange(0);
@@ -292,33 +289,33 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }
     }
-  }, [disabled, readOnly, value, valueActive, precision]);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_3 => {
     if (!disabled && !readOnly && !mouseDown) setFocus(true);
-  }, [disabled, readOnly, mouseDown]);
-  const onBlur = _react.default.useCallback(() => {
+  };
+  const onBlur = () => {
     if (!disabled && !readOnly) setFocus(false);
-  }, [disabled, readOnly]);
-  const onMouseEnter = _react.default.useCallback(() => {
+  };
+  const onMouseEnter = () => {
     if (!disabled && !readOnly) setHover(true);
-  }, [disabled, readOnly]);
-  const onMouseLeave = _react.default.useCallback(() => {
+  };
+  const onMouseLeave = () => {
     if (!disabled && !readOnly) setHover(false);
-  }, [disabled, readOnly]);
+  };
   const width = index => {
-    const value__ = !hover ? value : valueActive;
-    if (value__ > index - 1 && value__ <= index) {
-      if (value__ === index) return '100%';
-      return `${value__ % 1 * 100}%`;
+    const value___3 = !hover ? value : valueActive;
+    if (value___3 > index - 1 && value___3 <= index) {
+      if (value___3 === index) return '100%';
+      return `${value___3 % 1 * 100}%`;
     }
-    if ((0, _utils.is)('number', value__) && index < +value__.toFixed(1) && !onlyValue) return '100%';
+    if ((0, _utils.is)('number', value___3) && index < +value___3.toFixed(1) && !onlyValue) return '100%';
   };
-  const getIcon = (index, inactive = true) => {
-    var _icons$index, _icons$index2, _icons$index3, _icons$index4;
-    if (inactive) return (icons === null || icons === void 0 || (_icons$index = icons[index]) === null || _icons$index === void 0 ? void 0 : _icons$index.iconInactive) || (icons === null || icons === void 0 || (_icons$index2 = icons[index]) === null || _icons$index2 === void 0 ? void 0 : _icons$index2.icon) || icon || iconInactive;
-    return (icons === null || icons === void 0 || (_icons$index3 = icons[index]) === null || _icons$index3 === void 0 ? void 0 : _icons$index3.iconActive) || (icons === null || icons === void 0 || (_icons$index4 = icons[index]) === null || _icons$index4 === void 0 ? void 0 : _icons$index4.icon) || icon || iconActive;
+  const getIcon = (index_0, inactive = true) => {
+    var _icons$index_, _icons$index_2, _icons$index_3, _icons$index_4;
+    if (inactive) return (icons === null || icons === void 0 || (_icons$index_ = icons[index_0]) === null || _icons$index_ === void 0 ? void 0 : _icons$index_.iconInactive) || (icons === null || icons === void 0 || (_icons$index_2 = icons[index_0]) === null || _icons$index_2 === void 0 ? void 0 : _icons$index_2.icon) || icon || iconInactive;
+    return (icons === null || icons === void 0 || (_icons$index_3 = icons[index_0]) === null || _icons$index_3 === void 0 ? void 0 : _icons$index_3.iconActive) || (icons === null || icons === void 0 || (_icons$index_4 = icons[index_0]) === null || _icons$index_4 === void 0 ? void 0 : _icons$index_4.icon) || icon || iconActive;
   };
-  const selected = index => value > index - 1 && value <= index;
+  const selected = index_1 => value > index_1 - 1 && value <= index_1;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: item => {
       if (ref) {
@@ -335,15 +332,15 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onTouchStart: onMouseDown,
     onKeyDown: onKeyDown,
     className: (0, _styleReact.classNames)([(0, _utils2.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, index) => {
+  }, other), new Array(values).fill(undefined).map((item_0, index_2) => {
     var _IconInactive$props, _IconInactive$props2, _IconActive$props, _IconActive$props2, _IconActive$props3, _IconActive$props4, _IconActive$props5, _IconActive$props6;
-    const IconInactive = getIcon(index + 1);
-    const IconActive = getIcon(index + 1, false);
+    const IconInactive = getIcon(index_2 + 1);
+    const IconActive = getIcon(index_2 + 1, false);
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: item_ => refs.values.current.push(item_),
-      key: index,
+      key: index_2,
       onClick: onClick,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Rating', theme) && ['onesy-Rating-icon-wrapper', focus && selected(index + 1) && 'onesy-Rating-focus'], classes.iconWrapper, focus && selected(index + 1) && classes.focus_outline, (readOnly || disabled) && classes.iconWrapper_readOnly])
+      className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement("span", {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-inactive'], classes.icon, classes.inactive])
     }, /*#__PURE__*/_react.default.cloneElement(IconInactive, _objectSpread(_objectSpread({
@@ -352,7 +349,7 @@ const Rating = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, IconProps), IconInactiveProps))), /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Rating', theme) && ['onesy-Rating-icon', 'onesy-Rating-icon-active'], classes.icon, classes.active]),
       style: {
-        width: width(index + 1)
+        width: width(index_2 + 1)
       }
     }, /*#__PURE__*/_react.default.cloneElement(IconActive, _objectSpread(_objectSpread({
       tonal: ((_IconActive$props = IconActive.props) === null || _IconActive$props === void 0 ? void 0 : _IconActive$props.tonal) !== undefined ? (_IconActive$props2 = IconActive.props) === null || _IconActive$props2 === void 0 ? void 0 : _IconActive$props2.tonal : tonal,

package/Reset/Reset.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export type IReset = IBaseElement & {};
+export declare type IReset = IBaseElement & {};
 declare const Reset: React.FC<IReset>;
 export default Reset;

package/Reset/Reset.js

@@ -6,17 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 const _excluded = ["children"];
 const useReset = (0, _styleReact.reset)();
 const Reset = props => {
-  const {
+  const $ = (0, _compilerRuntime.c)(5);
+  let children;
+  let other;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       children
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+    } = _props);
+    other = (0, _objectWithoutProperties2.default)(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = other;
+  } else {
+    children = $[1];
+    other = $[2];
+  }
   useReset(other);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  let t0;
+  if ($[3] !== children) {
+    t0 = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    $[3] = children;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
 };
 Reset.displayName = 'onesy-Reset';
 var _default = exports.default = Reset;

package/Reveal/Reveal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IFade } from '../Fade/Fade';
 import { IUseVisible } from '../useVisible/useVisible';
-export type IReveal = Omit<IFade, 'onChange'> & {
+export declare type IReveal = Omit<IFade, 'onChange'> & {
     inDefault?: boolean;
     offset?: number;
     offsetReveal?: number;

package/Reveal/Reveal.js

@@ -22,16 +22,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Reveal'
 });
 const Reveal = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _props;
+  var _theme$ui, _theme$ui2, _theme$elements, _props;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyReveal) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Fade) || _Fade.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyReveal) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Fade = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Fade) || _Fade.default;
   const {
       inDefault,
       offset,
@@ -72,15 +66,15 @@ const Reveal = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.in.current = inProp;
   refs.unreveal.current = unreveal;
   refs.loaded.current = loaded;
-  const onUpdate = _react.default.useCallback(value => {
+  const onUpdate = value => {
     setInProp(value);
     if (value && !refs.loaded.current) setLoaded(true);
     if ((0, _utils.is)('function', onChange)) onChange(value);
-  }, [onChange]);
+  };
   _react.default.useEffect(() => {
-    const value = visiblity.visible;
-    if (refs.loaded.current && !value && !refs.unreveal.current) return;
-    onUpdate(value);
+    const value_0 = visiblity.visible;
+    if (refs.loaded.current && !value_0 && !refs.unreveal.current) return;
+    onUpdate(value_0);
   }, [visiblity.visible]);
   const Component = !noTransition ? Component_ : _react.default.Fragment;
   if (!noTransition) other.in = inProp;

package/RichTextEditor/RichTextEditor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IVersion, IPropsAny, IElement, IElementReference } from '../types';
-export type IRichTextEditor = Omit<ILine, 'onChange'> & {
+export declare type IRichTextEditor = Omit<ILine, 'onChange'> & {
     version?: IVersion;
     value?: string;
     onChange?: (event: React.ChangeEvent<any>) => any;