@onesy/ui-react 1.0.164 → 1.0.165

package/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IRef, IElement } from '../types';
-export type ISwitch = Omit<IBaseElement, 'onChange'> & {
+export declare type ISwitch = Omit<IBaseElement, 'onChange'> & {
     inputRef?: IRef;
     version?: any;
     valueDefault?: boolean;

package/Switch/Switch.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");
@@ -193,36 +194,94 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Switch'
 });
 const Icon = props => {
-  const {
+  const $ = (0, _compilerRuntime.c)(14);
+  let children;
+  let other;
+  let style;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       style,
       children
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  const size = ['very small', 'small', 'regular', 'medium', 'large', 'very large'].includes(props.size) ? props.size : 'small';
+    } = _props);
+    other = (0, _objectWithoutProperties2.default)(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = other;
+    $[3] = style;
+  } else {
+    children = $[1];
+    other = $[2];
+    style = $[3];
+  }
+  const size = ["very small", "small", "regular", "medium", "large", "very large"].includes(props.size) ? props.size : "small";
   let fontSize = 24;
-  if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
-    style: _objectSpread(_objectSpread({}, style), {}, {
+  if (size === "very small") {
+    fontSize = 12;
+  } else {
+    if (size === "small") {
+      fontSize = 18;
+    } else {
+      if (size === "regular") {
+        fontSize = 24;
+      } else {
+        if (size === "medium") {
+          fontSize = 30;
+        } else {
+          if (size === "large") {
+            fontSize = 38;
+          } else {
+            if (size === "very large") {
+              fontSize = 42;
+            }
+          }
+        }
+      }
+    }
+  }
+  let t0;
+  if ($[4] !== fontSize || $[5] !== style) {
+    t0 = _objectSpread(_objectSpread({}, style), {}, {
       fontSize
-    })
-  }, other), children && /*#__PURE__*/_react.default.cloneElement(children, {
-    size: fontSize / 1.5
-  }));
+    });
+    $[4] = fontSize;
+    $[5] = style;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  let t1;
+  if ($[7] !== children || $[8] !== fontSize) {
+    t1 = children && /*#__PURE__*/_react.default.cloneElement(children, {
+      size: fontSize / 1.5
+    });
+    $[7] = children;
+    $[8] = fontSize;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== other || $[11] !== t0 || $[12] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      style: t0
+    }, other), t1);
+    $[10] = other;
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
 };
 const Switch = /*#__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.onesySwitch) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Keyframes = _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.Keyframes) || _Keyframes.default;
-  }, [theme]);
-  const IconButton = _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.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.onesySwitch) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Keyframes = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Keyframes) || _Keyframes.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
   const {
       tonal: tonal_ = true,
       color: color_ = 'primary',
@@ -466,8 +525,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
   };
   const styleKeyframes = () => {
-    const paletteColor = theme.palette.color[color] || palette || theme.palette.color.neutral;
-    const dynamicBackgroundColor = tonal ? paletteColor[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
+    const paletteColor_0 = theme.palette.color[color] || palette || theme.palette.color.neutral;
+    const dynamicBackgroundColor_0 = tonal ? paletteColor_0[theme.palette.light ? 95 : 10] : theme.methods.palette.color.text(color === 'default' ? theme.palette.color.neutral.main : (palette || theme.palette.color[color]).main, true, 'light');
     return {
       background: {
         growEnd: _objectSpread({}, initial().background.checked),
@@ -512,7 +571,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       iconButton: {
         growStart: {
           transform: sizes('grow-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20],
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -520,11 +579,11 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         },
         waitStart: {
           transform: sizes('grow-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20]
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20]
         },
         moveEnd: {
           transform: sizes('move-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor',
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -543,7 +602,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }),
         growEnd: {
           transform: sizes('grow-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor',
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor',
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -551,11 +610,11 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         },
         waitEnd: {
           transform: sizes('grow-end', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor.main : 'currentColor'
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? paletteColor_0.main : 'currentColor'
         },
         moveStart: {
           transform: sizes('move-start', 'iconButton'),
-          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor[theme.palette.light ? 40 : 20],
+          color: color === 'default' ? theme.palette.color.neutral.main : !tonal ? theme.palette.text.default.secondary : paletteColor_0[theme.palette.light ? 40 : 20],
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -576,8 +635,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       icon: {
         growStart: {
           transform: sizes('grow-start', 'icon'),
-          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary,
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -585,12 +644,12 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         },
         waitStart: {
           transform: sizes('grow-start', 'icon'),
-          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
+          background: ['default', 'themed', 'inherit'].includes(color) && !theme.palette.light ? theme.palette.text.default.secondary : tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 10] : theme.palette.background.default.quaternary
         },
         moveEnd: _objectSpread(_objectSpread({}, sizes('move-end', 'icon')), {}, {
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light'),
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -609,8 +668,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }),
         growEnd: {
           transform: sizes('grow-end', 'icon'),
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light'),
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light'),
           transition: theme.methods.transitions.make('transform', {
             duration: 240,
             timing_function: 'decelerated'
@@ -618,12 +677,12 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         },
         waitEnd: {
           transform: sizes('grow-end', 'icon'),
-          background: dynamicBackgroundColor,
-          color: tonal ? paletteColor[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor, true, 'light')
+          background: dynamicBackgroundColor_0,
+          color: tonal ? paletteColor_0[theme.palette.light ? 30 : 80] : theme.methods.palette.color.text(dynamicBackgroundColor_0, true, 'light')
         },
         moveStart: _objectSpread(_objectSpread({}, sizes('move-start', 'icon')), {}, {
-          background: tonal ? paletteColor[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
-          color: tonal ? paletteColor[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary,
+          background: tonal ? paletteColor_0[theme.palette.light ? 40 : 20] : theme.palette.text.default.secondary,
+          color: tonal ? paletteColor_0[theme.palette.light ? 90 : 0] : theme.palette.background.default.quaternary,
           transition: `${theme.methods.transitions.make('width', {
             duration: 70
           })}, ${theme.methods.transitions.make('transform', {
@@ -643,8 +702,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     };
   };
-  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;
@@ -662,9 +721,9 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-root', `onesy-Switch-size-${size}`, value && `onesy-Switch-checked`, disabled && `onesy-Switch-disabled`], className, classes.root, classes[`color_${color}`], classes[`size_${size}`], tonal && classes[`tonal_color_${color}`], disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), /*#__PURE__*/_react.default.createElement("input", {
-    ref: item => {
-      if (inputRef) inputRef.current = item;
-      refs.input.current = item;
+    ref: item_0 => {
+      if (inputRef) inputRef.current = item_0;
+      refs.input.current = item_0;
     },
     tabIndex: -1,
     type: "checkbox",

package/Tab/Tab.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { ITooltip } from '../Tooltip/Tooltip';
 import { IElement, IPropsAny } from '../types';
-export type ITab = Omit<ISurface, 'version' | 'onChange'> & {
+export declare type ITab = Omit<ISurface, 'version' | 'onChange'> & {
     version?: 'primary' | 'secondary';
     size?: 'small' | 'regular' | 'large';
     value?: any;

package/Tab/Tab.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");
@@ -80,36 +81,20 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Tab'
 });
 const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
+  const $ = (0, _compilerRuntime.c)(29);
   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.onesyTab) === 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 Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const Interaction = _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.Interaction) || _Interaction.default;
-  }, [theme]);
-  const Tooltip = _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.Tooltip) || _Tooltip.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.onesyTab) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Interaction) || _Interaction.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
       value,
       onChange,
       active,
@@ -117,73 +102,157 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       name,
       label: label_,
       icon,
-      iconPosition = 'start',
+      iconPosition: t4,
       activateOnFocus,
       tooltip,
       disabled,
       onBlur: onBlur_,
       onFocus: onFocus_,
-      LineProps = {},
+      LineProps: t5,
       TooltipProps,
-      Component = 'button',
+      Component: t6,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "primary" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const iconPosition = t4 === undefined ? "start" : t4;
+  const LineProps = t5 === undefined ? {} : t5;
+  const Component = t6 === undefined ? "button" : t6;
   const {
     classes
   } = useStyle();
   const [focus, setFocus] = _react.default.useState(false);
   const label = name !== undefined ? name : label_;
-  const onBlur = _react.default.useCallback(event => {
-    if (!disabled) setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, [disabled, onBlur_]);
-  const onFocus = _react.default.useCallback(event => {
+  const onBlur = event => {
+    if (!disabled) {
+      setFocus(false);
+    }
+    if ((0, _utils.is)("function", onBlur_)) {
+      onBlur_(event);
+    }
+  };
+  const onFocus = event_0 => {
     if (!disabled) {
       setFocus(true);
-      if (activateOnFocus) onChange(value, index);
+      if (activateOnFocus) {
+        onChange(value, index);
+      }
     }
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, [activateOnFocus, value, disabled, onFocus_]);
+    if ((0, _utils.is)("function", onFocus_)) {
+      onFocus_(event_0);
+    }
+  };
   if (icon !== undefined) {
-    LineProps.direction = iconPosition === 'start' ? 'row' : iconPosition === 'top' ? 'column' : iconPosition === 'end' ? 'row-reverse' : 'column-reverse';
+    LineProps.direction = iconPosition === "start" ? "row" : iconPosition === "top" ? "column" : iconPosition === "end" ? "row-reverse" : "column-reverse";
+  }
+  let typeVersion = "l2";
+  if (size === "large") {
+    typeVersion = "l1";
+  } else {
+    if (size === "small") {
+      typeVersion = "l3";
+    }
   }
-  let typeVersion = 'l2';
-  if (size === 'large') typeVersion = 'l1';else if (size === 'small') typeVersion = 'l3';
   const hasTooltip = ![null, undefined].includes(tooltip);
   const Wrapper = hasTooltip ? Tooltip : _react.default.Fragment;
   const wrapperProps = hasTooltip ? _objectSpread({
     name: tooltip
   }, TooltipProps) : undefined;
-  return /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
-    tabIndex: !disabled ? 0 : -1,
-    tonal: tonal,
-    color: color,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    role: "tab",
-    "aria-selected": active,
-    "data-onesy-tab-value": value,
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tab', theme) && ['onesy-Tab-root', `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && `onesy-Tab-active`, disabled && `onesy-Tab-disabled`], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled])
-  }, other), /*#__PURE__*/_react.default.createElement(Interaction, {
-    pulse: focus
-  }), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, LineProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tab', theme) && ['onesy-Tab-line'], LineProps === null || LineProps === void 0 ? void 0 : LineProps.className, classes.line])
-  }), icon, label !== undefined && ((0, _utils.is)('simple', label) ? /*#__PURE__*/_react.default.createElement(Type, {
+  const t7 = !disabled ? 0 : -1;
+  const t8 = "tab";
+  const t9 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
+  let t10;
+  if ($[0] !== Interaction || $[1] !== focus) {
+    t10 = /*#__PURE__*/_react.default.createElement(Interaction, {
+      pulse: focus
+    });
+    $[0] = Interaction;
+    $[1] = focus;
+    $[2] = t10;
+  } else {
+    t10 = $[2];
+  }
+  const t11 = 1;
+  const t12 = "row";
+  const t13 = "center";
+  const t14 = "center";
+  const t15 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-line"], LineProps === null || LineProps === void 0 ? void 0 : LineProps.className, classes.line]);
+  const t16 = label !== undefined && ((0, _utils.is)("simple", label) ? /*#__PURE__*/_react.default.createElement(Type, {
     version: typeVersion,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
-  }, label) : label), children !== undefined && ((0, _utils.is)('simple', children) ? /*#__PURE__*/_react.default.createElement(Type, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
+  }, label) : label);
+  const t17 = children !== undefined && ((0, _utils.is)("simple", children) ? /*#__PURE__*/_react.default.createElement(Type, {
     version: typeVersion,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
-  }, children) : children))));
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
+  }, children) : children);
+  let t18;
+  if ($[3] !== Line || $[4] !== LineProps || $[5] !== icon || $[6] !== t15 || $[7] !== t16 || $[8] !== t17) {
+    t18 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      gap: t11,
+      direction: t12,
+      align: t13,
+      justify: t14
+    }, LineProps, {
+      className: t15
+    }), icon, t16, t17);
+    $[3] = Line;
+    $[4] = LineProps;
+    $[5] = icon;
+    $[6] = t15;
+    $[7] = t16;
+    $[8] = t17;
+    $[9] = t18;
+  } else {
+    t18 = $[9];
+  }
+  let t19;
+  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== ref || $[18] !== t10 || $[19] !== t18 || $[20] !== t7 || $[21] !== t9 || $[22] !== tonal || $[23] !== value) {
+    t19 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+      ref: ref,
+      tabIndex: t7,
+      tonal: tonal,
+      color: color,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      role: t8,
+      "aria-selected": active,
+      "data-onesy-tab-value": value,
+      Component: Component,
+      className: t9
+    }, other), t10, t18);
+    $[10] = Component;
+    $[11] = Surface;
+    $[12] = active;
+    $[13] = color;
+    $[14] = onBlur;
+    $[15] = onFocus;
+    $[16] = other;
+    $[17] = ref;
+    $[18] = t10;
+    $[19] = t18;
+    $[20] = t7;
+    $[21] = t9;
+    $[22] = tonal;
+    $[23] = value;
+    $[24] = t19;
+  } else {
+    t19 = $[24];
+  }
+  let t20;
+  if ($[25] !== Wrapper || $[26] !== t19 || $[27] !== wrapperProps) {
+    t20 = /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, t19);
+    $[25] = Wrapper;
+    $[26] = t19;
+    $[27] = wrapperProps;
+    $[28] = t20;
+  } else {
+    t20 = $[28];
+  }
+  return t20;
 });
 Tab.displayName = 'onesy-Tab';
 var _default = exports.default = Tab;

package/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IPropsAny, IElementReference } from '../types';
-export type ITable = ISurface & {
+export declare type ITable = ISurface & {
     header?: IElement;
     footer?: IElement;
     WrapperComponentProps?: IPropsAny;