@onesy/ui-react 1.0.164 → 1.0.165

package/Emojis/Emojis.js

@@ -150,52 +150,20 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Emojis'
 });
 const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  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.onesyEmojis) === 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 Menu = _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.Menu) || _Menu.default;
-  }, [theme]);
-  const List = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.List) || _List.default;
-  }, [theme]);
-  const ListSubheader = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListSubheader) || _ListSubheader.default;
-  }, [theme]);
-  const SpyScroll = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.SpyScroll) || _SpyScroll.default;
-  }, [theme]);
-  const Tabs = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Tabs) || _Tabs.default;
-  }, [theme]);
-  const TextField = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
-  }, [theme]);
-  const Tab = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Tab) || _Tab.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements9;
-    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Type) || _Type.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Surface) || _Surface.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.onesyEmojis) === 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 Menu = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
+  const List = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.List) || _List.default;
+  const ListSubheader = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListSubheader) || _ListSubheader.default;
+  const SpyScroll = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.SpyScroll) || _SpyScroll.default;
+  const Tabs = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Tabs) || _Tabs.default;
+  const TextField = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
+  const Tab = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Tab) || _Tab.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Type) || _Type.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Surface) || _Surface.default;
   const EMOJI_CATEGORIES = _react.default.useMemo(() => {
     return [{
       "name": l("Smileys and People"),
@@ -255,22 +223,22 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const refs = {
     main: _react.default.useRef(undefined)
   };
-  const onOpen = _react.default.useCallback(() => {
+  const onOpen = () => {
     setOpen(true);
     setTimeout(() => {
       setOpenElement(refs.main.current || null);
     }, 140);
-  }, []);
-  const onClose = _react.default.useCallback(() => {
+  };
+  const onClose = () => {
     setOpen(false);
     setTimeout(() => {
       setOpenElement(null);
       setSearch('');
     }, 140);
-  }, []);
-  const onSelect = _react.default.useCallback(valueNew => {
+  };
+  const onSelect = valueNew => {
     if ((0, _utils.is)('function', onSelect_)) onSelect_(valueNew);
-  }, [onSelect_]);
+  };
   const emojisPerCategory = _react.default.useMemo(() => {
     const value = {};
     if ((0, _utils.is)('array', categories)) {
@@ -289,26 +257,26 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           if (!!((_groups$group = groups[group]) !== null && _groups$group !== void 0 && _groups$group.length)) value[item.name].push(...groups[group]);
         });
       });
-      Object.keys(value).forEach(item => {
-        if (!value[item].length) delete value[item];
+      Object.keys(value).forEach(item_0 => {
+        if (!value[item_0].length) delete value[item_0];
       });
     }
     return value;
   }, [search, emojis, categories]);
-  const onChangeSearch = _react.default.useCallback((0, _utils.debounce)(valueNew => {
-    setSearch(valueNew);
-  }, 140), []);
-  const onChangeTabs = _react.default.useCallback(valueNew => {
-    setTab(valueNew);
-  }, []);
-  const onActiveTab = _react.default.useCallback(valueNew => {
-    setTab(valueNew.replace(/-/g, ' '));
-  }, []);
-  const onTabClick = _react.default.useCallback(valueNew => {
+  const onChangeSearch = (0, _utils.debounce)(valueNew_0 => {
+    setSearch(valueNew_0);
+  }, 140);
+  const onChangeTabs = valueNew_1 => {
+    setTab(valueNew_1);
+  };
+  const onActiveTab = valueNew_2 => {
+    setTab(valueNew_2.replace(/-/g, ' '));
+  };
+  const onTabClick = valueNew_3 => {
     var _refs$main$current;
     const elements = Array.from(((_refs$main$current = refs.main.current) === null || _refs$main$current === void 0 ? void 0 : _refs$main$current.children) || []);
     if (!!elements.length) {
-      const element = elements.find(item => item.dataset.onesyCategory === valueNew);
+      const element = elements.find(item_1 => item_1.dataset.onesyCategory === valueNew_3);
       if (element) {
         const top = element.offsetTop;
         const offset = -1;
@@ -319,13 +287,13 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         });
       }
     }
-  }, []);
+  };
   const categoriesUsed = Object.keys(emojisPerCategory);
-  const categoryToID = valueNew => valueNew.replace(/ /g, '-');
-  const categoriesUsedIDs = categoriesUsed.map(item => categoryToID(item));
-  const tabs = categories.filter(item => categoriesUsed.some(item_ => item.name === item_)).map(item => ({
-    name: item.icon,
-    value: item.name
+  const categoryToID = valueNew_4 => valueNew_4.replace(/ /g, '-');
+  const categoriesUsedIDs = categoriesUsed.map(item_2 => categoryToID(item_2));
+  const tabs = categories.filter(item_3 => categoriesUsed.some(item_ => item_3.name === item_)).map(item_4 => ({
+    name: item_4.icon,
+    value: item_4.name
   }));
   const label = /*#__PURE__*/_react.default.createElement(Line, {
     tonal: tonal,
@@ -362,13 +330,13 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     initialLineUpdateTimeout: 440,
     noDivider: true,
     className: classes.tabs
-  }, tabs.map((item, index) => /*#__PURE__*/_react.default.createElement(Tab, {
+  }, tabs.map((item_5, index) => /*#__PURE__*/_react.default.createElement(Tab, {
     key: index,
-    value: item.value,
-    onClick: () => onTabClick(item.value),
-    "data-onesy-spy-scroll": categoryToID(item.value),
+    value: item_5.value,
+    onClick: () => onTabClick(item_5.value),
+    "data-onesy-spy-scroll": categoryToID(item_5.value),
     className: (0, _styleReact.classNames)([classes.tab, classes[`tab_size_${size}`]])
-  }, /*#__PURE__*/_react.default.cloneElement(item.name, {
+  }, /*#__PURE__*/_react.default.cloneElement(item_5.name, {
     size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
   }))))), /*#__PURE__*/_react.default.createElement(Line, {
     ref: refs.main,
@@ -376,33 +344,33 @@ const Emojis = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     flex: true,
     fullWidth: true,
     className: classes.main
-  }, categoriesUsed.map((item, index) => /*#__PURE__*/_react.default.createElement(List, {
-    key: index,
+  }, categoriesUsed.map((item_6, index_0) => /*#__PURE__*/_react.default.createElement(List, {
+    key: index_0,
     gap: 1,
     fullWidth: true,
     SurfaceProps: {
-      id: categoryToID(item),
-      'data-onesy-category': item
+      id: categoryToID(item_6),
+      'data-onesy-category': item_6
     }
   }, /*#__PURE__*/_react.default.createElement(ListSubheader, {
     className: classes.subheader
   }, /*#__PURE__*/_react.default.createElement(Type, {
     version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, item)), /*#__PURE__*/_react.default.createElement(Line, {
+  }, item_6)), /*#__PURE__*/_react.default.createElement(Line, {
     gap: 1,
     direction: "row",
     align: "center",
     wrap: "wrap",
     Component: "li",
     className: classes.category
-  }, emojisPerCategory[item].map((emoji, index_) => /*#__PURE__*/_react.default.createElement("span", {
+  }, emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/_react.default.createElement("span", {
     key: index_,
-    onClick: () => onSelect(emoji),
-    title: (0, _utils.capitalize)(((0, _utils.is)('array', emoji.alias) ? emoji.alias.join(', ') : emoji.alias).replace(/_/g, ' ')),
-    className: (0, _styleReact.classNames)([classes.emoji, classes[`emoji_size_${size}`], (selected === null || selected === void 0 ? void 0 : selected.includes(emoji.unicode)) && classes.emoji_selected])
+    onClick: () => onSelect(emoji_0),
+    title: (0, _utils.capitalize)(((0, _utils.is)('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
+    className: (0, _styleReact.classNames)([classes.emoji, classes[`emoji_size_${size}`], (selected === null || selected === void 0 ? void 0 : selected.includes(emoji_0.unicode)) && classes.emoji_selected])
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.unicode
-  }, emoji.unicode))))))))));
+  }, emoji_0.unicode))))))))));
   return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
     open: open,
     onOpen: onOpen,

package/Expand/Expand.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITransition } from '..';
 import { IPropsAny } from '../types';
-export type IExpand = Omit<ITransition, 'className'> & {
+export declare type IExpand = Omit<ITransition, 'className'> & {
     value?: number;
     expandSize?: number;
     orientation?: 'veritcal' | 'horizontal';

package/Expand/Expand.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");
@@ -17,26 +18,58 @@ const _excluded = ["children", "style"],
 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) { (0, _defineProperty2.default)(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; }
 const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
+  const $ = (0, _compilerRuntime.c)(11);
+  let children;
+  let other;
+  let style;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       children,
       style
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: ref
-  }, other, {
-    style: _objectSpread({
-      width: '100%'
-    }, style)
-  }), children);
+    } = _props);
+    other = (0, _objectWithoutProperties2.default)(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = other;
+    $[3] = style;
+  } else {
+    children = $[1];
+    other = $[2];
+    style = $[3];
+  }
+  let t0;
+  if ($[4] !== style) {
+    t0 = _objectSpread({
+      width: "100%"
+    }, style);
+    $[4] = style;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  let t1;
+  if ($[6] !== children || $[7] !== other || $[8] !== ref || $[9] !== t0) {
+    t1 = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      ref: ref
+    }, other, {
+      style: t0
+    }), children);
+    $[6] = children;
+    $[7] = other;
+    $[8] = ref;
+    $[9] = t0;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  return t1;
 });
 const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _children$type;
+  var _theme$ui, _theme$ui2, _children$type;
   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.onesyExpand) === 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.onesyExpand) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
       in: inProp,
       value: valueProvided,
@@ -87,10 +120,10 @@ const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.parent.current = parent;
   let prop = 'height';
   if (orientation === 'horizontal') prop = 'width';
-  const isTransition = _react.default.useCallback(item => {
+  const isTransition = item => {
     const values = ['Transition', 'Fade', 'Grow', 'Slide', 'Zoom'];
     return values.some(item_ => item === null || item === void 0 ? void 0 : item.includes(item_));
-  }, []);
+  };
   const childrenWithTransition = isTransition(children === null || children === void 0 || (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName);
   _react.default.useEffect(() => {
     const method = () => {
@@ -141,27 +174,27 @@ const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
     return allStyles[status];
   };
-  const duration = (status, property = 'opacity') => {
+  const duration = (status_0, property = 'opacity') => {
     const properties = {
       [prop]: theme.transitions.duration.rg
     };
-    return `${((0, _utils.is)('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
+    return `${((0, _utils.is)('simple', duration) ? duration : duration[status_0]) || properties[property]}ms`;
   };
-  const timingFunction = status => ((0, _utils.is)('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
+  const timingFunction = status_1 => ((0, _utils.is)('simple', timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
   const children_ = /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, children);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value === null && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: item => {
-      if (!item) return;
-      if (!parent) setParent(item.parentElement);
+    ref: item_0 => {
+      if (!item_0) return;
+      if (!parent) setParent(item_0.parentElement);
     }
   }), parent && /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, WrapperProps, {
-    ref: item => {
-      if (!item) return;
+    ref: item_1 => {
+      if (!item_1) return;
       if (WrapperProps !== null && WrapperProps !== void 0 && WrapperProps.ref) {
-        if ((0, _utils.is)('function', WrapperProps.ref)) WrapperProps === null || WrapperProps === void 0 || WrapperProps.ref(item);else WrapperProps.ref.current = item;
+        if ((0, _utils.is)('function', WrapperProps.ref)) WrapperProps === null || WrapperProps === void 0 || WrapperProps.ref(item_1);else WrapperProps.ref.current = item_1;
       }
       if (refs.value.current === null) {
-        setValue(item.getBoundingClientRect()[prop] || 0);
+        setValue(item_1.getBoundingClientRect()[prop] || 0);
       }
     },
     style: _objectSpread({
@@ -174,33 +207,33 @@ const Expand = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     in: true
   })))), value !== null && /*#__PURE__*/_react.default.createElement(_.Transition, (0, _extends2.default)({
     removeOnExited: true
-  }, props), (status, ref_) => {
+  }, props), (status_2, ref_) => {
     // If children update
     // & value is updated
-    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status)) {
+    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status_2)) {
       var _refs$root$current;
       const value_ = (((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect()) || {})[prop];
       if (value_ > 0 && value_ !== refs.value.current) setValue(value_);
     }
     return /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
       className,
-      ref: item => {
-        refs.root.current = item;
+      ref: item_2 => {
+        refs.root.current = item_2;
         if (ref) {
-          if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+          if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
         }
         if (ref_) {
-          if ((0, _utils.is)('function', ref_)) ref_(item);else ref_.current = item;
+          if ((0, _utils.is)('function', ref_)) ref_(item_2);else ref_.current = item_2;
         }
         if (children_.ref) {
-          if ((0, _utils.is)('function', children_.ref)) children_.ref(item);else children_.ref.current = item;
+          if ((0, _utils.is)('function', children_.ref)) children_.ref(item_2);else children_.ref.current = item_2;
         }
       },
       style: _objectSpread(_objectSpread(_objectSpread({
         position: 'relative',
-        transition: `${prop} ${duration(status, prop)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`,
-        visibility: status === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined
-      }, styles(status)), style), children_ === null || children_ === void 0 ? void 0 : children_.style)
+        transition: `${prop} ${duration(status_2, prop)} ${timingFunction(status_2)} ${addTransition ? `, ${addTransition}` : ''}`,
+        visibility: status_2 === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined
+      }, styles(status_2)), style), children_ === null || children_ === void 0 ? void 0 : children_.style)
     }));
   }));
 });

package/Fab/Fab.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IButton } from '../Button/Button';
-export type IFab = IButton & {};
+export declare type IFab = IButton & {};
 declare const Fab: React.FC<IFab>;
 export default Fab;

package/Fab/Fab.js

@@ -19,27 +19,24 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Fab'
 });
 const Fab = /*#__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.onesyFab) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Button = _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.Button) || _Button.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.onesyFab) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Button = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Button) || _Button.default;
   const {
-    tonal = 'primary',
-    version = 'filled',
+    tonal: t0,
+    version: t1,
     className
   } = props;
+  const tonal = t0 === undefined ? "primary" : t0;
+  const version = t1 === undefined ? "filled" : t1;
   const {
     classes
   } = useStyle();
   return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
     ref: ref
   }, props, {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Fab', theme) && ['onesy-Fab-root'], className, classes.root]),
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)("Fab", theme) && ["onesy-Fab-root"], className, classes.root]),
     version: version,
     tonal: tonal,
     fab: true

package/Fade/Fade.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ITransition } from '..';
-export type IFade = ITransition & {};
+export declare type IFade = ITransition & {};
 declare const Fade: React.FC<IFade>;
 export default Fade;