@transferwise/components 0.0.0-experimental-76b7ab6 → 0.0.0-experimental-fd6654d

package/build/index.js

@@ -274,6 +274,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,191 @@ 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);
+}
+.np-item-interactive {
+  cursor: pointer;
+}
+.np-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item-interactive: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);
@@ -5165,9 +5350,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 50px;
   padding: 2px;
   border-radius: 16px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }
 .np-switch:focus {
   outline: none;

package/build/styles/item/Item.css

@@ -0,0 +1,185 @@
+.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);
+}
+.np-item-interactive {
+  cursor: pointer;
+}
+.np-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item-interactive: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));
+}

package/build/styles/main.css

@@ -2648,6 +2648,191 @@ 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);
+}
+.np-item-interactive {
+  cursor: pointer;
+}
+.np-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item-interactive: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);
@@ -5165,9 +5350,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 50px;
   padding: 2px;
   border-radius: 16px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }
 .np-switch:focus {
   outline: none;

package/build/styles/switch/Switch.css

@@ -4,9 +4,6 @@
   width: 50px;
   padding: 2px;
   border-radius: 16px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }
 .np-switch:focus {
   outline: none;