@synerise/ds-list 1.1.42 → 1.1.43

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

package/CLAUDE.md

@@ -1,11 +1,12 @@
 # List (`@synerise/ds-list`)
-> A generic list component built on Ant Design's List, supporting nested/sectioned data sources, optional radio group wrapping, and styled sub-components for text items, item wrappers, and dividers.
+> 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 — class component (PureComponent), renders flat or nested (sectioned) AntdList
- List.types.ts — ListPropsType<T> type definition
+ 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/
@@ -19,9 +20,6 @@ src/
  Divider/
  Divider.tsx — thin wrapper around @synerise/ds-divider with horizontal padding
  Divider.styles.ts — styled-components for Divider
- style/
- index.less — Less entry point (imported via side-effect in List.tsx)
- list.mixin.less — Less mixins for list styles
  __spec__/
  List.spec.tsx — Vitest tests
 ```
@@ -29,7 +27,7 @@ src/
 ## Public exports
 
 ```ts
-export { default } from './List'; // List class component (default)
+export { default } from './List'; // List functional component (default)
 export type { ListPropsType } from './List.types';
 export type { TextProps } from './Elements/Text/Text';
 ```
@@ -45,16 +43,16 @@ export type { TextProps } from './Elements/Text/Text';
 
 ### `List<T>` (default export)
 
-Extends Ant Design `ListProps<T>` — omits `dataSource` and `footer`, adds:
+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 `AntdList` sections separated by `ListDivider`. Only the first section renders the `header`. |
+| `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 |
 
-All other `ListProps<T>` from antd (e.g. `bordered`, `header`, `renderItem`, `split`, `grid`, `pagination`, `loading`, `loadMore`, `locale`, `rowKey`, `itemLayout`) are forwarded directly to `AntdList`.
+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).
 
 ---
 
@@ -133,19 +131,19 @@ import List from '@synerise/ds-list';
 
 ## Implementation notes
 
-- `List` is a **class component** (`React.PureComponent`) — not a functional component. A stable `uuid` key is generated in the constructor for the single-section render path.
-- **Nested detection:** `isNestedArray` (also a named export from `./List`) checks `array[0] instanceof Array`. An array of arrays is rendered as multiple `AntdList` instances; subsequent sections have `header` forced to `null`.
+- `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, ..>`.
+- `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 **Jest** (not Vitest) — see `jest.config.js`.
+- Tests use **Vitest** (`pnpm --filter @synerise/ds-list test`).
 
 ## Key dependencies
 
 | Package | Role |
 |---------|------|
-| `antd` (peer) | `AntdList`, `RadioGroupProps` base types |
-| `@synerise/ds-radio` | `Radio.Group` wrapping when `radio` is `true` |
+| `@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 |
-| `uuid` | Stable + per-render keys for `React.Fragment` nodes |

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.42",
+  "version": "1.1.43",
   "description": "List UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,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.16",
+    "@synerise/ds-loader": "^1.0.18",
     "@synerise/ds-radio": "^1.1.18",
-    "@synerise/ds-utils": "^1.10.2",
-    "uuid": "^8.3.2"
+    "@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": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
+  "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}