@onesy/ui-react 1.0.130 → 1.0.132

package/Watch/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Watch_1 = require("./Watch");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Watch_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Watch.default;
+  }
+});
+var _Watch = _interopRequireDefault(require("./Watch"));

package/Weather/Weather.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-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 & {
+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 & {
     shadow?: boolean;
     dayTime?: TWeatherDayTime;
     weather?: TWeather;

package/Weather/Weather.js

@@ -1,254 +1,301 @@
 "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 style_react_1 = require("@onesy/style-react");
-const IconMaterialCircleW100Filled_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCircleW100Filled"));
-const IconMaterialNightlightW100Filled_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100Filled"));
-const IconMaterialCloudW100Filled_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100Filled"));
-const IconMaterialRainyW100Filled_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialRainyW100Filled"));
-const IconMaterialCloudySnowingW100Filled_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudySnowingW100Filled"));
-const Surface_1 = __importDefault(require("../Surface"));
-const Type_1 = __importDefault(require("../Type"));
-const Fade_1 = __importDefault(require("../Fade"));
-const Transitions_1 = __importDefault(require("../Transitions"));
-const utils_2 = require("../utils");
-const IconWeather = react_1.default.forwardRef((props, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    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 { tonal, color: color_, style } = props, other = __rest(props, ["tonal", "color", "style"]);
-    return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color_ }, { children: ({ color, backgroundColor }) => ((0, jsx_runtime_1.jsx)("svg", Object.assign({ ref: ref, viewBox: '0 0 177 178', xmlns: 'http://www.w3.org/2000/svg' }, other, { style: Object.assign(Object.assign({}, style), { color, fill: backgroundColor }) }, { children: (0, jsx_runtime_1.jsx)("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' }) }))) })));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        aspectRatio: '1',
-        width: '100vw',
-        '&.onesy-Surface-root': {
-            background: 'transparent'
-        }
-    },
-    text: {
-        position: 'absolute',
-        textAlign: 'center',
-        fontWeight: '500',
-        lineHeight: '1',
-        userSelect: 'none'
-    },
-    text_regular: {
-        top: '22%',
-        width: '100%',
-        paddingLeft: '30%',
-        paddingRight: '11%',
-        fontSize: '34%'
-    },
-    text_large: {
-        top: '22%',
-        width: '100%',
-        paddingLeft: '27%',
-        paddingRight: '11%',
-        fontSize: '30%'
-    },
-    icon_background: {
-        '&.onesy-Icon-root': {
-            width: '100%',
-            height: 'auto'
-        }
-    },
-    icon_background_shadow: {
-        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%))`
-    },
-    icon_dayTime: {
-        '&.onesy-Icon-root': {
-            position: 'absolute',
-            zIndex: '1',
-            bottom: '21%',
-            width: '40% !important',
-            height: 'auto',
-            left: '13%'
-        }
-    },
-    icon_dayTime_day: {
-        '&.onesy-Icon-root': {
-            color: '#fcc21d'
-        }
-    },
-    icon_dayTime_night: {
-        '&.onesy-Icon-root': {
-            color: '#dfe0e2'
-        }
-    },
-    icon_weather: {
-        position: 'absolute',
-        width: '40% !important',
-        height: 'auto',
-        zIndex: '4'
-    },
-    icon_arrangement_regular: {
-        bottom: '22%',
-        left: '15%',
-    },
-    icon_arrangement_pair: {
-        bottom: '8%',
-        left: '25%',
-        opacity: '0.94 !important'
-    },
-    icon_weather_cloudy: {
-        '&.onesy-Icon-root': {
-            color: '#f1f3f4'
-        }
-    },
-    icon_weather_rainy: {
-        '&.onesy-Icon-root': {
-            color: '#e6f5fc'
-        }
-    },
-    icon_weather_snowy: {
-        '&.onesy-Icon-root': {
-            color: '#dcf0ff'
-        }
-    },
-    size_small: {
-        maxWidth: '120px'
-    },
-    size_regular: {
-        maxWidth: '180px'
-    },
-    size_large: {
-        maxWidth: '240px'
+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 _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialCircleW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCircleW100Filled"));
+var _IconMaterialNightlightW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100Filled"));
+var _IconMaterialCloudW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100Filled"));
+var _IconMaterialRainyW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialRainyW100Filled"));
+var _IconMaterialCloudySnowingW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudySnowingW100Filled"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _Transitions = _interopRequireDefault(require("../Transitions"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "style"],
+  _excluded2 = ["tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "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) => {
+  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 {
+      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"
+  })));
+});
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    aspectRatio: '1',
+    width: '100vw',
+    '&.onesy-Surface-root': {
+      background: 'transparent'
+    }
+  },
+  text: {
+    position: 'absolute',
+    textAlign: 'center',
+    fontWeight: '500',
+    lineHeight: '1',
+    userSelect: 'none'
+  },
+  text_regular: {
+    top: '22%',
+    width: '100%',
+    paddingLeft: '30%',
+    paddingRight: '11%',
+    fontSize: '34%'
+  },
+  text_large: {
+    top: '22%',
+    width: '100%',
+    paddingLeft: '27%',
+    paddingRight: '11%',
+    fontSize: '30%'
+  },
+  icon_background: {
+    '&.onesy-Icon-root': {
+      width: '100%',
+      height: 'auto'
+    }
+  },
+  icon_background_shadow: {
+    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%))`
+  },
+  icon_dayTime: {
+    '&.onesy-Icon-root': {
+      position: 'absolute',
+      zIndex: '1',
+      bottom: '21%',
+      width: '40% !important',
+      height: 'auto',
+      left: '13%'
+    }
+  },
+  icon_dayTime_day: {
+    '&.onesy-Icon-root': {
+      color: '#fcc21d'
     }
-}), { name: 'onesy-Weather' });
-const Weather = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    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.onesyWeather) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    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 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 Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Transitions = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transitions) || Transitions_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', shadow, dayTime: dayTime_, weather: weather_, temperature: temperature_, values: values_, 
-    // Once every 1 hour
-    interval = 60 * 60 * 1e3, IconDay = IconMaterialCircleW100Filled_1.default, IconNight = IconMaterialNightlightW100Filled_1.default, IconCloud = IconMaterialCloudW100Filled_1.default, IconRain = IconMaterialRainyW100Filled_1.default, IconSnow = IconMaterialCloudySnowingW100Filled_1.default, IconProps: IconProps_, Component = 'div', className, style } = props, other = __rest(props, ["tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "style"]);
-    const { classes } = useStyle();
-    const [rect, setRect] = react_1.default.useState();
-    const [values, setValues] = react_1.default.useState(values_ !== undefined ? values_ : {
-        dayTime: dayTime_ !== undefined ? dayTime_ : 'day',
-        weather: weather_ !== undefined ? weather_ : 'clear',
-        temperature: temperature_ !== undefined ? temperature_ : '14'
-    });
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        values: react_1.default.useRef(undefined)
+  },
+  icon_dayTime_night: {
+    '&.onesy-Icon-root': {
+      color: '#dfe0e2'
+    }
+  },
+  icon_weather: {
+    position: 'absolute',
+    width: '40% !important',
+    height: 'auto',
+    zIndex: '4'
+  },
+  icon_arrangement_regular: {
+    bottom: '22%',
+    left: '15%'
+  },
+  icon_arrangement_pair: {
+    bottom: '8%',
+    left: '25%',
+    opacity: '0.94 !important'
+  },
+  icon_weather_cloudy: {
+    '&.onesy-Icon-root': {
+      color: '#f1f3f4'
+    }
+  },
+  icon_weather_rainy: {
+    '&.onesy-Icon-root': {
+      color: '#e6f5fc'
+    }
+  },
+  icon_weather_snowy: {
+    '&.onesy-Icon-root': {
+      color: '#dcf0ff'
+    }
+  },
+  size_small: {
+    maxWidth: '120px'
+  },
+  size_regular: {
+    maxWidth: '180px'
+  },
+  size_large: {
+    maxWidth: '240px'
+  }
+}), {
+  name: 'onesy-Weather'
+});
+const Weather = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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 {
+      tonal = true,
+      color = 'primary',
+      version = 'filled',
+      size = 'regular',
+      shadow,
+      dayTime: dayTime_,
+      weather: weather_,
+      temperature: temperature_,
+      values: values_,
+      // Once every 1 hour
+      interval = 60 * 60 * 1e3,
+      IconDay = _IconMaterialCircleW100Filled.default,
+      IconNight = _IconMaterialNightlightW100Filled.default,
+      IconCloud = _IconMaterialCloudW100Filled.default,
+      IconRain = _IconMaterialRainyW100Filled.default,
+      IconSnow = _IconMaterialCloudySnowingW100Filled.default,
+      IconProps: IconProps_,
+      Component = 'div',
+      className,
+      style
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const [rect, setRect] = _react.default.useState();
+  const [values, setValues] = _react.default.useState(values_ !== undefined ? values_ : {
+    dayTime: dayTime_ !== undefined ? dayTime_ : 'day',
+    weather: weather_ !== undefined ? weather_ : 'clear',
+    temperature: temperature_ !== undefined ? temperature_ : '14'
+  });
+  const refs = {
+    root: _react.default.useRef(undefined),
+    values: _react.default.useRef(undefined)
+  };
+  refs.values.current = values;
+  const styles = {
+    root: {}
+  };
+  _react.default.useEffect(() => {
+    const method = () => {
+      var _refs$root$current;
+      return setRect((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect());
     };
-    refs.values.current = values;
-    const styles = {
-        root: {}
+    const observer = new ResizeObserver(method);
+    method();
+    observer.observe(refs.root.current);
+    return () => {
+      observer.disconnect();
     };
-    react_1.default.useEffect(() => {
-        const method = () => { var _a; return setRect((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()); };
-        const observer = new ResizeObserver(method);
-        method();
-        observer.observe(refs.root.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (values_ !== undefined && values_ !== refs.values.current)
-            setValues(values_);
-    }, [values_]);
-    react_1.default.useEffect(() => {
-        if (dayTime_ !== undefined && dayTime_ !== refs.values.current.dayTime)
-            setValues(values__ => (Object.assign(Object.assign({}, values__), { dayTime: dayTime_ })));
-    }, [dayTime_]);
-    react_1.default.useEffect(() => {
-        if (weather_ !== undefined && weather_ !== refs.values.current.weather)
-            setValues(values__ => (Object.assign(Object.assign({}, values__), { weather: weather_ })));
-    }, [weather_]);
-    react_1.default.useEffect(() => {
-        if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature)
-            setValues(values__ => (Object.assign(Object.assign({}, values__), { temperature: temperature_ })));
-    }, [temperature_]);
-    if (!['small', 'regular', 'large'].includes(size))
-        styles.root.maxWidth = size;
-    const IconProps = Object.assign({ color: 'unset' }, IconProps_);
-    let IconDayTime = IconDay;
-    if (['day'].includes(values.dayTime))
-        IconDayTime = IconDay;
-    if (['night'].includes(values.dayTime))
-        IconDayTime = IconNight;
-    let IconWeather_ = IconCloud;
-    if (['partly clear', 'cloudy'].includes(values.weather))
-        IconWeather_ = IconCloud;
-    if (['rainy'].includes(values.weather))
-        IconWeather_ = IconRain;
-    if (['snowy'].includes(values.weather))
-        IconWeather_ = IconSnow;
-    const useDayTime = ['clear', 'partly clear'].includes(values.weather);
-    const useWeather = !['clear'].includes(values.weather);
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tonal: tonal, color: color, version: version, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Weather', theme) && [
-                'onesy-Weather-root',
-                `onesy-Weather-version-${version}`,
-                `onesy-Weather-size-${size}`
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`]
-        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [(0, jsx_runtime_1.jsx)(IconWeather, { tonal: tonal, color: color, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Weather', theme) && [
-                        'onesy-Weather-icon-background'
-                    ],
-                    classes.icon_background,
-                    shadow && classes.icon_background_shadow
-                ]) }), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: values.temperature !== undefined }, { children: (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'd1', className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Weather', theme) && [
-                            'onesy-Weather-text'
-                        ],
-                        classes.text,
-                        classes[`text_${+values.temperature < 100 ? 'regular' : 'large'}`]
-                    ]), style: {
-                        fontSize: `${((rect === null || rect === void 0 ? void 0 : rect.width) || 0) * (+values.temperature < 100 ? +values.temperature < -10 ? 0.32 : 0.34 : 0.27)}px`
-                    } }, { children: [values.temperature, "\u00B0"] })) })), useDayTime && ((0, jsx_runtime_1.jsx)(Transitions, { children: (0, jsx_runtime_1.jsx)(Fade, { children: (0, jsx_runtime_1.jsx)(IconDayTime, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Weather', theme) && [
-                                'onesy-Weather-icon',
-                                'onesy-Weather-icon-day-time'
-                            ],
-                            IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
-                            classes.icon_dayTime,
-                            classes[`icon_dayTime_${values.dayTime}`]
-                        ]) })) }, values.dayTime) })), useWeather && values.weather && ((0, jsx_runtime_1.jsx)(Transitions, { children: (0, jsx_runtime_1.jsx)(Fade, { children: (0, jsx_runtime_1.jsx)(IconWeather_, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Weather', theme) && [
-                                'onesy-Weather-icon',
-                                'onesy-Weather-icon-weather'
-                            ],
-                            IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
-                            classes.icon_weather,
-                            classes[`icon_weather_${values.weather === 'partly clear' ? 'cloudy' : values.weather}`],
-                            classes[`icon_arrangement_${useDayTime ? 'pair' : 'regular'}`]
-                        ]) })) }, values.weather) }))] })));
+  }, []);
+  _react.default.useEffect(() => {
+    if (values_ !== undefined && values_ !== refs.values.current) setValues(values_);
+  }, [values_]);
+  _react.default.useEffect(() => {
+    if (dayTime_ !== undefined && dayTime_ !== refs.values.current.dayTime) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      dayTime: dayTime_
+    }));
+  }, [dayTime_]);
+  _react.default.useEffect(() => {
+    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      weather: weather_
+    }));
+  }, [weather_]);
+  _react.default.useEffect(() => {
+    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      temperature: temperature_
+    }));
+  }, [temperature_]);
+  if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
+  const IconProps = _objectSpread({
+    color: 'unset'
+  }, IconProps_);
+  let IconDayTime = IconDay;
+  if (['day'].includes(values.dayTime)) IconDayTime = IconDay;
+  if (['night'].includes(values.dayTime)) IconDayTime = IconNight;
+  let IconWeather_ = IconCloud;
+  if (['partly clear', 'cloudy'].includes(values.weather)) IconWeather_ = IconCloud;
+  if (['rainy'].includes(values.weather)) IconWeather_ = IconRain;
+  if (['snowy'].includes(values.weather)) IconWeather_ = IconSnow;
+  const useDayTime = ['clear', 'partly clear'].includes(values.weather);
+  const useWeather = !['clear'].includes(values.weather);
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    version: version,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-root', `onesy-Weather-version-${version}`, `onesy-Weather-size-${size}`], className, classes.root, classes[`size_${size}`]]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), /*#__PURE__*/_react.default.createElement(IconWeather, {
+    tonal: tonal,
+    color: color,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon-background'], classes.icon_background, shadow && classes.icon_background_shadow])
+  }), /*#__PURE__*/_react.default.createElement(Fade, {
+    in: values.temperature !== undefined
+  }, /*#__PURE__*/_react.default.createElement(Type, {
+    version: "d1",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-text'], classes.text, classes[`text_${+values.temperature < 100 ? 'regular' : 'large'}`]]),
+    style: {
+      fontSize: `${((rect === null || rect === void 0 ? void 0 : rect.width) || 0) * (+values.temperature < 100 ? +values.temperature < -10 ? 0.32 : 0.34 : 0.27)}px`
+    }
+  }, values.temperature, "\xB0")), useDayTime && /*#__PURE__*/_react.default.createElement(Transitions, null, /*#__PURE__*/_react.default.createElement(Fade, {
+    key: values.dayTime
+  }, /*#__PURE__*/_react.default.createElement(IconDayTime, (0, _extends2.default)({}, IconProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon', 'onesy-Weather-icon-day-time'], IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.icon_dayTime, classes[`icon_dayTime_${values.dayTime}`]])
+  })))), useWeather && values.weather && /*#__PURE__*/_react.default.createElement(Transitions, null, /*#__PURE__*/_react.default.createElement(Fade, {
+    key: values.weather
+  }, /*#__PURE__*/_react.default.createElement(IconWeather_, (0, _extends2.default)({}, IconProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon', 'onesy-Weather-icon-weather'], IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.icon_weather, classes[`icon_weather_${values.weather === 'partly clear' ? 'cloudy' : values.weather}`], classes[`icon_arrangement_${useDayTime ? 'pair' : 'regular'}`]])
+  })))));
 });
 Weather.displayName = 'onesy-Weather';
-exports.default = Weather;
+var _default = exports.default = Weather;

package/Weather/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Weather_1 = require("./Weather");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Weather_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Weather.default;
+  }
+});
+var _Weather = _interopRequireDefault(require("./Weather"));