@onesy/ui-react 1.0.163 → 1.0.165

package/esm/ColumnChart/ColumnChart.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 { clamp, is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -16,10 +17,11 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-ColumnChart'
 });
 const ColumnChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(9);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColumnChart?.props?.default), props_), [props_]);
-  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
-  const ColumnChartItem = React.useMemo(() => theme?.elements?.ColumnChartItem || ColumnChartItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColumnChart?.props?.default), props_);
+  const Chart = theme?.elements?.Chart || ChartElement;
+  const ColumnChartItem = theme?.elements?.ColumnChartItem || ColumnChartItemElement;
   const {
       values,
       className
@@ -29,22 +31,47 @@ const ColumnChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const [rects, setRects] = React.useState();
-  const onUpdateRects = valueNew => {
-    setRects(valueNew);
-  };
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = valueNew => {
+      setRects(valueNew);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onUpdateRects = t0;
   const wrapperRect = rects?.wrapper;
   const widthItem = wrapperRect ? clamp(wrapperRect?.width / (values.length * 2), undefined, 40) : undefined;
-  return /*#__PURE__*/React.createElement(Chart, _extends({
-    ref: ref,
-    values: values,
-    pointsVisibility: "hidden",
-    elementTooltip: true,
-    onUpdateRects: onUpdateRects,
-    className: classNames([staticClassName('ColumnChart', theme) && ['onesy-ColumnChart-root'], className, classes.root])
-  }, other), is('array', values) && values.map((item, index) => /*#__PURE__*/React.createElement(ColumnChartItem, _extends({
+  const t1 = "hidden";
+  const t2 = true;
+  const t3 = classNames([staticClassName("ColumnChart", theme) && ["onesy-ColumnChart-root"], className, classes.root]);
+  const t4 = is("array", values) && values.map((item, index) => /*#__PURE__*/React.createElement(ColumnChartItem, _extends({
     key: index,
     width: widthItem
-  }, item))));
+  }, item)));
+  let t5;
+  if ($[1] !== Chart || $[2] !== onUpdateRects || $[3] !== other || $[4] !== ref || $[5] !== t3 || $[6] !== t4 || $[7] !== values) {
+    t5 = /*#__PURE__*/React.createElement(Chart, _extends({
+      ref: ref,
+      values: values,
+      pointsVisibility: t1,
+      elementTooltip: t2,
+      onUpdateRects: onUpdateRects,
+      className: t3
+    }, other), t4);
+    $[1] = Chart;
+    $[2] = onUpdateRects;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = values;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
 });
 ColumnChart.displayName = 'onesy-ColumnChart';
 export default ColumnChart;

package/esm/ColumnChartItem/ColumnChartItem.js

@@ -26,10 +26,10 @@ const useStyle = styleMethod(theme => ({
 });
 const ColumnChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColumnChartItem?.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?.onesyColumnChartItem?.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 ColumnChartItem = /*#__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 ColumnChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = React.useCallback(legendItemProps => {
+  const LegendItem = legendItemProps => {
     return /*#__PURE__*/React.createElement(Line, _extends({
       gap: 1,
       direction: "row",
@@ -99,7 +99,7 @@ const ColumnChartItem = /*#__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
@@ -156,7 +156,7 @@ const ColumnChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setValue(element);
     }
   };
-  const initMethod = React.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -174,7 +174,7 @@ const ColumnChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   React.useEffect(() => {
     make();
     initMethod();

package/esm/Confirm/Confirm.js

@@ -41,14 +41,14 @@ const useStyle = styleMethod(theme => ({
 const Confirm = /*#__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?.onesyConfirm?.props?.default), props_), [props_]);
-  const ModalHeader = React.useMemo(() => theme?.elements?.ModalHeader || ModalHeaderElement, [theme]);
-  const ModalFooter = React.useMemo(() => theme?.elements?.ModalFooter || ModalFooterElement, [theme]);
-  const ModalTitle = React.useMemo(() => theme?.elements?.ModalTitle || ModalTitleElement, [theme]);
-  const ModalMain = React.useMemo(() => theme?.elements?.ModalMain || ModalMainElement, [theme]);
-  const ModalText = React.useMemo(() => theme?.elements?.ModalText || ModalTextElement, [theme]);
-  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyConfirm?.props?.default), props_);
+  const ModalHeader = theme?.elements?.ModalHeader || ModalHeaderElement;
+  const ModalFooter = theme?.elements?.ModalFooter || ModalFooterElement;
+  const ModalTitle = theme?.elements?.ModalTitle || ModalTitleElement;
+  const ModalMain = theme?.elements?.ModalMain || ModalMainElement;
+  const ModalText = theme?.elements?.ModalText || ModalTextElement;
+  const Modal = theme?.elements?.Modal || ModalElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       throwError,
       onOpen,
@@ -71,7 +71,7 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   };
   refs.props.current = props;
-  const open = React.useCallback(value => {
+  const open = value => {
     if (!openModal) {
       refs.modal.current = _objectSpread({}, value);
 
@@ -91,8 +91,8 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onOpen)) onOpen();
       return promise;
     }
-  }, [openModal, onOpen]);
-  const close = React.useCallback((confirm = false) => {
+  };
+  const close = (confirm = false) => {
     if (openModal) {
       setOpenModal(false);
       if (is('function', onClose)) onClose();
@@ -102,7 +102,7 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.promise.resolve.current = undefined;
       refs.promise.reject.current = undefined;
     }
-  }, [openModal, onClose]);
+  };
   const _ref = refs.modal.current || {},
     {
       name,

package/esm/Container/Container.js

@@ -83,8 +83,8 @@ const useStyle = styleMethod(theme => ({
 });
 const Container = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyContainer?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyContainer?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
       alignment: alignment_,
       paddingVertical: paddingVertical_,
@@ -107,13 +107,13 @@ const Container = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [alignment_, paddingVertical_, paddingHorizontal_, fullWidth_, 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);
   }, [alignment_, paddingVertical_, paddingHorizontal_, fullWidth_, 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
     });
   });
@@ -129,11 +129,11 @@ const Container = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (!['both', 'start', 'end', 'none'].includes(paddingHorizontal)) styles.root.paddingInline = paddingHorizontal;
   if (!['both', 'start', 'end', 'none'].includes(paddingVertical)) styles.root.paddingBlock = paddingVertical;
   return /*#__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: 0,
     direction: "row",

package/esm/CookieBanner/CookieBanner.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["name", "description", "size", "startActions", "endActions", "onReject", "onAllow", "in", "TransitionElement", "noTransition", "MainProps", "NameProps", "DescriptionProps", "ButtonProps", "RejectButtonProps", "AllowButtonProps", "TransitionProps", "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 { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -37,24 +38,25 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-CookieBanner'
 });
 const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(10);
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBanner?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [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?.onesyBanner?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Slide = theme?.elements?.Slide || SlideElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       name,
       description,
-      size = 'regular',
+      size: t0,
       startActions,
       endActions,
       onReject,
       onAllow,
       in: inProp,
-      TransitionElement: TransitionElementProps = Slide,
+      TransitionElement: t1,
       noTransition,
       MainProps,
       NameProps,
@@ -67,6 +69,8 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const size = t0 === undefined ? "regular" : t0;
+  const TransitionElementProps = t1 === undefined ? Slide : t1;
   const {
     classes
   } = useStyle();
@@ -77,6 +81,52 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const buttonProps = _objectSpread({
     size
   }, ButtonProps);
+  let t2;
+  if ($[0] !== l) {
+    t2 = l("Cookie Banner");
+    $[0] = l;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = classNames([staticClassName("CookieBanner", theme) && ["onesy-CookieBanner-root", `onesy-CookieBanner-size-${size}`], className, classes.root, classes[`size_${size}`]]);
+  const t4 = classNames([staticClassName("CookieBanner", theme) && ["onesy-CookieBanner-main"], MainProps?.className, classes.main]);
+  const t5 = 0.25;
+  const t6 = is("string", name) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === "large" ? "t1" : size === "regular" ? "t2" : "t3",
+    weight: 500
+  }, NameProps), name) : name;
+  const t7 = is("string", description) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === "large" ? "b1" : size === "regular" ? "b2" : "b3"
+  }, DescriptionProps), description) : description;
+  let t8;
+  if ($[2] !== Line || $[3] !== t6 || $[4] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(Line, {
+      gap: t5
+    }, t6, t7);
+    $[2] = Line;
+    $[3] = t6;
+    $[4] = t7;
+    $[5] = t8;
+  } else {
+    t8 = $[5];
+  }
+  let t9;
+  if ($[6] !== l) {
+    t9 = l("Reject All");
+    $[6] = l;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+  let t10;
+  if ($[8] !== l) {
+    t10 = l("Accept All");
+    $[8] = l;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
   return /*#__PURE__*/React.createElement(TransitionElement, WrapperProps, /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
     gap: 1.5,
@@ -85,8 +135,8 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Surface,
     color: "default",
     role: "region",
-    "aria-label": l('Cookie Banner'),
-    className: classNames([staticClassName('CookieBanner', theme) && ['onesy-CookieBanner-root', `onesy-CookieBanner-size-${size}`], className, classes.root, classes[`size_${size}`]])
+    "aria-label": t2,
+    className: t3
   }, other), /*#__PURE__*/React.createElement(Line, _extends({
     gap: 1.5,
     direction: "row",
@@ -95,26 +145,19 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
     justify: "space-between",
     fullWidth: true
   }, MainProps, {
-    className: classNames([staticClassName('CookieBanner', theme) && ['onesy-CookieBanner-main'], MainProps?.className, classes.main])
-  }), /*#__PURE__*/React.createElement(Line, {
-    gap: 0.25
-  }, is('string', name) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3',
-    weight: 500
-  }, NameProps), name) : name, is('string', description) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, DescriptionProps), description) : description), /*#__PURE__*/React.createElement(Line, {
+    className: t4
+  }), t8, /*#__PURE__*/React.createElement(Line, {
     gap: 1,
     direction: "row",
     align: "center"
   }, startActions, /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onReject,
     color: "default"
-  }, buttonProps, RejectButtonProps), l('Reject All')), /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps, RejectButtonProps), t9), /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onAllow,
     color: "primary",
     version: "filled"
-  }, buttonProps, AllowButtonProps), l('Accept All')), endActions))));
+  }, buttonProps, AllowButtonProps), t10), endActions))));
 });
 CookieBanner.displayName = 'onesy-CookieBanner';
 export default CookieBanner;

package/esm/Countdown/Countdown.js

@@ -88,16 +88,16 @@ const useStyle = styleMethod(theme => ({
 const Countdown = /*#__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?.onesyCountdown?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const NumericTextField = React.useMemo(() => theme?.elements?.NumericTextField || NumericTextFieldElement, [theme]);
-  const RoundProgress = React.useMemo(() => theme?.elements?.RoundProgress || RoundProgressElement, [theme]);
-  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCountdown?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const NumericTextField = theme?.elements?.NumericTextField || NumericTextFieldElement;
+  const RoundProgress = theme?.elements?.RoundProgress || RoundProgressElement;
+  const LinearProgress = theme?.elements?.LinearProgress || LinearProgressElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       tonal = true,
       color = 'primary',
@@ -169,7 +169,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setValue(refs.valuePaused.current - (OnesyDate.milliseconds - refs.start.current));
     refs.animationFrame.current = requestAnimationFrame(update);
   };
-  const onStart = React.useCallback(event => {
+  const onStart = event => {
     refs.total.current = refs.valuePaused.current = (refs.values.current.hours || 0) * 60 ** 2 * 1e3 + (refs.values.current.minutes || 0) * 60 ** 1 * 1e3 + (refs.values.current.seconds || 0) * 1e3;
     setValue(refs.valuePaused.current);
     setStatus('running');
@@ -178,33 +178,33 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.animationFrame.current = requestAnimationFrame(update);
     }, 14);
     if (is('function', onStart_)) onStart_(event);
-  }, []);
-  const onPause = React.useCallback(event => {
+  };
+  const onPause = event_0 => {
     clear();
 
     // Remember previous value
     refs.valuePaused.current = refs.value.current;
     setStatus('paused');
-    if (is('function', onPause_)) onPause_(event);
-  }, []);
-  const onStop = React.useCallback(event => {
+    if (is('function', onPause_)) onPause_(event_0);
+  };
+  const onStop = event_1 => {
     clear();
     refs.start.current = 0;
     refs.valuePaused.current = 0;
     refs.value.current = 0;
     setStatus('initial');
     setValue(0);
-    if (is('function', onStop_)) onStop_(event);
-  }, []);
-  const onResume = React.useCallback(event => {
+    if (is('function', onStop_)) onStop_(event_1);
+  };
+  const onResume = event_2 => {
     // Update start, valuePaused value
     refs.start.current = OnesyDate.milliseconds;
 
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
-    if (is('function', onResume_)) onResume_(event);
-  }, []);
+    if (is('function', onResume_)) onResume_(event_2);
+  };
   const IconProps = _objectSpread({}, IconProps_);
   const TooltipProps = _objectSpread({
     portal: true,
@@ -276,7 +276,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     min: 0,
     max: 23,
     value: values.hours,
-    onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew)
+    onChange: valueNew_0 => updateValues('hours', !valueNew_0 ? 0 : valueNew_0)
   }, NumericTextFieldProps, {
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
   })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
@@ -284,7 +284,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     min: 0,
     max: 59,
     value: values.minutes,
-    onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew)
+    onChange: valueNew_1 => updateValues('minutes', !valueNew_1 ? 0 : valueNew_1)
   }, NumericTextFieldProps, {
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
   })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
@@ -292,7 +292,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     min: 0,
     max: 59,
     value: values.seconds,
-    onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew)
+    onChange: valueNew_2 => updateValues('seconds', !valueNew_2 ? 0 : valueNew_2)
   }, NumericTextFieldProps, {
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
   })))), status !== 'initial' && ['regular', 'linear'].includes(version) && /*#__PURE__*/React.createElement(Fade, {