@transferwise/components 0.0.0-experimental-e3978a5 → 0.0.0-experimental-e46526a

package/build/styles/main.css

@@ -3005,6 +3005,163 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     text-align: left;
   }
 }
+.wds-list-item-prompt {
+  grid-area: prompt;
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  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;
+}
+.wds-list-item-prompt:has(a),
+.wds-list-item-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-prompt a,
+.wds-list-item-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt a:first-of-type:before,
+.wds-list-item-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-prompt.np-prompt-icon {
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  gap: var(--size-4);
+}
+.wds-list-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);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a,
+.wds-list-item-prompt.negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover,
+.wds-list-item-prompt.negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active,
+.wds-list-item-prompt.negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a,
+.wds-list-item-prompt.positive button,
+.wds-list-item-prompt.discount button,
+.wds-list-item-prompt.savings button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover,
+.wds-list-item-prompt.positive button:hover,
+.wds-list-item-prompt.discount button:hover,
+.wds-list-item-prompt.savings button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active,
+.wds-list-item-prompt.positive button:active,
+.wds-list-item-prompt.discount button:active,
+.wds-list-item-prompt.savings button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a,
+.wds-list-item-prompt.neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a,
+.wds-list-item-prompt.warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover,
+.wds-list-item-prompt.warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active,
+.wds-list-item-prompt.warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -3248,163 +3405,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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;
-  justify-self: start;
-  text-align: left;
-  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;
-}
-.wds-list-item-prompt:has(a),
-.wds-list-item-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-list-item-prompt a,
-.wds-list-item-prompt button {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-list-item-prompt a:first-of-type:before,
-.wds-list-item-prompt button:first-of-type:before {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-.wds-list-item-prompt.np-prompt-icon {
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  gap: var(--size-4);
-}
-.wds-list-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);
-}
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a,
-.wds-list-item-prompt.negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a:hover,
-.wds-list-item-prompt.negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-list-item-prompt.negative a:active,
-.wds-list-item-prompt.negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a,
-.wds-list-item-prompt.positive button,
-.wds-list-item-prompt.discount button,
-.wds-list-item-prompt.savings button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover,
-.wds-list-item-prompt.positive button:hover,
-.wds-list-item-prompt.discount button:hover,
-.wds-list-item-prompt.savings button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active,
-.wds-list-item-prompt.positive button:active,
-.wds-list-item-prompt.discount button:active,
-.wds-list-item-prompt.savings button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-list-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.neutral a,
-.wds-list-item-prompt.neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a,
-.wds-list-item-prompt.warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a:hover,
-.wds-list-item-prompt.warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-list-item-prompt.warning a:active,
-.wds-list-item-prompt.warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-}
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

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

@@ -55,15 +55,13 @@ export type ListItemProps = {
      */
     valueColumnWidth?: number;
     id?: string;
-    role?: string;
-    'aria-labelledby'?: string;
 };
 /**
  * @see [Design documentation](https://wise.design/components/list-item)
  * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
  */
 export declare const ListItem: {
-    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, valueColumnWidth, role, id, "aria-labelledby": ariaLabelledby, }: ListItemProps): import("react").JSX.Element;
+    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, valueColumnWidth, id, }: ListItemProps): import("react").JSX.Element;
     Image: {
         ({ alt, size, className, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
         displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,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;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,aAAa,GAAG;IAC1B,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,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOf,CAAC;AA+FF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,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;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,aAAa,GAAG;IAC1B,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;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOf,CAAC;AA+FF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e3978a5",
+  "version": "0.0.0-experimental-e46526a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/ListItem.css

@@ -368,6 +368,163 @@
     text-align: left;
   }
 }
+.wds-list-item-prompt {
+  grid-area: prompt;
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  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;
+}
+.wds-list-item-prompt:has(a),
+.wds-list-item-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-prompt a,
+.wds-list-item-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt a:first-of-type:before,
+.wds-list-item-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-prompt.np-prompt-icon {
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  gap: var(--size-4);
+}
+.wds-list-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);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a,
+.wds-list-item-prompt.negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover,
+.wds-list-item-prompt.negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active,
+.wds-list-item-prompt.negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a,
+.wds-list-item-prompt.positive button,
+.wds-list-item-prompt.discount button,
+.wds-list-item-prompt.savings button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover,
+.wds-list-item-prompt.positive button:hover,
+.wds-list-item-prompt.discount button:hover,
+.wds-list-item-prompt.savings button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active,
+.wds-list-item-prompt.positive button:active,
+.wds-list-item-prompt.discount button:active,
+.wds-list-item-prompt.savings button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a,
+.wds-list-item-prompt.neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a,
+.wds-list-item-prompt.warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover,
+.wds-list-item-prompt.warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active,
+.wds-list-item-prompt.warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -611,160 +768,3 @@
   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;
-  justify-self: start;
-  text-align: left;
-  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;
-}
-.wds-list-item-prompt:has(a),
-.wds-list-item-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-list-item-prompt a,
-.wds-list-item-prompt button {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-list-item-prompt a:first-of-type:before,
-.wds-list-item-prompt button:first-of-type:before {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-.wds-list-item-prompt.np-prompt-icon {
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  gap: var(--size-4);
-}
-.wds-list-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);
-}
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a,
-.wds-list-item-prompt.negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-list-item-prompt.negative a:hover,
-.wds-list-item-prompt.negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-list-item-prompt.negative a:active,
-.wds-list-item-prompt.negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a,
-.wds-list-item-prompt.positive button,
-.wds-list-item-prompt.discount button,
-.wds-list-item-prompt.savings button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover,
-.wds-list-item-prompt.positive button:hover,
-.wds-list-item-prompt.discount button:hover,
-.wds-list-item-prompt.savings button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active,
-.wds-list-item-prompt.positive button:active,
-.wds-list-item-prompt.discount button:active,
-.wds-list-item-prompt.savings button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-list-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.neutral a,
-.wds-list-item-prompt.neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-list-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a,
-.wds-list-item-prompt.warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-list-item-prompt.warning a:hover,
-.wds-list-item-prompt.warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-list-item-prompt.warning a:active,
-.wds-list-item-prompt.warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-}
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-}