@onesy/ui-react 1.0.130 → 1.0.132

package/Watch/Watch.js

@@ -1,296 +1,442 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const date_1 = require("@onesy/date");
-const style_react_1 = require("@onesy/style-react");
-const Path_1 = __importDefault(require("../Path"));
-const Type_1 = __importDefault(require("../Type"));
-const Surface_1 = __importDefault(require("../Surface"));
-const RoundMeter_1 = __importDefault(require("../RoundMeter"));
-const Line_1 = __importDefault(require("../Line"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        userSelect: 'none'
-    },
-    timeOfDay: Object.assign(Object.assign({}, theme.typography.values.b2), { textAnchor: 'middle', alignmentBaseline: 'central', dominantBaseline: 'central' }),
-    version_regular: {
-        borderRadius: theme.methods.shape.radius.value('rg', 'px')
-    },
-    version_regular_size_small: {
-        minWidth: '174px',
-        padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(4, 'px')}`
-    },
-    version_regular_size_regular: {
-        minWidth: '204px',
-        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`
-    },
-    version_regular_size_large: {
-        minWidth: '234px',
-        padding: `${theme.methods.space.value(4, 'px')} ${theme.methods.space.value(6, 'px')}`
-    },
-    shadow_version_regular: {
-        boxShadow: [theme.shadows.values.default[6], '!important']
-    },
-    version_analog: {
-        background: 'transparent',
-        '& .onesy-RoundMeter-marks': {
-            opacity: '0.74'
-        }
-    },
-    shadow_version_analog: {
-        '& .onesy-RoundMeter-svg': {
-            filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
-        }
-    },
-    version_minimal: {
-        background: 'transparent'
-    },
-    version_minimal_label: {
-        '&.onesy-RoundMeter-label': Object.assign({}, theme.typography.values.t2)
-    },
-    shadow_version_minimal: {
-        '& .onesy-RoundMeter-svg': {
-            filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
-        }
-    },
-    version_modern: {
-        background: 'transparent'
-    },
-    shadow_version_modern: {
-        '& svg:first-of-type': {
-            filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
-        }
-    },
-    modern_background: {
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: 'auto'
-    },
-    modernDate: {
-        textAnchor: 'middle'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _utils = require("@onesy/utils");
+var _date = require("@onesy/date");
+var _styleReact = require("@onesy/style-react");
+var _Path = _interopRequireDefault(require("../Path"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _RoundMeter = _interopRequireDefault(require("../RoundMeter"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "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; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    userSelect: 'none'
+  },
+  timeOfDay: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
+    textAnchor: 'middle',
+    alignmentBaseline: 'central',
+    dominantBaseline: 'central'
+  }),
+  version_regular: {
+    borderRadius: theme.methods.shape.radius.value('rg', 'px')
+  },
+  version_regular_size_small: {
+    minWidth: '174px',
+    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(4, 'px')}`
+  },
+  version_regular_size_regular: {
+    minWidth: '204px',
+    padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`
+  },
+  version_regular_size_large: {
+    minWidth: '234px',
+    padding: `${theme.methods.space.value(4, 'px')} ${theme.methods.space.value(6, 'px')}`
+  },
+  shadow_version_regular: {
+    boxShadow: [theme.shadows.values.default[6], '!important']
+  },
+  version_analog: {
+    background: 'transparent',
+    '& .onesy-RoundMeter-marks': {
+      opacity: '0.74'
+    }
+  },
+  shadow_version_analog: {
+    '& .onesy-RoundMeter-svg': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
     }
-}), { name: 'onesy-Watch' });
-const Watch = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyWatch) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const RoundMeter = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundMeter) || RoundMeter_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', 
-    // regular, analog, minimal, modern
-    version = 'regular', size = 'regular', start = true, timeVisible = true, timeOfDayVisible = true, dateVisible = true, timeFormatString = `HH:mm:ss`, dateFormatString = `d, DD.MM.YYYY`, renderTime, renderDate, shadow, AnalogProps, RegularProps, MinimalProps, ModernProps, Component = 'div', className, children } = props, other = __rest(props, ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        value: react_1.default.useRef(undefined),
-        requestAnimationFrameID: react_1.default.useRef(undefined)
+  },
+  version_minimal: {
+    background: 'transparent'
+  },
+  version_minimal_label: {
+    '&.onesy-RoundMeter-label': _objectSpread({}, theme.typography.values.t2)
+  },
+  shadow_version_minimal: {
+    '& .onesy-RoundMeter-svg': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+    }
+  },
+  version_modern: {
+    background: 'transparent'
+  },
+  shadow_version_modern: {
+    '& svg:first-of-type': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+    }
+  },
+  modern_background: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: 'auto'
+  },
+  modernDate: {
+    textAnchor: 'middle'
+  }
+}), {
+  name: 'onesy-Watch'
+});
+const Watch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _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.onesyWatch) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Path = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
+  }, [theme]);
+  const RoundMeter = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.RoundMeter) || _RoundMeter.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      // regular, analog, minimal, modern
+      version = 'regular',
+      size = 'regular',
+      start = true,
+      timeVisible = true,
+      timeOfDayVisible = true,
+      dateVisible = true,
+      timeFormatString = `HH:mm:ss`,
+      dateFormatString = `d, DD.MM.YYYY`,
+      renderTime,
+      renderDate,
+      shadow,
+      AnalogProps,
+      RegularProps,
+      MinimalProps,
+      ModernProps,
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    value: _react.default.useRef(undefined),
+    requestAnimationFrameID: _react.default.useRef(undefined)
+  };
+  const [value, setValue] = _react.default.useState(_date.OnesyDate.onesyDate);
+  const update = _react.default.useCallback(() => {
+    setValue(_date.OnesyDate.onesyDate);
+    refs.requestAnimationFrameID.current = requestAnimationFrame(update);
+  }, []);
+  const marks = _react.default.useMemo(() => {
+    return {
+      analog: (0, _utils.unique)([
+      // Hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        height: 8,
+        padding: theme.methods.space.value(0.5, 'px'),
+        position: index * (100 / 12)
+      })),
+      // Minutes
+      ...Array.from({
+        length: 60
+      }).map((item, index) => ({
+        height: 4,
+        padding: theme.methods.space.value(0.5, 'px'),
+        position: index * (100 / 60)
+      }))], 'position')
     };
-    const [value, setValue] = react_1.default.useState(date_1.OnesyDate.onesyDate);
-    const update = react_1.default.useCallback(() => {
-        setValue(date_1.OnesyDate.onesyDate);
-        refs.requestAnimationFrameID.current = requestAnimationFrame(update);
-    }, []);
-    const marks = react_1.default.useMemo(() => {
-        return {
-            analog: (0, utils_1.unique)([
-                // Hours
-                ...(Array.from({ length: 12 }).map((item, index) => ({
-                    height: 8,
-                    padding: theme.methods.space.value(0.5, 'px'),
-                    position: index * (100 / 12)
-                }))),
-                // Minutes
-                ...(Array.from({ length: 60 }).map((item, index) => ({
-                    height: 4,
-                    padding: theme.methods.space.value(0.5, 'px'),
-                    position: index * (100 / 60)
-                }))),
-            ], 'position')
-        };
-    }, []);
-    const labels = react_1.default.useMemo(() => {
-        return {
-            analog: (0, utils_1.unique)([
-                // Hours
-                ...(Array.from({ length: 12 }).map((item, index) => ({
-                    value: index === 0 ? 12 : index,
-                    padding: theme.methods.space.value(1.5, 'px'),
-                    style: {
-                        fontSize: 14
-                    },
-                    position: index * (100 / 12)
-                })))
-            ], 'position'),
-            'minimal': (0, utils_1.unique)([
-                // Hours
-                {
-                    value: 12,
-                    padding: theme.methods.space.value(1, 'px'),
-                    style: {
-                        lineHeight: 1,
-                        letterSpacing: 0,
-                        fontSize: 87,
-                        fontWeight: 900
-                    },
-                    position: 0 * (100 / 12)
-                },
-                {
-                    value: 3,
-                    padding: theme.methods.space.value(1, 'px'),
-                    style: {
-                        lineHeight: 1,
-                        letterSpacing: 0,
-                        fontSize: 87,
-                        fontWeight: 900
-                    },
-                    position: 3 * (100 / 12)
-                },
-                {
-                    value: 6,
-                    padding: theme.methods.space.value(1, 'px'),
-                    style: {
-                        lineHeight: 1,
-                        letterSpacing: 0,
-                        fontSize: 87,
-                        fontWeight: 900
-                    },
-                    position: 6 * (100 / 12)
-                },
-                {
-                    value: 9,
-                    padding: theme.methods.space.value(1, 'px'),
-                    style: {
-                        lineHeight: 1,
-                        letterSpacing: 0,
-                        fontSize: 87,
-                        fontWeight: 900
-                    },
-                    position: 9 * (100 / 12)
-                }
-            ], 'position')
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (!start) {
-            cancelAnimationFrame(refs.requestAnimationFrameID.current);
-        }
-        else {
-            refs.requestAnimationFrameID.current = requestAnimationFrame(update);
+  }, []);
+  const labels = _react.default.useMemo(() => {
+    return {
+      analog: (0, _utils.unique)([
+      // Hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: index === 0 ? 12 : index,
+        padding: theme.methods.space.value(1.5, 'px'),
+        style: {
+          fontSize: 14
+        },
+        position: index * (100 / 12)
+      }))], 'position'),
+      'minimal': (0, _utils.unique)([
+      // Hours
+      {
+        value: 12,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 0 * (100 / 12)
+      }, {
+        value: 3,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 3 * (100 / 12)
+      }, {
+        value: 6,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 6 * (100 / 12)
+      }, {
+        value: 9,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 9 * (100 / 12)
+      }], 'position')
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (!start) {
+      cancelAnimationFrame(refs.requestAnimationFrameID.current);
+    } else {
+      refs.requestAnimationFrameID.current = requestAnimationFrame(update);
+    }
+    return () => {
+      // Clean up
+      cancelAnimationFrame(refs.requestAnimationFrameID.current);
+    };
+  }, [start]);
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: ref,
+    tonal: tonal,
+    color: color,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Watch', theme) && ['onesy-Watch-root', `onesy-Watch-version-${version}`, `onesy-Watch-size-${size}`], className, classes.root, classes[`version_${version.replace('-', '_')}`], classes[`version_${version.replace('-', '_')}_size_${size}`], shadow && classes[`shadow_version_${version.replace('-', '_')}`]])
+  }, other), /*#__PURE__*/_react.default.createElement(Surface, {
+    tonal: tonal,
+    color: color
+  }, ({
+    backgroundColor,
+    palette
+  }) => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, version === 'regular' && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      gap: 0.5,
+      direction: "column",
+      align: "center",
+      justify: "center"
+    }, RegularProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Watch', theme) && ['onesy-Watch-regular'], RegularProps === null || RegularProps === void 0 ? void 0 : RegularProps.className, classes.regular])
+    }), timeVisible && ((0, _utils.is)('function', renderTime) ? renderTime(value) : /*#__PURE__*/_react.default.createElement(Type, {
+      version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3'
+    }, (0, _date.format)(value, timeFormatString, {
+      l
+    }))), dateVisible && ((0, _utils.is)('function', renderDate) ? renderDate(value) : /*#__PURE__*/_react.default.createElement(Type, {
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+      priority: "secondary"
+    }, (0, _date.format)(value, dateFormatString, {
+      l
+    })))), version === 'analog' && /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
+      tonal: tonal,
+      color: color,
+      size: size,
+      marks: marks.analog,
+      labels: labels.analog,
+      background: true
+    }, AnalogProps), timeOfDayVisible && /*#__PURE__*/_react.default.createElement("text", {
+      x: 120,
+      y: 74,
+      stroke: "none",
+      fill: "currentColor",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Watch', theme) && ['onesy-Watch-time-of-day'], classes.timeOfDay]),
+      style: {
+        fontSize: 11
+      }
+    }, (0, _date.format)(value, `A`)), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "rect",
+      value: 100 / 12 * value.hour,
+      x: 120,
+      y: 120 - 5 / 2,
+      height: 5,
+      width: 57,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: 'currentColor'
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "rect",
+      value: 100 / 60 * value.minute,
+      x: 120,
+      y: 120 - 3 / 2,
+      height: 3,
+      width: 105,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: 'currentColor'
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 120 L ${(0, _utils2.angleToCoordinates)(0, 120, 120, 115).x} ${(0, _utils2.angleToCoordinates)(0, 120, 120, 115).y}`,
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'currentColor'
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "circle",
+      r: "4",
+      cx: "120",
+      cy: "120",
+      style: {
+        fill: 'currentColor',
+        stroke: color,
+        strokeWidth: 1
+      }
+    })), version === 'minimal' && /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
+      tonal: tonal,
+      color: color,
+      size: size,
+      labels: labels['minimal'],
+      arcsVisible: false,
+      LabelProps: {
+        className: classes.version_minimal_label,
+        style: {
+          fill: theme.methods.palette.color.value(undefined, 60, true, palette)
         }
-        return () => {
-            // Clean up
-            cancelAnimationFrame(refs.requestAnimationFrameID.current);
-        };
-    }, [start]);
-    return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, tonal: tonal, color: color, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Watch', theme) && [
-                'onesy-Watch-root',
-                `onesy-Watch-version-${version}`,
-                `onesy-Watch-size-${size}`
-            ],
-            className,
-            classes.root,
-            classes[`version_${version.replace('-', '_')}`],
-            classes[`version_${version.replace('-', '_')}_size_${size}`],
-            shadow && classes[`shadow_version_${version.replace('-', '_')}`]
-        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color }, { children: ({ backgroundColor, palette }) => {
-                return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [version === 'regular' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'column', align: 'center', justify: 'center' }, RegularProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Watch', theme) && [
-                                    'onesy-Watch-regular'
-                                ],
-                                RegularProps === null || RegularProps === void 0 ? void 0 : RegularProps.className,
-                                classes.regular
-                            ]) }, { children: [timeVisible && ((0, utils_1.is)('function', renderTime) ? renderTime(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3' }, { children: (0, date_1.format)(value, timeFormatString, { l }) })))), dateVisible && ((0, utils_1.is)('function', renderDate) ? renderDate(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', priority: 'secondary' }, { children: (0, date_1.format)(value, dateFormatString, { l }) }))))] }))), version === 'analog' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, marks: marks.analog, labels: labels.analog, background: true }, AnalogProps, { children: [timeOfDayVisible && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: 120, y: 74, stroke: 'none', fill: 'currentColor', className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Watch', theme) && [
-                                            'onesy-Watch-time-of-day'
-                                        ],
-                                        classes.timeOfDay
-                                    ]), style: {
-                                        fontSize: 11
-                                    } }, { children: (0, date_1.format)(value, `A`) }))), (0, jsx_runtime_1.jsx)(Path, { Component: 'rect', value: (100 / 12) * value.hour, x: 120, y: 120 - (5 / 2), height: 5, width: 57, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: 'currentColor'
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { Component: 'rect', value: (100 / 60) * value.minute, x: 120, y: 120 - (3 / 2), height: 3, width: 105, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: 'currentColor'
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 120 L ${(0, utils_2.angleToCoordinates)(0, 120, 120, 115).x} ${(0, utils_2.angleToCoordinates)(0, 120, 120, 115).y}`, value: (100 / 60) * value.second, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'currentColor'
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '4', cx: '120', cy: '120', style: {
-                                        fill: 'currentColor',
-                                        stroke: color,
-                                        strokeWidth: 1
-                                    } })] }))), version === 'minimal' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, labels: labels['minimal'], arcsVisible: false, LabelProps: {
-                                className: classes.version_minimal_label,
-                                style: {
-                                    fill: theme.methods.palette.color.value(undefined, 60, true, palette)
-                                }
-                            }, background: true }, MinimalProps, { children: [(0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: theme.methods.palette.color.value(undefined, 30, true, palette)
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 118 L 217 118 A 1 1 0 0 1 217 122 L 120 122 A 1 1 0 0 1 120 118`, value: (100 / 60) * value.minute, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: theme.methods.palette.color.value(undefined, 20, true, palette)
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 119.5 L 217 119.5 A 1 1 0 0 1 217 120.5 L 120 120.5 A 1 1 0 0 1 120 119.5`, value: (100 / 60) * value.second, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '3', cx: '120', cy: '120', style: {
-                                        stroke: 'none',
-                                        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
-                                    } })] }))), version === 'modern' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, arcsVisible: false, additional: ((0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: '0 0 240 240', xmlns: 'http://www.w3.org/2000/svg', fill: theme.methods.palette.color.value(undefined, 10, false, palette), className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('Watch', theme) && [
-                                        'onesy-Watch-modern-background'
-                                    ],
-                                    classes.modern_background
-                                ]) }, { children: (0, jsx_runtime_1.jsx)("path", { d: 'M109.976 2.90439C116.096 -0.528799 123.562 -0.528799 129.683 2.90439L143.879 10.8678C146.815 12.5147 150.117 13.3994 153.483 13.4411L169.759 13.6427C176.776 13.7296 183.241 17.4627 186.825 23.496L195.138 37.4906C196.857 40.3849 199.274 42.802 202.168 44.5212L216.163 52.8337C222.196 56.4175 225.929 62.8832 226.016 69.9001L226.218 86.1761C226.26 89.5422 227.144 92.8441 228.791 95.78L236.755 109.976C240.188 116.096 240.188 123.563 236.755 129.683L228.791 143.879C227.144 146.815 226.26 150.117 226.218 153.483L226.016 169.759C225.929 176.776 222.196 183.242 216.163 186.825L202.168 195.138C199.274 196.857 196.857 199.274 195.138 202.168L186.825 216.163C183.241 222.196 176.776 225.929 169.759 226.016L153.483 226.218C150.117 226.26 146.815 227.144 143.879 228.791L129.683 236.755C123.562 240.188 116.096 240.188 109.976 236.755L95.7799 228.791C92.844 227.144 89.5421 226.26 86.1761 226.218L69.9001 226.016C62.8832 225.929 56.4174 222.196 52.8337 216.163L44.5211 202.168C42.802 199.274 40.3848 196.857 37.4906 195.138L23.496 186.825C17.4626 183.242 13.7296 176.776 13.6427 169.759L13.4411 153.483C13.3994 150.117 12.5147 146.815 10.8678 143.879L2.90436 129.683C-0.52883 123.563 -0.528829 116.096 2.90436 109.976L10.8678 95.78C12.5147 92.8441 13.3994 89.5422 13.4411 86.1761L13.6427 69.9001C13.7296 62.8832 17.4626 56.4175 23.496 52.8337L37.4906 44.5212C40.3848 42.802 42.802 40.3849 44.5211 37.4906L52.8337 23.496C56.4174 17.4627 62.8832 13.7296 69.9001 13.6427L86.1761 13.4411C89.5421 13.3994 92.844 12.5147 95.78 10.8678L109.976 2.90439Z' }) }))) }, ModernProps, { children: [(0, jsx_runtime_1.jsx)(Path, Object.assign({ Component: 'g', value: (100 / 60) * value.second, style: {
-                                        transformOrigin: 'center'
-                                    } }, { children: (0, jsx_runtime_1.jsx)("text", Object.assign({ x: 25, y: 130, stroke: 'none', fill: theme.methods.palette.color.value(undefined, 90, false, palette), transform: 'rotate(-90, 25, 120)', className: (0, style_react_1.classNames)([
-                                            (0, utils_2.staticClassName)('Watch', theme) && [
-                                                'onesy-Watch-modern-date'
-                                            ],
-                                            classes.modernDate
-                                        ]), style: {
-                                            fontSize: 19
-                                        } }, { children: (0, date_1.format)(value, `d DD`, { l }) })) })), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: palette[20]
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 194 114 A 1 1 0 0 1 194 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 60) * value.minute, style: {
-                                        transformOrigin: '50% 50%',
-                                        stroke: 'none',
-                                        fill: palette[30]
-                                    } }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '8', cx: '215', cy: '120', value: (100 / 60) * value.second, style: {
-                                        stroke: 'none',
-                                        fill: palette[50],
-                                        transformOrigin: 'center'
-                                    } })] })))] });
-            } })) })));
+      },
+      background: true
+    }, MinimalProps), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 12 * value.hour,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 30, true, palette)
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 118 L 217 118 A 1 1 0 0 1 217 122 L 120 122 A 1 1 0 0 1 120 118`,
+      value: 100 / 60 * value.minute,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 20, true, palette)
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 119.5 L 217 119.5 A 1 1 0 0 1 217 120.5 L 120 120.5 A 1 1 0 0 1 120 119.5`,
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "circle",
+      r: "3",
+      cx: "120",
+      cy: "120",
+      style: {
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
+      }
+    })), version === 'modern' && /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
+      tonal: tonal,
+      color: color,
+      size: size,
+      arcsVisible: false,
+      additional: /*#__PURE__*/_react.default.createElement("svg", {
+        viewBox: "0 0 240 240",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: theme.methods.palette.color.value(undefined, 10, false, palette),
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Watch', theme) && ['onesy-Watch-modern-background'], classes.modern_background])
+      }, /*#__PURE__*/_react.default.createElement("path", {
+        d: "M109.976 2.90439C116.096 -0.528799 123.562 -0.528799 129.683 2.90439L143.879 10.8678C146.815 12.5147 150.117 13.3994 153.483 13.4411L169.759 13.6427C176.776 13.7296 183.241 17.4627 186.825 23.496L195.138 37.4906C196.857 40.3849 199.274 42.802 202.168 44.5212L216.163 52.8337C222.196 56.4175 225.929 62.8832 226.016 69.9001L226.218 86.1761C226.26 89.5422 227.144 92.8441 228.791 95.78L236.755 109.976C240.188 116.096 240.188 123.563 236.755 129.683L228.791 143.879C227.144 146.815 226.26 150.117 226.218 153.483L226.016 169.759C225.929 176.776 222.196 183.242 216.163 186.825L202.168 195.138C199.274 196.857 196.857 199.274 195.138 202.168L186.825 216.163C183.241 222.196 176.776 225.929 169.759 226.016L153.483 226.218C150.117 226.26 146.815 227.144 143.879 228.791L129.683 236.755C123.562 240.188 116.096 240.188 109.976 236.755L95.7799 228.791C92.844 227.144 89.5421 226.26 86.1761 226.218L69.9001 226.016C62.8832 225.929 56.4174 222.196 52.8337 216.163L44.5211 202.168C42.802 199.274 40.3848 196.857 37.4906 195.138L23.496 186.825C17.4626 183.242 13.7296 176.776 13.6427 169.759L13.4411 153.483C13.3994 150.117 12.5147 146.815 10.8678 143.879L2.90436 129.683C-0.52883 123.563 -0.528829 116.096 2.90436 109.976L10.8678 95.78C12.5147 92.8441 13.3994 89.5422 13.4411 86.1761L13.6427 69.9001C13.7296 62.8832 17.4626 56.4175 23.496 52.8337L37.4906 44.5212C40.3848 42.802 42.802 40.3849 44.5211 37.4906L52.8337 23.496C56.4174 17.4627 62.8832 13.7296 69.9001 13.6427L86.1761 13.4411C89.5421 13.3994 92.844 12.5147 95.78 10.8678L109.976 2.90439Z"
+      }))
+    }, ModernProps), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "g",
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement("text", {
+      x: 25,
+      y: 130,
+      stroke: "none",
+      fill: theme.methods.palette.color.value(undefined, 90, false, palette),
+      transform: "rotate(-90, 25, 120)",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Watch', theme) && ['onesy-Watch-modern-date'], classes.modernDate]),
+      style: {
+        fontSize: 19
+      }
+    }, (0, _date.format)(value, `d DD`, {
+      l
+    }))), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 12 * value.hour,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: palette[20]
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      d: `M 120 114 L 194 114 A 1 1 0 0 1 194 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 60 * value.minute,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: palette[30]
+      }
+    }), /*#__PURE__*/_react.default.createElement(Path, {
+      Component: "circle",
+      r: "8",
+      cx: "215",
+      cy: "120",
+      value: 100 / 60 * value.second,
+      style: {
+        stroke: 'none',
+        fill: palette[50],
+        transformOrigin: 'center'
+      }
+    })));
+  }));
 });
 Watch.displayName = 'onesy-Watch';
-exports.default = Watch;
+var _default = exports.default = Watch;