Merge branch 'main' of https://github.com/DouyinFE/semi-design into release

.github/workflows/test.yml

@@ -20,4 +20,6 @@ jobs:
         run: npm i -g lerna && npm run bootstrap
 
       - name: Run test
-        run: npm run test:unit
+        run: npm run test:coverage
+      - name: Run codecov
+        run: npx codecov --token=${{ secrets.CODECOV_TOKEN }}

CONTRIBUTING.md

@@ -42,6 +42,8 @@ npm run test:unit
 
 我们可能会根据情况要求或帮助你修改PR，对于不合适的PR我们会给予解释后关闭
 
+- 为了便于不同地区的开发者都能获取到修改相关上下文，git commit message请统一使用英文描述
+
 ## 帮助改善文档
 文档站基于 [gatsby](https://www.gatsbyjs.com/) 构建，核心代码在 `src` 目录。
 

LICENSE

@@ -20,8 +20,42 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+The code implementation of the external library is referenced by DouyinFe are:
 
-The code implementation of the external library is referenced by douyinFe are:
+- animate.css
+    Animate.css Copyright 2021 Daniel Eden (“Licensor”)
+
+    Hippocratic License Version Number: 2.1.
+
+    Purpose. The purpose of this License is for the Licensor named above to permit the Licensee (as defined below) broad permission, if consistent with Human Rights Laws and Human Rights Principles (as each is defined below), to use and work with the Software (as defined below) within the full scope of Licensor’s copyright and patent rights, if any, in the Software, while ensuring attribution and protecting the Licensor from liability.
+
+    Permission and Conditions. The Licensor grants permission by this license (“License”), free of charge, to the extent of Licensor’s rights under applicable copyright and patent law, to any person or entity (the “Licensee”) obtaining a copy of this software and associated documentation files (the “Software”), to do everything with the Software that would otherwise infringe (i) the Licensor’s copyright in the Software or (ii) any patent claims to the Software that the Licensor can license or becomes able to license, subject to all of the following terms and conditions:
+
+    * Acceptance. This License is automatically offered to every person and entity subject to its terms and conditions. Licensee accepts this License and agrees to its terms and conditions by taking any action with the Software that, absent this License, would infringe any intellectual property right held by Licensor.
+
+    * Notice. Licensee must ensure that everyone who gets a copy of any part of this Software from Licensee, with or without changes, also receives the License and the above copyright notice (and if included by the Licensor, patent, trademark and attribution notice). Licensee must cause any modified versions of the Software to carry prominent notices stating that Licensee changed the Software. For clarity, although Licensee is free to create modifications of the Software and distribute only the modified portion created by Licensee with additional or different terms, the portion of the Software not modified must be distributed pursuant to this License. If anyone notifies Licensee in writing that Licensee has not complied with this Notice section, Licensee can keep this License by taking all practical steps to comply within 30 days after the notice. If Licensee does not do so, Licensee’s License (and all rights licensed hereunder) shall end immediately.
+
+    * Compliance with Human Rights Principles and Human Rights Laws.
+
+        1. Human Rights Principles.
+
+            (a) Licensee is advised to consult the articles of the United Nations Universal Declaration of Human Rights and the United Nations Global Compact that define recognized principles of international human rights (the “Human Rights Principles”). Licensee shall use the Software in a manner consistent with Human Rights Principles.
+
+            (b) Unless the Licensor and Licensee agree otherwise, any dispute, controversy, or claim arising out of or relating to (i) Section 1(a) regarding Human Rights Principles, including the breach of Section 1(a), termination of this License for breach of the Human Rights Principles, or invalidity of Section 1(a) or (ii) a determination of whether any Law is consistent or in conflict with Human Rights Principles pursuant to Section 2, below, shall be settled by arbitration in accordance with the Hague Rules on Business and Human Rights Arbitration (the “Rules”); provided, however, that Licensee may elect not to participate in such arbitration, in which event this License (and all rights licensed hereunder) shall end immediately. The number of arbitrators shall be one unless the Rules require otherwise.
+
+            Unless both the Licensor and Licensee agree to the contrary: (1) All documents and information concerning the arbitration shall be public and may be disclosed by any party; (2) The repository referred to under Article 43 of the Rules shall make available to the public in a timely manner all documents concerning the arbitration which are communicated to it, including all submissions of the parties, all evidence admitted into the record of the proceedings, all transcripts or other recordings of hearings and all orders, decisions and awards of the arbitral tribunal, subject only to the arbitral tribunal's powers to take such measures as may be necessary to safeguard the integrity of the arbitral process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3) Article 26(6) of the Rules shall not apply.
+
+        2. Human Rights Laws. The Software shall not be used by any person or entity for any systems, activities, or other uses that violate any Human Rights Laws.  “Human Rights Laws” means any applicable laws, regulations, or rules (collectively, “Laws”) that protect human, civil, labor, privacy, political, environmental, security, economic, due process, or similar rights; provided, however, that such Laws are consistent and not in conflict with Human Rights Principles (a dispute over the consistency or a conflict between Laws and Human Rights Principles shall be determined by arbitration as stated above).  Where the Human Rights Laws of more than one jurisdiction are applicable or in conflict with respect to the use of the Software, the Human Rights Laws that are most protective of the individuals or groups harmed shall apply.
+
+        3. Indemnity. Licensee shall hold harmless and indemnify Licensor (and any other contributor) against all losses, damages, liabilities, deficiencies, claims, actions, judgments, settlements, interest, awards, penalties, fines, costs, or expenses of whatever kind, including Licensor’s reasonable attorneys’ fees, arising out of or relating to Licensee’s use of the Software in violation of Human Rights Laws or Human Rights Principles.
+
+    * Failure to Comply. Any failure of Licensee to act according to the terms and conditions of this License is both a breach of the License and an infringement of the intellectual property rights of the Licensor (subject to exceptions under Laws, e.g., fair use). In the event of a breach or infringement, the terms and conditions of this License may be enforced by Licensor under the Laws of any jurisdiction to which Licensee is subject. Licensee also agrees that the Licensor may enforce the terms and conditions of this License against Licensee through specific performance (or similar remedy under Laws) to the extent permitted by Laws. For clarity, except in the event of a breach of this License, infringement, or as otherwise stated in this License, Licensor may not terminate this License with Licensee.
+
+    * Enforceability and Interpretation. If any term or provision of this License is determined to be invalid, illegal, or unenforceable by a court of competent jurisdiction, then such invalidity, illegality, or unenforceability shall not affect any other term or provision of this License or invalidate or render unenforceable such term or provision in any other jurisdiction; provided, however, subject to a court modification pursuant to the immediately following sentence, if any term or provision of this License pertaining to Human Rights Laws or Human Rights Principles is deemed invalid, illegal, or unenforceable against Licensee by a court of competent jurisdiction, all rights in the Software granted to Licensee shall be deemed null and void as between Licensor and Licensee. Upon a determination that any term or provision is invalid, illegal, or unenforceable, to the extent permitted by Laws, the court may modify this License to affect the original purpose that the Software be used in compliance with Human Rights Principles and Human Rights Laws as closely as possible. The language in this License shall be interpreted as to its fair meaning and not strictly for or against any party.
+
+    * Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES “AS IS,” WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM.
+
+    This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) and is offered for use by licensors and licensees at their own risk, on an “AS IS” basis, and with no warranties express or implied, to the maximum extent permitted by Laws.
 
 - Ant Design
     MIT LICENSE

README-zh_CN.md

@@ -9,7 +9,7 @@
     
 <div align="center">
 
-[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url]
+[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![CODECOV][codecov-badge]][codecov-url]
 
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
@@ -19,6 +19,8 @@
 
 [license-badge]: https://img.shields.io/npm/l/@douyinfe/semi-ui
 [license-url]: https://github.com/DouyinFE/semi-design/blob/main/LICENSE
+[codecov-badge]: https://img.shields.io/codecov/c/gh/DouyinFE/semi-design
+[codecov-url]: https://app.codecov.io/gh/DouyinFE/semi-design
 
 </div>
 

README.md

@@ -9,7 +9,7 @@
     
 <div align="center">
 
-[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url]
+[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![CODECOV][codecov-badge]][codecov-url]
 
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
@@ -19,6 +19,8 @@
 
 [license-badge]: https://img.shields.io/npm/l/@douyinfe/semi-ui
 [license-url]: https://github.com/DouyinFE/semi-design/blob/main/LICENSE
+[codecov-badge]: https://img.shields.io/codecov/c/gh/DouyinFE/semi-design
+[codecov-url]: https://app.codecov.io/gh/DouyinFE/semi-design
 
 </div>
 

content/basic/tokens/index-en-US.md

@@ -144,12 +144,12 @@ If you want to use it on the business side, you need to add a font face statemen
 ```css
 @font-face {
   font-family: "Inter";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("ttf"),
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("ttf");
 }
 
 @font-face {
   font-family: "Inter-Bold";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("ttf"),
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("ttf");
 }
 
 ```

content/basic/tokens/index.md

@@ -149,12 +149,12 @@ brief: Semi Design Tokens
 ```css
 @font-face {
   font-family: "Inter";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("ttf"),
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("ttf");
 }
 
 @font-face {
   font-family: "Inter-Bold";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("ttf"),
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("ttf");
 }
 
 ```

content/input/input/index.md

@@ -61,7 +61,7 @@ import { Input } from '@douyinfe/semi-ui';
     <Input defaultValue='enabled input'></Input>
     <br/>
     <br/>
-    <Input disabled defaultValue='disbaled input'></Input>
+    <Input disabled defaultValue='disabled input'></Input>
   </>
 )
 ```

content/input/select/index-en-US.md

@@ -587,7 +587,7 @@ import { Select } from '@douyinfe/semi-ui';
 A multi-select example with remote search, request debounce, loading status.
 
 -   Use `filter` turn on the search capability.
--   Use `remote` to disbaled local filter
+-   Use `remote` to disabled local filter
 -   Dynamic Update `optionList` after `onSearch` callback
 -   Update `loading` when fetching data / finish
 -   Use controlled value attribute
@@ -890,7 +890,7 @@ import { Select, Button } from '@douyinfe/semi-ui';
 ```
 
 
-### Get all attrbute of selected option
+### Get all attribute of selected option
 
 By default, through `onChange` uou can only get value attribute of selected option.  
 If you need to take other attributes of the selected option, you can use `onChangeWithObject` Properties  
@@ -1342,7 +1342,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | value | The currently selected value is passed as a controlled component, used in conjunction with `onchange` | string\|number\|array |  |
 | zIndex | Popup layer z-index | number | 1030 |
 | onBlur | Callback when blur | function(event) |  |
-| onChange | Callback function when selectd option | function (value) |  |
+| onChange | Callback function when selected option | function (value) |  |
 | onChangeWithObject | Whether to use the other properties of the selected option as a callback. When set to true, the entry type of onchange changes from string to object: {value, label,...rest} | boolean | false |
 | onClear | Callback when click clear icon | function |  |
 | onCreate | Allow Create is true and provides after the callback when creating the standby option | function |  |

content/input/select/index.md

@@ -898,7 +898,7 @@ class CustomRender extends React.Component {
 ### 自定义弹出层样式
 
 你可以通过 dropdownClassName、dropdownStyle 控制弹出层的样式  
-例如当自定义弹出层的宽度时，可以通过 drowndownStyle 传入 width
+例如当自定义弹出层的宽度时，可以通过 dropdownStyle 传入 width
 
 ```jsx live=true hideInDSM
 import React from 'react';
@@ -960,7 +960,7 @@ import { Select, TextArea } from '@douyinfe/semi-ui';
             >
             </Select>
             <h4>onChange回调:</h4>
-            <TextArea style={{ width: 320, marginBottom: 48 }}autosize value={JSON.stringify(cbValue)} rows={2}/>
+            <TextArea style={{ width: 320, marginBottom: 48 }} autosize value={JSON.stringify(cbValue)} rows={2}/>
           </div>
           <div>
               <Select

content/input/switch/index-en-US.md

@@ -100,7 +100,7 @@ import { Switch } from '@douyinfe/semi-ui';
 )
 ```
 
-Compared to setting the embedded text through chekedText and uncheckedText, we recommend placing the text description outside the Switch
+Compared to setting the embedded text through checkedText and uncheckedText, we recommend placing the text description outside the Switch
 ```jsx live=true
 import React, { useState } from 'react';
 import { Switch, Typography } from '@douyinfe/semi-ui';
@@ -119,7 +119,7 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
 
 ### Controlled component
 
-Whether the component is selected depends entirely on the incoming checkced value, used with `onChange`
+Whether the component is selected depends entirely on the incoming checked value, used with `onChange`
 
 ```jsx live=true
 import React from 'react';

content/input/switch/index.md

@@ -120,7 +120,7 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
 
 ### 受控组件
 
-组件是否选中完全取决于传入的 checkced 值，配合 onChange 回调函数使用
+组件是否选中完全取决于传入的 checked 值，配合 onChange 回调函数使用
 
 ```jsx live=true hideInDSM
 import React from 'react';

content/input/timepicker/index.md

@@ -4,7 +4,7 @@ order: 29
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker
-breif: 用户使用时间选择器可以方便地选择某一符合要求的、格式化的时间点
+brief: 用户使用时间选择器可以方便地选择某一符合要求的、格式化的时间点
 ---
 
 

content/input/treeselect/index-en-US.md

@@ -1184,7 +1184,7 @@ function Demo() {
 | clickToHide  | Whether to close the drop-down layer automatically when selecting, only works in single-selection mode  | boolean    | true | 1.5.0      |
 | defaultExpandAll    | Set whether to expand all nodes during initialization. And if the data (`treeData`) changes, this api cannot affect the expansion of the node. If you need this, you can use `expandAll`    | boolean                     | false   | 0.32.0 |
 | defaultExpandedKeys | Keys of default expanded nodes. Direct child nodes will be displayed. | string\[] | - | 0.32.0 |
-| defaultOpen | Toggle whether to open dropdown menu by defaultt | boolean | false | 0.32.0 |
+| defaultOpen | Toggle whether to open dropdown menu by default | boolean | false | 0.32.0 |
 | defaultValue             | Default value                                                                       | string \| number \| TreeNode \| (string \| number \| TreeNode)[]                                                  | -           | -       |
 | disabled                 | Disabled                                                                            | boolean                                                           | false       | -       |
 | disableStrictly | Disable Strictly | boolean | false | 1.30.0 |
@@ -1199,7 +1199,7 @@ function Demo() {
 | getPopupContainer        | Container to render pop-up level, you need to set 'position: relative`                                                    | function():HTMLElement                                            | -           | -       |
 | insetLabel               | Prefix alias，used mainly in Form                                                   | ReactNode                                                         | -           | 0.28.0  |
 | labelEllipsis | Toggle whether to ellipsis label when overflow | boolean | false\|true(virtualized) | 1.8.0 |  
-| leafOnly | Toggle whether to display tags for leaf nodes only and for onChange callback parms in multiple mode | boolean | false |0.32.0 |
+| leafOnly | Toggle whether to display tags for leaf nodes only and for onChange callback params in multiple mode | boolean | false |0.32.0 |
 | loadData | Load data asynchronously and the return value should be a promise | (treeNode: TreeNode) => Promise |-| 1.32.0|
 | loadedKeys | （Controlled）Mark node as loaded, working with `loadData` | Set< string > | - | 1.32.0|
 | maxTagCount              | Maximum number of tags displayed                                                    | number                                                            | -           | -       |
@@ -1238,7 +1238,7 @@ function Demo() {
 | onLoad | Callback function when a node is loaded | (loadedKeys: Set< string >, treeNode: TreeNode) => void | - | 1.32.0|
 | onSearch                 | Callback function when search value changes                                         | function(sugInput: string)                                        | -           | -       |
 | onSelect                 | Callback function when selected, return the key property of data                    | function(selectedKey:string, selected: bool, selectedNode: TreeNode)                      | -           | -       |
-| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden   | function(isVisble:boolean) |     |   1.4.0  |
+| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden   | function(isVisible:boolean) |     |   1.4.0  |
 
 ### TreeNode
 

content/input/treeselect/index.md

@@ -1218,7 +1218,7 @@ function Demo() {
 | onLoad | 节点加载完毕时触发的回调 | (loadedKeys: Set< string >, treeNode: TreeNode) => void |- |  1.32.0|
 | onSearch | 文本框值变化时回调 | function(sugInput: string) | - | - |
 | onSelect | 被选中时调用，返回值为当前事件选项的key值 | function(selectedKey:string, selected: bool, selectedNode: TreeNode) | - | - |
-| onVisibleChange     | 弹出层展示/隐藏时触发的回调   | function(isVisble:boolean) |     |   1.4.0  |
+| onVisibleChange     | 弹出层展示/隐藏时触发的回调   | function(isVisible:boolean) |     |   1.4.0  |
 
 ### TreeNode
 

content/input/upload/index-en-US.md

@@ -885,8 +885,8 @@ class ValidateDemo extends React.Component {
 }
 ```
 
-In the case of asynchronous verification, a Promise must be returned. Promise reslove means that the verification is passed, and reject means that the verification fails and the upload will not be triggered.
-Object can be passed in when reslove/reject (the structure is the same as beforeUploadResult)
+In the case of asynchronous verification, a Promise must be returned. Promise resolve means that the verification is passed, and reject means that the verification fails and the upload will not be triggered.
+Object can be passed in when resolve/reject (the structure is the same as beforeUploadResult)
 
 ```jsx live=true width=48%
 import React from 'react';
@@ -903,14 +903,14 @@ class AsyncBeforeUploadDemo extends React.Component {
 
     beforeUpload({ file, fileList }) {
         let result;
-        return new Promise((reslove, reject) => {
+        return new Promise((resolve, reject) => {
             if (this.count > 1) {
                 result = {
                     autoRemove: false,
                     shouldUpload: true,
                 };
                 this.count = this.count + 1;
-                reslove(result);
+                resolve(result);
             } else {
                 result = {
                     autoRemove: false,
@@ -1085,7 +1085,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |onAcceptInvalid | Triggered when the received file does not conform to the accept specification (generally because the folder selects all types of files / drags and drops files that do not conform to the format) | (files: File[]) => void | | 1.24 .0 |
 |onChange | Called when the file status changes, including upload success, failure, upload, the callback input parameter is Object, including fileList, currentFile, etc.| ({fileList: Array<FileItem\>, currentFile?: FileItem}) = > void | | 1.0.0 |
 |onClear | Callback when click to clear | () => void | | 1.1.0 |
-|onDrop | Triggered when the dragged element is released on the drag area | (e, files: Array<File\>, filelist: Array<FileItem\>) => void | | 1.9.0 |
+|onDrop | Triggered when the dragged element is released on the drag area | (e, files: Array<File\>, fileList: Array<FileItem\>) => void | | 1.9.0 |
 |onError | Callback when uploading error| (error: Error, file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList: Array<FileItem\> , xhr: XMLHttpRequest) => void | | |
 |onExceed | Callback when the total number of uploaded files exceeds `limit` | (fileList:Array<FileItem\>) => void | | |
 |onFileChange | Callback after file selection | (Array<File\>) => void | | |

content/input/upload/index.md

@@ -874,8 +874,8 @@ class ValidateDemo extends React.Component {
 }
 ```
 
-异步校验时，需返回 Promise，Promise reslove 代表检验通过，reject 代表校验失败，不会触发上传。  
-reslove/reject 时可以传入 object（结构同上 beforeUploadResult）
+异步校验时，需返回 Promise，Promise resolve 代表检验通过，reject 代表校验失败，不会触发上传。  
+resolve/reject 时可以传入 object（结构同上 beforeUploadResult）
 
 ```jsx live=true width=48%
 import React from 'react';
@@ -892,14 +892,14 @@ class AsyncBeforeUploadDemo extends React.Component {
 
     beforeUpload({ file, fileList }) {
         let result;
-        return new Promise((reslove, reject) => {
+        return new Promise((resolve, reject) => {
             if (this.count > 1) {
                 result = {
                     autoRemove: false,
                     shouldUpload: true,
                 };
                 this.count = this.count + 1;
-                reslove(result);
+                resolve(result);
             } else {
                 result = {
                     autoRemove: false,
@@ -1074,7 +1074,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |onAcceptInvalid | 当接收到的文件不符合accept规范时触发（一般是因为文件夹选择了全部类型文件/拖拽不符合格式的文件时触发） | (files: File[]) => void | | 1.24.0 |
 |onChange | 文件状态发生变化时调用，包括上传成功，失败，上传中，回调入参为 Object，包含 fileList、currentFile 等值 | ({fileList: Array<FileItem\>, currentFile?: FileItem}) => void |  | 1.0.0 |
 |onClear | 点击清空时的回调 | () => void |  | 1.1.0 |
-|onDrop | 当拖拽的元素在拖拽区上被释放时触发 | (e, files: Array<File\>, filelist: Array<FileItem\>) => void |  | 1.9.0 |
+|onDrop | 当拖拽的元素在拖拽区上被释放时触发 | (e, files: Array<File\>, fileList: Array<FileItem\>) => void |  | 1.9.0 |
 |onError | 上传错误时的回调 | (error: Error, file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList: Array<FileItem\>, xhr: XMLHttpRequest) => void |  |  |
 |onExceed | 上传文件总数超出 `limit` 时的回调 | (fileList:Array<FileItem\>) => void |  |  |
 |onFileChange | 选中文件后的回调 | (Array<File\>) => void |  |  |

content/navigation/navigation/index-en-US.md

@@ -785,4 +785,4 @@ function NavApp (props = {}) {
 ## FAQ
 - **Lost animation in navigation bar?**
 
-    When using functional components, you should give items with useState or useMemo, because passing an array directly to items will trigger component re rendering.
+    When using functional components, you should give items with useState or useMemo, because passing an array directly to items will trigger component rerendering.

content/navigation/pagination/index-en-US.md

@@ -189,7 +189,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | pageSize           | Number of entries per page                                                                                  | number                                          | 10                  |              |
 | pageSizeOpts       | Specify how many items are displayed per page                                                               | array                                           | \[10, 20, 40, 100\] |              |
 | popoverPosition    | Floating layer direction, visible [Popover·API reference·position](/en-US/show/popover#Use%20with%20Tooltip%20or%20Popconfirm) | string                                          | "bottomLeft"        |              |
-| popoverZIndix      | Floating layer z-index value                                                                                | number                                          |  1030               |              |
+| popoverZIndex      | Floating layer z-index value                                                                                | number                                          |  1030               |              |
 | prevText           | Text displayed by the previous Page button                                                                  | string\| React Node                             |                     |              |
 | size               | Size, optional `small`, `default`                                                                           | string                                          | 'default'           |              |
 | style              | Inline style                                                                                                | object                                          |                     |              |

content/navigation/steps/index-en-US.md

@@ -22,7 +22,7 @@ import { Steps } from '@douyinfe/semi-ui';
 const Step = Steps. Step.;
 ```
 
-### Default step bar(Deperecated)
+### Default step bar(Deprecated)
 
 It is recommended to use the simple version of steps, which will be gradually deprecated later
 
@@ -262,7 +262,7 @@ import { IconHome, IconLock, IconClear, IconTickCircle } from '@douyinfe/semi-ic
 
 ### onChange CallBack
 
-Since version 1.29.0, onChange is supported, which can be used to realize the processing progress. onChange receives a parameter of type number, which is equal to inital + current.
+Since version 1.29.0, onChange is supported, which can be used to realize the processing progress. onChange receives a parameter of type number, which is equal to initial + current.
 
 ```jsx live=true dir="column"
 import React from 'react';

content/navigation/steps/index.md

@@ -264,7 +264,7 @@ import { IconHome, IconLock } from '@douyinfe/semi-icons';
 
 ### onChange 回调
 
-从 1.29.0 版本开始支持 onChange，可以使用它来实现处理进度。onChange 接收一个 number 类型的参数，该参数等于 inital + current。
+从 1.29.0 版本开始支持 onChange，可以使用它来实现处理进度。onChange 接收一个 number 类型的参数，该参数等于 initial + current。
 
 ```jsx live=true dir="column" hideInDSM
 import React from 'react';

content/navigation/tabs/index-en-US.md

@@ -420,7 +420,7 @@ class App extends React.Component {
 
 ### Dynamic Update
 
-You can add events to update tabBar dynamicly.
+You can add events to update tabBar dynamically.
 
 ```jsx live=true
 import React from 'react';

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

@@ -16,6 +16,46 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.0.0 (2021-10-26)
+
+- 【Breaking Change】
+  - Component Changes
+    - Icon related
+      - Icon component no longer supports type = xxx using built-in icons
+      - Custom svg no longer supports plug-in configuration srcSvgPaths
+      - The Button icon property no longer supports passing built-in icon names through strings
+      - Dropdown deletes the iconType attribute and unifies it into the icon attribute
+      - Navigation icons no longer support incoming by string, ReactNode needs to be passed in
+      - Notification icons are no longer passed in by string, please use ReactNode uniformly
+    - AutoComplete officially discards the onChangeWithObject property
+    - Remove onInputChange from Cascader triggerRender
+    - Form no longer exports Label components from `semi-ui/index.js`
+    - Tree onRightClick renamed onContextMenu
+    - Upload dragable renamed draggable
+    - Table
+      - API that no longer responds when componentDidUpdate
+        - DefaultExpandAllRows, please replace with expandAllRows
+        - Default ExpandRowKeys, please replace with expandRowKeys
+        - Default ExpandAllGroupRows, please replace with expandAllGroupRows
+  - Style Changes
+    - CSS variable with semi prefix, for example --color-primary = > --semi-color-primary
+    - In 2.x, the unified set the width and height of the illustration to `200 * 200px`
+    - Design Token Changes
+      - Popconfirm
+        - $color-popconfirm_body-text 由 --semi-color-tertiary => --semi-color-text-2
+        - $color-popconfirm_header_alert-icon 由 #fa7500 => --semi-color-warning
+      - Progress
+        - $spacing-progress_line_text-marginLeft 由 15px => $spacing-base(16px)
+        - $spacing-progress_line_text-marginRight 由 15px => $spacing-base(16px)
+      - Radio
+        - $spacing-radio_addon_buttonRadio_large-paddingY 由 6px => $spacing-base-tight / 2 (6px)
+        - $radius-radio_cardRadioGroup 由 3px => --semi-border-radius-small(3px)
+  - Plugin Changes
+    - In 2.x, the iconLazyLoad, svgPaths, srcSvgPaths configurations are no longer supported
+    - In 2.x, section dark mode and bright mode no longer need to configure themeScope attributes in the plug-in, and the default is built-in. The usage method is updated from adding id #semi-ways-xxx to adding class .semi-ways-xxx.
+  - Other Changes
+    - Due to the adjustment of the Icon, the way of using icons and illustrations for Icon and Empty components is different from before. Please see for [details](/en-US/start/update-to-v2)
+
 #### 🎉 1.33.0 (2021-10-22)
 - 【Fix】
     - Fix that when the Cascader uses changeOnSelect and loadData attributes at the same time, and the last level is not selected, the value can not reset  

content/start/changelog/index.md

@@ -15,6 +15,45 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.0.0 (2021-10-26)
+
+- 【Breaking Change】
+  - 组件相关调整
+    - Icon 相关
+      - Icon 组件不再支持  type=xxx 方式使用内置 icon
+      - 自定义 svg 不再支持插件方式配置 srcSvgPaths
+      - Button icon 属性不再支持通过 string 传递内置 icon 名
+      - Dropdown 删除 iconType 属性，统一为 icon 属性
+      - Navigation icon 不再支持通过 string 方式传入，需要传入 ReactNode
+      - Notification icon 不再支持通过 string 方式传入，请统一使用 ReactNode
+    - AutoComplete 正式废弃 onChangeWithObject 属性
+    - Cascader triggerRender 的入参移除 onInputChange
+    - Form 不再从 `semi-ui/index.js` 导出 Label组件，如需使用请用 Form.Label
+    - Tree onRightClick 更名为 onContextMenu
+    - Upload dragable 更名为 draggable
+    - Table
+      - 不再在 componentDidUpdate 时响应的 API
+        - defaultExpandAllRows，请用 expandAllRows 替换
+        - defaultExpandRowKeys，请用 expandRowKeys 替换
+        - defaultExpandAllGroupRows，请用 expandAllGroupRows 替换
+  - 样式相关调整
+    - CSS 变量添加 semi 前缀，例如 --color-primary => --semi-color-primary
+    - 在 2.x，统一将插画的宽高设置为 `200 * 200px`，1.x 的尺寸为 `300 * 150px`
+    - 设计变量调整
+      - Popconfirm
+        - $color-popconfirm_body-text 由 --semi-color-tertiary => --semi-color-text-2
+        - $color-popconfirm_header_alert-icon 由 #fa7500 => --semi-color-warning
+      - Progress
+        - $spacing-progress_line_text-marginLeft 由 15px => $spacing-base(16px)
+        - $spacing-progress_line_text-marginRight 由 15px => $spacing-base(16px)
+      - Radio
+        - $spacing-radio_addon_buttonRadio_large-paddingY 由 6px => $spacing-base-tight / 2 (6px)
+        - $radius-radio_cardRadioGroup 由 3px => --semi-border-radius-small(3px)
+  - 插件相关调整
+      - 2.x 不再支持通过 Semi 插件配置 iconLazyLoad、svgPaths、srcSvgPaths
+      - 2.x 默认已支持局部暗色/亮色模式，不再需要在插件配置 themeScope。使用方式由 #semi-always-xxx => .semi-always-xxx
+  - 其他调整
+    - 由于 Icon 方案的调整，Icon、Empty 组件使用 icon、插画的方式与之前不同，具体请看 [1.x 迁移 2.x 指南](/zh-CN/start/update-to-v2)
 
 #### 🎉 1.33.0 (2021-10-22)
 - 【Fix】

content/start/update-to-v2/index-en-US.md

@@ -33,7 +33,7 @@ v2.0 Semi is officially released to the public network npm, the package name nee
 
 ```jsx
 // before
-import { Select, Input, Form } from '@douyinfe/semi-ui';
+import { Select, Input, Form } from '@ies/semi-ui-react';
 
 // now
 import { Select, Input, Form } from '@douyinfe/semi-ui';
@@ -43,7 +43,7 @@ import { Select, Input, Form } from '@douyinfe/semi-ui';
 
 ```jsx
 // before
-import { SelectProps } from '@douyinfe/semi-ui/select' 
+import { SelectProps } from '@ies/semi-ui-react/select' 
 
 // now
 import { SelectProps } from '@douyinfe/semi-ui/lib/es/select'
@@ -53,7 +53,7 @@ import { SelectProps } from '@douyinfe/semi-ui/lib/es/select'
 
 ```jsx
 // before
-import en_GB from '@douyinfe/semi-ui/locale/source/en_GB'
+import en_GB from '@ies/semi-ui-react/locale/source/en_GB'
 
 // now
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
@@ -103,7 +103,7 @@ Icon usage adjustment:
 <Icon type="home" />
 
 // 1.x when iconLazyload is true
-import homeSvg from '@douyinfe/semi-icons/semi-icons-home.svg';
+import homeSvg from '@ies/semi-icons/semi-icons-home.svg';
 <Icon type={homeSvg.id} />
 
 // 2.x use the following methods uniformly
@@ -115,8 +115,8 @@ Illustration Adjustment:
 
 ```jsx
 // 1.x
-import { Empty } from '@douyinfe/semi-ui';
-import Construction from '@douyinfe/semi-illustrations/construction.svg';
+import { Empty } from '@ies/semi-ui-react';
+import Construction from '@ies/semi-illustrations/construction.svg';
 <Empty image={Construction} />
 
 // 2.x

content/start/update-to-v2/index.md

@@ -33,7 +33,7 @@ v2.0 Semi 正式开源发布至公网 npm，包名需要调整，去除原有的
 
 ```jsx
 // before
-import { Select, Input, Form } from '@douyinfe/semi-ui';
+import { Select, Input, Form } from '@ies/semi-ui-react';
 
 // after
 import { Select, Input, Form } from '@douyinfe/semi-ui';
@@ -44,7 +44,7 @@ import { Select, Input, Form } from '@douyinfe/semi-ui';
 
 ```jsx
 // before
-import { SelectProps } from '@douyinfe/semi-ui/select' 
+import { SelectProps } from '@ies/semi-ui-react/select' 
 
 // now
 import { SelectProps } from '@douyinfe/semi-ui/lib/es/select'
@@ -54,7 +54,7 @@ import { SelectProps } from '@douyinfe/semi-ui/lib/es/select'
 
 ```jsx
 // before
-import en_GB from '@douyinfe/semi-ui/locale/source/en_GB'
+import en_GB from '@ies/semi-ui-react/locale/source/en_GB'
 
 // now
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
@@ -105,7 +105,7 @@ Icon 使用调整：
 <Icon type="home" />
 
 // 1.x 当 iconLazyload 为 true 的情况
-import homeSvg from '@douyinfe/semi-icons/semi-icons-home.svg';
+import homeSvg from '@ies/semi-icons/semi-icons-home.svg';
 <Icon type={homeSvg.id} />
 
 // 2.x 统一使用如下方式使用
@@ -117,8 +117,8 @@ import { IconHome } from '@douyinfe/semi-icons';
 
 ```jsx
 // 1.x
-import { Empty } from '@douyinfe/semi-ui';
-import Construction from '@douyinfe/semi-illustrations/construction.svg';
+import { Empty } from '@ies/semi-ui-react';
+import Construction from '@ies/semi-illustrations/construction.svg';
 <Empty image={Construction} />
 
 // 2.x

packages/semi-animation-styled/README.md

@@ -1,6 +1,6 @@
 > Stylesheet for animation
 
-- Provides rich transition effects based on `animate.css`
+- Provides rich transition effects based on `animate.css` (https://github.com/animate-css/animate.css)
 - It is easy to use. Building rich and vivid front-end pages through adding various atomic animation style to elements
 
 ## Usage

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -79,3 +84,4 @@
         animation-iteration-count: 1 !important;
     }
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -28,3 +33,4 @@
     animation-name: semi-bounce;
     transform-origin: center bottom;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -14,3 +19,4 @@
 .semi-flash {
     animation-name: semi-flash;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -28,3 +33,4 @@
     animation-timing-function: ease-in-out;
     animation-name: semi-headShake;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -25,3 +30,4 @@
     animation-duration: 1.3s;
     animation-timing-function: ease-in-out;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -38,3 +43,4 @@
     animation-name: semi-jello;
     transform-origin: center;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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 {
@@ -17,3 +22,4 @@
 .semi-pulse {
     animation-name: semi-pulse;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -31,3 +36,4 @@
 .semi-rubberBand {
     animation-name: semi-rubberBand;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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 {
@@ -23,3 +28,4 @@
 .semi-shake {
     animation-name: semi-shake;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -24,3 +29,4 @@
     transform-origin: top center;
     animation-name: semi-swing;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -29,3 +34,4 @@
 .semi-tada {
     animation-name: semi-tada;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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 {
@@ -33,3 +38,4 @@
 .semi-wobble {
     animation-name: semi-wobble;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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,3 +45,4 @@
     animation-duration: .75s;
     animation-name: semi-bounceIn;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -33,3 +38,4 @@
 .semi-bounceInDown {
     animation-name: semi-bounceInDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -33,3 +38,4 @@
 .semi-bounceInLeft {
     animation-name: semi-bounceInLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -33,3 +38,4 @@
 .semi-bounceInRight {
     animation-name: semi-bounceInRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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%,
@@ -33,3 +38,4 @@
 .semi-bounceInUp {
     animation-name: semi-bounceInUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -19,3 +24,4 @@
     animation-duration: .75s;
     animation-name: semi-bounceOut;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -18,3 +23,4 @@
 .semi-bounceOutDown {
     animation-name: semi-bounceOutDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-bounceOutLeft {
     animation-name: semi-bounceOutLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-bounceOutRight {
     animation-name: semi-bounceOutRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -18,3 +23,4 @@
 .semi-bounceOutUp {
     animation-name: semi-bounceOutUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -11,3 +16,4 @@
 .semi-fadeIn {
     animation-name: semi-fadeIn;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInDown {
     animation-name: semi-fadeInDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInDownBig {
     animation-name: semi-fadeInDownBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInLeft {
     animation-name: semi-fadeInLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInLeftBig {
     animation-name: semi-fadeInLeftBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInRight {
     animation-name: semi-fadeInRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInRightBig {
     animation-name: semi-fadeInRightBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInUp {
     animation-name: semi-fadeInUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
 .semi-fadeInUpBig {
     animation-name: semi-fadeInUpBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -11,3 +16,4 @@
 .semi-fadeOut {
     animation-name: semi-fadeOut;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutDown {
     animation-name: semi-fadeOutDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutDownBig {
     animation-name: semi-fadeOutDownBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutLeft {
     animation-name: semi-fadeOutLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutLeftBig {
     animation-name: semi-fadeOutLeftBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutRight {
     animation-name: semi-fadeOutRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutRightBig {
     animation-name: semi-fadeOutRightBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutUp {
     animation-name: semi-fadeOutUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -12,3 +17,4 @@
 .semi-fadeOutUpBig {
     animation-name: semi-fadeOutUpBig;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -29,3 +34,4 @@
     backface-visibility: visible;
     animation-name: semi-flip;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -28,3 +33,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipInX;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -28,3 +33,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipInY;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -19,3 +24,4 @@
     animation-name: semi-flipOutX;
     backface-visibility: visible !important;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -19,3 +24,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipOutY;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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';
@@ -91,3 +96,4 @@
 @import './zooming_exits/zoomOutLeft.css';
 @import './zooming_exits/zoomOutRight.css';
 @import './zooming_exits/zoomOutUp.css';
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -22,3 +27,4 @@
     animation-name: semi-lightSpeedIn;
     animation-timing-function: ease-out;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -13,3 +18,4 @@
     animation-name: semi-lightSpeedOut;
     animation-timing-function: ease-in;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -15,3 +20,4 @@
 .semi-rotateIn {
     animation-name: semi-rotateIn;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -15,3 +20,4 @@
 .semi-rotateInDownLeft {
     animation-name: semi-rotateInDownLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -15,3 +20,4 @@
 .semi-rotateInDownRight {
     animation-name: semi-rotateInDownRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -15,3 +20,4 @@
 .semi-rotateInUpLeft {
     animation-name: semi-rotateInUpLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -15,3 +20,4 @@
 .semi-rotateInUpRight {
     animation-name: semi-rotateInUpRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -14,3 +19,4 @@
 .semi-rotateOut {
     animation-name: semi-rotateOut;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -14,3 +19,4 @@
 .semi-rotateOutDownLeft {
     animation-name: semi-rotateOutDownLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -14,3 +19,4 @@
 .semi-rotateOutDownRight {
     animation-name: semi-rotateOutDownRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -14,3 +19,4 @@
 .semi-rotateOutUpLeft {
     animation-name: semi-rotateOutUpLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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;
@@ -14,3 +19,4 @@
 .semi-rotateOutUpRight {
     animation-name: semi-rotateOutUpRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideInDown {
     animation-name: semi-slideInDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideInLeft {
     animation-name: semi-slideInLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideInRight {
     animation-name: semi-slideInRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideInUp {
     animation-name: semi-slideInUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideOutDown {
     animation-name: semi-slideOutDown;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideOutLeft {
     animation-name: semi-slideOutLeft;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideOutRight {
     animation-name: semi-slideOutRight;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* 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);
@@ -12,3 +17,4 @@
 .semi-slideOutUp {
     animation-name: semi-slideOutUp;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-hinge {
     0% {
         transform-origin: top left;
@@ -29,3 +34,4 @@
     animation-duration: 2s;
     animation-name: semi-hinge;
 }
+

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

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

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

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-rollIn {
@@ -15,3 +20,4 @@
 .semi-rollIn {
     animation-name: semi-rollIn;
 }
+

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

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-rollOut {
@@ -14,3 +19,4 @@
 .semi-rollOut {
     animation-name: semi-rollOut;
 }
+

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

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

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

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

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

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