@onesy/ui-react 1.0.164 → 1.0.165

package/esm/Link/Link.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "underline", "Component", "className", "style", "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) { _defineProperty(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; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TypeElement from '../Type';
@@ -109,20 +110,26 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Link'
 });
 const Link = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLink?.props?.default), props_), [props_]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLink?.props?.default), props_);
+  const Type = theme?.elements?.Type || TypeElement;
   const {
-      tonal = true,
-      color: color_ = 'primary',
-      version = 'b2',
-      underline = true,
-      Component = 'a',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      underline: t3,
+      Component: t4,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color_ = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "b2" : t2;
+  const underline = t3 === undefined ? true : t3;
+  const Component = t4 === undefined ? "a" : t4;
   const {
     classes
   } = useStyle();
@@ -131,24 +138,54 @@ const Link = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const styles = {
     root: {}
   };
-  const onFocus = React.useCallback(event => {
-    setFocus(true);
-  }, []);
-  const onBlur = React.useCallback(event => {
-    setFocus(false);
-  }, []);
-  const onMouseEnter = React.useCallback(event => {
-    setHover(true);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
-    setHover(false);
-  }, []);
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = event => {
+      setFocus(true);
+    };
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  const onFocus = t5;
+  let t6;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = event_0 => {
+      setFocus(false);
+    };
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  const onBlur = t6;
+  let t7;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event_1 => {
+      setHover(true);
+    };
+    $[2] = t7;
+  } else {
+    t7 = $[2];
+  }
+  const onMouseEnter = t7;
+  let t8;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = event_2 => {
+      setHover(false);
+    };
+    $[3] = t8;
+  } else {
+    t8 = $[3];
+  }
+  const onMouseLeave = t8;
   const color = color_;
   let palette;
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
     palette = theme.methods.color(color);
-    if (tonal) styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+    if (tonal) {
+      styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+    }
   }
   if (underline === true && !hover) {
     styles.root.textDecorationColor = theme.methods.palette.color.value(color, 70, true, palette);
@@ -167,7 +204,7 @@ const Link = /*#__PURE__*/React.forwardRef((props_, ref) => {
     version: version,
     role: "link",
     Component: Component,
-    className: classNames([staticClassName('Link', theme) && ['onesy-Link-root', hover && `onesy-Link-hover`, focus && `onesy-Link-focus`], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], underline === true && classes.underline, underline === 'hover' && classes.underline_hover, focus && classes.focus]),
+    className: classNames([staticClassName("Link", theme) && ["onesy-Link-root", hover && "onesy-Link-hover", focus && "onesy-Link-focus"], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], underline === true && classes.underline, underline === "hover" && classes.underline_hover, focus && classes.focus]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), children);
 });

package/esm/Links/Links.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "sensitiveText", "sensitiveDescription", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"];
 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) { _defineProperty(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; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { textToInnerHTML } from '@onesy/utils';
 import { classNames, style, useOnesyTheme } from '@onesy/style-react';
@@ -75,17 +76,18 @@ const useStyle = style(theme => ({
   name: 'onesy-Links'
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(19);
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const Share = React.useMemo(() => theme?.elements?.Share || ShareElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const MenuItem = React.useMemo(() => theme?.elements?.MenuItem || MenuItemElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const Share = theme?.elements?.Share || ShareElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const MenuItem = theme?.elements?.MenuItem || MenuItemElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
     classes
   } = useStyle();
@@ -95,13 +97,13 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       cover,
       profile,
       links,
-      share = true,
+      share: t0,
       start,
       end,
-      sensitiveText = l('Sensitive URL'),
-      sensitiveDescription = l('This is URL might contain sensitive information, confirm you are 18+ to continue.'),
-      IconMore = IconMaterialMoreVert,
-      IconShare = IconMaterialShare,
+      sensitiveText: t1,
+      sensitiveDescription: t2,
+      IconMore: t3,
+      IconShare: t4,
       ShareProps,
       ItemShareProps,
       IconButtonProps,
@@ -113,29 +115,30 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const share = t0 === undefined ? true : t0;
+  const sensitiveText = t1 === undefined ? l("Sensitive URL") : t1;
+  const sensitiveDescription = t2 === undefined ? l("This is URL might contain sensitive information, confirm you are 18+ to continue.") : t2;
+  const IconMore = t3 === undefined ? IconMaterialMoreVert : t3;
+  const IconShare = t4 === undefined ? IconMaterialShare : t4;
   const confirm = useConfirm();
-  const onOpenLink = React.useCallback(async item => {
-    const confirmed = item.sensitivity && !['none'].includes(item.sensitivity) ? await confirm.open({
+  const onOpenLink = async item => {
+    const confirmed = item.sensitivity && !["none"].includes(item.sensitivity) ? await confirm.open({
       name: sensitiveText,
       description: sensitiveDescription
     }) : true;
     if (confirmed) {
-      window.open(item.url, 'blank');
+      window.open(item.url, "blank");
     }
-  }, [sensitiveText, sensitiveDescription]);
-  return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: ref,
-    gap: 2,
-    align: "center",
-    maxWidth: false,
-    padding: false,
-    fullWidth: true,
-    className: classNames([staticClassName('Links', theme) && ['onesy-Links-root'], className, classes.root])
-  }, other), start, /*#__PURE__*/React.createElement(Line, {
-    gap: 1.4,
-    fullWidth: true,
-    className: classes.wrapper
-  }, (profile || cover) && /*#__PURE__*/React.createElement(Line, {
+  };
+  const t5 = 2;
+  const t6 = "center";
+  const t7 = false;
+  const t8 = false;
+  const t9 = true;
+  const t10 = classNames([staticClassName("Links", theme) && ["onesy-Links-root"], className, classes.root]);
+  const t11 = 1.4;
+  const t12 = true;
+  const t13 = (profile || cover) && /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     align: "center",
     fullWidth: true
@@ -152,7 +155,8 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       marginTop: cover ? -71 : 0,
       backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
     }
-  })), (name || short_description) && /*#__PURE__*/React.createElement(Line, {
+  }));
+  const t14 = (name || short_description) && /*#__PURE__*/React.createElement(Line, {
     gap: 0.5,
     align: "center",
     fullWidth: true
@@ -165,7 +169,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       __html: textToInnerHTML(name)
     }
   }, NameProps, {
-    className: classNames([staticClassName('Links', theme) && ['onesy-Links-name'], NameProps?.className, classes.name])
+    className: classNames([staticClassName("Links", theme) && ["onesy-Links-name"], NameProps?.className, classes.name])
   })), short_description && /*#__PURE__*/React.createElement(Type, _extends({
     version: "b1",
     weight: 300,
@@ -175,13 +179,14 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       __html: textToInnerHTML(short_description)
     }
   }, ShortDescriptionProps, {
-    className: classNames([staticClassName('Links', theme) && ['onesy-Links-short-description'], ShortDescriptionProps?.className, classes.summary])
-  }))), !!links?.length && /*#__PURE__*/React.createElement(Line, {
+    className: classNames([staticClassName("Links", theme) && ["onesy-Links-short-description"], ShortDescriptionProps?.className, classes.summary])
+  })));
+  const t15 = !!links?.length && /*#__PURE__*/React.createElement(Line, {
     gap: 1.4,
     align: "center",
     fullWidth: true,
     className: classes.links
-  }, links.map((item, index) => /*#__PURE__*/React.createElement(Line, {
+  }, links.map((item_0, index) => /*#__PURE__*/React.createElement(Line, {
     key: index,
     gap: 1,
     direction: "row",
@@ -191,18 +196,18 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classes.linkWrapper
   }, /*#__PURE__*/React.createElement(Button, _extends({
     tonal: true
-  }, item.props, {
-    version: [undefined, 'default'].includes(item.version) ? 'outlined' : 'filled',
-    elevation: item.version === 'primary',
-    color: item.version === 'primary' ? 'primary' : item.version === 'secondary' ? 'secondary' : 'default',
+  }, item_0.props, {
+    version: [undefined, "default"].includes(item_0.version) ? "outlined" : "filled",
+    elevation: item_0.version === "primary",
+    color: item_0.version === "primary" ? "primary" : item_0.version === "secondary" ? "secondary" : "default",
     fullWidth: true,
-    onClick: () => onOpenLink(item)
+    onClick: () => onOpenLink(item_0)
   }, LinkProps, {
-    className: classNames([`onesy-Links-link-version-${item.version}`, LinkProps?.className, item.props?.className, classes.link])
+    className: classNames([`onesy-Links-link-version-${item_0.version}`, LinkProps?.className, item_0.props?.className, classes.link])
   }), /*#__PURE__*/React.createElement(Type, _extends({
     version: "b1",
     weight: 300
-  }, LinkTypeProps), item.name || l('Link'))), /*#__PURE__*/React.createElement(Menu, {
+  }, LinkTypeProps), item_0.name || l("Link"))), /*#__PURE__*/React.createElement(Menu, {
     menuItems: [/*#__PURE__*/React.createElement(MenuItem, {
       start: /*#__PURE__*/React.createElement(IconShare, _extends({
         size: "small"
@@ -210,15 +215,15 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       startAlign: "center",
       primary: /*#__PURE__*/React.createElement(Type, {
         version: "b3"
-      }, l('Share')),
-      menu: item.share ? /*#__PURE__*/React.createElement(Share, _extends({
+      }, l("Share")),
+      menu: item_0.share ? /*#__PURE__*/React.createElement(Share, _extends({
         version: "menu-items",
-        name: item.name,
-        url: item.url,
-        exclude: ['print']
+        name: item_0.name,
+        url: item_0.url,
+        exclude: ["print"]
       }, ItemShareProps, {
         ListItemProps: _objectSpread({
-          size: 'small',
+          size: "small",
           noBackground: true
         }, ItemShareProps?.ListItemProps)
       })) : undefined,
@@ -229,16 +234,66 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       },
       size: "small",
       button: true,
-      disabled: !item.share
+      disabled: !item_0.share
     })]
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     size: "regular",
-    disabled: !item.share
+    disabled: !item_0.share
   }, IconButtonProps, {
-    className: classNames([staticClassName('Links', theme) && ['onesy-Links-more'], IconButtonProps?.className, classes.more])
+    className: classNames([staticClassName("Links", theme) && ["onesy-Links-more"], IconButtonProps?.className, classes.more])
   }), /*#__PURE__*/React.createElement(IconMore, _extends({
     size: "large"
-  }, IconProps)))))))), share && /*#__PURE__*/React.createElement(Share, ShareProps), end);
+  }, IconProps)))))));
+  let t16;
+  if ($[0] !== Line || $[1] !== classes.wrapper || $[2] !== t13 || $[3] !== t14 || $[4] !== t15) {
+    t16 = /*#__PURE__*/React.createElement(Line, {
+      gap: t11,
+      fullWidth: t12,
+      className: classes.wrapper
+    }, t13, t14, t15);
+    $[0] = Line;
+    $[1] = classes.wrapper;
+    $[2] = t13;
+    $[3] = t14;
+    $[4] = t15;
+    $[5] = t16;
+  } else {
+    t16 = $[5];
+  }
+  let t17;
+  if ($[6] !== Share || $[7] !== ShareProps || $[8] !== share) {
+    t17 = share && /*#__PURE__*/React.createElement(Share, ShareProps);
+    $[6] = Share;
+    $[7] = ShareProps;
+    $[8] = share;
+    $[9] = t17;
+  } else {
+    t17 = $[9];
+  }
+  let t18;
+  if ($[10] !== Section || $[11] !== end || $[12] !== other || $[13] !== ref || $[14] !== start || $[15] !== t10 || $[16] !== t16 || $[17] !== t17) {
+    t18 = /*#__PURE__*/React.createElement(Section, _extends({
+      ref: ref,
+      gap: t5,
+      align: t6,
+      maxWidth: t7,
+      padding: t8,
+      fullWidth: t9,
+      className: t10
+    }, other), start, t16, t17, end);
+    $[10] = Section;
+    $[11] = end;
+    $[12] = other;
+    $[13] = ref;
+    $[14] = start;
+    $[15] = t10;
+    $[16] = t16;
+    $[17] = t17;
+    $[18] = t18;
+  } else {
+    t18 = $[18];
+  }
+  return t18;
 });
 Element.displayName = 'onesy-Links';
 export default Element;

package/esm/List/List.js

@@ -58,9 +58,9 @@ const useStyle = styleMethod(theme => ({
 });
 const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyList?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyList?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
       tonal = true,
       color = 'themed',
@@ -117,18 +117,18 @@ const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, SurfaceProps, {
     className: classNames([staticClassName('List', theme) && ['onesy-List-root', `onesy-List-size-${size}`], SurfaceProps?.className, className, classes.root, classes[`padding_vertical_${paddingVertical}`], classes[`padding_horizontal_${paddingHorizontal}`], menu && classes.menu, noMaxWidth && classes.noMaxWidth, noBackground && classes.noBackground]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }), noChildrenTransform ? children : React.Children.toArray(children).map((item, index) => {
-    return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread(_objectSpread({
+  }), noChildrenTransform ? children : React.Children.toArray(children).map((item_0, index) => {
+    return /*#__PURE__*/React.cloneElement(item_0, _objectSpread(_objectSpread(_objectSpread({
       key: index,
       menuItem: menu,
       menuOpen,
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-      color: item.props.color !== undefined ? item.props.color : color,
-      size: item.props.size !== undefined ? item.props.size : size
-    }, other), item.props), {}, {
+      tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+      color: item_0.props.color !== undefined ? item_0.props.color : color,
+      size: item_0.props.size !== undefined ? item_0.props.size : size
+    }, other), item_0.props), {}, {
       onClick: event => {
-        if (is('function', onMenuDesktopClose) && item.props.menuCloseOnClick) onMenuDesktopClose();
-        if (is('function', item.props.onClick)) item.props.onClick(event);
+        if (is('function', onMenuDesktopClose) && item_0.props.menuCloseOnClick) onMenuDesktopClose();
+        if (is('function', item_0.props.onClick)) item_0.props.onClick(event);
       }
     }));
   }));

package/esm/ListItem/ListItem.js

@@ -216,10 +216,10 @@ const useStyle = styleMethod(theme => {
 });
 const ListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListItem?.props?.default), props_), [props_]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListItem?.props?.default), props_);
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color = 'default',

package/esm/ListSubheader/ListSubheader.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import ListItemElement from '../ListItem';
@@ -22,9 +23,10 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-ListSubheader'
 });
 const ListSubheader = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListSubheader?.props?.default), props_), [props_]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListSubheader?.props?.default), props_);
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
   const {
       className,
       children
@@ -33,11 +35,24 @@ const ListSubheader = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(ListItem, _extends({
-    ref: ref,
-    secondary: children,
-    className: classNames([staticClassName('ListSubheader', theme) && ['onesy-ListSubheader-root'], className, classes.root])
-  }, other));
+  const t0 = classNames([staticClassName("ListSubheader", theme) && ["onesy-ListSubheader-root"], className, classes.root]);
+  let t1;
+  if ($[0] !== ListItem || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t0) {
+    t1 = /*#__PURE__*/React.createElement(ListItem, _extends({
+      ref: ref,
+      secondary: children,
+      className: t0
+    }, other));
+    $[0] = ListItem;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
 });
 ListSubheader.displayName = 'onesy-ListSubheader';
 export default ListSubheader;

package/esm/MainProgress/MainProgress.js

@@ -40,7 +40,7 @@ const useStyle = style(theme => ({
 });
 const MainProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgress?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgress?.props?.default), props_);
   const {
       children,
       className
@@ -49,14 +49,14 @@ const MainProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Line = theme?.elements?.Line || LineElement;
   const open = useOpen();
-  const start = React.useCallback(() => {
+  const start = () => {
     open.onOpen();
-  }, []);
-  const done = React.useCallback(() => {
+  };
+  const done = () => {
     open.onClose();
-  }, []);
+  };
   const value = React.useMemo(() => {
     return {
       start,

package/esm/MainProgressMaterial/MainProgressMaterial.js

@@ -38,9 +38,9 @@ const useStyle = styleMethod(theme => ({
 });
 const MainProgressMaterial = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgressMaterial?.props?.default), props_), [props_]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgressMaterial?.props?.default), props_);
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const LinearProgress = theme?.elements?.LinearProgress || LinearProgressElement;
   const {
       min = 0,
       max = 99,
@@ -100,7 +100,7 @@ const MainProgressMaterial = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.interval.current = undefined;
     }
   };
-  const start = React.useCallback(value_ => {
+  const start = value_ => {
     // Reset
     clear();
 
@@ -127,20 +127,20 @@ const MainProgressMaterial = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, stepInterval_);
     }
     if (is('function', onStart)) onStart();
-  }, []);
-  const increment = React.useCallback(() => {
+  };
+  const increment = () => {
     // Inc value random between incrementMin, incrementMax, with clam to min, max
     let valueNew = refs.value.current;
     valueNew += clamp(random(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
     setValue(valueNew);
     if (is('function', onIncrement)) onIncrement(valueNew);
-  }, []);
-  const update = React.useCallback(value_ => {
-    const valueNew = value_;
-    setValue(valueNew);
-    if (is('function', onUpdate)) onUpdate(valueNew);
-  }, []);
-  const done = React.useCallback(async () => {
+  };
+  const update = value__0 => {
+    const valueNew_0 = value__0;
+    setValue(valueNew_0);
+    if (is('function', onUpdate)) onUpdate(valueNew_0);
+  };
+  const done = async () => {
     clear();
 
     // Update value to 100
@@ -151,7 +151,7 @@ const MainProgressMaterial = /*#__PURE__*/React.forwardRef((props_, ref) => {
     await wait(timeout);
     setInProp(false);
     if (is('function', onDone)) onDone();
-  }, []);
+  };
   const onExited = () => {
     // Reset
     setValue(0);