@transferwise/components 0.0.0-experimental-131773e → 0.0.0-experimental-1bec623

package/build/listItem/Button/ListItemButton.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var clsx = require('clsx');
-var useListItemControl = require('../useListItemControl.js');
 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');
 

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useListItemControl } from '../useListItemControl';\nimport { useContext } from 'react';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\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;;;;"}
+{"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

@@ -1,7 +1,7 @@
-import { clsx } from 'clsx';
-import { useListItemControl } from '../useListItemControl.mjs';
 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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useListItemControl } from '../useListItemControl';\nimport { useContext } from 'react';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\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;;;;"}
+{"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/ListItem.js

@@ -145,7 +145,7 @@ const ListItem = ({
       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-${spotlight}`]: isFullyInteractive && !!spotlight,
+        [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
         disabled
       }, className),
       id: id,

package/build/listItem/ListItem.js.map

@@ -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-${spotlight}`]: 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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"}
+{"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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"}

package/build/listItem/ListItem.mjs

@@ -141,7 +141,7 @@ const ListItem = ({
       className: clsx('wds-list-item', `wds-list-item-${controlType}`, getFeatureClassName(), {
         'wds-list-item-interactive': isFullyInteractive,
         'wds-list-item-partially-interactive': isPartiallyInteractive,
-        [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+        [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
         disabled
       }, className),
       id: id,

package/build/listItem/ListItem.mjs.map

@@ -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-${spotlight}`]: 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,wBAAA,EAA2BlB,SAAS,CAAA,CAAE,GAAGqB,kBAAkB,IAAI,CAAC,CAACrB,SAAS;AAC3EI,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;;;;"}
+{"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":"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"}

package/build/main.css

@@ -3007,6 +3007,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding: var(--size-12);
   container-type: inline-size;
 }
+.wds-list-item + .wds-list-item-spotlight,
+.wds-list-item-spotlight + .wds-list-item {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .wds-list-item:focus-within {
   z-index: 1;
 }

package/build/styles/listItem/ListItem.css

@@ -372,6 +372,11 @@
   padding: var(--size-12);
   container-type: inline-size;
 }
+.wds-list-item + .wds-list-item-spotlight,
+.wds-list-item-spotlight + .wds-list-item {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .wds-list-item:focus-within {
   z-index: 1;
 }

package/build/styles/main.css

@@ -3007,6 +3007,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding: var(--size-12);
   container-type: inline-size;
 }
+.wds-list-item + .wds-list-item-spotlight,
+.wds-list-item-spotlight + .wds-list-item {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .wds-list-item:focus-within {
   z-index: 1;
 }

package/build/types/listItem/Button/ListItemButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Button/ListItemButton.tsx"],"names":[],"mappings":"AAGA,OAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGrF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CACpD,GAAG;IACF;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;mDAIhB,mBAAmB;;CAyBrB,CAAC"}
+{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Button/ListItemButton.tsx"],"names":[],"mappings":"AAEA,OAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIrF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CACpD,GAAG;IACF;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;mDAIhB,mBAAmB;;CAyBrB,CAAC"}

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQ5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MP,CAAC;AA0GF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQ5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6MP,CAAC;AA0GF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-131773e",
+  "version": "0.0.0-experimental-1bec623",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '../../test-utils';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+describe('ListItem.AdditionalInfo', () => {
+  const renderWithInfo = (info: ListItemProps['additionalInfo']) =>
+    render(<ListItem title="Test title" subtitle="Test subtitle" additionalInfo={info} />);
+
+  it('renders children content', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo>Additional information content</ListItem.AdditionalInfo>,
+    );
+    expect(screen.getByText('Additional information content')).toBeInTheDocument();
+  });
+
+  it('renders action button when onClick provided', () => {
+    const handleActionClick = jest.fn();
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', onClick: handleActionClick }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Learn more' })).toBeInTheDocument();
+  });
+
+  it('renders action link with href when provided', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', href: '/learn' }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    const actionLink = screen.getByRole('link', { name: 'Learn more' });
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('href', '/learn');
+  });
+
+  it('renders action link with target when provided', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', href: '/learn', target: '_blank' }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    const actionLink = screen.getByRole('link', { name: 'Learn more (opens in new tab)' });
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('does not render action when not provided', () => {
+    renderWithInfo(<ListItem.AdditionalInfo>Additional info only</ListItem.AdditionalInfo>);
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx

@@ -0,0 +1,59 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+mockMatchMedia();
+
+const avatars = [
+  { imgSrc: 'avatar1.jpg', profileName: 'User 1' },
+  { imgSrc: 'avatar2.jpg', profileName: 'User 2' },
+];
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title="Test Title" media={media} />);
+
+describe('ListItem.AvatarLayout', () => {
+  it('applies custom className alongside default class', () => {
+    renderWithMedia(
+      <ListItem.AvatarLayout
+        className="custom-class"
+        role="group"
+        aria-label="Custom avatar group"
+        avatars={avatars}
+      />,
+    );
+
+    expect(screen.getByRole('group', { name: 'Custom avatar group' })).toHaveClass('custom-class');
+  });
+
+  it('renders both avatars', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={avatars} />);
+
+    const images = screen.getAllByRole('presentation');
+    expect(images).toHaveLength(avatars.length);
+    expect(images[0]).toHaveAttribute('src', avatars[0].imgSrc);
+    expect(images[1]).toHaveAttribute('src', avatars[1].imgSrc);
+  });
+
+  it('renders with single avatar', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={[avatars[0]]} />);
+    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatars[0].imgSrc);
+  });
+
+  it('handles empty avatars array', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={[]} />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('supports accessibility props', () => {
+    renderWithMedia(<ListItem.AvatarLayout aria-label="User avatars" avatars={avatars} />);
+    expect(screen.getByLabelText('User avatars')).toBeInTheDocument();
+  });
+
+  it('passes through role', () => {
+    renderWithMedia(
+      <ListItem.AvatarLayout role="group" aria-label="Avatar group" avatars={avatars} />,
+    );
+
+    expect(screen.getByRole('group', { name: 'Avatar group' })).toBeInTheDocument();
+  });
+});

package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx

@@ -0,0 +1,75 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+mockMatchMedia();
+
+const baseProps = {
+  title: 'Test Title',
+};
+
+const avatarProps = {
+  imgSrc: 'avatar.jpg',
+  profileName: 'User Avatar',
+};
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title={baseProps.title} media={media} />);
+
+describe('ListItem.AvatarView', () => {
+  it('applies custom className alongside default class', () => {
+    const { container } = renderWithMedia(
+      <ListItem.AvatarView
+        className="custom-class"
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+      />,
+    );
+
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+
+  it('renders avatar with correct image src', () => {
+    renderWithMedia(
+      <ListItem.AvatarView imgSrc={avatarProps.imgSrc} profileName={avatarProps.profileName} />,
+    );
+
+    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatarProps.imgSrc);
+  });
+
+  it('renders without image when no imgSrc provided', () => {
+    renderWithMedia(<ListItem.AvatarView profileName={avatarProps.profileName} />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('supports accessibility props', () => {
+    renderWithMedia(
+      <ListItem.AvatarView
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+        aria-label="Profile picture"
+      />,
+    );
+
+    expect(screen.getByLabelText('Profile picture')).toBeInTheDocument();
+  });
+
+  it('passes through role attribute', () => {
+    renderWithMedia(
+      <ListItem.AvatarView
+        imgSrc={avatarProps.imgSrc}
+        profileName={avatarProps.profileName}
+        role="button"
+        aria-label="Profile button"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Profile button' })).toBeInTheDocument();
+  });
+
+  it('renders initials when no image provided', () => {
+    const johnDoeProfile = 'John Doe';
+    renderWithMedia(<ListItem.AvatarView profileName={johnDoeProfile} />);
+
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+});

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -212,7 +212,7 @@ export const Sizes: Story = {
   },
   render: (args) => {
     return (
-      <ol>
+      <ol className="list-unstyled">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -248,7 +248,7 @@ export const Notification: Story = {
   },
   render: (args) => {
     return (
-      <ol>
+      <ol className="list-unstyled">
         {SIZES.map((size) => (
           <ListItem
             key={size}

package/src/listItem/Button/ListItemButton.tsx

@@ -1,7 +1,7 @@
-import { clsx } from 'clsx';
-import { useListItemControl } from '../useListItemControl';
 import { useContext } from 'react';
+import { clsx } from 'clsx';
 import ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';
+import { useListItemControl } from '../useListItemControl';
 import { ListItemContext } from '../ListItemContext';
 
 export type ListItemButtonProps = Omit<