@transferwise/components 0.0.0-experimental-a12c97e → 0.0.0-experimental-302d967

package/src/main.css

@@ -454,8 +454,7 @@
   right: 0;
 }
 .np-avatar-view .np-avatar-view-content {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-interactive-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -463,7 +462,6 @@
 .np-avatar-view-interactive .np-circle {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
@@ -2642,21 +2640,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" ". info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -2666,17 +2664,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" ". info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body" "media info";
+    grid-template-areas: "media body" ". info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media prompt";
+    grid-template-areas: "media body" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -2689,12 +2687,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -2730,11 +2728,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -2775,6 +2776,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     margin-bottom: 16px;
     margin-bottom: var(--size-16);
   }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media .wds-list-item-media-image {
+    height: auto;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;
@@ -2858,7 +2862,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 297px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -3005,8 +3009,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -3040,6 +3044,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -3058,68 +3068,45 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
+  display: flex;
+  align-items: center;
+}
+.wds-list-item-media-image-wrapper {
+  width: var(--wds-list-item-media-size);
+  height: var(--wds-list-item-media-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .wds-list-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 .wds-list-item-body {
   grid-area: body;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3130,11 +3117,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
-.wds-list-item-title,
-.wds-list-item-title-value {
+.wds-list-item-title {
   color: #37517e;
   color: var(--color-content-primary);
 }
+.wds-list-item-value {
+  text-align: right;
+}
+.wds-list-item-body-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .wds-list-item-additional-info {
   grid-area: info;
   color: #768e9c;
@@ -3142,12 +3136,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
 }
-.wds-list-item-value {
-  align-items: end;
-  text-align: right;
-}
 .wds-list-item-control-wrapper {
   grid-area: control;
+  align-content: center;
+}
+.wds-list-item-navigation .tw-icon-chevron-right {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
 }
 .wds-list-item-control {
   flex: 0 0 auto;
@@ -3163,12 +3158,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
@@ -3181,6 +3170,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
 }
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
@@ -3193,34 +3184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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 .wds-list-item-spotlight__border {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.wds-list-item .wds-list-item-spotlight__border rect {
-  --wds-list-item-spotlight-borderWidth: 1px;
-  --wds-list-item-spotlight-borderWidthOffset: 0.5px;
-  --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
-  fill: none;
-  stroke: rgba(0,0,0,0.10196);
-  stroke: var(--color-border-neutral);
-  width: calc(100% - 1px);
-  width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-  height: calc(100% - 1px);
-  height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-  x: 0.5px;
-  x: var(--wds-list-item-spotlight-borderWidthOffset);
-  y: 0.5px;
-  y: var(--wds-list-item-spotlight-borderWidthOffset);
-  rx: calc(16px - 0.5px);
-  rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-  ry: calc(16px - 0.5px);
-  ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-  stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
-  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
-}
 .wds-list-item-prompt {
   grid-area: prompt;
   display: inline-flex;

package/src/switch/Switch.tsx

@@ -20,7 +20,7 @@ export type SwitchProps = CommonProps & {
   /** ID to apply to the switch container */
   id?: string;
   /** Function called when the switch is toggled */
-  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;
+  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
 };
 
 const Switch = (props: SwitchProps) => {

package/build/types/listItem/_stories/helpers.d.ts

@@ -1,27 +0,0 @@
-import { StoryObj, type Decorator } from '@storybook/react-webpack5';
-import type { Props as ItemProps } from '../ListItem';
-type Story = StoryObj<ItemProps>;
-/**
- * Recent storybook versions render the full source including all story parameters which
- * creates noise, this simple workaround only shows the render function.
- * This is a workaround for the issue.
- * @see https://github.com/storybookjs/storybook/issues/22281
- */
-export declare const storySourceWithoutNoise: (config: Story) => Story;
-/**
- * In order to make preview controls work correctly, we have to refresh the render
- * by swapping the `key`. This is a workaround for the Storybook's limitation.
- */
-export declare const withoutKey: Decorator;
-/**
- * Not all stories need access to all controls as it causes unnecessary UI noise.
- */
-export declare const disableControls: (hiddenByDefault?: string[]) => (hiddenForStory?: string[]) => {
-    [k: string]: {
-        table: {
-            disable: boolean;
-        };
-    };
-};
-export {};
-//# sourceMappingURL=helpers.d.ts.map

package/build/types/listItem/_stories/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEtD,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEjC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAExB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}

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

@@ -1,209 +0,0 @@
-import { useState } from 'react';
-import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { action } from 'storybook/actions';
-import { InfoCircle, Documents } from '@transferwise/icons';
-import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
-import Modal from '../../modal';
-import Link from '../../link';
-import Popover from '../../popover';
-import { SnackbarConsumer, type SnackbarContextType } from '../../snackbar/SnackbarContext';
-import SnackbarProvider from '../../snackbar/SnackbarProvider';
-import Tooltip from '../../tooltip';
-import { Position } from '../../common';
-import { ListItem, type Props as ItemProps } from '../ListItem';
-import { storySourceWithoutNoise } from './helpers';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-  SB_LIST_ITEM_PROMPTS as PROMPTS,
-} from './subcomponents';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem/common scenarios',
-  tags: ['autodocs'],
-  args: {
-    title: lorem5,
-    subtitle: lorem10,
-    media: MEDIA.image,
-    additionalInfo: INFO.nonInteractive,
-    prompt: PROMPTS.interactive,
-    control: CONTROLS.button,
-  },
-  parameters: {
-    docs: {
-      toc: true,
-      page: () => (
-        <>
-          <Title>Common scenarios</Title>
-          <Subtitle />
-          <Description />
-          <Stories />
-        </>
-      ),
-    },
-  },
-} satisfies Meta<ItemProps>;
-type Story = StoryObj<ItemProps>;
-
-/**
- * Aside from using the main control for triggering a [Modal](?path=/docs/dialogs-modal--docs),
- * it's also possible to toggle it via inline-button as part of the `<ListItem.AdditionalInfo>`
- * or `<ListItem.Prompt>`.
- */
-export const WithModals: Story = storySourceWithoutNoise({
-  parameters: {
-    controls: { disable: true },
-  },
-  render: function WithModals(listItemProps) {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-
-    const handleOpening = () => {
-      setIsModalOpen(true);
-      action('Modal opening')();
-    };
-    const handleClosing = () => {
-      setIsModalOpen(false);
-      action('Modal closing')();
-    };
-
-    return (
-      <>
-        <ListItem
-          {...listItemProps}
-          control={
-            <ListItem.Button partiallyInteractive onClick={handleOpening}>
-              Open modal
-            </ListItem.Button>
-          }
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              action={{ label: 'button opening a modal', onClick: handleOpening }}
-            >
-              This is additional information that contains a
-            </ListItem.AdditionalInfo>
-          }
-          prompt={
-            <ListItem.Prompt sentiment="positive">
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-              This prompt also has a <Link onClick={handleOpening}>
-                button that opens a modal
-              </Link>{' '}
-              for your convenience.
-            </ListItem.Prompt>
-          }
-        />
-        <Modal body={lorem100} open={isModalOpen} onClose={handleClosing} />
-      </>
-    );
-  },
-});
-
-/**
- * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
- */
-export const WithPopover: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render: (listItemProps) => {
-    return (
-      <ListItem
-        {...listItemProps}
-        control={
-          <Popover preferredPlacement={Position.BOTTOM} title={lorem5} content={lorem20}>
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          </Popover>
-        }
-        prompt={PROMPTS.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
- */
-export const WithTooltip: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
-  render: (listItemProps) => {
-    return (
-      <ListItem
-        {...listItemProps}
-        control={
-          <Tooltip position={Position.BOTTOM} label={lorem10}>
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          </Tooltip>
-        }
-        prompt={PROMPTS.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * ListItem is often used as a simple copy and paste button augmented with a [Snackbar](?path=/docs/dialogs-snackbar--docs). <br />
- *
- * **NB** The snippet below uses a simplified example implementation of a clipboard handler,
- * which may not be suitable or sufficient for your needs.
- */
-export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
-  parameters: {
-    controls: { disable: true },
-  },
-  render: function CopyAndPaste() {
-    const title = 'Artie Choke';
-    const subtitle = 'Account holder';
-
-    const handleCopy = async (createSnackbar: SnackbarContextType['createSnackbar']) =>
-      navigator.clipboard
-        .writeText(`${subtitle}: ${title}`)
-        .catch((err) => {
-          console.error('Failed to copy text: ', err);
-        })
-        .then(() => {
-          createSnackbar({
-            text: `${subtitle} copied to clipboard.`,
-          });
-        });
-
-    return (
-      <ListItem
-        title={title}
-        subtitle={subtitle}
-        inverted
-        control={
-          <SnackbarProvider>
-            <SnackbarConsumer>
-              {({ createSnackbar }) => {
-                return (
-                  <ListItem.IconButton
-                    partiallyInteractive
-                    onClick={async () => handleCopy(createSnackbar)}
-                  >
-                    <Documents />
-                  </ListItem.IconButton>
-                );
-              }}
-            </SnackbarConsumer>
-          </SnackbarProvider>
-        }
-        media={
-          <ListItem.AvatarView
-            imgSrc="../avatar-square-dude.webp"
-            profileName="John Smith"
-            size={48}
-          />
-        }
-      />
-    );
-  },
-});

package/src/listItem/_stories/helpers.tsx

@@ -1,53 +0,0 @@
-import { StoryObj, type Decorator } from '@storybook/react-webpack5';
-import type { Props as ItemProps } from '../ListItem';
-
-type Story = StoryObj<ItemProps>;
-
-/**
- * Recent storybook versions render the full source including all story parameters which
- * creates noise, this simple workaround only shows the render function.
- * This is a workaround for the issue.
- * @see https://github.com/storybookjs/storybook/issues/22281
- */
-export const storySourceWithoutNoise = (config: Story): Story => {
-  const newConfig: Story = {
-    ...config,
-    parameters: {
-      ...config.parameters,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      docs: {
-        ...config.parameters?.docs,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        source: {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          ...config.parameters?.docs?.source,
-          type: 'code',
-          transform: (code: string) =>
-            code
-              // eslint-disable-next-line regexp/no-super-linear-backtracking
-              .replace(/storySourceWithoutNoise\(\{.+render\s?:\s+(.*)\}\)$/gms, '$1'),
-        },
-      },
-    },
-  };
-
-  return newConfig;
-};
-
-/**
- * In order to make preview controls work correctly, we have to refresh the render
- * by swapping the `key`. This is a workaround for the Storybook's limitation.
- */
-export const withoutKey: Decorator = (Story, { args }) => (
-  <Story key={args?.disabled ? 'disabled' : 'enabled'} />
-);
-
-/**
- * Not all stories need access to all controls as it causes unnecessary UI noise.
- */
-export const disableControls =
-  (hiddenByDefault: string[] = []) =>
-  (hiddenForStory: string[] = []) => {
-    const hiddenControls = hiddenByDefault.concat(hiddenForStory);
-    return Object.fromEntries(hiddenControls.map((item) => [item, { table: { disable: true } }]));
-  };