@onesy/ui-react 1.0.164 → 1.0.167

package/TableHeader/TableHeader.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
@@ -31,38 +32,52 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableHeader'
 });
 const TableHeader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(9);
   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.onesyTableHeader) === 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 Surface = _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.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.onesyTableHeader) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
-      Component = Line,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      Component: t3,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const Component = t3 === undefined ? Line : t3;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    tonal: tonal,
-    color: color,
-    Component: Surface,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TableHeader', theme) && [`onesy-TableHeader-root`, `onesy-TableHeader-size-${size}`], className, classes.root, classes[`size_${size}`]])
-  }, other), children);
+  const t4 = Surface;
+  const t5 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("TableHeader", theme) && ["onesy-TableHeader-root", `onesy-TableHeader-size-${size}`], className, classes.root, classes[`size_${size}`]]);
+  let t6;
+  if ($[0] !== Component || $[1] !== children || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t4 || $[6] !== t5 || $[7] !== tonal) {
+    t6 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      Component: t4,
+      className: t5
+    }, other), children);
+    $[0] = Component;
+    $[1] = children;
+    $[2] = color;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t4;
+    $[6] = t5;
+    $[7] = tonal;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  return t6;
 });
 TableHeader.displayName = 'onesy-TableHeader';
 var _default = exports.default = TableHeader;

package/TablePagination/TablePagination.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IVersion } from '../types';
-export type ITableRow = Omit<ILine, 'onChange'> & {
+export declare type ITableRow = Omit<ILine, 'onChange'> & {
     version?: IVersion;
     elevation?: boolean;
     page?: number;

package/TablePagination/TablePagination.js

@@ -36,32 +36,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TablePagination'
 });
 const TablePagination = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   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.onesyTablePagination) === 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 Select = _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.Select) || _Select.default;
-  }, [theme]);
-  const ListItem = _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.ListItem) || _ListItem.default;
-  }, [theme]);
-  const IconButton = _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.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.onesyTablePagination) === 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 Select = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Select) || _Select.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListItem) || _ListItem.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
   const {
       tonal = false,
       color = 'default',
@@ -104,10 +87,10 @@ const TablePagination = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
     if ((0, _utils.is)('function', onRowsPerPageChange)) onRowsPerPageChange(value);
     update(0);
   };
-  const update = value => {
+  const update = value_0 => {
     // Update inner or controlled
-    if (!props.hasOwnProperty('page')) setPage(value);
-    if ((0, _utils.is)('function', onChange)) onChange(value);
+    if (!props.hasOwnProperty('page')) setPage(value_0);
+    if ((0, _utils.is)('function', onChange)) onChange(value_0);
   };
   const maxPage = Math.ceil(total / rowsPerPage) - 1;
   const IconButtonProps = {

package/TableRow/TableRow.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type ITableRow = ISurface & {
+export declare type ITableRow = ISurface & {
     hover?: boolean;
     selected?: boolean;
     position?: 'head' | 'body';

package/TableRow/TableRow.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -37,45 +38,65 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableRow'
 });
 const TableRow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(9);
   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.onesyTableRow) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _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.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.onesyTableRow) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
-      hover = true,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      hover: t3,
       selected,
-      position = 'body',
-      Component = 'tr',
+      position: t4,
+      Component: t5,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const hover = t3 === undefined ? true : t3;
+  const position = t4 === undefined ? "body" : t4;
+  const Component = t5 === undefined ? "tr" : t5;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
-    tonal: tonal,
-    color: color,
-    role: "row",
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TableRow', theme) && [`onesy-TableRow-root`, `onesy-TableRow-size-${size}`, hover && position === 'body' && `onesy-TableRow-hover`, selected && `onesy-TableRow-selected`], className, classes.root, hover && position === 'body' && classes.hover, selected && classes.selected])
-  }, other), _react.default.Children.toArray(children).map((item, index) => (0, _utils.is)('object', item) ? (/*#__PURE__*/_react.default.cloneElement(item, {
+  const t6 = "row";
+  const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TableRow", theme) && ["onesy-TableRow-root", `onesy-TableRow-size-${size}`, hover && position === "body" && "onesy-TableRow-hover", selected && "onesy-TableRow-selected"], className, classes.root, hover && position === "body" && classes.hover, selected && classes.selected]);
+  const t8 = _react.default.Children.toArray(children).map((item, index) => (0, _utils.is)("object", item) ? /*#__PURE__*/_react.default.cloneElement(item, {
     tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
     color: item.props.color !== undefined ? item.props.color : color,
     size: item.props.size !== undefined ? item.props.size : size,
-    justify: item.props.justify !== undefined ? item.props.justify : index === 0 ? 'flex-start' : 'flex-end',
-    position: props.position !== undefined ? props.position : index === 0 && position === 'body' ? 'head' : position,
-    noWeight: index === 0 && position === 'body'
-  })) : item));
+    justify: item.props.justify !== undefined ? item.props.justify : index === 0 ? "flex-start" : "flex-end",
+    position: props.position !== undefined ? props.position : index === 0 && position === "body" ? "head" : position,
+    noWeight: index === 0 && position === "body"
+  }) : item);
+  let t9;
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t7 || $[6] !== t8 || $[7] !== tonal) {
+    t9 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      role: t6,
+      Component: Component,
+      className: t7
+    }, other), t8);
+    $[0] = Component;
+    $[1] = Surface;
+    $[2] = color;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t7;
+    $[6] = t8;
+    $[7] = tonal;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  return t9;
 });
 TableRow.displayName = 'onesy-TableRow';
 var _default = exports.default = TableRow;

package/Tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { TLineAlign, TLineJustify } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type ITabs = Omit<ISurface, 'version' | 'onChange'> & {
+export declare type ITabs = Omit<ISurface, 'version' | 'onChange'> & {
     version?: 'primary' | 'secondary';
     value?: any;
     valueDefault?: any;

package/Tabs/Tabs.js

@@ -157,28 +157,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Tabs'
 });
 const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$tabsRoot$curren3, _refs$tabsRoot$curren4, _refs$tabsRoot$curren5, _refs$tabsRoot$curren6, _refs$tabsRoot$curren7, _refs$tabsRoot$curren8, _refs$tabsRoot$curren9;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _refs$tabsRoot$curren3, _refs$tabsRoot$curren4, _refs$tabsRoot$curren5, _refs$tabsRoot$curren6, _refs$tabsRoot$curren7, _refs$tabsRoot$curren8, _refs$tabsRoot$curren9;
   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.onesyTabs) === 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 Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.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.onesyTabs) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Divider) || _Divider.default;
   const {
       tonal = true,
       color = 'primary',
@@ -255,7 +240,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       observerMutation.disconnect();
     };
   }, []);
-  const onScroll = _react.default.useCallback(event => {
+  const onScroll = event => {
     const useArrows_ = refs.props.current.arrows && (!refs.mobile.current || refs.props.current.arrowsMobile);
     if (useArrows_) {
       setMoveValue({
@@ -263,7 +248,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         top: refs.tabsRoot.current.scrollTop
       });
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (init) {
       if (value_ !== refs.value.current) {
@@ -305,19 +290,19 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const tab = tabs.find(item => (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(valueProp, item.dataset.onesyTabValue) : String(item.dataset.onesyTabValue) === String(valueProp));
     if (tab) {
       var _refs$tabsRoot$curren2, _ref;
-      const rect = {
+      const rect_0 = {
         parent: (_refs$tabsRoot$curren2 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren2 === void 0 ? void 0 : _refs$tabsRoot$curren2.getBoundingClientRect(),
         tab: tab.getBoundingClientRect(),
         line: (_ref = refs.version.current === 'primary' ? tab.children[1] : tab) === null || _ref === void 0 ? void 0 : _ref.getBoundingClientRect()
       };
 
       // Update
-      if (rect.parent && rect.line && rect.tab) {
+      if (rect_0.parent && rect_0.line && rect_0.tab) {
         // Update left scroll
         if (orientation === 'horizontal') {
-          if (rect.tab.x < rect.parent.x || rect.parent.x + rect.parent.width < rect.tab.x + rect.tab.width) {
+          if (rect_0.tab.x < rect_0.parent.x || rect_0.parent.x + rect_0.parent.width < rect_0.tab.x + rect_0.tab.width) {
             let left = refs.tabsRoot.current.scrollLeft;
-            if (rect.tab.x < rect.parent.x) left += rect.tab.x - rect.parent.x;else left += rect.tab.x + rect.tab.width - (rect.parent.x + rect.parent.width);
+            if (rect_0.tab.x < rect_0.parent.x) left += rect_0.tab.x - rect_0.parent.x;else left += rect_0.tab.x + rect_0.tab.width - (rect_0.parent.x + rect_0.parent.width);
 
             // Update
             refs.tabsRoot.current.scrollTo({
@@ -326,9 +311,9 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             });
           }
         } else {
-          if (rect.tab.y < rect.parent.y || rect.parent.y + rect.parent.height < rect.tab.y + rect.tab.height) {
+          if (rect_0.tab.y < rect_0.parent.y || rect_0.parent.y + rect_0.parent.height < rect_0.tab.y + rect_0.tab.height) {
             let top = refs.tabsRoot.current.scrollTop;
-            if (rect.tab.y < rect.parent.y) top += rect.tab.y - rect.parent.y;else top += rect.tab.y + rect.tab.height - (rect.parent.y + rect.parent.height);
+            if (rect_0.tab.y < rect_0.parent.y) top += rect_0.tab.y - rect_0.parent.y;else top += rect_0.tab.y + rect_0.tab.height - (rect_0.parent.y + rect_0.parent.height);
 
             // Update
             refs.tabsRoot.current.scrollTo({
@@ -340,10 +325,10 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
         // Update lineValues value
         setLineValues({
-          x: rect.line.x - rect.parent.x + refs.tabsRoot.current.scrollLeft,
-          y: rect.line.y - rect.parent.y + refs.tabsRoot.current.scrollTop,
-          width: rect.line.width,
-          height: rect.line.height
+          x: rect_0.line.x - rect_0.parent.x + refs.tabsRoot.current.scrollLeft,
+          y: rect_0.line.y - rect_0.parent.y + refs.tabsRoot.current.scrollTop,
+          width: rect_0.line.width,
+          height: rect_0.line.height
         });
       }
     }
@@ -364,20 +349,20 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
     disabled: orientation === 'horizontal' ? Math.ceil(((_refs$tabsRoot$curren4 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren4 === void 0 ? void 0 : _refs$tabsRoot$curren4.clientWidth) + ((_refs$tabsRoot$curren5 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren5 === void 0 ? void 0 : _refs$tabsRoot$curren5.scrollLeft)) === ((_refs$tabsRoot$curren6 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren6 === void 0 ? void 0 : _refs$tabsRoot$curren6.scrollWidth) : Math.ceil(((_refs$tabsRoot$curren7 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren7 === void 0 ? void 0 : _refs$tabsRoot$curren7.clientHeight) + ((_refs$tabsRoot$curren8 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren8 === void 0 ? void 0 : _refs$tabsRoot$curren8.scrollTop)) === ((_refs$tabsRoot$curren9 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren9 === void 0 ? void 0 : _refs$tabsRoot$curren9.scrollHeight)
   }, orientation === 'horizontal' ? /*#__PURE__*/_react.default.createElement(IconEnd, null) : /*#__PURE__*/_react.default.createElement(IconBottom, null));
-  const TabElements = _react.default.Children.toArray(children).filter(item => {
-    var _item$type;
-    return item === null || item === void 0 || (_item$type = item.type) === null || _item$type === void 0 || (_item$type = _item$type.displayName) === null || _item$type === void 0 ? void 0 : _item$type.endsWith('Tab');
+  const TabElements = _react.default.Children.toArray(children).filter(item_0 => {
+    var _item_0$type;
+    return item_0 === null || item_0 === void 0 || (_item_0$type = item_0.type) === null || _item_0$type === void 0 || (_item_0$type = _item_0$type.displayName) === null || _item_0$type === void 0 ? void 0 : _item_0$type.endsWith('Tab');
   });
-  const tabActive = TabElements.find((item, index) => {
-    const valueItem = item.props.value !== undefined ? item.props.value : index;
-    return (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem) : value === valueItem;
+  const tabActive = TabElements.find((item_1, index_0) => {
+    const valueItem_0 = item_1.props.value !== undefined ? item_1.props.value : index_0;
+    return (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_0) : value === valueItem_0;
   });
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: 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;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     tonal: tonal,
     color: color,
@@ -412,21 +397,21 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
       [propMain]: lineValues[propMain]
     }
-  }), TabElements.map((item, index) => {
-    const valueItem = item.props.value !== undefined ? item.props.value : index;
-    return /*#__PURE__*/_react.default.cloneElement(item, {
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-      color: item.props.color !== undefined ? item.props.color : color,
-      version: item.props.version !== undefined ? item.props.version : version,
-      value: item.props.value !== undefined ? item.props.value : index,
-      size: item.props.size !== undefined ? item.props.size : size,
-      index,
+  }), TabElements.map((item_3, index_1) => {
+    const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
+    return /*#__PURE__*/_react.default.cloneElement(item_3, {
+      tonal: item_3.props.tonal !== undefined ? item_3.props.tonal : tonal,
+      color: item_3.props.color !== undefined ? item_3.props.color : color,
+      version: item_3.props.version !== undefined ? item_3.props.version : version,
+      value: item_3.props.value !== undefined ? item_3.props.value : index_1,
+      size: item_3.props.size !== undefined ? item_3.props.size : size,
+      index: index_1,
       onChange,
-      activateOnFocus: item.props.activateOnFocus !== undefined ? item.props.activateOnFocus : activateOnFocus,
-      active: (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem) : value === valueItem,
-      onClick: event => {
-        onChange(valueItem, index);
-        if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick(event);
+      activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
+      active: (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
+      onClick: event_0 => {
+        onChange(valueItem_1, index_1);
+        if ((0, _utils.is)('function', item_3.props.onClick)) item_3.props.onClick(event_0);
       }
     });
   })), useArrows && ArrowPost);

package/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny } from '../types';
-export type IText = IBaseElement & {
+export declare type IText = IBaseElement & {
     value?: any;
     columns?: number;
     responsive?: boolean;

package/Text/Text.js

@@ -42,19 +42,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Text'
 });
 const Text = /*#__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.onesyText) === 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.onesyText) === 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 {
       value: value_,
       columns: columns_,
@@ -80,13 +72,13 @@ const Text = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [columns_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -114,11 +106,11 @@ const Text = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
   }));
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     direction: "column",
     justify: "unset",

package/TextField/TextField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import OnesySubscription from '@onesy/subscription';
 import { IBaseElement, IVersion, IRef, IElement, IValueBreakpoints, IPropsAny, IElementReference } from '../types';
-export type ITextField = Omit<IBaseElement, 'onChange'> & {
+export declare type ITextField = Omit<IBaseElement, 'onChange'> & {
     version?: IVersion;
     rootRef?: IRef;
     valueDefault?: string | number;