@onesy/ui-react 1.0.163 → 1.0.165

package/Tooltip/Tooltip.js

@@ -187,27 +187,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Tooltip'
 });
 const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
   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.onesyTooltip) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Grow = _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.Grow) || _Grow.default;
-  }, [theme]);
-  const Append = _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.Append) || _Append.default;
-  }, [theme]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const Surface = _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.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.onesyTooltip) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Grow = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Grow) || _Grow.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Append) || _Append.default;
+  const Modal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Modal) || _Modal.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
   const {
       tonal = true,
       color = 'inverted',
@@ -286,22 +272,22 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     nameRoot: {}
   };
   const label = name !== undefined ? name : label_;
-  const onMouseDown = _react.default.useCallback(event => {
+  const onMouseDown = event => {
     if (longPress_) refs.longPressTimer.current = setTimeout(() => setLongPress(true), 700);
     if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseDown)) children.props.onMouseDown(event);
-  }, []);
-  const onMouseUp = _react.default.useCallback(event => {
+  };
+  const onMouseUp = event_0 => {
     if (longPress_) {
       clearTimeout(refs.longPressTimer.current);
       setLongPress(false);
     }
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseUp)) children.props.onMouseUp(event);
-  }, []);
-  const onMouseEnter = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseUp)) children.props.onMouseUp(event_0);
+  };
+  const onMouseEnter = event_1 => {
     if (hover_) setHover(true);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseEnter)) children.props.onMouseEnter(event);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseEnter)) children.props.onMouseEnter(event_1);
+  };
+  const onMouseLeave = event_2 => {
     if (refs.longPress.current) {
       setLongPress(false);
       if (refs.props.current.open === undefined) {
@@ -309,23 +295,23 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     }
     if (hover_) setHover(false);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseLeave)) children.props.onMouseLeave(event);
-  }, []);
-  const onTouchStart = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseLeave)) children.props.onMouseLeave(event_2);
+  };
+  const onTouchStart = event_3 => {
     if (!refs.touchProps.current) return;
     setTouch(true);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchStart)) children.props.onTouchStart(event);
-  }, [touch_]);
-  const onTouchEnd = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchStart)) children.props.onTouchStart(event_3);
+  };
+  const onTouchEnd = event_4 => {
     if (!refs.touchProps.current) return;
     setTouch(false);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchEnd)) children.props.onTouchEnd(event);
-  }, [touch_]);
-  const onFocus = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchEnd)) children.props.onTouchEnd(event_4);
+  };
+  const onFocus = event_5 => {
     if (focus_) setFocus(true);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onFocus)) children.props.onFocus(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onFocus)) children.props.onFocus(event_5);
+  };
+  const onBlur = event_6 => {
     if (refs.longPress.current) {
       setLongPress(false);
       if (refs.props.current.open === undefined) {
@@ -333,19 +319,19 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     }
     if (focus_) setFocus(false);
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onBlur)) children.props.onBlur(event);
-  }, []);
-  const onMouseMove = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onBlur)) children.props.onBlur(event_6);
+  };
+  const onMouseMove = event_7 => {
     if (follow) {
       setAnchor({
-        x: event.clientX,
-        y: event.clientY,
+        x: event_7.clientX,
+        y: event_7.clientY,
         width: 10,
         height: 20
       });
     }
-    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseMove)) children.props.onMouseMove(event);
-  }, []);
+    if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseMove)) children.props.onMouseMove(event_7);
+  };
   const onOpen = () => {
     if (!open) setOpen(true);
     if (!refs.inProp.current) setInProp(true);
@@ -359,9 +345,9 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const onPreClose = () => {
     if (!refs.inProp.current) onClose();else setInProp(false);
   };
-  const onClick = _react.default.useCallback(event => {
+  const onClick = event_8 => {
     !refs.open.current ? onOpen() : onPreClose();
-  }, [onOpen, onPreClose]);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
     setInit(true);
@@ -425,11 +411,11 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     element: items => {
       var _props;
       const rtl = theme.direction === 'rtl';
-      const switched = items.values.switch;
+      const switched_0 = items.values.switch;
       if (!rtl) {
-        styles.nameRoot.transformOrigin = (!switched ? transformOrigin : transformOriginSwitch) || transformOrigin;
+        styles.nameRoot.transformOrigin = (!switched_0 ? transformOrigin : transformOriginSwitch) || transformOrigin;
       } else {
-        styles.nameRoot.transformOrigin = (!switched ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
+        styles.nameRoot.transformOrigin = (!switched_0 ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
       }
       if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
       return /*#__PURE__*/_react.default.createElement(Modal, (0, _extends2.default)({
@@ -453,7 +439,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         focus: false,
         disableKeyboardClose: true
       }, ModalProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-root', open && `onesy-Button-open`, touch && 'onesy-Tooltip-touch', longPress && 'onesy-Tooltip-long-press', hover && 'onesy-Tooltip-hover', focus && 'onesy-Tooltip-focus', `onesy-Tooltip-position-${position}`], className, classes.root, ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.className, switched && classNameSwitch]),
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-root', open && `onesy-Button-open`, touch && 'onesy-Tooltip-touch', longPress && 'onesy-Tooltip-long-press', hover && 'onesy-Tooltip-hover', focus && 'onesy-Tooltip-focus', `onesy-Tooltip-position-${position}`], className, classes.root, ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.className, switched_0 && classNameSwitch]),
         style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.style)
       }, other), /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
         in: inProp,
@@ -478,18 +464,18 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }))));
     }
   }), children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item => {
+    ref: item_0 => {
       if (children !== null && children !== void 0 && children.ref) {
-        if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.ref)) children === null || children === void 0 || children.ref(item);else children.ref.current = item;
+        if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.ref)) children === null || children === void 0 || children.ref(item_0);else children.ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     onMouseMove
   }, click && {
-    onClick: event => {
+    onClick: event_9 => {
       var _children$props, _children$props2;
-      if ((0, _utils.is)('function', children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick)) children === null || children === void 0 || (_children$props2 = children.props) === null || _children$props2 === void 0 || _children$props2.onClick(event);
-      onClick(event);
+      if ((0, _utils.is)('function', children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick)) children === null || children === void 0 || (_children$props2 = children.props) === null || _children$props2 === void 0 || _children$props2.onClick(event_9);
+      onClick(event_9);
     }
   }), {}, {
     onFocus,

package/TopAppBar/TopAppBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement } from '../types';
-export type ITopAppBar = Omit<ISurface, 'version'> & {
+export declare type ITopAppBar = Omit<ISurface, 'version'> & {
     position?: 'relative' | 'absolute' | 'static' | 'sticky' | 'fixed' | 'unset';
     version?: 'small' | 'center' | 'medium' | 'large';
     center?: boolean;

package/TopAppBar/TopAppBar.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");
@@ -128,39 +129,35 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TopAppBar'
 });
 const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
+  const $ = (0, _compilerRuntime.c)(24);
   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.onesyTopAppBar) === 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 Type = _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.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.onesyTopAppBar) === 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 Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'small',
-      size = 'regular',
-      center = true,
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
+      center: t4,
       title: title_,
       start: start_,
       end: end_,
       position,
       WrapperProps,
-      Component = 'div',
+      Component: t5,
       className,
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "small" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const center = t4 === undefined ? true : t4;
+  const Component = t5 === undefined ? "div" : t5;
   const {
     classes
   } = useStyle();
@@ -168,40 +165,122 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     key: index,
     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 : 'filled',
+    version: item.props.version !== undefined ? item.props.version : "filled",
     elevation: item.props.elevation !== undefined ? item.props.elevation : false
   }));
-  const end = _react.default.Children.toArray(end_).map((item, index) => /*#__PURE__*/_react.default.cloneElement(item, {
-    key: index,
-    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 : 'filled',
-    elevation: item.props.elevation !== undefined ? item.props.elevation : false
+  const end = _react.default.Children.toArray(end_).map((item_0, index_0) => /*#__PURE__*/_react.default.cloneElement(item_0, {
+    key: index_0,
+    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+    color: item_0.props.color !== undefined ? item_0.props.color : color,
+    version: item_0.props.version !== undefined ? item_0.props.version : "filled",
+    elevation: item_0.props.elevation !== undefined ? item_0.props.elevation : false
   }));
-  const classNameTitle = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-title'], classes.title, classes[`title_version_${version}`], version === 'small' && !start.length && classes.title_no_start]);
-  const classNameTitleMedium = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-title', 'onesy-TopAppBar-title-medium'], classes.title, classes[`title_version_${version}`]]);
+  const classNameTitle = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-title"], classes.title, classes[`title_version_${version}`], version === "small" && !start.length && classes.title_no_start]);
+  const classNameTitleMedium = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-title", "onesy-TopAppBar-title-medium"], classes.title, classes[`title_version_${version}`]]);
   let title;
   if (title_) {
-    if (['small', 'center'].includes(version)) {
-      title = (0, _utils.is)('simple', title_) ? /*#__PURE__*/_react.default.createElement(Type, {
+    if (["small", "center"].includes(version)) {
+      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/_react.default.createElement(Type, {
         version: "t1",
         className: classNameTitle
       }, title_) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
-        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitle
       });
     } else {
-      title = (0, _utils.is)('simple', title_) ? /*#__PURE__*/_react.default.createElement(Type, {
-        version: version === 'medium' ? 'h3' : 'h2',
+      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/_react.default.createElement(Type, {
+        version: version === "medium" ? "h3" : "h2",
         className: classNameTitleMedium
       }, title_) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
-        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitleMedium
       });
     }
   }
+  const t6 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-root", `onesy-TopAppBar-version-${version}`, `onesy-TopAppBar-size-${size}`], className, classes.root, position && classes[`position_${position}`], center && classes[`center${["absolute", "fixed"].includes(position) ? "_absolute" : ""}`]]);
+  const t7 = "row";
+  const t8 = "center";
+  const t9 = "space-between";
+  const t10 = 0;
+  const t11 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-wrapper"], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes[`version_small_size_${size}`]]);
+  let t12;
+  if ($[0] !== Line || $[1] !== classes.aside || $[2] !== start || $[3] !== theme) {
+    t12 = !!start.length && /*#__PURE__*/_react.default.createElement(Line, {
+      direction: "row",
+      align: "center",
+      justify: "flex-start",
+      gap: 0,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside])
+    }, start);
+    $[0] = Line;
+    $[1] = classes.aside;
+    $[2] = start;
+    $[3] = theme;
+    $[4] = t12;
+  } else {
+    t12 = $[4];
+  }
+  let t13;
+  if ($[5] !== title || $[6] !== version) {
+    t13 = ["small", "center"].includes(version) && title;
+    $[5] = title;
+    $[6] = version;
+    $[7] = t13;
+  } else {
+    t13 = $[7];
+  }
+  let t14;
+  if ($[8] !== Line || $[9] !== classes.aside || $[10] !== end || $[11] !== theme) {
+    t14 = !!end.length && /*#__PURE__*/_react.default.createElement(Line, {
+      direction: "row",
+      align: "center",
+      justify: "flex-end",
+      gap: 0,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside])
+    }, end);
+    $[8] = Line;
+    $[9] = classes.aside;
+    $[10] = end;
+    $[11] = theme;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  let t15;
+  if ($[13] !== Line || $[14] !== WrapperProps || $[15] !== t11 || $[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
+    t15 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      direction: t7,
+      align: t8,
+      justify: t9,
+      gap: t10
+    }, WrapperProps, {
+      className: t11
+    }), t12, t13, t14);
+    $[13] = Line;
+    $[14] = WrapperProps;
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t13;
+    $[18] = t14;
+    $[19] = t15;
+  } else {
+    t15 = $[19];
+  }
+  let t16;
+  if ($[20] !== Line || $[21] !== title || $[22] !== version) {
+    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/_react.default.createElement(Line, {
+      justify: "flex-end",
+      gap: 0
+    }, title);
+    $[20] = Line;
+    $[21] = title;
+    $[22] = version;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
     ref: ref,
     color: color,
@@ -212,30 +291,8 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     },
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-root', `onesy-TopAppBar-version-${version}`, `onesy-TopAppBar-size-${size}`], className, classes.root, position && classes[`position_${position}`], center && classes[`center${['absolute', 'fixed'].includes(position) ? '_absolute' : ''}`]])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    gap: 0
-  }, WrapperProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, classes[`version_small_size_${size}`]])
-  }), !!start.length && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    gap: 0,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-start`], classes.aside])
-  }, start), ['small', 'center'].includes(version) && title, !!end.length && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-end",
-    gap: 0,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-end`], classes.aside])
-  }, end)), ['medium', 'large'].includes(version) && /*#__PURE__*/_react.default.createElement(Line, {
-    justify: "flex-end",
-    gap: 0
-  }, title));
+    className: t6
+  }, other), t15, t16);
 });
 TopAppBar.displayName = 'onesy-TopAppBar';
 var _default = exports.default = TopAppBar;

package/Transition/Transition.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import { TTransitionsDurationProperties } from '@onesy/style-react';
 import { IBaseElement } from '../types';
-export type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
+export declare type TTransitionStatus = 'appended' | 'add' | 'adding' | 'added' | 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited' | 'removed';
 export declare const STATUS: Record<TTransitionStatus, TTransitionStatus>;
-export type ITransitionDelay = {
+export declare type ITransitionDelay = {
     default?: number;
     add?: number;
     enter?: number;
     exit?: number;
 };
-export type ITransition = Omit<IBaseElement, 'className'> & {
+export declare type ITransition = Omit<IBaseElement, 'className'> & {
     in?: boolean;
     name?: string;
     className?: boolean;