From d64f656594ec65dec7d3be505d089cb73649dd98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@antgroup.com>
Date: Sat, 20 Apr 2024 22:18:00 +0800
Subject: [PATCH] feat(card): new loading loading (#8336)

* feat(card): new loading loading

* feat(card): new loading loading

* feat(card): new loading loading
---
 packages/card/src/components/Card/style.ts    |  13 -
 .../card/src/components/CheckCard/Group.tsx   |  70 +-
 .../card/src/components/CheckCard/index.tsx   |  24 +-
 .../card/src/components/CheckCard/style.ts    |  17 -
 pnpm-lock.yaml                                | 147 +---
 tests/card/__snapshots__/demo.test.ts.snap    | 777 ++----------------
 6 files changed, 149 insertions(+), 899 deletions(-)

diff --git a/packages/card/src/components/Card/style.ts b/packages/card/src/components/Card/style.ts
index 7ac2035d732e..cdda8d38a09e 100644
--- a/packages/card/src/components/Card/style.ts
+++ b/packages/card/src/components/Card/style.ts
@@ -31,19 +31,6 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
       transition: 'all 0.3',
       ...resetComponent?.(token),
 
-      '&::after': {
-        position: 'absolute',
-        insetBlockStart: 2,
-        insetInlineEnd: 2,
-        width: 0,
-        height: 0,
-        border: `6px solid ${token.colorPrimary}`,
-        borderBlockEnd: '6px solid transparent',
-        borderInlineStart: '6px solid transparent',
-        borderStartEndRadius: 2,
-        content: '""',
-      },
-
       '&-box-shadow': {
         boxShadow:
           '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
diff --git a/packages/card/src/components/CheckCard/Group.tsx b/packages/card/src/components/CheckCard/Group.tsx
index 6fa3093c9ac1..9a2a39f89c6c 100644
--- a/packages/card/src/components/CheckCard/Group.tsx
+++ b/packages/card/src/components/CheckCard/Group.tsx
@@ -1,5 +1,5 @@
 import { useMountMergeState } from '@ant-design/pro-utils';
-import { Col, ConfigProvider, Row } from 'antd';
+import { ConfigProvider, Skeleton } from 'antd';
 
 import { RightOutlined } from '@ant-design/icons';
 import { proTheme } from '@ant-design/pro-provider';
@@ -14,6 +14,7 @@ import React, {
   useState,
 } from 'react';
 import CheckCard from './index';
+import { useStyle } from './style';
 
 export type CheckCardValueType = string | number | boolean;
 
@@ -123,57 +124,11 @@ export interface AbstractCheckCardGroupProps {
 
 export const CardLoading: React.FC<{
   prefixCls: string;
-}> = ({ prefixCls }) => {
-  const loadingBlockClass = `${prefixCls}-loading-block`;
+  hashId: string;
+}> = ({ prefixCls, hashId }) => {
   return (
-    <div className={`${prefixCls}-loading-content`}>
-      <Row
-        gutter={{
-          xs: 8,
-          sm: 8,
-          md: 8,
-          lg: 12,
-        }}
-      >
-        <Col span={22}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={8}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={14}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={6}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={16}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={13}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={9}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={4}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={3}>
-          <div className={loadingBlockClass} />
-        </Col>
-        <Col span={14}>
-          <div className={loadingBlockClass} />
-        </Col>
-      </Row>
+    <div className={classNames(`${prefixCls}-loading-content`, hashId)}>
+      <Skeleton loading active paragraph={{ rows: 4 }} title={false} />
     </div>
   );
 };
@@ -333,7 +288,6 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
     onChange,
     ...restProps
   } = props;
-  const { hashId } = proTheme.useToken();
 
   const antdContext = useContext(ConfigProvider.ConfigContext);
 
@@ -354,6 +308,8 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
     customizePrefixCls,
   );
 
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
   const groupPrefixCls = `${prefixCls}-group`;
 
   const domProps = omit(restProps, [
@@ -444,7 +400,11 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
         return list.map((option) => {
           if (option.children && option.children.length > 0) {
             return (
-              <SubCheckCardGroup title={option.title} prefix={groupPrefixCls}>
+              <SubCheckCardGroup
+                title={option.title}
+                prefix={groupPrefixCls}
+                key={option.value?.toString() || option.title?.toString()}
+              >
                 {renderOptions(option.children)}
               </SubCheckCardGroup>
             );
@@ -486,7 +446,7 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
 
   const classString = classNames(groupPrefixCls, className, hashId);
 
-  return (
+  return wrapSSR(
     <CheckCardGroupConnext.Provider
       value={{
         toggleOption,
@@ -504,7 +464,7 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
       <div className={classString} style={style} {...domProps}>
         {children}
       </div>
-    </CheckCardGroupConnext.Provider>
+    </CheckCardGroupConnext.Provider>,
   );
 };
 
diff --git a/packages/card/src/components/CheckCard/index.tsx b/packages/card/src/components/CheckCard/index.tsx
index 03b991901fa5..085711bd3862 100644
--- a/packages/card/src/components/CheckCard/index.tsx
+++ b/packages/card/src/components/CheckCard/index.tsx
@@ -271,7 +271,7 @@ const CheckCard: React.FC<CheckCardProps> & {
 
   const metaDom = useMemo(() => {
     if (cardLoading) {
-      return <CardLoading prefixCls={prefixCls || ''} />;
+      return <CardLoading prefixCls={prefixCls || ''} hashId={hashId} />;
     }
 
     if (cover) {
@@ -279,7 +279,7 @@ const CheckCard: React.FC<CheckCardProps> & {
     }
 
     const avatarDom = avatar ? (
-      <div className={`${prefixCls}-avatar ${hashId}`.trim()}>
+      <div className={classNames(`${prefixCls}-avatar`, hashId)}>
         {typeof avatar === 'string' ? (
           <Avatar size={48} shape="square" src={avatar} />
         ) : (
@@ -289,23 +289,27 @@ const CheckCard: React.FC<CheckCardProps> & {
     ) : null;
 
     const headerDom = (title ?? extra) != null && (
-      <div className={`${prefixCls}-header ${hashId}`.trim()}>
-        <div className={`${prefixCls}-header-left ${hashId}`.trim()}>
-          <div className={`${prefixCls}-title ${hashId}`.trim()}>{title}</div>
+      <div className={classNames(`${prefixCls}-header`, hashId)}>
+        <div className={classNames(`${prefixCls}-header-left`, hashId)}>
+          <div className={classNames(`${prefixCls}-title`, hashId)}>
+            {title}
+          </div>
           {props.subTitle ? (
-            <div className={`${prefixCls}-subTitle ${hashId}`.trim()}>
+            <div className={classNames(`${prefixCls}-subTitle`, hashId)}>
               {props.subTitle}
             </div>
           ) : null}
         </div>
         {extra && (
-          <div className={`${prefixCls}-extra ${hashId}`.trim()}>{extra}</div>
+          <div className={classNames(`${prefixCls}-extra`, hashId)}>
+            {extra}
+          </div>
         )}
       </div>
     );
 
     const descriptionDom = description ? (
-      <div className={`${prefixCls}-description ${hashId}`.trim()}>
+      <div className={classNames(`${prefixCls}-description`, hashId)}>
         {description}
       </div>
     ) : null;
@@ -318,7 +322,7 @@ const CheckCard: React.FC<CheckCardProps> & {
       <div className={metaClass}>
         {avatarDom}
         {headerDom || descriptionDom ? (
-          <div className={`${prefixCls}-detail ${hashId}`.trim()}>
+          <div className={classNames(`${prefixCls}-detail`, hashId)}>
             {headerDom}
             {descriptionDom}
           </div>
@@ -351,7 +355,7 @@ const CheckCard: React.FC<CheckCardProps> & {
       {metaDom}
       {props.children ? (
         <div
-          className={classNames(`${prefixCls}-body`)}
+          className={classNames(`${prefixCls}-body`, hashId)}
           style={props.bodyStyle}
         >
           {props.children}
diff --git a/packages/card/src/components/CheckCard/style.ts b/packages/card/src/components/CheckCard/style.ts
index f4cd0d98ba4b..2fbdd1e6a10c 100644
--- a/packages/card/src/components/CheckCard/style.ts
+++ b/packages/card/src/components/CheckCard/style.ts
@@ -100,23 +100,6 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
       [`${token.componentCls}-loading`]: {
         overflow: 'hidden',
         userSelect: 'none',
-        '&-content': {
-          paddingInline: token.padding,
-          paddingBlock: token.paddingSM,
-          p: {
-            marginBlock: 0,
-            marginInline: 0,
-          },
-          [`${token.componentCls}-loading-block`]: {
-            height: '14px',
-            marginBlock: '4px',
-            background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
-            animationName: cardLoading as unknown as string,
-            animationDuration: '1.4s',
-            animationTimingFunction: 'ease',
-            animationIterationCount: 'infinite',
-          },
-        },
       },
       '&:focus': proCheckCardActive(token),
       '&-checked': {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f658ac7209a6..85cbae025a45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,10 +104,10 @@ importers:
         specifier: ^14.18.63
         version: 14.18.63
       '@types/react':
-        specifier: ^18.2.79
+        specifier: ^18.0.38
         version: 18.2.79
       '@types/react-dom':
-        specifier: ^18.2.25
+        specifier: ^18.0.11
         version: 18.2.25
       '@types/react-helmet':
         specifier: ^6.1.11
@@ -380,10 +380,10 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -408,34 +408,34 @@ importers:
   packages/components:
     dependencies:
       '@ant-design/pro-card':
-        specifier: 2.7.1
+        specifier: 2.7.2
         version: link:../card
       '@ant-design/pro-descriptions':
-        specifier: 2.5.40
+        specifier: 2.5.41
         version: link:../descriptions
       '@ant-design/pro-field':
-        specifier: 2.14.13
+        specifier: 2.14.14
         version: link:../field
       '@ant-design/pro-form':
-        specifier: 2.26.3
+        specifier: 2.26.4
         version: link:../form
       '@ant-design/pro-layout':
-        specifier: 7.19.3
+        specifier: 7.19.4
         version: link:../layout
       '@ant-design/pro-list':
-        specifier: 2.5.55
+        specifier: 2.5.56
         version: link:../list
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-skeleton':
         specifier: 2.1.13
         version: link:../skeleton
       '@ant-design/pro-table':
-        specifier: 3.15.6
+        specifier: 3.15.7
         version: link:../table
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.16.3
@@ -444,19 +444,19 @@ importers:
   packages/descriptions:
     dependencies:
       '@ant-design/pro-field':
-        specifier: 2.14.13
+        specifier: 2.14.14
         version: link:../field
       '@ant-design/pro-form':
-        specifier: 2.26.3
+        specifier: 2.26.4
         version: link:../form
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-skeleton':
         specifier: 2.1.13
         version: link:../skeleton
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -478,10 +478,10 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -527,13 +527,13 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-field':
-        specifier: 2.14.13
+        specifier: 2.14.14
         version: link:../field
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -576,10 +576,10 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -625,16 +625,16 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-card':
-        specifier: 2.7.1
+        specifier: 2.7.2
         version: link:../card
       '@ant-design/pro-field':
-        specifier: 2.14.13
+        specifier: 2.14.14
         version: link:../field
       '@ant-design/pro-table':
-        specifier: 3.15.6
+        specifier: 3.15.7
         version: link:../table
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -660,9 +660,9 @@ importers:
     dependencies:
       '@ant-design/cssinjs':
         specifier: ^1.11.1
-        version: 1.19.1(react-dom@18.2.0)(react@18.2.0)
+        version: 1.20.0(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -697,19 +697,19 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-card':
-        specifier: 2.7.1
+        specifier: 2.7.2
         version: link:../card
       '@ant-design/pro-field':
-        specifier: 2.14.13
+        specifier: 2.14.14
         version: link:../field
       '@ant-design/pro-form':
-        specifier: 2.26.3
+        specifier: 2.26.4
         version: link:../form
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@ant-design/pro-utils':
-        specifier: 2.15.9
+        specifier: 2.15.10
         version: link:../utils
       '@babel/runtime':
         specifier: ^7.18.0
@@ -758,7 +758,7 @@ importers:
         specifier: ^5.0.0
         version: 5.3.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider':
-        specifier: 2.14.3
+        specifier: 2.14.4
         version: link:../provider
       '@babel/runtime':
         specifier: ^7.18.0
@@ -814,23 +814,6 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
 
-  /@ant-design/cssinjs@1.19.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-hgQ3wiys3X0sqDKWkqCJ6EYdF79i9JCvtavmIGwuuPUKmoJXV8Ff0sY+yQQSxk2dRmMyam/bYKo/Bwor45hnZw==}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@emotion/hash': 0.8.0
-      '@emotion/unitless': 0.7.5
-      classnames: 2.5.1
-      csstype: 3.1.3
-      rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      stylis: 4.3.1
-    dev: false
-
   /@ant-design/cssinjs@1.20.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-uG3iWzJxgNkADdZmc6W0Ci3iQAUOvLMcM8SnnmWq3r6JeocACft4ChnY/YWvI2Y+rG/68QBla/O+udke1yH3vg==}
     peerDependencies:
@@ -846,7 +829,6 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       stylis: 4.3.1
-    dev: true
 
   /@ant-design/icons-svg@4.4.2:
     resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
@@ -4157,7 +4139,6 @@ packages:
   /@lerna/add@3.21.0:
     resolution: {integrity: sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@evocateur/pacote': 9.6.5
       '@lerna/bootstrap': 3.21.0
@@ -4176,7 +4157,6 @@ packages:
   /@lerna/bootstrap@3.21.0:
     resolution: {integrity: sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/filter-options': 3.20.0
@@ -4208,7 +4188,6 @@ packages:
   /@lerna/changed@3.21.0:
     resolution: {integrity: sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/collect-updates': 3.20.0
       '@lerna/command': 3.21.0
@@ -4221,7 +4200,6 @@ packages:
   /@lerna/check-working-tree@3.16.5:
     resolution: {integrity: sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/collect-uncommitted': 3.16.5
       '@lerna/describe-ref': 3.16.5
@@ -4240,7 +4218,6 @@ packages:
   /@lerna/clean@3.21.0:
     resolution: {integrity: sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/filter-options': 3.20.0
@@ -4257,7 +4234,6 @@ packages:
   /@lerna/cli@3.18.5:
     resolution: {integrity: sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/global-options': 3.13.0
       dedent: 0.7.0
@@ -4268,7 +4244,6 @@ packages:
   /@lerna/collect-uncommitted@3.16.5:
     resolution: {integrity: sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       chalk: 2.4.2
@@ -4279,7 +4254,6 @@ packages:
   /@lerna/collect-updates@3.20.0:
     resolution: {integrity: sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/describe-ref': 3.16.5
@@ -4291,7 +4265,6 @@ packages:
   /@lerna/command@3.21.0:
     resolution: {integrity: sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/package-graph': 3.18.5
@@ -4310,7 +4283,6 @@ packages:
   /@lerna/conventional-commits@3.22.0:
     resolution: {integrity: sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/validation-error': 3.13.0
       conventional-changelog-angular: 5.0.13
@@ -4328,7 +4300,6 @@ packages:
   /@lerna/create-symlink@3.16.2:
     resolution: {integrity: sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@zkochan/cmd-shim': 3.1.0
       fs-extra: 8.1.0
@@ -4364,7 +4335,6 @@ packages:
   /@lerna/describe-ref@3.16.5:
     resolution: {integrity: sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       npmlog: 4.1.2
@@ -4373,7 +4343,6 @@ packages:
   /@lerna/diff@3.21.0:
     resolution: {integrity: sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/command': 3.21.0
@@ -4386,7 +4355,6 @@ packages:
   /@lerna/exec@3.21.0:
     resolution: {integrity: sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/command': 3.21.0
@@ -4402,7 +4370,6 @@ packages:
   /@lerna/filter-options@3.20.0:
     resolution: {integrity: sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/collect-updates': 3.20.0
       '@lerna/filter-packages': 3.18.0
@@ -4414,7 +4381,6 @@ packages:
   /@lerna/filter-packages@3.18.0:
     resolution: {integrity: sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/validation-error': 3.13.0
       multimatch: 3.0.0
@@ -4424,14 +4390,12 @@ packages:
   /@lerna/get-npm-exec-opts@3.13.0:
     resolution: {integrity: sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       npmlog: 4.1.2
     dev: true
 
   /@lerna/get-packed@3.16.0:
     resolution: {integrity: sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       fs-extra: 8.1.0
       ssri: 6.0.2
@@ -4441,7 +4405,6 @@ packages:
   /@lerna/github-client@3.22.0(@octokit/core@3.6.0):
     resolution: {integrity: sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@octokit/plugin-enterprise-rest': 6.0.1
@@ -4456,7 +4419,6 @@ packages:
   /@lerna/gitlab-client@3.15.0:
     resolution: {integrity: sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       node-fetch: 2.7.0
       npmlog: 4.1.2
@@ -4468,13 +4430,11 @@ packages:
   /@lerna/global-options@3.13.0:
     resolution: {integrity: sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dev: true
 
   /@lerna/has-npm-version@3.16.5:
     resolution: {integrity: sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       semver: 6.3.1
@@ -4483,7 +4443,6 @@ packages:
   /@lerna/import@3.22.0:
     resolution: {integrity: sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/command': 3.21.0
@@ -4500,7 +4459,6 @@ packages:
   /@lerna/info@3.21.0:
     resolution: {integrity: sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/output': 3.13.0
@@ -4512,7 +4470,6 @@ packages:
   /@lerna/init@3.21.0:
     resolution: {integrity: sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/command': 3.21.0
@@ -4526,7 +4483,6 @@ packages:
   /@lerna/link@3.21.0:
     resolution: {integrity: sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/package-graph': 3.18.5
@@ -4540,7 +4496,6 @@ packages:
   /@lerna/list@3.21.0:
     resolution: {integrity: sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/filter-options': 3.20.0
@@ -4553,7 +4508,6 @@ packages:
   /@lerna/listable@3.18.5:
     resolution: {integrity: sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/query-graph': 3.18.5
       chalk: 2.4.2
@@ -4563,7 +4517,6 @@ packages:
   /@lerna/log-packed@3.16.0:
     resolution: {integrity: sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       byte-size: 5.0.1
       columnify: 1.6.0
@@ -4574,7 +4527,6 @@ packages:
   /@lerna/npm-conf@3.16.0:
     resolution: {integrity: sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       config-chain: 1.1.13
       pify: 4.0.1
@@ -4583,7 +4535,6 @@ packages:
   /@lerna/npm-dist-tag@3.18.5:
     resolution: {integrity: sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@evocateur/npm-registry-fetch': 4.0.0
       '@lerna/otplease': 3.18.5
@@ -4597,7 +4548,6 @@ packages:
   /@lerna/npm-install@3.16.5:
     resolution: {integrity: sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/get-npm-exec-opts': 3.13.0
@@ -4611,7 +4561,6 @@ packages:
   /@lerna/npm-publish@3.18.5:
     resolution: {integrity: sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@evocateur/libnpmpublish': 1.2.2
       '@lerna/otplease': 3.18.5
@@ -4629,7 +4578,6 @@ packages:
   /@lerna/npm-run-script@3.16.5:
     resolution: {integrity: sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       '@lerna/get-npm-exec-opts': 3.13.0
@@ -4639,7 +4587,6 @@ packages:
   /@lerna/otplease@3.18.5:
     resolution: {integrity: sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/prompt': 3.18.5
       figgy-pudding: 3.5.2
@@ -4648,14 +4595,12 @@ packages:
   /@lerna/output@3.13.0:
     resolution: {integrity: sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       npmlog: 4.1.2
     dev: true
 
   /@lerna/pack-directory@3.16.4:
     resolution: {integrity: sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/get-packed': 3.16.0
       '@lerna/package': 3.16.0
@@ -4670,7 +4615,6 @@ packages:
   /@lerna/package-graph@3.18.5:
     resolution: {integrity: sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/prerelease-id-from-version': 3.16.0
       '@lerna/validation-error': 3.13.0
@@ -4682,7 +4626,6 @@ packages:
   /@lerna/package@3.16.0:
     resolution: {integrity: sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       load-json-file: 5.3.0
       npm-package-arg: 6.1.1
@@ -4692,7 +4635,6 @@ packages:
   /@lerna/prerelease-id-from-version@3.16.0:
     resolution: {integrity: sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       semver: 6.3.1
     dev: true
@@ -4700,7 +4642,6 @@ packages:
   /@lerna/profiler@3.20.0:
     resolution: {integrity: sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       figgy-pudding: 3.5.2
       fs-extra: 8.1.0
@@ -4711,7 +4652,6 @@ packages:
   /@lerna/project@3.21.0:
     resolution: {integrity: sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/package': 3.16.0
       '@lerna/validation-error': 3.13.0
@@ -4732,7 +4672,6 @@ packages:
   /@lerna/prompt@3.18.5:
     resolution: {integrity: sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       inquirer: 6.5.2
       npmlog: 4.1.2
@@ -4741,7 +4680,6 @@ packages:
   /@lerna/publish@3.22.1(@octokit/core@3.6.0):
     resolution: {integrity: sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@evocateur/libnpmaccess': 3.1.2
       '@evocateur/npm-registry-fetch': 4.0.0
@@ -4782,7 +4720,6 @@ packages:
   /@lerna/pulse-till-done@3.13.0:
     resolution: {integrity: sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       npmlog: 4.1.2
     dev: true
@@ -4790,7 +4727,6 @@ packages:
   /@lerna/query-graph@3.18.5:
     resolution: {integrity: sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/package-graph': 3.18.5
       figgy-pudding: 3.5.2
@@ -4799,7 +4735,6 @@ packages:
   /@lerna/resolve-symlink@3.16.0:
     resolution: {integrity: sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       fs-extra: 8.1.0
       npmlog: 4.1.2
@@ -4809,7 +4744,6 @@ packages:
   /@lerna/rimraf-dir@3.16.5:
     resolution: {integrity: sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/child-process': 3.16.5
       npmlog: 4.1.2
@@ -4820,7 +4754,6 @@ packages:
   /@lerna/run-lifecycle@3.16.2:
     resolution: {integrity: sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/npm-conf': 3.16.0
       figgy-pudding: 3.5.2
@@ -4831,7 +4764,6 @@ packages:
   /@lerna/run-topologically@3.18.5:
     resolution: {integrity: sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/query-graph': 3.18.5
       figgy-pudding: 3.5.2
@@ -4841,7 +4773,6 @@ packages:
   /@lerna/run@3.21.0:
     resolution: {integrity: sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/command': 3.21.0
       '@lerna/filter-options': 3.20.0
@@ -4859,7 +4790,6 @@ packages:
   /@lerna/symlink-binary@3.17.0:
     resolution: {integrity: sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/create-symlink': 3.16.2
       '@lerna/package': 3.16.0
@@ -4870,7 +4800,6 @@ packages:
   /@lerna/symlink-dependencies@3.17.0:
     resolution: {integrity: sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/create-symlink': 3.16.2
       '@lerna/resolve-symlink': 3.16.0
@@ -4884,13 +4813,11 @@ packages:
   /@lerna/timer@3.13.0:
     resolution: {integrity: sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dev: true
 
   /@lerna/validation-error@3.13.0:
     resolution: {integrity: sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       npmlog: 4.1.2
     dev: true
@@ -4898,7 +4825,6 @@ packages:
   /@lerna/version@3.22.1(@octokit/core@3.6.0):
     resolution: {integrity: sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       '@lerna/check-working-tree': 3.16.5
       '@lerna/child-process': 3.16.5
@@ -4935,7 +4861,6 @@ packages:
   /@lerna/write-log-file@3.13.0:
     resolution: {integrity: sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==}
     engines: {node: '>= 6.9.0'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     dependencies:
       npmlog: 4.1.2
       write-file-atomic: 2.4.3
diff --git a/tests/card/__snapshots__/demo.test.ts.snap b/tests/card/__snapshots__/demo.test.ts.snap
index e4112847cb28..1fdb38e5402e 100644
--- a/tests/card/__snapshots__/demo.test.ts.snap
+++ b/tests/card/__snapshots__/demo.test.ts.snap
@@ -1227,108 +1227,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -1340,108 +1253,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -1453,108 +1279,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -1776,108 +1515,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -1889,108 +1541,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -2002,108 +1567,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
             class="ant-pro-checkcard-loading-content"
           >
             <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-22"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
+              class="ant-skeleton ant-skeleton-active"
             >
               <div
-                class="ant-col ant-col-8"
-                style="padding-left: 4px; padding-right: 4px;"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-6"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-16"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-13"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-9"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-            </div>
-            <div
-              class="ant-row"
-              style="margin-left: -4px; margin-right: -4px;"
-            >
-              <div
-                class="ant-col ant-col-4"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-3"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
-              </div>
-              <div
-                class="ant-col ant-col-14"
-                style="padding-left: 4px; padding-right: 4px;"
-              >
-                <div
-                  class="ant-pro-checkcard-loading-block"
-                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li />
+                  <li />
+                  <li />
+                  <li
+                    style="width: 61%;"
+                  />
+                </ul>
               </div>
             </div>
           </div>
@@ -2438,108 +1916,21 @@ exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demo
         class="ant-pro-checkcard-loading-content"
       >
         <div
-          class="ant-row"
-          style="margin-left: -4px; margin-right: -4px;"
-        >
-          <div
-            class="ant-col ant-col-22"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left: -4px; margin-right: -4px;"
+          class="ant-skeleton ant-skeleton-active"
         >
           <div
-            class="ant-col ant-col-8"
-            style="padding-left: 4px; padding-right: 4px;"
+            class="ant-skeleton-content"
           >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-14"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left: -4px; margin-right: -4px;"
-        >
-          <div
-            class="ant-col ant-col-6"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-16"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left: -4px; margin-right: -4px;"
-        >
-          <div
-            class="ant-col ant-col-13"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-9"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left: -4px; margin-right: -4px;"
-        >
-          <div
-            class="ant-col ant-col-4"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-3"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-14"
-            style="padding-left: 4px; padding-right: 4px;"
-          >
-            <div
-              class="ant-pro-checkcard-loading-block"
-            />
+            <ul
+              class="ant-skeleton-paragraph"
+            >
+              <li />
+              <li />
+              <li />
+              <li
+                style="width: 61%;"
+              />
+            </ul>
           </div>
         </div>
       </div>