@transferwise/components 46.160.5 → 46.160.7

package/src/main.css

@@ -22607,6 +22607,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
@@ -23794,10 +23813,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}
 .tw-instructions {
   /* Reset */
   margin: 0;
@@ -24208,6 +24242,9 @@ button.np-link {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;
@@ -24276,6 +24313,10 @@ button.np-link {
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -24288,6 +24329,8 @@ button.np-link {
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -24552,6 +24595,9 @@ button.np-link {
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -24559,6 +24605,10 @@ button.np-link {
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);
@@ -24871,6 +24921,23 @@ button.np-link {
     grid-column: span 3;
   }
 }
+.wds-prompt__dismiss {
+  position: relative;
+}
+.wds-prompt__dismiss:before {
+  --size: calc(var(--size-24) + var(--Prompt-padding-x, var(--padding-x-small)) * 2);
+  --offset: calc(-1 * var(--Prompt-padding-x, var(--padding-x-small)));
+  content: "";
+  position: absolute;
+  inset: calc(-1 * 8px);
+  inset: var(--offset);
+  inline-size: calc(24px + 8px * 2);
+  inline-size: var(--size);
+  block-size: calc(24px + 8px * 2);
+  block-size: var(--size);
+  border-radius: 10px;
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
+}
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
   --Prompt-padding-x: var(--padding-x-small);

package/src/Inputs/_stories/InputGroup.test.story.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Search } from '@transferwise/icons';
-
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Button from '../../Button';
-import { Input } from '../Input/Input';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-export default {
-  component: InputGroup,
-  title: 'Forms/InputGroup/Tests',
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof InputGroup>;
-
-type Story = StoryObj<typeof InputGroup>;
-
-/**
- * InputGroup positions addons at the logical start or end of an input.
- * In RTL mode the start and end sides are mirrored, so an addonStart icon
- * should appear on the right and an addonEnd button should appear on the left.
- * All three placement combinations are included to verify each case.
- */
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InputGroup
-        addonStart={{
-          content: <Search size={24} />,
-          initialContentWidth: 24,
-        }}
-      >
-        <Input placeholder="addonStart only" />
-      </InputGroup>
-
-      <InputGroup
-        addonEnd={{
-          content: (
-            <Button v2 size="sm">
-              Copy
-            </Button>
-          ),
-          interactive: true,
-          padding: 'sm',
-        }}
-      >
-        <Input placeholder="addonEnd only" />
-      </InputGroup>
-
-      <InputGroup
-        addonStart={{
-          content: <Search size={24} />,
-          initialContentWidth: 24,
-        }}
-        addonEnd={{
-          content: (
-            <Button v2 size="sm">
-              Clear
-            </Button>
-          ),
-          interactive: true,
-          padding: 'sm',
-        }}
-      >
-        <Input placeholder="addonStart and addonEnd" />
-      </InputGroup>
-    </>
-  ),
-  ...withRTLDiff(),
-};

package/src/Inputs/_stories/SearchInput.test.story.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import { Size } from '../../common';
-import { SearchInput } from '../SearchInput/SearchInput';
-
-export default {
-  component: SearchInput,
-  title: 'Forms/SearchInput/Tests',
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof SearchInput>;
-
-type Story = StoryObj<typeof SearchInput>;
-
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* sm — search icon (addonStart) position flips to trailing side in RTL */}
-      <SearchInput size={Size.SMALL} shape="pill" placeholder="Search" />
-
-      {/* md — search icon (addonStart) position flips to trailing side in RTL */}
-      <SearchInput size={Size.MEDIUM} shape="pill" placeholder="Search" />
-
-      {/* sm rectangle — icon flip with rectangle shape */}
-      <SearchInput size={Size.SMALL} shape="rectangle" placeholder="Search" />
-
-      {/* md rectangle — icon flip with rectangle shape */}
-      <SearchInput size={Size.MEDIUM} shape="rectangle" placeholder="Search" />
-    </>
-  ),
-  ...withRTLDiff(),
-};