@transferwise/components 0.0.0-experimental-e8e1885 → 0.0.0-experimental-d06238a

package/build/i18n/cs.json

@@ -1,7 +1,7 @@
 {
   "neptune.Button.loadingAriaLabel": "načítání",
-  "neptune.Chips.ariaLabel": "Vymazat {choice}",
-  "neptune.ClearButton.ariaLabel": "Vymazat",
+  "neptune.Chips.ariaLabel": "Vyčistit {choice}",
+  "neptune.ClearButton.ariaLabel": "Vyčistit",
   "neptune.CloseButton.ariaLabel": "Zavřít",
   "neptune.DateInput.day.label": "Den",
   "neptune.DateInput.day.placeholder": "DD",
@@ -47,25 +47,25 @@
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
-  "neptune.Upload.retry": "Zkusit znovu",
+  "neptune.Upload.retry": "Opakovat",
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
-  "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
+  "neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
   "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
-  "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
-  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
+  "neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
+  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
   "neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Nahrát soubor",
   "neptune.UploadButton.uploadFiles": "Nahrát soubory",
   "neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
-  "neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
+  "neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
   "neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
   "neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
   "neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
-  "neptune.UploadItem.deleting": "Odstraňování...",
-  "neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
+  "neptune.UploadItem.deleting": "Mažeme...",
+  "neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
   "neptune.UploadItem.uploaded": "Nahráno",
   "neptune.UploadItem.uploadedFile": "Nahraný soubor",
   "neptune.UploadItem.uploading": "Nahrávání...",

package/build/i18n/cs.json.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var cs = {
 	"neptune.Button.loadingAriaLabel": "načítání",
-	"neptune.Chips.ariaLabel": "Vymazat {choice}",
-	"neptune.ClearButton.ariaLabel": "Vymazat",
+	"neptune.Chips.ariaLabel": "Vyčistit {choice}",
+	"neptune.ClearButton.ariaLabel": "Vyčistit",
 	"neptune.CloseButton.ariaLabel": "Zavřít",
 	"neptune.DateInput.day.label": "Den",
 	"neptune.DateInput.day.placeholder": "DD",
@@ -51,25 +51,25 @@ var cs = {
 	"neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
 	"neptune.Upload.psButtonText": "Zrušit",
 	"neptune.Upload.psProcessingText": "Načítání...",
-	"neptune.Upload.retry": "Zkusit znovu",
+	"neptune.Upload.retry": "Opakovat",
 	"neptune.Upload.usButtonText": "Nebo vyberte soubor",
-	"neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
+	"neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
 	"neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
 	"neptune.UploadButton.allFileTypes": "Všechny typy souborů",
-	"neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
-	"neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
+	"neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
+	"neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
 	"neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
 	"neptune.UploadButton.uploadFile": "Nahrát soubor",
 	"neptune.UploadButton.uploadFiles": "Nahrát soubory",
 	"neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
 	"neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
 	"neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
-	"neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
+	"neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
 	"neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
 	"neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
 	"neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
-	"neptune.UploadItem.deleting": "Odstraňování...",
-	"neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
+	"neptune.UploadItem.deleting": "Mažeme...",
+	"neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
 	"neptune.UploadItem.uploaded": "Nahráno",
 	"neptune.UploadItem.uploadedFile": "Nahraný soubor",
 	"neptune.UploadItem.uploading": "Nahrávání...",

package/build/i18n/cs.json.mjs

@@ -1,7 +1,7 @@
 var cs = {
 	"neptune.Button.loadingAriaLabel": "načítání",
-	"neptune.Chips.ariaLabel": "Vymazat {choice}",
-	"neptune.ClearButton.ariaLabel": "Vymazat",
+	"neptune.Chips.ariaLabel": "Vyčistit {choice}",
+	"neptune.ClearButton.ariaLabel": "Vyčistit",
 	"neptune.CloseButton.ariaLabel": "Zavřít",
 	"neptune.DateInput.day.label": "Den",
 	"neptune.DateInput.day.placeholder": "DD",
@@ -47,25 +47,25 @@ var cs = {
 	"neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
 	"neptune.Upload.psButtonText": "Zrušit",
 	"neptune.Upload.psProcessingText": "Načítání...",
-	"neptune.Upload.retry": "Zkusit znovu",
+	"neptune.Upload.retry": "Opakovat",
 	"neptune.Upload.usButtonText": "Nebo vyberte soubor",
-	"neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
+	"neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
 	"neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
 	"neptune.UploadButton.allFileTypes": "Všechny typy souborů",
-	"neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
-	"neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
+	"neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
+	"neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
 	"neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
 	"neptune.UploadButton.uploadFile": "Nahrát soubor",
 	"neptune.UploadButton.uploadFiles": "Nahrát soubory",
 	"neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
 	"neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
 	"neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
-	"neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
+	"neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
 	"neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
 	"neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
 	"neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
-	"neptune.UploadItem.deleting": "Odstraňování...",
-	"neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
+	"neptune.UploadItem.deleting": "Mažeme...",
+	"neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
 	"neptune.UploadItem.uploaded": "Nahráno",
 	"neptune.UploadItem.uploadedFile": "Nahraný soubor",
 	"neptune.UploadItem.uploading": "Nahrávání...",

package/build/index.js

@@ -275,6 +275,7 @@ Object.defineProperty(exports, "UploadStep", {
 	get: function () { return Upload.UploadStep; }
 });
 exports.UploadInput = UploadInput.default;
+exports.Item = Table.default;
 exports.Table = Table.default;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -105,7 +105,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
 export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
-export { default as Table } from './table/Table.mjs';
+export { default as Item, default as Table } from './table/Table.mjs';
 import '@transferwise/neptune-validation';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';

package/build/main.css

@@ -2648,6 +2648,189 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+  cursor: pointer;
+}
+.np-item:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item:active {
+  background-color: var(--color-background-screen-active);
+}
+.np-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.np-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-item-value {
+  flex: 0 0 auto;
+}
+.np-item-control {
+  flex: 0 0 auto;
+}
+.np-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.np-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.np-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.np-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.np-item-prompt {
+  display: inline-flex;
+  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;
+}
+.np-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);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.np-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.np-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.np-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.np-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.np-item-prompt.positive,
+.np-item-prompt.discount,
+.np-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a,
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a:hover,
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.np-item-prompt.positive a:active,
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.positive:hover,
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.np-item-prompt.positive:active,
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.np-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.np-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.np-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.np-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.np-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.np-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/styles/item/Item.css

@@ -0,0 +1,183 @@
+.np-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+  cursor: pointer;
+}
+.np-item:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item:active {
+  background-color: var(--color-background-screen-active);
+}
+.np-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.np-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-item-value {
+  flex: 0 0 auto;
+}
+.np-item-control {
+  flex: 0 0 auto;
+}
+.np-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.np-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.np-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.np-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.np-item-prompt {
+  display: inline-flex;
+  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;
+}
+.np-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);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.np-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.np-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.np-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.np-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.np-item-prompt.positive,
+.np-item-prompt.discount,
+.np-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a,
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a:hover,
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.np-item-prompt.positive a:active,
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.positive:hover,
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.np-item-prompt.positive:active,
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.np-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.np-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.np-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.np-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.np-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.np-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}