@onesy/ui-react 1.0.163 → 1.0.165

package/ViewSplit/ViewSplit.js

@@ -112,23 +112,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ViewSplit'
 });
 const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
-  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.onesyViewSplit) === 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 IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.default;
-  }, [theme]);
+  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.onesyViewSplit) === 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;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
   const {
       tonal = true,
       color = 'primary',
@@ -226,31 +215,31 @@ const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         } = rect_;
 
         // Value to the precision point value
-        let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-        valueNew = valuePrecision(valueNew);
-        onChange(valueNew);
+        let valueNew_0 = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
+        valueNew_0 = valuePrecision(valueNew_0);
+        onChange(valueNew_0);
       }
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       if (refs.mouseDown.current) {
-        const x = event.touches[0].clientX;
-        const y = event.touches[0].clientY;
-        const rect_ = refs.root.current.getBoundingClientRect();
+        const x_0 = event_0.touches[0].clientX;
+        const y_0 = event_0.touches[0].clientY;
+        const rect__0 = refs.root.current.getBoundingClientRect();
         const {
-          width,
-          height
-        } = rect_;
+          width: width_0,
+          height: height_0
+        } = rect__0;
 
         // Value to the precision point value
-        let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-        valueNew = valuePrecision(valueNew);
-        onChange(valueNew);
+        let valueNew_1 = refs.orientation.current === 'horizontal' ? (x_0 - rect__0.x) / width_0 : (y_0 - rect__0.y) / height_0;
+        valueNew_1 = valuePrecision(valueNew_1);
+        onChange(valueNew_1);
       }
     };
     const method = () => {
       if (refs.root.current) {
-        const rect_ = refs.root.current.getBoundingClientRect();
-        setRect(rect_);
+        const rect__1 = refs.root.current.getBoundingClientRect();
+        setRect(rect__1);
       }
     };
     const observer = new ResizeObserver(method);
@@ -278,71 +267,71 @@ const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (value_ !== value) setValue(value_);
     }
   }, [value_]);
-  const onTouchStart = event => {
-    const x = event.touches[0].clientX;
-    const y = event.touches[0].clientY;
-    const rect_ = refs.root.current.getBoundingClientRect();
+  const onTouchStart = event_1 => {
+    const x_1 = event_1.touches[0].clientX;
+    const y_1 = event_1.touches[0].clientY;
+    const rect__2 = refs.root.current.getBoundingClientRect();
     const {
-      width,
-      height
-    } = rect_;
+      width: width_1,
+      height: height_1
+    } = rect__2;
 
     // Value to the precision point value
-    let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-    valueNew = valuePrecision(valueNew);
-    onChange(valueNew);
+    let valueNew_2 = refs.orientation.current === 'horizontal' ? (x_1 - rect__2.x) / width_1 : (y_1 - rect__2.y) / height_1;
+    valueNew_2 = valuePrecision(valueNew_2);
+    onChange(valueNew_2);
     setMouseDown(true);
   };
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event_2 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_2);
+  };
+  const onBlur = event_3 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onFocusIconButton = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_3);
+  };
+  const onFocusIconButton = event_4 => {
     setFocus(true);
-  }, []);
-  const onBlurIconButton = _react.default.useCallback(event => {
+  };
+  const onBlurIconButton = event_5 => {
     setFocus(false);
-  }, []);
-  const onMouseEnter = _react.default.useCallback(event => {
+  };
+  const onMouseEnter = event_6 => {
     setHover(true);
-    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_6);
+  };
+  const onMouseLeave = event_7 => {
     setHover(false);
     setFocus(false);
-    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onMouseDown = _react.default.useCallback(() => {
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_7);
+  };
+  const onMouseDown = () => {
     setMouseDown(true);
-  }, []);
+  };
   const move = (forward_ = true) => {
     let forward = forward_;
     if (refs.orientation.current === 'horizontal') {
       if (refs.direction.current === 'rtl') forward = !forward;
     }
-    let valueNew = refs.value.current || 0;
-    valueNew = (0, _utils.clamp)(valueNew + (forward ? 1 : -1), 0, 100);
+    let valueNew_3 = refs.value.current || 0;
+    valueNew_3 = (0, _utils.clamp)(valueNew_3 + (forward ? 1 : -1), 0, 100);
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_3);
   };
-  const onKeyDown = _react.default.useCallback(event => {
-    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      if (['Home', 'End'].includes(event.key) || ['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical') {
+  const onKeyDown = event_8 => {
+    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event_8.key)) {
+      if (['Home', 'End'].includes(event_8.key) || ['ArrowLeft', 'ArrowRight'].includes(event_8.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event_8.key) && refs.orientation.current === 'vertical') {
         // Prevent default
-        event.preventDefault();
-        let valueNew;
-        switch (event.key) {
+        event_8.preventDefault();
+        let valueNew_4;
+        switch (event_8.key) {
           case 'Home':
-            valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
-            return onChange(valueNew);
+            valueNew_4 = refs.orientation.current !== 'vertical' ? 0 : 100;
+            return onChange(valueNew_4);
           case 'End':
-            valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
-            return onChange(valueNew);
+            valueNew_4 = refs.orientation.current !== 'vertical' ? 100 : 0;
+            return onChange(valueNew_4);
           case 'ArrowUp':
           case 'ArrowLeft':
             return move();
@@ -354,7 +343,7 @@ const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }
     }
-  }, []);
+  };
   const onChange = valueItem => {
     // Update inner or controlled
     if (!props.hasOwnProperty('value')) setValue(valueItem);
@@ -403,9 +392,9 @@ const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, /*#__PURE__*/_react.default.cloneElement(children[0], {
     style: _objectSpread(_objectSpread({}, styles.startItem), children[0].props.style)
   }))), divider && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
-    onMouseDown: event => {
+    onMouseDown: event_9 => {
       onMouseDown();
-      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event_9);
     },
     orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
   }, DividerProps, {
@@ -416,9 +405,9 @@ const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, SeparatorProps)) || /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
     onFocus: onFocusIconButton,
     onBlur: onBlurIconButton,
-    onMouseDown: event => {
+    onMouseDown: event_10 => {
       onMouseDown();
-      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event_10);
     }
   }, SeparatorProps, IconButtonProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]]),

package/Watch/Watch.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OnesyDate } from '@onesy/date';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IPropsAny } from '../types';
-export type IWatch = Omit<ISurface, 'version'> & {
+export declare type IWatch = Omit<ISurface, 'version'> & {
     version?: 'regular' | 'analog' | 'modern' | 'minimal';
     start?: boolean;
     timeVisible?: boolean;

package/Watch/Watch.js

@@ -92,32 +92,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Watch'
 });
 const Watch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   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 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.onesyWatch) === 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;
+  const Path = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
+  const RoundMeter = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.RoundMeter) || _RoundMeter.default;
   const {
       tonal = true,
       color = 'primary',
@@ -150,10 +133,10 @@ const Watch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     requestAnimationFrameID: _react.default.useRef(undefined)
   };
   const [value, setValue] = _react.default.useState(_date.OnesyDate.onesyDate);
-  const update = _react.default.useCallback(() => {
+  const update = () => {
     setValue(_date.OnesyDate.onesyDate);
     refs.requestAnimationFrameID.current = requestAnimationFrame(update);
-  }, []);
+  };
   const marks = _react.default.useMemo(() => {
     return {
       analog: (0, _utils.unique)([
@@ -168,10 +151,10 @@ const Watch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       // Minutes
       ...Array.from({
         length: 60
-      }).map((item, index) => ({
+      }).map((item_0, index_0) => ({
         height: 4,
         padding: theme.methods.space.value(0.5, 'px'),
-        position: index * (100 / 60)
+        position: index_0 * (100 / 60)
       }))], 'position')
     };
   }, []);
@@ -181,13 +164,13 @@ const Watch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       // Hours
       ...Array.from({
         length: 12
-      }).map((item, index) => ({
-        value: index === 0 ? 12 : index,
+      }).map((item_1, index_1) => ({
+        value: index_1 === 0 ? 12 : index_1,
         padding: theme.methods.space.value(1.5, 'px'),
         style: {
           fontSize: 14
         },
-        position: index * (100 / 12)
+        position: index_1 * (100 / 12)
       }))], 'position'),
       'minimal': (0, _utils.unique)([
       // Hours

package/Weather/Weather.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-export type TWeatherDayTime = 'day' | 'night';
-export type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
-export type TTemperature = number;
-export type IWeather = ISurface & {
+export declare type TWeatherDayTime = 'day' | 'night';
+export declare type TWeather = 'clear' | 'partly clear' | 'rainy' | 'partly rainy' | 'snowy' | 'partly snowy';
+export declare type TTemperature = number;
+export declare type IWeather = ISurface & {
     shadow?: boolean;
     dayTime?: TWeatherDayTime;
     weather?: TWeather;

package/Weather/Weather.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -26,35 +27,76 @@ const _excluded = ["tonal", "color", "style"],
 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 IconWeather = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  var _theme$elements;
+  const $ = (0, _compilerRuntime.c)(14);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const {
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
+  let color_;
+  let other;
+  let style;
+  let tonal;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       tonal,
       color: color_,
       style
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(Surface, {
-    tonal: tonal,
-    color: color_
-  }, ({
-    color,
-    backgroundColor
-  }) => /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-    ref: ref,
-    viewBox: "0 0 177 178",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, other, {
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      color,
-      fill: backgroundColor
-    })
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z"
-  })));
+    } = _props);
+    other = (0, _objectWithoutProperties2.default)(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = color_;
+    $[2] = other;
+    $[3] = style;
+    $[4] = tonal;
+  } else {
+    color_ = $[1];
+    other = $[2];
+    style = $[3];
+    tonal = $[4];
+  }
+  let t0;
+  if ($[5] !== other || $[6] !== ref || $[7] !== style) {
+    t0 = t1 => {
+      const {
+        color,
+        backgroundColor
+      } = t1;
+      return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+        ref: ref,
+        viewBox: "0 0 177 178",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, other, {
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          color,
+          fill: backgroundColor
+        })
+      }), /*#__PURE__*/_react.default.createElement("path", {
+        d: "M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z"
+      }));
+    };
+    $[5] = other;
+    $[6] = ref;
+    $[7] = style;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  let t1;
+  if ($[9] !== Surface || $[10] !== color_ || $[11] !== t0 || $[12] !== tonal) {
+    t1 = /*#__PURE__*/_react.default.createElement(Surface, {
+      tonal: tonal,
+      color: color_
+    }, t0);
+    $[9] = Surface;
+    $[10] = color_;
+    $[11] = t0;
+    $[12] = tonal;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  return t1;
 });
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
@@ -158,27 +200,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Weather'
 });
 const Weather = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
-  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.onesyWeather) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _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.Surface) || _Surface.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 Fade = _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.Fade) || _Fade.default;
-  }, [theme]);
-  const Transitions = _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.Transitions) || _Transitions.default;
-  }, [theme]);
+  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.onesyWeather) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fade) || _Fade.default;
+  const Transitions = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
   const {
       tonal = true,
       color = 'primary',
@@ -240,12 +268,12 @@ const Weather = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }));
   }, [dayTime_]);
   _react.default.useEffect(() => {
-    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values___0 => _objectSpread(_objectSpread({}, values___0), {}, {
       weather: weather_
     }));
   }, [weather_]);
   _react.default.useEffect(() => {
-    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values___1 => _objectSpread(_objectSpread({}, values___1), {}, {
       temperature: temperature_
     }));
   }, [temperature_]);

package/Whiteboard/Whiteboard.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export type IWhiteboardAction = {
+export declare type IWhiteboardAction = {
     v: 'a' | 'r';
     i: IWhiteboardItem | IWhiteboardItem[];
 };
-export type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
-export type IWhiteboardValue = IWhiteboardItem[];
-export type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
+export declare type IWhiteboardTool = 'pen' | 'eraser' | 'pan' | 'zoom' | 'select' | 'circle' | 'rectangle' | 'triangle' | 'line' | 'line-arrow' | 'text' | 'image';
+export declare type IWhiteboardValue = IWhiteboardItem[];
+export declare type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
     valueDefault?: IWhiteboardValue;
     onChange?: (value: IWhiteboardValue) => any;
     minZoom?: number;
@@ -14,7 +14,7 @@ export type IWhiteboard = Omit<IBaseElement, 'onChange'> & {
     grid?: boolean;
     settings?: any;
 };
-export type IWhiteboardItem = {
+export declare type IWhiteboardItem = {
     i: string;
     v?: 'dl' | 'dp' | 'oc' | 'oe' | 'or' | 'os' | 'ot' | 'ote' | 'ol' | 'oa' | 'i' | 't';
     p: number[];