@transferwise/components 46.144.0 → 46.145.0

package/src/dateLookup/DateLookup.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
-
+import Calendar from '../calendar';
 import {
   Size,
   MonthFormat,
@@ -10,15 +9,10 @@ import {
   type SizeMedium,
   type SizeLarge,
 } from '../common';
-import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
 import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
-import DayCalendar from './dayCalendar';
-import { getStartOfDay } from './getStartOfDay';
-import MonthCalendar from './monthCalendar';
-import YearCalendar from './yearCalendar';
 
 export interface DateLookupProps {
   id?: string;
@@ -40,15 +34,8 @@ export interface DateLookupProps {
 type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
 
 interface DateLookupState {
-  selectedDate: Date | null;
   originalDate: Date | null;
-  min: Date | null;
-  max: Date | null;
-  viewMonth: number;
-  viewYear: number;
   open: boolean;
-  mode: 'day' | 'month' | 'year';
-  isMobile: boolean;
 }
 
 class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
@@ -68,64 +55,25 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   } satisfies Partial<DateLookupPropsWithInputAttributes>;
 
   element = createRef<HTMLDivElement>();
-  dropdown = createRef<HTMLDivElement>();
 
   constructor(props: DateLookup['props']) {
     super(props);
-    const dateView = returnDateView(props.value, props.min, props.max);
     this.state = {
-      selectedDate: getStartOfDay(props.value),
       originalDate: null,
-      min: getStartOfDay(props.min),
-      max: getStartOfDay(props.max),
-      viewMonth: dateView.getMonth(),
-      viewYear: dateView.getFullYear(),
       open: false,
-      mode: 'day',
-      isMobile: false,
     };
   }
 
-  static getDerivedStateFromProps(props: DateLookup['props'], state: DateLookupState) {
-    const propsSelected = getStartOfDay(props.value);
-    const propsMin = getStartOfDay(props.min);
-    const propsMax = getStartOfDay(props.max);
-    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();
-    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();
-    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();
-    if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {
-      const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;
-      const min = hasMinChanged ? propsMin : state.min;
-      const max = hasMaxChanged ? propsMax : state.max;
-      if (selectedDate && !isWithinRange(selectedDate, min, max)) {
-        props.onChange(moveToWithinRange(selectedDate, min, max));
-        return null;
-      }
-      const viewDateThatIsWithinRange: Date = returnDateView(selectedDate, min, max);
-      const viewMonth = viewDateThatIsWithinRange.getMonth();
-      const viewYear = viewDateThatIsWithinRange.getFullYear();
-      return { selectedDate, min, max, viewMonth, viewYear };
-    }
-    return null;
-  }
-
   componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
-    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
-    this.setState({ isMobile: mediaQuery.matches });
-  }
-
-  componentWillUnmount() {
-    // Prevents memory leak by cleaning state.
-    this.setState = () => {};
   }
 
   open = () => {
     const { onFocus } = this.props;
 
-    this.setState({ open: true, mode: 'day' });
+    this.setState({ open: true });
     if (onFocus) {
       onFocus();
     }
@@ -151,36 +99,13 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     const { open, originalDate } = this.state;
     switch (event.key) {
       case 'ArrowLeft':
-        if (open) {
-          this.adjustDate(-1, -1, -1);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowUp':
-        if (open) {
-          this.adjustDate(-7, -4, -4);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowRight':
-        if (open) {
-          this.adjustDate(1, 1, 1);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowDown':
-        if (open) {
-          this.adjustDate(7, 4, 4);
-        } else {
+        if (!open) {
           this.open();
+          event.preventDefault();
         }
-        event.preventDefault();
         break;
       case 'Escape':
         if (originalDate !== null) {
@@ -194,27 +119,6 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
-    const { selectedDate, min, max, mode, originalDate } = this.state;
-    if (originalDate === null) {
-      this.setState({ originalDate: selectedDate });
-    }
-    let date: Date | null;
-    if (selectedDate) {
-      date = new Date(
-        mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),
-        mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),
-        mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),
-      );
-    } else {
-      date = getStartOfDay(new Date());
-    }
-    date &&= moveToWithinRange(date, min, max);
-    if (date?.getTime() !== selectedDate?.getTime()) {
-      this.props.onChange(date);
-    }
-  };
-
   focusOn = (preferredElement: string, fallbackElement?: string) => {
     const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;
     if (element) {
@@ -224,71 +128,37 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  switchMode = (mode: 'day' | 'month' | 'year') => {
-    this.setState({ mode }, () => {
-      this.focusOn('.active', '.today');
-    });
-  };
-
-  switchToDays = () => this.switchMode('day');
-
-  switchToMonths = () => this.switchMode('month');
-
-  switchToYears = () => this.switchMode('year');
-
-  handleSelectedDateUpdate = (selectedDate: Date) => {
-    this.setState({ selectedDate }, () => {
-      this.props.onChange(selectedDate);
-      this.close();
-      this.focusOn('.btn');
-    });
+  handleDateChange = (date: Date | null) => {
+    this.setState(
+      (state) => {
+        const originalDate = state.originalDate ?? this.props.value;
+        return { originalDate };
+      },
+      () => {
+        this.props.onChange(date);
+      },
+    );
   };
 
-  handleViewDateUpdate = ({ month = this.state.viewMonth, year = this.state.viewYear }) => {
-    this.setState({ viewMonth: month, viewYear: year });
+  handleDateSelect = (date: Date) => {
+    this.props.onChange(date);
+    this.close();
+    this.focusOn('.btn');
   };
 
   getCalendar = () => {
-    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;
-    const { placeholder, monthFormat } = this.props;
+    const { value, min, max, monthFormat, placeholder } = this.props;
     return (
-      <div className={clsx({ 'p-a-1': !isMobile })}>
-        {mode === 'day' && (
-          <DayCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewMonth={viewMonth}
-            viewYear={viewYear}
-            monthFormat={monthFormat}
-            onSelect={this.handleSelectedDateUpdate}
-            onLabelClick={this.switchToYears}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
-        {mode === 'month' && (
-          <MonthCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewYear={viewYear}
-            placeholder={placeholder}
-            onSelect={this.switchToDays}
-            onLabelClick={this.switchToYears}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
-        {mode === 'year' && (
-          <YearCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewYear={viewYear}
-            placeholder={placeholder}
-            onSelect={this.switchToMonths}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
+      <div className="p-a-1">
+        <Calendar
+          value={value}
+          min={min}
+          max={max}
+          monthFormat={monthFormat}
+          placeholder={placeholder}
+          onChange={this.handleDateChange}
+          onSelect={this.handleDateSelect}
+        />
       </div>
     );
   };
@@ -299,7 +169,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   };
 
   render() {
-    const { selectedDate, open } = this.state;
+    const { open } = this.state;
 
     const {
       inputAttributes,
@@ -329,7 +199,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
           <DateTrigger
             id={id}
             ariaLabelledBy={ariaLabelledBy}
-            selectedDate={selectedDate}
+            selectedDate={value}
             size={size}
             placeholder={placeholder}
             label={label}

package/src/divider/Divider.story.tsx

@@ -24,7 +24,7 @@ const hideControls = (args: string[]) => {
  * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
  * levels allow customization for different visual separation needs.
  *
- * For more details, please refer to the [design documentation](https://wise.design/components/divider).
+ * For more details, please refer to the [design documentation](https://docs.wise.design/components/divider).
  */
 const meta: Meta<typeof Divider> = {
   component: Divider,
@@ -89,7 +89,7 @@ export const Playground: Story = {
 /**
  * There are three different types of divider – `section`, `subsection`, and `content` –
  * each designed to visually separate or group content. <br />
- * [Design documentation](https://wise.design/components/divider)
+ * [Design documentation](https://docs.wise.design/components/divider)
  */
 export const Level: Story = {
   argTypes: {

package/src/header/Header.accessibility.docs.mdx

@@ -12,7 +12,7 @@ Given the `Header` is a key component for structuring content and conveying hier
 <ListItem
   title="Design guidance"
   subtitle="Before you start, familiarise yourself with the provided guidance."
-  control={<ListItem.Navigation href="https://wise.design/components/section-header" />}
+  control={<ListItem.Navigation href="https://docs.wise.design/components/section-header" />}
   media={
     <ListItem.AvatarView>
       <Bulb />

package/src/header/Header.story.tsx

@@ -15,7 +15,7 @@ const hideControls = (args: string[]) =>
 
 /**
  * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
- * For more details, refer to the [design documentation](https://wise.design/components/section-header).
+ * For more details, refer to the [design documentation](https://docs.wise.design/components/section-header).
  */
 const meta: Meta<typeof Header> = {
   component: Header,

package/src/iconButton/IconButton.story.tsx

@@ -17,7 +17,7 @@ import IconButton, { Props } from './IconButton';
 import SentimentSurface from '../sentimentSurface';
 
 /**
- * **Design guidance**: <a href="https://wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>
  */
 export default {
   title: 'Actions/IconButton',
@@ -64,7 +64,7 @@ export const Playground: Story = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * <a href="https://wise.design/components/icon-button#priorities" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#priorities" target="_blank">Design documentation</a>
  */
 export const Priority: Story = {
   args: {
@@ -109,7 +109,7 @@ export const Priority: Story = {
 
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * <a href="https://wise.design/components/icon-button#types" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#types" target="_blank">Design documentation</a>
  */
 export const Type: Story = {
   args: {
@@ -148,7 +148,7 @@ export const Type: Story = {
 
 /**
  * IconButton is available in 7 sizes: 16, 24, 32, 40, 48, 56, 72. <br />
- * <a href="https://wise.design/components/icon-button#sizes" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#sizes" target="_blank">Design documentation</a>
  */
 export const Size: Story = {
   args: {

package/src/index.ts

@@ -29,6 +29,7 @@ export type {
 export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
+export type { CalendarProps } from './calendar';
 export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
@@ -163,6 +164,7 @@ export { default as CriticalCommsBanner } from './criticalBanner';
 export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
+export { default as Calendar } from './calendar';
 export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';

package/src/legacylistItem/LegacyListItem.tsx

@@ -18,7 +18,7 @@ export type LegacyListItemProps = {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const LegacyListItem: FC<LegacyListItemProps> = ({

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

@@ -14,7 +14,7 @@ import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
 /**
  * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
  */
 export default {
   component: ListItem.AdditionalInfo,

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

@@ -58,7 +58,7 @@ export const Playground: Story = {
 
 /**
  * AvatarLayout supports two orientations: horizontal (default) and diagonal. <br />
- * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
+ * Please refer to the [design documentation](https://docs.wise.design/components/avatar#double) for more details.
  */
 export const Orientations: Story = {
   argTypes: disableControls()(['orientation']),

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -12,7 +12,7 @@ export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'intera
  * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
  * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item#avatar) for details.
  */
 export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
   useListItemMedia(size);

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

@@ -134,7 +134,7 @@ export const Playground: Story = {
 
 /**
  * AvatarView can display different types of content including icons, profile images, and initials. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
  */
 export const ContentTypes: Story = {
   args: {
@@ -208,7 +208,7 @@ export const ContentTypes: Story = {
 
 /**
  * AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
- * Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
  */
 export const Sizes: Story = {
   parameters: {
@@ -242,7 +242,7 @@ export const Sizes: Story = {
 
 /**
  * AvatarView supports different types of badges for additional context and information. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
  */
 export const Badges: Story = {
   args: {

package/src/listItem/AvatarView/ListItemAvatarView.tsx

@@ -12,7 +12,7 @@ export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactiv
  * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only
  * a subset of its sizes, in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item#avatar) for details.
  */
 export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
   useListItemMedia(size);

package/src/listItem/Button/ListItemButton.story.tsx

@@ -184,7 +184,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
  * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
  * which allows for a single instance of a link or an inline button.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#interaction) for details.
  */
 export const Interactivity: StoryObj<PreviewStoryArgs> = {
   args: {
@@ -253,7 +253,7 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
+ * [Design documentation](https://docs.wise.design/components/button#types)
  */
 export const Sentiment: StoryObj<PreviewStoryArgs> = {
   args: {
@@ -318,7 +318,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
+ * [Design documentation](https://docs.wise.design/components/button#priorities)
  */
 export const Priority: StoryObj<PreviewStoryArgs> = {
   args: {

package/src/listItem/Button/ListItemButton.tsx

@@ -22,7 +22,7 @@ export type ListItemButtonProps = Omit<
  * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
  * a subset of its features in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---button) for details.
  */
 export const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(
   (

package/src/listItem/Checkbox/ListItemCheckbox.tsx

@@ -13,7 +13,7 @@ export type ListItemCheckboxProps = Pick<
  * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),
  * but offers only a subset of its features in line with the ListItem's constraints. <br />
  *
- * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---checkbox) for details.
  */
 export const Checkbox = function (props: ListItemCheckboxProps) {
   const { baseItemProps } = useListItemControl('checkbox', { ...props });

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -22,7 +22,7 @@ const hideControls = disableControls([
 /**
  * Use IconButton to provide compact action controls within a ListItem context using iconography.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item) for more details.
  */
 const meta: Meta<ListItemIconButtonProps> = {
   component: ListItem.IconButton,
@@ -142,7 +142,7 @@ export const AccessibleName: Story = {
  * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
  * which allows for a single instance of a link or an inline button.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#interaction) for details.
  */
 export const Interactivity: Story = {
   args: {
@@ -177,7 +177,7 @@ export const Interactivity: Story = {
 /**
  * There are two different types of icon button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/icon-button#types)
+ * [Design documentation](https://docs.wise.design/components/icon-button#types)
  */
 export const Sentiment: Story = {
   argTypes: hideControls(['sentiment', 'priority']),
@@ -216,7 +216,7 @@ export const Sentiment: Story = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/icon-button#priorities)
+ * [Design documentation](https://docs.wise.design/components/icon-button#priorities)
  */
 export const Priority: Story = {
   argTypes: hideControls(['sentiment', 'priority']),

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -19,7 +19,7 @@ export type ListItemIconButtonProps = Pick<
  * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only
  * a subset of its features in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---icon-button) for details.
  */
 export const IconButton = function ({
   priority = 'minimal',

package/src/listItem/Image/ListItemImage.tsx

@@ -23,7 +23,7 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
  * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only
  * a subset of its props, in line with the ListItem's constraints.
  *
- * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
+ * > **NB**: This component is [not intended for use with illustrations](https://docs.wise.design/foundations/illustration#scale).
  */
 export const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {
   useListItemMedia(size);

package/src/listItem/ListItem.tsx

@@ -106,7 +106,7 @@ export type ListItemProps = {
 };
 
 /**
- * @see [Design documentation](https://wise.design/components/list-item)
+ * @see [Design documentation](https://docs.wise.design/components/list-item)
  * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
  */
 export const ListItem = ({

package/src/listItem/Navigation/ListItemNavigation.tsx

@@ -13,7 +13,7 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
  * step in a flow. It offers only a subset of features of the HTML element in line with the
  * ListItem's constraints.<br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.
  */
 export const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, ...props });

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -12,7 +12,7 @@ export type ListItemPromptProps = Pick<
  * This component allows for rendering an Inline Prompt. <br />
  * In the future it will be a thin wrapper around a standalone component.<br />
  *
- * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item#prompt) for details.
  */
 export const Prompt = ({
   sentiment = Sentiment.NEUTRAL,

package/src/listItem/Radio/ListItemRadio.tsx

@@ -13,7 +13,7 @@ export type ListItemRadioProps = Omit<
  * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
  * a subset of its features in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---button) for details.
  */
 export const Radio = function (props: ListItemRadioProps) {
   const { baseItemProps } = useListItemControl('radio', { ...props });

package/src/listItem/Switch/ListItemSwitch.tsx

@@ -13,7 +13,7 @@ export type ListItemSwitchProps = Omit<
  * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),
  * but offers only a subset of its features in line with the ListItem's constraints. <br />
  *
- * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---switch) for details.
  */
 export const Switch = function (props: ListItemSwitchProps) {
   const { baseItemProps } = useListItemControl('switch', { ...props });

package/src/listItem/_stories/ListItem.disabled.story.tsx

@@ -42,7 +42,7 @@ const disabledPromptMessage = (
 );
 
 /**
- * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
  */
 export default {
   component: ListItem,