Merge pull request #354 from DouyinFE/main

merge main

.codesandbox/ci.json

@@ -0,0 +1,21 @@
+{
+    "installCommand": "install:codesandbox",
+    "buildCommand": "build:lib",
+    "packages": [
+        "packages/semi-animation",
+        "packages/semi-animation-react",
+        "packages/semi-animation-styled",
+        "packages/semi-foundation",
+        "packages/semi-icons",
+        "packages/semi-illustrations",
+        "packages/semi-scss-compile",
+        "packages/semi-theme-default",
+        "packages/semi-ui",
+        "packages/semi-webpack"
+    ],
+    "node": "14",
+    "sandboxes": [
+        "/.codesandbox/examples/pr-story",
+        "oubej"
+    ]
+}

.codesandbox/examples/README.md

@@ -0,0 +1,49 @@
+# Description
+
+This folder is the sample template of CodeSandbox.
+
+When you submit the PR, you can overwrite the sample code according to the scenario (fix/feature).
+
+> This will automatically build a CodeSandbox environment based on this PR. The Reviewer can directly access your sample after clicking the link , No need to preview under the PR branch :)
+
+# Usage
+
+## pr-story
+
+- clone code and run
+
+```bash
+# if you have clone semi-design code, no need to clone it again
+git https://github.com/DouyinFE/semi-design.git
+
+cd .codesandbox/examples/pr-story
+yarn install
+yarn start
+```
+
+- override code based on this pull request
+
+Only need to change  `App.jsx` file. 
+
+For example, I modified some logic of the `Input` `prefix` API, and the code related to `Input` `prefix` can be included in the sample code.
+
+```javascript
+// .codesandbox/examples/pr-story/src/App.jsx
+import React from "react";
+
+import { Input } from "@douyinfe/semi-ui";
+import "./App.css";
+
+/**
+ * Write a demo based on this PR
+ */
+export default function App() {
+  return (
+    <div className="app">
+      {/* ------- your code start ------- DON'T DELETE THIS LINE -------  */}
+      <Input prefix="semi" style={{ width: 200 }} />
+      {/* ------- your code end ------- DON'T DELETE THIS LINE ------- */}
+    </div>
+  );
+}
+```

.codesandbox/examples/pr-story/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+!public/

.codesandbox/examples/pr-story/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `yarn build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

.codesandbox/examples/pr-story/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "pr-story",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@douyinfe/semi-icons": "latest",
+    "@douyinfe/semi-illustrations": "latest",
+    "@douyinfe/semi-ui": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

.codesandbox/examples/pr-story/public/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
+    <title>Semi PR Template</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

.codesandbox/examples/pr-story/src/App.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Button, Empty } from "@douyinfe/semi-ui";
+import { IconSemiLogo } from "@douyinfe/semi-icons";
+import {
+  IllustrationConstruction,
+  IllustrationConstructionDark,
+} from "@douyinfe/semi-illustrations";
+
+import "./App.css";
+
+/**
+ * Write a demo based on this PR
+ */
+export default function App() {
+  return (
+    <div className="app">
+      {/* ------- your code start ------- DON'T DELETE THIS LINE -------  */}
+      <Button icon={<IconSemiLogo />}>hello semi</Button>
+      <Empty
+        image={<IllustrationConstruction />}
+        darkModeImage={<IllustrationConstructionDark />}
+        title={"Write a demo about this pull request"}
+        description="Semi build on this PR"
+      />
+      {/* ------- your code end ------- DON'T DELETE THIS LINE ------- */}
+    </div>
+  );
+}

.codesandbox/examples/pr-story/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

.github/workflows/test.yml

@@ -15,6 +15,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
 
       - name: Run install
         run: npm i -g lerna && npm run bootstrap

.gitignore

@@ -99,7 +99,6 @@ coverage
 
 # node-waf configuration
 .lock-wscript
-yarn.lock
 package-lock.json
 
 # Optional npm cache directory

README-zh_CN.md

@@ -10,7 +10,7 @@
 <div align="center">
 
 [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] 
-[![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url]
+[![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url]
 
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
@@ -25,6 +25,11 @@
 [chromatic-badge]: https://img.shields.io/badge/test-chromatic-f52
 [chromatic-url]: https://www.chromatic.com/
 
+[build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
+[build-js-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/umd/semi-ui.min.js
+[build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
+[build-css-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/css/semi.min.css
+
 </div>
 
 <p>

README.md

@@ -10,7 +10,7 @@
 <div align="center">
 
 [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url]
-[![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url]
+[![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url]
 
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
@@ -25,6 +25,11 @@
 [chromatic-badge]: https://img.shields.io/badge/test-chromatic-f52
 [chromatic-url]: https://www.chromatic.com/
 
+[build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
+[build-js-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/umd/semi-ui.min.js
+[build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
+[build-css-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/css/semi.min.css
+
 </div>
 
 <p>

content/other/locale/index-en-US.md

@@ -23,7 +23,7 @@ brief: Internationalized components to provide multilingual support for Semi com
 
 ## Components supported
 
-> Date Picker, Time Picker, Modal, Pagination, Select, Table, Cascader, Tree Select、List、Typography、Transfer
+> DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav、Upload
 
 ## How to use
 

content/other/locale/index.md

@@ -21,7 +21,7 @@ brief: 国际化组件，为 Semi 组件提供多语言支持
 | v1.28.0     | 繁体中文: zh_TW       |
 ## 已支持组件
 
-> DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav
+> DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav、Upload
 
 ## 使用
 

content/show/list/index-en-US.md

@@ -920,6 +920,430 @@ class DraggableList extends React.Component {
 render(DraggableList);
 ```
 
+
+If you use [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc), here is also an example
+
+```jsx live=true dir="column" hideInDSM
+import React, { useState } from 'react';
+import { List } from '@douyinfe/semi-ui';
+import { IconHandle } from '@douyinfe/semi-icons';
+import { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow',
+        'Saharan story',
+        'Those things',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+        'Moon and sixpence',
+        'The silent majority',
+        'First person singular',
+    ];
+
+    const [list, setList] = useState(data.slice(0, 6));
+
+    const renderItem = (props) => {
+        const { item } = props;
+        const DragHandle = sortableHandle(() => <IconHandle className={`list-item-drag-handler`} style={{ marginRight: 4 }} />);
+        return (
+            <List.Item className='component-list-demo-drag-item list-item'>
+                <DragHandle />
+                {item}
+            </List.Item>
+        );
+    };
+
+    const arrayMove = (array, from, to) => {
+        let newArray = array.slice();
+        newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+        return newArray;
+    };
+
+    const onSortEnd = (callbackProps) => {
+        let { oldIndex, newIndex } = callbackProps;
+        let newList = arrayMove(list, oldIndex, newIndex);
+        setList(newList);
+    };
+    
+    const SortableItem = SortableElement(props => renderItem(props));
+    const SortableList = SortableContainer(
+        ({ items }) => {
+            return (
+                <div className="sortable-list-main">
+                    {items.map((item, index) => (
+                        <SortableItem key={item} index={index} item={item}></SortableItem>
+                    ))}
+                </div>
+            );
+        },
+        { distance: 10 }
+    );
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List style={{ width: '100%' }} className='component-list-demo-booklist'>
+                    <SortableList useDragHandle onSortEnd={onSortEnd} items={list}></SortableList>
+                </List>
+            </div>
+
+        </div>
+    );
+};
+```
+
+### With Pagination
+
+You can use Pagination in combination to achieve a paged List
+
+```jsx live=true dir="column" hideInDSM
+import React, { useState } from 'react';
+import { List, Pagination } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow',
+        'Saharan story',
+        'Those things in the Ming Dynasty',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+        'Moon and sixpence',
+        'The silent majority',
+        'First person singular',
+    ];
+
+    const [page, onPageChange] = useState(1);
+
+    let pageSize = 4;
+
+    const getData = (page) => {
+        let start = (page - 1) * pageSize;
+        let end = page * pageSize;
+        return data.slice(start, end);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <List
+                    dataSource={getData(page)}
+                    split={false}
+                    size='small'
+                    className='component-list-demo-booklist'
+                    style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                    renderItem={item => <List.Item className='list-item'>{item}</List.Item>}
+                />
+                <Pagination size='small' style={{ width: '100%', flexBasis: '100%', justifyContent: 'center' }} pageSize={pageSize} total={data.length} currentPage={page} onChange={cPage => onPageChange(cPage)} />
+            </div>
+        </div>
+    );
+};
+```
+
+### With filter
+
+You can use it by assembling Input to filter the List
+
+```jsx live=true dir="column"  hideInDSM
+import React, { useState } from 'react';
+import { List, Input } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow',
+        'Saharan story',
+        'Those things in the Ming Dynasty',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+    ];
+
+    const [list, setList] = useState(data);
+
+    const onSearch = (string) => {
+        let newList;
+        if (string) {
+            newList = data.filter(item => item.includes(string));
+        } else {
+            newList = data;
+        }
+        setList(newList);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    header={<Input onCompositionEnd={(v) => onSearch(v.target.value)} onChange={(v) => !v ? onSearch() : null} placeholder='search' prefix={<IconSearch />} />}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={item =>
+                        <List.Item className='list-item'>{item}</List.Item>
+                    }
+                />
+            </div>
+        </div>
+    )
+}
+```
+
+### Add delete item
+
+```jsx live=true dir="column" hideInDSM
+import React, { useState } from 'react';
+import { List, Input, Button } from '@douyinfe/semi-ui';
+import { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow',
+        'Saharan story',
+        'Those things in the Ming Dynasty',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+        'Moon and sixpence',
+        'The silent majority',
+        'First person singular',
+    ];
+    
+    const [list, setList] = useState(data.slice(0, 8));
+
+    const updateList = (item) => {
+        let newList;
+        if (item) {
+            newList = list.filter(i => item !== i);
+        } else {
+            newList = list.concat(data.slice(list.length, list.length + 1))
+        }
+        setList(newList);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={item => 
+                        <div style={{ margin: 4 }} className='list-item'>
+                            <Button type='danger' theme='borderless' icon={<IconMinusCircle />} onClick={() => updateList(item)} style={{ marginRight: 4 }} />
+                            {item}
+                        </div>
+                    }
+                />
+                <div style={{ margin: 4, fontSize: 14  }} onClick={() => updateList()}>
+                    <Button theme='borderless'  icon={<IconPlusCircle />}  style={{ marginRight: 4, color: 'var(--semi-color-info)' }}>
+                    </Button>
+                    Add book
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+### Single or multiple selection
+
+You can enhance the List into a list selector by combining Radio or Checkbox
+
+```jsx live=true dir="column" hideInDSM
+
+import React, { useState } from 'react';
+import { List, Input, Button, Checkbox, Radio, RadioGroup, CheckboxGroup } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow',
+        'Saharan story',
+        'Those things in the Ming Dynasty',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+        'Moon and sixpence',
+        'The silent majority',
+        'First person singular',
+    ];
+
+    const [page, onPageChange] = useState(1);
+    const [checkboxVal, setCV] = useState(data[0]);
+    const [radioVal, setRV] = useState(data[0]);
+
+    let pageSize = 8;
+
+    const getData = (page) => {
+        let start = (page - 1) * pageSize;
+        let end = page * pageSize;
+        return data.slice(start, end);
+    };
+
+    return (
+        <div style={{ display: 'flex' }}>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <CheckboxGroup value={checkboxVal} onChange={(value) => setCV(value)}>
+                    <List
+                        dataSource={getData(page)}
+                        className='component-list-demo-booklist'
+                        split={false}
+                        size='small'
+                        style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                        renderItem={item => <List.Item className='list-item'><Checkbox value={item}>{item}</Checkbox></List.Item>}
+                    />
+                </CheckboxGroup>
+            </div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <RadioGroup value={radioVal} onChange={(e) => setRV(e.target.value)}>
+                    <List
+                        className='component-list-demo-booklist'
+                        dataSource={getData(page)}
+                        split={false}
+                        size='small'
+                        style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                        renderItem={item => <List.Item className='list-item'><Radio value={item}>{item}</Radio></List.Item>}
+                    />
+                </RadioGroup>
+            </div>
+        </div>
+    );
+};
+```
+
+### Keyboard events
+
+You can monitor the keyboard events of the corresponding keys by yourself to realize the selection of different items. As in the following example, you can use the up and down arrow keys to select different items
+
+```jsx live=true dir="column" hideInDSM
+import React, { useState, useRef } from 'react';
+import { List, Input, Button } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        'Siege',
+        'The ordinary world',
+        'Three Body',
+        'Snow in the Snow ',
+        'Saharan story',
+        'Those things in the Ming Dynasty',
+        'A little monk of Zen',
+        'Dune',
+        'The courage to be hated',
+        'Crime and Punishment',
+        'Moon and sixpence',
+        'The silent majority',
+        'First person singular',
+    ];
+
+    const [list, setList] = useState(data.slice(0, 10));
+    const [hoverIndex, setHi] = useState(-1);
+    const i = useRef(-1);
+
+    let changeIndex = (offset) => {
+        let currentIndex = i.current;
+        let index = currentIndex + offset;
+        if (index < 0) {
+            index = list.length - 1;
+        }
+        if (index >= list.length) {
+            index = 0;
+        }
+        i.current = index;
+        setHi(index);
+    };
+    useEffect(() => {
+        let keydownHandler = (event) => {
+            let key = event.keyCode;
+            switch (key) {
+                case 38: // KeyCode.UP
+                    event.preventDefault();
+                    changeIndex(-1);
+                    break;
+                case 40: // KeyCode.DOWN
+                    event.preventDefault();
+                    changeIndex(1);
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', keydownHandler);
+        return () => {
+            window.removeEventListener('keydown', keydownHandler);
+        };
+    }, []);
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={(item, index) =>
+                        <List.Item className={index === hoverIndex ? 'component-list-demo-booklist-active-item' : ''}>{item}</List.Item>
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+The custom styles involved in the Demo of the above book list example are as follows
+
+```scss
+.component-list-demo-booklist {
+    .list-item {
+        &:hover {
+            background-color: var(--semi-color-fill-0);
+        }
+        &:active {
+            background-color: var(--semi-color-fill-1);
+        }
+    }
+}
+
+
+body > .component-list-demo-drag-item {
+    font-size: 14px;
+}
+
+.component-list-demo-booklist-active-item {
+    background-color: var(--semi-color-fill-0);
+}
+```
+
 ## API reference
 
 ### List

content/show/list/index.md

@@ -923,6 +923,434 @@ class DraggableList extends React.Component {
 render(DraggableList);
 ```
 
+如果你使用 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)，这里也有一个例子
+
+```jsx live=true dir="column" hideInDSM
+import React, { useState } from 'react';
+import { List } from '@douyinfe/semi-ui';
+import { IconHandle } from '@douyinfe/semi-icons';
+import { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';
+
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+        '月亮与六便士',
+        '沉默的大多数',
+        '第一人称单数',
+    ];
+
+    const [list, setList] = useState(data.slice(0, 6));
+
+    const renderItem = (props) => {
+        const { item } = props;
+        const DragHandle = sortableHandle(() => <IconHandle className={`list-item-drag-handler`} style={{ marginRight: 4 }} />);
+        return (
+            <List.Item className='component-list-demo-drag-item list-item'>
+                <DragHandle />
+                {item}
+            </List.Item>
+        );
+    };
+
+    const arrayMove = (array, from, to) => {
+        let newArray = array.slice();
+        newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+        return newArray;
+    };
+
+    const onSortEnd = (callbackProps) => {
+        let { oldIndex, newIndex } = callbackProps;
+        let newList = arrayMove(list, oldIndex, newIndex);
+        setList(newList);
+    };
+    
+    const SortableItem = SortableElement(props => renderItem(props));
+    const SortableList = SortableContainer(
+        ({ items }) => {
+            return (
+                <div className="sortable-list-main">
+                    {items.map((item, index) => (
+                        <SortableItem key={item} index={index} item={item}></SortableItem>
+                    ))}
+                </div>
+            );
+        },
+        { distance: 10 }
+    );
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List style={{ width: '100%' }} className='component-list-demo-booklist'>
+                    <SortableList useDragHandle onSortEnd={onSortEnd} items={list}></SortableList>
+                </List>
+            </div>
+
+        </div>
+    );
+};
+```
+
+### 带分页器 
+
+你可以组合使用 Pagination， 实现一个分页的 List
+
+```jsx live=true dir="column" hideInDSM
+
+import React, { useState } from 'react';
+import { List, Pagination } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+        '月亮与六便士',
+        '沉默的大多数',
+    ];
+
+    const [page, onPageChange] = useState(1);
+
+    let pageSize = 4;
+
+    const getData = (page) => {
+        let start = (page - 1) * pageSize;
+        let end = page * pageSize;
+        return data.slice(start, end);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <List
+                    dataSource={getData(page)}
+                    split={false}
+                    size='small'
+                    className='component-list-demo-booklist'
+                    style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                    renderItem={item => <List.Item className='list-item'>{item}</List.Item>}
+                />
+                <Pagination size='small' style={{ width: '100%', flexBasis: '100%', justifyContent: 'center' }} pageSize={pageSize} total={data.length} currentPage={page} onChange={cPage => onPageChange(cPage)} />
+            </div>
+        </div>
+    );
+};
+```
+
+### 带筛选器
+
+你可以通过组装 Input 使用，实现对 List 列表的筛选
+
+```jsx live=true dir="column"  hideInDSM
+
+import React, { useState } from 'react';
+import { List, Input } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+    ];
+
+    const [list, setList] = useState(data);
+
+    const onSearch = (string) => {
+        let newList;
+        if (string) {
+            newList = data.filter(item => item.includes(string));
+        } else {
+            newList = data;
+        }
+        setList(newList);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    header={<Input onCompositionEnd={(v) => onSearch(v.target.value)} onChange={(v) => !v ? onSearch() : null} placeholder='搜索' prefix={<IconSearch />} />}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={item =>
+                        <List.Item className='list-item'>{item}</List.Item>
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+### 添加删除项
+
+```jsx live=true dir="column" hideInDSM
+
+import React, { useState } from 'react';
+import { List, Input, Button } from '@douyinfe/semi-ui';
+import { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+        '月亮与六便士',
+        '沉默的大多数',
+        '第一人称单数',
+    ];
+    
+    const [list, setList] = useState(data.slice(0, 8));
+
+    const updateList = (item) => {
+        let newList;
+        if (item) {
+            newList = list.filter(i => item !== i);
+        } else {
+            newList = list.concat(data.slice(list.length, list.length + 1));
+        }
+        setList(newList);
+    };
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={item => 
+                        <div style={{ margin: 4 }} className='list-item'>
+                            <Button type='danger' theme='borderless' icon={<IconMinusCircle />} onClick={() => updateList(item)} style={{ marginRight: 4 }} />
+                            {item}
+                        </div>
+                    }
+                />
+                <div style={{ margin: 4, fontSize: 14  }} onClick={() => updateList()}>
+                    <Button theme='borderless' icon={<IconPlusCircle />} style={{ marginRight: 4, color: 'var(--semi-color-info)' }}>
+                    </Button>
+                    新增书籍
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+### 单选或多选
+
+你可以通过组合使用 Radio 或 Checkbox 将 List 增强为一个列表选择器
+
+```jsx live=true dir="column" hideInDSM
+
+import React, { useState } from 'react';
+import { List, Input, Button, Checkbox, Radio, RadioGroup, CheckboxGroup } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+        '月亮与六便士',
+        '沉默的大多数',
+        '第一人称单数',
+    ];
+
+    const [page, onPageChange] = useState(1);
+    const [checkboxVal, setCV] = useState(data[0]);
+    const [radioVal, setRV] = useState(data[0]);
+
+    let pageSize = 8;
+
+    const getData = (page) => {
+        let start = (page - 1) * pageSize;
+        let end = page * pageSize;
+        return data.slice(start, end);
+    };
+
+    return (
+        <div style={{ display: 'flex' }}>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <CheckboxGroup value={checkboxVal} onChange={(value) => setCV(value)}>
+                    <List
+                        dataSource={getData(page)}
+                        className='component-list-demo-booklist'
+                        split={false}
+                        size='small'
+                        style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                        renderItem={item => <List.Item className='list-item'><Checkbox value={item}>{item}</Checkbox></List.Item>}
+                    />
+                </CheckboxGroup>
+            </div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap' }}>
+                <RadioGroup value={radioVal} onChange={(e) => setRV(e.target.value)}>
+                    <List
+                        className='component-list-demo-booklist'
+                        dataSource={getData(page)}
+                        split={false}
+                        size='small'
+                        style={{ border: '1px solid var(--semi-color-border)', flexBasis: '100%', flexShrink: 0 }}
+                        renderItem={item => <List.Item className='list-item'><Radio value={item}>{item}</Radio></List.Item>}
+                    />
+                </RadioGroup>
+            </div>
+        </div>
+    );
+};
+```
+
+### 响应键盘事件
+
+你可以自行监听对应按键的键盘事件，实现不同 Item 的选择。如下面这个例子，可以使用上下方向键选择不同Item  
+
+```jsx live=true dir="column" hideInDSM
+
+import React, { useState, useRef } from 'react';
+import { List, Input, Button } from '@douyinfe/semi-ui';
+
+() => {
+    const data = [
+        '围城',
+        '平凡的世界（全三册）',
+        '三体（全集）',
+        '雪中悍刀行（全集）',
+        '撒哈拉的故事',
+        '明朝那些事',
+        '一禅小和尚',
+        '沙丘',
+        '被讨厌的勇气',
+        '罪与罚',
+        '月亮与六便士',
+        '沉默的大多数',
+        '第一人称单数',
+    ];
+
+    const [list, setList] = useState(data.slice(0, 10));
+    const [hoverIndex, setHi] = useState(-1);
+    const i = useRef(-1);
+
+    let changeIndex = (offset) => {
+        let currentIndex = i.current;
+        let index = currentIndex + offset;
+        if (index < 0) {
+            index = list.length - 1;
+        }
+        if (index >= list.length) {
+            index = 0;
+        }
+        i.current = index;
+        setHi(index);
+    };
+    useEffect(() => {
+        let keydownHandler = (event) => {
+            let key = event.keyCode;
+            switch (key) {
+                case 38: // KeyCode.UP
+                    event.preventDefault();
+                    changeIndex(-1);
+                    break;
+                case 40: // KeyCode.DOWN
+                    event.preventDefault();
+                    changeIndex(1);
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', keydownHandler);
+        return () => {
+            window.removeEventListener('keydown', keydownHandler);
+        };
+    }, []);
+
+    return (
+        <div>
+            <div style={{ marginRight: 16, width: 280, display: 'flex', flexWrap: 'wrap', border: '1px solid var(--semi-color-border)' }}>
+                <List
+                    className='component-list-demo-booklist'
+                    dataSource={list}
+                    split={false}
+                    size='small'
+                    style={{ flexBasis: '100%', flexShrink: 0, borderBottom: '1px solid var(--semi-color-border)' }}
+                    renderItem={(item, index) =>
+                        <List.Item className={index === hoverIndex ? 'component-list-demo-booklist-active-item' : ''}>{item}</List.Item>
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+以上书单例子的Demo中涉及到的自定义样式如下
+
+```scss
+.component-list-demo-booklist {
+    .list-item {
+        &:hover {
+            background-color: var(--semi-color-fill-0);
+        }
+        &:active {
+            background-color: var(--semi-color-fill-1);
+        }
+    }
+}
+
+
+body > .component-list-demo-drag-item {
+    font-size: 14px;
+}
+
+.component-list-demo-booklist-active-item {
+    background-color: var(--semi-color-fill-0);
+}
+```
+
+
 ## API 参考
 
 ### List

content/start/changelog/index-en-US.md

@@ -16,6 +16,33 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.1.3 (2021-11-30)
+- 【Fix】
+  - Fix the bug of replacing source in ImportDeclaration during source code building
+  
+#### 🎉 2.1.2 (2021-11-30)
+- 【Feature】
+  - Support Next.js [#153](https://github.com/DouyinFE/semi-design/issues/153)
+  - Replace Feishu Logo icon
+- 【Fix】
+  - Fix the style problem of AutoComplete
+  - Fixed the problem that InputNumber does not have API syntax hints in the editor [#327](https://github.com/DouyinFE/semi-design/issues/327)
+  - Fix the wrong color of hover state border when Input focus [#332](https://github.com/DouyinFE/semi-design/issues/332)
+
+#### 🎉 2.1.1 (2021-11-26)
+- 【Fix】
+  - Provide UMD products of semi-icons and semi-illustrations to solve the problem that icons cannot be used in UMD scenarios [#215](https://github.com/DouyinFE/semi-design/issues/215)
+
+#### 🎉 2.1.0 (2021-11-26)
+- 【Fix】
+  - Fix the issue that the Collapsible component is stuck when expanding/retracting when the content has a margin [@ChelesteWang](https://github.com/ChelesteWang)
+- 【Style】
+  - Timeline adds $color-timeline_item_content-text-default Sass variable, which is used to configure the timeline title text color
+- 【Docs】
+  - Add a demo example of applying dark mode and bright mode to some modules [#301](https://github.com/DouyinFE/semi-design/issues/301)
+  - Update the Table sample, use sample code that is more suitable for the usage scenario, and add notes to some common problems [#315](https://github.com/DouyinFE/semi-design/issues/315)
+  - Added demo examples for use with Checkbox, Radio, Input, Pagination; added demo examples for drag sorting; added demo examples for keyboard response events
+
 #### 🎉 2.1.0-beta.3 (2021-11-24)
 - 【Fix】
   - Update the ts type definitions of some components, and fix the problem that the build report error when strict: true is enabled and skipLibCheck is false in tscofnig.json [#283](https://github.com/DouyinFE/semi-design/issues/283)

content/start/changelog/index.md

@@ -15,6 +15,33 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.1.3 (2021-11-30)
+- 【Fix】
+  - 修复在源码构建过程中，替换 ImportDeclaration 中 source 的bug
+
+#### 🎉 2.1.2 (2021-11-30)
+- 【Feature】
+  - 支持 Next.js [#153](https://github.com/DouyinFE/semi-design/issues/153)
+  - 替换飞书Logo图标
+- 【Fix】
+  - 修复 AutoComplete 的样式问题
+  - 修复 InputNumber 在编辑器没有 API 语法提示问题 [#327](https://github.com/DouyinFE/semi-design/issues/327)
+  - 修复 Input focus 时 hover 态边框颜色错误问题 [#332](https://github.com/DouyinFE/semi-design/issues/332)
+
+#### 🎉 2.1.1 (2021-11-26)
+- 【Fix】
+  - 提供 semi-icons、semi-illustrations 的 UMD 产物，解决 UMD 场景下无法使用 icon 的问题 [#215](https://github.com/DouyinFE/semi-design/issues/215)
+
+#### 🎉 2.1.0 (2021-11-26)
+- 【Fix】
+  - 修复 Collapsible 组件在 content 有 margin 时展开/收起卡顿的问题 [@ChelesteWang](https://github.com/ChelesteWang)
+- 【Style】
+  - Timeline 新增 $color-timeline_item_content-text-default Sass 变量，用于配置时间轴标题文字颜色
+- 【Docs】
+  - 增加对局部模块应用暗色模式、亮色模式的 Demo 例子 [#301](https://github.com/DouyinFE/semi-design/issues/301)
+  - 更新 Table 示例，使用更符合使用场景的示例代码，对一些常见问题添加备注 [#315](https://github.com/DouyinFE/semi-design/issues/315)
+  - List 增加与 Checkbox、Radio、Input、Pagination 搭配使用的 Demo 示例；增加拖拽排序的Demo示例；增加键盘响应事件的 Demo 示例
+
 #### 🎉 2.1.0-beta.3 (2021-11-24)
 - 【Fix】
   - 更新部分组件的ts类型定义，修复 tsconfig.json 开启 strict: true 且 skipLibCheck为false时 build报错的问题 [#283](https://github.com/DouyinFE/semi-design/issues/283)

content/start/dark-mode/index.md

@@ -32,7 +32,7 @@ function Demo() {
         const body = document.body;
         if (body.hasAttribute('theme-mode')) {
             body.removeAttribute('theme-mode');
-            // 通知官网更新当前模式，下同
+            // 以下这行代码，window.setMode仅用于当通过本Demo切换时，通知Semi官网Header记录更新当前模式（只用于演示）。在您的代码里无需存在。
             window.setMode('light');
         } else {
             body.setAttribute('theme-mode', 'dark');
@@ -322,4 +322,4 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
     );
 };
 
-```
+```

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

@@ -40,16 +40,31 @@ class Demo extends React.Component {
 
 ## Use UMD import in browser
 
+[![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
+
+[build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
+[build-js-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/umd/semi-ui.min.js
+[build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
+[build-css-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/css/semi.min.css
+
 > We do not recommend using the built file directly, as this will introduce all components in full and cannot be loaded on demand. But if there is indeed a need for non-construction scenarios, you can quote in the following ways
 
-Use script and link tags to import files directly in the browser, and use the global variable `SemiUI`
+Use script and link tags to import files directly in the browser, and use the global variable `SemiUI`、`SemiIcons`、`SemiIllustrations`
 
 1. Please make sure you have import `react` and `react-dom` in advance
 2. Import the JS file, the following example URL 2.0.0 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version (note that the build file is only available after v1.3.0)
-    - min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js`
-    - normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.js`
+    - semi-ui min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js`
+    - semi-ui normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.js`
+
+
+    - semi-icons min: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js`
+    - semi-icons normal: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js`
+
+    - semi-illustrations min: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js`
+    - semi-illustrations normal: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js`
 3. Import the CSS style file of the Semi default theme
-   `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`  
+    - `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`
+    - `https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css`
 
 ```diff
 <!DOCTYPE html>
@@ -62,9 +77,13 @@ Use script and link tags to import files directly in the browser, and use the gl
 +       <script src="https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js"></script>
 +       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css">
 
++       <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
++       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">
++       <script src="https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js"></script>
+
     </head>
     <body>
-        <div id="root">1</div>
+        <div id="root"></div>
     </body>
 </html>
 ```
@@ -72,10 +91,56 @@ Use script and link tags to import files directly in the browser, and use the gl
 ```html
 <script type="text/babel">
     const { Input, Button, Toast, Icon, Form } = SemiUI;
+    const { IconHome } = SemiIcons;
+    const { IllustrationConstruction } = SemiIllustrations;
     ReactDOM.render(
     <div>
         <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
         <Input defaultValue="semi" onChange={value => Toast.info('abc')}></Input>
+        <IconHome size="large" />
+        <IllustrationConstruction style={{width: 150, height: 150}} />
     </div>, document.getElementById("root"));
-</script>;
+</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,18 +41,74 @@ 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 方式使用组件
+
+[![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
+
+[build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
+[build-js-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/umd/semi-ui.min.js
+[build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
+[build-css-url]: https://unpkg.com/browse/@douyinfe/[email protected]/dist/css/semi.min.css
 
 > 我们并不推荐直接使用已构建文件，这样会全量引入所有组件，无法实现按需加载。但如果确实有非构建场景的需求，可以通过以下方式引用
 
-在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 `SemiUI`
+在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 `SemiUI`、`SemiIcons`、`SemiIllustrations`
 
 1. 请确保你已提前引入 react 以及 react-dom
 2. 引入 JS 文件，以下示例 URL 中 2.0.0 为 version 标识，希望使用不同版本 Semi 时，将 version 中对应的值替换即可（注意构建文件仅在 v1.3.0 后开始提供）
-    - min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js`
-    - normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.js`
+    - semi-ui min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js`
+    - semi-ui normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.js`
+
+    - semi-icons min: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js`
+    - semi-icons normal: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js`
+
+    - semi-illustrations min: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js`
+    - semi-illustrations normal: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js`
 3. 引入 Semi 默认主题的 CSS 样式文件  
-   `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`
+    - `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`
+    - `https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css`
 
 ```diff
 <!DOCTYPE html>
@@ -63,9 +121,13 @@ class Demo extends React.Component {
 +       <script src="https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js"></script>
 +       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css">
 
++       <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
++       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">
++       <script src="https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js"></script>
+
     </head>
     <body>
-        <div id="root">1</div>
+        <div id="root"></div>
     </body>
 </html>
 ```
@@ -73,10 +135,14 @@ class Demo extends React.Component {
 ```html
 <script type="text/babel">
     const { Input, Button, Toast, Icon, Form } = SemiUI;
+    const { IconHome } = SemiIcons;
+    const { IllustrationConstruction } = SemiIllustrations;
     ReactDOM.render(
     <div>
         <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
         <Input defaultValue="semi" onChange={value => Toast.info('hello semi')}></Input>
+        <IconHome size="large" />
+        <IllustrationConstruction style={{width: 150, height: 150}} />
     </div>, document.getElementById("root"));
 </script>;
-```
+```

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.1.0-beta.3"
+    "version": "2.1.4-alpha.0"
 }

package.json

@@ -8,6 +8,7 @@
   ],
   "private": true,
   "scripts": {
+    "install:codesandbox": "npm i lerna && npm run bootstrap",
     "bootstrap": "lerna bootstrap",
     "docsite": "npm run develop",
     "pre-develop": "npm run scripts:changelog && node ./scripts/designToken.js ./static/designToken.json",
@@ -37,7 +38,7 @@
   "dependencies": {
     "@douyinfe/semi-site-banner": "0.0.1",
     "@douyinfe/semi-site-doc-style": "0.0.1",
-    "@douyinfe/semi-site-header": "0.0.2",
+    "@douyinfe/semi-site-header": "0.0.3",
     "@douyinfe/semi-site-markdown-blocks": "0.0.1",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",

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.0-beta.3",
+  "version": "2.1.3",
   "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.0-beta.3",
-    "@douyinfe/semi-animation-styled": "2.1.0-beta.3",
+    "@douyinfe/semi-animation": "2.1.3",
+    "@douyinfe/semi-animation-styled": "2.1.3",
     "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.0-beta.3",
+  "version": "2.1.3",
   "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;
-}
-