@transferwise/components 0.0.0-experimental-7bd726b → 0.0.0-experimental-812a5b7

package/build/main.css

@@ -3049,7 +3049,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
@@ -3356,10 +3356,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-control-wrapper-disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
@@ -3370,7 +3366,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled {
   opacity: 1;
   opacity: initial;
-  filter: initial;
 }
 .wds-list-item.disabled,
 .wds-list-item.disabled label {
@@ -3388,7 +3383,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled .wds-list-item-body,
 .wds-list-item.disabled .wds-list-item-additional-info {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
 }
 .wds-list-item-spotlight {
   padding-left: 12px;

package/build/statusIcon/StatusIcon.js

@@ -39,8 +39,7 @@ const mapLegacySize = {
 const StatusIcon = ({
   sentiment: sentiment$1 = 'neutral',
   size: sizeProp = 40,
-  iconLabel,
-  className
+  iconLabel
 }) => {
   const intl = reactIntl.useIntl();
   const iconMetaBySentiment = {
@@ -89,7 +88,7 @@ const StatusIcon = ({
     as: "span",
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle', sentiment$1, className),
+    className: clsx.clsx('status-circle', sentiment$1),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n  className?: string;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n  className,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment, className)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","className","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -35,8 +35,7 @@ const mapLegacySize = {
 const StatusIcon = ({
   sentiment = 'neutral',
   size: sizeProp = 40,
-  iconLabel,
-  className
+  iconLabel
 }) => {
   const intl = useIntl();
   const iconMetaBySentiment = {
@@ -85,7 +84,7 @@ const StatusIcon = ({
     as: "span",
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', sentiment, className),
+    className: clsx('status-circle', sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n  className?: string;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n  className,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment, className)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","className","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG;CACuB;AAE/C,MAAMC,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAE;AAAEC,EAAAA;AAAS,CAAmB,KAAI;AAChG,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,SAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;KAC3D;IACD,CAACV,SAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,KAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACO,YAAY;KAC3D;IACD,CAACC,MAAM,CAACC,OAAO,GAAG;AAChBb,MAAAA,IAAI,EAAEc,eAAe;AACrBZ,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACW,YAAY;KAC3D;IACD,CAACjB,SAAS,CAACkB,OAAO,GAAG;AACnBhB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;AACD;IACA,CAACpB,SAAS,CAACqB,KAAK,GAAG;AACjBnB,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACsB,IAAI,GAAG;AAChBpB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;IACD,CAACpB,SAAS,CAACuB,OAAO,GAAG;AACnBrB,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;AAC3D;GACF;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,SAAS,CAAC;AAEjE,EAAA,MAAM+B,SAAS,GAAG/B,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;EACvF,MAAMgC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,MAAMlC,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ;EAChD,oBACEkC,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTrC,IAAI,EAAE+B,cAAc,IAAI/B,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBsC,IAAAA,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAExC,SAAS,CAAE;IAAAyC,QAAA,eAE5CL,GAAA,CAAC3B,IAAI,EAAA;AACH8B,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAE;MAC1CW,KAAK,EAAEvC,SAAS,KAAK,IAAI,GAAGwC,SAAS,GAAGxC,SAAS,IAAIQ;KAAiB;AAE1E,GAAQ,CAAC;AAEb;;;;"}

package/build/styles/listItem/ListItem.css

@@ -405,7 +405,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
@@ -712,10 +712,6 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-control-wrapper-disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
@@ -726,7 +722,6 @@
 .wds-list-item.disabled {
   opacity: 1;
   opacity: initial;
-  filter: initial;
 }
 .wds-list-item.disabled,
 .wds-list-item.disabled label {
@@ -744,7 +739,9 @@
 .wds-list-item.disabled .wds-list-item-body,
 .wds-list-item.disabled .wds-list-item-additional-info {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
 }
 .wds-list-item-spotlight {
   padding-left: 12px;

package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css

@@ -21,7 +21,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {

package/build/styles/listItem/Prompt/ListItemPrompt.css

@@ -21,7 +21,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {

package/build/styles/main.css

@@ -3049,7 +3049,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
@@ -3356,10 +3356,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-control-wrapper-disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
@@ -3370,7 +3366,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled {
   opacity: 1;
   opacity: initial;
-  filter: initial;
 }
 .wds-list-item.disabled,
 .wds-list-item.disabled label {
@@ -3388,7 +3383,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled .wds-list-item-body,
 .wds-list-item.disabled .wds-list-item-additional-info {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
 }
 .wds-list-item-spotlight {
   padding-left: 12px;

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;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;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;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOf,CAAC;AAgGF,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;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;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;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6DAO1B,iBAAiB,gCAwCnB,CAAC"}
+{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6DAO1B,iBAAiB,gCA4BnB,CAAC"}

package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CAetF,CAAC;AAGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CActF,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/build/types/statusIcon/StatusIcon.d.ts

@@ -13,8 +13,7 @@ export type StatusIconProps = {
      * Using `null` will render the icon purely presentational.
      * */
     iconLabel?: string | null;
-    className?: string;
 };
-declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel, className, }: StatusIconProps) => import("react").JSX.Element;
+declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel }: StatusIconProps) => import("react").JSX.Element;
 export default StatusIcon;
 //# sourceMappingURL=StatusIcon.d.ts.map

package/build/types/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,sDAKjB,eAAe,gCA8DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCA8D7F,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7bd726b",
+  "version": "0.0.0-experimental-812a5b7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,8 +83,8 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/neptune-css": "14.24.5",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",
     "@wise/wds-configs": "0.0.0"
   },

package/src/listItem/ListItem.css

@@ -405,7 +405,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
@@ -712,10 +712,6 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-control-wrapper-disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
@@ -726,7 +722,6 @@
 .wds-list-item.disabled {
   opacity: 1;
   opacity: initial;
-  filter: initial;
 }
 .wds-list-item.disabled,
 .wds-list-item.disabled label {
@@ -744,7 +739,9 @@
 .wds-list-item.disabled .wds-list-item-body,
 .wds-list-item.disabled .wds-list-item-additional-info {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
 }
 .wds-list-item-spotlight {
   padding-left: 12px;

package/src/listItem/ListItem.less

@@ -210,11 +210,6 @@
 
   &-control-wrapper {
       grid-area: control;
-
-      &-disabled {
-        opacity: .45;
-        mix-blend-mode: luminosity;
-      }
   }
 
   &-navigation {
@@ -229,7 +224,6 @@
 
   &.disabled {
     opacity: unset;
-    filter: unset;
 
     &, label {
       cursor: not-allowed;
@@ -247,9 +241,13 @@
     .wds-list-item-body,
     .wds-list-item-additional-info {
       opacity: .93;
-      mix-blend-mode: luminosity;
     }
+  }
 
+  &.disabled--has-prompt-reason {
+    .wds-list-item-prompt{
+      opacity: .93;
+    }
   }
 
   &-spotlight {

package/src/listItem/ListItem.spec.tsx

@@ -14,6 +14,7 @@ describe('ListItem', () => {
   const additionalInfo = '__additionalInfo__';
   const additionalInfoAction = '__infoAction__';
   const prompt = '__prompt__';
+  const disabledPromptMessage = '__disabledPromptMessage__';
   const promptAction = '__promptAction__';
   const promptWithLink = (
     <>
@@ -1511,4 +1512,36 @@ describe('ListItem', () => {
       expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
   });
+
+  describe('disable states', () => {
+    describe('short-lived', () => {
+      it('should override existing prompt if disabled and disabledPromptMessage are set', () => {
+        render(
+          <ListItem
+            title="Test Title"
+            prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+            disabled
+            disabledPromptMessage={disabledPromptMessage}
+          />,
+        );
+        expect(screen.queryByText(prompt)).not.toBeInTheDocument();
+        expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
+      });
+
+      it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
+        render(
+          <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
+        );
+        expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
+      });
+    });
+  });
 });

package/src/listItem/ListItem.tsx

@@ -6,7 +6,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react';
-import { Typography } from '../common';
+import { Sentiment, Typography } from '../common';
 import Body from '../body';
 import { AdditionalInfo } from './AdditionalInfo';
 import { IconButton, type ListItemIconButtonProps } from './IconButton';
@@ -136,7 +136,7 @@ export const ListItem = ({
     ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),
     ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),
     control: `${idPrefix}_control`,
-    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),
+    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),
     ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),
   };
 
@@ -186,7 +186,7 @@ export const ListItem = ({
     const hasMedia = Boolean(media);
     const hasControl = Boolean(control);
     const hasInfo = Boolean(additionalInfo);
-    const hasPrompt = Boolean(prompt);
+    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));
 
     /* eslint-disable functional/immutable-data */
     if (hasMedia && hasControl) {
@@ -235,6 +235,7 @@ export const ListItem = ({
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
             disabled: disabled && !isPartiallyInteractive,
+            'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive,
           },
           className,
         )}
@@ -258,6 +259,7 @@ export const ListItem = ({
             subtitle,
             additionalInfo,
             disabled,
+            disabledPromptMessage,
             prompt,
             controlType,
             controlProps,
@@ -338,7 +340,6 @@ export const ListItem = ({
                 'wds-list-item-button-control': controlType === 'button',
                 'wds-list-item-button-control--hasPrompt':
                   controlType === 'button' && Boolean(prompt),
-                'wds-list-item-control-wrapper-disabled': disabled,
               })}
               style={
                 {
@@ -360,13 +361,17 @@ type ViewProps = PropsWithChildren<{
   controlType?: ListItemTypes;
   controlProps?: ListItemControlProps;
 }> &
-  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;
+  Pick<
+    ListItemProps,
+    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'
+  >;
 
 function View({
   children,
   additionalInfo,
   prompt,
   disabled,
+  disabledPromptMessage,
   isPartiallyInteractive,
   controlType = 'non-interactive',
   controlProps,
@@ -377,12 +382,21 @@ function View({
 
   const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;
 
-  const renderExtras = () => (
-    <>
-      {additionalInfo}
-      {prompt}
-    </>
-  );
+  const renderExtras = () => {
+    const resolvedPrompt =
+      disabled && disabledPromptMessage && !prompt ? (
+        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>
+      ) : (
+        prompt
+      );
+
+    return (
+      <>
+        {additionalInfo}
+        {resolvedPrompt}
+      </>
+    );
+  };
 
   if (isLinkControl && isHrefProvided) {
     return (

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -90,25 +90,3 @@ export const AsButton: Story = {
     );
   },
 };
-
-/**
- * Unlike other controls, the Navigation control has a custom disabled state
- * for improved discoverability, accessibility and overall UX.
- */
-export const Disabled: Story = {
-  render: (args) => {
-    return (
-      <List>
-        <ListItem
-          disabled
-          control={<ListItem.Navigation {...args} />}
-          title="This option is disabled"
-          subtitle={lorem10}
-          additionalInfo={INFO.nonInteractive}
-          prompt={PROMPTS.interactive}
-          media={MEDIA.avatarSingle}
-        />
-      </List>
-    );
-  },
-};

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css

@@ -21,7 +21,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less

@@ -20,7 +20,7 @@
 
   &--muted {
     opacity: .93;
-    mix-blend-mode: luminosity;
+    filter: grayscale(1);
   }
 
   a, button {

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx

@@ -28,24 +28,12 @@ export const InlinePrompt = ({
 }: InlinePromptProps) => {
   const renderMedia = () => {
     if (muted) {
-      return (
-        <BackslashCircle
-          size={16}
-          className="wds-inline-prompt__media"
-          data-testid="InlinePrompt_Muted"
-        />
-      );
+      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }
     if (loading) {
-      return (
-        <ProcessIndicator
-          data-testid="InlinePrompt_ProcessIndicator"
-          size="xxs"
-          className="wds-inline-prompt__media"
-        />
-      );
+      return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
     }
-    return <StatusIcon size={16} sentiment={sentiment} className="wds-inline-prompt__media" />;
+    return <StatusIcon size={16} sentiment={sentiment} />;
   };
 
   return (

package/src/listItem/Prompt/ListItemPrompt.css

@@ -21,7 +21,7 @@
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {

package/src/listItem/Prompt/ListItemPrompt.spec.tsx

@@ -34,10 +34,39 @@ describe('ListItem.Prompt', () => {
     });
   });
 
-  it('renders backslash-cross icon when parent ListItem is disabled', () => {
-    render(
-      <ListItem title="Test Title" disabled prompt={<ListItem.Prompt>Message</ListItem.Prompt>} />,
-    );
-    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+  describe('muted state', () => {
+    it('does not render backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is not', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabled
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
+    });
+
+    it('does not renders backslash-cross icon when parent ListItem is not disabled but disabledPromptMessage is set', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabledPromptMessage="Test reason"
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
+    });
+
+    it('renders backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is provided', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabled
+          disabledPromptMessage="Test reason"
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+    });
   });
 });