Feat/support next (#245)

* feat: remove unused scss files

* feat: support next.js

* feat: scss compile support new icon

* chore:change icon path

* feat: output the product of commonjs specification

* feat: replace lodash-es with lodash

* feat: optimize the compilation of library

* feat: fix error during building

* feat: support next.js

* v2.1.0-alpha.0

* v2.1.0-alpha.1

* feat: optimize build config in semi-icons

* v2.1.0-next.1

* feat: replace lodash-es with lodash

* v2.1.0-next.2

* feat: add some comments and desc

Co-authored-by: 伍浩威 <[email protected]>
Co-authored-by: DaiQiangReal <[email protected]>
Co-authored-by: wuhw <[email protected]>
Co-authored-by: pointhalo <[email protected]>

content/start/getting-started/index-en-US.md

@@ -95,3 +95,45 @@ Use script and link tags to import files directly in the browser, and use the gl
     </div>, document.getElementById("root"));
 </script>
 ```
+
+## 4、Use in Next.js
+
+### Step1
+
+Install `@douyinfe/semi-next` in the project root directory.
+
+``` shell
+# with npm
+npm i @douyinfe/semi-next --save-dev
+
+# with yarn
+yarn add @douyinfe/semi-next --dev
+
+# with pnpm
+pnpm add @douyinfe/semi-next --dev
+
+```
+
+### Step2
+
+Create `next.config.js` in the project root directory and configure it.
+
+```js
+// next.config.js
+const semi = require('@douyinfe/semi-next').default({/* the extension options */});
+module.exports = semi({
+    // your custom Next.js configuration
+});
+```
+
+[Detailed documentation]() of `@douyinfe/semi-next`.
+
+### Step3
+
+Introduce the full amount of semi css in `global.css`. Currently, on-demand introduction is not supported.
+
+``` css
+/* styles/globals.css */
+@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
+
+```

content/start/getting-started/index.md

@@ -22,6 +22,8 @@ pnpm add @douyinfe/semi-ui
 
 ## 2、模块化方式使用组件
 
+在 Webpack、create-react-app 或 Vite 项目中使用时，无需进行任何编译项配置，直接使用即可。构建时所有相关资源均会按需打包。
+
 ```jsx
 import React, { Component } from 'react';
 import { Button, Toast } from '@douyinfe/semi-ui';
@@ -39,7 +41,49 @@ class Demo extends React.Component {
 
 > 推荐在项目中引入 [reset.css](https://www.npmjs.com/package/reset-css)，它可以避免引入浏览器自带的默认样式。
 
-## 3、UMD 方式使用组件
+## 3、在 Next.js 中使用
+
+当你在 Next.js 项目中使用时，需要搭配 Semi 提供的编译插件
+
+### Step1
+
+在项目根目录安装 `@douyinfe/semi-next` 。
+
+``` shell
+# 使用 npm
+npm i @douyinfe/semi-next --save-dev
+
+# 使用 yarn
+yarn add @douyinfe/semi-next --dev
+
+# 使用 pnpm
+pnpm add @douyinfe/semi-next --dev
+```
+
+### Step2
+
+在项目根目录创建 `next.config.js`，并进行配置。
+
+```js
+// next.config.js
+const semi = require('@douyinfe/semi-next').default({/* the extension options */});
+module.exports = semi({
+    // your custom Next.js configuration
+});
+```
+
+`@douyinfe/semi-next` 的[详细文档]()。
+
+### Step3
+
+在 `global.css` 中引入全量的 semi css。目前不支持按需引入。
+
+``` css
+/* styles/globals.css */
+@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
+```
+
+## 4、UMD 方式使用组件
 
 > 我们并不推荐直接使用已构建文件，这样会全量引入所有组件，无法实现按需加载。但如果确实有非构建场景的需求，可以通过以下方式引用
 
@@ -93,5 +137,5 @@ class Demo extends React.Component {
         <IconHome size="large" />
         <IllustrationConstruction style={{width: 150, height: 150}} />
     </div>, document.getElementById("root"));
-</script>
+</script>;
 ```

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.1.1"
+    "version": "2.1.0-next.2"
 }

packages/semi-animation-react/babel.config.js

@@ -1,34 +0,0 @@
-module.exports = {
-    presets: [
-        '@babel/preset-react',
-        [
-            '@babel/preset-env',
-            {
-                modules: false,
-                targets: {
-                    browsers: [
-                        "> 0.5%",
-                        "last 2 versions",
-                        "Firefox ESR",
-                        "not dead",
-                        "not IE 11"
-                    ]
-                }
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            },
-        ],
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
-        ],
-    ]
-};

packages/semi-animation-react/getBabelConfig.js

@@ -0,0 +1,36 @@
+module.exports = ({ isESM }) => {
+    return {
+        presets: [
+            '@babel/preset-react',
+            [
+                '@babel/preset-env',
+                {
+                    modules: isESM ? false : 'commonjs',
+                    targets: {
+                        browsers: [
+                            "> 0.5%",
+                            "last 2 versions",
+                            "Firefox ESR",
+                            "not dead",
+                            "not IE 11"
+                        ]
+                    }
+                },
+            ],
+        ],
+        plugins: [
+            [
+                '@babel/plugin-transform-runtime',
+                {
+                    corejs: 3
+                },
+            ],
+            [
+                '@babel/plugin-proposal-decorators',
+                {
+                    legacy: true,
+                },
+            ],
+        ]    
+    };
+};

packages/semi-animation-react/gulpfile.js

@@ -5,24 +5,32 @@ const gulpBabel = require('gulp-babel');
 const merge2 = require('merge2');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const babelConfig = require('./babel.config');
+const getBabelConfig = require('./getBabelConfig');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-gulp.task('compileTSX', function compileTSX() {
+function compileTSX(isESM) {
+    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
     const tsStream = gulp.src(['**/*.ts', '**/*.tsx', '!_story/**/*.*', '!node_modules/**/*.*', '!lib/**/*.*'])
         .pipe(gulpTS({
             ...tsConfig.compilerOptions,
             rootDir: path.join(__dirname, '..')
         }));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(babelConfig))
-        .pipe(gulp.dest('lib/es'));
-    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
+        .pipe(gulpBabel(getBabelConfig({ isESM })))
+        .pipe(gulp.dest(targetDir));
+    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
     return merge2([jsStream, dtsStream]);
+}
+
+gulp.task('compileTSXForESM', function compileTSXForESM() {
+    return compileTSX(true);
 });
 
-gulp.task('compileLib', gulp.series(['cleanLib', 'compileTSX']));
+gulp.task('compileTSXForCJS', function compileTSXForCJS() {
+    return compileTSX(false);
+});
 
+gulp.task('compileLib', gulp.series(['cleanLib', gulp.parallel('compileTSXForESM', 'compileTSXForCJS')]));

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.1.1",
+  "version": "2.1.0-next.1",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -12,7 +12,7 @@
     "README.md"
   ],
   "license": "MIT",
-  "main": "lib/es/index.js",
+  "main": "lib/cjs/index.js",
   "module": "lib/es/index.js",
   "typings": "lib/es/index.d.ts",
   "repository": {
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.1.1",
-    "@douyinfe/semi-animation-styled": "2.1.1",
+    "@douyinfe/semi-animation": "2.1.0-next.1",
+    "@douyinfe/semi-animation-styled": "2.1.0-next.1",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-react/src/StyledAnimation.tsx

@@ -6,8 +6,6 @@
 import React, { PureComponent, isValidElement, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import '@douyinfe/semi-animation-styled';
-// eslint-disable-next-line @typescript-eslint/no-duplicate-imports
 import { types as styledTypes, loops, delays, speeds } from '@douyinfe/semi-animation-styled';
 import noop from './utils/noop';
 import invokeFns from './utils/invokeFns';

packages/semi-animation-styled/babel.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                modules: false,
-                targets: {
-                    browsers: [
-                        "> 0.5%",
-                        "last 2 versions",
-                        "Firefox ESR",
-                        "not dead",
-                        "not IE 11"
-                    ]
-                }
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            },
-        ],
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
-        ],
-    ]
-};

packages/semi-animation-styled/getBabelConfig.js

@@ -0,0 +1,35 @@
+module.exports = ({ isESM }) => {
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    modules: isESM ? false : 'commonjs',
+                    targets: {
+                        browsers: [
+                            "> 0.5%",
+                            "last 2 versions",
+                            "Firefox ESR",
+                            "not dead",
+                            "not IE 11"
+                        ]
+                    }
+                },
+            ],
+        ],
+        plugins: [
+            [
+                '@babel/plugin-transform-runtime',
+                {
+                    corejs: 3
+                },
+            ],
+            [
+                '@babel/plugin-proposal-decorators',
+                {
+                    legacy: true,
+                },
+            ],
+        ]
+    };
+};

packages/semi-animation-styled/gulpfile.js

@@ -5,26 +5,30 @@ const gulpBabel = require('gulp-babel');
 const merge2 = require('merge2');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const babelConfig = require('./babel.config');
+const getBabelConfig = require('./getBabelConfig');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-gulp.task('compileTS', function compileTSX() {
+function compileTS(isESM) {
+    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
     const tsStream = gulp.src(['**/*.ts', '!_story/**/*.*', '!node_modules/**/*.*', '!lib/**/*.*'])
         .pipe(gulpTS(tsConfig.compilerOptions));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(babelConfig))
-        .pipe(gulp.dest('lib/es'));
-    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
+        .pipe(gulpBabel(getBabelConfig({ isESM })))
+        .pipe(gulp.dest(targetDir));
+    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
     return merge2([jsStream, dtsStream]);
+}
+
+gulp.task('compileTSForESM', function compileTSForESM() {
+    return compileTS(true);
 });
 
-gulp.task('compileScss', function compileScss() {
-    return gulp.src(['**/*.css', '!_story/**/*.*', '!node_modules/**/*.*', '!lib/**/*.*'])
-        .pipe(gulp.dest('lib/es'));
+gulp.task('compileTSForCJS', function compileTSForCJS() {
+    return compileTS(false);
 });
 
-gulp.task('compileLib', gulp.series(['cleanLib', 'compileScss', 'compileTS']));
+gulp.task('compileLib', gulp.series(['cleanLib', gulp.parallel('compileTSForESM', 'compileTSForCJS')]));
 

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.1.1",
+  "version": "2.1.0-next.1",
   "description": "semi styled animation",
   "keywords": [
     "semi",
@@ -9,7 +9,7 @@
   ],
   "homepage": "",
   "license": "MIT",
-  "main": "lib/es/index.js",
+  "main": "lib/cjs/index.js",
   "module": "lib/es/index.js",
   "typings": "lib/es/index.d.ts",
   "directories": {

packages/semi-animation-styled/src/_base.css

@@ -1,87 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-.semi-animated {
-    animation-duration: 1s;
-    animation-fill-mode: both;
-}
-
-.semi-animated.semi-loop-1 {
-    animation-iteration-count: 1;
-}
-
-.semi-animated.semi-loop-2 {
-    animation-iteration-count: 2;
-}
-
-.semi-animated.semi-loop-3 {
-    animation-iteration-count: 3;
-}
-
-.semi-animated.semi-loop-4 {
-    animation-iteration-count: 4;
-}
-
-.semi-animated.semi-loop-5 {
-    animation-iteration-count: 5;
-}
-
-.semi-animated.semi-loop-infinite {
-    animation-iteration-count: infinite;
-}
-
-.semi-animated.semi-delay-0s {
-    animation-delay: 0s;
-}
-
-.semi-animated.semi-delay-1s {
-    animation-delay: 1s;
-}
-
-.semi-animated.semi-delay-2s {
-    animation-delay: 2s;
-}
-
-.semi-animated.semi-delay-3s {
-    animation-delay: 3s;
-}
-
-.semi-animated.semi-delay-4s {
-    animation-delay: 4s;
-}
-
-.semi-animated.semi-delay-5s {
-    animation-delay: 5s;
-}
-
-.semi-animated.semi-speed-default {
-    animation-duration: 1s;
-}
-
-.semi-animated.semi-speed-fast {
-    animation-duration: 800ms;
-}
-
-.semi-animated.semi-speed-faster {
-    animation-duration: 500ms;
-}
-
-.semi-animated.semi-speed-slow {
-    animation-duration: 2s;
-}
-
-.semi-animated.semi-speed-slower {
-    animation-duration: 3s;
-}
-
-@media (print), 
-    (prefers-reduced-motion: reduce) {
-    .semi-animated {
-        animation-duration: 1ms !important;
-        transition-duration: 1ms !important;
-        animation-iteration-count: 1 !important;
-    }
-}
-

packages/semi-animation-styled/src/attention_seekers/bounce.css

@@ -1,36 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounce {
-    from,
-    20%,
-    53%,
-    80%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-        transform: translate3d(0, 0, 0);
-    }
-
-    40%,
-    43% {
-        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
-        transform: translate3d(0, -30px, 0);
-    }
-
-    70% {
-        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
-        transform: translate3d(0, -15px, 0);
-    }
-
-    90% {
-        transform: translate3d(0, -4px, 0);
-    }
-}
-
-.semi-bounce {
-    animation-name: semi-bounce;
-    transform-origin: center bottom;
-}
-

packages/semi-animation-styled/src/attention_seekers/flash.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flash {
-    from,
-    50%,
-    to {
-        opacity: 1;
-    }
-
-    25%,
-    75% {
-        opacity: 0;
-    }
-}
-
-.semi-flash {
-    animation-name: semi-flash;
-}
-

packages/semi-animation-styled/src/attention_seekers/headShake.css

@@ -1,36 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-headShake {
-    0% {
-        transform: translateX(0);
-    }
-
-    6.5% {
-        transform: translateX(-6px) rotateY(-9deg);
-    }
-
-    18.5% {
-        transform: translateX(5px) rotateY(7deg);
-    }
-
-    31.5% {
-        transform: translateX(-3px) rotateY(-5deg);
-    }
-
-    43.5% {
-        transform: translateX(2px) rotateY(3deg);
-    }
-
-    50% {
-        transform: translateX(0);
-    }
-}
-
-.semi-headShake {
-    animation-timing-function: ease-in-out;
-    animation-name: semi-headShake;
-}
-

packages/semi-animation-styled/src/attention_seekers/heartBeat.css

@@ -1,33 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-heartBeat {
-    0% {
-        transform: scale(1);
-    }
-
-    14% {
-        transform: scale(1.3);
-    }
-
-    28% {
-        transform: scale(1);
-    }
-
-    42% {
-        transform: scale(1.3);
-    }
-
-    70% {
-        transform: scale(1);
-    }
-}
-
-.semi-heartBeat {
-    animation-name: semi-heartBeat;
-    animation-duration: 1.3s;
-    animation-timing-function: ease-in-out;
-}
-

packages/semi-animation-styled/src/attention_seekers/jello.css

@@ -1,46 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-jello {
-    from,
-    11.1%,
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-
-    22.2% {
-        transform: skewX(-12.5deg) skewY(-12.5deg);
-    }
-
-    33.3% {
-        transform: skewX(6.25deg) skewY(6.25deg);
-    }
-
-    44.4% {
-        transform: skewX(-3.125deg) skewY(-3.125deg);
-    }
-
-    55.5% {
-        transform: skewX(1.5625deg) skewY(1.5625deg);
-    }
-
-    66.6% {
-        transform: skewX(-.78125deg) skewY(-.78125deg);
-    }
-
-    77.7% {
-        transform: skewX(.390625deg) skewY(.390625deg);
-    }
-
-    88.8% {
-        transform: skewX(-.1953125deg) skewY(-.1953125deg);
-    }
-}
-
-.semi-jello {
-    animation-name: semi-jello;
-    transform-origin: center;
-}
-

packages/semi-animation-styled/src/attention_seekers/pulse.css

@@ -1,25 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes semi-pulse {
-    from {
-        transform: scale3d(1, 1, 1);
-    }
-
-    50% {
-        transform: scale3d(1.05, 1.05, 1.05);
-    }
-
-    to {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.semi-pulse {
-    animation-name: semi-pulse;
-}
-

packages/semi-animation-styled/src/attention_seekers/rubberBand.css

@@ -1,39 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rubberBand {
-    from {
-        transform: scale3d(1, 1, 1);
-    }
-
-    30% {
-        transform: scale3d(1.25, .75, 1);
-    }
-
-    40% {
-        transform: scale3d(.75, 1.25, 1);
-    }
-
-    50% {
-        transform: scale3d(1.15, .85, 1);
-    }
-
-    65% {
-        transform: scale3d(.95, 1.05, 1);
-    }
-
-    75% {
-        transform: scale3d(1.05, .95, 1);
-    }
-
-    to {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.semi-rubberBand {
-    animation-name: semi-rubberBand;
-}
-

packages/semi-animation-styled/src/attention_seekers/shake.css

@@ -1,31 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-shake {
-    from,
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        transform: translate3d(-10px, 0, 0);
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-        transform: translate3d(10px, 0, 0);
-    }
-}
-
-.semi-shake {
-    animation-name: semi-shake;
-}
-

packages/semi-animation-styled/src/attention_seekers/swing.css

@@ -1,32 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-swing {
-    20% {
-        transform: rotate3d(0, 0, 1, 15deg);
-    }
-
-    40% {
-        transform: rotate3d(0, 0, 1, -10deg);
-    }
-
-    60% {
-        transform: rotate3d(0, 0, 1, 5deg);
-    }
-
-    80% {
-        transform: rotate3d(0, 0, 1, -5deg);
-    }
-
-    to {
-        transform: rotate3d(0, 0, 1, 0deg);
-    }
-}
-
-.semi-swing {
-    transform-origin: top center;
-    animation-name: semi-swing;
-}
-

packages/semi-animation-styled/src/attention_seekers/tada.css

@@ -1,37 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-tada {
-    from {
-        transform: scale3d(1, 1, 1);
-    }
-
-    10%,
-    20% {
-        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90% {
-        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-    }
-
-    40%,
-    60%,
-    80% {
-        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-    }
-
-    to {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.semi-tada {
-    animation-name: semi-tada;
-}
-

packages/semi-animation-styled/src/attention_seekers/wobble.css

@@ -1,41 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes semi-wobble {
-    from {
-        transform: translate3d(0, 0, 0);
-    }
-
-    15% {
-        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-    }
-
-    30% {
-        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-    }
-
-    45% {
-        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-    }
-
-    60% {
-        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-    }
-
-    75% {
-        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-wobble {
-    animation-name: semi-wobble;
-}
-

packages/semi-animation-styled/src/bouncing_entrances/bounceIn.css

@@ -1,48 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceIn {
-    from,
-    20%,
-    40%,
-    60%,
-    80%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-    }
-
-    0% {
-        opacity: 0;
-        transform: scale3d(.3, .3, .3);
-    }
-
-    20% {
-        transform: scale3d(1.1, 1.1, 1.1);
-    }
-
-    40% {
-        transform: scale3d(.9, .9, .9);
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(1.03, 1.03, 1.03);
-    }
-
-    80% {
-        transform: scale3d(.97, .97, .97);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.semi-bounceIn {
-    animation-duration: .75s;
-    animation-name: semi-bounceIn;
-}
-

packages/semi-animation-styled/src/bouncing_entrances/bounceInDown.css

@@ -1,41 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceInDown {
-    from,
-    60%,
-    75%,
-    90%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-    }
-
-    0% {
-        opacity: 0;
-        transform: translate3d(0, -3000px, 0);
-    }
-
-    60% {
-        opacity: 1;
-        transform: translate3d(0, 25px, 0);
-    }
-
-    75% {
-        transform: translate3d(0, -10px, 0);
-    }
-
-    90% {
-        transform: translate3d(0, 5px, 0);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-bounceInDown {
-    animation-name: semi-bounceInDown;
-}
-

packages/semi-animation-styled/src/bouncing_entrances/bounceInLeft.css

@@ -1,41 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceInLeft {
-    from,
-    60%,
-    75%,
-    90%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-    }
-
-    0% {
-        opacity: 0;
-        transform: translate3d(-3000px, 0, 0);
-    }
-
-    60% {
-        opacity: 1;
-        transform: translate3d(25px, 0, 0);
-    }
-
-    75% {
-        transform: translate3d(-10px, 0, 0);
-    }
-
-    90% {
-        transform: translate3d(5px, 0, 0);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-bounceInLeft {
-    animation-name: semi-bounceInLeft;
-}
-

packages/semi-animation-styled/src/bouncing_entrances/bounceInRight.css

@@ -1,41 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceInRight {
-    from,
-    60%,
-    75%,
-    90%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-    }
-
-    from {
-        opacity: 0;
-        transform: translate3d(3000px, 0, 0);
-    }
-
-    60% {
-        opacity: 1;
-        transform: translate3d(-25px, 0, 0);
-    }
-
-    75% {
-        transform: translate3d(10px, 0, 0);
-    }
-
-    90% {
-        transform: translate3d(-5px, 0, 0);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-bounceInRight {
-    animation-name: semi-bounceInRight;
-}
-

packages/semi-animation-styled/src/bouncing_entrances/bounceInUp.css

@@ -1,41 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceInUp {
-    from,
-    60%,
-    75%,
-    90%,
-    to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-    }
-
-    from {
-        opacity: 0;
-        transform: translate3d(0, 3000px, 0);
-    }
-
-    60% {
-        opacity: 1;
-        transform: translate3d(0, -20px, 0);
-    }
-
-    75% {
-        transform: translate3d(0, 10px, 0);
-    }
-
-    90% {
-        transform: translate3d(0, -5px, 0);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-bounceInUp {
-    animation-name: semi-bounceInUp;
-}
-

packages/semi-animation-styled/src/bouncing_exits/bounceOut.css

@@ -1,27 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceOut {
-    20% {
-        transform: scale3d(.9, .9, .9);
-    }
-
-    50%,
-    55% {
-        opacity: 1;
-        transform: scale3d(1.1, 1.1, 1.1);
-    }
-
-    to {
-        opacity: 0;
-        transform: scale3d(.3, .3, .3);
-    }
-}
-
-.semi-bounceOut {
-    animation-duration: .75s;
-    animation-name: semi-bounceOut;
-}
-

packages/semi-animation-styled/src/bouncing_exits/bounceOutDown.css

@@ -1,26 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceOutDown {
-    20% {
-        transform: translate3d(0, 10px, 0);
-    }
-
-    40%,
-    45% {
-        opacity: 1;
-        transform: translate3d(0, -20px, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, 2000px, 0);
-    }
-}
-
-.semi-bounceOutDown {
-    animation-name: semi-bounceOutDown;
-}
-

packages/semi-animation-styled/src/bouncing_exits/bounceOutLeft.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceOutLeft {
-    20% {
-        opacity: 1;
-        transform: translate3d(20px, 0, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(-2000px, 0, 0);
-    }
-}
-
-.semi-bounceOutLeft {
-    animation-name: semi-bounceOutLeft;
-}
-

packages/semi-animation-styled/src/bouncing_exits/bounceOutRight.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceOutRight {
-    20% {
-        opacity: 1;
-        transform: translate3d(-20px, 0, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(2000px, 0, 0);
-    }
-}
-
-.semi-bounceOutRight {
-    animation-name: semi-bounceOutRight;
-}
-

packages/semi-animation-styled/src/bouncing_exits/bounceOutUp.css

@@ -1,26 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-bounceOutUp {
-    20% {
-        transform: translate3d(0, -10px, 0);
-    }
-
-    40%,
-    45% {
-        opacity: 1;
-        transform: translate3d(0, 20px, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, -2000px, 0);
-    }
-}
-
-.semi-bounceOutUp {
-    animation-name: semi-bounceOutUp;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeIn.css

@@ -1,19 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-.semi-fadeIn {
-    animation-name: semi-fadeIn;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInDown.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInDown {
-    animation-name: semi-fadeInDown;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInDownBig.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInDownBig {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -2000px, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInDownBig {
-    animation-name: semi-fadeInDownBig;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInLeft.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInLeft {
-    from {
-        opacity: 0;
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInLeft {
-    animation-name: semi-fadeInLeft;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInLeftBig.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInLeftBig {
-    from {
-        opacity: 0;
-        transform: translate3d(-2000px, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInLeftBig {
-    animation-name: semi-fadeInLeftBig;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInRight.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInRight {
-    from {
-        opacity: 0;
-        transform: translate3d(100%, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInRight {
-    animation-name: semi-fadeInRight;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInRightBig.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInRightBig {
-    from {
-        opacity: 0;
-        transform: translate3d(2000px, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInRightBig {
-    animation-name: semi-fadeInRightBig;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInUp.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInUp {
-    from {
-        opacity: 0;
-        transform: translate3d(0, 100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInUp {
-    animation-name: semi-fadeInUp;
-}
-

packages/semi-animation-styled/src/fading_entrances/fadeInUpBig.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeInUpBig {
-    from {
-        opacity: 0;
-        transform: translate3d(0, 2000px, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-fadeInUpBig {
-    animation-name: semi-fadeInUpBig;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOut.css

@@ -1,19 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-.semi-fadeOut {
-    animation-name: semi-fadeOut;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutDown.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutDown {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, 100%, 0);
-    }
-}
-
-.semi-fadeOutDown {
-    animation-name: semi-fadeOutDown;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutDownBig.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutDownBig {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, 2000px, 0);
-    }
-}
-
-.semi-fadeOutDownBig {
-    animation-name: semi-fadeOutDownBig;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutLeft.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutLeft {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-
-.semi-fadeOutLeft {
-    animation-name: semi-fadeOutLeft;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutLeftBig.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutLeftBig {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(-2000px, 0, 0);
-    }
-}
-
-.semi-fadeOutLeftBig {
-    animation-name: semi-fadeOutLeftBig;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutRight.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutRight {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(100%, 0, 0);
-    }
-}
-
-.semi-fadeOutRight {
-    animation-name: semi-fadeOutRight;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutRightBig.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutRightBig {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(2000px, 0, 0);
-    }
-}
-
-.semi-fadeOutRightBig {
-    animation-name: semi-fadeOutRightBig;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutUp.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutUp {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, -100%, 0);
-    }
-}
-
-.semi-fadeOutUp {
-    animation-name: semi-fadeOutUp;
-}
-

packages/semi-animation-styled/src/fading_exits/fadeOutUpBig.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-fadeOutUpBig {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, -2000px, 0);
-    }
-}
-
-.semi-fadeOutUpBig {
-    animation-name: semi-fadeOutUpBig;
-}
-

packages/semi-animation-styled/src/flippers/flip.css

@@ -1,37 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flip {
-    from {
-        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-        animation-timing-function: ease-out;
-    }
-
-    40% {
-        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-        animation-timing-function: ease-out;
-    }
-
-    50% {
-        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-        animation-timing-function: ease-in;
-    }
-
-    80% {
-        transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-        animation-timing-function: ease-in;
-    }
-
-    to {
-        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-        animation-timing-function: ease-in;
-    }
-}
-
-.semi-animated.semi-flip {
-    backface-visibility: visible;
-    animation-name: semi-flip;
-}
-

packages/semi-animation-styled/src/flippers/flipInX.css

@@ -1,36 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flipInX {
-    from {
-        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-        animation-timing-function: ease-in;
-        opacity: 0;
-    }
-
-    40% {
-        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-        animation-timing-function: ease-in;
-    }
-
-    60% {
-        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-        opacity: 1;
-    }
-
-    80% {
-        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-    }
-
-    to {
-        transform: perspective(400px);
-    }
-}
-
-.semi-flipInX {
-    backface-visibility: visible !important;
-    animation-name: semi-flipInX;
-}
-

packages/semi-animation-styled/src/flippers/flipInY.css

@@ -1,36 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flipInY {
-    from {
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        animation-timing-function: ease-in;
-        opacity: 0;
-    }
-
-    40% {
-        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        animation-timing-function: ease-in;
-    }
-
-    60% {
-        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        opacity: 1;
-    }
-
-    80% {
-        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-    }
-
-    to {
-        transform: perspective(400px);
-    }
-}
-
-.semi-flipInY {
-    backface-visibility: visible !important;
-    animation-name: semi-flipInY;
-}
-

packages/semi-animation-styled/src/flippers/flipOutX.css

@@ -1,27 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flipOutX {
-    from {
-        transform: perspective(400px);
-    }
-
-    30% {
-        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-        opacity: 1;
-    }
-
-    to {
-        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-        opacity: 0;
-    }
-}
-
-.semi-flipOutX {
-    animation-duration: .75s;
-    animation-name: semi-flipOutX;
-    backface-visibility: visible !important;
-}
-

packages/semi-animation-styled/src/flippers/flipOutY.css

@@ -1,27 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-flipOutY {
-    from {
-        transform: perspective(400px);
-    }
-
-    30% {
-        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-        opacity: 1;
-    }
-
-    to {
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        opacity: 0;
-    }
-}
-
-.semi-flipOutY {
-    animation-duration: .75s;
-    backface-visibility: visible !important;
-    animation-name: semi-flipOutY;
-}
-

packages/semi-animation-styled/src/index.css

@@ -1,99 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@import './_base.css';
-
-@import './attention_seekers/bounce.css';
-@import './attention_seekers/flash.css';
-@import './attention_seekers/headShake.css';
-@import './attention_seekers/heartBeat.css';
-@import './attention_seekers/jello.css';
-@import './attention_seekers/pulse.css';
-@import './attention_seekers/rubberBand.css';
-@import './attention_seekers/shake.css';
-@import './attention_seekers/swing.css';
-@import './attention_seekers/tada.css';
-@import './attention_seekers/wobble.css';
-
-@import './bouncing_entrances/bounceIn.css';
-@import './bouncing_entrances/bounceInDown.css';
-@import './bouncing_entrances/bounceInLeft.css';
-@import './bouncing_entrances/bounceInRight.css';
-@import './bouncing_entrances/bounceInUp.css';
-
-@import './bouncing_exits/bounceOut.css';
-@import './bouncing_exits/bounceOutDown.css';
-@import './bouncing_exits/bounceOutLeft.css';
-@import './bouncing_exits/bounceOutRight.css';
-@import './bouncing_exits/bounceOutUp.css';
-
-@import './fading_entrances/fadeIn.css';
-@import './fading_entrances/fadeInDown.css';
-@import './fading_entrances/fadeInDownBig.css';
-@import './fading_entrances/fadeInLeft.css';
-@import './fading_entrances/fadeInLeftBig.css';
-@import './fading_entrances/fadeInRight.css';
-@import './fading_entrances/fadeInRightBig.css';
-@import './fading_entrances/fadeInUp.css';
-@import './fading_entrances/fadeInUpBig.css';
-
-@import './fading_exits/fadeOut.css';
-@import './fading_exits/fadeOutDown.css';
-@import './fading_exits/fadeOutDownBig.css';
-@import './fading_exits/fadeOutLeft.css';
-@import './fading_exits/fadeOutLeftBig.css';
-@import './fading_exits/fadeOutRight.css';
-@import './fading_exits/fadeOutRightBig.css';
-@import './fading_exits/fadeOutUp.css';
-@import './fading_exits/fadeOutUpBig.css';
-
-@import './flippers/flip.css';
-@import './flippers/flipInX.css';
-@import './flippers/flipInY.css';
-@import './flippers/flipOutX.css';
-@import './flippers/flipOutY.css';
-
-@import './lightspeed/lightSpeedIn.css';
-@import './lightspeed/lightSpeedOut.css';
-
-@import './rotating_entrances/rotateIn.css';
-@import './rotating_entrances/rotateInDownLeft.css';
-@import './rotating_entrances/rotateInDownRight.css';
-@import './rotating_entrances/rotateInUpLeft.css';
-@import './rotating_entrances/rotateInUpRight.css';
-
-@import './rotating_exits/rotateOut.css';
-@import './rotating_exits/rotateOutDownLeft.css';
-@import './rotating_exits/rotateOutDownRight.css';
-@import './rotating_exits/rotateOutUpLeft.css';
-@import './rotating_exits/rotateOutUpRight.css';
-
-@import './sliding_entrances/slideInDown.css';
-@import './sliding_entrances/slideInLeft.css';
-@import './sliding_entrances/slideInRight.css';
-@import './sliding_entrances/slideInUp.css';
-
-@import './sliding_exits/slideOutDown.css';
-@import './sliding_exits/slideOutLeft.css';
-@import './sliding_exits/slideOutRight.css';
-@import './sliding_exits/slideOutUp.css';
-
-@import './specials/hinge.css';
-@import './specials/jackInTheBox.css';
-@import './specials/rollIn.css';
-@import './specials/rollOut.css';
-
-@import './zooming_entrances/zoomIn.css';
-@import './zooming_entrances/zoomInDown.css';
-@import './zooming_entrances/zoomInLeft.css';
-@import './zooming_entrances/zoomInRight.css';
-@import './zooming_entrances/zoomInUp.css';
-
-@import './zooming_exits/zoomOut.css';
-@import './zooming_exits/zoomOutDown.css';
-@import './zooming_exits/zoomOutLeft.css';
-@import './zooming_exits/zoomOutRight.css';
-@import './zooming_exits/zoomOutUp.css';
-

packages/semi-animation-styled/src/lightspeed/lightSpeedIn.css

@@ -1,30 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-lightSpeedIn {
-    from {
-        transform: translate3d(100%, 0, 0) skewX(-30deg);
-        opacity: 0;
-    }
-
-    60% {
-        transform: skewX(20deg);
-        opacity: 1;
-    }
-
-    80% {
-        transform: skewX(-5deg);
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-lightSpeedIn {
-    animation-name: semi-lightSpeedIn;
-    animation-timing-function: ease-out;
-}
-

packages/semi-animation-styled/src/lightspeed/lightSpeedOut.css

@@ -1,21 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-lightSpeedOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        transform: translate3d(100%, 0, 0) skewX(30deg);
-        opacity: 0;
-    }
-}
-
-.semi-lightSpeedOut {
-    animation-name: semi-lightSpeedOut;
-    animation-timing-function: ease-in;
-}
-

packages/semi-animation-styled/src/rotating_entrances/rotateIn.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateIn {
-    from {
-        transform-origin: center;
-        transform: rotate3d(0, 0, 1, -200deg);
-        opacity: 0;
-    }
-
-    to {
-        transform-origin: center;
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-}
-
-.semi-rotateIn {
-    animation-name: semi-rotateIn;
-}
-

packages/semi-animation-styled/src/rotating_entrances/rotateInDownLeft.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateInDownLeft {
-    from {
-        transform-origin: left bottom;
-        transform: rotate3d(0, 0, 1, -45deg);
-        opacity: 0;
-    }
-
-    to {
-        transform-origin: left bottom;
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-}
-
-.semi-rotateInDownLeft {
-    animation-name: semi-rotateInDownLeft;
-}
-

packages/semi-animation-styled/src/rotating_entrances/rotateInDownRight.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateInDownRight {
-    from {
-        transform-origin: right bottom;
-        transform: rotate3d(0, 0, 1, 45deg);
-        opacity: 0;
-    }
-
-    to {
-        transform-origin: right bottom;
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-}
-
-.semi-rotateInDownRight {
-    animation-name: semi-rotateInDownRight;
-}
-

packages/semi-animation-styled/src/rotating_entrances/rotateInUpLeft.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateInUpLeft {
-    from {
-        transform-origin: left bottom;
-        transform: rotate3d(0, 0, 1, 45deg);
-        opacity: 0;
-    }
-
-    to {
-        transform-origin: left bottom;
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-}
-
-.semi-rotateInUpLeft {
-    animation-name: semi-rotateInUpLeft;
-}
-

packages/semi-animation-styled/src/rotating_entrances/rotateInUpRight.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateInUpRight {
-    from {
-        transform-origin: right bottom;
-        transform: rotate3d(0, 0, 1, -90deg);
-        opacity: 0;
-    }
-
-    to {
-        transform-origin: right bottom;
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-}
-
-.semi-rotateInUpRight {
-    animation-name: semi-rotateInUpRight;
-}
-

packages/semi-animation-styled/src/rotating_exits/rotateOut.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateOut {
-    from {
-        transform-origin: center;
-        opacity: 1;
-    }
-
-    to {
-        transform-origin: center;
-        transform: rotate3d(0, 0, 1, 200deg);
-        opacity: 0;
-    }
-}
-
-.semi-rotateOut {
-    animation-name: semi-rotateOut;
-}
-

packages/semi-animation-styled/src/rotating_exits/rotateOutDownLeft.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateOutDownLeft {
-    from {
-        transform-origin: left bottom;
-        opacity: 1;
-    }
-
-    to {
-        transform-origin: left bottom;
-        transform: rotate3d(0, 0, 1, 45deg);
-        opacity: 0;
-    }
-}
-
-.semi-rotateOutDownLeft {
-    animation-name: semi-rotateOutDownLeft;
-}
-

packages/semi-animation-styled/src/rotating_exits/rotateOutDownRight.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateOutDownRight {
-    from {
-        transform-origin: right bottom;
-        opacity: 1;
-    }
-
-    to {
-        transform-origin: right bottom;
-        transform: rotate3d(0, 0, 1, -45deg);
-        opacity: 0;
-    }
-}
-
-.semi-rotateOutDownRight {
-    animation-name: semi-rotateOutDownRight;
-}
-

packages/semi-animation-styled/src/rotating_exits/rotateOutUpLeft.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateOutUpLeft {
-    from {
-        transform-origin: left bottom;
-        opacity: 1;
-    }
-
-    to {
-        transform-origin: left bottom;
-        transform: rotate3d(0, 0, 1, -45deg);
-        opacity: 0;
-    }
-}
-
-.semi-rotateOutUpLeft {
-    animation-name: semi-rotateOutUpLeft;
-}
-

packages/semi-animation-styled/src/rotating_exits/rotateOutUpRight.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-rotateOutUpRight {
-    from {
-        transform-origin: right bottom;
-        opacity: 1;
-    }
-
-    to {
-        transform-origin: right bottom;
-        transform: rotate3d(0, 0, 1, 90deg);
-        opacity: 0;
-    }
-}
-
-.semi-rotateOutUpRight {
-    animation-name: semi-rotateOutUpRight;
-}
-

packages/semi-animation-styled/src/sliding_entrances/slideInDown.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideInDown {
-    from {
-        transform: translate3d(0, -100%, 0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-slideInDown {
-    animation-name: semi-slideInDown;
-}
-

packages/semi-animation-styled/src/sliding_entrances/slideInLeft.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideInLeft {
-    from {
-        transform: translate3d(-100%, 0, 0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-slideInLeft {
-    animation-name: semi-slideInLeft;
-}
-

packages/semi-animation-styled/src/sliding_entrances/slideInRight.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideInRight {
-    from {
-        transform: translate3d(100%, 0, 0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-slideInRight {
-    animation-name: semi-slideInRight;
-}
-

packages/semi-animation-styled/src/sliding_entrances/slideInUp.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideInUp {
-    from {
-        transform: translate3d(0, 100%, 0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-slideInUp {
-    animation-name: semi-slideInUp;
-}
-

packages/semi-animation-styled/src/sliding_exits/slideOutDown.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideOutDown {
-    from {
-        transform: translate3d(0, 0, 0);
-    }
-
-    to {
-        visibility: hidden;
-        transform: translate3d(0, 100%, 0);
-    }
-}
-
-.semi-slideOutDown {
-    animation-name: semi-slideOutDown;
-}
-

packages/semi-animation-styled/src/sliding_exits/slideOutLeft.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideOutLeft {
-    from {
-        transform: translate3d(0, 0, 0);
-    }
-
-    to {
-        visibility: hidden;
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-
-.semi-slideOutLeft {
-    animation-name: semi-slideOutLeft;
-}
-

packages/semi-animation-styled/src/sliding_exits/slideOutRight.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideOutRight {
-    from {
-        transform: translate3d(0, 0, 0);
-    }
-
-    to {
-        visibility: hidden;
-        transform: translate3d(100%, 0, 0);
-    }
-}
-
-.semi-slideOutRight {
-    animation-name: semi-slideOutRight;
-}
-

packages/semi-animation-styled/src/sliding_exits/slideOutUp.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-slideOutUp {
-    from {
-        transform: translate3d(0, 0, 0);
-    }
-
-    to {
-        visibility: hidden;
-        transform: translate3d(0, -100%, 0);
-    }
-}
-
-.semi-slideOutUp {
-    animation-name: semi-slideOutUp;
-}
-

packages/semi-animation-styled/src/specials/hinge.css

@@ -1,37 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-hinge {
-    0% {
-        transform-origin: top left;
-        animation-timing-function: ease-in-out;
-    }
-
-    20%,
-    60% {
-        transform: rotate3d(0, 0, 1, 80deg);
-        transform-origin: top left;
-        animation-timing-function: ease-in-out;
-    }
-
-    40%,
-    80% {
-        transform: rotate3d(0, 0, 1, 60deg);
-        transform-origin: top left;
-        animation-timing-function: ease-in-out;
-        opacity: 1;
-    }
-
-    to {
-        transform: translate3d(0, 700px, 0);
-        opacity: 0;
-    }
-}
-
-.semi-hinge {
-    animation-duration: 2s;
-    animation-name: semi-hinge;
-}
-

packages/semi-animation-styled/src/specials/jackInTheBox.css

@@ -1,30 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-jackInTheBox {
-    from {
-        opacity: 0;
-        transform: scale(.1) rotate(30deg);
-        transform-origin: center bottom;
-    }
-
-    50% {
-        transform: rotate(-10deg);
-    }
-
-    70% {
-        transform: rotate(3deg);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.semi-jackInTheBox {
-    animation-name: semi-jackInTheBox;
-}
-

packages/semi-animation-styled/src/specials/rollIn.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes semi-rollIn {
-    from {
-        opacity: 0;
-        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-    }
-
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.semi-rollIn {
-    animation-name: semi-rollIn;
-}
-

packages/semi-animation-styled/src/specials/rollOut.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes semi-rollOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-    }
-}
-
-.semi-rollOut {
-    animation-name: semi-rollOut;
-}
-

packages/semi-animation-styled/src/zooming_entrances/zoomIn.css

@@ -1,20 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomIn {
-    from {
-        opacity: 0;
-        transform: scale3d(.3, .3, .3);
-    }
-
-    50% {
-        opacity: 1;
-    }
-}
-
-.semi-zoomIn {
-    animation-name: semi-zoomIn;
-}
-

packages/semi-animation-styled/src/zooming_entrances/zoomInDown.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomInDown {
-    from {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomInDown {
-    animation-name: semi-zoomInDown;
-}
-

packages/semi-animation-styled/src/zooming_entrances/zoomInLeft.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomInLeft {
-    from {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomInLeft {
-    animation-name: semi-zoomInLeft;
-}
-

packages/semi-animation-styled/src/zooming_entrances/zoomInRight.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomInRight {
-    from {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomInRight {
-    animation-name: semi-zoomInRight;
-}
-

packages/semi-animation-styled/src/zooming_entrances/zoomInUp.css

@@ -1,23 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomInUp {
-    from {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomInUp {
-    animation-name: semi-zoomInUp;
-}
-

packages/semi-animation-styled/src/zooming_exits/zoomOut.css

@@ -1,24 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomOut {
-    from {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
-        transform: scale3d(.3, .3, .3);
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-.semi-zoomOut {
-    animation-name: semi-zoomOut;
-}
-

packages/semi-animation-styled/src/zooming_exits/zoomOutDown.css

@@ -1,24 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomOutDown {
-    40% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    to {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-        transform-origin: center bottom;
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomOutDown {
-    animation-name: semi-zoomOutDown;
-}
-

packages/semi-animation-styled/src/zooming_exits/zoomOutLeft.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomOutLeft {
-    40% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: scale(.1) translate3d(-2000px, 0, 0);
-        transform-origin: left center;
-    }
-}
-
-.semi-zoomOutLeft {
-    animation-name: semi-zoomOutLeft;
-}
-

packages/semi-animation-styled/src/zooming_exits/zoomOutRight.css

@@ -1,22 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomOutRight {
-    40% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: scale(.1) translate3d(2000px, 0, 0);
-        transform-origin: right center;
-    }
-}
-
-.semi-zoomOutRight {
-    animation-name: semi-zoomOutRight;
-}
-

packages/semi-animation-styled/src/zooming_exits/zoomOutUp.css

@@ -1,24 +0,0 @@
-/*
-* Modified based on animate.css and added prefix name to prevent style conflicts
-* Reference: https://github.com/animate-css/animate.css
-*/
-
-@keyframes semi-zoomOutUp {
-    40% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
-    }
-
-    to {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-        transform-origin: center bottom;
-        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
-    }
-}
-
-.semi-zoomOutUp {
-    animation-name: semi-zoomOutUp;
-}
-

packages/semi-animation-styled/style.ts

@@ -1 +0,0 @@
-import './src/index.css';

packages/semi-animation/babel.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                modules: false,
-                targets: {
-                    browsers: [
-                        "> 0.5%",
-                        "last 2 versions",
-                        "Firefox ESR",
-                        "not dead",
-                        "not IE 11"
-                    ]
-                }
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            },
-        ],
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
-        ],
-    ]
-};

packages/semi-animation/getBabelConfig.js

@@ -0,0 +1,35 @@
+module.exports = ({ isESM }) => {
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    modules: isESM ? false : 'commonjs',
+                    targets: {
+                        browsers: [
+                            "> 0.5%",
+                            "last 2 versions",
+                            "Firefox ESR",
+                            "not dead",
+                            "not IE 11"
+                        ]
+                    }
+                },
+            ],
+        ],
+        plugins: [
+            [
+                '@babel/plugin-transform-runtime',
+                {
+                    corejs: 3
+                },
+            ],
+            [
+                '@babel/plugin-proposal-decorators',
+                {
+                    legacy: true,
+                },
+            ],
+        ]
+    };
+};

packages/semi-animation/gulpfile.js

@@ -5,21 +5,30 @@ const gulpTS = require('gulp-typescript');
 const gulpBabel = require('gulp-babel');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const babelConfig = require('./babel.config');
+const getBabelConfig = require('./getBabelConfig');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-gulp.task('compileTS', function compileTSX() {
+function compileTS(isESM) {
+    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
     const tsStream = gulp.src(['**/*.ts', '!_story/**/*.*', '!node_modules/**/*.*', '!lib/**/*.*'])
         .pipe(gulpTS(tsConfig.compilerOptions));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(babelConfig))
-        .pipe(gulp.dest('lib/es'));
-    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
+        .pipe(gulpBabel(getBabelConfig({ isESM })))
+        .pipe(gulp.dest(targetDir));
+    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
     return merge2([jsStream, dtsStream]);
+}
+
+gulp.task('compileTSForESM', function compileTSForESM() {
+    return compileTS(true);
+});
+
+gulp.task('compileTSForCJS', function compileTSForCJS() {
+    return compileTS(false);
 });
 
-gulp.task('compileLib', gulp.series(['cleanLib', 'compileTS']));
+gulp.task('compileLib', gulp.series(['cleanLib', gulp.parallel('compileTSForESM', 'compileTSForCJS')]));
 

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.1.1",
+  "version": "2.1.0-next.1",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",
@@ -8,7 +8,7 @@
   ],
   "homepage": "",
   "license": "MIT",
-  "main": "lib/es/index.js",
+  "main": "lib/cjs/index.js",
   "module": "lib/es/index.js",
   "typings": "lib/es/index.d.ts",
   "directories": {

packages/semi-foundation/anchor/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isArray, get } from 'lodash-es';
+import { isArray, get } from 'lodash';
 import scrollIntoView, { CustomBehaviorOptions } from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
 import React from 'react';

packages/semi-foundation/autoComplete/foundation.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-const, max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isString, isNumber, isUndefined, isObject } from 'lodash-es';
+import { isString, isNumber, isUndefined, isObject } from 'lodash';
 import warning from '../utils/warning';
 import KeyCode from '../utils/keyCode';
 

packages/semi-foundation/babel.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                modules: false,
-                targets: {
-                    browsers: [
-                        "> 0.5%",
-                        "last 2 versions",
-                        "Firefox ESR",
-                        "not dead",
-                        "not IE 11"
-                    ]
-                }
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            },
-        ],
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
-        ],
-    ]
-};