@transferwise/components 46.103.1 → 46.105.0

package/build/listItem/Button/ListItemButton.mjs

@@ -0,0 +1,41 @@
+import { useContext } from 'react';
+import { clsx } from 'clsx';
+import Button$1 from '../../button/Button.resolver.mjs';
+import { useListItemControl } from '../useListItemControl.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Button = ({
+  priority = 'secondary-neutral',
+  partiallyInteractive,
+  ...props
+}) => {
+  const {
+    baseItemProps
+  } = useListItemControl('button', {
+    partiallyInteractive,
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = useContext(ListItemContext);
+  const commonProps = {
+    ...props,
+    className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
+    id: ids.control,
+    priority,
+    v2: true,
+    size: 'sm',
+    disabled: baseItemProps.disabled
+  };
+  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
+  return /*#__PURE__*/jsx(Button$1, {
+    "aria-describedby": `${buttonContentId} ${describedByIds}`,
+    ...commonProps
+  });
+};
+Button.displayName = 'ListItem.Button';
+
+export { Button };
+//# sourceMappingURL=ListItemButton.mjs.map

package/build/listItem/Button/ListItemButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n  NewButtonProps,\n  'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n  /**\n   * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n   */\n  partiallyInteractive?: boolean;\n  addonStart?: ButtonAddonIcon;\n};\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Button = ({\n  priority = 'secondary-neutral',\n  partiallyInteractive,\n  ...props\n}: ListItemButtonProps) => {\n  const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  const commonProps = {\n    ...props,\n    className: clsx(\n      'wds-list-item-control',\n      !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n    ),\n    id: ids.control,\n    priority,\n    v2: true,\n    size: 'sm',\n    disabled: baseItemProps.disabled,\n  };\n\n  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n  return (\n    <ButtonComp\n      aria-describedby={`${buttonContentId} ${describedByIds}`}\n      {...(commonProps as NewButtonProps)}\n    />\n  );\n};\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","priority","partiallyInteractive","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,MAAM,GAAGA,CAAC;AACrBC,EAAAA,QAAQ,GAAG,mBAAmB;EAC9BC,oBAAoB;EACpB,GAAGC;AAAK,CACY,KAAI;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACV,oBAAoB,IAAIC,KAAK,CAACU,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACfd,QAAQ;AACRe,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGhB,KAAK,CAACU,IAAI,IAAIX,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGI,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN;AAEAV,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Checkbox/ListItemCheckbox.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var CheckboxButton = require('../../checkboxButton/CheckboxButton.js');
+var useListItemControl = require('../useListItemControl.js');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Checkbox = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('checkbox', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  return /*#__PURE__*/jsxRuntime.jsx(CheckboxButton.default, {
+    ...props,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control,
+    "aria-describedby": describedByIds
+  });
+};
+Checkbox.displayName = 'ListItem.Checkbox';
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=ListItemCheckbox.js.map

package/build/listItem/Checkbox/ListItemCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemCheckbox.js","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n  CheckboxButtonProps,\n  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n  const { baseItemProps } = useListItemControl('checkbox', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <CheckboxButton\n      {...props}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n      aria-describedby={describedByIds}\n    />\n  );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAE3D,oBACEC,cAAA,CAACC,sBAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}

package/build/listItem/Checkbox/ListItemCheckbox.mjs

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import CheckboxButton from '../../checkboxButton/CheckboxButton.mjs';
+import { useListItemControl } from '../useListItemControl.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Checkbox = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl('checkbox', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = useContext(ListItemContext);
+  return /*#__PURE__*/jsx(CheckboxButton, {
+    ...props,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control,
+    "aria-describedby": describedByIds
+  });
+};
+Checkbox.displayName = 'ListItem.Checkbox';
+
+export { Checkbox };
+//# sourceMappingURL=ListItemCheckbox.mjs.map

package/build/listItem/Checkbox/ListItemCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemCheckbox.mjs","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n  CheckboxButtonProps,\n  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n  const { baseItemProps } = useListItemControl('checkbox', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <CheckboxButton\n      {...props}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n      aria-describedby={describedByIds}\n    />\n  );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAE3D,oBACEC,GAAA,CAACC,cAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}

package/build/listItem/IconButton/ListItemIconButton.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var IconButton$1 = require('../../iconButton/IconButton.js');
+var useListItemControl = require('../useListItemControl.js');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const IconButton = function ({
+  priority = 'minimal',
+  'aria-label': ariaLabel,
+  ...props
+}) {
+  const {
+    partiallyInteractive,
+    ...restProps
+  } = props;
+  const {
+    ids,
+    props: itemProps
+  } = React.useContext(ListItemContext.ListItemContext);
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('icon-button', {
+    partiallyInteractive,
+    ...restProps
+  });
+  const getAriaProps = () => {
+    const labelIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
+    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');
+    if (ariaLabel) {
+      return {
+        'aria-label': ariaLabel,
+        'aria-describedby': labelIds.concat(descriptorIds)
+      };
+    }
+    return {
+      'aria-labelledby': labelIds,
+      'aria-describedby': descriptorIds
+    };
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton$1.default, {
+    ...restProps,
+    ...getAriaProps(),
+    className: clsx.clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
+    id: ids.control,
+    size: 40,
+    priority: priority,
+    disabled: baseItemProps.disabled
+  });
+};
+IconButton.displayName = 'ListItem.IconButton';
+
+exports.IconButton = IconButton;
+//# sourceMappingURL=ListItemIconButton.js.map

package/build/listItem/IconButton/ListItemIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIconButton.js","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/IconButton/ListItemIconButton.mjs

@@ -0,0 +1,54 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import IconButton$1 from '../../iconButton/IconButton.mjs';
+import { useListItemControl } from '../useListItemControl.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const IconButton = function ({
+  priority = 'minimal',
+  'aria-label': ariaLabel,
+  ...props
+}) {
+  const {
+    partiallyInteractive,
+    ...restProps
+  } = props;
+  const {
+    ids,
+    props: itemProps
+  } = useContext(ListItemContext);
+  const {
+    baseItemProps
+  } = useListItemControl('icon-button', {
+    partiallyInteractive,
+    ...restProps
+  });
+  const getAriaProps = () => {
+    const labelIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
+    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');
+    if (ariaLabel) {
+      return {
+        'aria-label': ariaLabel,
+        'aria-describedby': labelIds.concat(descriptorIds)
+      };
+    }
+    return {
+      'aria-labelledby': labelIds,
+      'aria-describedby': descriptorIds
+    };
+  };
+  return /*#__PURE__*/jsx(IconButton$1, {
+    ...restProps,
+    ...getAriaProps(),
+    className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
+    id: ids.control,
+    size: 40,
+    priority: priority,
+    disabled: baseItemProps.disabled
+  });
+};
+IconButton.displayName = 'ListItem.IconButton';
+
+export { IconButton };
+//# sourceMappingURL=ListItemIconButton.mjs.map

package/build/listItem/IconButton/ListItemIconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIconButton.mjs","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Image/ListItemImage.js

@@ -0,0 +1,31 @@
+'use strict';
+
+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,
+  className,
+  ...props
+}) => {
+  useListItemMedia.useListItemMedia(size);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: clsx.clsx('wds-list-item-media-image-wrapper'),
+    style: {
+      '--wds-list-item-media-size': `${size}px`
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Image$1.default, {
+      ...props,
+      className: clsx.clsx(className, 'wds-list-item-media-image'),
+      alt: alt,
+      role: alt ? undefined : 'presentation'
+    })
+  });
+};
+Image.displayName = 'ListItem.Image';
+
+exports.Image = Image;
+//# sourceMappingURL=ListItemImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   */\n  size?: 32 | 40 | 48 | 56 | 72;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/Image/ListItemImage.mjs

@@ -0,0 +1,29 @@
+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,
+  className,
+  ...props
+}) => {
+  useListItemMedia(size);
+  return /*#__PURE__*/jsx("div", {
+    className: clsx('wds-list-item-media-image-wrapper'),
+    style: {
+      '--wds-list-item-media-size': `${size}px`
+    },
+    children: /*#__PURE__*/jsx(Image$1, {
+      ...props,
+      className: clsx(className, 'wds-list-item-media-image'),
+      alt: alt,
+      role: alt ? undefined : 'presentation'
+    })
+  });
+};
+Image.displayName = 'ListItem.Image';
+
+export { Image };
+//# sourceMappingURL=ListItemImage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   */\n  size?: 32 | 40 | 48 | 56 | 72;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/ListItem.js

@@ -0,0 +1,311 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
+var typography = require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+var clsx = require('clsx');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Body = require('../body/Body.js');
+var ListItemAdditionalInfo = require('./AdditionalInfo/ListItemAdditionalInfo.js');
+var ListItemIconButton = require('./IconButton/ListItemIconButton.js');
+var ListItemCheckbox = require('./Checkbox/ListItemCheckbox.js');
+var ListItemNavigation = require('./Navigation/ListItemNavigation.js');
+var ListItemButton = require('./Button/ListItemButton.js');
+var ListItemRadio = require('./Radio/ListItemRadio.js');
+var ListItemSwitch = require('./Switch/ListItemSwitch.js');
+var ListItemAvatarLayout = require('./AvatarLayout/ListItemAvatarLayout.js');
+var ListItemAvatarView = require('./AvatarView/ListItemAvatarView.js');
+var ListItemImage = require('./Image/ListItemImage.js');
+var ListItemPrompt = require('./Prompt/ListItemPrompt.js');
+require('../primitives/PrimitiveButton/PrimitiveButton.js');
+var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
+var ListItemContext = require('./ListItemContext.js');
+
+const ListItem = ({
+  as: ListItemElement = 'li',
+  title,
+  subtitle,
+  additionalInfo,
+  prompt,
+  inverted,
+  media,
+  spotlight,
+  valueTitle,
+  valueSubtitle,
+  control = null,
+  disabled,
+  className,
+  valueColumnWidth,
+  id
+}) => {
+  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 ? {
+      subtitle: `${idPrefix}_subtitle`
+    } : {}),
+    ...(valueTitle ? {
+      valueTitle: `${idPrefix}_value-title`
+    } : {}),
+    ...(valueSubtitle ? {
+      valueSubtitle: `${idPrefix}_value-subtitle`
+    } : {}),
+    control: `${idPrefix}_control`,
+    ...(prompt ? {
+      prompt: `${idPrefix}_prompt`
+    } : {}),
+    ...(additionalInfo ? {
+      additionalInfo: `${idPrefix}_additional-info`
+    } : {})
+  };
+  const isPartiallyInteractive = Boolean((controlType === 'button' || controlType === 'icon-button') && controlProps?.partiallyInteractive);
+  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;
+  const isButtonAsLink = (controlType === 'button' || controlType === 'icon-button') && Boolean(controlProps?.href);
+  const titlesAndValues = [inverted ? ids.subtitle : ids.title, inverted ? ids.title : ids.subtitle, inverted ? ids.valueSubtitle : ids.valueTitle, inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
+  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');
+  const describedByIds = React.useMemo(() => {
+    return isFullyInteractive && !isButtonAsLink ? additionalInfoPrompt : `${titlesAndValues} ${additionalInfoPrompt}`;
+  }, [isFullyInteractive]);
+  const listItemContext = React.useMemo(() => ({
+    setControlType,
+    setControlProps,
+    setMediaSize,
+    ids,
+    props: {
+      disabled,
+      inverted
+    },
+    mediaSize,
+    describedByIds
+  }), [describedByIds, mediaSize]);
+  const gridColumnsStyle = {
+    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
+    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr'
+  };
+  const getFeatureClassName = () => {
+    const partials = [];
+    const hasMedia = Boolean(media);
+    const hasControl = Boolean(control);
+    const hasInfo = Boolean(additionalInfo);
+    const hasPrompt = Boolean(prompt);
+    /* eslint-disable functional/immutable-data */
+    if (hasMedia && hasControl) {
+      partials.push('wds-list-item-hasMedia-hasControl');
+    }
+    if (hasMedia && !hasControl) {
+      partials.push('wds-list-item-hasMedia-noControl');
+    }
+    if (!hasMedia && hasControl) {
+      partials.push('wds-list-item-noMedia-hasControl');
+    }
+    if (!hasMedia && !hasControl) {
+      partials.push('wds-list-item-noMedia-noControl');
+    }
+    if (hasInfo && hasPrompt) {
+      partials.push('wds-list-item-hasInfo-hasPrompt');
+    }
+    if (hasInfo && !hasPrompt) {
+      partials.push('wds-list-item-hasInfo-noPrompt');
+    }
+    if (!hasInfo && hasPrompt) {
+      partials.push('wds-list-item-noInfo-hasPrompt');
+    }
+    if (!hasInfo && !hasPrompt) {
+      partials.push('wds-list-item-noInfo-noPrompt');
+    }
+    /* eslint-enable functional/immutable-data */
+    return partials.join(' ');
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(ListItemContext.ListItemContext.Provider, {
+    value: listItemContext,
+    children: /*#__PURE__*/jsxRuntime.jsxs(ListItemElement, {
+      className: clsx.clsx('wds-list-item', `wds-list-item-${controlType}`, getFeatureClassName(), {
+        'wds-list-item-interactive': isFullyInteractive,
+        'wds-list-item-partially-interactive': isPartiallyInteractive,
+        [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+        disabled
+      }, className),
+      id: id,
+      "aria-disabled": disabled,
+      children: [spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
+        "aria-hidden": "true",
+        className: "wds-list-item-spotlight__border",
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
+      }), /*#__PURE__*/jsxRuntime.jsxs(View, {
+        isPartiallyInteractive,
+        subtitle,
+        additionalInfo,
+        disabled,
+        prompt,
+        controlType,
+        controlProps,
+        className: getFeatureClassName(),
+        children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "wds-list-item-media",
+          children: media
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          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,
+                type: typography.Typography.BODY_LARGE_BOLD,
+                className: "wds-list-item-title",
+                children: title
+              }, ids.title)];
+              if (subtitle) {
+                titles.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+                  id: ids.subtitle,
+                  className: "wds-list-item-subtitle",
+                  children: subtitle
+                }, ids.subtitle));
+              }
+              return inverted ? [...titles].reverse() : titles;
+            })()
+          }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: clsx.clsx('wds-list-item-value', {
+              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
+              'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
+            }),
+            children: (() => {
+              const values = [];
+              if (valueTitle) {
+                values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+                  id: ids.valueTitle,
+                  type: typography.Typography.BODY_LARGE_BOLD,
+                  className: "wds-list-item-title-value",
+                  children: valueTitle
+                }, ids.valueTitle));
+              }
+              if (valueSubtitle) {
+                values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+                  id: ids.valueSubtitle,
+                  className: "wds-list-item-subtitle-value",
+                  children: valueSubtitle
+                }, ids.valueSubtitle));
+              }
+              return inverted ? [...values].reverse() : values;
+            })()
+          })]
+        }), control === null ? null : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          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
+        })]
+      })]
+    })
+  });
+};
+function View({
+  children,
+  subtitle,
+  additionalInfo,
+  prompt,
+  disabled,
+  isPartiallyInteractive,
+  controlType = 'non-interactive',
+  controlProps,
+  className = ''
+}) {
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  const isLinkControl = ['navigation'].includes(controlType);
+  const isHrefProvided = isLinkControl && !!controlProps?.href;
+  const renderExtras = () => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [additionalInfo, prompt]
+  });
+  if (isLinkControl && isHrefProvided) {
+    return (
+      /*#__PURE__*/
+      // for link instances of .Navigation, .IconButton, .Button
+      jsxRuntime.jsxs("div", {
+        className: clsx.clsx('wds-list-item-gridWrapper', className),
+        children: [/*#__PURE__*/jsxRuntime.jsx(PrimitiveAnchor.default, {
+          "aria-describedby": describedByIds,
+          href: controlProps?.href,
+          target: controlProps?.target,
+          className: clsx.clsx('wds-list-item-view d-flex flex-row', {
+            'wds-list-item-control': controlType === 'navigation',
+            fullyInteractive: !isPartiallyInteractive
+          }),
+          disabled: disabled,
+          onClick: controlProps?.onClick,
+          children: children
+        }), renderExtras()]
+      })
+    );
+  }
+  if (isPartiallyInteractive || controlType === 'non-interactive') {
+    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'),
+        children: children
+      }), renderExtras()]
+    });
+  }
+  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
+  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.
+  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';
+  return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
+    className: clsx.clsx('wds-list-item-gridWrapper', className),
+    children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+      htmlFor: ids.control,
+      className: clsx.clsx('wds-list-item-view', {
+        clickable: !disabled,
+        fullyInteractive: !isPartiallyInteractive
+      }),
+      children: children
+    }), renderExtras()]
+  });
+}
+ListItem.Image = ListItemImage.Image;
+ListItem.AvatarView = ListItemAvatarView.AvatarView;
+ListItem.AvatarLayout = ListItemAvatarLayout.AvatarLayout;
+ListItem.AdditionalInfo = ListItemAdditionalInfo.AdditionalInfo;
+ListItem.Checkbox = ListItemCheckbox.Checkbox;
+ListItem.Radio = ListItemRadio.Radio;
+ListItem.IconButton = ListItemIconButton.IconButton;
+ListItem.Navigation = ListItemNavigation.Navigation;
+ListItem.Button = ListItemButton.Button;
+ListItem.Switch = ListItemSwitch.Switch;
+ListItem.Prompt = ListItemPrompt.Prompt;
+
+exports.ListItem = ListItem;
+exports.default = ListItem;
+//# sourceMappingURL=ListItem.js.map