@transferwise/components 0.0.0-experimental-fb28e59 → 0.0.0-experimental-960e3a0

package/build/types/item/ItemMedia.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemMedia.d.ts","sourceRoot":"","sources":["../../../src/item/ItemMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAA+B,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAwB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGlE,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAE3F,eAAO,MAAM,UAAU,kCAAwC,mBAAmB,gCAQjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAE/F,eAAO,MAAM,YAAY,kCAAwC,qBAAqB,gCAQrF,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,GAChF,QAAQ,GAAG;IACT,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,KAAK,4BAAuC,cAAc,gCAYtE,CAAC"}

package/build/types/item/ItemNavigation.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps } from '../button/Button.types';
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-export declare const Navigation: ({ onClick }: ItemNavigationProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemNavigation.d.ts.map

package/build/types/item/ItemNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/item/ItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAQ7E,CAAC"}

package/build/types/item/ItemSwitch.d.ts

@@ -1,3 +0,0 @@
-import { SwitchProps } from '../switch';
-export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemSwitch.d.ts.map

package/build/types/item/ItemSwitch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemSwitch.d.ts","sourceRoot":"","sources":["../../../src/item/ItemSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,WAAW,EAAE,MAAM,WAAW,CAAC;AAG/D,eAAO,MAAM,MAAM,UAAoB,WAAW,gCAQjD,CAAC"}

package/build/types/item/index.d.ts

@@ -1,6 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export type { ItemImageProps, ItemAvatarViewProps, ItemAvatarLayoutProps } from './ItemMedia';
-export { default } from './Item';
-//# sourceMappingURL=index.d.ts.map

package/build/types/item/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/build/types/item/prompt/Prompt.d.ts

@@ -1,12 +0,0 @@
-import { Sentiment } from '../../common';
-import { LinkProps } from '../../link';
-export type ItemPromptProps = {
-    type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount' | 'savings';
-    children: React.ReactNode;
-    action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
-        'aria-label'?: string;
-    };
-};
-export declare const ItemPrompt: ({ type, children, action }: ItemPromptProps) => import("react").JSX.Element;
-export default ItemPrompt;
-//# sourceMappingURL=Prompt.d.ts.map

package/build/types/item/prompt/Prompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,GACV,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,UAAU,+BAAgC,eAAe,gCAyBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/listItem/List.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAEtD"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmC/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,5 +0,0 @@
-export { List } from './List';
-export type { ListProps } from './List';
-export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/listItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/src/item/Item.css

@@ -1,183 +0,0 @@
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  gap: 16px;
-  gap: var(--size-16);
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-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)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.np-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.np-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.np-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.np-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.np-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.np-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.np-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.np-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.np-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.np-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.np-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.np-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}

package/src/item/Item.less

@@ -1,177 +0,0 @@
-.np-item {
-    padding: var(--size-16);
-    border-radius: var(--radius-large);
-    background-color: var(--color-background-screen);
-    gap: var(--size-16);
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--color-background-screen-hover);
-    }
-
-    &:active {
-        background-color: var(--color-background-screen-active);
-    }
-
-    &-media {
-
-        &-image {
-            width: var(--item-media-image-size);
-            height: var(--item-media-image-size);
-        }
-    }
-
-    &-title {
-        color: var(--color-content-primary);
-    }
-
-    &-additional-info {
-        color: var(--color-content-tertiary);
-    }
-
-    &-value {
-        flex: 0 0 auto;
-    }
-    
-    &-control {
-        flex: 0 0 auto;
-    }
-
-    &-spotlight {
-        &-active {
-            background-color: var(--color-background-neutral);
-
-            &:hover {
-                background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-                background-color: var(--color-background-neutral-active);
-            }
-        }
-
-        &-inactive {
-            background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-            border: 1px dashed var(--color-border-neutral);
-        
-            &:hover {
-                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-            }
-            &:active {
-                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-            }
-        }
-    }
-
-    &-prompt {
-        display: inline-flex;
-        padding-top: calc(var(--padding-x-small) / 2);
-        padding-bottom: calc(var(--padding-x-small) / 2);
-        padding-left: calc(var(--padding-x-small) - 1px);
-        padding-right: var(--padding-x-small);
-        border-radius: var(--radius-small);
-        word-break: break-word;
-        overflow-wrap: break-word;
-        
-        .np-prompt-icon {
-          padding-right: calc(var(--size-12) / 2);
-          padding-top: calc(var(--size-4) - 1px);
-          padding-bottom: calc(var(--size-4) - 1px);
-      
-          .tw-icon-tags,
-          .tw-icon-confetti {
-            color: var(--color-sentiment-positive-primary);
-          }
-        }
-      
-        a {
-          text-underline-offset: calc(var(--size-4) / 2); 
-        }
-      
-        &.np-prompt-interactive {
-          text-decoration: none;
-          cursor: pointer;
-          border: none;
-        }
-      
-        &.negative {
-          background-color: var(--color-sentiment-negative-secondary);
-          color: var(--color-sentiment-negative-primary);
-          a {
-            color: var(--color-sentiment-negative-primary);
-            &:hover {
-              color: var(--color-sentiment-negative-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-negative-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-            }
-          }
-        }
-        &.positive,
-        &.discount,
-        &.savings {
-          background-color: var(--color-sentiment-positive-secondary);
-          color: var(--color-sentiment-positive-primary);
-          a {
-            color: var(--color-sentiment-positive-primary);
-            &:hover {
-              color: var(--color-sentiment-positive-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-positive-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-            }
-          }
-        }
-        &.neutral {
-          background-color: var(--color-background-neutral);
-          color: var(--color-content-primary);
-          a {
-            color: var(--color-content-primary);
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-              background-color: var(--color-background-neutral-active);
-            }
-          }
-        }
-        &.warning {
-          background-color: var(--color-sentiment-warning-secondary);
-          color: var(--color-sentiment-warning-content);
-          a {
-            color: var(--color-sentiment-warning-content);
-            &:hover {
-              color: var(--color-sentiment-warning-content-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-warning-content-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-            }
-          }
-        } 
-    }
-}

package/src/item/Item.story.tsx

@@ -1,175 +0,0 @@
-import Item, { Props as ItemProps } from './Item';
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
-import { Flag } from '@wise/art';
-
-export default {
-  component: Item,
-  title: 'Content/Item',
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-// TODO: delete this story later when we have more peace of the List Item puzzle
-export const TempPlayground: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-
-    return (
-      <div>
-        <Item
-          media={
-            <Item.AvatarView badge={{ type: 'action' }}>
-              <Flag code="BBD" />
-            </Item.AvatarView>
-          }
-          title="Test title"
-          subtitle="Test subtitle"
-          additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
-        />
-        <Item
-          media={
-            <Item.AvatarLayout
-              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
-            />
-          }
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-        />
-        <Item
-          media={
-            <Item.AvatarLayout
-              size={72}
-              orientation="diagonal"
-              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
-            />
-          }
-          title="Test title"
-          subtitle={lorem10}
-          valueTitle="100 GBP"
-          valueSubtitle="100 USD"
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-        />
-        <Item
-          media={<Item.AvatarView profileType="BUSINESS" notification />}
-          title="Test title"
-          subtitle="Test subtitle"
-          additionalInfo={
-            <Item.AdditionalInfo
-              action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
-            >
-              {lorem10}
-            </Item.AdditionalInfo>
-          }
-          prompt={<Item.Prompt type="negative">You have done something wrong</Item.Prompt>}
-        />
-        <Item
-          media={<Item.AvatarView imgSrc="../avatar-square-dude.webp" selected />}
-          title="Test title"
-          additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
-          prompt={
-            <Item.Prompt
-              type="discount"
-              action={{
-                href: 'https://wise.com',
-                target: '_blank',
-                'aria-label': 'clickable prompt',
-              }}
-            >
-              The whole prompt is secretly clickable
-            </Item.Prompt>
-          }
-        />
-
-        <Item
-          media={<Item.Image src="../apple-pay-logo.svg" />}
-          title="Accepting Apple Pay"
-          subtitle={lorem10}
-        />
-
-        <Item
-          media={<Item.Image src="../wise-card.svg" />}
-          title="Wise Business Card"
-          subtitle={lorem5}
-        />
-
-        <Item
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-          control={<Item.Button priority="secondary-neutral">as Button</Item.Button>}
-        />
-
-        <Item
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-          control={
-            <Item.Button
-              priority="secondary-neutral"
-              as="a"
-              target="dfdf"
-              aria-label="adsfasfd"
-              href="wise.com"
-            >
-              as Link
-            </Item.Button>
-          }
-        />
-
-        <Item
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-          control={<Item.Checkbox indeterminate />}
-        />
-
-        <Item
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-          control={
-            <Item.Switch
-              checked={checked}
-              onClick={() => {
-                setChecked(!checked);
-              }}
-            />
-          }
-        />
-      </div>
-    );
-  },
-};
-
-export const ItemRadio: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-export const ItemButton: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* partially interactive */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-// add intaces with dark mode