@semcore/animation - npm Package Compare versions

Comparing version 1.9.9 to 1.10.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [1.10.0] - 2023-03-27
+
+### Added
+
+- Animation context that allows children components react to parent animation execution.
+
 ## [1.9.9] - 2023-03-28
@@ -7,0 +13,0 @@

lib/cjs/Animation.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports["default"] = void 0;
+exports["default"] = exports.animationContext = void 0;
 
@@ -33,2 +33,4 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
+var _contextEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/contextEnhance"));
+
 /*__reshadow-styles__:"./style/animate.shadow.css"*/
@@ -39,16 +41,16 @@ var style = (
 /*__inner_css_start__*/
-".___SAnimation_ap3lt_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_ap3lt);animation-duration:var(--durationFinalize_ap3lt);animation-delay:var(--delayFinalize_ap3lt);animation-name:var(--keyframesFinalize_ap3lt)}.___SAnimation_ap3lt_gg_.__visible_ap3lt_gg_{animation-duration:var(--durationInitialize_ap3lt);animation-delay:var(--delayInitialize_ap3lt);animation-name:var(--keyframesInitialize_ap3lt)}@media (prefers-reduced-motion){.___SAnimation_ap3lt_gg_,.___SAnimation_ap3lt_gg_.__visible_ap3lt_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_oqoor_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_oqoor);animation-duration:var(--durationFinalize_oqoor);animation-delay:var(--delayFinalize_oqoor);animation-name:var(--keyframesFinalize_oqoor)}.___SAnimation_oqoor_gg_.__visible_oqoor_gg_{animation-duration:var(--durationInitialize_oqoor);animation-delay:var(--delayInitialize_oqoor);animation-name:var(--keyframesInitialize_oqoor)}@media (prefers-reduced-motion){.___SAnimation_oqoor_gg_,.___SAnimation_oqoor_gg_.__visible_oqoor_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "ap3lt_gg_")
+, "oqoor_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_ap3lt_gg_",
-  "--timingFunction": "--timingFunction_ap3lt",
-  "--durationFinalize": "--durationFinalize_ap3lt",
-  "--delayFinalize": "--delayFinalize_ap3lt",
-  "--keyframesFinalize": "--keyframesFinalize_ap3lt",
-  "_visible": "__visible_ap3lt_gg_",
-  "--durationInitialize": "--durationInitialize_ap3lt",
-  "--delayInitialize": "--delayInitialize_ap3lt",
-  "--keyframesInitialize": "--keyframesInitialize_ap3lt"
+  "__SAnimation": "___SAnimation_oqoor_gg_",
+  "--timingFunction": "--timingFunction_oqoor",
+  "--durationFinalize": "--durationFinalize_oqoor",
+  "--delayFinalize": "--delayFinalize_oqoor",
+  "--keyframesFinalize": "--keyframesFinalize_oqoor",
+  "_visible": "__visible_oqoor_gg_",
+  "--durationInitialize": "--durationInitialize_oqoor",
+  "--delayInitialize": "--delayInitialize_oqoor",
+  "--keyframesInitialize": "--keyframesInitialize_oqoor"
 });
@@ -60,2 +62,30 @@
 
+var makeAnimationContextValue = function makeAnimationContextValue() {
+  var context = {
+    onAnimationStartSubscribers: [],
+    onAnimationStart: function onAnimationStart(callback) {
+      context.onAnimationStartSubscribers.push(callback);
+      return function () {
+        return context.onAnimationStartSubscribers.filter(function (cb) {
+          return cb !== callback;
+        });
+      };
+    },
+    onAnimationEndSubscribers: [],
+    onAnimationEnd: function onAnimationEnd(callback) {
+      context.onAnimationEndSubscribers.push(callback);
+      return function () {
+        return context.onAnimationEndSubscribers.filter(function (cb) {
+          return cb !== callback;
+        });
+      };
+    }
+  };
+  return context;
+};
+
+var animationContext = /*#__PURE__*/_react["default"].createContext(null);
+
+exports.animationContext = animationContext;
+
 var Animation = /*#__PURE__*/function (_Component) {
@@ -77,7 +107,19 @@ (0, _inherits2["default"])(Animation, _Component);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      animationRunning: false,
       render: _this.props.visible || _this.props.preserveNode,
       wasInvisible: !_this.props.visible
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAnimationEnd", function (e) {
-      e.stopPropagation();
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationContext", makeAnimationContextValue());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAnimationStart", function () {
+      var _this$asProps = _this.asProps,
+          animationsDisabled = _this$asProps.animationsDisabled,
+          parentAnimationContext = _this$asProps.parentAnimationContext;
+      var duration = animationsDisabled ? [0, 0] : propToArray(_this.asProps.duration);
+      var animationContext = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : _this.animationContext;
+      animationContext.onAnimationStartSubscribers.forEach(function (callback) {
+        return callback(duration[0]);
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAnimationEnd", function (event) {
+      event.stopPropagation();
 
@@ -89,2 +131,8 @@ if (!_this.asProps.visible && !_this.props.preserveNode) {
       }
+
+      var parentAnimationContext = _this.asProps.parentAnimationContext;
+      var animationContext = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : _this.animationContext;
+      animationContext.onAnimationEndSubscribers.forEach(function (callback) {
+        return callback();
+      });
     });
@@ -101,8 +149,10 @@ return _this;
       var SAnimation = _flexBox.Box;
-      var _this$asProps = this.asProps,
-          styles = _this$asProps.styles,
-          keyframes = _this$asProps.keyframes,
-          initialAnimation = _this$asProps.initialAnimation,
-          timingFunction = _this$asProps.timingFunction,
-          animationsDisabled = _this$asProps.animationsDisabled;
+      var _this$asProps2 = this.asProps,
+          styles = _this$asProps2.styles,
+          keyframes = _this$asProps2.keyframes,
+          initialAnimation = _this$asProps2.initialAnimation,
+          timingFunction = _this$asProps2.timingFunction,
+          animationsDisabled = _this$asProps2.animationsDisabled,
+          parentAnimationContext = _this$asProps2.parentAnimationContext;
+      var animationContextValue = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : this.animationContext;
       var duration = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
@@ -114,3 +164,6 @@ var delay = animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
       if (!render) return null;
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAnimation, _ref2.cn("SAnimation", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      return /*#__PURE__*/_react["default"].createElement(animationContext.Provider, {
+        value: animationContextValue
+      }, (_ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAnimation, _ref2.cn("SAnimation", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "onAnimationStart": this.onAnimationStart,
         "onAnimationEnd": this.onAnimationEnd,
@@ -124,3 +177,3 @@ "durationInitialize": "".concat(duration[0], "ms"),
         "keyframesFinalize": keyframes[1]
-      }, _ref))));
+      }, _ref))))));
     }
@@ -156,2 +209,3 @@ }], [{
 });
+(0, _defineProperty2["default"])(Animation, "enhance", [(0, _contextEnhance["default"])(animationContext, 'parentAnimationContext')]);
 
@@ -158,0 +212,0 @@ var _default = (0, _core["default"])(Animation);

lib/cjs/Collapse.js

@@ -31,34 +31,34 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -65,0 +65,0 @@

lib/cjs/FadeInOut.js

@@ -23,34 +23,34 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -57,0 +57,0 @@

lib/cjs/index.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
@@ -45,4 +47,10 @@ value: true
 });
+Object.defineProperty(exports, "animationContext", {
+  enumerable: true,
+  get: function get() {
+    return _Animation.animationContext;
+  }
+});
 
-var _Animation = _interopRequireDefault(require("./Animation"));
+var _Animation = _interopRequireWildcard(require("./Animation"));
 
@@ -49,0 +57,0 @@ var _Transform = _interopRequireDefault(require("./Transform"));

lib/cjs/Scale.js

@@ -27,34 +27,34 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -61,0 +61,0 @@

lib/cjs/Slide.js

@@ -23,34 +23,34 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -57,0 +57,0 @@

lib/cjs/Transform.js

@@ -27,34 +27,34 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -61,0 +61,0 @@

lib/es6/Animation.js

@@ -13,2 +13,3 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Box } from '@semcore/flex-box';
+import contextEnhance from '@semcore/utils/lib/enhances/contextEnhance';
 
@@ -20,16 +21,16 @@ /*__reshadow-styles__:"./style/animate.shadow.css"*/
 /*__inner_css_start__*/
-".___SAnimation_ap3lt_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_ap3lt);animation-duration:var(--durationFinalize_ap3lt);animation-delay:var(--delayFinalize_ap3lt);animation-name:var(--keyframesFinalize_ap3lt)}.___SAnimation_ap3lt_gg_.__visible_ap3lt_gg_{animation-duration:var(--durationInitialize_ap3lt);animation-delay:var(--delayInitialize_ap3lt);animation-name:var(--keyframesInitialize_ap3lt)}@media (prefers-reduced-motion){.___SAnimation_ap3lt_gg_,.___SAnimation_ap3lt_gg_.__visible_ap3lt_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_oqoor_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_oqoor);animation-duration:var(--durationFinalize_oqoor);animation-delay:var(--delayFinalize_oqoor);animation-name:var(--keyframesFinalize_oqoor)}.___SAnimation_oqoor_gg_.__visible_oqoor_gg_{animation-duration:var(--durationInitialize_oqoor);animation-delay:var(--delayInitialize_oqoor);animation-name:var(--keyframesInitialize_oqoor)}@media (prefers-reduced-motion){.___SAnimation_oqoor_gg_,.___SAnimation_oqoor_gg_.__visible_oqoor_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "ap3lt_gg_")
+, "oqoor_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_ap3lt_gg_",
-  "--timingFunction": "--timingFunction_ap3lt",
-  "--durationFinalize": "--durationFinalize_ap3lt",
-  "--delayFinalize": "--delayFinalize_ap3lt",
-  "--keyframesFinalize": "--keyframesFinalize_ap3lt",
-  "_visible": "__visible_ap3lt_gg_",
-  "--durationInitialize": "--durationInitialize_ap3lt",
-  "--delayInitialize": "--delayInitialize_ap3lt",
-  "--keyframesInitialize": "--keyframesInitialize_ap3lt"
+  "__SAnimation": "___SAnimation_oqoor_gg_",
+  "--timingFunction": "--timingFunction_oqoor",
+  "--durationFinalize": "--durationFinalize_oqoor",
+  "--delayFinalize": "--delayFinalize_oqoor",
+  "--keyframesFinalize": "--keyframesFinalize_oqoor",
+  "_visible": "__visible_oqoor_gg_",
+  "--durationInitialize": "--durationInitialize_oqoor",
+  "--delayInitialize": "--delayInitialize_oqoor",
+  "--keyframesInitialize": "--keyframesInitialize_oqoor"
 });
@@ -41,2 +42,28 @@
 
+var makeAnimationContextValue = function makeAnimationContextValue() {
+  var context = {
+    onAnimationStartSubscribers: [],
+    onAnimationStart: function onAnimationStart(callback) {
+      context.onAnimationStartSubscribers.push(callback);
+      return function () {
+        return context.onAnimationStartSubscribers.filter(function (cb) {
+          return cb !== callback;
+        });
+      };
+    },
+    onAnimationEndSubscribers: [],
+    onAnimationEnd: function onAnimationEnd(callback) {
+      context.onAnimationEndSubscribers.push(callback);
+      return function () {
+        return context.onAnimationEndSubscribers.filter(function (cb) {
+          return cb !== callback;
+        });
+      };
+    }
+  };
+  return context;
+};
+
+export var animationContext = /*#__PURE__*/React.createContext(null);
+
 var Animation = /*#__PURE__*/function (_Component) {
@@ -59,2 +86,3 @@ _inherits(Animation, _Component);
     _defineProperty(_assertThisInitialized(_this), "state", {
+      animationRunning: false,
       render: _this.props.visible || _this.props.preserveNode,
@@ -64,5 +92,18 @@ wasInvisible: !_this.props.visible
 
-    _defineProperty(_assertThisInitialized(_this), "onAnimationEnd", function (e) {
-      e.stopPropagation();
+    _defineProperty(_assertThisInitialized(_this), "animationContext", makeAnimationContextValue());
 
+    _defineProperty(_assertThisInitialized(_this), "onAnimationStart", function () {
+      var _this$asProps = _this.asProps,
+          animationsDisabled = _this$asProps.animationsDisabled,
+          parentAnimationContext = _this$asProps.parentAnimationContext;
+      var duration = animationsDisabled ? [0, 0] : propToArray(_this.asProps.duration);
+      var animationContext = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : _this.animationContext;
+      animationContext.onAnimationStartSubscribers.forEach(function (callback) {
+        return callback(duration[0]);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAnimationEnd", function (event) {
+      event.stopPropagation();
+
       if (!_this.asProps.visible && !_this.props.preserveNode) {
@@ -73,2 +114,8 @@ _this.setState({
       }
+
+      var parentAnimationContext = _this.asProps.parentAnimationContext;
+      var animationContext = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : _this.animationContext;
+      animationContext.onAnimationEndSubscribers.forEach(function (callback) {
+        return callback();
+      });
     });
@@ -86,8 +133,10 @@
       var SAnimation = Box;
-      var _this$asProps = this.asProps,
-          styles = _this$asProps.styles,
-          keyframes = _this$asProps.keyframes,
-          initialAnimation = _this$asProps.initialAnimation,
-          timingFunction = _this$asProps.timingFunction,
-          animationsDisabled = _this$asProps.animationsDisabled;
+      var _this$asProps2 = this.asProps,
+          styles = _this$asProps2.styles,
+          keyframes = _this$asProps2.keyframes,
+          initialAnimation = _this$asProps2.initialAnimation,
+          timingFunction = _this$asProps2.timingFunction,
+          animationsDisabled = _this$asProps2.animationsDisabled,
+          parentAnimationContext = _this$asProps2.parentAnimationContext;
+      var animationContextValue = parentAnimationContext !== null && parentAnimationContext !== void 0 ? parentAnimationContext : this.animationContext;
       var duration = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
@@ -99,3 +148,6 @@ var delay = animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
       if (!render) return null;
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SAnimation, _ref2.cn("SAnimation", _objectSpread({}, _assignProps({
+      return /*#__PURE__*/React.createElement(animationContext.Provider, {
+        value: animationContextValue
+      }, (_ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SAnimation, _ref2.cn("SAnimation", _objectSpread({}, _assignProps({
+        "onAnimationStart": this.onAnimationStart,
         "onAnimationEnd": this.onAnimationEnd,
@@ -109,3 +161,3 @@ "durationInitialize": "".concat(duration[0], "ms"),
         "keyframesFinalize": keyframes[1]
-      }, _ref))));
+      }, _ref))))));
     }
@@ -145,3 +197,5 @@ }], [{
 
+_defineProperty(Animation, "enhance", [contextEnhance(animationContext, 'parentAnimationContext')]);
+
 export default createComponent(Animation);
 //# sourceMappingURL=Animation.js.map

lib/es6/Collapse.js

@@ -15,34 +15,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -49,0 +49,0 @@

lib/es6/FadeInOut.js

@@ -12,34 +12,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -46,0 +46,0 @@

lib/es6/index.js

@@ -1,2 +0,2 @@
-export { default as Animation } from './Animation';
+export { default as Animation, animationContext } from './Animation';
 export { default as Transform } from './Transform';
@@ -3,0 +3,0 @@ export { default as FadeInOut } from './FadeInOut';

lib/es6/Scale.js

@@ -13,34 +13,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -47,0 +47,0 @@ import { useForkRef } from '@semcore/utils/lib/ref';

lib/es6/Slide.js

@@ -12,34 +12,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -46,0 +46,0 @@

lib/es6/Transform.js

@@ -14,34 +14,34 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__inner_css_start__*/
-"@keyframes collapse-enter_re0hb{0%{overflow:hidden;height:0}to{height:var(--height_re0hb)}}@keyframes collapse-exit_re0hb{0%{height:var(--height_re0hb)}to{height:0}}@keyframes fade-in-out-enter_re0hb{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_re0hb{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_re0hb{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_re0hb{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_re0hb{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_re0hb{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_re0hb{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_re0hb{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_re0hb{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_re0hb{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_re0hb{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_re0hb{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_re0hb{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_re0hb{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_re0hb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_re0hb{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_re0hb{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_re0hb{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_re0hb{0%{transform:var(--transformStart_re0hb)}to{transform:var(--transformEnd_re0hb)}}@keyframes transform-exit_re0hb{0%{transform:var(--transformEnd_re0hb)}to{transform:var(--transformStart_re0hb)}}"
+"@keyframes collapse-enter_8srcg{0%{overflow:hidden;height:0}to{height:var(--height_8srcg)}}@keyframes collapse-exit_8srcg{0%{height:var(--height_8srcg)}to{height:0}}@keyframes fade-in-out-enter_8srcg{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_8srcg{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_8srcg{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_8srcg{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_8srcg{0%{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-in_8srcg{0%{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}to{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-in_8srcg{0%{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-in_8srcg{0%{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}to{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-left-out_8srcg{to{opacity:0;transform:translateX(20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-right-out_8srcg{to{opacity:0;transform:translateX(-20px) scaleX(.9);pointer-events:none}0%{opacity:1;transform:translateX(0) scaleX(1);pointer-events:all}}@keyframes scale-top-out_8srcg{to{opacity:0;transform:translateY(20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes scale-bottom-out_8srcg{to{opacity:0;transform:translateY(-20px) scaleY(.9);pointer-events:none}0%{opacity:1;transform:translateY(0) scaleY(1);pointer-events:all}}@keyframes slide-top-in_8srcg{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_8srcg{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_8srcg{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_8srcg{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_8srcg{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_8srcg{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_8srcg{0%{transform:var(--transformStart_8srcg)}to{transform:var(--transformEnd_8srcg)}}@keyframes transform-exit_8srcg{0%{transform:var(--transformEnd_8srcg)}to{transform:var(--transformStart_8srcg)}}"
 /*__inner_css_end__*/
-, "re0hb_gg_")
+, "8srcg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@collapse-enter": "collapse-enter_re0hb",
-  "--height": "--height_re0hb",
-  "@collapse-exit": "collapse-exit_re0hb",
-  "@fade-in-out-enter": "fade-in-out-enter_re0hb",
-  "@fade-in-out-exit": "fade-in-out-exit_re0hb",
-  "@opacity-in": "opacity-in_re0hb",
-  "@opacity-out": "opacity-out_re0hb",
-  "@scale-left-in": "scale-left-in_re0hb",
-  "@scale-right-in": "scale-right-in_re0hb",
-  "@scale-top-in": "scale-top-in_re0hb",
-  "@scale-bottom-in": "scale-bottom-in_re0hb",
-  "@scale-left-out": "scale-left-out_re0hb",
-  "@scale-right-out": "scale-right-out_re0hb",
-  "@scale-top-out": "scale-top-out_re0hb",
-  "@scale-bottom-out": "scale-bottom-out_re0hb",
-  "@slide-top-in": "slide-top-in_re0hb",
-  "@slide-top-out": "slide-top-out_re0hb",
-  "@slide-bottom-in": "slide-bottom-in_re0hb",
-  "@slide-bottom-out": "slide-bottom-out_re0hb",
-  "@slide-left-in": "slide-left-in_re0hb",
-  "@slide-left-out": "slide-left-out_re0hb",
-  "@slide-right-in": "slide-right-in_re0hb",
-  "@slide-right-out": "slide-right-out_re0hb",
-  "@transform-enter": "transform-enter_re0hb",
-  "--transformStart": "--transformStart_re0hb",
-  "--transformEnd": "--transformEnd_re0hb",
-  "@transform-exit": "transform-exit_re0hb"
+  "@collapse-enter": "collapse-enter_8srcg",
+  "--height": "--height_8srcg",
+  "@collapse-exit": "collapse-exit_8srcg",
+  "@fade-in-out-enter": "fade-in-out-enter_8srcg",
+  "@fade-in-out-exit": "fade-in-out-exit_8srcg",
+  "@opacity-in": "opacity-in_8srcg",
+  "@opacity-out": "opacity-out_8srcg",
+  "@scale-left-in": "scale-left-in_8srcg",
+  "@scale-right-in": "scale-right-in_8srcg",
+  "@scale-top-in": "scale-top-in_8srcg",
+  "@scale-bottom-in": "scale-bottom-in_8srcg",
+  "@scale-left-out": "scale-left-out_8srcg",
+  "@scale-right-out": "scale-right-out_8srcg",
+  "@scale-top-out": "scale-top-out_8srcg",
+  "@scale-bottom-out": "scale-bottom-out_8srcg",
+  "@slide-top-in": "slide-top-in_8srcg",
+  "@slide-top-out": "slide-top-out_8srcg",
+  "@slide-bottom-in": "slide-bottom-in_8srcg",
+  "@slide-bottom-out": "slide-bottom-out_8srcg",
+  "@slide-left-in": "slide-left-in_8srcg",
+  "@slide-left-out": "slide-left-out_8srcg",
+  "@slide-right-in": "slide-right-in_8srcg",
+  "@slide-right-out": "slide-right-out_8srcg",
+  "@transform-enter": "transform-enter_8srcg",
+  "--transformStart": "--transformStart_8srcg",
+  "--transformEnd": "--transformEnd_8srcg",
+  "@transform-exit": "transform-exit_8srcg"
 });
@@ -48,0 +48,0 @@

lib/types/index.d.ts

@@ -79,2 +79,7 @@ import { CProps, ReturnEl } from '@semcore/core';
 
+type DisposeSubscription = () => void;
+declare const animationContext: React.Context<{
+  onAnimationStart: (callback: () => void) => DisposeSubscription;
+  onAnimationEnd: (callback: () => void) => DisposeSubscription;
+}>;
 declare const Animation: <T>(props: CProps<IAnimationProps & T>) => ReturnEl;
@@ -87,2 +92,2 @@ declare const Collapse: <T>(props: CProps<ICollapseProps & T>) => ReturnEl;
 
-export { Animation, Collapse, FadeInOut, Transform, Scale, Slide };
+export { Animation, Collapse, FadeInOut, Transform, Scale, Slide, animationContext };

package.json

 {
   "name": "@semcore/animation",
   "description": "Semrush Animation Component",
-  "version": "1.9.9",
+  "version": "1.10.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140770

increased by10.83%

Lines of code

1824

increased by6.36%

No dependency changes