@ant-design/pro-components 3.1.3-0 → 3.1.4-0

package/lib/list/style/index.js

@@ -3,76 +3,189 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.techUiListActive = void 0;
 exports.useStyle = useStyle;
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../provider");
-const techUiListActive = exports.techUiListActive = new _cssinjs.Keyframes('techUiListActive', {
+const genTechUiListActiveKeyframes = token => new _cssinjs.Keyframes('techUiListActive', {
   '0%': {
     backgroundColor: 'unset'
   },
   '30%': {
-    background: '#fefbe6'
+    background: token.colorWarningBg ?? (0, _provider.setAlpha)(token.colorWarning, 0.15)
   },
   '100%': {
     backgroundColor: 'unset'
   }
 });
 const genProListStyle = token => {
+  const techUiListActive = genTechUiListActiveKeyframes(token);
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       backgroundColor: 'transparent',
       [`${token.proComponentsCls}-table-alert`]: {
-        marginBlockEnd: '16px'
+        marginBlockEnd: token.margin
+      },
+      [`${token.proComponentsCls}-list-item`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        cursor: 'pointer',
+        flex: 1,
+        minWidth: 0,
+        padding: token.paddingXS,
+        alignItems: 'flex-start',
+        borderRadius: token.borderRadius,
+        listStyle: 'none',
+        '& > *:first-child': {
+          flex: 1,
+          minWidth: 0
+        }
+      },
+      '&-filled': {
+        backgroundColor: token.colorFillQuaternary,
+        borderRadius: token.borderRadius,
+        [`${token.componentCls}-toolbar`]: {
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        }
+      },
+      '&-outlined': {
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        borderRadius: token.borderRadius
+      },
+      '&-borderless': {
+        [`${token.componentCls}-toolbar`]: {
+          borderBlockEnd: 'none'
+        }
+      },
+      [`${token.proComponentsCls}-list-item-meta`]: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        minWidth: 0,
+        gap: token.marginXS
+      },
+      [`${token.proComponentsCls}-list-item-meta-title`]: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: token.marginXS,
+        borderBlockEnd: 'none',
+        margin: 0,
+        minWidth: 0
+      },
+      '&-split': {
+        [`${token.componentCls}-row`]: {
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          '&:last-child': {
+            borderBlockEnd: 'none'
+          }
+        },
+        [`${token.proComponentsCls}-list-item`]: {
+          borderRadius: 0,
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          '&:last-child': {
+            borderBlockEnd: 'none'
+          }
+        }
+      },
+      '&-no-split': {
+        [`${token.componentCls}-row`]: {
+          borderBlockEnd: 'none'
+        },
+        [`${token.proComponentsCls}-list ${token.proComponentsCls}-list-item`]: {
+          borderBlockEnd: 'none'
+        }
+      },
+      [`${token.proComponentsCls}-list-item-action,
+        ${token.proComponentsCls}-card-extra,
+        ${token.proComponentsCls}-card-actions`]: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: token.marginSM,
+        flexShrink: 0
       },
       '&-row': {
-        borderBlockEnd: `1px solid ${token.colorSplit}`,
-        [`${token.antCls}-list-item-meta-title`]: {
+        [`${token.proComponentsCls}-list-item-meta`]: {
+          display: 'flex',
+          flex: '1',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          minWidth: 0
+        },
+        [`${token.proComponentsCls}-list-item-meta-content`]: {
+          flex: '1',
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: token.marginXXS
+        },
+        [`${token.proComponentsCls}-list-item-meta-title`]: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: token.marginXS,
           borderBlockEnd: 'none',
           margin: 0
         },
         '&:last-child': {
           borderBlockEnd: 'none',
-          [`${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             borderBlockEnd: 'none'
           }
         },
         '&:hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.02)',
+          backgroundColor: (0, _provider.setAlpha)(token.colorTextBase, 0.02),
           transition: 'background-color 0.3s',
-          [`${token.antCls}-list-item-action`]: {
-            display: 'block'
+          [`${token.proComponentsCls}-list-item-action`]: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: token.marginSM,
+            flexShrink: 0
           },
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-action-item`]: {
+            display: 'inline-flex',
+            alignItems: 'center'
+          },
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'flex'
           },
           [`${token.componentCls}-row-extra`]: {
-            display: 'block'
+            display: 'flex'
           },
           [`${token.componentCls}-row-subheader-actions`]: {
-            display: 'block'
+            display: 'flex'
           }
         },
-        '&-card': {
-          marginBlock: 8,
+        [`&-card`]: {
+          marginBlock: 0,
           marginInline: 0,
           paddingBlock: 0,
-          paddingInline: 8,
+          paddingInline: 0
+        },
+        '&-card-container': {
+          marginBlock: 0,
+          marginInline: 0,
+          paddingBlock: 0,
+          paddingInline: 0,
           '&:hover': {
             backgroundColor: 'transparent'
           },
-          [`${token.antCls}-list-item-meta-title`]: {
+          [`${token.proComponentsCls}-list-item-meta-title`]: {
             flexShrink: 9,
             marginBlock: 0,
             marginInline: 0,
-            lineHeight: '22px'
+            lineHeight: 22
           }
         },
         [`&${token.componentCls}-row-editable`]: {
-          [`${token.componentCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             '&-meta': {
               '&-avatar,&-description,&-title': {
-                paddingBlock: 6,
+                paddingBlock: token.paddingSM,
                 paddingInline: 0,
                 '&-editable': {
                   paddingBlock: 0
@@ -80,7 +193,12 @@ const genProListStyle = token => {
               }
             },
             '&-action': {
-              display: 'block'
+              display: 'flex',
+              alignItems: 'center',
+              gap: token.marginSM,
+              listStyle: 'none',
+              padding: 0,
+              margin: 0
             }
           }
         },
@@ -102,18 +220,27 @@ const genProListStyle = token => {
         [`&${token.componentCls}-row-type-top`]: {
           backgroundImage: "url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg')",
           backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'left top',
-          backgroundSize: '12px 12px'
+          backgroundPosition: '0 0',
+          backgroundSize: `${token.fontSizeSM}px ${token.fontSizeSM}px`
         },
         '&-show-action-hover': {
-          [`${token.antCls}-list-item-action,
+          [`${token.proComponentsCls}-list-item-action,
             ${token.proComponentsCls}-card-extra,
             ${token.proComponentsCls}-card-actions`]: {
-            display: 'flex'
+            display: 'none'
+          },
+          '&:hover': {
+            [`${token.proComponentsCls}-list-item-action,
+              ${token.proComponentsCls}-card-extra,
+              ${token.proComponentsCls}-card-actions`]: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: token.marginSM
+            }
           }
         },
         '&-show-extra-hover': {
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'none'
           }
         },
@@ -124,29 +251,28 @@ const genProListStyle = token => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          height: '44px',
-          paddingInline: 24,
+          height: 44,
+          paddingInline: token.paddingLG,
           paddingBlock: 0,
           color: token.colorTextSecondary,
-          lineHeight: '44px',
-          background: 'rgba(0, 0, 0, 0.02)',
+          lineHeight: 44,
+          background: (0, _provider.setAlpha)(token.colorTextBase, 0.02),
           '&-actions': {
             display: 'none'
           },
           '&-actions *': {
-            marginInlineEnd: 8,
+            marginInlineEnd: token.marginXS,
             '&:last-child': {
               marginInlineEnd: 0
             }
           }
         },
         '&-expand-icon': {
-          marginInlineEnd: 8,
+          marginInlineEnd: token.marginXS,
           display: 'flex',
-          fontSize: 12,
+          fontSize: token.fontSizeSM,
           cursor: 'pointer',
-          height: '24px',
-          marginRight: 4,
+          height: 24,
           color: token.colorTextSecondary,
           '> .anticon > svg': {
             transition: '0.3s'
@@ -158,11 +284,12 @@ const genProListStyle = token => {
           }
         },
         '&-title': {
-          marginInlineEnd: '16px',
-          wordBreak: 'break-all',
+          flexShrink: 0,
+          marginInlineEnd: 0,
+          wordBreak: 'break-word',
           cursor: 'pointer',
           '&-editable': {
-            paddingBlock: 8
+            paddingBlock: token.paddingSM
           },
           '&:hover': {
             color: token.colorPrimary
@@ -173,59 +300,64 @@ const genProListStyle = token => {
           display: 'flex',
           flex: '1',
           flexDirection: 'column',
-          marginBlock: 0,
-          marginInline: 32
+          marginBlock: 0
         },
         '&-subTitle': {
-          color: 'rgba(0, 0, 0, 0.45)',
+          display: 'inline-flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: token.marginXXS,
+          color: token.colorTextSecondary,
           '&-editable': {
-            paddingBlock: 8
+            paddingBlock: token.paddingSM
           }
         },
         '&-description': {
-          marginBlockStart: '4px',
-          wordBreak: 'break-all'
+          marginBlockStart: token.marginXXS,
+          wordBreak: 'break-all',
+          flexShrink: 0
         },
         '&-avatar': {
-          display: 'flex'
+          display: 'flex',
+          flexShrink: 0,
+          alignItems: 'flex-start'
         },
         '&-header': {
           display: 'flex',
           flex: '1',
+          alignItems: 'flex-start',
           justifyContent: 'flex-start',
+          width: '100%',
+          minWidth: 0,
           h4: {
             margin: 0,
-            padding: 0
+            padding: 0,
+            display: 'flex',
+            flex: '1',
+            minWidth: 0
           }
         },
         '&-header-container': {
           display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
           alignItems: 'center',
-          justifyContent: 'flex-start'
+          gap: token.marginXS,
+          flex: '1',
+          minWidth: 0
         },
         '&-header-option': {
-          display: 'flex'
+          display: 'flex',
+          flexShrink: 0,
+          alignItems: 'center'
         },
         '&-checkbox': {
-          width: '16px',
-          marginInlineEnd: '12px'
+          width: 16,
+          marginInlineEnd: token.marginSM
         },
-        '&-no-split': {
+        [`${token.proComponentsCls}-list-vertical`]: {
           [`${token.componentCls}-row`]: {
-            borderBlockEnd: 'none'
-          },
-          [`${token.antCls}-list ${token.antCls}-list-item`]: {
-            borderBlockEnd: 'none'
-          }
-        },
-        '&-bordered': {
-          [`${token.componentCls}-toolbar`]: {
-            borderBlockEnd: `1px solid ${token.colorSplit}`
-          }
-        },
-        [`${token.antCls}-list-vertical`]: {
-          [`${token.componentCls}-row`]: {
-            borderBlockEnd: '12px 18px 12px 24px'
+            marginBlockEnd: token.marginSM
           },
           '&-header-title': {
             display: 'flex',
@@ -238,56 +370,52 @@ const genProListStyle = token => {
             marginInline: 0
           },
           '&-subTitle': {
-            marginBlockStart: 8
+            marginBlockStart: token.marginXS
           },
-          [`${token.antCls}-list-item-extra`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
             display: 'flex',
             alignItems: 'center',
-            marginInlineStart: '32px',
             [`${token.componentCls}-row-description`]: {
-              marginBlockStart: 16
+              marginBlockStart: token.margin
             }
           },
-          [`${token.antCls}-list-bordered ${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-bordered ${token.proComponentsCls}-list-item`]: {
             paddingInline: 0
           },
           [`${token.componentCls}-row-show-extra-hover`]: {
-            [`${token.antCls}-list-item-extra `]: {
+            [`${token.proComponentsCls}-list-item-extra `]: {
               display: 'none'
             }
           }
         },
-        [`${token.antCls}-list-pagination`]: {
+        [`${token.proComponentsCls}-list-pagination`]: {
           marginBlockStart: token.margin,
           marginBlockEnd: token.margin
         },
-        [`${token.antCls}-list-list`]: {
+        [`${token.proComponentsCls}-list-list`]: {
           '&-item': {
             cursor: 'pointer',
-            paddingBlock: 12,
-            paddingInline: 12
+            paddingBlock: token.paddingSM,
+            paddingInline: token.paddingSM
           }
         },
-        [`${token.antCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
+        [`${token.proComponentsCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
           '&-header': {
             paddingBlock: 0,
             paddingInline: 0,
             borderBlockEnd: 'none'
           },
-          [`${token.antCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item`]: {
             width: '100%',
-            paddingBlock: 12,
-            paddingInlineStart: 24,
-            paddingInlineEnd: 18,
-            [`${token.antCls}-list-item-meta-avatar`]: {
+            paddingBlock: token.paddingSM,
+            paddingInlineStart: token.paddingLG,
+            paddingInlineEnd: token.paddingMD,
+            [`${token.proComponentsCls}-list-item-meta-avatar`]: {
               display: 'flex',
               alignItems: 'center',
-              marginInlineEnd: 8
-            },
-            [`${token.antCls}-list-item-action-split`]: {
-              display: 'none'
+              marginInlineEnd: token.marginXS
             },
-            [`${token.antCls}-list-item-meta-title`]: {
+            [`${token.proComponentsCls}-list-item-meta-title`]: {
               marginBlock: 0,
               marginInline: 0
             }

package/lib/provider/index.js

@@ -135,7 +135,6 @@ const CacheClean = () => {
       // @ts-ignore
       cache.clear();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return null;
 };
@@ -260,8 +259,6 @@ const ConfigProviderContainer = props => {
         })
       })
     });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [restConfig, themeConfig, proConfigContextValue, autoClearCache, children]);
   if (!autoClearCache) return configProviderDom;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_swr.SWRConfig, {

package/lib/provider/useStyle/index.d.ts

@@ -19,27 +19,7 @@ export declare const setAlpha: (baseColor: string, alpha: number) => string;
  */
 export declare const lighten: (baseColor: string, brightness: number) => string;
 export type GenerateStyle<ComponentToken extends object = GlobalToken, ReturnType = CSSInterpolation> = (token: ComponentToken, ...rest: any[]) => ReturnType;
-export declare const proTheme: {
-    defaultSeed: import("antd/es/theme/internal").SeedToken;
-    useToken: () => {
-        theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/internal").AliasToken>;
-        token: import("antd").GlobalToken;
-        hashId: string;
-        cssVar: import("antd").GlobalToken;
-    };
-    defaultAlgorithm: typeof import("antd/es/theme/themes/default").default;
-    darkAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    compactAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    getDesignToken: (config?: import("antd").ThemeConfig | undefined) => import("antd/es/theme/internal").AliasToken;
-    defaultConfig: {
-        token: import("antd/es/theme/internal").SeedToken;
-        override: {
-            override: import("antd/es/theme/internal").SeedToken;
-        };
-        hashed: boolean;
-    };
-    _internalContext: React.Context<import("antd/es/theme/context").DesignTokenProviderProps>;
-};
+export declare const proTheme: any;
 export type UseStyleResult = {
     wrapSSR: (node: React.ReactElement) => React.ReactElement;
     hashId: string;

package/lib/provider/useStyle/index.js

@@ -32,6 +32,7 @@ const lighten = (baseColor, brightness) => {
   return instance.lighten(brightness).toHexString();
 };
 exports.lighten = lighten;
+// 为了兼容 antd 类型，这里使用 any
 const proTheme = exports.proTheme = _antd.theme;
 const resetComponent = token => ({
   boxSizing: 'border-box',
@@ -40,7 +41,10 @@ const resetComponent = token => ({
   color: token.colorText,
   fontSize: token.fontSize,
   lineHeight: token.lineHeight,
-  listStyle: 'none'
+  listStyle: 'none',
+  '*, *::before, *::after': {
+    boxSizing: 'border-box'
+  }
 });
 exports.resetComponent = resetComponent;
 const operationUnit = token => ({
@@ -66,11 +70,9 @@ const operationUnit = token => ({
  */
 exports.operationUnit = operationUnit;
 function useStyle(componentName, styleFn) {
-  // eslint-disable-next-line prefer-const
   let {
     token = {},
-    hashed,
-    prefixCls
+    hashed
   } = (0, _react.useContext)(_index.ProProvider);
   const {
     token: antdToken,
@@ -93,7 +95,7 @@ function useStyle(componentName, styleFn) {
 
   // Register styles (side effect only in v2)
   (0, _cssinjs.useStyleRegister)({
-    theme,
+    theme: theme,
     token,
     path: [componentName],
     nonce: csp?.nonce,

package/lib/skeleton/components/Descriptions/index.js

@@ -246,10 +246,7 @@ const TableSkeleton = ({
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
     header: true,
     active: active
-  }), new Array(size).fill(null).map((_, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  (0, _jsxRuntime.jsx)(TableItemSkeleton, {
+  }), new Array(size).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
     active: active
   }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {

package/lib/skeleton/components/List/index.js

@@ -162,10 +162,7 @@ const ListSkeleton = ({
       padding: 0
     }
   },
-  children: [new Array(size).fill(null).map((_, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  (0, _jsxRuntime.jsx)(ListSkeletonItem, {
+  children: [new Array(size).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSkeletonItem, {
     active: !!active
   }, index)), actionButton !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
     variant: "borderless",

package/lib/table/Store/Provide.js

@@ -109,7 +109,6 @@ function useContainer(props = {}) {
         console.warn(error);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.columnsState?.persistenceKey, props.columnsState?.persistenceType, defaultColumnKeyMap]);
 
   /** 清空一下当前的 key */
@@ -145,7 +144,6 @@ function useContainer(props = {}) {
       console.warn(error);
       clearPersistenceStorage();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.columnsState?.persistenceKey, columnsMap, props.columnsState?.persistenceType]);
   const renderValue = {
     action: actionRef.current,

package/lib/table/Table.js

@@ -310,8 +310,6 @@ const ProTable = props => {
         ...(formSearchRef.current || {}),
         ...params
       };
-
-      // eslint-disable-next-line no-underscore-dangle
       delete actionParams._timestamp;
       const response = await request(actionParams, proSort, proFilter);
       return response;
@@ -355,7 +353,6 @@ const ProTable = props => {
     };
     document.addEventListener('visibilitychange', visibilitychange);
     return () => document.removeEventListener('visibilitychange', visibilitychange);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /** SelectedRowKeys受控处理selectRows */
@@ -403,7 +400,6 @@ const ProTable = props => {
         current: 1
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [params]);
 
   // 设置 name 到 store 中，里面用了 ref ，所以不用担心直接 set
@@ -514,10 +510,7 @@ const ProTable = props => {
       columns: propsColumns,
       context: columnContext
     }).sort((0, _columnSort.columnSort)(counter.columnsMap ?? {}));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propsColumns, counter?.sortKeyColumns, counter?.columnsMap, columnEmptyText, type,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  editableUtils.editableKeys && editableUtils.editableKeys.join(','), proFilter, proSort]);
+  }, [propsColumns, counter?.sortKeyColumns, counter?.columnsMap, columnEmptyText, type, editableUtils.editableKeys && editableUtils.editableKeys.join(','), proFilter, proSort]);
 
   /** Table Column 变化的时候更新一下，这个参数将会用于渲染 */
   (0, _utils.useDeepCompareEffectDebounce)(() => {
@@ -734,11 +727,9 @@ const ProTable = props => {
     styles: {
       body: {
         ...cardBodyStyle,
-        ...(cardProps && typeof cardProps === 'object' ? cardProps.styles?.body || cardProps.bodyStyle : {})
+        ...(cardProps?.styles?.body ?? {})
       },
-      ...(cardProps && typeof cardProps === 'object' && (cardProps.styles?.header || cardProps.headStyle) ? {
-        header: cardProps.styles?.header || cardProps.headStyle
-      } : {})
+      header: cardProps?.styles?.header
     },
     ...cardProps,
     children: tableContentDom
@@ -792,8 +783,8 @@ const ProviderTableContainer = props => {
       columnsState: props.columnsState,
       columns: props.columns,
       onSizeChange: props.onSizeChange,
-      size: props.size,
-      defaultSize: props.defaultSize
+      size: props.size || undefined,
+      defaultSize: props.defaultSize || undefined
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
       valueTypeMap: {

package/lib/table/components/Alert/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genProStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       marginBlockEnd: 16,
       backgroundColor: (0, _provider.setAlpha)(token.colorTextBase, 0.02),
       borderRadius: token.borderRadius,