@onesy/ui-react 1.0.163 → 1.0.165

package/esm/RoundProgress/RoundProgress.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "version", "value", "noShrink", "thickness", "rounded", "pathProps", "pathBackgroundProps", "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';
@@ -152,24 +153,32 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-RoundProgress'
 });
 const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(3);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundProgress?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundProgress?.props?.default), props_);
   const {
-      tonal = true,
-      color = 'primary',
-      size = 'regular',
-      version = 'indeterminate',
+      tonal: t0,
+      color: t1,
+      size: t2,
+      version: t3,
       value,
       noShrink,
-      thickness = 2,
-      rounded: rounded_ = true,
-      pathProps = {},
+      thickness: t4,
+      rounded: t5,
+      pathProps: t6,
       pathBackgroundProps,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const version = t3 === undefined ? "indeterminate" : t3;
+  const thickness = t4 === undefined ? 2 : t4;
+  const rounded_ = t5 === undefined ? true : t5;
+  const pathProps = t6 === undefined ? {} : t6;
   const {
     classes
   } = useStyle();
@@ -178,7 +187,9 @@ const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
     root: {},
     circle: {}
   };
-  if (!classes[`size_${size}`]) styles.root.fontSize = is('number', size) ? `${size}px` : size;
+  if (!classes[`size_${size}`]) {
+    styles.root.fontSize = is("number", size) ? `${size}px` : size;
+  }
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
     if (tonal) {
@@ -186,24 +197,34 @@ const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
       styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
     }
   }
-  if (version === 'determinate') {
+  if (version === "determinate") {
     rounded = false;
-    pathProps['pathLength'] = 100;
+    pathProps.pathLength = 100;
     styles.circle.strokeDashoffset = 101 - value;
-
-    // 0%
-    if (styles.circle.strokeDashoffset === 1) styles.circle.strokeDashoffset = 0;
-    other['aria-valuenow'] = value;
-    other['aria-valuemin'] = 0;
-    other['aria-valuemax'] = 100;
-    other['aria-valuetext'] = `${value}%`;
+    if (styles.circle.strokeDashoffset === 1) {
+      styles.circle.strokeDashoffset = 0;
+    }
+    other["aria-valuenow"] = value;
+    other["aria-valuemin"] = 0;
+    other["aria-valuemax"] = 100;
+    other["aria-valuetext"] = `${value}%`;
+  }
+  const t7 = classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-root", `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]]);
+  let t8;
+  if ($[0] !== classes.svg || $[1] !== theme) {
+    t8 = classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-svg"], classes.svg]);
+    $[0] = classes.svg;
+    $[1] = theme;
+    $[2] = t8;
+  } else {
+    t8 = $[2];
   }
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-root', `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]])
+    className: t7
   }, /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 24 24",
-    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-svg'], classes.svg]),
+    className: t8,
     style: _objectSpread(_objectSpread({}, styles.root), style)
   }, other), /*#__PURE__*/React.createElement("circle", _extends({
     fill: "none",
@@ -212,9 +233,9 @@ const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
     cy: "12",
     r: "10"
   }, !rounded && {
-    strokeLinecap: 'butt'
+    strokeLinecap: "butt"
   }, pathBackgroundProps, {
-    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-path-background'], pathBackgroundProps?.className, classes.pathBackground, classes[`path_${version}`]])
+    className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path-background"], pathBackgroundProps?.className, classes.pathBackground, classes[`path_${version}`]])
   })), /*#__PURE__*/React.createElement("circle", _extends({
     fill: "none",
     strokeWidth: thickness,
@@ -222,9 +243,9 @@ const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
     cy: "12",
     r: "10"
   }, !rounded && {
-    strokeLinecap: 'butt'
+    strokeLinecap: "butt"
   }, pathProps, {
-    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-path'], pathProps?.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
+    className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path"], pathProps?.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
     style: _objectSpread(_objectSpread({}, styles.circle), pathProps?.style)
   }))), children);
 });

package/esm/ScatterChart/ScatterChart.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["values", "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 { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -16,10 +17,11 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-ScatterChart'
 });
 const ScatterChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(7);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChart?.props?.default), props_), [props_]);
-  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
-  const ScatterChartItem = React.useMemo(() => theme?.elements?.ScatterChartItem || ScatterChartItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChart?.props?.default), props_);
+  const Chart = theme?.elements?.Chart || ChartElement;
+  const ScatterChartItem = theme?.elements?.ScatterChartItem || ScatterChartItemElement;
   const {
       values,
       className
@@ -28,13 +30,28 @@ const ScatterChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Chart, _extends({
-    ref: ref,
-    values: values,
-    className: classNames([staticClassName('ScatterChart', theme) && ['onesy-ScatterChart-root'], className, classes.root])
-  }, other), is('array', values) && values.map((item, index) => /*#__PURE__*/React.createElement(ScatterChartItem, _extends({
+  const t0 = classNames([staticClassName("ScatterChart", theme) && ["onesy-ScatterChart-root"], className, classes.root]);
+  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/React.createElement(ScatterChartItem, _extends({
     key: index
-  }, item))));
+  }, item)));
+  let t2;
+  if ($[0] !== Chart || $[1] !== other || $[2] !== ref || $[3] !== t0 || $[4] !== t1 || $[5] !== values) {
+    t2 = /*#__PURE__*/React.createElement(Chart, _extends({
+      ref: ref,
+      values: values,
+      className: t0
+    }, other), t1);
+    $[0] = Chart;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = values;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 });
 ScatterChart.displayName = 'onesy-ScatterChart';
 export default ScatterChart;

package/esm/ScatterChartItem/ScatterChartItem.js

@@ -27,10 +27,10 @@ const useStyle = styleMethod(theme => ({
 });
 const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChartItem?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChartItem?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Path = theme?.elements?.Path || PathElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color = 'primary',
@@ -66,13 +66,13 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [animate_, animateTimeout_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [animate_, animateTimeout_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.path.current
     });
   });
@@ -84,7 +84,7 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = React.useCallback(() => {
+  const LegendItem = () => {
     return /*#__PURE__*/React.createElement(Line, _extends({
       gap: 1,
       direction: "row",
@@ -99,7 +99,7 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }), /*#__PURE__*/React.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -124,10 +124,10 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       });
       const element = /*#__PURE__*/React.createElement("g", {
         ref: refs.path
-      }, values_.map((item, index) => /*#__PURE__*/React.createElement(Path, _extends({
+      }, values_.map((item_0, index) => /*#__PURE__*/React.createElement(Path, _extends({
         key: index,
-        cx: item[0],
-        cy: item[1],
+        cx: item_0[0],
+        cy: item_0[1],
         r: 4,
         fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
         stroke: "none"
@@ -163,7 +163,7 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setValue(element);
     }
   };
-  const initMethod = React.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -181,7 +181,7 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   React.useEffect(() => {
     make();
     initMethod();

package/esm/ScreenCapture/ScreenCapture.js

@@ -38,14 +38,14 @@ const useStyle = styleMethod(theme => ({
 const ScreenCapture = /*#__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?.onesyScreenCapture?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const ImageCrop = React.useMemo(() => theme?.elements?.ImageCrop || ImageCropElement, [theme]);
-  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScreenCapture?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const TextField = theme?.elements?.TextField || TextFieldElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const ImageCrop = theme?.elements?.ImageCrop || ImageCropElement;
+  const Portal = theme?.elements?.Portal || PortalElement;
   const {
       tonal = true,
       color = 'primary',
@@ -99,12 +99,12 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
   });
   refs.canvas.current = canvas;
   refs.canvasSelectorValue.current = canvasSelectorValue;
-  const onInit = React.useCallback(() => {
+  const onInit = () => {
     const value = !(touch || isOS('mobile'));
     setInit(true);
     setSupported(value);
     if (is('function', onInit_)) onInit_(value);
-  }, [touch, onInit_]);
+  };
   React.useEffect(() => {
     const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     const method = event => {
@@ -157,12 +157,12 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   }, [name_]);
   React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     if (canvas) {
-      rootDocument.body.style.overflow = 'hidden';
+      rootDocument_0.body.style.overflow = 'hidden';
     } else {
       setCanvasSelectorValue(false);
-      if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
+      if (rootDocument_0.body.style.overflow === 'hidden') rootDocument_0.body.style.removeProperty('overflow');
     }
   }, [canvas]);
   const onChange = value_ => {
@@ -170,8 +170,8 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setName(value_);
     if (is('function', onChangeName)) onChangeName(value_);
   };
-  const trackToValue = React.useCallback(async (track, version = 'canvas') => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+  const trackToValue = async (track, version = 'canvas') => {
+    const rootDocument_1 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     const canvasElement = document.createElement('canvas');
     const {
       width,
@@ -181,7 +181,7 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     canvasElement.height = height || window.innerHeight;
 
     // Hide elements
-    const elements = Array.from(rootDocument.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
+    const elements = Array.from(rootDocument_1.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
       if (element.parentElement.classList.contains('onesy-Move-root')) return element.parentElement;
       return element;
     });
@@ -194,18 +194,18 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     canvasElement.getContext('2d').drawImage(refs.element.current, 0, 0);
 
     // Unhide the elements
-    elements.forEach(item => item.style.removeProperty('visibility'));
+    elements.forEach(item_0 => item_0.style.removeProperty('visibility'));
     if (version === 'canvas') return canvasElement;
     const image = canvasElement.toDataURL(type, quality);
     return image;
-  }, [type, quality]);
-  const make = React.useCallback(async (version = 'image', options = {}) => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    refs.element.current = rootDocument.createElement('video');
+  };
+  const make = async (version_0 = 'image', options = {}) => {
+    const rootDocument_2 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    refs.element.current = rootDocument_2.createElement('video');
     let tracks;
     const cleanUp = () => {
       // Stop tracks
-      (tracks || []).forEach(item => item.stop());
+      (tracks || []).forEach(item_1 => item_1.stop());
 
       // Unload the element
       refs.element.current = undefined;
@@ -220,34 +220,34 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // Required to work
       await refs.element.current.play();
       tracks = mediaStream.getVideoTracks();
-      const track = tracks[0];
-      const value = await trackToValue(track, version);
+      const track_0 = tracks[0];
+      const value_0 = await trackToValue(track_0, version_0);
 
       // Clean up
       cleanUp();
-      return value;
+      return value_0;
     } catch (error) {
       console.log('ScreenCapture make', error);
 
       // Clean up
       cleanUp();
     }
-  }, []);
-  const onView = React.useCallback(async event => {
+  };
+  const onView = async event_0 => {
     setLoading(items => [...items, 'view']);
     try {
-      const image = await make();
-      download(name, image);
-    } catch (error) {
-      console.log('onView', error);
+      const image_0 = await make();
+      download(name, image_0);
+    } catch (error_0) {
+      console.log('onView', error_0);
     }
-    setLoading(items => items.filter(item => item !== 'view'));
-    setDone(items => [...items, 'view']);
+    setLoading(items_0 => items_0.filter(item_2 => item_2 !== 'view'));
+    setDone(items_1 => [...items_1, 'view']);
     setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'view'));
+      setDone(items_2 => items_2.filter(item_3 => item_3 !== 'view'));
     }, 1400);
-    if (is('function', onView_)) onView_(event);
-  }, [name, make]);
+    if (is('function', onView_)) onView_(event_0);
+  };
 
   // const onEntirePage = async (event: React.MouseEvent<any>) => {
   //   setLoading(items => [...items, 'entirePage']);
@@ -282,44 +282,44 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
   //   if (is('function', onEntirePage_)) onEntirePage_(event);
   // };
 
-  const onFree = async event => {
-    setLoading(items => [...items, 'free']);
+  const onFree = async event_1 => {
+    setLoading(items_3 => [...items_3, 'free']);
 
     // Update canvas
     try {
       const valueCanvas = await make('canvas');
       setCanvas(valueCanvas);
-    } catch (error) {
-      console.log('onFree', error);
+    } catch (error_1) {
+      console.log('onFree', error_1);
     }
-    setLoading(items => items.filter(item => item !== 'free'));
-    if (is('function', onFree_)) onFree_(event);
+    setLoading(items_4 => items_4.filter(item_4 => item_4 !== 'free'));
+    if (is('function', onFree_)) onFree_(event_1);
   };
-  const onFreeSave = event => {
+  const onFreeSave = event_2 => {
     // Crop the canvas
-    const valueCanvas = canvasCrop(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
+    const valueCanvas_0 = canvasCrop(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
 
     // Download the image from canvas datauri
     // of the image type and quality, name
-    const uri = valueCanvas.toDataURL(type, quality);
+    const uri = valueCanvas_0.toDataURL(type, quality);
     download(name, uri, type);
 
     // Clear the image
     setCanvas('');
-    setDone(items => [...items, 'free']);
+    setDone(items_5 => [...items_5, 'free']);
     setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'free'));
+      setDone(items_6 => items_6.filter(item_5 => item_5 !== 'free'));
     }, 1400);
-    if (is('function', onFreeSave_)) onFreeSave_(event);
+    if (is('function', onFreeSave_)) onFreeSave_(event_2);
   };
-  const onFreeClose = event => {
+  const onFreeClose = event_3 => {
     // Clear the image
     setCanvas('');
-    if (is('function', onFreeClose_)) onFreeClose_(event);
+    if (is('function', onFreeClose_)) onFreeClose_(event_3);
   };
-  const onImageCropSelectorChange = React.useCallback(values => {
+  const onImageCropSelectorChange = values => {
     setCanvasSelectorValue(values);
-  }, []);
+  };
   const iconButtonProps = {
     tonal,
     color: 'inherit',
@@ -340,11 +340,11 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (!supported) return null;
   const rootDocumentElement = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_6 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_6);else ref.current = item_6;
       }
-      refs.root.current = item;
+      refs.root.current = item_6;
     },
     id: "onesy-screen-capture",
     tonal: tonal,
@@ -374,7 +374,7 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }) : /*#__PURE__*/React.createElement(IconView, null))), free && /*#__PURE__*/React.createElement(Tooltip, _extends({
     name: canvas ? l('Save') : l('Free form')
   }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: event => canvas ? onFreeSave(event) : onFree(event),
+    onClick: event_4 => canvas ? onFreeSave(event_4) : onFree(event_4),
     loading: loading.includes('free'),
     disabled: done.includes('free')
   }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/React.createElement(IconDoneAnimated, {

package/esm/Section/Section.js

@@ -228,10 +228,10 @@ const useStyle = styleMethod(theme => ({
 });
 const Section = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySection?.props?.default), props_), props_?.AdditionalProps), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Reveal = React.useMemo(() => theme?.elements?.Reveal || RevealElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySection?.props?.default), props_), props_?.AdditionalProps);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Reveal = theme?.elements?.Reveal || RevealElement;
   const {
       themed = true,
       title: title_,
@@ -270,13 +270,13 @@ const Section = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -330,9 +330,9 @@ const Section = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let styleOverlay = {};
   if (overlay) {
-    const palette = theme.palette.color[overlay] || theme.methods.color(overlay);
+    const palette_0 = theme.palette.color[overlay] || theme.methods.color(overlay);
     styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
-      backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+      backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette_0), 0.74) : palette_0?.main
     });
   }
   const urlVideo = backgroundVideo?.url || backgroundVideo?.urlSmall || (is('string', backgroundVideo) ? backgroundVideo : '');
@@ -343,11 +343,11 @@ const Section = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   if (show !== undefined && !show) return null;
   return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 4,
     direction: "column",

package/esm/SectionAction/SectionAction.js

@@ -19,9 +19,9 @@ const useStyle = styleMethod(theme => ({
 const Element = /*#__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?.onesySectionAction?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionAction?.props?.default), props_);
+  const Section = theme?.elements?.Section || SectionElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       size = 'regular',
       text,

package/esm/SectionBoxes/SectionBoxes.js

@@ -72,11 +72,11 @@ const useStyle = styleMethod(theme => ({
 const Element = /*#__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?.onesySectionBoxes?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  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?.onesySectionBoxes?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       size = 'regular',
       values: values_ = [],
@@ -96,7 +96,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
   // Max 4
   const values = values_?.slice(0, 4);
-  const getItem = React.useCallback((item, index) => {
+  const getItem = (item, index) => {
     let styleBackground = {};
     const themed = [undefined, true].includes(item.themed);
     if (item.backgroundColor) {
@@ -130,9 +130,9 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     let styleOverlay = {};
     if (item.overlay) {
-      const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
+      const palette_0 = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
       styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
-        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette_0), 0.74) : palette_0?.main
       });
     }
     const urlVideo = item.backgroundVideo?.url || item.backgroundVideo?.urlSmall || (is('string', item.backgroundVideo) ? item.backgroundVideo : '');
@@ -192,13 +192,13 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, item.propsButton, {
       className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-button'], item.propsButton?.className, classes.button])
     }), item.buttonText || l('Click here'))));
-  }, [theme, size]);
+  };
   return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     maxWidth: false,
     padding: !values?.length,
@@ -213,7 +213,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     } : 'row'
   }, ItemsProps, {
     className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-items'], ItemsProps?.className, classes.items])
-  }), values?.map((item, index) => getItem(item, index))));
+  }), values?.map((item_1, index_0) => getItem(item_1, index_0))));
 });
 Element.displayName = 'onesy-SectionBoxes';
 export default Element;