@onesy/ui-react 1.0.164 → 1.0.165

package/MenuItem/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IElement, IHTMLElement, IElementReference, IPropsAny } from '../types';
 import { IListItem } from '../ListItem/ListItem';
-export type IMenuItem = IListItem & {
+export declare type IMenuItem = IListItem & {
     menu?: IElement;
     menuId?: string;
     menuOpen?: boolean;

package/MenuItem/MenuItem.js

@@ -39,35 +39,15 @@ const ListItemDelays = {
   }
 };
 const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
   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.onesyMenuItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const ListItem = _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.ListItem) || _ListItem.default;
-  }, [theme]);
-  const List = _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.List) || _List.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 Menu = _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.Menu) || _Menu.default;
-  }, [theme]);
-  const Expand = _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.Expand) || _Expand.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Fade) || _Fade.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenuItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
+  const List = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.List) || _List.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 Menu = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Menu) || _Menu.default;
+  const Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Fade) || _Fade.default;
   const {
       tonal = true,
       color = 'default',
@@ -142,12 +122,12 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick(event);
     }
   }, item === null || item === void 0 ? void 0 : item.props))));
-  const onClick = _react.default.useCallback(event => {
+  const onClick = event_0 => {
     if (!refs.props.current.disabled) {
       if (refs.props.current.list) setOpenList(!refs.openList.current);
     }
-    if ((0, _utils.is)('function', onClick_)) onClick_(event);
-  }, [onClick_]);
+    if ((0, _utils.is)('function', onClick_)) onClick_(event_0);
+  };
   let end = end_;
   if (menu) end = end_ || /*#__PURE__*/_react.default.createElement(_IconMaterialArrowRightW.default, null);
   if (list) end = end_ || indicator && /*#__PURE__*/_react.default.createElement(IconButton, {
@@ -160,18 +140,18 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }));
   _react.default.useEffect(() => {
     var _refs$root$current;
-    const onKeyDown = event => {
+    const onKeyDown = event_1 => {
       if (!refs.props.current.disabled) {
         if (menu) {
-          if (refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
-          if (!refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
+          if (refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
         } else if (list) {
-          if (refs.openList.current && (event.key === 'ArrowUp' || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
-          if (!refs.openList.current && (event.key === 'ArrowDown' || theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
-          if (event.key === 'Enter' && refs.focus.current) onClick();
+          if (refs.openList.current && (event_1.key === 'ArrowUp' || theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openList.current && (event_1.key === 'ArrowDown' || theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
+          if (event_1.key === 'Enter' && refs.focus.current) onClick();
         } else {
-          if (event.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
-            if ((0, _utils.is)('function', refs.props.current.onClick)) refs.props.current.onClick(event);
+          if (event_1.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
+            if ((0, _utils.is)('function', refs.props.current.onClick)) refs.props.current.onClick(event_1);
           }
         }
       }
@@ -197,26 +177,26 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (menu) setOpenMenu(hover || focus || preselected || selected);
   }, [focus]);
-  const onMouseEnter = _react.default.useCallback(event => {
+  const onMouseEnter = event_2 => {
     if (!disabled) setHover(true);
-    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_2);
+  };
+  const onMouseLeave = event_3 => {
     if (!disabled) {
       setHover(false);
       setFocus(false);
     }
-    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onFocus = _react.default.useCallback(event => {
-    if (event.target === event.currentTarget && !disabled) setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
-    if (event.target === event.currentTarget && !disabled) setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onCloseList = _react.default.useCallback(() => {
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_3);
+  };
+  const onFocus = event_4 => {
+    if (event_4.target === event_4.currentTarget && !disabled) setFocus(true);
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_4);
+  };
+  const onBlur = event_5 => {
+    if (event_5.target === event_5.currentTarget && !disabled) setFocus(false);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_5);
+  };
+  const onCloseList = () => {
     if (!disabled) {
       setOpenList(false);
       setHover(false);
@@ -224,8 +204,8 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // if (is('function', onClose_)) onClose_();
     }
-  }, []);
-  const onCloseMenu = _react.default.useCallback(() => {
+  };
+  const onCloseMenu = () => {
     if (!disabled) {
       setOpenMenu(false);
       setHover(false);
@@ -233,14 +213,14 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // if (is('function', onClose_)) onClose_();
     }
-  }, []);
+  };
   ListTransitionComponentProps.in = !!openList;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     tonal: tonal,
     color: color,

package/Meta/Meta.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IPropsAny } from '../types';
-export type IMeta = ILine & {
+export declare type IMeta = ILine & {
     values?: any[];
     separator?: any;
     ItemProps?: IPropsAny;

package/Meta/Meta.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");
@@ -28,55 +29,76 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Meta'
 });
 const Meta = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _values_$filter;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _values_$filter;
+  const $ = (0, _compilerRuntime.c)(8);
   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.onesyMeta) === 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.onesyMeta) === 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 {
-      values: values_ = [],
-      separator: separator_ = '•',
+      values: t0,
+      separator: t1,
       ItemProps,
       SeparatorProps,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const values_ = t0 === undefined ? [] : t0;
+  const separator_ = t1 === undefined ? "\u2022" : t1;
   const {
     classes
   } = useStyle();
-  const separator = (0, _utils.is)('string', separator_) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+  const separator = (0, _utils.is)("string", separator_) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
     version: "b3",
     priority: "secondary"
   }, SeparatorProps), separator_) : separator_;
-  const getItem = (item, index) => {
-    if ((0, _utils.is)('simple', item)) return /*#__PURE__*/_react.default.createElement(Type, {
-      key: index,
-      version: "b3",
-      priority: "secondary"
-    }, item);
-    return /*#__PURE__*/_react.default.cloneElement(item, {
-      key: index
-    });
-  };
-  const values = values_ === null || values_ === void 0 || (_values_$filter = values_.filter(Boolean)) === null || _values_$filter === void 0 ? void 0 : _values_$filter.flatMap((item, index) => !index ? getItem(item, index) : [separator, getItem(item, index)]);
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Meta', theme) && ['onesy-Meta-root'], className, classes.root])
-  }, other), values);
+  let t2;
+  if ($[0] !== Type) {
+    t2 = (item, index) => {
+      if ((0, _utils.is)("simple", item)) {
+        return /*#__PURE__*/_react.default.createElement(Type, {
+          key: index,
+          version: "b3",
+          priority: "secondary"
+        }, item);
+      }
+      return /*#__PURE__*/_react.default.cloneElement(item, {
+        key: index
+      });
+    };
+    $[0] = Type;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const getItem = t2;
+  const values = values_ === null || values_ === void 0 || (_values_$filter = values_.filter(Boolean)) === null || _values_$filter === void 0 ? void 0 : _values_$filter.flatMap((item_0, index_0) => !index_0 ? getItem(item_0, index_0) : [separator, getItem(item_0, index_0)]);
+  const t3 = 1;
+  const t4 = "row";
+  const t5 = "center";
+  const t6 = "flex-start";
+  const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Meta", theme) && ["onesy-Meta-root"], className, classes.root]);
+  let t8;
+  if ($[2] !== Line || $[3] !== other || $[4] !== ref || $[5] !== t7 || $[6] !== values) {
+    t8 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref,
+      gap: t3,
+      direction: t4,
+      align: t5,
+      justify: t6,
+      className: t7
+    }, other), values);
+    $[2] = Line;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t7;
+    $[6] = values;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  return t8;
 });
 Meta.displayName = 'onesy-Meta';
 var _default = exports.default = Meta;

package/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TMethod } from '@onesy/utils';
 import { IBaseElement, IElementReference, IPropsAny, IRef } from '../types';
-export type IModal = IBaseElement & {
+export declare type IModal = IBaseElement & {
     open?: boolean;
     openDefault?: boolean;
     mainRef?: IRef;

package/Modal/Modal.js

@@ -144,27 +144,13 @@ let MODALS_OPEN = 0;
 // 1. Add padding right for freezeScroll for the scroll bar if it exists and width that it is
 
 const Modal = /*#__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.onesyModal) === 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 Portal = _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.Portal) || _Portal.default;
-  }, [theme]);
-  const Focus = _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.Focus) || _Focus.default;
-  }, [theme]);
-  const Fade = _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.Fade) || _Fade.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyModal) === 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 Portal = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Portal) || _Portal.default;
+  const Focus = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Focus) || _Focus.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fade) || _Fade.default;
   const {
       tonal = true,
       color = 'primary',
@@ -229,8 +215,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     close: () => {
       var _refs$root$current2;
       MODALS_OPEN--;
-      const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
-      if (MODALS_OPEN <= 0 && freezeScroll) rootDocument.body.style.removeProperty('overflow');
+      const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+      if (MODALS_OPEN <= 0 && freezeScroll) rootDocument_0.body.style.removeProperty('overflow');
     }
   };
   let maxWidth = maxWidth_;
@@ -247,13 +233,13 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   _react.default.useEffect(() => {
     var _refs$root$current3;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const rootDocument_1 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
     if (open) modal.open();
 
     // Bug clean up fix
     refs.interval.current = setInterval(() => {
-      if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument.body.style.overflow === 'hidden') {
-        rootDocument.body.style.removeProperty('overflow');
+      if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument_1.body.style.overflow === 'hidden') {
+        rootDocument_1.body.style.removeProperty('overflow');
       }
     }, 1400);
     return () => {

package/ModalFooter/ModalFooter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
-export type IModalFooter = ILine & {};
+export declare type IModalFooter = ILine & {};
 declare const ModalFooter: React.FC<IModalFooter>;
 export default ModalFooter;

package/ModalFooter/ModalFooter.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"));
@@ -23,15 +24,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ModalFooter'
 });
 const ModalFooter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   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.onesyModalFooter) === 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 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.onesyModalFooter) === 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 {
       className,
       children
@@ -40,14 +37,31 @@ const ModalFooter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ModalFooter', theme) && ['onesy-ModalFooter-root'], className, classes.root])
-  }, other), children);
+  const t0 = "row";
+  const t1 = "center";
+  const t2 = "space-between";
+  const t3 = true;
+  const t4 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ModalFooter", theme) && ["onesy-ModalFooter-root"], className, classes.root]);
+  let t5;
+  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t4) {
+    t5 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref,
+      direction: t0,
+      align: t1,
+      justify: t2,
+      fullWidth: t3,
+      className: t4
+    }, other), children);
+    $[0] = Line;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
 });
 ModalFooter.displayName = 'onesy-ModalFooter';
 var _default = exports.default = ModalFooter;

package/ModalHeader/ModalHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ILine, TLineAlign } from '../Line/Line';
-export type IModalHeader = ILine & {
+export declare type IModalHeader = ILine & {
     align?: TLineAlign;
 };
 declare const ModalHeader: React.FC<IModalHeader>;

package/ModalHeader/ModalHeader.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/Line"));
@@ -23,15 +24,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ModalHeader'
 });
 const ModalHeader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   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.onesyModalHeader) === 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 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.onesyModalHeader) === 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 {
       className,
       children
@@ -40,15 +37,33 @@ const ModalHeader = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    gap: 2,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ModalHeader', theme) && ['onesy-ModalHeader-root'], className, classes.root])
-  }, other), children);
+  const t0 = 2;
+  const t1 = "column";
+  const t2 = "center";
+  const t3 = "center";
+  const t4 = true;
+  const t5 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ModalHeader", theme) && ["onesy-ModalHeader-root"], className, classes.root]);
+  let t6;
+  if ($[0] !== Line || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t5) {
+    t6 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref,
+      gap: t0,
+      direction: t1,
+      align: t2,
+      justify: t3,
+      fullWidth: t4,
+      className: t5
+    }, other), children);
+    $[0] = Line;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  return t6;
 });
 ModalHeader.displayName = 'onesy-ModalHeader';
 var _default = exports.default = ModalHeader;

package/ModalIcon/ModalIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IIcon } from '../Icon/Icon';
-export type IModalIcon = IIcon & {};
+export declare type IModalIcon = IIcon & {};
 declare const ModalIcon: React.FC<IModalIcon>;
 export default ModalIcon;

package/ModalIcon/ModalIcon.js

@@ -13,11 +13,9 @@ const _excluded = ["className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ModalIcon = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   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.onesyModalIcon) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyModalIcon) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
       className,
       children

package/ModalMain/ModalMain.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
-export type IModalMain = ILine & {};
+export declare type IModalMain = ILine & {};
 declare const ModalMain: React.FC<IModalMain>;
 export default ModalMain;