@onesy/ui-react 1.0.172 → 1.0.174

package/Timeline/Timeline.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["orientation", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -23,9 +23,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Timeline'
 });
-const Timeline = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Timeline = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(8);
+  const $ = (0, _compilerRuntime.c)(7);
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTimeline) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
@@ -48,26 +48,26 @@ const Timeline = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     orientation
   }));
   let t5;
-  if ($[0] !== Component || $[1] !== Line || $[2] !== direction || $[3] !== other || $[4] !== ref || $[5] !== t3 || $[6] !== t4) {
-    t5 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== Line || $[2] !== direction || $[3] !== other || $[4] !== t3 || $[5] !== t4) {
+    t5 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
       gap: t2,
       direction: direction,
       Component: Component,
       className: t3
-    }, other), t4);
+    }, other), {}, {
+      children: t4
+    }));
     $[0] = Component;
     $[1] = Line;
     $[2] = direction;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t3;
-    $[6] = t4;
-    $[7] = t5;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
   } else {
-    t5 = $[7];
+    t5 = $[6];
   }
   return t5;
-});
+};
 Timeline.displayName = 'onesy-Timeline';
 var _default = exports.default = Timeline;

package/TimelineItem/TimelineItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -14,6 +13,7 @@ var _Surface = _interopRequireDefault(require("../Surface"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["orientation", "start", "end", "DividerProps", "iconProps", "icon", "Divider", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -74,7 +74,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TimelineItem'
 });
-const TimelineItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TimelineItem = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTimelineItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -110,33 +110,38 @@ const TimelineItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (!Divider_) {
     DividerProps.orientation = orientation;
   }
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     align: "unset",
     justify: "unset",
     direction: direction,
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-root'], className, classes.root, classes[`orientation_${orientation}`]])
-  }, other), start && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-start'], classes.aside, classes.item, classes.start, classes[`aside_orientation_${orientation}`]])
-  }, start), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: lineDirection,
-    align: "center",
-    justify: "flex-start",
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]])
-  }, icon ? icon : /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({}, iconProps, {
-    tonal: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps === null || iconProps === void 0 ? void 0 : iconProps.className, classes.icon])
-  }))), Divider_ ? Divider_ : /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({}, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
-    flex: true
-  }))), (end || children) && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-end'], classes.aside, classes.item, classes.end, classes[`aside_orientation_${orientation}`]])
-  }, end || children));
-});
+  }, other), {}, {
+    children: [start && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-start'], classes.aside, classes.item, classes.start, classes[`aside_orientation_${orientation}`]]),
+      children: start
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 0,
+      direction: lineDirection,
+      align: "center",
+      justify: "flex-start",
+      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]]),
+        children: icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, _objectSpread(_objectSpread({}, iconProps), {}, {
+          tonal: true,
+          className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps === null || iconProps === void 0 ? void 0 : iconProps.className, classes.icon])
+        }))
+      }), Divider_ ? Divider_ : /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({}, DividerProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
+        flex: true
+      }))]
+    }), (end || children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-aside', 'onesy-TimelineItem-item', 'onesy-TimelineItem-end'], classes.aside, classes.item, classes.end, classes[`aside_orientation_${orientation}`]]),
+      children: end || children
+    })]
+  }));
+};
 TimelineItem.displayName = 'onesy-TimelineItem';
 var _default = exports.default = TimelineItem;

package/Timer/Timer.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -26,7 +25,8 @@ var _Surface = _interopRequireDefault(require("../Surface"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "renderValue", "icon", "onStart", "onFlag", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconFlag", "IconStop", "TreeProps", "TooltipProps", "IconButtonProps", "IconProps", "Component", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "renderValue", "icon", "onStart", "onFlag", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconFlag", "IconStop", "TreeProps", "TooltipProps", "IconButtonProps", "IconProps", "Component", "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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -57,7 +57,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Timer'
 });
-const Timer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Timer = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -71,6 +71,7 @@ const Timer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
   const IconButton = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       renderValue,
@@ -188,7 +189,7 @@ const Timer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return valueNew;
   };
   const value_ = status === 'initial' ? '00:00.00' : valueFormat(value);
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
@@ -205,96 +206,138 @@ const Timer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       Component
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-root'], className, classes.root])
-  }, other), icon && /*#__PURE__*/_react.default.createElement(Icon_, (0, _extends2.default)({
-    size: "medium"
-  }, IconProps, {
-    style: _objectSpread({
-      marginBottom: 4
-    }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style)
-  })), (0, _utils.is)('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_react.default.createElement(Type, {
-    version: "h1",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-value'], classes.value])
-  }, value_), /*#__PURE__*/_react.default.createElement(Expand, {
-    in: expand,
-    parent: refs.root.current,
-    onExited: onExited,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-flags-wrapper'], classes.flags_wrapper])
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Surface, {
-    tonal: tonal,
-    color: color
-  }, ({
-    palette
-  }) => {
-    return /*#__PURE__*/_react.default.createElement(Tree, (0, _extends2.default)({
-      openDefault: true,
-      middle: l('Flags'),
-      indicator: true,
-      indicatorPosition: "end",
+  }, other), {}, {
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread(_objectSpread({
+      size: "medium"
+    }, IconProps), {}, {
+      style: _objectSpread({
+        marginBottom: 4
+      }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style)
+    })), (0, _utils.is)('function', renderValue) ? renderValue(value_) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      version: "h1",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-value'], classes.value]),
+      children: value_
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, {
+      in: expand,
       parent: refs.root.current,
-      TreeProps: {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-flags'], classes.flags])
-      }
-    }, TreeProps), flags.map((item_0, index) => /*#__PURE__*/_react.default.createElement(Tree, (0, _extends2.default)({
-      key: index,
-      icon: /*#__PURE__*/_react.default.createElement(IconFlag, {
-        size: "small",
-        color: palette[40]
-      }),
-      middle: /*#__PURE__*/_react.default.createElement(Line, {
-        direction: "row",
-        align: "center",
-        justify: "space-between",
-        className: (0, _styleReact.classNames)([classes.flag])
-      }, /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b2"
-      }, (0, _utils.getLeadingZerosNumber)(index + 1)), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b2",
-        style: {
-          opacity: '0.7'
-        }
-      }, "+", valueFormat(item_0 - (flags[index - 1] || 0))), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b2"
-      }, valueFormat(item_0))),
-      noPadding: true,
-      indicator: true,
-      indicatorPosition: "end"
-    }, TreeProps))));
-  }))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-actions'], classes.actions])
-  }, status === 'initial' && /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Start')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onStart
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStart, null))))), status === 'running' && /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Flag')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onFlag
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconFlag, null))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Pause')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onPause
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Stop')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onStop
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStop, null))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Resume')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onResume
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStart, null)))))));
-});
+      onExited: onExited,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-flags-wrapper'], classes.flags_wrapper]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
+          tonal: tonal,
+          color: color,
+          children: ({
+            palette
+          }) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tree, _objectSpread(_objectSpread({
+              openDefault: true,
+              middle: l('Flags'),
+              indicator: true,
+              indicatorPosition: "end",
+              parent: refs.root.current,
+              TreeProps: {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-flags'], classes.flags])
+              }
+            }, TreeProps), {}, {
+              children: flags.map((item_0, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tree, _objectSpread({
+                icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFlag, {
+                  size: "small",
+                  color: palette[40]
+                }),
+                middle: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                  direction: "row",
+                  align: "center",
+                  justify: "space-between",
+                  className: (0, _styleReact.classNames)([classes.flag]),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b2",
+                    children: (0, _utils.getLeadingZerosNumber)(index + 1)
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+                    version: "b2",
+                    style: {
+                      opacity: '0.7'
+                    },
+                    children: ["+", valueFormat(item_0 - (flags[index - 1] || 0))]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b2",
+                    children: valueFormat(item_0)
+                  })]
+                }),
+                noPadding: true,
+                indicator: true,
+                indicatorPosition: "end"
+              }, TreeProps), index))
+            }));
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Timer', theme) && ['onesy-Timer-actions'], classes.actions]),
+      children: [status === 'initial' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: l('Start')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: onStart
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStart, {})
+            }))
+          }))
+        })
+      }), status === 'running' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: l('Flag')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: onFlag
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFlag, {})
+            }))
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: l('Pause')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: onPause
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPause, {})
+            }))
+          }))]
+        })
+      }), status === 'paused' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: l('Stop')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: onStop
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStop, {})
+            }))
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: l('Resume')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: onResume
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStart, {})
+            }))
+          }))]
+        })
+      })]
+    })]
+  }));
+};
 Timer.displayName = 'onesy-Timer';
 var _default = exports.default = Timer;

package/ToggleButton/ToggleButton.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Chip = _interopRequireDefault(require("../Chip"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["size", "icon", "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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -40,9 +40,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ToggleButton'
 });
-const ToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ToggleButton = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(7);
+  const $ = (0, _compilerRuntime.c)(6);
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyToggleButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Chip = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Chip) || _Chip.default;
@@ -59,9 +59,8 @@ const ToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t1 = true;
   const t2 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ToggleButton", theme) && ["onesy-ToggleButton-root", `onesy-ToggleButton-size-${size}`], className, classes.root, classes[`size_${size}`]]);
   let t3;
-  if ($[0] !== Chip || $[1] !== icon || $[2] !== other || $[3] !== ref || $[4] !== size || $[5] !== t2) {
-    t3 = /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Chip || $[1] !== icon || $[2] !== other || $[3] !== size || $[4] !== t2) {
+    t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread({
       size: size,
       icon: icon,
       noCheckIcon: t1,
@@ -70,14 +69,13 @@ const ToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     $[0] = Chip;
     $[1] = icon;
     $[2] = other;
-    $[3] = ref;
-    $[4] = size;
-    $[5] = t2;
-    $[6] = t3;
+    $[3] = size;
+    $[4] = t2;
+    $[5] = t3;
   } else {
-    t3 = $[6];
+    t3 = $[5];
   }
   return t3;
-});
+};
 ToggleButton.displayName = 'onesy-ToggleButton';
 var _default = exports.default = ToggleButton;

package/ToggleButtons/ToggleButtons.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Buttons = _interopRequireDefault(require("../Buttons"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,9 +21,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ToggleButtons'
 });
-const ToggleButtons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ToggleButtons = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(5);
+  const $ = (0, _compilerRuntime.c)(4);
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyToggleButtons) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Buttons = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Buttons) || _Buttons.default;
@@ -36,9 +36,8 @@ const ToggleButtons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } = useStyle();
   const t0 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ToggleButtons", theme) && ["onesy-ToggleButtons-root"], className, classes.root]);
   let t1;
-  if ($[0] !== Buttons || $[1] !== other || $[2] !== ref || $[3] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement(Buttons, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Buttons || $[1] !== other || $[2] !== t0) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Buttons, _objectSpread({
       className: t0,
       color: "default",
       chip: true,
@@ -46,13 +45,12 @@ const ToggleButtons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, other));
     $[0] = Buttons;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t0;
-    $[4] = t1;
+    $[2] = t0;
+    $[3] = t1;
   } else {
-    t1 = $[4];
+    t1 = $[3];
   }
   return t1;
-});
+};
 ToggleButtons.displayName = 'onesy-ToggleButtons';
 var _default = exports.default = ToggleButtons;