@fle-ui/next 1.0.2 → 1.0.3

package/docs-dist/components__affix__affix.md~components__alert__alert.md~components__anchor__anchor.md~components__au~31d645aa.js

@@ -844,9 +844,9 @@
         Ji =
           "import React, { useState } from 'react';\nimport { Switch, Button } from '@fle-ui/next';\n\nconst Demo = () => {\n  const [disabled, setDisabled] = useState<boolean>(true);\n\n  const toggle = () => {\n    setDisabled(!disabled);\n  };\n\n  return (\n    <>\n      <Switch disabled={disabled} defaultChecked />\n      <br />\n      <Button type=\"primary\" onClick={toggle}>\n        Toggle disabled\n      </Button>\n    </>\n  );\n};\n\nexport default Demo;",
         Wi =
-          "import React from 'react';\nimport { Table, Tag, Space } from '@fle-ui/next';\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n  },\n  {\n    title: 'Tags',\n    key: 'tags',\n    dataIndex: 'tags',\n    render: (tags: any) => (\n      <>\n        {tags.map((tag: any) => {\n          let color = tag.length > 5 ? 'geekblue' : 'green';\n          if (tag === 'loser') {\n            color = 'volcano';\n          }\n          return (\n            <Tag color={color} key={tag}>\n              {tag.toUpperCase()}\n            </Tag>\n          );\n        })}\n      </>\n    ),\n  },\n  {\n    title: 'Action',\n    key: 'action',\n    render: (text: string, record: any) => (\n      <Space size=\"middle\">\n        <a>Invite {record.name}{text}</a>\n        <a>Delete</a>\n      </Space>\n    ),\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n    tags: ['nice', 'developer'],\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n    tags: ['loser'],\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n    tags: ['cool', 'teacher'],\n  },\n];\n\nconst BasicDemo = () => {\n  return <Table columns={columns} dataSource={data} />;\n};\n\nexport default BasicDemo;",
+          "import React from 'react';\nimport { Table, Tag, Space } from '@fle-ui/next';\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n  },\n  {\n    title: 'Tags',\n    key: 'tags',\n    dataIndex: 'tags',\n    render: (tags: any) => (\n      <>\n        {tags.map((tag: any) => {\n          let color = tag.length > 5 ? 'geekblue' : 'green';\n          if (tag === 'loser') {\n            color = 'volcano';\n          }\n          return (\n            <Tag color={color} key={tag}>\n              {tag.toUpperCase()}\n            </Tag>\n          );\n        })}\n      </>\n    ),\n  },\n  {\n    title: 'Action',\n    key: 'action',\n    render: (text: string, record: any) => (\n      <Space size=\"middle\">\n        <a>Invite {record.name}</a>\n        <a>Delete</a>\n      </Space>\n    ),\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n    tags: ['nice', 'developer'],\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n    tags: ['loser'],\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n    tags: ['cool', 'teacher'],\n  },\n];\n\nconst BasicDemo = () => {\n  return <Table columns={columns} dataSource={data} />;\n};\n\nexport default BasicDemo;",
         $i =
-          'import React from \'react\';\nimport { Table, Tag, Space } from \'@fle-ui/next\';\n\nconst { Column, ColumnGroup } = Table;\n\nconst data = [\n  {\n    key: \'1\',\n    firstName: \'John\',\n    lastName: \'Brown\',\n    age: 32,\n    address: \'New York No. 1 Lake Park\',\n    tags: [\'nice\', \'developer\'],\n  },\n  {\n    key: \'2\',\n    firstName: \'Jim\',\n    lastName: \'Green\',\n    age: 42,\n    address: \'London No. 1 Lake Park\',\n    tags: [\'loser\'],\n  },\n  {\n    key: \'3\',\n    firstName: \'Joe\',\n    lastName: \'Black\',\n    age: 32,\n    address: \'Sidney No. 1 Lake Park\',\n    tags: [\'cool\', \'teacher\'],\n  },\n];\n\nconst BasicDemo = () => {\n  return (\n    <Table dataSource={data}>\n      <ColumnGroup title="Name">\n        <Column title="First Name" dataIndex="firstName" key="firstName" />\n        <Column title="Last Name" dataIndex="lastName" key="lastName" />\n      </ColumnGroup>\n      <Column title="Age" dataIndex="age" key="age" />\n      <Column title="Address" dataIndex="address" key="address" />\n      <Column\n        title="Tags"\n        dataIndex="tags"\n        key="tags"\n        render={(tags) => (\n          <>\n            {tags.map((tag: any) => (\n              <Tag color="blue" key={tag}>\n                {tag}\n              </Tag>\n            ))}\n          </>\n        )}\n      />\n      <Column\n        title="Action"\n        key="action"\n        render={(text: any, record: any) => (\n          <Space size="middle">\n            <a>\n              Invite {record.lastName}\n              {text}\n            </a>\n            <a>Delete</a>\n          </Space>\n        )}\n      />\n    </Table>\n  );\n};\n\nexport default BasicDemo;',
+          'import React from \'react\';\nimport { Table, Tag, Space } from \'@fle-ui/next\';\n\nconst { Column, ColumnGroup } = Table;\n\nconst data = [\n  {\n    key: \'1\',\n    firstName: \'John\',\n    lastName: \'Brown\',\n    age: 32,\n    address: \'New York No. 1 Lake Park\',\n    tags: [\'nice\', \'developer\'],\n  },\n  {\n    key: \'2\',\n    firstName: \'Jim\',\n    lastName: \'Green\',\n    age: 42,\n    address: \'London No. 1 Lake Park\',\n    tags: [\'loser\'],\n  },\n  {\n    key: \'3\',\n    firstName: \'Joe\',\n    lastName: \'Black\',\n    age: 32,\n    address: \'Sidney No. 1 Lake Park\',\n    tags: [\'cool\', \'teacher\'],\n  },\n];\n\nconst BasicDemo = () => {\n  return (\n    <Table dataSource={data}>\n      <ColumnGroup title="Name">\n        <Column title="First Name" dataIndex="firstName" key="firstName" />\n        <Column title="Last Name" dataIndex="lastName" key="lastName" />\n      </ColumnGroup>\n      <Column title="Age" dataIndex="age" key="age" />\n      <Column title="Address" dataIndex="address" key="address" />\n      <Column\n        title="Tags"\n        dataIndex="tags"\n        key="tags"\n        render={(tags) => (\n          <>\n            {tags.map((tag: any) => (\n              <Tag color="blue" key={tag}>\n                {tag}\n              </Tag>\n            ))}\n          </>\n        )}\n      />\n      <Column\n        title="Action"\n        key="action"\n        render={(text: any, record: any) => (\n          <Space size="middle">\n            <a>Invite {record.lastName}</a>\n            <a>Delete</a>\n          </Space>\n        )}\n      />\n    </Table>\n  );\n};\n\nexport default BasicDemo;',
         Qi =
           "import React, { useState } from 'react';\nimport { Table, Radio, Divider } from '@fle-ui/next';\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n  },\n];\n\ninterface DataType {\n  key: React.Key;\n  name: string;\n  age: number;\n  address: string;\n}\n\nconst data: DataType[] = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n  },\n  {\n    key: '4',\n    name: 'Disabled User',\n    age: 99,\n    address: 'Sidney No. 1 Lake Park',\n  },\n];\n\nconst rowSelection = {\n  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {\n    console.log(\n      `selectedRowKeys: ${selectedRowKeys}`,\n      'selectedRows: ',\n      selectedRows,\n    );\n  },\n  getCheckboxProps: (record: DataType) => ({\n    disabled: record.name === 'Disabled User', // Column configuration not to be checked\n    name: record.name,\n  }),\n};\n\nconst BasicDemo = () => {\n  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(\n    'checkbox',\n  );\n\n  return (\n    <div>\n      <Radio.Group\n        onChange={({ target: { value } }) => {\n          setSelectionType(value);\n        }}\n        value={selectionType}\n      >\n        <Radio value=\"checkbox\">Checkbox</Radio>\n        <Radio value=\"radio\">radio</Radio>\n      </Radio.Group>\n\n      <Divider />\n\n      <Table\n        rowSelection={{\n          type: selectionType,\n          ...rowSelection,\n        }}\n        columns={columns}\n        dataSource={data}\n      />\n    </div>\n  );\n};\n\nexport default BasicDemo;",
         Zi =
@@ -882,7 +882,7 @@
         ms =
           "import React from 'react';\nimport { Table } from '@fle-ui/next';\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    width: 100,\n    fixed: 'left',\n    filters: [\n      {\n        text: 'Joe',\n        value: 'Joe',\n      },\n      {\n        text: 'John',\n        value: 'John',\n      },\n    ],\n    onFilter: (value, record) => record.name.indexOf(value) === 0,\n  },\n  {\n    title: 'Other',\n    children: [\n      {\n        title: 'Age',\n        dataIndex: 'age',\n        key: 'age',\n        width: 150,\n        sorter: (a, b) => a.age - b.age,\n      },\n      {\n        title: 'Address',\n        children: [\n          {\n            title: 'Street',\n            dataIndex: 'street',\n            key: 'street',\n            width: 150,\n          },\n          {\n            title: 'Block',\n            children: [\n              {\n                title: 'Building',\n                dataIndex: 'building',\n                key: 'building',\n                width: 100,\n              },\n              {\n                title: 'Door No.',\n                dataIndex: 'number',\n                key: 'number',\n                width: 100,\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n  {\n    title: 'Company',\n    children: [\n      {\n        title: 'Company Address',\n        dataIndex: 'companyAddress',\n        key: 'companyAddress',\n        width: 200,\n      },\n      {\n        title: 'Company Name',\n        dataIndex: 'companyName',\n        key: 'companyName',\n      },\n    ],\n  },\n  {\n    title: 'Gender',\n    dataIndex: 'gender',\n    key: 'gender',\n    width: 80,\n    fixed: 'right',\n  },\n];\n\nconst data = [];\nfor (let i = 0; i < 100; i++) {\n  data.push({\n    key: i,\n    name: 'John Brown',\n    age: i + 1,\n    street: 'Lake Park',\n    building: 'C',\n    number: 2035,\n    companyAddress: 'Lake Street 42',\n    companyName: 'SoftLake Co',\n    gender: 'M',\n  });\n}\n\nconst Demo = () => {\n  return (\n    <Table\n      columns={columns}\n      dataSource={data}\n      bordered\n      size=\"middle\"\n      scroll={{ x: 'calc(700px + 50%)', y: 240 }}\n    />\n  );\n};\n\nexport default Demo;",
         fs =
-          "import React, { useContext, useState, useEffect, useRef } from 'react';\nimport { Table, Input, Button } from '@fle-ui/next';\nimport { Popconfirm, Form } from '@fle-ui/next';\n\nimport { FormInstance } from '@fle-ui/next/es/form';\n\nimport './index.less';\n\nconst EditableContext = React.createContext<FormInstance<any> | null>(null);\n\ninterface Item {\n  key: string;\n  name: string;\n  age: string;\n  address: string;\n}\n\ninterface EditableRowProps {\n  index: number;\n}\n\nconst EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {\n  const [form] = Form.useForm();\n  return (\n    <Form form={form} component={false}>\n      <EditableContext.Provider value={form}>\n        <tr {...props} />\n      </EditableContext.Provider>\n    </Form>\n  );\n};\n\ninterface EditableCellProps {\n  title: React.ReactNode;\n  editable: boolean;\n  children: React.ReactNode;\n  dataIndex: keyof Item;\n  record: Item;\n  handleSave: (record: Item) => void;\n}\n\nconst EditableCell: React.FC<EditableCellProps> = ({\n  title,\n  editable,\n  children,\n  dataIndex,\n  record,\n  handleSave,\n  ...restProps\n}) => {\n  const [editing, setEditing] = useState(false);\n\n  // @ts-ignore\n  const inputRef = useRef<Input>(null);\n  const form = useContext(EditableContext)!;\n\n  useEffect(() => {\n    if (editing) {\n      inputRef.current!.focus();\n    }\n  }, [editing]);\n\n  const toggleEdit = () => {\n    setEditing(!editing);\n    form.setFieldsValue({ [dataIndex]: record[dataIndex] });\n  };\n\n  const save = async () => {\n    try {\n      const values = await form.validateFields();\n\n      toggleEdit();\n      handleSave({ ...record, ...values });\n    } catch (errInfo) {\n      console.log('Save failed:', errInfo);\n    }\n  };\n\n  let childNode = children;\n\n  if (editable) {\n    childNode = editing ? (\n      <Form.Item\n        style={{ margin: 0 }}\n        name={dataIndex}\n        rules={[\n          {\n            required: true,\n            message: `${title} is required.`,\n          },\n        ]}\n      >\n        <Input ref={inputRef} onPressEnter={save} onBlur={save} />\n      </Form.Item>\n    ) : (\n      <div\n        className=\"editable-cell-value-wrap\"\n        style={{ paddingRight: 24 }}\n        onClick={toggleEdit}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return <td {...restProps}>{childNode}</td>;\n};\n\ntype EditableTableProps = Parameters<typeof Table>[0];\n\ninterface DataType {\n  key: React.Key;\n  name: string;\n  age: string;\n  address: string;\n}\n\ninterface EditableTableState {\n  dataSource: DataType[];\n  count: number;\n}\n\ntype ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;\n\nclass EditableTable extends React.Component<\n  EditableTableProps,\n  EditableTableState\n> {\n  columns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[];\n\n  constructor(props: EditableTableProps) {\n    super(props);\n\n    this.columns = [\n      {\n        title: 'name',\n        dataIndex: 'name',\n        width: '30%',\n        editable: true,\n      },\n      {\n        title: 'age',\n        dataIndex: 'age',\n      },\n      {\n        title: 'address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'operation',\n        dataIndex: 'operation',\n        // @ts-ignore\n        render: (_, record: { key: React.Key }) =>\n          this.state.dataSource.length >= 1 ? (\n            <Popconfirm\n              title=\"Sure to delete?\"\n              onConfirm={() => this.handleDelete(record.key)}\n            >\n              <a>Delete</a>\n            </Popconfirm>\n          ) : null,\n      },\n    ];\n\n    this.state = {\n      dataSource: [\n        {\n          key: '0',\n          name: 'Edward King 0',\n          age: '32',\n          address: 'London, Park Lane no. 0',\n        },\n        {\n          key: '1',\n          name: 'Edward King 1',\n          age: '32',\n          address: 'London, Park Lane no. 1',\n        },\n      ],\n      count: 2,\n    };\n  }\n\n  handleDelete = (key: React.Key) => {\n    const dataSource = [...this.state.dataSource];\n    this.setState({\n      dataSource: dataSource.filter((item) => item.key !== key),\n    });\n  };\n\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData: DataType = {\n      key: count,\n      name: `Edward King ${count}`,\n      age: '32',\n      address: `London, Park Lane no. ${count}`,\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1,\n    });\n  };\n\n  handleSave = (row: DataType) => {\n    const newData = [...this.state.dataSource];\n    const index = newData.findIndex((item) => row.key === item.key);\n    const item = newData[index];\n    newData.splice(index, 1, {\n      ...item,\n      ...row,\n    });\n    this.setState({ dataSource: newData });\n  };\n\n  render() {\n    const { dataSource } = this.state;\n    const components = {\n      body: {\n        row: EditableRow,\n        cell: EditableCell,\n      },\n    };\n    const columns = this.columns.map((col) => {\n      if (!col.editable) {\n        return col;\n      }\n      return {\n        ...col,\n        onCell: (record: DataType) => ({\n          record,\n          editable: col.editable,\n          dataIndex: col.dataIndex,\n          title: col.title,\n          handleSave: this.handleSave,\n        }),\n      };\n    });\n    return (\n      <div>\n        <Button\n          onClick={this.handleAdd}\n          type=\"primary\"\n          style={{ marginBottom: 16 }}\n        >\n          Add a row\n        </Button>\n        <Table\n          components={components}\n          rowClassName={() => 'editable-row'}\n          bordered\n          dataSource={dataSource}\n          columns={columns as ColumnTypes}\n        />\n      </div>\n    );\n  }\n}\n\nexport default EditableTable;",
+          "import React, { useContext, useState, useEffect, useRef } from 'react';\nimport { Popconfirm, Form, Table, Input, Button } from '@fle-ui/next';\n\nimport { FormInstance } from '@fle-ui/next/es/form';\n\nimport './index.less';\n\nconst EditableContext = React.createContext<FormInstance<any> | null>(null);\n\ninterface Item {\n  key: string;\n  name: string;\n  age: string;\n  address: string;\n}\n\ninterface EditableRowProps {\n  index: number;\n}\n\nconst EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {\n  const [form] = Form.useForm();\n  return (\n    <Form form={form} component={false}>\n      <EditableContext.Provider value={form}>\n        <tr {...props} />\n      </EditableContext.Provider>\n    </Form>\n  );\n};\n\ninterface EditableCellProps {\n  title: React.ReactNode;\n  editable: boolean;\n  children: React.ReactNode;\n  dataIndex: keyof Item;\n  record: Item;\n  handleSave: (record: Item) => void;\n}\n\nconst EditableCell: React.FC<EditableCellProps> = ({\n  title,\n  editable,\n  children,\n  dataIndex,\n  record,\n  handleSave,\n  ...restProps\n}) => {\n  const [editing, setEditing] = useState(false);\n\n  // @ts-ignore\n  const inputRef = useRef<Input>(null);\n  const form = useContext(EditableContext)!;\n\n  useEffect(() => {\n    if (editing) {\n      inputRef.current!.focus();\n    }\n  }, [editing]);\n\n  const toggleEdit = () => {\n    setEditing(!editing);\n    form.setFieldsValue({ [dataIndex]: record[dataIndex] });\n  };\n\n  const save = async () => {\n    try {\n      const values = await form.validateFields();\n\n      toggleEdit();\n      handleSave({ ...record, ...values });\n    } catch (errInfo) {\n      console.log('Save failed:', errInfo);\n    }\n  };\n\n  let childNode = children;\n\n  if (editable) {\n    childNode = editing ? (\n      <Form.Item\n        style={{ margin: 0 }}\n        name={dataIndex}\n        rules={[\n          {\n            required: true,\n            message: `${title} is required.`,\n          },\n        ]}\n      >\n        <Input ref={inputRef} onPressEnter={save} onBlur={save} />\n      </Form.Item>\n    ) : (\n      <div\n        className=\"editable-cell-value-wrap\"\n        style={{ paddingRight: 24 }}\n        onClick={toggleEdit}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return <td {...restProps}>{childNode}</td>;\n};\n\ntype EditableTableProps = Parameters<typeof Table>[0];\n\ninterface DataType {\n  key: React.Key;\n  name: string;\n  age: string;\n  address: string;\n}\n\ninterface EditableTableState {\n  dataSource: DataType[];\n  count: number;\n}\n\ntype ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;\n\nclass EditableTable extends React.Component<\n  EditableTableProps,\n  EditableTableState\n> {\n  columns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[];\n\n  constructor(props: EditableTableProps) {\n    super(props);\n\n    this.columns = [\n      {\n        title: 'name',\n        dataIndex: 'name',\n        width: '30%',\n        editable: true,\n      },\n      {\n        title: 'age',\n        dataIndex: 'age',\n      },\n      {\n        title: 'address',\n        dataIndex: 'address',\n      },\n      {\n        title: 'operation',\n        dataIndex: 'operation',\n        // @ts-ignore\n        render: (_, record: { key: React.Key }) =>\n          this.state.dataSource.length >= 1 ? (\n            <Popconfirm\n              title=\"Sure to delete?\"\n              onConfirm={() => this.handleDelete(record.key)}\n            >\n              <a>Delete</a>\n            </Popconfirm>\n          ) : null,\n      },\n    ];\n\n    this.state = {\n      dataSource: [\n        {\n          key: '0',\n          name: 'Edward King 0',\n          age: '32',\n          address: 'London, Park Lane no. 0',\n        },\n        {\n          key: '1',\n          name: 'Edward King 1',\n          age: '32',\n          address: 'London, Park Lane no. 1',\n        },\n      ],\n      count: 2,\n    };\n  }\n\n  handleDelete = (key: React.Key) => {\n    const dataSource = [...this.state.dataSource];\n    this.setState({\n      dataSource: dataSource.filter((item) => item.key !== key),\n    });\n  };\n\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData: DataType = {\n      key: count,\n      name: `Edward King ${count}`,\n      age: '32',\n      address: `London, Park Lane no. ${count}`,\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1,\n    });\n  };\n\n  handleSave = (row: DataType) => {\n    const newData = [...this.state.dataSource];\n    const index = newData.findIndex((item) => row.key === item.key);\n    const item = newData[index];\n    newData.splice(index, 1, {\n      ...item,\n      ...row,\n    });\n    this.setState({ dataSource: newData });\n  };\n\n  render() {\n    const { dataSource } = this.state;\n    const components = {\n      body: {\n        row: EditableRow,\n        cell: EditableCell,\n      },\n    };\n    const columns = this.columns.map((col) => {\n      if (!col.editable) {\n        return col;\n      }\n      return {\n        ...col,\n        onCell: (record: DataType) => ({\n          record,\n          editable: col.editable,\n          dataIndex: col.dataIndex,\n          title: col.title,\n          handleSave: this.handleSave,\n        }),\n      };\n    });\n    return (\n      <div>\n        <Button\n          onClick={this.handleAdd}\n          type=\"primary\"\n          style={{ marginBottom: 16 }}\n        >\n          Add a row\n        </Button>\n        <Table\n          components={components}\n          rowClassName={() => 'editable-row'}\n          bordered\n          dataSource={dataSource}\n          columns={columns as ColumnTypes}\n        />\n      </div>\n    );\n  }\n}\n\nexport default EditableTable;",
         hs =
           ".editable-cell {\n  position: relative;\n}\n\n.editable-cell-value-wrap {\n  padding: 5px 12px;\n  cursor: pointer;\n}\n\n.editable-row:hover .editable-cell-value-wrap {\n  padding: 4px 11px;\n  border: 1px solid #d9d9d9;\n  border-radius: 2px;\n}\n\n[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {\n  border: 1px solid #434343;\n}",
         vs =
@@ -908,7 +908,7 @@
         Ds =
           "import React from 'react';\nimport { Table } from '@fle-ui/next';\n\nconst columns: any = [\n  {\n    title: 'Name (all screens)',\n    dataIndex: 'name',\n    key: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age (medium screen or bigger)',\n    dataIndex: 'age',\n    key: 'age',\n    responsive: ['md'],\n  },\n  {\n    title: 'Address (large screen or bigger)',\n    dataIndex: 'address',\n    key: 'address',\n    responsive: ['lg'],\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n  },\n];\n\nconst Demo = () => {\n  return <Table columns={columns} dataSource={data} />;\n};\n\nexport default Demo;",
         Os =
-          "import React, { useState } from 'react';\nimport { Table, Radio, Tag, Space } from '@fle-ui/next';\n\nconst topOptions = [\n  { label: 'topLeft', value: 'topLeft' },\n  { label: 'topCenter', value: 'topCenter' },\n  { label: 'topRight', value: 'topRight' },\n  { label: 'none', value: 'none' },\n];\n\nconst bottomOptions = [\n  { label: 'bottomLeft', value: 'bottomLeft' },\n  { label: 'bottomCenter', value: 'bottomCenter' },\n  { label: 'bottomRight', value: 'bottomRight' },\n  { label: 'none', value: 'none' },\n];\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n  },\n  {\n    title: 'Tags',\n    key: 'tags',\n    dataIndex: 'tags',\n    render: (tags: any) => (\n      <span>\n        {tags.map((tag: any) => {\n          let color = tag.length > 5 ? 'geekblue' : 'green';\n          if (tag === 'loser') {\n            color = 'volcano';\n          }\n          return (\n            <Tag color={color} key={tag}>\n              {tag.toUpperCase()}\n            </Tag>\n          );\n        })}\n      </span>\n    ),\n  },\n  {\n    title: 'Action',\n    key: 'action',\n    render: (text: string, record: any) => (\n      <Space size=\"middle\">\n        <a>\n          Invite {record.name}\n          {text}\n        </a>\n        <a>Delete</a>\n      </Space>\n    ),\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n    tags: ['nice', 'developer'],\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n    tags: ['loser'],\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n    tags: ['cool', 'teacher'],\n  },\n];\n\nconst Demo = () => {\n  const [top, setTop] = useState<any>('topLeft');\n  const [bottom, setBottom] = useState<any>('bottomRight');\n\n  return (\n    <div>\n      <div>\n        <Radio.Group\n          style={{ marginBottom: 10 }}\n          options={topOptions}\n          value={top}\n          onChange={(e) => {\n            setTop(e.target.value);\n          }}\n        />\n      </div>\n      <Radio.Group\n        style={{ marginBottom: 10 }}\n        options={bottomOptions}\n        value={bottom}\n        onChange={(e) => {\n          setBottom(e.target.value);\n        }}\n      />\n      <Table\n        columns={columns}\n        pagination={{ position: [top, bottom] }}\n        dataSource={data}\n      />\n    </div>\n  );\n};\n\nexport default Demo;",
+          "import React, { useState } from 'react';\nimport { Table, Radio, Tag, Space } from '@fle-ui/next';\n\nconst topOptions = [\n  { label: 'topLeft', value: 'topLeft' },\n  { label: 'topCenter', value: 'topCenter' },\n  { label: 'topRight', value: 'topRight' },\n  { label: 'none', value: 'none' },\n];\n\nconst bottomOptions = [\n  { label: 'bottomLeft', value: 'bottomLeft' },\n  { label: 'bottomCenter', value: 'bottomCenter' },\n  { label: 'bottomRight', value: 'bottomRight' },\n  { label: 'none', value: 'none' },\n];\n\nconst columns = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    render: (text: string) => <a>{text}</a>,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n  },\n  {\n    title: 'Tags',\n    key: 'tags',\n    dataIndex: 'tags',\n    render: (tags: any) => (\n      <span>\n        {tags.map((tag: any) => {\n          let color = tag.length > 5 ? 'geekblue' : 'green';\n          if (tag === 'loser') {\n            color = 'volcano';\n          }\n          return (\n            <Tag color={color} key={tag}>\n              {tag.toUpperCase()}\n            </Tag>\n          );\n        })}\n      </span>\n    ),\n  },\n  {\n    title: 'Action',\n    key: 'action',\n    render: (text: string, record: any) => (\n      <Space size=\"middle\">\n        <a>Invite {record.name}</a>\n        <a>Delete</a>\n      </Space>\n    ),\n  },\n];\n\nconst data = [\n  {\n    key: '1',\n    name: 'John Brown',\n    age: 32,\n    address: 'New York No. 1 Lake Park',\n    tags: ['nice', 'developer'],\n  },\n  {\n    key: '2',\n    name: 'Jim Green',\n    age: 42,\n    address: 'London No. 1 Lake Park',\n    tags: ['loser'],\n  },\n  {\n    key: '3',\n    name: 'Joe Black',\n    age: 32,\n    address: 'Sidney No. 1 Lake Park',\n    tags: ['cool', 'teacher'],\n  },\n];\n\nconst Demo = () => {\n  const [top, setTop] = useState<any>('topLeft');\n  const [bottom, setBottom] = useState<any>('bottomRight');\n\n  return (\n    <div>\n      <div>\n        <Radio.Group\n          style={{ marginBottom: 10 }}\n          options={topOptions}\n          value={top}\n          onChange={(e) => {\n            setTop(e.target.value);\n          }}\n        />\n      </div>\n      <Radio.Group\n        style={{ marginBottom: 10 }}\n        options={bottomOptions}\n        value={bottom}\n        onChange={(e) => {\n          setBottom(e.target.value);\n        }}\n      />\n      <Table\n        columns={columns}\n        pagination={{ position: [top, bottom] }}\n        dataSource={data}\n      />\n    </div>\n  );\n};\n\nexport default Demo;",
         Ts =
           "import React from 'react';\nimport { Table } from '@fle-ui/next';\n\nconst columns: any = [\n  {\n    title: 'Full Name',\n    width: 100,\n    dataIndex: 'name',\n    key: 'name',\n    fixed: 'left',\n  },\n  {\n    title: 'Age',\n    width: 100,\n    dataIndex: 'age',\n    key: 'age',\n    fixed: 'left',\n  },\n  {\n    title: 'Column 1',\n    dataIndex: 'address',\n    key: '1',\n    width: 150,\n  },\n  {\n    title: 'Column 2',\n    dataIndex: 'address',\n    key: '2',\n    width: 150,\n  },\n  {\n    title: 'Column 3',\n    dataIndex: 'address',\n    key: '3',\n    width: 150,\n  },\n  {\n    title: 'Column 4',\n    dataIndex: 'address',\n    key: '4',\n    width: 150,\n  },\n  {\n    title: 'Column 5',\n    dataIndex: 'address',\n    key: '5',\n    width: 150,\n  },\n  {\n    title: 'Column 6',\n    dataIndex: 'address',\n    key: '6',\n    width: 150,\n  },\n  {\n    title: 'Column 7',\n    dataIndex: 'address',\n    key: '7',\n    width: 150,\n  },\n  { title: 'Column 8', dataIndex: 'address', key: '8' },\n  {\n    title: 'Action',\n    key: 'operation',\n    fixed: 'right',\n    width: 100,\n    render: () => <a>action</a>,\n  },\n];\n\nconst data: any = [];\nfor (let i = 0; i < 100; i++) {\n  data.push({\n    key: i,\n    name: `Edrward ${i}`,\n    age: 32,\n    address: `London Park no. ${i}`,\n  });\n}\n\nconst Demo = () => {\n  return (\n    <Table\n      columns={columns}\n      dataSource={data}\n      scroll={{ x: 1500 }}\n      summary={() => (\n        <Table.Summary fixed>\n          <Table.Summary.Row>\n            <Table.Summary.Cell index={0} colSpan={2}>\n              Fix Left\n            </Table.Summary.Cell>\n            <Table.Summary.Cell index={2} colSpan={8}>\n              Scroll Context\n            </Table.Summary.Cell>\n            <Table.Summary.Cell index={10}>Fix Right</Table.Summary.Cell>\n          </Table.Summary.Row>\n        </Table.Summary>\n      )}\n      sticky\n    />\n  );\n};\n\nexport default Demo;",
         Is =

package/docs-dist/demos_elbat.js

@@ -5380,7 +5380,7 @@
               r.a.createElement(
                 o['T'],
                 { size: 'middle' },
-                r.a.createElement('a', null, 'Invite ', t.name, e),
+                r.a.createElement('a', null, 'Invite ', t.name),
                 r.a.createElement('a', null, 'Delete'),
               ),
           },
@@ -5869,7 +5869,7 @@
                 r.a.createElement(
                   o['T'],
                   { size: 'middle' },
-                  r.a.createElement('a', null, 'Invite ', t.lastName, e),
+                  r.a.createElement('a', null, 'Invite ', t.lastName),
                   r.a.createElement('a', null, 'Delete'),
                 ),
             }),
@@ -16869,7 +16869,7 @@
               o.a.createElement(
                 l['T'],
                 { size: 'middle' },
-                o.a.createElement('a', null, 'Invite ', t.name, e),
+                o.a.createElement('a', null, 'Invite ', t.name),
                 o.a.createElement('a', null, 'Delete'),
               ),
           },

package/docs-dist/umi.js

@@ -7634,10 +7634,10 @@
               exact: !0,
               meta: {
                 filePath: 'docs/index.md',
-                updatedTime: 1632316163e3,
+                updatedTime: 1635764505e3,
                 hero: {
                   title: 'Fle-UI',
-                  desc: '<div class="markdown"><p>\u662f\u57fa\u4e8e Ant Design \u8bbe\u8ba1\u4f53\u7cfb\u7684 React UI \u7ec4\u4ef6\u5e93\uff0c\u4e3b\u8981\u7528\u4e8e\u7814\u53d1\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u4ea7\u54c1</p></div>',
+                  desc: '<div class="markdown"><p>\u662f\u57fa\u4e8e Ant Design \u8bbe\u8ba1\u4f53\u7cfb\u7684 React UI \u7ec4\u4ef6\u5e93\uff0c\u4e3b\u8981\u7528\u4e8e\u7814\u53d1\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u4ea7\u54c1 up</p></div>',
                   actions: [
                     {
                       text: '\u5feb\u901f\u4e0a\u624b',

package/es/badge/style/index.css

@@ -1874,7 +1874,7 @@ html {
 }
 .ant-badge-status-processing {
   position: relative;
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-badge-status-processing::after {
   position: absolute;
@@ -1882,7 +1882,7 @@ html {
   left: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid #1890ff;
+  border: 1px solid #2c68ff;
   border-radius: 50%;
   -webkit-animation: antStatusProcessing 1.2s infinite ease-in-out;
           animation: antStatusProcessing 1.2s infinite ease-in-out;
@@ -1928,7 +1928,7 @@ html {
   background: #52c41a;
 }
 .ant-badge-status-blue {
-  background: #1890ff;
+  background: #2c68ff;
 }
 .ant-badge-status-geekblue {
   background: #2f54eb;
@@ -2196,8 +2196,8 @@ html {
   background: #52c41a;
 }
 .ant-ribbon-color-blue {
-  color: #1890ff;
-  background: #1890ff;
+  color: #2c68ff;
+  background: #2c68ff;
 }
 .ant-ribbon-color-geekblue {
   color: #2f54eb;

package/es/popover/style/index.css

@@ -271,10 +271,10 @@
   background-color: #52c41a;
 }
 .ant-popover-blue .ant-popover-inner {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-blue .ant-popover-arrow-content {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-geekblue .ant-popover-inner {
   background-color: #2f54eb;

package/es/progress/style/index.css

@@ -35,7 +35,7 @@
   transition: all 0.3s;
 }
 .ant-progress-steps-item-active {
-  background: #1890ff;
+  background: #2c68ff;
 }
 .ant-progress-small.ant-progress-line,
 .ant-progress-small.ant-progress-line .ant-progress-text .anticon {
@@ -68,12 +68,12 @@
           animation: ant-progress-appear 0.3s;
 }
 .ant-progress-inner:not(.ant-progress-circle-gradient) .ant-progress-circle-path {
-  stroke: #1890ff;
+  stroke: #2c68ff;
 }
 .ant-progress-success-bg,
 .ant-progress-bg {
   position: relative;
-  background-color: #1890ff;
+  background-color: #2c68ff;
   border-radius: 100px;
   transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
 }

package/es/result/noFound.js

@@ -50,7 +50,7 @@ var NoFound = function NoFound() {
     fill: "#FFF"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48 0 16.28-13.2 29.48-29.48 29.48-16.282 0-29.48-13.2-29.48-29.48",
-    fill: "#1890FF"
+    fill: "#2c68ff"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894",
     fill: "#FFF"

package/es/result/style/index.css

@@ -8,7 +8,7 @@
   color: #ff4d4f;
 }
 .ant-result-info .ant-result-icon > .anticon {
-  color: #1890ff;
+  color: #2c68ff;
 }
 .ant-result-warning .ant-result-icon > .anticon {
   color: #faad14;

package/es/style/color/colors.less

@@ -1,7 +1,7 @@
 @import 'colorPalette';
 
 // color palettes
-@blue-base: #1890ff;
+@blue-base: #2c68ff;
 @blue-1: color(~`colorPalette('@{blue-6}', 1) `);
 @blue-2: color(~`colorPalette('@{blue-6}', 2) `);
 @blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@@ -158,5 +158,5 @@
 @gold-9: color(~`colorPalette('@{gold-6}', 9) `);
 @gold-10: color(~`colorPalette('@{gold-6}', 10) `);
 
-@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
-  purple;
+@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime,
+  green, blue, geekblue, purple;

package/es/table/demo/drag-sorting/index.less

@@ -1,7 +1,7 @@
 .components-table-demo-drag-sorting tr.drop-over-downward td {
-  border-bottom: 2px dashed #1890ff;
+  border-bottom: 2px dashed #2c68ff;
 }
 
 .components-table-demo-drag-sorting tr.drop-over-upward td {
-  border-top: 2px dashed #1890ff;
+  border-top: 2px dashed #2c68ff;
 }

package/es/tag/style/index.css

@@ -177,14 +177,14 @@
   border-color: #52c41a;
 }
 .ant-tag-blue {
-  color: #096dd9;
-  background: #e6f7ff;
-  border-color: #91d5ff;
+  color: #1a4ad9;
+  background: #f0f7ff;
+  border-color: #a6c8ff;
 }
 .ant-tag-blue-inverse {
   color: #fff;
-  background: #1890ff;
-  border-color: #1890ff;
+  background: #2c68ff;
+  border-color: #2c68ff;
 }
 .ant-tag-geekblue {
   color: #1d39c4;

package/es/tooltip/style/index.css

@@ -224,10 +224,10 @@
   background-color: #52c41a;
 }
 .ant-tooltip-blue .ant-tooltip-inner {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-tooltip-blue .ant-tooltip-arrow-content {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-tooltip-geekblue .ant-tooltip-inner {
   background-color: #2f54eb;

package/es/upload/style/index.css

@@ -288,8 +288,8 @@
 .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#e6f7ff'] {
   fill: #fff2f0;
 }
-.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'],
-.ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'] {
+.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#2c68ff'],
+.ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#2c68ff'] {
   fill: #f42d2d;
 }
 .ant-upload-list-picture .ant-upload-list-item-icon,

package/es/upload/style/index.less

@@ -269,7 +269,8 @@
       position: relative;
       height: 66px;
       padding: @padding-xs;
-      border: @border-width-base @upload-picture-card-border-style @border-color-base;
+      border: @border-width-base @upload-picture-card-border-style
+        @border-color-base;
       border-radius: @border-radius-base;
 
       &:hover {
@@ -313,7 +314,7 @@
             fill: @error-color-deprecated-bg;
           }
 
-          &[fill='#1890ff'] {
+          &[fill='#2c68ff'] {
             fill: @error-color;
           }
         }
@@ -499,7 +500,8 @@
   &-text,
   &-picture {
     &-container {
-      transition: opacity @animation-duration-slow, height @animation-duration-slow;
+      transition: opacity @animation-duration-slow,
+        height @animation-duration-slow;
 
       &::before {
         display: table;

package/lib/badge/style/index.css

@@ -1874,7 +1874,7 @@ html {
 }
 .ant-badge-status-processing {
   position: relative;
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-badge-status-processing::after {
   position: absolute;
@@ -1882,7 +1882,7 @@ html {
   left: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid #1890ff;
+  border: 1px solid #2c68ff;
   border-radius: 50%;
   -webkit-animation: antStatusProcessing 1.2s infinite ease-in-out;
           animation: antStatusProcessing 1.2s infinite ease-in-out;
@@ -1928,7 +1928,7 @@ html {
   background: #52c41a;
 }
 .ant-badge-status-blue {
-  background: #1890ff;
+  background: #2c68ff;
 }
 .ant-badge-status-geekblue {
   background: #2f54eb;
@@ -2196,8 +2196,8 @@ html {
   background: #52c41a;
 }
 .ant-ribbon-color-blue {
-  color: #1890ff;
-  background: #1890ff;
+  color: #2c68ff;
+  background: #2c68ff;
 }
 .ant-ribbon-color-geekblue {
   color: #2f54eb;

package/lib/popover/style/index.css

@@ -271,10 +271,10 @@
   background-color: #52c41a;
 }
 .ant-popover-blue .ant-popover-inner {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-blue .ant-popover-arrow-content {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-geekblue .ant-popover-inner {
   background-color: #2f54eb;

package/lib/progress/style/index.css

@@ -35,7 +35,7 @@
   transition: all 0.3s;
 }
 .ant-progress-steps-item-active {
-  background: #1890ff;
+  background: #2c68ff;
 }
 .ant-progress-small.ant-progress-line,
 .ant-progress-small.ant-progress-line .ant-progress-text .anticon {
@@ -68,12 +68,12 @@
           animation: ant-progress-appear 0.3s;
 }
 .ant-progress-inner:not(.ant-progress-circle-gradient) .ant-progress-circle-path {
-  stroke: #1890ff;
+  stroke: #2c68ff;
 }
 .ant-progress-success-bg,
 .ant-progress-bg {
   position: relative;
-  background-color: #1890ff;
+  background-color: #2c68ff;
   border-radius: 100px;
   transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
 }

package/lib/result/noFound.js

@@ -63,7 +63,7 @@ var NoFound = function NoFound() {
     fill: "#FFF"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48 0 16.28-13.2 29.48-29.48 29.48-16.282 0-29.48-13.2-29.48-29.48",
-    fill: "#1890FF"
+    fill: "#2c68ff"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894",
     fill: "#FFF"

package/lib/result/style/index.css

@@ -8,7 +8,7 @@
   color: #ff4d4f;
 }
 .ant-result-info .ant-result-icon > .anticon {
-  color: #1890ff;
+  color: #2c68ff;
 }
 .ant-result-warning .ant-result-icon > .anticon {
   color: #faad14;

package/lib/style/color/colors.less

@@ -1,7 +1,7 @@
 @import 'colorPalette';
 
 // color palettes
-@blue-base: #1890ff;
+@blue-base: #2c68ff;
 @blue-1: color(~`colorPalette('@{blue-6}', 1) `);
 @blue-2: color(~`colorPalette('@{blue-6}', 2) `);
 @blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@@ -158,5 +158,5 @@
 @gold-9: color(~`colorPalette('@{gold-6}', 9) `);
 @gold-10: color(~`colorPalette('@{gold-6}', 10) `);
 
-@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
-  purple;
+@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime,
+  green, blue, geekblue, purple;

package/lib/table/demo/drag-sorting/index.less

@@ -1,7 +1,7 @@
 .components-table-demo-drag-sorting tr.drop-over-downward td {
-  border-bottom: 2px dashed #1890ff;
+  border-bottom: 2px dashed #2c68ff;
 }
 
 .components-table-demo-drag-sorting tr.drop-over-upward td {
-  border-top: 2px dashed #1890ff;
+  border-top: 2px dashed #2c68ff;
 }

package/lib/tag/style/index.css

@@ -177,14 +177,14 @@
   border-color: #52c41a;
 }
 .ant-tag-blue {
-  color: #096dd9;
-  background: #e6f7ff;
-  border-color: #91d5ff;
+  color: #1a4ad9;
+  background: #f0f7ff;
+  border-color: #a6c8ff;
 }
 .ant-tag-blue-inverse {
   color: #fff;
-  background: #1890ff;
-  border-color: #1890ff;
+  background: #2c68ff;
+  border-color: #2c68ff;
 }
 .ant-tag-geekblue {
   color: #1d39c4;

package/lib/tooltip/style/index.css

@@ -224,10 +224,10 @@
   background-color: #52c41a;
 }
 .ant-tooltip-blue .ant-tooltip-inner {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-tooltip-blue .ant-tooltip-arrow-content {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-tooltip-geekblue .ant-tooltip-inner {
   background-color: #2f54eb;

package/lib/upload/style/index.css

@@ -288,8 +288,8 @@
 .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#e6f7ff'] {
   fill: #fff2f0;
 }
-.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'],
-.ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'] {
+.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#2c68ff'],
+.ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#2c68ff'] {
   fill: #f42d2d;
 }
 .ant-upload-list-picture .ant-upload-list-item-icon,

package/lib/upload/style/index.less

@@ -269,7 +269,8 @@
       position: relative;
       height: 66px;
       padding: @padding-xs;
-      border: @border-width-base @upload-picture-card-border-style @border-color-base;
+      border: @border-width-base @upload-picture-card-border-style
+        @border-color-base;
       border-radius: @border-radius-base;
 
       &:hover {
@@ -313,7 +314,7 @@
             fill: @error-color-deprecated-bg;
           }
 
-          &[fill='#1890ff'] {
+          &[fill='#2c68ff'] {
             fill: @error-color;
           }
         }
@@ -499,7 +500,8 @@
   &-text,
   &-picture {
     &-container {
-      transition: opacity @animation-duration-slow, height @animation-duration-slow;
+      transition: opacity @animation-duration-slow,
+        height @animation-duration-slow;
 
       &::before {
         display: table;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@fle-ui/next",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "scripts": {
     "start": "dumi dev UMI_ENV=docs",
     "docs:build": "dumi build UMI_ENV=docs",

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@fle-ui/next [18 Oct 2021 at 17:01]</title>
+    <title>@fle-ui/next [13 Dec 2021 at 14:03]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>