@synerise/ds-list 1.1.41 → 1.1.43

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.43](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list@1.1.42...@synerise/ds-list@1.1.43) (2026-07-24)
+
+**Note:** Version bump only for package @synerise/ds-list
+
+## [1.1.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list@1.1.41...@synerise/ds-list@1.1.42) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-list
+
 ## [1.1.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list@1.1.40...@synerise/ds-list@1.1.41) (2026-06-27)
 
 **Note:** Version bump only for package @synerise/ds-list

package/CLAUDE.md

@@ -0,0 +1,149 @@
+# List (`@synerise/ds-list`)
+> A generic **DS-native** list component (no antd), supporting nested/sectioned data sources, optional radio group wrapping, and styled sub-components for text items, item wrappers, and dividers. Reproduces antd `List`'s DOM + `.ant-list*` class hooks (`.ant-list`, `.ant-list-items`, `.ant-list-header`, `.ant-list-split`, `.ant-list-bordered`) side-by-side with `.ds-list*` hooks so existing consumer stylesheets keep working.
+
+## Package structure
+```
+src/
+ List.tsx — functional component, renders flat or nested (sectioned) DS-native list
+ List.styles.ts — styled-components for the root/header/items(ul)/loading
+ List.types.ts — ListPropsType<T> type definition (hand-written, no antd)
+ index.ts — public entry point
+ modules.d.ts — CSS/Less module declarations
+ Elements/
+ index.ts — re-exports TextItem, ItemWrapper, ListDivider
+ Text/
+ Text.tsx — List.Item styled <li> with icon, actions, size, disabled, danger support
+ Text.styles.ts — styled-components for Text; defines ListItemType union
+ ItemWrapper/
+ ItemWrapper.tsx — generic padded wrapper div for arbitrary list row content
+ ItemWrapper.styles.ts — styled-components for ItemWrapper
+ Divider/
+ Divider.tsx — thin wrapper around @synerise/ds-divider with horizontal padding
+ Divider.styles.ts — styled-components for Divider
+ __spec__/
+ List.spec.tsx — Vitest tests
+```
+
+## Public exports
+
+```ts
+export { default } from './List'; // List functional component (default)
+export type { ListPropsType } from './List.types';
+export type { TextProps } from './Elements/Text/Text';
+```
+
+### Static sub-components on `List`
+| Name | Component | Description |
+|------|-----------|-------------|
+| `List.Item` | `TextItem` | Styled `<li>` for text-based rows |
+| `List.ItemWrapper` | `ItemWrapper` | Padded `<div>` wrapper for arbitrary row content (e.g. checkboxes, switches) |
+| `List.Divider` | `ListDivider` | Horizontal rule between sections |
+
+---
+
+### `List<T>` (default export)
+
+Hand-written props (`ListPropsType<T>`, no antd). Core props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dataSource` | `T[] \| T[][]` | — | Flat array OR nested array of arrays. A nested array renders multiple DS-native list sections separated by `ListDivider`. Only the first section renders the `header`. |
+| `radio` | `boolean` | `undefined` | Wraps the entire rendered list in `Radio.Group` |
+| `options` | `RadioGroupProps` | `undefined` | Props forwarded to the `Radio.Group` wrapper; only used when `radio` is `true` |
+| `dashed` | `boolean` | `undefined` | Controls the dashed style of the auto-rendered `ListDivider` between sections. Note: `ListDivider` defaults `dashed` to `true` when not supplied |
+
+Supported antd-`List`-parity props: `bordered`, `header`, `renderItem`, `split`, `loading` (DS `Loader`), `loadMore`, `rowKey`, `itemLayout`, `size`, `className`, `style`, `children`. **Dropped in the de-antd migration (0 real consumer usage):** `grid`, `pagination`, and `locale`/`emptyText` (the default "No data" empty state was removed — consumers render their own) — reintroduce natively if a need appears. `List.Item.Meta` is not implemented (unused).
+
+---
+
+### `List.Item` / `TextItem`
+
+Exported type: `TextProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `undefined` | Reduces opacity to 0.4, sets `cursor: not-allowed`, removes tabIndex |
+| `icon` | `JSX.Element` | `undefined` | Rendered in `IconWrapper` before content; adjusts `ContentWrapper` left padding |
+| `danger` | `boolean` | `undefined` | Colors text and icon `red-600`; hover background becomes `red-050` |
+| `actions` | `ReactNode` | `undefined` | Rendered at the end of the row in a flex-1 container |
+| `onSelect` | `(e?: MouseEvent \| KeyboardEvent) => void` | `undefined` | Called on click and on `Space` keyup |
+| `size` | `'small' \| 'medium'` | `'small'` | `small`: padding `5px 12px 4px 7px`; `medium`: padding `12px` (left `12px` with icon, `16px` without) |
+| `..htmlAttributes` | `HTMLLIElement attrs` | — | Spread onto the `<li>` element via `WithHTMLAttributes` |
+
+---
+
+### `List.Divider` / `ListDivider`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dashed` | `boolean` | `true` | Passed to `@synerise/ds-divider`. The divider is always rendered with `marginTop={8}` and `marginBottom={8}`. |
+
+---
+
+### `List.ItemWrapper` / `ItemWrapper`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | `undefined` | Wrapped in a `div` with `padding: 8px 12px` |
+
+---
+
+## Usage patterns
+
+```tsx
+import List from '@synerise/ds-list';
+
+// Flat single-section list
+<List
+ header="Folders"
+ dataSource={[{ text: 'Item 1' }]}
+ renderItem={(item) => (
+ <List.Item size="medium" icon={<Icon component={<FileM />} />} onSelect={() => {}}>
+ {item.text}
+ </List.Item>
+ )}
+/>
+
+// Nested (multi-section) list — sections are separated by a ListDivider
+<List
+ header="Sections"
+ dataSource={[[{ text: 'A' }], [{ text: 'B' }]]}
+ dashed={false}
+ renderItem={(item) => <List.Item>{item.text}</List.Item>}
+/>
+
+// With radio group
+<List
+ dataSource={[[{ value: 'a', label: 'Option A' }]]}
+ radio
+ options={{ defaultValue: 'a' }}
+ renderItem={(item) => (
+ <List.ItemWrapper>
+ <Radio value={item.value}>{item.label}</Radio>
+ </List.ItemWrapper>
+ )}
+/>
+
+// Standalone divider (e.g. between two separate List instances)
+<List.Divider />
+<List.Divider dashed={false} />
+```
+
+## Implementation notes
+
+- `List` is a **functional component** (function declaration with statics attached). Items are keyed by `rowKey` (or the item index) — no `uuid`.
+- **Nested detection:** `isNestedArray` (also a named export from `./List`) checks `Array.isArray(array[0])`. An array of arrays renders as multiple DS-native list sections separated by `ListDivider`; only the first section renders the `header`.
+- **`renderItem` contract preserved:** it receives the flattened per-item value + index and may return any node (typically `List.Item`). When no `renderItem` is given, `children` render instead. There is no built-in empty state — when there are no items and no children, nothing is rendered (consumers supply their own).
+- **`footer` is omitted** from `ListPropsType` — it cannot be passed to `List`.
+- `List.Item` spreads all extra props onto the underlying `<li>` via `WithHTMLAttributes<HTMLLIElement, ..>`. Items sit directly under `<ul class="ant-list-items">`, so `.ant-list-items > li` selectors keep working.
+- The `ListDivider` wrapping `div` has `padding: 0 20px` to inset the rule; the `ItemWrapper` `div` has `padding: 8px 12px`.
+- Tests use **Vitest** (`pnpm --filter @synerise/ds-list test`).
+
+## Key dependencies
+
+| Package | Role |
+|---------|------|
+| `@synerise/ds-radio` | `Radio.Group` wrapping when `radio` is `true`; `RadioGroupProps` type |
+| `@synerise/ds-divider` | Underlying divider in `ListDivider` |
+| `@synerise/ds-loader` | Loading indicator for the `loading` prop |
+| `@synerise/ds-utils` | `WithHTMLAttributes` utility type |

package/README.md

@@ -11,6 +11,11 @@ List UI Component
 
 ## API
 
+> **Note:** As of the antd-removal migration, `@synerise/ds-list` is DS-native. The `grid`,
+> `pagination`, and `locale` props are no longer supported (they had no consumer usage) — the
+> default "No data" empty state was removed, so consumers now render their own empty state.
+> `List.Item.Meta` is not implemented. All other props below are preserved.
+
 ### List
 
 | Property   | Description                                                                                                       | Type                         | Default              |
@@ -18,14 +23,11 @@ List UI Component
 | bordered   | Toggles rendering of the border around the list                                                                   | boolean                      | `false`              |
 | dataSource | DataSource array or array of arrays for list                                                                      | `T[] \| T[][]`               | -                    |
 | dashed     | Define type of divider line                                                                                       | boolean                      | `true`               |
-| grid       | The grid type of list. You can set grid to something like {gutter: 16, column: 4}                                 | object                       | -                    |
 | header     | List header renderer                                                                                              | string                       | -                    |
 | itemLayout | The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical | string                       | -                    |
 | loading    | Shows a loading indicator while the contents of the list are being fetched                                        | boolean / object             | `false`              |
 | loadMore   | Shows a load more content                                                                                         | string / React.ReactNode     | -                    |
-| locale     | i18n text including empty text                                                                                    | object                       | emptyText: 'No Data' |
 | options    | Options for radio group, if radio prop is provided                                                                | RadioGroupProps              | -                    |
-| pagination | Pagination config, hide it by setting it to`false`                                                                | boolean                      | object               |
 | split      | Toggles rendering of the split under the list item                                                                | boolean                      | `true`               |
 | renderItem | Customize list item when using dataSource                                                                         | item => ReactNode            | -                    |
 | rowKey     | Item's unique key, could be a string or function that returns a string                                            | string / (record) = > string | key                  |

package/dist/List.d.ts

@@ -1,13 +1,12 @@
-import { default as React } from 'react';
-import { ItemWrapper, ListDivider, TextItem } from './Elements';
+import { default as React, ReactElement } from 'react';
 import { ListPropsType } from './List.types';
 export declare const isNestedArray: <V>(array: V[] | V[][]) => boolean;
-declare class List<T> extends React.PureComponent<ListPropsType<T>> {
-    static ItemWrapper: typeof ItemWrapper;
-    static Item: typeof TextItem;
-    static Divider: typeof ListDivider;
-    private uuidKey;
-    constructor(props: ListPropsType<T>);
-    render(): React.ReactNode;
+declare function List<T>({ dataSource, radio, options, dashed, ...rest }: ListPropsType<T>): ReactElement;
+declare namespace List {
+    var Item: ({ disabled, icon, onSelect, danger, actions, children, size, ...htmlAttributes }: import(".").TextProps) => React.JSX.Element;
+    var ItemWrapper: ({ children }: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    var Divider: React.FC<import("./Elements/Divider/Divider").DividerProps>;
 }
 export default List;

package/dist/List.js

@@ -1,58 +1,75 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { List as List$1 } from "antd";
 import React from "react";
-import { v4 } from "uuid";
+import Loader from "@synerise/ds-loader";
 import Radio from "@synerise/ds-radio";
 import Text from "./Elements/Text/Text.js";
 import ItemWrapper from "./Elements/ItemWrapper/ItemWrapper.js";
 import ListDivider from "./Elements/Divider/Divider.js";
-import "./style/index.css";
-const RadioGroupWrapper = ({
-  children,
-  options
-}) => /* @__PURE__ */ jsx(Radio.Group, { ...options, children });
+import { ListRoot, ListHeader, ListLoading, ListItems } from "./List.styles.js";
 const isNestedArray = (array) => {
-  return !!array.length && array[0] instanceof Array;
+  return !!array.length && Array.isArray(array[0]);
 };
-const _List = class _List extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.uuidKey = v4();
-  }
-  render() {
-    const {
-      dataSource,
-      radio,
-      options,
-      dashed,
-      ...rest
-    } = this.props;
-    let ReadyList;
-    if (isNestedArray(dataSource)) {
-      ReadyList = !!dataSource && // @ts-expect-error type mismatch
-      dataSource.map((singleDataSource, index) => {
-        const isLastItem = dataSource.length === index + 1;
-        if (index === 0) {
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(List$1, { ...rest, dataSource: singleDataSource }),
-            !isLastItem && /* @__PURE__ */ jsx(ListDivider, { dashed: !!dashed, "data-testid": "divider" })
-          ] }, v4());
-        }
-        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsx(List$1, { ...rest, header: null, dataSource: singleDataSource }),
-          !isLastItem && /* @__PURE__ */ jsx(ListDivider, { dashed: !!dashed, "data-testid": "divider" })
-        ] }, v4());
-      });
-    } else {
-      ReadyList = /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(List$1, { ...rest, dataSource }) }, this.uuidKey || v4());
+const buildRootClassName = (props) => ["ant-list", "ds-list", props.size === "small" && "ant-list-sm", props.size === "large" && "ant-list-lg", props.split !== false && "ant-list-split", props.bordered && "ant-list-bordered", props.loading && "ant-list-loading", props.itemLayout && `ant-list-${props.itemLayout}`, props.className].filter(Boolean).join(" ");
+const SingleList = ({
+  items,
+  renderItem,
+  header,
+  bordered,
+  split,
+  loading,
+  size,
+  itemLayout,
+  loadMore,
+  rowKey,
+  className,
+  style,
+  children,
+  ...htmlAttributes
+}) => {
+  const resolveKey = (item, index) => {
+    if (typeof rowKey === "function") {
+      return rowKey(item);
+    }
+    if (rowKey && item && typeof item === "object") {
+      const value = item[rowKey];
+      if (typeof value === "string" || typeof value === "number") {
+        return value;
+      }
     }
-    return /* @__PURE__ */ jsx(Fragment, { children: radio ? /* @__PURE__ */ jsx(RadioGroupWrapper, { options, children: ReadyList }) : ReadyList });
-  }
+    return index;
+  };
+  const hasItems = Boolean(renderItem) && items.length > 0;
+  return /* @__PURE__ */ jsxs(ListRoot, { ...htmlAttributes, className: buildRootClassName({
+    bordered,
+    split,
+    loading,
+    size,
+    itemLayout,
+    className
+  }), style, $bordered: bordered, children: [
+    header !== void 0 && header !== null && /* @__PURE__ */ jsx(ListHeader, { className: "ant-list-header ds-list-header", children: header }),
+    loading && /* @__PURE__ */ jsx(ListLoading, { className: "ant-list-loading ds-list-loading", children: /* @__PURE__ */ jsx(Loader, { size: "M" }) }),
+    !loading && hasItems && /* @__PURE__ */ jsx(ListItems, { className: "ant-list-items ds-list-items", children: items.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem?.(item, index) }, resolveKey(item, index))) }),
+    !loading && !hasItems && children,
+    loadMore
+  ] });
 };
-_List.ItemWrapper = ItemWrapper;
-_List.Item = Text;
-_List.Divider = ListDivider;
-let List = _List;
+function List({
+  dataSource,
+  radio,
+  options,
+  dashed,
+  ...rest
+}) {
+  const content = isNestedArray(dataSource) ? dataSource.map((group, index, groups) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(SingleList, { ...rest, items: group, header: index === 0 ? rest.header : void 0 }),
+    index !== groups.length - 1 && /* @__PURE__ */ jsx(ListDivider, { dashed: Boolean(dashed) })
+  ] }, index)) : /* @__PURE__ */ jsx(SingleList, { ...rest, items: dataSource });
+  return radio ? /* @__PURE__ */ jsx(Radio.Group, { ...options, children: content }) : /* @__PURE__ */ jsx(Fragment, { children: content });
+}
+List.Item = Text;
+List.ItemWrapper = ItemWrapper;
+List.Divider = ListDivider;
 export {
   List as default,
   isNestedArray

package/dist/List.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const ListRoot: import('styled-components').StyledComponent<"div", any, {
+    $bordered?: boolean;
+}, never>;
+/** Reproduces the `.ant-list-header` styling the migration kept in `list.mixin.less`. */
+export declare const ListHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** The `<ul class="ant-list-items">` — reset so items sit flush (antd parity). */
+export declare const ListItems: import('styled-components').StyledComponent<"ul", any, {}, never>;
+export declare const ListLoading: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/List.styles.js

@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+const ListRoot = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Liststyles__ListRoot",
+  componentId: "sc-jdmigs-0"
+})(["position:relative;", ""], (props) => props.$bordered && css(["border:1px solid ", ";border-radius:3px;"], props.theme.palette["grey-300"]));
+const ListHeader = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Liststyles__ListHeader",
+  componentId: "sc-jdmigs-1"
+})(["text-transform:uppercase;font-size:13px;color:", ";padding:8px 12px;border:0;"], ({
+  theme
+}) => theme.palette["grey-700"]);
+const ListItems = /* @__PURE__ */ styled.ul.withConfig({
+  displayName: "Liststyles__ListItems",
+  componentId: "sc-jdmigs-2"
+})(["margin:0;padding:0;list-style:none;"]);
+const ListLoading = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Liststyles__ListLoading",
+  componentId: "sc-jdmigs-3"
+})(["display:flex;align-items:center;justify-content:center;padding:16px;"]);
+export {
+  ListHeader,
+  ListItems,
+  ListLoading,
+  ListRoot
+};

package/dist/List.types.d.ts

@@ -1,8 +1,35 @@
-import { ListProps } from 'antd';
+import { CSSProperties, Key, ReactNode } from 'react';
 import { RadioGroupProps } from '@synerise/ds-radio';
-export type ListPropsType<T> = Omit<ListProps<T>, 'dataSource' | 'footer'> & {
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type ListSize = 'small' | 'default' | 'large';
+export type ListItemLayout = 'horizontal' | 'vertical';
+export type ListPropsType<T> = WithHTMLAttributes<HTMLDivElement, {
+    /** Flat list, or an array of groups rendered as separate lists split by a divider. */
     dataSource: T[] | T[][];
+    /** Render a single item. Receives the flattened per-item value and its index. */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** Rendered once, above the (first) list. */
+    header?: ReactNode;
+    /** Wrap the list in a border. */
+    bordered?: boolean;
+    /** Keep the `ant-list-split` hook (borders between items). Defaults to `true`. */
+    split?: boolean;
+    /** Show a centered loading indicator instead of the items. */
+    loading?: boolean;
+    itemLayout?: ListItemLayout;
+    size?: ListSize;
+    /** Node rendered after the items (e.g. a "load more" button). */
+    loadMore?: ReactNode;
+    /** Key extractor for items. Defaults to the item index. */
+    rowKey?: keyof T | ((item: T) => Key);
+    className?: string;
+    style?: CSSProperties;
+    /** Rendered in place of `dataSource`/`renderItem` when no `renderItem` is given. */
+    children?: ReactNode;
+    /** Wrap the list in a `Radio.Group` (single-select list). */
     radio?: boolean;
+    /** Props forwarded to the wrapping `Radio.Group` when `radio` is set. */
     options?: RadioGroupProps;
+    /** Dashed divider between groups (nested `dataSource`). */
     dashed?: boolean;
-};
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "List UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -35,23 +36,19 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "sideEffects": [
-    "dist/style/*",
-    "*.less"
-  ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^1.3.15",
-    "@synerise/ds-radio": "^1.1.17",
-    "@synerise/ds-utils": "^1.10.1",
-    "uuid": "^8.3.2"
+    "@synerise/ds-divider": "^1.3.16",
+    "@synerise/ds-loader": "^1.0.18",
+    "@synerise/ds-radio": "^1.1.18",
+    "@synerise/ds-utils": "^1.10.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "dfd892acc1d02abebcf661db3fb32f0fc4b6c354"
+  "gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-list{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative}.ant-list *{outline:0}.ant-list-pagination{margin-top:24px;text-align:right}.ant-list-pagination .ant-pagination-options{text-align:left}.ant-list-more{margin-top:12px;text-align:center}.ant-list-more button{padding-right:32px;padding-left:32px}.ant-list-spin{min-height:40px;text-align:center}.ant-list-empty-text{padding:16px;color:#b5bdc3;font-size:13px;text-align:center}.ant-list-items{margin:0;padding:0;list-style:none}.ant-list-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;color:#6a7580}.ant-list-item-meta{display:flex;flex:1;align-items:flex-start;max-width:100%}.ant-list-item-meta-avatar{margin-right:16px}.ant-list-item-meta-content{flex:1 0;width:0;color:#6a7580}.ant-list-item-meta-title{margin-bottom:4px;color:#6a7580;font-size:13px;line-height:1.38}.ant-list-item-meta-title>a{color:#6a7580;transition:all .3s}.ant-list-item-meta-title>a:hover{color:#0b68ff}.ant-list-item-meta-description{color:#232936;font-size:13px;line-height:1.38}.ant-list-item-action{flex:0 0 auto;margin-left:48px;padding:0;font-size:0;list-style:none}.ant-list-item-action>li{position:relative;display:inline-block;padding:0 8px;color:#232936;font-size:13px;line-height:1.38;text-align:center}.ant-list-item-action>li:first-child{padding-left:0}.ant-list-item-action-split{position:absolute;top:50%;right:0;width:1px;height:14px;margin-top:-7px;background-color:#e9edee}.ant-list-header{background:0 0}.ant-list-footer{background:0 0}.ant-list-footer,.ant-list-header{padding-top:12px;padding-bottom:12px}.ant-list-empty{padding:16px 0;color:#232936;font-size:12px;text-align:center}.ant-list-split .ant-list-item{border-bottom:1px solid #e9edee}.ant-list-split .ant-list-item:last-child{border-bottom:none}.ant-list-split .ant-list-header{border-bottom:1px solid #e9edee}.ant-list-split.ant-list-empty .ant-list-footer{border-top:1px solid #e9edee}.ant-list-loading .ant-list-spin-nested-loading{min-height:32px}.ant-list-split.ant-list-something-after-last-item .ant-spin-container>.ant-list-items>.ant-list-item:last-child{border-bottom:1px solid #e9edee}.ant-list-lg .ant-list-item{padding:16px 24px}.ant-list-sm .ant-list-item{padding:8px 16px}.ant-list-vertical .ant-list-item{align-items:initial}.ant-list-vertical .ant-list-item-main{display:block;flex:1}.ant-list-vertical .ant-list-item-extra{margin-left:40px}.ant-list-vertical .ant-list-item-meta{margin-bottom:16px}.ant-list-vertical .ant-list-item-meta-title{margin-bottom:12px;color:#384350;font-size:13px;line-height:24px}.ant-list-vertical .ant-list-item-action{margin-top:16px;margin-left:auto}.ant-list-vertical .ant-list-item-action>li{padding:0 16px}.ant-list-vertical .ant-list-item-action>li:first-child{padding-left:0}.ant-list-grid .ant-col>.ant-list-item{display:block;max-width:100%;margin-bottom:16px;padding-top:0;padding-bottom:0;border-bottom:none}.ant-list-item-no-flex{display:block}.ant-list:not(.ant-list-vertical) .ant-list-item-no-flex .ant-list-item-action{float:right}.ant-list-bordered{border:1px solid #dbe0e3;border-radius:3px}.ant-list-bordered .ant-list-header{padding-right:32px;padding-left:32px}.ant-list-bordered .ant-list-footer{padding-right:32px;padding-left:32px}.ant-list-bordered .ant-list-item{padding-right:32px;padding-left:32px}.ant-list-bordered .ant-list-pagination{margin:16px 24px}.ant-list-bordered.ant-list-sm .ant-list-item{padding:8px 16px}.ant-list-bordered.ant-list-sm .ant-list-footer,.ant-list-bordered.ant-list-sm .ant-list-header{padding:8px 16px}.ant-list-bordered.ant-list-lg .ant-list-item{padding:16px 24px}.ant-list-bordered.ant-list-lg .ant-list-footer,.ant-list-bordered.ant-list-lg .ant-list-header{padding:16px 24px}@media screen and (max-width:768px){.ant-list-item-action{margin-left:24px}.ant-list-vertical .ant-list-item-extra{margin-left:24px}}@media screen and (max-width:576px){.ant-list-item{flex-wrap:wrap}.ant-list-item-action{margin-left:12px}.ant-list-vertical .ant-list-item{flex-wrap:wrap-reverse}.ant-list-vertical .ant-list-item-main{min-width:220px}.ant-list-vertical .ant-list-item-extra{margin:auto auto 16px}}.ant-list-rtl{direction:rtl;text-align:right}.ant-list-rtl .ReactVirtualized__List .ant-list-item{direction:rtl}.ant-list-rtl .ant-list-pagination{text-align:left}.ant-list-rtl .ant-list-item-meta-avatar{margin-right:0;margin-left:16px}.ant-list-rtl .ant-list-item-action{margin-right:48px;margin-left:0}.ant-list.ant-list-rtl .ant-list-item-action>li:first-child{padding-right:0;padding-left:16px}.ant-list-rtl .ant-list-item-action-split{right:auto;left:0}.ant-list-rtl.ant-list-vertical .ant-list-item-extra{margin-right:40px;margin-left:0}.ant-list-rtl.ant-list-vertical .ant-list-item-action{margin-right:auto}.ant-list-rtl .ant-list-vertical .ant-list-item-action>li:first-child{padding-right:0;padding-left:16px}.ant-list-rtl .ant-list:not(.ant-list-vertical) .ant-list-item-no-flex .ant-list-item-action{float:left}@media screen and (max-width:768px){.ant-list-rtl .ant-list-item-action{margin-right:24px;margin-left:0}.ant-list-rtl .ant-list-vertical .ant-list-item-extra{margin-right:24px;margin-left:0}}@media screen and (max-width:576px){.ant-list-rtl .ant-list-item-action{margin-right:22px;margin-left:0}.ant-list-rtl.ant-list-vertical .ant-list-item-extra{margin:auto auto 16px}}.ant-dropdown-menu-items{padding:8px;margin:0}.ant-list-header{text-transform:uppercase;font-size:13px;color:#57616d;padding:8px 12px}.ant-list-header.ant-list-header{border:0}