@transferwise/components 0.0.0-experimental-45bc551 → 0.0.0-experimental-358e009

package/build/types/tabs/Tabs.d.ts

@@ -1,43 +1,31 @@
 import { Component } from 'react';
-import { Size, Width } from '../common';
+import { Width } from '../common';
 import { Swipe } from './utils';
 export interface TabItem {
     title: string;
     content: React.ReactNode;
     disabled: boolean;
 }
-type TabsTransitionSpacing = 'default' | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
 export interface TabsProps {
     tabs: TabItem[];
     selected: number;
     name: string;
-    animatePanelsOnClick?: boolean;
     changeTabOnSwipe?: boolean;
     className?: string;
-    transitionSpacing?: TabsTransitionSpacing;
     headerWidth?: `${Width}`;
-    id?: string;
     onTabSelect: (index: number) => void;
 }
 interface TabsState {
     start: Swipe | null;
-    translateX: number;
-    translateFrom: number;
-    translateTo: number;
     translateLineX: string | null;
-    isAnimating: boolean;
     isSwiping: boolean;
     isScrolling: boolean;
-    lastSwipeVelocity: number;
     fullWidthTabs: boolean;
-    currentSwipe: Swipe[];
-    selectedTabIndex: number;
 }
 export default class Tabs extends Component<TabsProps, TabsState> {
     props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
     static defaultProps: {
         changeTabOnSwipe: true;
-        transitionSpacing: "default";
         headerWidth: Width.BLOCK;
     };
     containerReference: import("react").RefObject<HTMLDivElement>;
@@ -45,10 +33,9 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     container: HTMLDivElement | null;
     containerWidth: number;
     tabRefs: (HTMLLIElement | null)[];
-    get filteredTabsLength(): number;
     get MAX_INDEX(): number;
     componentDidMount(): void;
-    componentDidUpdate(previousProps: TabsProps, previousState: TabsState): void;
+    componentDidUpdate(previousProps: TabsProps): void;
     componentWillUnmount(): void;
     handleResize: () => void;
     setContainerRefAndWidth: (node: HTMLDivElement | null) => void;
@@ -60,17 +47,8 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     getTabLineWidth: () => string;
     getTabToSelect: (selected: number, start: Swipe, end: Swipe) => number;
     swipedOverHalfOfContainer: (difference: number) => boolean;
-    calculateApplicableDragDifference: ({ currentSelected, nextSelected, start, end, }: {
-        currentSelected: number;
-        nextSelected: number;
-        start: Swipe;
-        end: Swipe;
-    }) => number | false;
     switchTab: (index: number) => void;
-    getTabIndexWithoutDisabledTabs(index: number): number;
-    animateToTab: (index: number, instant?: boolean) => void;
     animateLine: (index: number) => void;
-    animatePanel: (index: number, instant?: boolean) => void;
     disableScroll: (event: Event) => void;
     handleTabClick: (index: number) => () => void;
     onKeyDown: (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => void;

package/build/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAa,MAAM,WAAW,CAAC;AAMnD,OAAO,EAOL,KAAK,EACN,MAAM,SAAS,CAAC;AAIjB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,qBAAqB,GACtB,SAAS,GACT,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;AAElE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAUD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACvD,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,YAAY;;;;MAIY;IAE/B,kBAAkB,4CAA+B;gBAErC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;IAkBhC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IAExC,cAAc,SAAK;IAEnB,OAAO,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAM;IAEvC,IAAI,kBAAkB,WAErB;IAED,IAAI,SAAS,WAEZ;IAED,iBAAiB;IAWjB,kBAAkB,CAAC,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS;IAmCrE,oBAAoB;IAMpB,YAAY,aAMV;IAEF,uBAAuB,GAAI,MAAM,cAAc,GAAG,IAAI,UAGpD;IAEF,iBAAiB,GAAI,MAAM,cAAc,GAAG,IAAI,UAQ9C;IAEF,aAAa,GAAI,OAAO,MAAM,aAI5B;IAEF,eAAe,eAMb;IAEF,wBAAwB,GAAI,kBAAkB,MAAM,YAKlD;IAEF,WAAW,aAeT;IAEF,eAAe,eAWb;IAMF,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,KAAK,EAAE,KAAK,KAAK,KAAG,MAAM,CA4BnE;IAEF,yBAAyB,GAAI,YAAY,MAAM,aAA6C;IAE5F,iCAAiC,GAAI,gDAKlC;QACD,eAAe,EAAE,MAAM,CAAC;QACxB,YAAY,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC;QACb,GAAG,EAAE,KAAK,CAAC;KACZ,oBAkBC;IAEF,SAAS,GAAI,OAAO,MAAM,UAGxB;IAEF,8BAA8B,CAAC,KAAK,EAAE,MAAM;IAI5C,YAAY,GAAI,OAAO,MAAM,EAAE,UAAU,OAAO,UAI9C;IAEF,WAAW,GAAI,OAAO,MAAM,UAM1B;IAGF,YAAY,GAAI,OAAO,MAAM,EAAE,iBAAe,UAY5C;IAEF,aAAa,GAAI,OAAO,KAAK,UAM3B;IAEF,cAAc,GAAI,OAAO,MAAM,gBAE7B;IAEF,SAAS,GAAI,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,UAIvE;IAEF,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAYvD;IAEF,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAoDtD;IAEF,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAwCrD;IAEF,MAAM;CAkKP"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAa,MAAM,WAAW,CAAC;AAM7C,OAAO,EAKL,KAAK,EACN,MAAM,SAAS,CAAC;AAIjB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACvD,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,YAAY;;;MAGY;IAE/B,kBAAkB,4CAA+B;gBAErC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;IAWhC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IAExC,cAAc,SAAK;IAEnB,OAAO,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAM;IAEvC,IAAI,SAAS,WAEZ;IAED,iBAAiB;IAWjB,kBAAkB,CAAC,aAAa,EAAE,SAAS;IA8B3C,oBAAoB;IAMpB,YAAY,aAEV;IAEF,uBAAuB,GAAI,MAAM,cAAc,GAAG,IAAI,UAGpD;IAEF,iBAAiB,GAAI,MAAM,cAAc,GAAG,IAAI,UAQ9C;IAEF,aAAa,GAAI,OAAO,MAAM,aAI5B;IAEF,eAAe,eAMb;IAEF,wBAAwB,GAAI,kBAAkB,MAAM,YAKlD;IAEF,WAAW,aAeT;IAEF,eAAe,eAWb;IAMF,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,KAAK,EAAE,KAAK,KAAK,KAAG,MAAM,CA4BnE;IAEF,yBAAyB,GAAI,YAAY,MAAM,aAA6C;IAE5F,SAAS,GAAI,OAAO,MAAM,UAGxB;IAEF,WAAW,GAAI,OAAO,MAAM,UAM1B;IAEF,aAAa,GAAI,OAAO,KAAK,UAM3B;IAEF,cAAc,GAAI,OAAO,MAAM,gBAE7B;IAEF,SAAS,GAAI,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,UAIvE;IAEF,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CASvD;IAEF,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgCtD;IAEF,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CA6BrD;IAEF,MAAM;CAgFP"}

package/build/types/tabs/utils.d.ts

@@ -8,6 +8,4 @@ export declare const getSwipeDifference: (start: Swipe, end: Swipe, axis?: "x" |
 export declare const swipedLeftToRight: (start: Swipe, end: Swipe) => boolean;
 export declare const swipedRightToLeft: (start: Swipe, end: Swipe) => boolean;
 export declare const swipeShouldChangeTab: (start: Swipe, end: Swipe) => boolean;
-export declare function getVelocity(coords: Swipe[]): number;
-export declare const getElasticDragDifference: (difference: number) => number;
 //# sourceMappingURL=utils.d.ts.map

package/build/types/tabs/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,UAU1C;AAOD,eAAO,MAAM,wBAAwB,GAAI,YAAY,MAAM,WACmB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-45bc551",
+  "version": "0.0.0-experimental-358e009",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,8 +85,8 @@
     "storybook": "^10.3.0-alpha.0",
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
-    "@transferwise/neptune-css": "14.26.1",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.26.1",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
@@ -107,7 +107,6 @@
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.3",
     "@react-aria/overlays": "^3.31.0",
-    "@react-spring/web": "~10.0.3",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",

package/src/listItem/ListItem.spec.tsx

@@ -1526,9 +1526,10 @@ describe('ListItem', () => {
         );
         expect(screen.queryByText(prompt)).not.toBeInTheDocument();
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(
-          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
-        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
       });
 
       it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
@@ -1536,9 +1537,10 @@ describe('ListItem', () => {
           <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
         );
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(
-          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
-        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
       });
     });
   });

package/src/main.css

@@ -920,6 +920,83 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  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;
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt__media-wrapper {
+  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);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
+}
 .np-dot {
   --np-dot-size: 14px;
   position: relative;
@@ -5335,103 +5412,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
-.wds-prompt {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  display: flex;
-  word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
-  text-align: left;
-  word-break: break-word;
-}
-.wds-prompt__content-wrapper {
-  display: grid;
-  grid-gap: 16px;
-  grid-gap: var(--Prompt-gap, var(--size-16));
-  gap: 16px;
-  gap: var(--Prompt-gap, var(--size-16));
-  grid-template-columns: auto 1fr;
-  width: 100%;
-}
-.wds-prompt__media-wrapper {
-  align-self: flex-start;
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-}
-.wds-prompt__media-wrapper .tw-icon-tags,
-.wds-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
-.wds-prompt__actions-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  gap: var(--Prompt-actions-gap, var(--size-8));
-  grid-column-start: 2;
-}
-@media (max-width: 991px) {
-  .wds-prompt__actions-wrapper {
-    grid-column: span 2;
-    width: 100%;
-  }
-}
-.wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
-  display: inline-flex;
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt:has(a):hover,
-.wds-inline-prompt:has(button):hover {
-  background-color: var(--color-sentiment-background-surface-hover);
-}
-.wds-inline-prompt:has(a):active,
-.wds-inline-prompt:has(button):active {
-  background-color: var(--color-sentiment-background-surface-active);
-}
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:hover,
-.wds-inline-prompt button:hover {
-  color: var(--color-sentiment-content-primary-hover);
-}
-.wds-inline-prompt a:active,
-.wds-inline-prompt button:active {
-  color: var(--color-sentiment-content-primary-active);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
-  stroke: currentColor;
-}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/src/main.less

@@ -6,6 +6,7 @@
 @import "./actionOption/ActionOption.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
+@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
@@ -60,8 +61,6 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
-@import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
-@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -1,9 +1,18 @@
 .wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
   display: inline-flex;
+  text-align: left;
+  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;
 }
 .wds-inline-prompt:has(a),
 .wds-inline-prompt:has(button) {
@@ -45,6 +54,18 @@
   position: absolute;
   inset: 0;
 }
+.wds-inline-prompt__media-wrapper {
+  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);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
   width: 16px;
   width: var(--size-16);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -1,9 +1,13 @@
 .wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
-
   display: inline-flex;
+  text-align: left;
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: var(--padding-x-small);
   border-radius: var(--radius-small);
+  word-break: break-word;
+  overflow-wrap: break-word;
 
   &:has(a),
   &:has(button) {
@@ -50,6 +54,17 @@
     }
   }
 
+  &__media-wrapper {
+    padding-right: calc(var(--size-12) / 2);
+    padding-top: calc(var(--size-4) - 1px);
+    padding-bottom: calc(var(--size-4) - 1px);
+
+    .tw-icon-tags,
+    .tw-icon-confetti {
+      color: var(--color-sentiment-content-primary);
+    }
+  }
+
   .wds-inline-prompt-process-indicator {
     width: var(--size-16);
     height: var(--size-16);

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -32,8 +32,8 @@ describe('InlinePrompt', () => {
     describe(sentiment, () => {
       it('should apply correct styles', () => {
         render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
-        expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
-          `wds-prompt--${sentiment === Sentiment.POSITIVE ? 'success' : sentiment}`,
+        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          `wds-inline-prompt--${sentiment}`,
         );
       });
 
@@ -47,7 +47,7 @@ describe('InlinePrompt', () => {
       describe('muted state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} />);
-          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
             'wds-inline-prompt--muted',
           );
           expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('InlinePrompt', () => {
       describe('loading state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading />);
-          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
             'wds-inline-prompt--loading',
           );
           expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
@@ -134,7 +134,7 @@ describe('InlinePrompt', () => {
       );
       const el = screen.getByTestId('prompt');
       // The component should have both the original class and the SentimentSurface class
-      expect(el).toHaveClass('wds-prompt--success');
+      expect(el).toHaveClass('wds-inline-prompt--positive');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
 
@@ -143,7 +143,7 @@ describe('InlinePrompt', () => {
         <InlinePrompt {...defaultProps} sentiment={Sentiment.NEGATIVE} data-testid="prompt" />,
       );
       const el = screen.getByTestId('prompt');
-      expect(el).toHaveClass('wds-prompt--negative');
+      expect(el).toHaveClass('wds-inline-prompt--negative');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
   });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -4,7 +4,7 @@ import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
-import { PrimitivePrompt } from '../PrimitivePrompt';
+import SentimentSurface from '../../sentimentSurface';
 
 export type InlinePromptProps = {
   /**
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
   mediaLabel,
   width = 'auto',
   'data-testid': dataTestId,
-  ...restProps
+  ...rest
 }: InlinePromptProps) => {
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
 
@@ -87,12 +87,12 @@ export const InlinePrompt = ({
   };
 
   return (
-    <PrimitivePrompt
+    <SentimentSurface
       sentiment={surfaceSentiment}
-      media={renderMedia()}
       data-testid={dataTestId}
       className={clsx(
         'wds-inline-prompt',
+        `wds-inline-prompt--${sentiment}`,
         {
           'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
@@ -100,9 +100,10 @@ export const InlinePrompt = ({
         },
         className,
       )}
-      {...restProps}
+      {...rest}
     >
+      <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
       <Body>{children}</Body>
-    </PrimitivePrompt>
+    </SentimentSurface>
   );
 };

package/src/tabs/Tabs.spec.tsx

@@ -1,4 +1,3 @@
-import { Globals } from '@react-spring/web';
 import { render, screen, userEvent } from '../test-utils';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -18,21 +17,13 @@ function generateTabs(tabsStatus = defaultTabsStatus) {
   }));
 }
 
-beforeAll(() => {
-  Globals.assign({
-    skipAnimation: true,
-  });
-});
-
 describe('Tabs', () => {
   const initialProps: TabsProps = {
-    animatePanelsOnClick: true,
     tabs: generateTabs(),
     changeTabOnSwipe: true,
     name: 'testName',
     headerWidth: 'block',
     selected: 0,
-    transitionSpacing: 'default',
     onTabSelect: jest.fn(),
     className: 'custom-class-name',
   };
@@ -65,19 +56,6 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
   });
 
-  describe('transitionSpacing', () => {
-    test.each([
-      ['default', '100%'],
-      ['xs', '8px'],
-      ['sm', '16px'],
-      ['md', '24px'],
-      ['lg', '32px'],
-    ] as const)('should respect `%s`', (input, width) => {
-      render(<Tabs {...initialProps} transitionSpacing={input} />);
-      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
-    });
-  });
-
   it('should render correct number of tabs', () => {
     render(<Tabs {...initialProps} />);
     expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);

package/src/tabs/Tabs.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Size, Width } from '../common';
+import { Width } from '../common';
 
 import Tabs from './Tabs';
 
@@ -15,7 +15,6 @@ export const Basic = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       tabs={[
         {
           title: 'Title 1',
@@ -44,7 +43,6 @@ export const Basic = () => {
         },
       ]}
       selected={selected}
-      animatePanelsOnClick
       onTabSelect={(index) => setSelected(index)}
     />
   );
@@ -56,7 +54,6 @@ export const AutoTabHeaderWidth = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       headerWidth={Width.AUTO}
       tabs={[
         {
@@ -92,44 +89,3 @@ export const AutoTabHeaderWidth = () => {
     />
   );
 };
-
-export const NoPanelAnimation = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      animatePanelsOnClick={false}
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};