@onesy/ui-react 1.0.164 → 1.0.165

package/esm/NavigationBar/NavigationBar.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["color", "tonal", "version", "value", "valueDefault", "onChange", "fixed", "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 { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -25,14 +26,15 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-NavigationBar'
 });
 const NavigationBar = /*#__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?.onesyNavigationBar?.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?.onesyNavigationBar?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
-      color = 'primary',
-      tonal = true,
-      version = 'regular',
+      color: t0,
+      tonal: t1,
+      version: t2,
       value,
       valueDefault,
       onChange,
@@ -42,62 +44,93 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const color = t0 === undefined ? "primary" : t0;
+  const tonal = t1 === undefined ? true : t1;
+  const version = t2 === undefined ? "regular" : t2;
   const {
     classes
   } = useStyle();
   const [init, setInit] = React.useState(false);
   const [selected, setSelected] = React.useState(() => {
     const valueNew = valueDefault !== undefined ? valueDefault : value;
-    return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : [];
+    return valueNew !== undefined ? is("array", valueNew) ? valueNew : [valueNew] : [];
   });
   const styles = {
     root: {},
     icon: {}
   };
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setInit(true);
+    };
+    t4 = [];
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  React.useEffect(t3, t4);
+  let t5;
+  if ($[2] !== value) {
+    t5 = [value];
+    $[2] = value;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
   React.useEffect(() => {
-    setInit(true);
-  }, []);
-  React.useEffect(() => {
-    if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
-  }, [value]);
+    if (init && value !== selected) {
+      setSelected(is("array", value) ? value : [value]);
+    }
+  }, t5);
   const onSelect = itemProps => {
-    // Only one item at the time is selectable,
-    // and it cannot be unselected by clicking on the same item
-    const valueNew = [itemProps.value];
-    if (valueNew !== undefined) {
-      // Update inner or controlled
-      if (!props.hasOwnProperty('value')) setSelected(valueNew);
-      if (is('function', onChange)) onChange(valueNew);
+    const valueNew_0 = [itemProps.value];
+    if (valueNew_0 !== undefined) {
+      if (!props.hasOwnProperty("value")) {
+        setSelected(valueNew_0);
+      }
+      if (is("function", onChange)) {
+        onChange(valueNew_0);
+      }
     }
   };
   let palette;
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
     palette = theme.methods.color(color);
   }
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
-    if (tonal) styles.root.backgroundColor = theme.methods.palette.color.value(undefined, 95, true, palette);else styles.root.backgroundColor = palette.main;
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
+    if (tonal) {
+      styles.root.backgroundColor = theme.methods.palette.color.value(undefined, 95, true, palette);
+    } else {
+      styles.root.backgroundColor = palette.main;
+    }
   }
   if (!tonal) {
     let background = theme.palette.color[color]?.main;
-    if (color === 'default') background = theme.palette.background.default.primary;
-    styles.icon.color = theme.methods.palette.color.text(palette?.main || background, true, 'light');
+    if (color === "default") {
+      background = theme.palette.background.default.primary;
+    }
+    styles.icon.color = theme.methods.palette.color.text(palette?.main || background, true, "light");
   } else {
     styles.icon.color = theme.methods.palette.color.value(color, 5, true, palette);
   }
   const children = React.Children.toArray(children_).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
     key: index
-  }, ['onesy-NavigationItem'].includes(item.type?.displayName) ? _objectSpread(_objectSpread({}, other), {}, {
+  }, ["onesy-NavigationItem"].includes(item.type?.displayName) ? _objectSpread(_objectSpread({}, other), {}, {
     version
   }) : {}), {}, {
-    color: item.props.color !== undefined ? item.props.color : ['onesy-NavigationItem'].includes(item.type?.displayName) ? color : styles.icon.color,
+    color: item.props.color !== undefined ? item.props.color : ["onesy-NavigationItem"].includes(item.type?.displayName) ? color : styles.icon.color,
     tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
     selected: selected.includes(item.props.value),
     onClick: () => {
       if (!item.props.disabled) {
         onSelect(item.props);
-
-        // Invoke items on click method
-        if (is('function', item.props.onClick)) item.props.onClick();
+        if (is("function", item.props.onClick)) {
+          item.props.onClick();
+        }
       }
     }
   })));
@@ -110,7 +143,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center",
     justify: "initial",
     gap: 1,
-    className: classNames([staticClassName('NavigationBar', theme) && ['onesy-NavigationBar-root'], className, classes.root, fixed && classes.fixed]),
+    className: classNames([staticClassName("NavigationBar", theme) && ["onesy-NavigationBar-root"], className, classes.root, fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), children);
 });

package/esm/NavigationDrawer/NavigationDrawer.js

@@ -82,9 +82,9 @@ const useStyle = styleMethod(theme => ({
 });
 const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationDrawer?.props?.default), props_), [props_]);
-  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
-  const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationDrawer?.props?.default), props_);
+  const Modal = theme?.elements?.Modal || ModalElement;
+  const Slide = theme?.elements?.Slide || SlideElement;
   const {
       tonal = false,
       color = [undefined, 'modal'].includes(props.version) ? 'themed' : 'default',
@@ -169,16 +169,16 @@ const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
           }
         }
       } else {
-        let value_ = '';
+        let value__0 = '';
         if (refs.modal.current) {
-          if (direction === 'top') value_ = `translateY(${valueSwipe}px)`;
-          if (direction === 'left') value_ = `translateX(${valueSwipe}px)`;
-          if (direction === 'right') value_ = `translateX(${valueSwipe}px)`;
-          if (direction === 'bottom') value_ = `translateY(${valueSwipe}px)`;
+          if (direction === 'top') value__0 = `translateY(${valueSwipe}px)`;
+          if (direction === 'left') value__0 = `translateX(${valueSwipe}px)`;
+          if (direction === 'right') value__0 = `translateX(${valueSwipe}px)`;
+          if (direction === 'bottom') value__0 = `translateY(${valueSwipe}px)`;
 
           // No transition
           refs.modal.current.style.transition = 'none';
-          refs.modal.current.style.transform = value_;
+          refs.modal.current.style.transform = value__0;
         }
         if (swipeBackgroundFollow && refs.background.current) {
           // No transition
@@ -193,9 +193,9 @@ const NavigationDrawer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   }, [version, swipeValue?.value, swipeValue?.position]);
-  const onClose = React.useCallback(() => {
+  const onClose = () => {
     if (is('function', onClose_)) onClose_();
-  }, []);
+  };
   if (version === 'standard') {
     other.portal = other.portal !== undefined ? other.portal : false;
     other.freezeScroll = other.freezeScroll !== undefined ? other.freezeScroll : false;

package/esm/NavigationItem/NavigationItem.js

@@ -104,11 +104,11 @@ const useStyle = styleMethod(theme => ({
 });
 const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Transition = theme?.elements?.Transition || TransitionElement;
   const {
       tonal = true,
       color = 'primary',
@@ -173,38 +173,38 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (refs.hover.current) setHover(false);
     }
   }, [selected]);
-  const onKeyDown = React.useCallback(event => {
+  const onKeyDown = event => {
     if (!disabled) {
       if (event.key === 'Enter') {
         if (is('function', props.onClick)) props.onClick(event);
       }
     }
     if (is('function', onKeyDown_)) onKeyDown_(event);
-  }, []);
-  const onFocus = React.useCallback(event => {
+  };
+  const onFocus = event_0 => {
     if (!disabled) setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = React.useCallback(event => {
+    if (is('function', onFocus_)) onFocus_(event_0);
+  };
+  const onBlur = event_1 => {
     if (!disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onTouchStart = React.useCallback(event => {
+    if (is('function', onBlur_)) onBlur_(event_1);
+  };
+  const onTouchStart = event_2 => {
     if (!disabled) setMouseDown(true);
-    if (is('function', onTouchStart)) onTouchStart(event);
-  }, []);
-  const onMouseDown = React.useCallback(event => {
+    if (is('function', onTouchStart)) onTouchStart(event_2);
+  };
+  const onMouseDown = event_3 => {
     if (!disabled) setMouseDown(true);
-    if (is('function', onMouseDown_)) onMouseDown_(event);
-  }, []);
-  const onMouseEnter = React.useCallback(event => {
+    if (is('function', onMouseDown_)) onMouseDown_(event_3);
+  };
+  const onMouseEnter = event_4 => {
     if (!disabled) setHover(true);
-    if (is('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
+    if (is('function', onMouseEnter_)) onMouseEnter_(event_4);
+  };
+  const onMouseLeave = event_5 => {
     if (!refs.props.current.disabled) setHover(false);
-    if (is('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
+    if (is('function', onMouseLeave_)) onMouseLeave_(event_5);
+  };
   let palette;
   if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
     palette = theme.methods.color(color);

package/esm/NavigationRail/NavigationRail.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "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 { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -59,21 +60,22 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-NavigationRail'
 });
 const NavigationRail = /*#__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?.onesyNavigationRail?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const NavigationBar = React.useMemo(() => theme?.elements?.NavigationBar || NavigationBarElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationRail?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const NavigationBar = theme?.elements?.NavigationBar || NavigationBarElement;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'regular',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
       value,
       valueDefault,
       onChange,
-      justify = 'center',
+      justify: t4,
       border,
       header: header_,
       fixed,
@@ -84,51 +86,78 @@ const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "regular" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const justify = t4 === undefined ? "center" : t4;
   const {
     classes
   } = useStyle();
   const [init, setInit] = React.useState(false);
   const [selected, setSelected] = React.useState(() => {
     const valueNew = valueDefault !== undefined ? valueDefault : value;
-    return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : [];
+    return valueNew !== undefined ? is("array", valueNew) ? valueNew : [valueNew] : [];
   });
   const styles = {
     root: {},
     icon: {}
   };
+  let t5;
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      setInit(true);
+    };
+    t6 = [];
+    $[0] = t5;
+    $[1] = t6;
+  } else {
+    t5 = $[0];
+    t6 = $[1];
+  }
+  React.useEffect(t5, t6);
+  let t7;
+  if ($[2] !== value) {
+    t7 = [value];
+    $[2] = value;
+    $[3] = t7;
+  } else {
+    t7 = $[3];
+  }
   React.useEffect(() => {
-    setInit(true);
-  }, []);
-  React.useEffect(() => {
-    if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
-  }, [value]);
+    if (init && value !== selected) {
+      setSelected(is("array", value) ? value : [value]);
+    }
+  }, t7);
   const onSelect = itemProps => {
-    // Only one item at the time is selectable,
-    // and it cannot be unselected by clicking on the same item
-    const valueNew = [itemProps.value];
-    if (valueNew !== undefined) {
-      // Update inner or controlled
-      if (!props.hasOwnProperty('value')) setSelected(valueNew);
-      if (is('function', onChange)) onChange(valueNew);
+    const valueNew_0 = [itemProps.value];
+    if (valueNew_0 !== undefined) {
+      if (!props.hasOwnProperty("value")) {
+        setSelected(valueNew_0);
+      }
+      if (is("function", onChange)) {
+        onChange(valueNew_0);
+      }
     }
   };
   const header = React.Children.toArray(header_).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
     key: index,
     color: item.props.color !== undefined ? item.props.color : color,
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes(item.type?.displayName) ? 'secondary' : tonal
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ["onesy-Fab"].includes(item.type?.displayName) ? "secondary" : tonal
   }));
-  const children = React.Children.toArray(children_).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
-    key: index
-  }, ['onesy-NavigationItem'].includes(item.type?.displayName) ? {
+  const children = React.Children.toArray(children_).map((item_0, index_0) => /*#__PURE__*/React.cloneElement(item_0, _objectSpread(_objectSpread({
+    key: index_0
+  }, ["onesy-NavigationItem"].includes(item_0.type?.displayName) ? {
     vertical: true
   } : {}), {}, {
-    selected: selected.includes(item.props.value),
+    selected: selected.includes(item_0.props.value),
     onClick: () => {
-      if (!item.props.disabled) {
-        onSelect(item.props);
-
-        // Invoke items on click method
-        if (is('function', item.props.onClick)) item.props.onClick();
+      if (!item_0.props.disabled) {
+        onSelect(item_0.props);
+        if (is("function", item_0.props.onClick)) {
+          item_0.props.onClick();
+        }
       }
     }
   })));
@@ -141,11 +170,11 @@ const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "initial",
     justify: "initial",
     gap: 0,
-    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-root', `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
+    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-root", `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), header && /*#__PURE__*/React.createElement(Line, {
     align: "center",
-    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-header'], classes.header])
+    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-header"], classes.header])
   }, header), children && /*#__PURE__*/React.createElement(NavigationBar, _extends({
     version: version,
     direction: "column",
@@ -154,11 +183,11 @@ const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
     color: color,
     tonal: tonal
   }, NavigationBarProps, {
-    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-main'], NavigationBarProps?.className, classes.main])
+    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-main"], NavigationBarProps?.className, classes.main])
   }), children), border && /*#__PURE__*/React.createElement(Divider, _extends({
     orientation: "vertical"
   }, DividerProps, {
-    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-divider'], DividerProps?.className, classes.divider])
+    className: classNames([staticClassName("NavigationRail", theme) && ["onesy-NavigationRail-divider"], DividerProps?.className, classes.divider])
   })));
 });
 NavigationRail.displayName = 'onesy-NavigationRail';

package/esm/NotFound/NotFound.js

@@ -23,10 +23,10 @@ const useStyle = styleMethod(theme => ({
 const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNotFound?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNotFound?.props?.default), props_);
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       name = l('Page not found'),
       to = '/',
@@ -45,9 +45,9 @@ const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const navigate = isEnvironment('browser') && useNavigate();
-  const onTo = React.useCallback(() => {
+  const onTo = () => {
     if (link) window.open(link, 'blank');else navigate(to);
-  }, [to, link]);
+  };
   return /*#__PURE__*/React.createElement(Section, _extends({
     ref: ref,
     flex: true,

package/esm/NumericTextField/NumericTextField.js

@@ -19,9 +19,9 @@ const useStyle = styleMethod(theme => ({
 });
 const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNumericTextField?.props?.default), props_), [props_]);
-  const AdvancedTextField = React.useMemo(() => theme?.elements?.AdvancedTextField || AdvancedTextFieldElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNumericTextField?.props?.default), props_);
+  const AdvancedTextField = theme?.elements?.AdvancedTextField || AdvancedTextFieldElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       valueDefault,
       value: value_,
@@ -75,10 +75,10 @@ const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       switch (event.key) {
         case 'End':
           if (refs.focus.current && refs.min.current !== undefined) {
-            let valueNew = refs.min.current;
-            if (props.thousand) valueNew = numberWithCommas(valueNew);
-            if (props.prefix !== undefined) valueNew = `${props.prefix}${valueNew}`;
-            onChange(valueNew);
+            let valueNew_0 = refs.min.current;
+            if (props.thousand) valueNew_0 = numberWithCommas(valueNew_0);
+            if (props.prefix !== undefined) valueNew_0 = `${props.prefix}${valueNew_0}`;
+            onChange(valueNew_0);
           }
           return;
         case 'Home':
@@ -111,57 +111,57 @@ const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (value_ !== value) setValue(value_);
     }
   }, [value_]);
-  const onFocus = React.useCallback(event => {
+  const onFocus = event_0 => {
     setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = React.useCallback(event => {
+    if (is('function', onFocus_)) onFocus_(event_0);
+  };
+  const onBlur = event_1 => {
     setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
+    if (is('function', onBlur_)) onBlur_(event_1);
+  };
   const onChange = valueNew_ => {
-    let valueNew = valueNew_;
+    let valueNew_1 = valueNew_;
     const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
     const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew)) valueNew = '';
-    if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew)) {
-      if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-      if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-      valueNew = clamp(+valueNew, min_, max_);
-      if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
-      if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew_1)) valueNew_1 = '';
+    if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew_1)) {
+      if (refs.props.current.prefix !== undefined) valueNew_1 = valueNew_1.replace(refs.props.current.prefix, '');
+      if (refs.props.current.thousand) valueNew_1 = valueNew_1.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+      valueNew_1 = clamp(+valueNew_1, min_, max_);
+      if (refs.props.current.thousand) valueNew_1 = numberWithCommas(valueNew_1);
+      if (refs.props.current.prefix !== undefined) valueNew_1 = `${refs.props.current.prefix}${valueNew_1}`;
     }
-    if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) || (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && clamp(+valueNew_, min_, max_) === +valueNew_) valueNew = valueNew_;
+    if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) || (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && clamp(+valueNew_, min_, max_) === +valueNew_) valueNew_1 = valueNew_;
 
     // Update inner or controlled
-    if (!refs.props.current.hasOwnProperty('value')) setValue(valueNew);
-    if (is('function', refs.onChange.current)) refs.onChange.current(valueNew);
+    if (!refs.props.current.hasOwnProperty('value')) setValue(valueNew_1);
+    if (is('function', refs.onChange.current)) refs.onChange.current(valueNew_1);
   };
   const onIncrement = () => {
-    let valueNew = refs.value.current || '0';
-    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
-    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    valueNew = clamp(+valueNew + incrementValue, min_, max_);
-    if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
-    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    let valueNew_2 = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew_2 = valueNew_2.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew_2 = valueNew_2.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min__0 = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max__0 = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew_2 = clamp(+valueNew_2 + incrementValue, min__0, max__0);
+    if (refs.props.current.thousand) valueNew_2 = numberWithCommas(valueNew_2);
+    if (refs.props.current.prefix !== undefined) valueNew_2 = `${refs.props.current.prefix}${valueNew_2}`;
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_2);
   };
   const onDecrement = () => {
-    let valueNew = refs.value.current || '0';
-    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
-    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    valueNew = clamp(+valueNew - decrementValue, min_, max_);
-    if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
-    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    let valueNew_3 = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew_3 = valueNew_3.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew_3 = valueNew_3.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min__1 = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max__1 = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew_3 = clamp(+valueNew_3 - decrementValue, min__1, max__1);
+    if (refs.props.current.thousand) valueNew_3 = numberWithCommas(valueNew_3);
+    if (refs.props.current.prefix !== undefined) valueNew_3 = `${refs.props.current.prefix}${valueNew_3}`;
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_3);
   };
   const end = [];
   const iconButtonProps = {
@@ -187,14 +187,14 @@ const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onChange: onChange,
     version: version,
     size: size,
-    validate: valueNew_ => {
-      if (valueNew_.startsWith(' ') || valueNew_.endsWith(' ')) return;
-      if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew_)) return true;
-      let valueNew = valueNew_;
-      if (props.prefix !== undefined) valueNew = valueNew_.replace(props.prefix, '');
-      if (props.thousand) valueNew = valueNew.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
-      valueNew = +valueNew;
-      return is('number', valueNew);
+    validate: valueNew__0 => {
+      if (valueNew__0.startsWith(' ') || valueNew__0.endsWith(' ')) return;
+      if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew__0)) return true;
+      let valueNew_4 = valueNew__0;
+      if (props.prefix !== undefined) valueNew_4 = valueNew__0.replace(props.prefix, '');
+      if (props.thousand) valueNew_4 = valueNew_4.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
+      valueNew_4 = +valueNew_4;
+      return is('number', valueNew_4);
     },
     end: end,
     endVerticalAlign: "center",