@transferwise/components 0.0.0-experimental-93b1fe9 → 0.0.0-experimental-f87649c

package/build/listItem/Navigation/ListItemNavigation.mjs

@@ -1,4 +1,4 @@
-import { ChevronRight } from '@transferwise/icons';
+import { BackslashCircle, ChevronRight } from '@transferwise/icons';
 import { useListItemControl } from '../useListItemControl.mjs';
 import PrimitiveButton from '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
 import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
@@ -23,12 +23,14 @@ const Navigation = function Navigation({
   const icon = /*#__PURE__*/jsx(ChevronRight, {
     size: 16
   });
+  if (baseItemProps.disabled) return /*#__PURE__*/jsx(BackslashCircle, {
+    size: 24
+  });
   return href ? /*#__PURE__*/jsx(Fragment, {
     children: icon
   }) : /*#__PURE__*/jsx(PrimitiveButton, {
     "aria-describedby": describedByIds,
     id: ids.control,
-    disabled: baseItemProps.disabled,
     className: "btn-unstyled wds-list-item-control",
     onClick: props.onClick,
     children: icon

package/build/listItem/Navigation/ListItemNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/listItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = <ChevronRight size={16} />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      aria-describedby={describedByIds}\n      id={ids.control}\n      disabled={baseItemProps.disabled}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","id","control","disabled","className","onClick","displayName"],"mappings":";;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAAEC,IAAI;EAAE,GAAGC;AAAK,CAA2B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAC3D,EAAA,MAAMC,IAAI,gBAAGC,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,OAAOX,IAAI,gBACTS,GAAA,CAAAG,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,GAAA,CAACK,eAAe,EAAA;AACd,IAAA,kBAAA,EAAkBT,cAAe;IACjCU,EAAE,EAAEX,GAAG,CAACY,OAAQ;IAChBC,QAAQ,EAAEf,aAAa,CAACe,QAAS;AACjCC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAT,UAAU,CAACqB,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/listItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight, BackslashCircle } from '@transferwise/icons';\nimport type { ButtonProps } from '../../button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = <ChevronRight size={16} />;\n\n  if (baseItemProps.disabled) return <BackslashCircle size={24} />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","disabled","BackslashCircle","_Fragment","children","PrimitiveButton","id","control","className","onClick","displayName"],"mappings":";;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAAEC,IAAI;EAAE,GAAGC;AAAK,CAA2B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAC3D,EAAA,MAAMC,IAAI,gBAAGC,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,IAAIT,aAAa,CAACU,QAAQ,EAAE,oBAAOH,GAAA,CAACI,eAAe,EAAA;AAACF,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEhE,EAAA,OAAOX,IAAI,gBACTS,GAAA,CAAAK,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGP;AAAI,IAAI,gBAEXC,GAAA,CAACO,eAAe,EAAA;AACd,IAAA,kBAAA,EAAkBX,cAAe;IACjCY,EAAE,EAAEb,GAAG,CAACc,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAEnB,KAAK,CAACmB,OAAkE;AAAAL,IAAAA,QAAA,EAEhFP;AAAI,GACU,CAClB;AACH;AAEAT,UAAU,CAACsB,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Prompt/ListItemPrompt.js

@@ -23,7 +23,7 @@ require('../../common/propsValues/variant.js');
 require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
-var icons = require('@transferwise/icons');
+require('@transferwise/icons');
 require('react-intl');
 require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -36,21 +36,17 @@ const Prompt = ({
   children
 }) => {
   const {
-    ids,
-    props
+    ids
   } = React.useContext(ListItemContext.ListItemContext);
-  const icon = props.disabled ? /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
-    size: 16
-  }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
-    size: 16,
-    sentiment: sentiment$1
-  });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     id: ids.prompt,
     className: clsx.clsx('wds-list-item-prompt', sentiment$1),
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "np-prompt-icon",
-      children: icon
+      children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+        size: 16,
+        sentiment: sentiment$1
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
       children: children
     })]

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { BackslashCircle } from '@transferwise/icons';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n\n  const icon = props.disabled ? (\n    <BackslashCircle size={16} />\n  ) : (\n    <StatusIcon size={16} sentiment={sentiment} />\n  );\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">{icon}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","props","useContext","ListItemContext","icon","disabled","_jsx","BackslashCircle","size","StatusIcon","_jsxs","id","prompt","className","clsx","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAMA,MAAM,GAAGA,CAAC;aAAEC,WAAS,GAAGC,mBAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EAEvE,MAAMC,IAAI,GAAGH,KAAK,CAACI,QAAQ,gBACzBC,cAAA,CAACC,qBAAe,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG,gBAE7BF,cAAA,CAACG,kBAAU,EAAA;AAACD,IAAAA,IAAI,EAAE,EAAG;AAACZ,IAAAA,SAAS,EAAEA;AAAU,GAAA,CAC5C;AAED,EAAA,oBACEc,eAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEX,GAAG,CAACY,MAAO;AAACC,IAAAA,SAAS,EAAEC,SAAI,CAAC,sBAAsB,EAAElB,WAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtEO,cAAA,CAAA,KAAA,EAAA;AAAKO,MAAAA,SAAS,EAAC,gBAAgB;AAAAd,MAAAA,QAAA,EAAEK;AAAI,KAAM,CAC3C,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACqB,WAAW,GAAG,iBAAiB;;;;;"}
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">\n        <StatusIcon size={16} sentiment={sentiment} />\n      </div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","useContext","ListItemContext","_jsxs","id","prompt","className","clsx","_jsx","StatusIcon","size","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,MAAM,GAAGA,CAAC;aAAEC,WAAS,GAAGC,mBAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;AAEhE,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEJ,GAAG,CAACK,MAAO;AAACC,IAAAA,SAAS,EAAEC,SAAI,CAAC,sBAAsB,EAAEX,WAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtES,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,gBAAgB;MAAAP,QAAA,eAC7BS,cAAA,CAACC,kBAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACd,QAAAA,SAAS,EAAEA;OAAU;AAC7C,KAAK,CACL,eAAAY,cAAA,CAACG,YAAI,EAAA;AAAAZ,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACiB,WAAW,GAAG,iBAAiB;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -19,10 +19,10 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { BackslashCircle } from '@transferwise/icons';
+import '@transferwise/icons';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
 import { ListItemContext } from '../ListItemContext.mjs';
@@ -32,21 +32,17 @@ const Prompt = ({
   children
 }) => {
   const {
-    ids,
-    props
+    ids
   } = useContext(ListItemContext);
-  const icon = props.disabled ? /*#__PURE__*/jsx(BackslashCircle, {
-    size: 16
-  }) : /*#__PURE__*/jsx(StatusIcon, {
-    size: 16,
-    sentiment: sentiment
-  });
   return /*#__PURE__*/jsxs("div", {
     id: ids.prompt,
     className: clsx('wds-list-item-prompt', sentiment),
     children: [/*#__PURE__*/jsx("div", {
       className: "np-prompt-icon",
-      children: icon
+      children: /*#__PURE__*/jsx(StatusIcon, {
+        size: 16,
+        sentiment: sentiment
+      })
     }), /*#__PURE__*/jsx(Body, {
       children: children
     })]

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { BackslashCircle } from '@transferwise/icons';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n\n  const icon = props.disabled ? (\n    <BackslashCircle size={16} />\n  ) : (\n    <StatusIcon size={16} sentiment={sentiment} />\n  );\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">{icon}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","props","useContext","ListItemContext","icon","disabled","_jsx","BackslashCircle","size","StatusIcon","_jsxs","id","prompt","className","clsx","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAMA,MAAM,GAAGA,CAAC;EAAEC,SAAS,GAAGC,SAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EAEvE,MAAMC,IAAI,GAAGH,KAAK,CAACI,QAAQ,gBACzBC,GAAA,CAACC,eAAe,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG,gBAE7BF,GAAA,CAACG,UAAU,EAAA;AAACD,IAAAA,IAAI,EAAE,EAAG;AAACZ,IAAAA,SAAS,EAAEA;AAAU,GAAA,CAC5C;AAED,EAAA,oBACEc,IAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEX,GAAG,CAACY,MAAO;AAACC,IAAAA,SAAS,EAAEC,IAAI,CAAC,sBAAsB,EAAElB,SAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtEO,GAAA,CAAA,KAAA,EAAA;AAAKO,MAAAA,SAAS,EAAC,gBAAgB;AAAAd,MAAAA,QAAA,EAAEK;AAAI,KAAM,CAC3C,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACqB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">\n        <StatusIcon size={16} sentiment={sentiment} />\n      </div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","useContext","ListItemContext","_jsxs","id","prompt","className","clsx","_jsx","StatusIcon","size","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,MAAM,GAAGA,CAAC;EAAEC,SAAS,GAAGC,SAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEhE,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEJ,GAAG,CAACK,MAAO;AAACC,IAAAA,SAAS,EAAEC,IAAI,CAAC,sBAAsB,EAAEX,SAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtES,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,gBAAgB;MAAAP,QAAA,eAC7BS,GAAA,CAACC,UAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACd,QAAAA,SAAS,EAAEA;OAAU;AAC7C,KAAK,CACL,eAAAY,GAAA,CAACG,IAAI,EAAA;AAAAZ,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACiB,WAAW,GAAG,iBAAiB;;;;"}

package/build/main.css

@@ -3136,26 +3136,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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,
-.disabled.wds-list-item .wds-list-item-prompt {
+.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,
-.disabled.wds-list-item .wds-list-item-prompt a,
-.wds-list-item-prompt.neutral button,
-.disabled.wds-list-item .wds-list-item-prompt button {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):hover {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):active {
+.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 {
@@ -3180,9 +3175,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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.disabled .np-switch.disabled {
-  overflow: visible;
-}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -3306,7 +3298,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3317,6 +3309,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+@container (min-width: 375px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -3324,6 +3323,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-value {
   text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;
@@ -3351,18 +3353,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.93;
+  filter: none;
+  opacity: 1;
 }
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .wds-list-item-media .np-avatar-view-content,
-.wds-list-item.disabled .wds-list-item-title,
-.wds-list-item.disabled .wds-list-item-title-value,
-.wds-list-item.disabled .wds-list-item-subtitle,
-.wds-list-item.disabled .wds-list-item-subtitle-value,
-.wds-list-item.disabled .wds-list-item-additional-info {
+.wds-list-item.disabled .tw-icon-backslash-circle {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/build/styles/listItem/ListItem.css

@@ -492,26 +492,21 @@
 .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,
-.disabled.wds-list-item .wds-list-item-prompt {
+.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,
-.disabled.wds-list-item .wds-list-item-prompt a,
-.wds-list-item-prompt.neutral button,
-.disabled.wds-list-item .wds-list-item-prompt button {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):hover {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):active {
+.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 {
@@ -536,9 +531,6 @@
 .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.disabled .np-switch.disabled {
-  overflow: visible;
-}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -662,7 +654,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -673,6 +665,13 @@
   gap: var(--size-16);
   word-break: break-word;
 }
+@container (min-width: 375px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -680,6 +679,9 @@
 }
 .wds-list-item-value {
   text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;
@@ -707,18 +709,13 @@
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.93;
+  filter: none;
+  opacity: 1;
 }
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .wds-list-item-media .np-avatar-view-content,
-.wds-list-item.disabled .wds-list-item-title,
-.wds-list-item.disabled .wds-list-item-title-value,
-.wds-list-item.disabled .wds-list-item-subtitle,
-.wds-list-item.disabled .wds-list-item-subtitle-value,
-.wds-list-item.disabled .wds-list-item-additional-info {
+.wds-list-item.disabled .tw-icon-backslash-circle {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

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

@@ -116,26 +116,21 @@
 .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,
-.disabled.wds-list-item .wds-list-item-prompt {
+.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,
-.disabled.wds-list-item .wds-list-item-prompt a,
-.wds-list-item-prompt.neutral button,
-.disabled.wds-list-item .wds-list-item-prompt button {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):hover {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):active {
+.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 {

package/build/styles/main.css

@@ -3136,26 +3136,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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,
-.disabled.wds-list-item .wds-list-item-prompt {
+.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,
-.disabled.wds-list-item .wds-list-item-prompt a,
-.wds-list-item-prompt.neutral button,
-.disabled.wds-list-item .wds-list-item-prompt button {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):hover {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):active {
+.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 {
@@ -3180,9 +3175,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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.disabled .np-switch.disabled {
-  overflow: visible;
-}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -3306,7 +3298,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3317,6 +3309,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+@container (min-width: 375px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -3324,6 +3323,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-value {
   text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;
@@ -3351,18 +3353,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.93;
+  filter: none;
+  opacity: 1;
 }
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .wds-list-item-media .np-avatar-view-content,
-.wds-list-item.disabled .wds-list-item-title,
-.wds-list-item.disabled .wds-list-item-title-value,
-.wds-list-item.disabled .wds-list-item-subtitle,
-.wds-list-item.disabled .wds-list-item-subtitle-value,
-.wds-list-item.disabled .wds-list-item-additional-info {
+.wds-list-item.disabled .tw-icon-backslash-circle {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,GAAI,qPAmBhB,cAAc,gCAmShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,GAAI,qPAmBhB,cAAc,gCAqShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

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;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOf,CAAC;AAiGF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOf,CAAC;AAiGF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Navigation/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;yBAA2C,uBAAuB;;CAkBxF,CAAC"}
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Navigation/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;yBAA2C,uBAAuB;;CAmBxF,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":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;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":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CAWtF,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/package.json

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

package/src/dateInput/DateInput.tsx

@@ -317,7 +317,9 @@ const DateInput = ({
       onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
       }
-      onBlur={(event) => (shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation())}
+      onBlur={(event) =>
+        shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation()
+      }
     >
       <div className="row">
         {(() => {

package/src/listItem/ListItem.css

@@ -492,26 +492,21 @@
 .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,
-.disabled.wds-list-item .wds-list-item-prompt {
+.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,
-.disabled.wds-list-item .wds-list-item-prompt a,
-.wds-list-item-prompt.neutral button,
-.disabled.wds-list-item .wds-list-item-prompt button {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):hover {
+.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,
-.wds-list-item-prompt.disabled.wds-list-item .wds-list-item-prompt:has(a, button):active {
+.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 {
@@ -536,9 +531,6 @@
 .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.disabled .np-switch.disabled {
-  overflow: visible;
-}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -662,7 +654,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -673,6 +665,13 @@
   gap: var(--size-16);
   word-break: break-word;
 }
+@container (min-width: 375px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -680,6 +679,9 @@
 }
 .wds-list-item-value {
   text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;
@@ -707,18 +709,13 @@
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.93;
+  filter: none;
+  opacity: 1;
 }
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .wds-list-item-media .np-avatar-view-content,
-.wds-list-item.disabled .wds-list-item-title,
-.wds-list-item.disabled .wds-list-item-title-value,
-.wds-list-item.disabled .wds-list-item-subtitle,
-.wds-list-item.disabled .wds-list-item-subtitle-value,
-.wds-list-item.disabled .wds-list-item-additional-info {
+.wds-list-item.disabled .tw-icon-backslash-circle {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/listItem/ListItem.grid.less

@@ -1,3 +1,5 @@
+@import (reference) "./ListItem.vars.less";
+
 .wds-list-item {
   &-gridWrapper {
     display: grid;
@@ -10,9 +12,9 @@
           margin-top: -2px;
         }
       }
-  }
+    }
 
-    @container (min-width: 375px) {
+    @container (min-width: @wds-list-item-cq-max) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -167,7 +169,7 @@
       }
     }
 
-    @container (min-width: 297px) and (max-width: 375px) {
+    @container (min-width: @wds-list-item-cq-min) and (max-width: @wds-list-item-cq-max) {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -398,7 +400,7 @@
       }
     }
 
-    @container (max-width: 297px) {
+    @container (max-width: @wds-list-item-cq-min) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }