@transferwise/components 0.0.0-experimental-de8fd4d → 0.0.0-experimental-59a94f4

package/build/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.wds-list-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
 .wds-list-item-prompt {

package/build/styles/circularButton/CircularButton.css

@@ -6,6 +6,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,

package/build/styles/listItem/ListItem.css

@@ -42,10 +42,10 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -58,10 +58,10 @@
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.wds-list-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
 .wds-list-item-prompt {

package/build/styles/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.wds-list-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
 .wds-list-item-prompt {

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

@@ -13,6 +13,7 @@ export type Props = {
     media?: ReactNode;
     control?: ReactNode;
     prompt?: ReactNode;
+    className?: string;
 };
 export type ListItemContextData = {
     setControlType: (type: ListItemTypes) => void;
@@ -27,7 +28,7 @@ export type ListItemContextData = {
 };
 export declare const ListItemContext: import("react").Context<ListItemContextData>;
 export declare const ListItem: {
-    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
+    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, }: Props): import("react").JSX.Element;
     Image: ({ alt, size, ...props }: import("./ListItemMedia").ListItemImageProps) => import("react").JSX.Element;
     AvatarView: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarViewProps) => import("react").JSX.Element;
     AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;
@@ -35,7 +36,6 @@ export declare const ListItem: {
     Checkbox: (props: import("./ListItemCheckbox").ListItemCheckboxProps) => import("react").JSX.Element;
     IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
     Navigation: ({ onClick }: import("./ListItemNavigation").ListItemNavigationProps) => import("react").JSX.Element;
-    Radio: (props: import("../common/RadioButton/RadioButton").RadioButtonProps) => import("react").JSX.Element;
     Button: ({ priority, ...props }: import("./ListItemButton").ListItemButtonProps) => import("react").JSX.Element;
     Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
     Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAc3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;uIAalB,KAAK;;;;;;;;;;;;CA6GP,CAAC;AAgBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;kJAclB,KAAK;;;;;;;;;;;CA0GP,CAAC;AAeF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/useItemControl.d.ts

@@ -1,12 +1,5 @@
 import { ListItemTypes } from './ListItem';
 export declare function useItemControl(controlType: ListItemTypes): {
-    ids: {
-        label: string;
-        additionalInfo: string;
-        value: string;
-        control: string;
-        prompt: string;
-    };
     baseItemProps: Pick<import("./ListItem").Props, "as" | "disabled" | "inverted">;
 };
 //# sourceMappingURL=useItemControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,aAAa,EAAE,MAAM,YAAY,CAAC;AAEjF,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa;;;;;;;;;EAYxD"}
+{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,aAAa,EAAE,MAAM,YAAY,CAAC;AAEjF,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa;;EAQxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-de8fd4d",
+  "version": "0.0.0-experimental-59a94f4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0",
-    "@transferwise/neptune-css": "14.24.4"
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/circularButton/CircularButton.css

@@ -6,6 +6,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,

package/src/circularButton/CircularButton.less

@@ -7,6 +7,7 @@
   &-primary-default,
   &-secondary-default {
     .np-circular-btn-label {
+      text-align: center;
       color: var(--color-interactive-primary);
       &:not(.disabled, :disabled):hover {
         color: var(--color-interactive-primary-hover);

package/src/circularButton/CircularButton.tests.story.tsx

@@ -0,0 +1,23 @@
+import { Freeze } from '@transferwise/icons';
+
+import { Meta, StoryObj } from '@storybook/react';
+import CircularButton from './CircularButton';
+
+export default {
+  component: CircularButton,
+  title: 'Actions/CircularButton/Tests',
+} satisfies Meta<typeof CircularButton>;
+
+type Story = StoryObj<typeof CircularButton>;
+
+export const CenteredText: Story = {
+  render: () => {
+    return (
+      <div style={{ maxWidth: '100px' }}>
+        <CircularButton priority="primary" type="default" icon={<Freeze />}>
+          Very long text for a circular button that will be centered
+        </CircularButton>
+      </div>
+    );
+  },
+};

package/src/listItem/ListItem.css

@@ -42,10 +42,10 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -58,10 +58,10 @@
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.wds-list-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
 .wds-list-item-prompt {

package/src/listItem/ListItem.less

@@ -45,11 +45,10 @@
     &-spotlight {
         &-active {
             background-color: var(--color-background-neutral);
-
-            &:hover {
+            &:not(.disabled, :disabled):hover {
                 background-color: var(--color-background-neutral-hover);
             }
-            &:active {
+            &:not(.disabled, :disabled):active {
                 background-color: var(--color-background-neutral-active);
             }
         }
@@ -57,11 +56,10 @@
         &-inactive {
             background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
             border: 1px dashed var(--color-border-neutral);
-        
-            &:hover {
+            &:not(.disabled, :disabled):hover {
                 background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
             }
-            &:active {
+            &:not(.disabled, :disabled):active {
                 background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
             }
         }

package/src/listItem/ListItem.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '../test-utils';
+import ListItem from './ListItem';
+
+describe('ListItem', () => {
+  describe('spotlight', () => {
+    it('only fully interactive variant can have spotlight:active', () => {
+      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+    });
+
+    it('only fully interactive variant can have spotlight:inactive', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          spotlight="inactive"
+          control={<ListItem.Switch onClick={() => {}} />}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+    });
+
+    it('non interactive variant can have spotlight', () => {
+      render(<ListItem title="Test Title" spotlight="inactive" />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-non-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+    });
+  });
+});

package/src/listItem/ListItem.story.tsx

@@ -1,7 +1,15 @@
 import ListItem, { Props as ItemProps } from './ListItem';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { FastFlag, MultiCurrency, Plus, Receipt, Savings } from '@transferwise/icons';
+import {
+  Bank,
+  BankTransfer,
+  FastFlag,
+  MultiCurrency,
+  Plus,
+  Receipt,
+  Savings,
+} from '@transferwise/icons';
 
 import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
 import { Flag } from '@wise/art';
@@ -21,7 +29,6 @@ type Story = StoryObj<ItemProps>;
 export const TempPlayground: Story = {
   render: () => {
     const [checked, setChecked] = useState(false);
-    const [radio, setRadio] = useState('option2');
 
     return (
       <div>
@@ -137,42 +144,32 @@ export const TempPlayground: Story = {
             </ListItem.Button>
           }
         />
-        <ListItem
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={
-            <ListItem.Radio
-              name="option1"
-              checked={radio === 'option1'}
-              onChange={() => setRadio('option1')}
-            />
-          }
-        />
-        <ListItem
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={
-            <ListItem.Radio
-              name="option2"
-              checked={radio === 'option2'}
-              onChange={() => setRadio('option2')}
-            />
-          }
-        />
 
         <ListItem
+          media={
+            <ListItem.AvatarView>
+              <Bank />
+            </ListItem.AvatarView>
+          }
+          spotlight="inactive"
           title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          subtitle={lorem5}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
           control={<ListItem.Checkbox indeterminate />}
+          className="m-t-2"
         />
 
         <ListItem
+          media={
+            <ListItem.AvatarLayout
+              orientation="diagonal"
+              avatars={[{ asset: <BankTransfer /> }, { asset: <Bank /> }]}
+            />
+          }
+          spotlight="active"
           title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          subtitle={lorem5}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
           control={
             <ListItem.Switch
               checked={checked}
@@ -181,6 +178,7 @@ export const TempPlayground: Story = {
               }}
             />
           }
+          className="m-t-2 m-b-4"
         />
       </div>
     );

package/src/listItem/ListItem.tsx

@@ -4,7 +4,6 @@ import Body from '../body';
 import { AdditionalInfo } from './ListItemAdditionalInfo';
 import { IconButton } from './ListItemIconButton';
 import { Checkbox } from './ListItemCheckbox';
-import { Radio } from './ListItemRadio';
 import { Navigation } from './ListItemNavigation';
 import { clsx } from 'clsx';
 import { Button } from './ListItemButton';
@@ -34,6 +33,7 @@ export type Props = {
   media?: ReactNode;
   control?: ReactNode;
   prompt?: ReactNode;
+  className?: string;
 };
 
 export type ListItemContextData = {
@@ -65,6 +65,7 @@ export const ListItem = ({
   valueSubtitle,
   control = null,
   disabled,
+  className,
 }: Props) => {
   /*
   const returnType = (): ReactNode => {
@@ -99,81 +100,78 @@ export const ListItem = ({
     additionalInfo: `${idPrefix}_additional-info`,
   };
 
+  // TODO: add partially interactive check from Button and IconButtons
+  // (https://transferwise.atlassian.net/browse/DS-7562)
+  const isFullyInteractive = controlType !== 'non-interactive';
+
   const listItemContext = useMemo(
     () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
     [],
   );
 
-  const content = (
-    <View
-      className={clsx(
-        'wds-list-item',
-        { 'wds-list-item-interactive': controlType !== 'non-interactive' },
-        `wds-list-item-${controlType}`,
-        'd-flex flex-row',
-        { 'align-items-center': !subtitle },
-        {
-          [`wds-list-item-spotlight-${spotlight}`]: !!spotlight,
-        },
-      )}
-      aria-describedby={[ids.additionalInfo].join(' ')}
-    >
-      {media && <div className="wds-list-item-media">{media}</div>}
+  return (
+    <ListItemContext.Provider value={listItemContext}>
+      <View
+        className={clsx(
+          'wds-list-item',
+          { 'wds-list-item-interactive': controlType !== 'non-interactive' },
+          `wds-list-item-${controlType}`,
+          'd-flex flex-row',
+          { 'align-items-center': !subtitle },
+          {
+            [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+          },
+          className,
+        )}
+        aria-describedby={[ids.additionalInfo].join(' ')}
+      >
+        {media && <div className="wds-list-item-media">{media}</div>}
 
-      {/* Title + Subtitle + Values + Additional Info - Group */}
-      <div className="wds-list-item-body">
-        {/* Title + Subtitle + Values - Group */}
-        <div className="d-flex justify-content-between">
-          <span>
-            {/* @ts-expect-error div can have role and aria-lavel props */}
-            <Body
-              type={Typography.BODY_LARGE_BOLD}
-              className="wds-list-item-title"
-              // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-              // so we enable header semantics via `role` and `aria-level` attrs
-              role="heading"
-              aria-level="4"
-            >
-              {title}
-            </Body>
-            <Body className="wds-list-item-subtitle">{subtitle}</Body>
-          </span>
-          {(valueTitle || valueSubtitle) && (
-            <span
-              id={ids.value}
-              className={clsx('wds-list-item-value', 'd-flex align-items-center', {
-                'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
-              })}
-            >
-              {valueTitle && (
-                <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
-                  {valueTitle}
-                </Body>
-              )}
-              {valueSubtitle && (
-                <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
-              )}
+        {/* Title + Subtitle + Values + Additional Info - Group */}
+        <div className="wds-list-item-body">
+          {/* Title + Subtitle + Values - Group */}
+          <div className="d-flex justify-content-between">
+            <span>
+              {/* @ts-expect-error div can have role and aria-lavel props */}
+              <Body
+                type={Typography.BODY_LARGE_BOLD}
+                className="wds-list-item-title"
+                // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
+                // so we enable header semantics via `role` and `aria-level` attrs
+                role="heading"
+                aria-level="4"
+              >
+                {title}
+              </Body>
+              <Body className="wds-list-item-subtitle">{subtitle}</Body>
             </span>
-          )}
-        </div>
+            {(valueTitle || valueSubtitle) && (
+              <span
+                id={ids.value}
+                className={clsx('wds-list-item-value', 'd-flex align-items-center', {
+                  'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
+                })}
+              >
+                {valueTitle && (
+                  <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
+                    {valueTitle}
+                  </Body>
+                )}
+                {valueSubtitle && (
+                  <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
+                )}
+              </span>
+            )}
+          </div>
 
-        {/* Additional Info and Prompt here */}
-        {Boolean(subtitle) && additionalInfo}
-      </div>
-      {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
-      {prompt}
-    </View>
+          {/* Additional Info and Prompt here */}
+          {Boolean(subtitle) && additionalInfo}
+        </div>
+        {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
+        {prompt}
+      </View>
+    </ListItemContext.Provider>
   );
-
-  if (controlType === 'radio' && ids.control) {
-    return (
-      <ListItemContext.Provider value={listItemContext}>
-        <label htmlFor={ids.control}>{content}</label>
-      </ListItemContext.Provider>
-    );
-  }
-
-  return <ListItemContext.Provider value={listItemContext}>{content}</ListItemContext.Provider>;
 };
 
 /* eslint-disable functional/immutable-data */
@@ -184,7 +182,6 @@ ListItem.AdditionalInfo = AdditionalInfo;
 ListItem.Checkbox = Checkbox;
 ListItem.IconButton = IconButton;
 ListItem.Navigation = Navigation;
-ListItem.Radio = Radio;
 ListItem.Button = Button;
 ListItem.Switch = Switch;
 ListItem.Prompt = Prompt;

package/src/listItem/useItemControl.tsx

@@ -2,15 +2,11 @@ import { useContext, useEffect } from 'react';
 import { ListItemContext, ListItemContextData, ListItemTypes } from './ListItem';
 
 export function useItemControl(controlType: ListItemTypes) {
-  const {
-    ids,
-    setControlType,
-    props: baseItemProps,
-  } = useContext<ListItemContextData>(ListItemContext);
+  const { setControlType, props: baseItemProps } = useContext<ListItemContextData>(ListItemContext);
 
   useEffect(() => {
     setControlType(controlType);
   }, [controlType, setControlType]);
 
-  return { ids, baseItemProps };
+  return { baseItemProps };
 }

package/src/main.css

@@ -1402,6 +1402,7 @@
 }
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
@@ -2705,10 +2706,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.wds-list-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-spotlight-active:active {
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
   background-color: var(--color-background-neutral-active);
 }
 .wds-list-item-spotlight-inactive {
@@ -2721,10 +2722,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.wds-list-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.wds-list-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
 .wds-list-item-prompt {

package/build/types/listItem/ListItemRadio.d.ts

@@ -1,3 +0,0 @@
-import { RadioButtonProps } from '../common/RadioButton/RadioButton';
-export declare const Radio: (props: RadioButtonProps) => import("react").JSX.Element;
-//# sourceMappingURL=ListItemRadio.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemRadio.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGlF,eAAO,MAAM,KAAK,GAAa,OAAO,gBAAgB,gCAIrD,CAAC"}

package/src/listItem/ListItemRadio.tsx

@@ -1,8 +0,0 @@
-import RadioButton, { RadioButtonProps } from '../common/RadioButton/RadioButton';
-import { useItemControl } from './useItemControl';
-
-export const Radio = function (props: RadioButtonProps) {
-  const { ids, baseItemProps } = useItemControl('radio');
-
-  return <RadioButton disabled={baseItemProps.disabled} {...props} id={ids.control} />;
-};