@transferwise/components 46.108.1 → 46.109.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/build/list/List.js +1 -1
  2. package/build/list/List.js.map +1 -1
  3. package/build/list/List.mjs +1 -1
  4. package/build/list/List.mjs.map +1 -1
  5. package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +1 -1
  6. package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +1 -1
  7. package/build/listItem/AvatarView/ListItemAvatarView.js.map +1 -1
  8. package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -1
  9. package/build/listItem/Image/ListItemImage.js.map +1 -1
  10. package/build/listItem/Image/ListItemImage.mjs.map +1 -1
  11. package/build/listItem/ListItemContext.js.map +1 -1
  12. package/build/listItem/ListItemContext.mjs.map +1 -1
  13. package/build/main.css +6 -4
  14. package/build/styles/listItem/ListItem.css +6 -4
  15. package/build/styles/listItem/ListItem.grid.css +4 -4
  16. package/build/styles/main.css +6 -4
  17. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +3 -4
  18. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +1 -1
  19. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +2 -1
  20. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -1
  21. package/build/types/listItem/Image/ListItemImage.d.ts +2 -1
  22. package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -1
  23. package/build/types/listItem/ListItemContext.d.ts +1 -1
  24. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  25. package/package.json +3 -3
  26. package/src/list/List.tsx +1 -1
  27. package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +2 -2
  28. package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +4 -3
  29. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +2 -2
  30. package/src/listItem/AvatarView/ListItemAvatarView.tsx +2 -1
  31. package/src/listItem/Image/ListItemImage.tsx +2 -1
  32. package/src/listItem/ListItem.css +6 -4
  33. package/src/listItem/ListItem.grid.css +4 -4
  34. package/src/listItem/ListItem.grid.less +1 -1
  35. package/src/listItem/ListItem.less +1 -0
  36. package/src/listItem/ListItemContext.tsx +1 -1
  37. package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
  38. package/src/main.css +6 -4
package/build/list/List.js CHANGED
@@ -12,7 +12,7 @@ function List({
12
12
  ...props
13
13
  }) {
14
14
  return /*#__PURE__*/jsxRuntime.jsx(Element, {
15
- className: clsx.clsx('wds-list', 'list-unstyled', className),
15
+ className: clsx.clsx('wds-list', 'list-unstyled', 'm-y-0', className),
16
16
  ...props
17
17
  });
18
18
  }
package/build/list/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}
1
+ {"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
package/build/list/List.mjs CHANGED
@@ -8,7 +8,7 @@ function List({
8
8
  ...props
9
9
  }) {
10
10
  return /*#__PURE__*/jsx(Element, {
11
- className: clsx('wds-list', 'list-unstyled', className),
11
+ className: clsx('wds-list', 'list-unstyled', 'm-y-0', className),
12
12
  ...props
13
13
  });
14
14
  }
package/build/list/List.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}
1
+ {"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n as?: 'ul' | 'ol' | 'div';\n className?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n id?: string;\n [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
1
+ {"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
1
+ {"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
package/build/listItem/AvatarView/ListItemAvatarView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
1
+ {"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAgBO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
package/build/listItem/AvatarView/ListItemAvatarView.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
1
+ {"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAgBO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
package/build/listItem/Image/ListItemImage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: 32 | 40 | 48 | 56 | 72;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
1
+ {"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: ListItemMediaSize;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
package/build/listItem/Image/ListItemImage.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: 32 | 40 | 48 | 56 | 72;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
1
+ {"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: ListItemMediaSize;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
package/build/listItem/ListItemContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}
1
+ {"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}
package/build/listItem/ListItemContext.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}
1
+ {"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}
package/build/main.css CHANGED
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  }
2645
2645
  .wds-list-item-gridWrapper {
2646
2646
  display: grid;
2647
- grid-gap: 4px 16px;
2648
- grid-gap: var(--size-4) var(--size-16);
2649
- gap: 4px 16px;
2650
- gap: var(--size-4) var(--size-16);
2647
+ grid-gap: 4px 12px;
2648
+ grid-gap: var(--size-4) var(--size-12);
2649
+ gap: 4px 12px;
2650
+ gap: var(--size-4) var(--size-12);
2651
2651
  }
2652
2652
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3371
3371
  .wds-list-item.disabled label {
3372
3372
  cursor: not-allowed;
3373
3373
  }
3374
+ .wds-list-item.disabled .wds-list-item-media,
3375
+ .wds-list-item.disabled .np-avatar-view-content,
3374
3376
  .wds-list-item.disabled .wds-list-item-title,
3375
3377
  .wds-list-item.disabled .wds-list-item-title-value,
3376
3378
  .wds-list-item.disabled .wds-list-item-subtitle,
package/build/styles/listItem/ListItem.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .wds-list-item-gridWrapper {
2
2
  display: grid;
3
- grid-gap: 4px 16px;
4
- grid-gap: var(--size-4) var(--size-16);
5
- gap: 4px 16px;
6
- gap: var(--size-4) var(--size-16);
3
+ grid-gap: 4px 12px;
4
+ grid-gap: var(--size-4) var(--size-12);
5
+ gap: 4px 12px;
6
+ gap: var(--size-4) var(--size-12);
7
7
  }
8
8
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
@@ -727,6 +727,8 @@
727
727
  .wds-list-item.disabled label {
728
728
  cursor: not-allowed;
729
729
  }
730
+ .wds-list-item.disabled .wds-list-item-media,
731
+ .wds-list-item.disabled .np-avatar-view-content,
730
732
  .wds-list-item.disabled .wds-list-item-title,
731
733
  .wds-list-item.disabled .wds-list-item-title-value,
732
734
  .wds-list-item.disabled .wds-list-item-subtitle,
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .wds-list-item-gridWrapper {
2
2
  display: grid;
3
- grid-gap: 4px 16px;
4
- grid-gap: var(--size-4) var(--size-16);
5
- gap: 4px 16px;
6
- gap: var(--size-4) var(--size-16);
3
+ grid-gap: 4px 12px;
4
+ grid-gap: var(--size-4) var(--size-12);
5
+ gap: 4px 12px;
6
+ gap: var(--size-4) var(--size-12);
7
7
  }
8
8
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
package/build/styles/main.css CHANGED
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  }
2645
2645
  .wds-list-item-gridWrapper {
2646
2646
  display: grid;
2647
- grid-gap: 4px 16px;
2648
- grid-gap: var(--size-4) var(--size-16);
2649
- gap: 4px 16px;
2650
- gap: var(--size-4) var(--size-16);
2647
+ grid-gap: 4px 12px;
2648
+ grid-gap: var(--size-4) var(--size-12);
2649
+ gap: 4px 12px;
2650
+ gap: var(--size-4) var(--size-12);
2651
2651
  }
2652
2652
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3371
3371
  .wds-list-item.disabled label {
3372
3372
  cursor: not-allowed;
3373
3373
  }
3374
+ .wds-list-item.disabled .wds-list-item-media,
3375
+ .wds-list-item.disabled .np-avatar-view-content,
3374
3376
  .wds-list-item.disabled .wds-list-item-title,
3375
3377
  .wds-list-item.disabled .wds-list-item-title-value,
3376
3378
  .wds-list-item.disabled .wds-list-item-subtitle,
package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { type AvatarLayoutProps } from '../../avatarLayout';
2
- type SizeProp = {
3
- size?: 32 | 40 | 48 | 56 | 72;
2
+ import { ListItemMediaSize } from '../ListItemContext';
3
+ export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
4
+ size?: ListItemMediaSize;
4
5
  };
5
- export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
6
6
  /**
7
7
  * This component allows for rendering 2 avatars. It's a thin wrapper around the
8
8
  * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
@@ -14,5 +14,4 @@ export declare const AvatarLayout: {
14
14
  ({ className, size, ...props }: ListItemAvatarLayoutProps): import("react").JSX.Element;
15
15
  displayName: string;
16
16
  };
17
- export {};
18
17
  //# sourceMappingURL=ListItemAvatarLayout.d.ts.map
package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAI9E,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAEnG;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAUzF,CAAC"}
1
+ {"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACxF,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAUzF,CAAC"}
package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { type AvatarViewProps } from '../../avatarView';
2
+ import { ListItemMediaSize } from '../ListItemContext';
2
3
  export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
3
- size?: 32 | 40 | 48 | 56 | 72;
4
+ size?: ListItemMediaSize;
4
5
  };
5
6
  /**
6
7
  * This component renders a single avatar. It's a thin wrapper around the
package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}
1
+ {"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}
package/build/types/listItem/Image/ListItemImage.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { type ImageProps } from '../../image';
2
+ import { ListItemMediaSize } from '../ListItemContext';
2
3
  export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
3
4
  /**
4
5
  * The size of square container for the image, matching available avatar sizes.
5
6
  */
6
- size?: 32 | 40 | 48 | 56 | 72;
7
+ size?: ListItemMediaSize;
7
8
  /**
8
9
  * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
9
10
  */
package/build/types/listItem/Image/ListItemImage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;yCAAkD,kBAAkB;;CAoBrF,CAAC"}
1
+ {"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;yCAAkD,kBAAkB;;CAoBrF,CAAC"}
package/build/types/listItem/ListItemContext.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
2
- export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
2
+ export type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;
3
3
  export type ListItemContextData = {
4
4
  setControlType: (type: ListItemTypes) => void;
5
5
  setControlProps: (props: ListItemControlProps) => void;
package/build/types/listItem/ListItemContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,GAAG,uBAAuB,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
1
+ {"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,GAAG,uBAAuB,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.108.1",
3
+ "version": "46.109.1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -84,9 +84,9 @@
84
84
  "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "@transferwise/less-config": "3.1.2",
87
- "@wise/wds-configs": "0.0.0",
88
87
  "@transferwise/neptune-css": "14.24.6",
89
- "@wise/components-theming": "1.6.4"
88
+ "@wise/components-theming": "1.6.4",
89
+ "@wise/wds-configs": "0.0.0"
90
90
  },
91
91
  "peerDependencies": {
92
92
  "@transferwise/icons": "^3.22.4",
package/src/list/List.tsx CHANGED
@@ -11,5 +11,5 @@ export interface ListProps {
11
11
  }
12
12
 
13
13
  export default function List({ as: Element = 'ul', className, ...props }: ListProps) {
14
- return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;
14
+ return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;
15
15
  }
package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx CHANGED
@@ -37,7 +37,7 @@ export default {
37
37
  },
38
38
  size: {
39
39
  control: 'select',
40
- options: [32, 40, 48, 56, 72],
40
+ options: [24, 32, 40, 48, 56, 72],
41
41
  description: 'Size of the avatar layout',
42
42
  },
43
43
  },
@@ -102,7 +102,7 @@ export const Sizes: Story = {
102
102
  },
103
103
  argTypes: disableControls()(['size', 'orientation']),
104
104
  render: (args) => {
105
- const sizes = [32, 40, 48, 56, 72] as const;
105
+ const sizes = [24, 32, 40, 48, 56, 72] as const;
106
106
  const orientations = ['horizontal', 'diagonal'] as const;
107
107
 
108
108
  return (
package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx CHANGED
@@ -1,10 +1,11 @@
1
1
  import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
2
2
  import { clsx } from 'clsx';
3
3
  import { useListItemMedia } from '../useListItemMedia';
4
+ import { ListItemMediaSize } from '../ListItemContext';
4
5
 
5
- type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
6
-
7
- export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
6
+ export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
7
+ size?: ListItemMediaSize;
8
+ };
8
9
 
9
10
  /**
10
11
  * This component allows for rendering 2 avatars. It's a thin wrapper around the
package/src/listItem/AvatarView/ListItemAvatarView.story.tsx CHANGED
@@ -13,7 +13,7 @@ import type { ListItemAvatarViewProps } from './ListItemAvatarView';
13
13
 
14
14
  const hideControls = disableControls(['badge', 'children']);
15
15
 
16
- const SIZES = [32, 40, 48, 56, 72] as const;
16
+ const SIZES = [24, 32, 40, 48, 56, 72] as const;
17
17
  const BADGES = {
18
18
  'Country flag badge': { flagCode: 'GBP' },
19
19
  'StatusIcon badge': { status: 'warning' },
@@ -209,7 +209,7 @@ export const ContentTypes: Story = {
209
209
  };
210
210
 
211
211
  /**
212
- * AvatarView supports 5 sizes to fit different list item contexts: `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
212
+ * AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
213
213
  * Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
214
214
  */
215
215
  export const Sizes: Story = {
package/src/listItem/AvatarView/ListItemAvatarView.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  import { clsx } from 'clsx';
2
2
  import AvatarViewComp, { type AvatarViewProps } from '../../avatarView';
3
3
  import { useListItemMedia } from '../useListItemMedia';
4
+ import { ListItemMediaSize } from '../ListItemContext';
4
5
 
5
6
  export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
6
- size?: 32 | 40 | 48 | 56 | 72;
7
+ size?: ListItemMediaSize;
7
8
  };
8
9
 
9
10
  /**
package/src/listItem/Image/ListItemImage.tsx CHANGED
@@ -1,12 +1,13 @@
1
1
  import ImageComp, { type ImageProps } from '../../image';
2
2
  import { clsx } from 'clsx';
3
3
  import { useListItemMedia } from '../useListItemMedia';
4
+ import { ListItemMediaSize } from '../ListItemContext';
4
5
 
5
6
  export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
6
7
  /**
7
8
  * The size of square container for the image, matching available avatar sizes.
8
9
  */
9
- size?: 32 | 40 | 48 | 56 | 72;
10
+ size?: ListItemMediaSize;
10
11
  /**
11
12
  * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
12
13
  */
package/src/listItem/ListItem.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .wds-list-item-gridWrapper {
2
2
  display: grid;
3
- grid-gap: 4px 16px;
4
- grid-gap: var(--size-4) var(--size-16);
5
- gap: 4px 16px;
6
- gap: var(--size-4) var(--size-16);
3
+ grid-gap: 4px 12px;
4
+ grid-gap: var(--size-4) var(--size-12);
5
+ gap: 4px 12px;
6
+ gap: var(--size-4) var(--size-12);
7
7
  }
8
8
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
@@ -727,6 +727,8 @@
727
727
  .wds-list-item.disabled label {
728
728
  cursor: not-allowed;
729
729
  }
730
+ .wds-list-item.disabled .wds-list-item-media,
731
+ .wds-list-item.disabled .np-avatar-view-content,
730
732
  .wds-list-item.disabled .wds-list-item-title,
731
733
  .wds-list-item.disabled .wds-list-item-title-value,
732
734
  .wds-list-item.disabled .wds-list-item-subtitle,
package/src/listItem/ListItem.grid.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .wds-list-item-gridWrapper {
2
2
  display: grid;
3
- grid-gap: 4px 16px;
4
- grid-gap: var(--size-4) var(--size-16);
5
- gap: 4px 16px;
6
- gap: var(--size-4) var(--size-16);
3
+ grid-gap: 4px 12px;
4
+ grid-gap: var(--size-4) var(--size-12);
5
+ gap: 4px 12px;
6
+ gap: var(--size-4) var(--size-12);
7
7
  }
8
8
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
package/src/listItem/ListItem.grid.less CHANGED
@@ -3,7 +3,7 @@
3
3
  .wds-list-item {
4
4
  &-gridWrapper {
5
5
  display: grid;
6
- gap: var(--size-4) var(--size-16);
6
+ gap: var(--size-4) var(--size-12);
7
7
 
8
8
  &.wds-list-item-hasMedia-hasControl,
9
9
  &.wds-list-item-hasMedia-noControl {
package/src/listItem/ListItem.less CHANGED
@@ -229,6 +229,7 @@
229
229
  cursor: not-allowed;
230
230
  }
231
231
 
232
+ .wds-list-item-media, .np-avatar-view-content,
232
233
  .wds-list-item-title,
233
234
  .wds-list-item-title-value,
234
235
  .wds-list-item-subtitle,
package/src/listItem/ListItemContext.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createContext } from 'react';
2
2
  import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
3
3
 
4
- export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
4
+ export type ListItemMediaSize = 24 | 32 | 40 | 48 | 56 | 72;
5
5
 
6
6
  export type ListItemContextData = {
7
7
  setControlType: (type: ListItemTypes) => void;
package/src/listItem/_stories/ListItem.layout.test.story.tsx CHANGED
@@ -76,7 +76,7 @@ const previewArgGroup = {
76
76
 
77
77
  const previewArgTypes = {
78
78
  previewImageSize: {
79
- options: [32, 40, 48, 56, 72],
79
+ options: [24, 32, 40, 48, 56, 72],
80
80
  control: {
81
81
  type: 'inline-radio',
82
82
  },
package/src/main.css CHANGED
@@ -2644,10 +2644,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  }
2645
2645
  .wds-list-item-gridWrapper {
2646
2646
  display: grid;
2647
- grid-gap: 4px 16px;
2648
- grid-gap: var(--size-4) var(--size-16);
2649
- gap: 4px 16px;
2650
- gap: var(--size-4) var(--size-16);
2647
+ grid-gap: 4px 12px;
2648
+ grid-gap: var(--size-4) var(--size-12);
2649
+ gap: 4px 12px;
2650
+ gap: var(--size-4) var(--size-12);
2651
2651
  }
2652
2652
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3371
3371
  .wds-list-item.disabled label {
3372
3372
  cursor: not-allowed;
3373
3373
  }
3374
+ .wds-list-item.disabled .wds-list-item-media,
3375
+ .wds-list-item.disabled .np-avatar-view-content,
3374
3376
  .wds-list-item.disabled .wds-list-item-title,
3375
3377
  .wds-list-item.disabled .wds-list-item-title-value,
3376
3378
  .wds-list-item.disabled .wds-list-item-subtitle,