@transferwise/components 0.0.0-experimental-15914a5 → 0.0.0-experimental-e1870f3

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
+import Emphasis from '../../emphasis';
 import { ListItem, Props as ItemProps } from '../ListItem';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -9,6 +10,7 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
+import { List } from '../List';
 
 /**
  * List Items let users review or select options from a dynamic list.<br />
@@ -241,9 +243,9 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <ol className="list-unstyled">
+      <List key={args.disabled ? 'disabled' : 'enabled'} as="ol">
         <ListItem {...props} {...previewProps} />
-      </ol>
+      </List>
     );
   },
   argTypes: previewArgTypes,
@@ -277,9 +279,9 @@ export const Responsiveness: Story = {
     return (
       <ol
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
+        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
       >
-        <div style={{ width: '320px' }}>
+        <div style={{ width: '290px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -289,7 +291,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '360px' }}>
+        <div style={{ width: '350px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -299,7 +301,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '400px' }}>
+        <div style={{ width: '381px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -425,7 +427,7 @@ export const Spotlight: Story = {
  * All of these limitations were put in place to ensure that the list item is compliant with
  * accessibility guidance and offers consistent experience across all engineering platforms.
  *
- * Please refer to the [design documentation](https://wise.design/components/list-item#:~:text=specific%20list%20item.-,Interaction,-The%20list%20item) for more details.
+ * Please refer to the [design documentation](https://wise.design/components/list-item#interaction) for more details.
  */
 export const Interactivity: Story = {
   render: function Render() {
@@ -501,6 +503,8 @@ export const Interactivity: Story = {
  * to a new icon for improved user experience and accessibility. <br />
  * For the same reason, only the control part of the List Item is dimmed, while all the content
  * retains high contrast and interactivity.
+ *
+ * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
  */
 export const Disabled: Story = {
   parameters: {
@@ -668,3 +672,37 @@ export const Disabled: Story = {
     </div>
   ),
 };
+
+/**
+ * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
+ * That said, most of them should be fed with plain text only. The exception is `valueTitle`
+ * and `valueSubtitle` which can be augmented with sentiment colours, strikethrough or bold
+ * styles. <br />
+ *
+ * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
+ */
+export const StylingLabels: Story = {
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    media: MEDIA.image,
+    control: CONTROLS.iconButton,
+    prompt: PROMPTS.interactive,
+  },
+  render: function Render(args) {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          {...args}
+          valueTitle={<Emphasis text="<negative>100 GBP</negative>" />}
+          valueSubtitle={<s>125 GBP</s>}
+        />
+        <ListItem
+          {...args}
+          valueTitle={<Emphasis text="<positive>100 GBP</positive>" />}
+          valueSubtitle={<strong>125 GBP</strong>}
+        />
+      </ol>
+    );
+  },
+};

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -9,6 +9,7 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   type SB_ListItem_ControlType as ControlType,
 } from './subcomponents';
+import { List } from '../List';
 
 export default {
   component: ListItem,
@@ -71,23 +72,18 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
   const variants = [
     { title },
-    { title, valueTitle },
     { title, subtitle },
-    { title, valueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
     { title, subtitle, valueTitle },
     { title, subtitle, valueTitle, inverted: true },
     { title, subtitle, valueTitle, valueSubtitle },
     { title, subtitle, valueTitle, valueSubtitle, inverted: true },
     { media, title },
-    { media, title, valueTitle },
-    { media, title, subtitle },
-    { media, title, valueTitle, valueSubtitle },
-    { media, title, valueTitle },
-    { media, title, valueSubtitle },
     { media, title, subtitle },
     { media, title, subtitle, valueTitle },
     { media, title, subtitle, valueTitle, valueSubtitle },
+    { media, title },
+    { media, title, subtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
     isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
     { media, title, subtitle, additionalInfo, valueTitle },
@@ -148,7 +144,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   return storyConfig(
     {
       render: () => (
-        <ol className="list-unstyled">
+        <List as="ol">
           {variants.map((variant, variantIndex) => (
             <ListItem
               key={`${controlType}-${variantIndex}-${Math.random()}`}
@@ -156,7 +152,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
               {...variant}
             />
           ))}
-        </ol>
+        </List>
       ),
     },
     { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
@@ -182,7 +178,7 @@ export const Switch = generateVariantsForControl('switch');
 
 export const ButtonControlLabel: Story = {
   render: () => (
-    <ol className="list-unstyled">
+    <List as="ol">
       <ListItem
         title="Fully interactive button."
         subtitle="It uses default content hierarchy."
@@ -266,6 +262,6 @@ export const ButtonControlLabel: Story = {
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
       />
-    </ol>
+    </List>
   ),
 };

package/src/listItem/index.ts

@@ -12,3 +12,6 @@ export type { ListItemRadioProps } from './Radio';
 export type { ListItemSwitchProps } from './Switch';
 
 export { default } from './ListItem';
+
+export { List } from './List';
+export type { ListProps } from './List';

package/src/main.css

@@ -454,7 +454,8 @@
   right: 0;
 }
 .np-avatar-view .np-avatar-view-content {
-  color: var(--color-interactive-primary);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -462,6 +463,7 @@
 .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;
@@ -2640,21 +2642,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: 375px) {
+@container (min-width: 380px) {
   .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 ." ". prompt prompt";
+    grid-template-areas: "media body control" "media info control" "media 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 .";
+    grid-template-areas: "media body control" "media info control";
   }
   .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" ". prompt prompt";
+    grid-template-areas: "media body control" "media prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -2664,7 +2666,7 @@ 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" ". prompt";
+    grid-template-areas: "media body" "media info" "media prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -2687,12 +2689,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 ." "prompt prompt";
+    grid-template-areas: "body control" "info control" "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 .";
+    grid-template-areas: "body control" "info control";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -2728,14 +2730,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 290px) and (max-width: 380px) {
   .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;
@@ -2776,9 +2775,6 @@ 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;
@@ -2862,7 +2858,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (max-width: 297px) {
+@container (max-width: 290px) {
   .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;
@@ -3009,8 +3005,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;
-  padding: var(--size-12);
+  padding: 12px 0;
+  padding: var(--size-12) 0;
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -3044,12 +3040,6 @@ 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;
 }
@@ -3068,30 +3058,65 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
+.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 {
   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;
 }
 .wds-list-item-media-image {
-  width: var(--wds-list-item-control-wrapper-height);
-  height: var(--wds-list-item-control-wrapper-height);
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
 }
 .wds-list-item-body {
   grid-area: body;
@@ -3105,18 +3130,11 @@ 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,
+.wds-list-item-title-value {
   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;
@@ -3124,14 +3142,12 @@ 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;
-  max-height: var(--wds-list-item-control-wrapper-height);
-}
-.wds-list-item-navigation .tw-icon-chevron-right {
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
 }
 .wds-list-item-control {
   flex: 0 0 auto;
@@ -3147,6 +3163,12 @@ 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);
@@ -3159,8 +3181,6 @@ 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 {
@@ -3173,6 +3193,34 @@ 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/build/legacylistItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAK,CAAC;AACzE;;;;"}

package/build/legacylistItem/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;AACrD,EAAA,oBAAOC,GAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,IAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAK,CAAC;AACzE;;;;"}

package/build/listItem/useListItemMedia.js

@@ -1,21 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ListItemContext = require('./ListItemContext.js');
-
-function useListItemMedia(size) {
-  const {
-    setMediaSize,
-    mediaSize
-  } = React.useContext(ListItemContext.ListItemContext);
-  React.useEffect(() => {
-    setMediaSize(size);
-  }, [size, setMediaSize]);
-  return {
-    mediaSize,
-    setMediaSize
-  };
-}
-
-exports.useListItemMedia = useListItemMedia;
-//# sourceMappingURL=useListItemMedia.js.map

package/build/listItem/useListItemMedia.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useListItemMedia.js","sources":["../../src/listItem/useListItemMedia.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport function useListItemMedia(size?: ListItemAvatarViewProps['size']) {\n  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setMediaSize(size);\n  }, [size, setMediaSize]);\n\n  return { mediaSize, setMediaSize };\n}\n"],"names":["useListItemMedia","size","setMediaSize","mediaSize","useContext","ListItemContext","useEffect"],"mappings":";;;;;AAIM,SAAUA,gBAAgBA,CAACC,IAAsC,EAAA;EACrE,MAAM;IAAEC,YAAY;AAAEC,IAAAA;AAAS,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;AAEpFC,EAAAA,eAAS,CAAC,MAAK;IACbJ,YAAY,CAACD,IAAI,CAAC;AACpB,EAAA,CAAC,EAAE,CAACA,IAAI,EAAEC,YAAY,CAAC,CAAC;EAExB,OAAO;IAAEC,SAAS;AAAED,IAAAA;GAAc;AACpC;;;;"}

package/build/listItem/useListItemMedia.mjs

@@ -1,19 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { ListItemContext } from './ListItemContext.mjs';
-
-function useListItemMedia(size) {
-  const {
-    setMediaSize,
-    mediaSize
-  } = useContext(ListItemContext);
-  useEffect(() => {
-    setMediaSize(size);
-  }, [size, setMediaSize]);
-  return {
-    mediaSize,
-    setMediaSize
-  };
-}
-
-export { useListItemMedia };
-//# sourceMappingURL=useListItemMedia.mjs.map

package/build/listItem/useListItemMedia.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useListItemMedia.mjs","sources":["../../src/listItem/useListItemMedia.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport function useListItemMedia(size?: ListItemAvatarViewProps['size']) {\n  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setMediaSize(size);\n  }, [size, setMediaSize]);\n\n  return { mediaSize, setMediaSize };\n}\n"],"names":["useListItemMedia","size","setMediaSize","mediaSize","useContext","ListItemContext","useEffect"],"mappings":";;;AAIM,SAAUA,gBAAgBA,CAACC,IAAsC,EAAA;EACrE,MAAM;IAAEC,YAAY;AAAEC,IAAAA;AAAS,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEpFC,EAAAA,SAAS,CAAC,MAAK;IACbJ,YAAY,CAACD,IAAI,CAAC;AACpB,EAAA,CAAC,EAAE,CAACA,IAAI,EAAEC,YAAY,CAAC,CAAC;EAExB,OAAO;IAAEC,SAAS;AAAED,IAAAA;GAAc;AACpC;;;;"}

package/build/types/legacylistItem/List.d.ts

@@ -1,6 +0,0 @@
-export interface ListProps {
-    className?: string;
-    children?: React.ReactNode;
-}
-export declare function List({ className, children }: ListProps): import("react").JSX.Element;
-//# sourceMappingURL=List.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/legacylistItem/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/test-utils.d.ts

@@ -1,7 +0,0 @@
-import { type RenderResult } from '../test-utils';
-export declare const mockSetControlType: jest.Mock<any, any, any>;
-export declare const mockSetControlProps: jest.Mock<any, any, any>;
-export declare const mockSetMediaSize: jest.Mock<any, any, any>;
-export declare const renderWithListItemContext: (ui: React.ReactNode) => RenderResult;
-export declare const clearListItemMocks: () => void;
-//# sourceMappingURL=test-utils.d.ts.map

package/build/types/listItem/test-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../../src/listItem/test-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAG1D,eAAO,MAAM,kBAAkB,0BAAY,CAAC;AAC5C,eAAO,MAAM,mBAAmB,0BAAY,CAAC;AAC7C,eAAO,MAAM,gBAAgB,0BAAY,CAAC;AAE1C,eAAO,MAAM,yBAAyB,GAAI,IAAI,KAAK,CAAC,SAAS,KAAG,YAqB/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

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

@@ -1,6 +0,0 @@
-import type { ListItemAvatarViewProps } from './AvatarView';
-export declare function useListItemMedia(size?: ListItemAvatarViewProps['size']): {
-    mediaSize: 32 | 40 | 48 | 56 | 72 | undefined;
-    setMediaSize: (size: import("./ListItemContext").ListItemMediaSize | undefined) => void;
-};
-//# sourceMappingURL=useListItemMedia.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useListItemMedia.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemMedia.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC;;;EAQtE"}

package/src/legacylistItem/List.tsx

@@ -1,10 +0,0 @@
-import { clsx } from 'clsx';
-
-export interface ListProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export function List({ className, children }: ListProps) {
-  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;
-}

package/src/listItem/test-utils.tsx

@@ -1,33 +0,0 @@
-import { render, type RenderResult } from '../test-utils';
-import { ListItemContext } from './ListItemContext';
-
-export const mockSetControlType = jest.fn();
-export const mockSetControlProps = jest.fn();
-export const mockSetMediaSize = jest.fn();
-
-export const renderWithListItemContext = (ui: React.ReactNode): RenderResult => {
-  return render(
-    <ListItemContext.Provider
-      value={{
-        setControlType: mockSetControlType,
-        setControlProps: mockSetControlProps,
-        setMediaSize: mockSetMediaSize,
-        ids: {
-          title: 'title',
-          additionalInfo: 'additional-info',
-          valueTitle: 'value-title',
-          control: 'control',
-          prompt: 'prompt',
-        },
-        props: {},
-        describedByIds: 'described-by-ids',
-      }}
-    >
-      {ui}
-    </ListItemContext.Provider>,
-  );
-};
-
-export const clearListItemMocks = () => {
-  jest.clearAllMocks();
-};

package/src/listItem/useListItemMedia.tsx

@@ -1,13 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { ListItemContext, type ListItemContextData } from './ListItemContext';
-import type { ListItemAvatarViewProps } from './AvatarView';
-
-export function useListItemMedia(size?: ListItemAvatarViewProps['size']) {
-  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
-
-  useEffect(() => {
-    setMediaSize(size);
-  }, [size, setMediaSize]);
-
-  return { mediaSize, setMediaSize };
-}