@transferwise/components 0.0.0-experimental-fed4f10 → 0.0.0-experimental-8d08be7

package/build/types/test-utils/fake-data.d.ts

@@ -1,5 +1,4 @@
 export declare const lorem10 = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?";
-export declare const lorem20 = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.";
 export declare const lorem40 = "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?";
 export declare const lorem100 = "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum quisquam fuga dolore veritatis assumenda rerum, non, sint aliquam, excepturi architecto temporibus quis? Quo, deleniti nobis, illo necessitatibus accusamus commodi error fuga culpa sequi, incidunt voluptatum tempore quisquam quos eos modi impedit sit! Eveniet libero optio assumenda rem accusantium quod quas, recusandae, incidunt mollitia harum dolorum. Dolor porro hic mollitia accusantium vel commodi, ipsam a suscipit iusto placeat numquam excepturi amet nostrum aliquid aperiam sequi deleniti asperiores fugit cumque ipsa voluptatem culpa non libero iste. Placeat rem dolore quisquam aperiam, eligendi facere quos minima totam a ut corporis culpa! Veniam, illo!";
 export declare const lorem500 = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi commodi eos placeat aut quidem et error ex qui. Reprehenderit animi officiis magnam dicta, alias eligendi facilis sit fuga suscipit qui voluptatibus, quam harum beatae omnis sint sapiente dolorum cum officia dignissimos ab ipsa, deleniti voluptates exercitationem tempore! Fugit consequuntur ullam, similique tenetur corporis laborum sed sint, necessitatibus natus voluptatem, eius eveniet placeat quos quaerat officia officiis magni reprehenderit eaque! Dolorum odio iste vitae magnam, voluptatum pariatur unde, quod at adipisci reprehenderit dignissimos id modi quaerat rerum et dolorem. Rerum ratione beatae, repudiandae temporibus ipsam accusamus deserunt! Maiores, eos nisi laboriosam soluta rem minus expedita repudiandae accusamus aperiam rerum facere ducimus voluptas! Rerum fugit eum quasi. At sapiente quaerat, similique inventore quia magni cupiditate molestias odio voluptate quasi culpa ullam sit unde veritatis ut dicta ad nihil veniam accusamus eveniet vel placeat minus numquam nostrum! Delectus quas adipisci debitis cumque doloremque, nobis, obcaecati dolorem commodi possimus nesciunt vero? Excepturi saepe explicabo dolorem facere itaque optio, totam tempore earum culpa fugit ullam officia maiores dolores facilis voluptate consequuntur a voluptas, asperiores obcaecati voluptatem. Rerum suscipit quod nulla harum illum sequi praesentium tenetur neque architecto, molestias earum! Necessitatibus, ullam molestiae voluptas, esse dolorem officiis aut, inventore dolore provident beatae error nesciunt incidunt neque quam molestias iusto minus rem nam. Eum, provident id. Molestias vitae ex sequi veritatis totam minima labore quasi eligendi nemo, ipsa accusamus eaque quae maiores eum ipsam inventore illo voluptatem sapiente velit, quos aspernatur commodi quibusdam. A expedita, adipisci aut voluptatum repellat fugit saepe accusamus debitis, quis dolorem, incidunt corrupti magni? Inventore nulla fugit quisquam dolorum temporibus corporis error voluptates? Impedit possimus provident a vero exercitationem doloribus est voluptatibus distinctio, ipsum iste sit repellat sapiente tenetur deleniti ullam dolorem soluta accusantium! Ab, placeat rerum explicabo corporis impedit quam quos veritatis expedita hic veniam harum qui dolor neque! Laboriosam officiis, dignissimos corporis, ducimus iure nemo quisquam pariatur molestias repellat aliquam tempore impedit dolore tempora eaque accusamus fugiat facilis dolor sint laborum molestiae sapiente deserunt quasi obcaecati! Veniam, doloribus! Unde, fugiat odit sunt facere maiores nobis tempora, natus quam consectetur deleniti nesciunt perferendis aut praesentium. Libero, neque cumque beatae recusandae qui repudiandae sunt quod dolorum nemo voluptates et culpa temporibus perferendis est expedita vel laboriosam! Accusamus incidunt consectetur delectus voluptate sunt repudiandae deleniti ut consequuntur, facilis assumenda nostrum soluta unde repellat reiciendis ipsum quidem quam numquam optio voluptates eius. Molestias quibusdam assumenda earum atque ullam delectus explicabo recusandae quasi aperiam, est placeat? Officia molestiae accusamus rem placeat adipisci officiis harum vel. Neque sit qui alias magni illum! Ipsam, necessitatibus unde sit possimus ipsum quis neque voluptate reprehenderit tempore nobis quo sunt molestiae atque rerum similique natus minus eum? Maiores aspernatur ut ullam eos vitae aperiam odit deleniti eveniet delectus totam harum iste, blanditiis ab laboriosam mollitia. Esse incidunt odit voluptate minus cum molestiae reprehenderit minima voluptatibus id. Molestias aliquid repellendus dolores cupiditate, nemo reiciendis ad facilis quo est, a error culpa similique libero dolor labore! Facere laborum cupiditate iste laboriosam culpa consectetur.";

package/build/types/test-utils/fake-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fake-data.d.ts","sourceRoot":"","sources":["../../../src/test-utils/fake-data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,gFAC2D,CAAC;AAEhF,eAAO,MAAM,OAAO,4IACuH,CAAC;AAE5I,eAAO,MAAM,OAAO,sUACiT,CAAC;AAEtU,eAAO,MAAM,QAAQ,+tBACysB,CAAC;AAE/tB,eAAO,MAAM,QAAQ,2uHACqtH,CAAC;AAE3uH,eAAO,MAAM,SAAS,28OACo7O,CAAC"}
+{"version":3,"file":"fake-data.d.ts","sourceRoot":"","sources":["../../../src/test-utils/fake-data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,gFAC2D,CAAC;AAEhF,eAAO,MAAM,OAAO,sUACiT,CAAC;AAEtU,eAAO,MAAM,QAAQ,+tBACysB,CAAC;AAE/tB,eAAO,MAAM,QAAQ,2uHACqtH,CAAC;AAE3uH,eAAO,MAAM,SAAS,28OACo7O,CAAC"}

package/build/types/title/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BASrE;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAUrE;AAED,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-fed4f10",
+  "version": "0.0.0-experimental-8d08be7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,14 +94,14 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "14.24.3",
     "@wise/components-theming": "1.6.2",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "0.0.0-experimental-8d08be7",
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.21.0",
-    "@transferwise/neptune-css": "^14.24",
+    "@transferwise/neptune-css": "0.0.0-experimental-8d08be7",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/alert/Alert.story.tsx

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { lorem40 } from '../test-utils';
-import { Sentiment } from '../common';
+import { Sentiment, Status } from '../common';
 import { Button, Field, SelectInput } from '..';
 import Alert, { AlertArrowPosition, type AlertProps as FullAlertProps } from './Alert';
 
@@ -33,6 +33,7 @@ export default {
           Sentiment.NEUTRAL,
           Sentiment.WARNING,
           Sentiment.PENDING,
+          Status.PENDING,
         ],
       },
     },
@@ -51,7 +52,8 @@ export const Variants: Story = {
       { type: Sentiment.NEGATIVE, title: 'Negative Title' },
       { type: Sentiment.NEUTRAL, title: 'Neutral Title' },
       { type: Sentiment.WARNING, title: 'Warning Title' },
-      { type: Sentiment.PENDING, title: 'Pending Title' },
+      { type: Sentiment.PENDING, title: 'Pending Sentiment Title' },
+      { type: Status.PENDING, title: 'Pending Status Title' },
     ];
 
     return (
@@ -59,7 +61,7 @@ export const Variants: Story = {
         {variants.map((variant) => (
           <Alert
             key={variant.type}
-            type={variant.type}
+            type={variant.type as AlertProps['type']}
             title={variant.title}
             message={message}
             action={

package/src/alert/Alert.tsx

@@ -2,7 +2,14 @@ import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 
 import Body from '../body/Body';
-import { CloseButton, Sentiment, Size, Typography, WDS_LIVE_REGION_DELAY_MS } from '../common';
+import {
+  CloseButton,
+  Sentiment,
+  Size,
+  Status,
+  Typography,
+  WDS_LIVE_REGION_DELAY_MS,
+} from '../common';
 
 import StatusIcon from '../statusIcon';
 import Title from '../title/Title';
@@ -26,8 +33,10 @@ type AlertTypeResolved = `${
   | Sentiment.POSITIVE
   | Sentiment.NEUTRAL
   | Sentiment.WARNING
+  | Sentiment.NEGATIVE
+  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING
   | Sentiment.PENDING
-  | Sentiment.NEGATIVE}`;
+  | Status.PENDING}`;
 export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
 
 export enum AlertArrowPosition {

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ProfileType, Sentiment } from '../common';
+import { ProfileType, Sentiment, Status } from '../common';
 
 import AvatarWrapper from './AvatarWrapper';
 
@@ -96,7 +96,7 @@ export const All: Story = {
           </div>
           Default
           <div>
-            <AvatarWrapper badgeStatusIcon={Sentiment.PENDING} avatarProps={avatarProps} />
+            <AvatarWrapper badgeStatusIcon={Status.PENDING} avatarProps={avatarProps} />
           </div>
         </div>
       </div>

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -10,6 +10,7 @@ import {
   Size,
   Sentiment,
   getInitials,
+  Status,
 } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
@@ -17,7 +18,7 @@ interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
   ariaLabel?: string;
   altText?: string;
-  statusIcon?: Sentiment;
+  statusIcon?: Sentiment | Status.PENDING;
 }
 
 const OptionalBadge = ({
@@ -66,7 +67,7 @@ export type AvatarWrapperProps = {
   | {
       badgeUrl?: never;
       badgeAltText?: never;
-      badgeStatusIcon: Sentiment;
+      badgeStatusIcon: Sentiment | Status.PENDING;
     }
   | {
       badgeUrl?: never;

package/src/common/propsValues/sentiment.ts

@@ -3,6 +3,7 @@ export enum Sentiment {
   NEUTRAL = 'neutral',
   POSITIVE = 'positive',
   WARNING = 'warning',
+  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING
   PENDING = 'pending',
 
   /**

package/src/index.ts

@@ -109,7 +109,6 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type { ItemProps, ItemAdditionalInfoProps, ItemCheckboxProps } from './item';
 
 /**
  * Components
@@ -212,7 +211,6 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
-export { default as Item } from './table';
 
 /**
  * Hooks

package/src/inputs/Input.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/inputs/TextArea.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/main.css

@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 72px !important;
   height: var(--size-72) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -2620,190 +2648,6 @@ 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);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  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 {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.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: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.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);
-  display: inline;
-}
-.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);
@@ -4207,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4218,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
   letter-spacing: -0.02em;
   line-height: 122%;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/main.less

@@ -39,7 +39,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/popover/Popover.css

@@ -24,8 +24,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -34,6 +32,34 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/statusIcon/StatusIcon.docs.mdx

@@ -10,7 +10,7 @@ By default, the component offers accessible names for all the icons, to ensure t
 Sentiment.NEGATIVE -> 'Error:'
 Sentiment.POSITIVE -> 'Success:'
 Sentiment.WARNING -> 'Warning:'
-Sentiment.PENDING -> 'Pending:'
+Status.PENDING -> 'Pending:'
 Sentiment.NEUTRAL -> 'Information:'
 
 // deprecated

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,7 +1,8 @@
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import StatusIcon, { type StatusIconProps } from '.';
+import { StatusIconSentiment } from './StatusIcon';
 
 mockMatchMedia();
 
@@ -29,12 +30,13 @@ describe('StatusIcon', () => {
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
     [Sentiment.PENDING, Sentiment.PENDING],
+    [Status.PENDING, Status.PENDING],
     [Sentiment.POSITIVE, Sentiment.POSITIVE],
     [Sentiment.WARNING, Sentiment.WARNING],
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
     (sentiment, expectedClass) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();
@@ -48,6 +50,10 @@ describe('StatusIcon', () => {
 
     renderStatusIcon({ sentiment: Sentiment.PENDING });
     expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Status.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
   });
 
   it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
@@ -68,13 +74,13 @@ describe('StatusIcon', () => {
       ['Error', Sentiment.NEGATIVE],
       ['Success', Sentiment.POSITIVE],
       ['Warning', Sentiment.WARNING],
-      ['Pending', Sentiment.PENDING],
+      ['Pending', Status.PENDING],
       ['Information', Sentiment.NEUTRAL],
       ['Error', Sentiment.ERROR],
       ['Information', Sentiment.INFO],
       ['Success', Sentiment.SUCCESS],
     ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
     });