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

package/build/styles/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/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;;;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,cAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,cAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;;;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,cAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,cAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}

package/build/switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,GAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,GAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,GAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,GAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}

package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG9E,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAEnG;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAQzF,CAAC"}
+{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAI9E,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAEnG;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAUzF,CAAC"}

package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAQrF,CAAC"}
+{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}

package/build/types/listItem/Image/ListItemImage.d.ts

@@ -19,7 +19,7 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
  * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
  */
 export declare const Image: {
-    ({ alt, size, ...props }: ListItemImageProps): import("react").JSX.Element;
+    ({ alt, size, className, ...props }: ListItemImageProps): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=ListItemImage.d.ts.map

package/build/types/listItem/Image/ListItemImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;8BAAuC,kBAAkB;;CAa1E,CAAC"}
+{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAMzD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;yCAAkD,kBAAkB;;CAoBrF,CAAC"}

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

@@ -65,7 +65,7 @@ export type Props = {
 export declare const ListItem: {
     ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, valueColumnWidth, role, id, "aria-labelledby": ariaLabelledby, }: Props): import("react").JSX.Element;
     Image: {
-        ({ alt, size, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
+        ({ alt, size, className, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
         displayName: string;
     };
     AvatarView: {

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQ5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmNP,CAAC;AA0GF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NP,CAAC;AAkGF,eAAe,QAAQ,CAAC"}

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

@@ -1,7 +1,10 @@
 import type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';
+import type { ListItemAvatarViewProps } from './AvatarView';
+export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
 export type ListItemContextData = {
     setControlType: (type: ListItemTypes) => void;
     setControlProps: (props: ListItemControlProps) => void;
+    setMediaSize: (size: ListItemMediaSize | undefined) => void;
     ids: {
         title: string;
         subtitle?: string;
@@ -12,6 +15,7 @@ export type ListItemContextData = {
         prompt?: string;
     };
     props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+    mediaSize?: ListItemAvatarViewProps['size'];
     describedByIds: string;
 };
 export declare const ListItemContext: import("react").Context<ListItemContextData>;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9F,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;IACpD,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
+{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAC9F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC5C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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/build/types/switch/Switch.d.ts

@@ -16,7 +16,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;
 };
 declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
 export default Switch;

package/build/types/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCA0CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCA0CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a12c97e",
+  "version": "0.0.0-experimental-302d967",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,8 +85,8 @@
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.6.4"
+    "@wise/components-theming": "1.6.4",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/avatarView/AvatarView.css

@@ -19,8 +19,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;
@@ -28,7 +27,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;

package/src/avatarView/AvatarView.less

@@ -2,14 +2,13 @@
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-content-primary);
+    color: var(--color-interactive-primary);
   }
 
   &-interactive {
     cursor: pointer;
     .np-circle {
       background-color: var(--color-background-neutral);
-      color: var(--color-interactive-primary);
     }
   }
 

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

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
 import { action } from 'storybook/actions';
 import { lorem20 } from '../../test-utils';
 import { ListItem } from '../ListItem';
@@ -7,7 +6,6 @@ import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
 
 /**
@@ -24,6 +22,11 @@ export default {
     },
   },
   args: {
+    action: {
+      label: 'Details about the subject.',
+      href: 'https://wise.com',
+      target: '_blank',
+    },
     children: lorem20,
   },
   argTypes: {
@@ -32,72 +35,21 @@ export default {
         type: { summary: 'ReactNode' },
       },
     },
-    action: {
-      table: {
-        type: { summary: `{ label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>` },
-      },
-    },
   },
 } satisfies Meta<ListItemAdditionalInfoProps>;
 
 type Story = StoryObj<ListItemAdditionalInfoProps>;
 
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = ListItemAdditionalInfoProps & {
-  previewAction?: string | ListItemAdditionalInfoProps['action'];
-};
-
-const previewArgGroup = {
-  category: 'Preview options',
-  type: {
-    summary: undefined,
-  },
-};
-
-const previewArgTypes = {
-  previewAction: {
-    name: 'Preview `action`',
-    control: 'radio',
-    options: ['unset (undefined)', 'link', 'button'],
-    mapping: {
-      'unset (undefined)': undefined,
-      link: {
-        label: 'Details about the subject.',
-        href: 'https://wise.com',
-        target: '_blank',
-      },
-      button: {
-        label: 'Details about the subject.',
-        onClick: fn(),
-      },
-    },
-    table: previewArgGroup,
-  },
-} as const;
-
-export const Playground: StoryObj<PreviewStoryArgs> = {
+export const Playground: Story = {
   tags: ['!autodocs'],
-  argTypes: previewArgTypes,
-  args: {
-    children: lorem20,
-    previewAction: 'link',
-  },
-  render: (args: PreviewStoryArgs) => {
-    const { previewAction, ...props } = args as {
-      previewAction: ListItemAdditionalInfoProps['action'];
-      props: ListItemAdditionalInfoProps;
-    };
-
+  render: (args: ListItemAdditionalInfoProps) => {
     return (
       <ListItem
         title="List item title"
         subtitle="Subtitle goes here"
         media={MEDIA.avatarSingle}
         control={CONTROLS.partialButton}
-        additionalInfo={<ListItem.AdditionalInfo {...props} action={previewAction} />}
+        additionalInfo={<ListItem.AdditionalInfo {...args} />}
       />
     );
   },
@@ -116,7 +68,6 @@ export const Interactivity: Story = {
       target: '_blank',
     },
   },
-  argTypes: disableControls()(['action']),
   render: (args: ListItemAdditionalInfoProps) => {
     return (
       <ol className="list-unstyled">
@@ -151,7 +102,6 @@ export const Interactivity: Story = {
  * Interactive `ListItem.AdditionalInfo` allows for 2 types of actions: a link or a button.
  */
 export const Actions: Story = {
-  argTypes: disableControls()(['action']),
   render: (args: ListItemAdditionalInfoProps) => {
     return (
       <ol className="list-unstyled">