npm - @transferwise/components - Versions diffs - 0.0.0-experimental-d7fd1c8 → 0.0.0-experimental-55ad5c7 - Mend

@transferwise/components 0.0.0-experimental-d7fd1c8 → 0.0.0-experimental-55ad5c7

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 (63) hide show

package/build/listItem/AvatarLayout/ListItemAvatarLayout.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var AvatarLayout$1 = require('../../avatarLayout/AvatarLayout.js');
 var clsx = require('clsx');
+var useListItemMedia = require('../useListItemMedia.js');
 var jsxRuntime = require('react/jsx-runtime');
 const AvatarLayout = ({
@@ -9,6 +10,7 @@ const AvatarLayout = ({
   size = 48,
   ...props
 }) => {
+  useListItemMedia.useListItemMedia(size);
   return /*#__PURE__*/jsxRuntime.jsx(AvatarLayout$1.default, {
     ...props,
     size: size,

package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map CHANGED Viewed

	@@ -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';\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 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","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":"~~;;;;;;AAcO~~,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;~~EAC5F~~,~~oBACEC~~,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,~~GACXF~~,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,~~EAAEK~~,SAAI,CAAC,mCAAmC,~~EAAEL~~,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,~~CAACO~~,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';\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;;;;"}

package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import AvatarLayout$1 from '../../avatarLayout/AvatarLayout.mjs';
 import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
 const AvatarLayout = ({
@@ -7,6 +8,7 @@ const AvatarLayout = ({
   size = 48,
   ...props
 }) => {
+  useListItemMedia(size);
   return /*#__PURE__*/jsx(AvatarLayout$1, {
     ...props,
     size: size,

package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map CHANGED Viewed

	@@ -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';\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 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","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":"~~;;;;AAcO~~,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;~~EAC5F~~,~~oBACEC~~,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,~~GACXF~~,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,~~EAAEK~~,IAAI,CAAC,mCAAmC,~~EAAEL~~,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,~~CAACO~~,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';\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;;;;"}

package/build/listItem/AvatarView/ListItemAvatarView.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var clsx = require('clsx');
 var AvatarView$1 = require('../../avatarView/AvatarView.js');
+var useListItemMedia = require('../useListItemMedia.js');
 var jsxRuntime = require('react/jsx-runtime');
 const AvatarView = ({
@@ -9,6 +10,7 @@ const AvatarView = ({
   size = 48,
   ...props
 }) => {
+  useListItemMedia.useListItemMedia(size);
   return /*#__PURE__*/jsxRuntime.jsx(AvatarView$1.default, {
     ...props,
     size: size,

package/build/listItem/AvatarView/ListItemAvatarView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\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 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","_jsx","AvatarViewComp","clsx","displayName"],"mappings":"~~;;;;;;AAcO~~,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;~~EACxF~~,~~oBACEC~~,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,~~GACTF~~,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,~~EAAEK~~,SAAI,CAAC,iCAAiC,~~EAAEL~~,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,~~CAACO~~,WAAW,GAAG,qBAAqB;;;;"}
1	+ {"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { 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;;;;"}

package/build/listItem/AvatarView/ListItemAvatarView.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import AvatarView$1 from '../../avatarView/AvatarView.mjs';
+import { useListItemMedia } from '../useListItemMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
 const AvatarView = ({
@@ -7,6 +8,7 @@ const AvatarView = ({
   size = 48,
   ...props
 }) => {
+  useListItemMedia(size);
   return /*#__PURE__*/jsx(AvatarView$1, {
     ...props,
     size: size,

package/build/listItem/AvatarView/ListItemAvatarView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\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 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","_jsx","AvatarViewComp","clsx","displayName"],"mappings":"~~;;;;AAcO~~,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;~~EACxF~~,~~oBACEC~~,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,~~GACTF~~,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,~~EAAEK~~,IAAI,CAAC,iCAAiC,~~EAAEL~~,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,~~CAACO~~,WAAW,GAAG,qBAAqB;;;;"}
1	+ {"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { 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;;;;"}

package/build/listItem/Image/ListItemImage.js CHANGED Viewed

@@ -2,13 +2,16 @@
 var Image$1 = require('../../image/Image.js');
 var clsx = require('clsx');
+var useListItemMedia = require('../useListItemMedia.js');
 var jsxRuntime = require('react/jsx-runtime');
 const Image = ({
   alt = '',
   size = 48,
+  height,
   ...props
 }) => {
+  useListItemMedia.useListItemMedia(height ?? size);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('wds-list-item-media-image'),
     style: {

package/build/listItem/Image/ListItemImage.js.map CHANGED Viewed

	@@ -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';\n\ntype SizeProp = {};\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, it will set `role=\"graphics-symbol\"`.\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, ...props }: ListItemImageProps) => {\n return (\n <div\n className={clsx('wds-list-item-media-image')}\n style={\n {\n '--item-media-image-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : 'presentation'} />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","props","_jsx","className","clsx","style","children","ImageComp","role","displayName"],"mappings":"~~;;;;;;AAyBO~~,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAAsB,KAAI;~~AAC7E~~,EAAA,~~oBACEC~~,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,SAAI,CAAC,2BAA2B,CAAE;AAC7CC,IAAAA,KAAK,EACH;MACE,yBAAyB,EAAE,~~GAAGL~~,IAAI,CAAA,EAAA;KAErC;~~IAAAM~~,QAAA,eAEDJ,cAAA,CAACK,eAAS,EAAA;AAAA,MAAA,~~GAAKN~~,KAAK;~~AAAEF~~,MAAAA,GAAG,EAAEA,GAAI;~~AAACS~~,MAAAA,IAAI,~~EAAET~~,GAAG,GAAG,iBAAiB,GAAG;KAAe;AACjF,GAAK,CAAC;AAEV;AACAD,KAAK,~~CAACW~~,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';\n\ntype SizeProp = {};\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 If you're using an image that isn't a square or circle, also tell us the height so that we can align the control to it properly.\n /\n height?: number;\n /\n When unset, it will force `role=\"presentation\"` on the image. Otherwise, it will set `role=\"graphics-symbol\"`.\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, height, ...props }: ListItemImageProps) => {\n useListItemMedia(height ?? size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image')}\n style={\n {\n '--item-media-image-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : 'presentation'} />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","height","props","useListItemMedia","_jsx","className","clsx","style","children","ImageComp","role","displayName"],"mappings":";;;;;;;AA8BO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,MAAM;EAAE,GAAGC;AAAK,CAAsB,KAAI;AACrFC,EAAAA,iCAAgB,CAACF,MAAM,IAAID,IAAI,CAAC;AAEhC,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,SAAI,CAAC,2BAA2B,CAAE;AAC7CC,IAAAA,KAAK,EACH;MACE,yBAAyB,EAAE,GAAGP,IAAI,CAAA,EAAA;KAErC;IAAAQ,QAAA,eAEDJ,cAAA,CAACK,eAAS,EAAA;AAAA,MAAA,GAAKP,KAAK;AAAEH,MAAAA,GAAG,EAAEA,GAAI;AAACW,MAAAA,IAAI,EAAEX,GAAG,GAAG,iBAAiB,GAAG;KAAe;AACjF,GAAK,CAAC;AAEV;AACAD,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/Image/ListItemImage.mjs CHANGED Viewed

@@ -1,12 +1,15 @@
 import Image$1 from '../../image/Image.mjs';
 import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
 const Image = ({
   alt = '',
   size = 48,
+  height,
   ...props
 }) => {
+  useListItemMedia(height ?? size);
   return /*#__PURE__*/jsx("div", {
     className: clsx('wds-list-item-media-image'),
     style: {

package/build/listItem/Image/ListItemImage.mjs.map CHANGED Viewed

	@@ -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';\n\ntype SizeProp = {};\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, it will set `role=\"graphics-symbol\"`.\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, ...props }: ListItemImageProps) => {\n return (\n <div\n className={clsx('wds-list-item-media-image')}\n style={\n {\n '--item-media-image-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : 'presentation'} />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","props","_jsx","className","clsx","style","children","ImageComp","role","displayName"],"mappings":"~~;;;;AAyBO~~,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAAsB,KAAI;~~AAC7E~~,EAAA,~~oBACEC~~,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,IAAI,CAAC,2BAA2B,CAAE;AAC7CC,IAAAA,KAAK,EACH;MACE,yBAAyB,EAAE,~~GAAGL~~,IAAI,CAAA,EAAA;KAErC;~~IAAAM~~,QAAA,eAEDJ,GAAA,CAACK,OAAS,EAAA;AAAA,MAAA,~~GAAKN~~,KAAK;~~AAAEF~~,MAAAA,GAAG,EAAEA,GAAI;~~AAACS~~,MAAAA,IAAI,~~EAAET~~,GAAG,GAAG,iBAAiB,GAAG;KAAe;AACjF,GAAK,CAAC;AAEV;AACAD,KAAK,~~CAACW~~,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';\n\ntype SizeProp = {};\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 If you're using an image that isn't a square or circle, also tell us the height so that we can align the control to it properly.\n /\n height?: number;\n /\n When unset, it will force `role=\"presentation\"` on the image. Otherwise, it will set `role=\"graphics-symbol\"`.\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, height, ...props }: ListItemImageProps) => {\n useListItemMedia(height ?? size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image')}\n style={\n {\n '--item-media-image-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : 'presentation'} />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","height","props","useListItemMedia","_jsx","className","clsx","style","children","ImageComp","role","displayName"],"mappings":";;;;;AA8BO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,MAAM;EAAE,GAAGC;AAAK,CAAsB,KAAI;AACrFC,EAAAA,gBAAgB,CAACF,MAAM,IAAID,IAAI,CAAC;AAEhC,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,IAAI,CAAC,2BAA2B,CAAE;AAC7CC,IAAAA,KAAK,EACH;MACE,yBAAyB,EAAE,GAAGP,IAAI,CAAA,EAAA;KAErC;IAAAQ,QAAA,eAEDJ,GAAA,CAACK,OAAS,EAAA;AAAA,MAAA,GAAKP,KAAK;AAAEH,MAAAA,GAAG,EAAEA,GAAI;AAACW,MAAAA,IAAI,EAAEX,GAAG,GAAG,iBAAiB,GAAG;KAAe;AACjF,GAAK,CAAC;AAEV;AACAD,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/ListItem.js CHANGED Viewed

@@ -66,6 +66,7 @@ const ListItem = ({
   const idPrefix = React.useId();
   const [controlProps, setControlProps] = React.useState({});
   const [controlType, setControlType] = React.useState('non-interactive');
+  const [mediaSize, setMediaSize] = React.useState();
   const ids = {
     title: `${idPrefix}_title`,
     ...(subtitle ? {
@@ -96,13 +97,15 @@ const ListItem = ({
   const listItemContext = React.useMemo(() => ({
     setControlType,
     setControlProps,
+    setMediaSize,
     ids,
     props: {
       disabled,
       inverted
     },
+    mediaSize,
     describedByIds
-  }), [describedByIds]);
+  }), [describedByIds, mediaSize]);
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
     '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr'
@@ -168,6 +171,9 @@ const ListItem = ({
           className: "wds-list-item-body",
           style: valueColumnWidth ? gridColumnsStyle : undefined,
           children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: clsx.clsx({
+              'wds-list-item-body-center': title && !subtitle
+            }),
             children: (() => {
               const titles = [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                 id: ids.title,
@@ -186,7 +192,8 @@ const ListItem = ({
             })()
           }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
             className: clsx.clsx('wds-list-item-value', {
-              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
+              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
+              'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
             }),
             children: (() => {
               const values = [];
@@ -212,6 +219,9 @@ const ListItem = ({
           className: clsx.clsx('wds-list-item-control-wrapper', {
             'wds-list-item-button-control': controlType === 'button'
           }),
+          style: {
+            '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
+          },
           children: control
         })]
       })
@@ -249,7 +259,6 @@ function View({
           href: controlProps?.href,
           target: controlProps?.target,
           className: clsx.clsx('wds-list-item-view d-flex flex-row', {
-            'align-items-center': !subtitle,
             'wds-list-item-control': controlType === 'navigation'
           }),
           disabled: disabled,
@@ -262,9 +271,7 @@ function View({
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: clsx.clsx('wds-list-item-gridWrapper', className),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: clsx.clsx('wds-list-item-view d-flex flex-row', {
-          'align-items-center': !subtitle
-        }),
+        className: clsx.clsx('wds-list-item-view d-flex flex-row'),
         children: children
       }), renderExtras()]
     });
@@ -277,7 +284,6 @@ function View({
     children: [/*#__PURE__*/jsxRuntime.jsx("label", {
       htmlFor: ids.control,
       className: clsx.clsx('wds-list-item-view', {
-        'align-items-center': !subtitle,
         clickable: !disabled,
         fullyInteractive: !isPartiallyInteractive
       }),

package/build/listItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["/* eslint-disable functional/immutable-data /\nimport {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor } from '../primitives';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\n\nexport type ListItemTypes =\n \| 'non-interactive'\n \| 'navigation'\n \| 'radio'\n \| 'checkbox'\n \| 'switch'\n \| 'button'\n \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type Props = {\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n disabled?: boolean;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n role?: string;\n 'aria-labelledby'?: string;\n};\n\n/\n @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n role,\n id,\n 'aria-labelledby': ariaLabelledby,\n}: Props) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n ids,\n props: { disabled, inverted },\n describedByIds,\n }),\n [describedByIds],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n role={role}\n aria-disabled={disabled}\n aria-labelledby={ariaLabelledby}\n >\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span>\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<Props, 'subtitle' \| 'additionalInfo' \| 'disabled' \| 'prompt' \| 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided =\n isLinkControl &&\n !!(controlProps as ListItemNavigationProps)?.href &&\n (controlProps as ListItemNavigationProps)?.href !== '#';\n\n const renderExtras = () => (\n <>\n {Boolean(subtitle) && additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'align-items-center': !subtitle,\n 'wds-list-item-control': controlType === 'navigation',\n })}\n disabled={disabled}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'align-items-center': !subtitle,\n })}\n >\n {children}\n </div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n 'align-items-center': !subtitle,\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","role","id","ariaLabelledby","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","clsx","_jsxs","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","InputWrapper","htmlFor","clickable","fullyInteractive","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["/* eslint-disable functional/immutable-data /\nimport {\n useContext,\n useId,\n useMemo,\n useState,\n useEffect,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n \| 'non-interactive'\n \| 'navigation'\n \| 'radio'\n \| 'checkbox'\n \| 'switch'\n \| 'button'\n \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type Props = {\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n disabled?: boolean;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n role?: string;\n 'aria-labelledby'?: string;\n};\n\n/\n @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n role,\n id,\n 'aria-labelledby': ariaLabelledby,\n}: Props) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<number \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n role={role}\n aria-disabled={disabled}\n aria-labelledby={ariaLabelledby}\n >\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) \|\| (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<Props, 'subtitle' \| 'additionalInfo' \| 'disabled' \| 'prompt' \| 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided =\n isLinkControl &&\n !!(controlProps as ListItemNavigationProps)?.href &&\n (controlProps as ListItemNavigationProps)?.href !== '#';\n\n const renderExtras = () => (\n <>\n {Boolean(subtitle) && additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n })}\n disabled={disabled}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","role","id","ariaLabelledby","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","clsx","_jsxs","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","InputWrapper","htmlFor","clickable","fullyInteractive","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}

package/build/listItem/ListItem.mjs CHANGED Viewed

@@ -62,6 +62,7 @@ const ListItem = ({
   const idPrefix = useId();
   const [controlProps, setControlProps] = useState({});
   const [controlType, setControlType] = useState('non-interactive');
+  const [mediaSize, setMediaSize] = useState();
   const ids = {
     title: `${idPrefix}_title`,
     ...(subtitle ? {
@@ -92,13 +93,15 @@ const ListItem = ({
   const listItemContext = useMemo(() => ({
     setControlType,
     setControlProps,
+    setMediaSize,
     ids,
     props: {
       disabled,
       inverted
     },
+    mediaSize,
     describedByIds
-  }), [describedByIds]);
+  }), [describedByIds, mediaSize]);
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
     '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr'
@@ -164,6 +167,9 @@ const ListItem = ({
           className: "wds-list-item-body",
           style: valueColumnWidth ? gridColumnsStyle : undefined,
           children: [/*#__PURE__*/jsx("span", {
+            className: clsx({
+              'wds-list-item-body-center': title && !subtitle
+            }),
             children: (() => {
               const titles = [/*#__PURE__*/jsx(Body, {
                 id: ids.title,
@@ -182,7 +188,8 @@ const ListItem = ({
             })()
           }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsx("span", {
             className: clsx('wds-list-item-value', {
-              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
+              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
+              'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
             }),
             children: (() => {
               const values = [];
@@ -208,6 +215,9 @@ const ListItem = ({
           className: clsx('wds-list-item-control-wrapper', {
             'wds-list-item-button-control': controlType === 'button'
           }),
+          style: {
+            '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
+          },
           children: control
         })]
       })
@@ -245,7 +255,6 @@ function View({
           href: controlProps?.href,
           target: controlProps?.target,
           className: clsx('wds-list-item-view d-flex flex-row', {
-            'align-items-center': !subtitle,
             'wds-list-item-control': controlType === 'navigation'
           }),
           disabled: disabled,
@@ -258,9 +267,7 @@ function View({
     return /*#__PURE__*/jsxs("div", {
       className: clsx('wds-list-item-gridWrapper', className),
       children: [/*#__PURE__*/jsx("div", {
-        className: clsx('wds-list-item-view d-flex flex-row', {
-          'align-items-center': !subtitle
-        }),
+        className: clsx('wds-list-item-view d-flex flex-row'),
         children: children
       }), renderExtras()]
     });
@@ -273,7 +280,6 @@ function View({
     children: [/*#__PURE__*/jsx("label", {
       htmlFor: ids.control,
       className: clsx('wds-list-item-view', {
-        'align-items-center': !subtitle,
         clickable: !disabled,
         fullyInteractive: !isPartiallyInteractive
       }),

package/build/listItem/ListItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["/* eslint-disable functional/immutable-data /\nimport {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor } from '../primitives';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\n\nexport type ListItemTypes =\n \| 'non-interactive'\n \| 'navigation'\n \| 'radio'\n \| 'checkbox'\n \| 'switch'\n \| 'button'\n \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type Props = {\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n disabled?: boolean;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n role?: string;\n 'aria-labelledby'?: string;\n};\n\n/\n @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n role,\n id,\n 'aria-labelledby': ariaLabelledby,\n}: Props) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n ids,\n props: { disabled, inverted },\n describedByIds,\n }),\n [describedByIds],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n role={role}\n aria-disabled={disabled}\n aria-labelledby={ariaLabelledby}\n >\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span>\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<Props, 'subtitle' \| 'additionalInfo' \| 'disabled' \| 'prompt' \| 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided =\n isLinkControl &&\n !!(controlProps as ListItemNavigationProps)?.href &&\n (controlProps as ListItemNavigationProps)?.href !== '#';\n\n const renderExtras = () => (\n <>\n {Boolean(subtitle) && additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'align-items-center': !subtitle,\n 'wds-list-item-control': controlType === 'navigation',\n })}\n disabled={disabled}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'align-items-center': !subtitle,\n })}\n >\n {children}\n </div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n 'align-items-center': !subtitle,\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","role","id","ariaLabelledby","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","clsx","_jsxs","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","InputWrapper","htmlFor","clickable","fullyInteractive","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAmGO,MAAMA,QAAQ,GAAGA,CAAC;EACvBC,EAAE,EAAEC,eAAe,GAAG,IAAI;EAC1BC,KAAK;EACLC,QAAQ;EACRC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,UAAU;EACVC,aAAa;AACbC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,SAAS;EACTC,gBAAgB;EAChBC,IAAI;EACJC,EAAE;AACF,EAAA,iBAAiB,EAAEC;AAAc,CAC3B,KAAI;AACV,EAAA,MAAMC,QAAQ,GAAGC,KAAK,EAAE;EACxB,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAuB,EAAE,CAAC;EAC1E,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAgB,iBAAiB,CAAC;AAChF,EAAA,MAAMG,GAAG,GAA+B;IACtCvB,KAAK,EAAE,CAAA,EAAGgB,QAAQ,CAAA,MAAA,CAAQ;AAC1B,IAAA,IAAIf,QAAQ,GAAG;MAAEA,QAAQ,EAAE,GAAGe,QAAQ,CAAA,SAAA;KAAa,GAAG,EAAE,CAAC;AACzD,IAAA,IAAIT,UAAU,GAAG;MAAEA,UAAU,EAAE,GAAGS,QAAQ,CAAA,YAAA;KAAgB,GAAG,EAAE,CAAC;AAChE,IAAA,IAAIR,aAAa,GAAG;MAAEA,aAAa,EAAE,GAAGQ,QAAQ,CAAA,eAAA;KAAmB,GAAG,EAAE,CAAC;IACzEP,OAAO,EAAE,CAAA,EAAGO,QAAQ,CAAA,QAAA,CAAU;AAC9B,IAAA,IAAIb,MAAM,GAAG;MAAEA,MAAM,EAAE,GAAGa,QAAQ,CAAA,OAAA;KAAW,GAAG,EAAE,CAAC;AACnD,IAAA,IAAId,cAAc,GAAG;MAAEA,cAAc,EAAE,GAAGc,QAAQ,CAAA,gBAAA;KAAoB,GAAG,EAAE;GAC5E;AAED,EAAA,MAAMQ,sBAAsB,GAAGC,OAAO,CACpC,CAACJ,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KACvDH,YAA8D,EAAEQ,oBAAoB,CACxF;AACD,EAAA,MAAMC,kBAAkB,GAAGN,WAAW,KAAK,iBAAiB,IAAI,CAACG,sBAAsB;AACvF,EAAA,MAAMI,cAAc,GAClB,CAACP,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KAC1DI,OAAO,CAAEP,YAA8D,EAAEW,IAAI,CAAC;EAEhF,MAAMC,eAAe,GAAG,CACtB1B,QAAQ,GAAGmB,GAAG,CAACtB,QAAQ,GAAGsB,GAAG,CAACvB,KAAK,EACnCI,QAAQ,GAAGmB,GAAG,CAACvB,KAAK,GAAGuB,GAAG,CAACtB,QAAQ,EACnCG,QAAQ,GAAGmB,GAAG,CAACf,aAAa,GAAGe,GAAG,CAAChB,UAAU,EAC7CH,QAAQ,GAAGmB,GAAG,CAAChB,UAAU,GAAGgB,GAAG,CAACf,aAAa,CAC9C,CAACuB,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,oBAAoB,GAAG,CAACT,GAAG,CAACrB,cAAc,EAAEqB,GAAG,CAACpB,MAAM,CAAC,CAAC8B,MAAM,CAACR,OAAO,CAAC,CAACM,IAAI,CAAC,GAAG,CAAC;AAEvF,EAAA,MAAMG,cAAc,GAAGC,OAAO,CAAC,MAAK;IAClC,OAAOR,kBAAkB,IAAI,CAACC,cAAc,GACxCI,oBAAoB,GACpB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIE,oBAAoB,CAAA,CAAE;AAClD,EAAA,CAAC,EAAE,CAACL,kBAAkB,CAAC,CAAC;AAExB,EAAA,MAAMS,eAAe,GAAGD,OAAO,CAC7B,OAAO;IACLb,cAAc;IACdH,eAAe;IACfI,GAAG;AACHc,IAAAA,KAAK,EAAE;MAAE3B,QAAQ;AAAEN,MAAAA;KAAU;AAC7B8B,IAAAA;AACD,GAAA,CAAC,EACF,CAACA,cAAc,CAAC,CACjB;AACD,EAAA,MAAMI,gBAAgB,GAAG;IACvB,2BAA2B,EAAE1B,gBAAgB,GAAG,CAAA,EAAG,GAAG,GAAGA,gBAAgB,CAAA,EAAA,CAAI,GAAG,MAAM;AACtF,IAAA,4BAA4B,EAAEA,gBAAgB,GAAG,CAAA,EAAGA,gBAAgB,IAAI,GAAG;GACrD;EAExB,MAAM2B,mBAAmB,GAAGA,MAAK;IAC/B,MAAMC,QAAQ,GAAG,EAAE;AACnB,IAAA,MAAMC,QAAQ,GAAGhB,OAAO,CAACpB,KAAK,CAAC;AAC/B,IAAA,MAAMqC,UAAU,GAAGjB,OAAO,CAAChB,OAAO,CAAC;AACnC,IAAA,MAAMkC,OAAO,GAAGlB,OAAO,CAACvB,cAAc,CAAC;AACvC,IAAA,MAAM0C,SAAS,GAAGnB,OAAO,CAACtB,MAAM,CAAC;IAEjC,IAAIsC,QAAQ,IAAIC,UAAU,EAAE;AAC1BF,MAAAA,QAAQ,CAACK,IAAI,CAAC,mCAAmC,CAAC;AACpD,IAAA;AAEA,IAAA,IAAIJ,QAAQ,IAAI,CAACC,UAAU,EAAE;AAC3BF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAIC,UAAU,EAAE;AAC3BF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACC,UAAU,EAAE;AAC5BF,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;IAEA,IAAIF,OAAO,IAAIC,SAAS,EAAE;AACxBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;AACA,IAAA,IAAIF,OAAO,IAAI,CAACC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAIC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAI,CAACC,SAAS,EAAE;AAC1BJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,+BAA+B,CAAC;AAChD,IAAA;AAEA,IAAA,OAAOL,QAAQ,CAACT,IAAI,CAAC,GAAG,CAAC;EAC3B,CAAC;AAED,EAAA,oBACEe,GAAA,CAACC,eAAe,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEb,eAAgB;IAAAc,QAAA,eAC/CJ,GAAA,CAAC/C,eAAe,EAAA;AACdY,MAAAA,SAAS,EAAEwC,IAAI,CACb,eAAe,EACf,CAAA,cAAA,EAAiB9B,WAAW,CAAA,CAAE,EAC9BkB,mBAAmB,EAAE,EACrB;AACE,QAAA,2BAA2B,EAAEZ,kBAAkB;AAC/C,QAAA,qCAAqC,EAAEH,sBAAsB;QAC7D,CAAC,CAAA,gDAAA,EAAmDlB,SAAS,CAAA,CAAE,GAC7DqB,kBAAkB,IAAI,CAAC,CAACrB,SAAS;AACnCI,QAAAA;OACD,EACDC,SAAS,CACT;AACFG,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,IAAI,EAAEA,IAAK;AACX,MAAA,eAAA,EAAeH,QAAS;AACxB,MAAA,iBAAA,EAAiBK,cAAe;MAAAmC,QAAA,eAEhCE,IAAA,CAACC,IAAI,EAAA;QAED7B,sBAAsB;QACtBvB,QAAQ;QACRC,cAAc;QACdQ,QAAQ;QACRP,MAAM;QACNkB,WAAW;QACXH,YAAY;QAEdP,SAAS,EAAE4B,mBAAmB,EAAG;QAAAW,QAAA,EAAA,CAEhC7C,KAAK,iBAAIyC,GAAA,CAAA,KAAA,EAAA;AAAKnC,UAAAA,SAAS,EAAC,qBAAqB;AAAAuC,UAAAA,QAAA,EAAE7C;SAAW,CAAC,eAG5D+C,IAAA,CAAA,KAAA,EAAA;AACEzC,UAAAA,SAAS,EAAC,oBAAoB;AAC9B2C,UAAAA,KAAK,EAAE1C,gBAAgB,GAAG0B,gBAAgB,GAAGiB,SAAU;AAAAL,UAAAA,QAAA,gBAGvDJ,GAAA,CAAA,MAAA,EAAA;YAAAI,QAAA,EACG,CAAC,MAAK;AACL,cAAA,MAAMM,MAAM,GAAG,cACbV,GAAA,CAACW,IAAI,EAAA;gBAEH3C,EAAE,EAAES,GAAG,CAACvB,KAAM;gBACd0D,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCjD,gBAAAA,SAAS,EAAC,qBAAqB;AAAAuC,gBAAAA,QAAA,EAE9BlD;AAAK,eAAA,EALDuB,GAAG,CAACvB,KAML,CAAC,CACR;AACD,cAAA,IAAIC,QAAQ,EAAE;AACZuD,gBAAAA,MAAM,CAACX,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAAoB3C,EAAE,EAAES,GAAG,CAACtB,QAAS;AAACU,kBAAAA,SAAS,EAAC,wBAAwB;AAAAuC,kBAAAA,QAAA,EAC1EjD;AAAQ,iBAAA,EADAsB,GAAG,CAACtB,QAET,CAAC,CACR;AACH,cAAA;cACA,OAAOG,QAAQ,GAAG,CAAC,GAAGoD,MAAM,CAAC,CAACK,OAAO,EAAE,GAAGL,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CAEN,EAAC,CAACjD,UAAU,IAAIC,aAAa,kBAC3BsC,GAAA,CAAA,MAAA,EAAA;AACEnC,YAAAA,SAAS,EAAEwC,IAAI,CAAC,qBAAqB,EAAE;AACrC,cAAA,aAAa,EAAE5C,UAAU,KAAKgD,SAAS,IAAI/C,aAAa,KAAK+C;AAC9D,aAAA,CAAE;YAAAL,QAAA,EAEF,CAAC,MAAK;cACL,MAAMY,MAAM,GAAG,EAAE;AACjB,cAAA,IAAIvD,UAAU,EAAE;AACduD,gBAAAA,MAAM,CAACjB,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAEH3C,EAAE,EAAES,GAAG,CAAChB,UAAW;kBACnBmD,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCjD,kBAAAA,SAAS,EAAC,2BAA2B;AAAAuC,kBAAAA,QAAA,EAEpC3C;AAAU,iBAAA,EALNgB,GAAG,CAAChB,UAML,CAAC,CACR;AACH,cAAA;AACA,cAAA,IAAIC,aAAa,EAAE;AACjBsD,gBAAAA,MAAM,CAACjB,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAEH3C,EAAE,EAAES,GAAG,CAACf,aAAc;AACtBG,kBAAAA,SAAS,EAAC,8BAA8B;AAAAuC,kBAAAA,QAAA,EAEvC1C;AAAa,iBAAA,EAJTe,GAAG,CAACf,aAKL,CAAC,CACR;AACH,cAAA;cACA,OAAOJ,QAAQ,GAAG,CAAC,GAAG0D,MAAM,CAAC,CAACD,OAAO,EAAE,GAAGC,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CACP;SACE,CAEL,EAACrD,OAAO,KAAK,IAAI,GAAG,IAAI,gBACtBqC,GAAA,CAACW,IAAI,EAAA;AACH9C,UAAAA,SAAS,EAAEwC,IAAI,CAAC,+BAA+B,EAAE;YAC/C,8BAA8B,EAAE9B,WAAW,KAAK;AACjD,WAAA,CAAE;AAAA6B,UAAAA,QAAA,EAEFzC;AAAO,SACJ,CACP;OACG;KACS;AACnB,GAA0B,CAAC;AAE/B;AASA,SAAS4C,IAAIA,CAAC;EACZH,QAAQ;EACRjD,QAAQ;EACRC,cAAc;EACdC,MAAM;EACNO,QAAQ;EACRc,sBAAsB;AACtBH,EAAAA,WAAW,GAAG,iBAAiB;EAC/BH,YAAY;AACZP,EAAAA,SAAS,GAAG;AAAE,CACJ,EAAA;EACV,MAAM;IAAEY,GAAG;AAAEW,IAAAA;AAAc,GAAE,GAAG6B,UAAU,CAAsBhB,eAAe,CAAC;EAChF,MAAMiB,aAAa,GAAG,CAAC,YAAY,CAAC,CAACC,QAAQ,CAAC5C,WAAW,CAAC;AAE1D,EAAA,MAAM6C,cAAc,GAClBF,aAAa,IACb,CAAC,CAAE9C,YAAwC,EAAEW,IAAI,IAChDX,YAAwC,EAAEW,IAAI,KAAK,GAAG;AAEzD,EAAA,MAAMsC,YAAY,GAAGA,mBACnBf,IAAA,CAAAgB,QAAA,EAAA;IAAAlB,QAAA,EAAA,CACGzB,OAAO,CAACxB,QAAQ,CAAC,IAAIC,cAAc,EACnCC,MAAM;AAAA,GACT,CACD;EAED,IAAI6D,aAAa,IAAIE,cAAc,EAAE;AACnC,IAAA;AAAA;AACE;MACAd,IAAA,CAAA,KAAA,EAAA;AAAKzC,QAAAA,SAAS,EAAEwC,IAAI,CAAC,2BAA2B,EAAExC,SAAS,CAAE;QAAAuC,QAAA,EAAA,cAC3DJ,GAAA,CAACuB,eAAe,EAAA;AACd,UAAA,kBAAA,EAAkBnC,cAAe;UACjCL,IAAI,EAAGX,YAAwC,EAAEW,IAAK;UACtDyC,MAAM,EAAGpD,YAAwC,EAAEoD,MAAO;AAC1D3D,UAAAA,SAAS,EAAEwC,IAAI,CAAC,oCAAoC,EAAE;YACpD,oBAAoB,EAAE,CAAClD,QAAQ;YAC/B,uBAAuB,EAAEoB,WAAW,KAAK;AAC1C,WAAA,CAAE;AACHX,UAAAA,QAAQ,EAAEA,QAAS;AAAAwC,UAAAA,QAAA,EAElBA;AAAQ,SACM,CAEjB,EAACiB,YAAY,EAAE;OACZ;AAAC;AAEV,EAAA;AAEA,EAAA,IAAI3C,sBAAsB,IAAIH,WAAW,KAAK,iBAAiB,EAAE;AAC/D,IAAA,oBACE+B,IAAA,CAAA,KAAA,EAAA;AAAKzC,MAAAA,SAAS,EAAEwC,IAAI,CAAC,2BAA2B,EAAExC,SAAS,CAAE;AAAAuC,MAAAA,QAAA,gBAC3DJ,GAAA,CAAA,KAAA,EAAA;AACEnC,QAAAA,SAAS,EAAEwC,IAAI,CAAC,oCAAoC,EAAE;AACpD,UAAA,oBAAoB,EAAE,CAAClD;AACxB,SAAA,CAAE;AAAAiD,QAAAA,QAAA,EAEFA;AAAQ,OACN,CAEL,EAACiB,YAAY,EAAE;AAAA,KACZ,CAAC;AAEV,EAAA;AAEA;AACA;EACA,MAAMI,YAAY,GAAGlD,WAAW,KAAK,OAAO,GAAG,KAAK,GAAG,UAAU;EACjE,oBACE+B,IAAA,CAACmB,YAAY,EAAA;AAAC5D,IAAAA,SAAS,EAAEwC,IAAI,CAAC,2BAA2B,EAAExC,SAAS,CAAE;AAAAuC,IAAAA,QAAA,gBACpEJ,GAAA,CAAA,OAAA,EAAA;MACE0B,OAAO,EAAEjD,GAAG,CAACd,OAAQ;AACrBE,MAAAA,SAAS,EAAEwC,IAAI,CAAC,oBAAoB,EAAE;QACpC,oBAAoB,EAAE,CAAClD,QAAQ;QAC/BwE,SAAS,EAAE,CAAC/D,QAAQ;AACpBgE,QAAAA,gBAAgB,EAAE,CAAClD;AACpB,OAAA,CAAE;AAAA0B,MAAAA,QAAA,EAEFA;AAAQ,KACJ,CAEP,EAACiB,YAAY,EAAE;AAAA,GACH,CAAC;AAEnB;AAEAtE,QAAQ,CAAC8E,KAAK,GAAGA,KAAK;AACtB9E,QAAQ,CAAC+E,UAAU,GAAGA,UAAU;AAChC/E,QAAQ,CAACgF,YAAY,GAAGA,YAAY;AACpChF,QAAQ,CAACiF,cAAc,GAAGA,cAAc;AACxCjF,QAAQ,CAACkF,QAAQ,GAAGA,QAAQ;AAC5BlF,QAAQ,CAACmF,KAAK,GAAGA,KAAK;AACtBnF,QAAQ,CAACoF,UAAU,GAAGA,UAAU;AAChCpF,QAAQ,CAACqF,UAAU,GAAGA,UAAU;AAChCrF,QAAQ,CAACsF,MAAM,GAAGA,MAAM;AACxBtF,QAAQ,CAACuF,MAAM,GAAGA,MAAM;AACxBvF,QAAQ,CAACwF,MAAM,GAAGA,MAAM;;;;"}
1	+ {"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["/* eslint-disable functional/immutable-data /\nimport {\n useContext,\n useId,\n useMemo,\n useState,\n useEffect,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n \| 'non-interactive'\n \| 'navigation'\n \| 'radio'\n \| 'checkbox'\n \| 'switch'\n \| 'button'\n \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type Props = {\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n disabled?: boolean;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n role?: string;\n 'aria-labelledby'?: string;\n};\n\n/\n @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n role,\n id,\n 'aria-labelledby': ariaLabelledby,\n}: Props) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<number \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n role={role}\n aria-disabled={disabled}\n aria-labelledby={ariaLabelledby}\n >\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) \|\| (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<Props, 'subtitle' \| 'additionalInfo' \| 'disabled' \| 'prompt' \| 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided =\n isLinkControl &&\n !!(controlProps as ListItemNavigationProps)?.href &&\n (controlProps as ListItemNavigationProps)?.href !== '#';\n\n const renderExtras = () => (\n <>\n {Boolean(subtitle) && additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n })}\n disabled={disabled}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","role","id","ariaLabelledby","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","clsx","_jsxs","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","InputWrapper","htmlFor","clickable","fullyInteractive","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}

package/build/listItem/ListItemContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => 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'>;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;~~MAmBaA~~,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, Props as ListItemProps } from './ListItem';\nimport type { ListItemAvatarViewProps } from './AvatarView';\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: number \| 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'>;\n mediaSize?: number;\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 Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => 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'>;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;~~MAmBaA~~,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, Props as ListItemProps } from './ListItem';\nimport type { ListItemAvatarViewProps } from './AvatarView';\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: number \| 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'>;\n mediaSize?: number;\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;;;;"}