@onesy/ui-react 1.0.164 → 1.0.167

package/Info/Info.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -38,37 +39,21 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Info'
 });
 const Info = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
+  const $ = (0, _compilerRuntime.c)(22);
   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.onesyInfo) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Line = _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.Line) || _Line.default;
-  }, [theme]);
-  const Menu = _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.Menu) || _Menu.default;
-  }, [theme]);
-  const Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.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.onesyInfo) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
+  const Line = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Menu) || _Menu.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.default;
   const {
       name,
       title,
       render,
-      Icon = _IconMaterialInfoW.default,
+      Icon: t0,
       IconProps,
       IconButtonProps,
       TitleProps,
@@ -78,26 +63,82 @@ const Info = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const Icon = t0 === undefined ? _IconMaterialInfoW.default : t0;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
-    ref: ref,
-    alignment: "center",
-    name: (0, _utils.is)('function', render) ? render() : /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      fullWidth: true,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Info', theme) && ['onesy-Info-menu'], classes.menu])
-    }, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      gap: 1,
-      fullWidth: true
-    }, ContainerProps), /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-      version: "l2"
-    }, TitleProps), title), children)),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Info', theme) && ['onesy-Info-root'], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: name !== undefined ? name : l('Info')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, IconButtonProps, /*#__PURE__*/_react.default.createElement(Icon, IconProps)))));
+  const t1 = "center";
+  const t2 = (0, _utils.is)("function", render) ? render() : /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Info", theme) && ["onesy-Info-menu"], classes.menu])
+  }, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    gap: 1,
+    fullWidth: true
+  }, ContainerProps), /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "l2"
+  }, TitleProps), title), children));
+  const t3 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Info", theme) && ["onesy-Info-root"], className, classes.root]);
+  let t4;
+  if ($[0] !== l || $[1] !== name) {
+    t4 = name !== undefined ? name : l("Info");
+    $[0] = l;
+    $[1] = name;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== Icon || $[4] !== IconProps) {
+    t5 = /*#__PURE__*/_react.default.createElement(Icon, IconProps);
+    $[3] = Icon;
+    $[4] = IconProps;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== IconButton || $[7] !== IconButtonProps || $[8] !== t5) {
+    t6 = /*#__PURE__*/_react.default.createElement(IconButton, IconButtonProps, t5);
+    $[6] = IconButton;
+    $[7] = IconButtonProps;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== Tooltip || $[11] !== TooltipProps || $[12] !== t4 || $[13] !== t6) {
+    t7 = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      name: t4
+    }, TooltipProps), t6));
+    $[10] = Tooltip;
+    $[11] = TooltipProps;
+    $[12] = t4;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== Menu || $[16] !== other || $[17] !== ref || $[18] !== t2 || $[19] !== t3 || $[20] !== t7) {
+    t8 = /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
+      ref: ref,
+      alignment: t1,
+      name: t2,
+      className: t3
+    }, other), t7);
+    $[15] = Menu;
+    $[16] = other;
+    $[17] = ref;
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t7;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  return t8;
 });
 Info.displayName = 'onesy-Info';
 var _default = exports.default = Info;

package/Interaction/Interaction.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import OnesySubscription from '@onesy/subscription/OnesySubscription';
 import { IBaseElement } from '../types';
-export type TMethodsVersion = 'add' | 'pulse' | 'remove';
-export type IInteraction = IBaseElement & {
+export declare type TMethodsVersion = 'add' | 'pulse' | 'remove';
+export declare type IInteraction = IBaseElement & {
     wave?: boolean;
     background?: boolean;
     border?: boolean;

package/Interaction/Interaction.js

@@ -140,11 +140,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Interaction'
 });
 const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   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.onesyInteraction) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesyInteraction) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     wave = true,
     background = true,
@@ -279,11 +277,11 @@ const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       addWavePulse();
     } else removeWaves();
   }, [pulse]);
-  const methods = _react.default.useCallback(version => {
+  const methods = version => {
     if (version === 'add') addWave(undefined, {
       origin: 'center'
     });else if (version === 'pulse') addWavePulse();else if (version === 'remove') removeWaves();
-  }, []);
+  };
   _react.default.useEffect(() => {
     let subscribed;
     if (subscription !== null && subscription !== void 0 && subscription.subscribe) subscribed = subscription.subscribe(methods);
@@ -297,19 +295,19 @@ const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (disabled && refs.interactions.current.length) setInteractions([]);
   }, [disabled]);
-  const addWave = _react.default.useCallback((event, overrides = {}) => {
+  const addWave = (event_0, overrides = {}) => {
     const origin = overrides.origin !== undefined ? overrides.origin : refs.origin.current;
     if (refs.wave.current && !refs.props.current.disabled) {
       let top = 0;
       let left = 0;
       let width = '100%';
       if (wave_version !== 'simple') {
-        var _event$currentTarget, _ref;
-        const rect = event === null || event === void 0 || (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.getBoundingClientRect();
-        const root = (_ref = (event === null || event === void 0 ? void 0 : event.currentTarget) || refs.root.current.parentNode) === null || _ref === void 0 ? void 0 : _ref.getBoundingClientRect();
+        var _event_0$currentTarge, _ref;
+        const rect = event_0 === null || event_0 === void 0 || (_event_0$currentTarge = event_0.currentTarget) === null || _event_0$currentTarge === void 0 ? void 0 : _event_0$currentTarge.getBoundingClientRect();
+        const root = (_ref = (event_0 === null || event_0 === void 0 ? void 0 : event_0.currentTarget) || refs.root.current.parentNode) === null || _ref === void 0 ? void 0 : _ref.getBoundingClientRect();
 
         // Mouse or touch event
-        const valuesEvent = !(event !== null && event !== void 0 && event.touches) ? event : event.touches[0];
+        const valuesEvent = !(event_0 !== null && event_0 !== void 0 && event_0.touches) ? event_0 : event_0.touches[0];
         const values = {
           x: valuesEvent.x !== undefined ? valuesEvent.x : valuesEvent.clientX,
           y: valuesEvent.y !== undefined ? valuesEvent.y : valuesEvent.clientY
@@ -318,8 +316,8 @@ const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         values.offsetY = valuesEvent.offsetY !== undefined ? valuesEvent.offsetY : values.y - rect.y;
         const w = root.width;
         const h = root.height;
-        const x = origin === 'center' || !event ? w / 2 : rect ? values.x - rect.left : values.offsetX;
-        const y = origin === 'center' || !event ? h / 2 : rect ? values.y - rect.top : values.offsetY;
+        const x = origin === 'center' || !event_0 ? w / 2 : rect ? values.x - rect.left : values.offsetX;
+        const y = origin === 'center' || !event_0 ? h / 2 : rect ? values.y - rect.top : values.offsetY;
         width = Math.round(Math.sqrt(
         // Largest sub rectangle in value
         Math.max(x ** 2 + y ** 2, Math.abs(w - x) ** 2 + y ** 2, x ** 2 + Math.abs(h - y) ** 2, Math.abs(w - x) ** 2 + Math.abs(h - y) ** 2)) * 2);
@@ -341,21 +339,21 @@ const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }))]);
     }
-  }, []);
-  const addWavePulse = _react.default.useCallback(() => {
+  };
+  const addWavePulse = () => {
     if (refs.pulse.current && !refs.props.current.disabled) {
       // Remove previous wave
       // if there is one
       if (refs.waves.current.length) removeWaves();
-      const root = refs.root.current.parentNode.getBoundingClientRect();
-      const w = root.width;
-      const h = root.height;
-      const x = w / 2;
-      const y = h / 2;
-      const width = Math.round(Math.sqrt(x ** 2 + y ** 2) * 2);
-      const top = y - width / 2;
-      const left = x - width / 2;
-      setWaves(items => [...items, /*#__PURE__*/_react.default.createElement(_.Transition, {
+      const root_0 = refs.root.current.parentNode.getBoundingClientRect();
+      const w_0 = root_0.width;
+      const h_0 = root_0.height;
+      const x_0 = w_0 / 2;
+      const y_0 = h_0 / 2;
+      const width_0 = Math.round(Math.sqrt(x_0 ** 2 + y_0 ** 2) * 2);
+      const top_0 = y_0 - width_0 / 2;
+      const left_0 = x_0 - width_0 / 2;
+      setWaves(items_0 => [...items_0, /*#__PURE__*/_react.default.createElement(_.Transition, {
         key: (0, _utils.getID)(),
         duration: "complex",
         enterOnAdd: true,
@@ -363,30 +361,30 @@ const Interaction = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _styleReact.classNames)([classes.wave, classes.pulse]),
         style: {
-          top: `${top}px`,
-          left: `${left}px`,
-          width: `${width}px`,
-          height: `${width}px`
+          top: `${top_0}px`,
+          left: `${left_0}px`,
+          width: `${width_0}px`,
+          height: `${width_0}px`
         }
       }))]);
     }
-  }, []);
-  const removeWaves = _react.default.useCallback(() => {
+  };
+  const removeWaves = () => {
     if (refs.waves.current.length) setWaves([]);
-  }, []);
-  const add = _react.default.useCallback(value => {
-    if (!refs.props.current.disabled && !has(value)) setInteractions(items => [...items, value]);
-  }, []);
-  const has = _react.default.useCallback(value => refs.interactions.current.includes(value), []);
-  const remove = _react.default.useCallback(value => {
-    if (has(value)) setInteractions(items => [...items].filter(item => item !== value));
-  }, []);
+  };
+  const add = value => {
+    if (!refs.props.current.disabled && !has(value)) setInteractions(items_1 => [...items_1, value]);
+  };
+  const has = value_0 => refs.interactions.current.includes(value_0);
+  const remove = value_1 => {
+    if (has(value_1)) setInteractions(items_2 => [...items_2].filter(item => item !== value_1));
+  };
   return /*#__PURE__*/_react.default.createElement("span", {
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     className: (0, _styleReact.classNames)([(0, _.staticClassName)('Interaction', theme) && ['onesy-Interaction-root', disabled && `onesy-Interaction-disabled`], className, classes.root])
   }, background && /*#__PURE__*/_react.default.createElement("span", {

package/Keyframes/Keyframes.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { TTransitionsDurationProperties } from '@onesy/style-react';
 import { IBaseElement, IRef } from '../types';
-export type TKeyframesStatus = 'appended' | 'add' | 'adding' | 'added' | 'removed';
-export type IKeyframe = {
+export declare type TKeyframesStatus = 'appended' | 'add' | 'adding' | 'added' | 'removed';
+export declare type IKeyframe = {
     name: string;
     timeout: number;
 };
-export type IKeyframes = Omit<IBaseElement, 'className'> & {
+export declare type IKeyframes = Omit<IBaseElement, 'className'> & {
     ref?: IRef;
     className?: boolean;
     prefix?: string;

package/Keyframes/Keyframes.js

@@ -15,11 +15,9 @@ var _utils2 = require("../utils");
 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 Keyframes = props_ => {
+  var _theme$ui, _theme$ui2;
   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.onesyKeyframes) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesyKeyframes) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     ref,
     append,
@@ -122,35 +120,35 @@ const Keyframes = props_ => {
     updateStatus('added');
     await (0, _utils.wait)(0);
   };
-  const updateStatus = (status_ = status) => {
+  const updateStatus = (status__0 = status) => {
     // Update
-    setStatus(status_);
+    setStatus(status__0);
 
     // Subscriptions
-    subs.current.status.emit(status_);
-    switch (status_) {
+    subs.current.status.emit(status__0);
+    switch (status__0) {
       case 'appended':
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         if ((0, _utils.is)('function', onAppended)) onAppended(refs.root.current);
         break;
       case 'add':
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         if ((0, _utils.is)('function', onAdd)) onAdd(refs.root.current);
         break;
       case 'adding':
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         if ((0, _utils.is)('function', onAdding)) onAdding(refs.root.current);
         break;
       case 'added':
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         if ((0, _utils.is)('function', onAdded)) onAdded(refs.root.current);
         break;
       case 'removed':
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         if ((0, _utils.is)('function', onRemoved)) onRemoved(refs.root.current);
         break;
       default:
-        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if ((0, _utils.is)('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
         break;
     }
 
@@ -168,7 +166,7 @@ const Keyframes = props_ => {
       }
 
       // Add
-      className_ += ` ${prefix || ''}${status_}`;
+      className_ += ` ${prefix || ''}${status__0}`;
       className_ = className_.replace(/ +/g, ' ').trim();
       refs.root.current.className = className_;
     }
@@ -180,11 +178,11 @@ const Keyframes = props_ => {
   return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
     value: value
   }, (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     }
   }));
 };

package/Keyframes/useKeyframes.js

@@ -8,6 +8,6 @@ exports.default = useKeyframes;
 var _react = _interopRequireDefault(require("react"));
 var _Context = _interopRequireDefault(require("./Context"));
 function useKeyframes() {
-  const value = _react.default.useContext(_Context.default);
+  const value = _react.default.use(_Context.default);
   return value;
 }

package/Label/Label.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IVersion, IElement, IPropsAny } from '../types';
-export type ILabel = Omit<ILine, 'onChange'> & {
+export declare type ILabel = Omit<ILine, 'onChange'> & {
     colorUnchecked?: IColor;
     version?: IVersion;
     position?: 'start' | 'top' | 'bottom' | 'end';

package/Label/Label.js

@@ -48,20 +48,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Label'
 });
 const Label = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _Input$type2, _Input$props, _Input$props2, _Input$props3, _Input$props4, _Input$props5;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _Input$type2, _Input$props, _Input$props2, _Input$props3, _Input$props4, _Input$props5;
   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.onesyLabel) === 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 Type = _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.Type) || _Type.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.onesyLabel) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
       tonal = true,
       color,
@@ -163,9 +154,9 @@ const Label = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     id: refs.ids.label
   }, TextProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Label', theme) && ['onesy-Label-text-wrapper'], TextProps === null || TextProps === void 0 ? void 0 : TextProps.className])
-  }), Text === null || Text === void 0 ? void 0 : Text.map((item, index) => (0, _utils.is)('simple', item) ? /*#__PURE__*/_react.default.createElement(Type, {
+  }), Text === null || Text === void 0 ? void 0 : Text.map((item_0, index) => (0, _utils.is)('simple', item_0) ? /*#__PURE__*/_react.default.createElement(Type, {
     version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, item) : /*#__PURE__*/_react.default.cloneElement(item, {
+  }, item_0) : /*#__PURE__*/_react.default.cloneElement(item_0, {
     key: index
   })))), footer && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helperText !== undefined && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 2,

package/Labels/Labels.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IVersion, IElement, IPropsAny } from '../types';
-export type ILabels = Omit<ILine, 'onChange'> & {
+export declare type ILabels = Omit<ILine, 'onChange'> & {
     colorUnchecked?: IColor;
     version?: IVersion;
     name?: IElement;

package/Labels/Labels.js

@@ -30,19 +30,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Labels'
 });
 const Labels = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   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.onesyLabels) === 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 Type = _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.Type) || _Type.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.onesyLabels) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
       tonal = true,
       color = 'primary',
@@ -86,14 +78,14 @@ const Labels = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (checked !== undefined && checked !== refs.value.current) setValue(checked);
   }, [checked]);
   const children = _react.default.Children.toArray(children_);
-  const onUpdate = _react.default.useCallback(valueNew_ => {
+  const onUpdate = valueNew_ => {
     const valueNew = valueNew_;
     const value__ = [...refs.value.current];
     const index = value__.findIndex(item => item === valueNew);
     if (index > -1) value__.splice(index, 1);else value__.push(valueNew);
     if (!props.hasOwnProperty('value')) setValue(value__);
     if ((0, _utils.is)('function', onChange)) onChange(value__);
-  }, []);
+  };
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
     gap: 1,
@@ -114,16 +106,16 @@ const Labels = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: direction,
     align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
     justify: justify
-  }, WrapperProps), children.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index,
-    checked: value.includes(item.props.value),
-    onChange: () => onUpdate(item.props.value),
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-    color: item.props.color !== undefined ? item.props.color : color,
-    colorUnchecked: item.props.colorUnchecked !== undefined ? item.props.colorUnchecked : colorUnchecked,
-    version: item.props.version !== undefined ? item.props.version : version,
-    size: item.props.size !== undefined ? item.props.size : size,
-    disabled: item.props.disabled !== undefined ? item.props.disabled : disabled
+  }, WrapperProps), children.map((item_0, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_0, {
+    key: index_0,
+    checked: value.includes(item_0.props.value),
+    onChange: () => onUpdate(item_0.props.value),
+    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+    color: item_0.props.color !== undefined ? item_0.props.color : color,
+    colorUnchecked: item_0.props.colorUnchecked !== undefined ? item_0.props.colorUnchecked : colorUnchecked,
+    version: item_0.props.version !== undefined ? item_0.props.version : version,
+    size: item_0.props.size !== undefined ? item_0.props.size : size,
+    disabled: item_0.props.disabled !== undefined ? item_0.props.disabled : disabled
   })))));
 });
 Labels.displayName = 'onesy-Labels';

package/Line/Line.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { IBaseElement, IPropsAny, IValueBreakpoints } from '../types';
-export type TLineAlign = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' | 'unset';
-export type TLineJustify = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'unset';
-export type TLineDirection = 'inherit' | 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type TLineWrap = 'inherit' | 'wrap' | 'nowrap' | 'wrap-reverse';
-export type TLineDisplay = 'inherit' | 'flex' | 'inline-flex';
-export type ILine = IBaseElement & {
+export declare type TLineAlign = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' | 'unset';
+export declare type TLineJustify = 'inherit' | 'initial' | 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'unset';
+export declare type TLineDirection = 'inherit' | 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type TLineWrap = 'inherit' | 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type TLineDisplay = 'inherit' | 'flex' | 'inline-flex';
+export declare type ILine = IBaseElement & {
     display?: TLineDisplay | Partial<Record<IValueBreakpoints, TLineDisplay>>;
     direction?: TLineDirection | Partial<Record<IValueBreakpoints, TLineDirection>>;
     align?: TLineAlign | Partial<Record<IValueBreakpoints, TLineAlign>>;