@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs

@@ -0,0 +1,21 @@
+import AvatarLayout$1 from '../../avatarLayout/AvatarLayout.mjs';
+import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const AvatarLayout = ({
+  className,
+  size = 48,
+  ...props
+}) => {
+  useListItemMedia(size);
+  return /*#__PURE__*/jsx(AvatarLayout$1, {
+    ...props,
+    size: size,
+    className: clsx('wds-list-item-media-avatar-layout', className)
+  });
+};
+AvatarLayout.displayName = 'ListItem.AvatarLayout';
+
+export { AvatarLayout };
+//# sourceMappingURL=ListItemAvatarLayout.mjs.map

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

@@ -0,0 +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

@@ -0,0 +1,23 @@
+'use strict';
+
+var clsx = require('clsx');
+var AvatarView$1 = require('../../avatarView/AvatarView.js');
+var useListItemMedia = require('../useListItemMedia.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const AvatarView = ({
+  className,
+  size = 48,
+  ...props
+}) => {
+  useListItemMedia.useListItemMedia(size);
+  return /*#__PURE__*/jsxRuntime.jsx(AvatarView$1.default, {
+    ...props,
+    size: size,
+    className: clsx.clsx('wds-list-item-media-avatar-view', className)
+  });
+};
+AvatarView.displayName = 'ListItem.AvatarView';
+
+exports.AvatarView = AvatarView;
+//# sourceMappingURL=ListItemAvatarView.js.map

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

@@ -0,0 +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

@@ -0,0 +1,21 @@
+import { clsx } from 'clsx';
+import AvatarView$1 from '../../avatarView/AvatarView.mjs';
+import { useListItemMedia } from '../useListItemMedia.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const AvatarView = ({
+  className,
+  size = 48,
+  ...props
+}) => {
+  useListItemMedia(size);
+  return /*#__PURE__*/jsx(AvatarView$1, {
+    ...props,
+    size: size,
+    className: clsx('wds-list-item-media-avatar-view', className)
+  });
+};
+AvatarView.displayName = 'ListItem.AvatarView';
+
+export { AvatarView };
+//# sourceMappingURL=ListItemAvatarView.mjs.map

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

@@ -0,0 +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/Button/ListItemButton.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var Button_resolver = require('../../button/Button.resolver.js');
+var useListItemControl = require('../useListItemControl.js');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Button = ({
+  priority = 'secondary-neutral',
+  partiallyInteractive,
+  ...props
+}) => {
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('button', {
+    partiallyInteractive,
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  const commonProps = {
+    ...props,
+    className: clsx.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__*/jsxRuntime.jsx(Button_resolver.default, {
+    "aria-describedby": `${buttonContentId} ${describedByIds}`,
+    ...commonProps
+  });
+};
+Button.displayName = 'ListItem.Button';
+
+exports.Button = Button;
+//# sourceMappingURL=ListItemButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.js","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,qCAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,SAAI,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,cAAA,CAACC,uBAAU,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/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,42 @@
+'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',
+  ...props
+}) {
+  const {
+    partiallyInteractive,
+    ...restProps
+  } = props;
+  const {
+    ids,
+    props: itemProps
+  } = React.useContext(ListItemContext.ListItemContext);
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('icon-button', {
+    partiallyInteractive,
+    ...restProps
+  });
+  const descriptorIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle, ids.additionalInfo, ids.prompt].join(' ');
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton$1.default, {
+    ...restProps,
+    "aria-describedby": descriptorIds,
+    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 ({ priority = 'minimal', ...props }: 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 descriptorIds = [\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    ids.additionalInfo,\n    ids.prompt,\n  ].join(' ');\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      aria-describedby={descriptorIds}\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","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","descriptorIds","inverted","subtitle","title","valueSubtitle","valueTitle","additionalInfo","prompt","join","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAAEC,EAAAA,QAAQ,GAAG,SAAS;EAAE,GAAGC;AAAK,CAA2B,EAAA;EAC7F,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;AAEF,EAAA,MAAMO,aAAa,GAAG,CACpBL,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACQ,QAAQ,GAAGR,GAAG,CAACS,KAAK,EAC7CR,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACS,KAAK,GAAGT,GAAG,CAACQ,QAAQ,EAC7CP,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACU,aAAa,GAAGV,GAAG,CAACW,UAAU,EACvDV,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACW,UAAU,GAAGX,GAAG,CAACU,aAAa,EACvDV,GAAG,CAACY,cAAc,EAClBZ,GAAG,CAACa,MAAM,CACX,CAACC,IAAI,CAAC,GAAG,CAAC;EAEX,oBACEC,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTjB,SAAS;AACb,IAAA,kBAAA,EAAkBO,aAAc;AAChCW,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACpB,oBAAoB,IAAID,KAAK,CAACsB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEpB,GAAG,CAACqB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT1B,IAAAA,QAAQ,EAAEA,QAAS;IACnB2B,QAAQ,EAAEnB,aAAa,CAACmB;AAAS,GAAA,CACjC;AAEN;AAEA5B,UAAU,CAAC6B,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/IconButton/ListItemIconButton.mjs

@@ -0,0 +1,40 @@
+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',
+  ...props
+}) {
+  const {
+    partiallyInteractive,
+    ...restProps
+  } = props;
+  const {
+    ids,
+    props: itemProps
+  } = useContext(ListItemContext);
+  const {
+    baseItemProps
+  } = useListItemControl('icon-button', {
+    partiallyInteractive,
+    ...restProps
+  });
+  const descriptorIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle, ids.additionalInfo, ids.prompt].join(' ');
+  return /*#__PURE__*/jsx(IconButton$1, {
+    ...restProps,
+    "aria-describedby": descriptorIds,
+    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 ({ priority = 'minimal', ...props }: 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 descriptorIds = [\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    ids.additionalInfo,\n    ids.prompt,\n  ].join(' ');\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      aria-describedby={descriptorIds}\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","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","descriptorIds","inverted","subtitle","title","valueSubtitle","valueTitle","additionalInfo","prompt","join","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAAEC,EAAAA,QAAQ,GAAG,SAAS;EAAE,GAAGC;AAAK,CAA2B,EAAA;EAC7F,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;AAEF,EAAA,MAAMO,aAAa,GAAG,CACpBL,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACQ,QAAQ,GAAGR,GAAG,CAACS,KAAK,EAC7CR,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACS,KAAK,GAAGT,GAAG,CAACQ,QAAQ,EAC7CP,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACU,aAAa,GAAGV,GAAG,CAACW,UAAU,EACvDV,SAAS,CAACM,QAAQ,GAAGP,GAAG,CAACW,UAAU,GAAGX,GAAG,CAACU,aAAa,EACvDV,GAAG,CAACY,cAAc,EAClBZ,GAAG,CAACa,MAAM,CACX,CAACC,IAAI,CAAC,GAAG,CAAC;EAEX,oBACEC,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTjB,SAAS;AACb,IAAA,kBAAA,EAAkBO,aAAc;AAChCW,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACpB,oBAAoB,IAAID,KAAK,CAACsB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEpB,GAAG,CAACqB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT1B,IAAAA,QAAQ,EAAEA,QAAS;IACnB2B,QAAQ,EAAEnB,aAAa,CAACmB;AAAS,GAAA,CACjC;AAEN;AAEA5B,UAAU,CAAC6B,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 ? 'graphics-symbol' : '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\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, 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 ? 'graphics-symbol' : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","displayName"],"mappings":";;;;;;;AA0BO,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,GAAG,iBAAiB,GAAG;KAAe;AAEnD,GAAK,CAAC;AAEV;AACAD,KAAK,CAACY,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 ? 'graphics-symbol' : '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\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, 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 ? 'graphics-symbol' : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","displayName"],"mappings":";;;;;AA0BO,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,GAAG,iBAAiB,GAAG;KAAe;AAEnD,GAAK,CAAC;AAEV;AACAD,KAAK,CAACY,WAAW,GAAG,gBAAgB;;;;"}