@transferwise/components 46.160.5 → 46.160.6

package/build/styles/MoneyInput/MoneyInput.css

@@ -10,6 +10,9 @@
   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;

package/build/styles/PhoneNumberInput/PhoneNumberInput.css

@@ -5,6 +5,9 @@
   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;
@@ -12,6 +15,10 @@
 .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);

package/build/styles/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);

package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAkTlB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAmTlB,CAAC"}

package/build/types/ExpressiveMoneyInput/hooks/useInputStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;CAClD,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,yCAAyC,gBAAgB,kBA6BtF,CAAC"}
+{"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;CAClD,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,yCAAyC,gBAAgB,kBA4BtF,CAAC"}

package/build/types/Inputs/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,UAAW,SAAQ,KAAK,CACvC,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,KAAK,6HAmBhB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,UAAW,SAAQ,KAAK,CACvC,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,KAAK,6HAoBhB,CAAC"}

package/build/types/Inputs/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAC1C,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,QAAQ,mIAmBnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAC1C,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,QAAQ,mIAoBnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/build/types/MoneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAib7B,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/PhoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAuNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAwNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/PhoneNumberInput/PhoneNumberInput.messages.d.ts

@@ -11,6 +11,11 @@ declare const _default: {
         id: string;
         defaultMessage: string;
     };
+    phoneNumberPrefix: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;
 //# sourceMappingURL=PhoneNumberInput.messages.d.ts.map

package/build/types/PhoneNumberInput/PhoneNumberInput.messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.messages.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA,wBAaG"}
+{"version":3,"file":"PhoneNumberInput.messages.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAEA,wBAkBG"}

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts

@@ -24,7 +24,7 @@ export default class TypeaheadInput<T> extends Component<TypeaheadInputProps<T>,
     componentDidMount(): void;
     componentDidUpdate(previousProps: TypeaheadInputProps<T>): void;
     recalculateWidth: () => void;
-    renderInput: () => import("react").JSX.Element;
+    renderInput: (isRTL: boolean) => import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 export {};

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,oCA4CT;IAEF,MAAM;CAyBP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA6C3B;IAEF,MAAM;CAiCP"}

package/build/types/test-utils/index.d.ts

@@ -45,6 +45,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.PhoneNumberInput.SelectInput.placeholder": string;
         "neptune.PhoneNumberInput.countryCodeLabel": string;
         "neptune.PhoneNumberInput.phoneNumberLabel": string;
+        "neptune.PhoneNumberInput.phoneNumberPrefix": string;
         "neptune.Select.searchPlaceholder": string;
         "neptune.SelectInput.noResultsFound": string;
         "neptune.StatusIcon.iconLabel.error": string;
@@ -138,6 +139,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.PhoneNumberInput.SelectInput.placeholder": string;
         "neptune.PhoneNumberInput.countryCodeLabel": string;
         "neptune.PhoneNumberInput.phoneNumberLabel": string;
+        "neptune.PhoneNumberInput.phoneNumberPrefix": string;
         "neptune.Select.searchPlaceholder": string;
         "neptune.SelectInput.noResultsFound": string;
         "neptune.StatusIcon.iconLabel.error": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.5",
+  "version": "46.160.6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css

@@ -10,6 +10,10 @@
   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;
@@ -22,6 +26,8 @@
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less

@@ -15,6 +15,11 @@
     color: var(--color-interactive-primary);
     overflow: hidden;
     margin-bottom: 0 !important;
+
+    [dir="rtl"] & {
+      display: inline-grid;
+      grid-template-columns: auto 1fr;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -30,6 +35,8 @@
     text-align: right;
     background-color: transparent;
     line-height: inherit;
+    field-sizing: content;
+    height: inherit;
 
     &:focus-visible {
       outline: none;

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -296,13 +296,14 @@ export const AmountInput = ({
   });
 
   return (
-    <div className="wds-amount-input-container">
+    <div className="wds-amount-input-container" dir="ltr">
       <div
         className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
         style={style}
       >
         <input
           ref={ref}
+          dir="auto"
           className="wds-amount-input-input"
           id={id}
           autoComplete="off"

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -10,6 +10,10 @@
   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;
@@ -22,6 +26,8 @@
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;

package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts

@@ -16,14 +16,13 @@ type InputStyleObject = {
 
 export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [
     inputElement?.current,
     value,
   ]);
 
   const getStyle = useCallback((): CSSProperties => {
     const fontSize = getFontSize(value, focus, inputWidth);
-
     return {
       fontSize,
       height: fontSize,

package/src/Field/_stories/Field.test.story.tsx

@@ -62,6 +62,22 @@ export const RTLDiff: Story = {
     const i18n = useRtlDiffI18n();
     return (
       <>
+        <Field label="Localised placeholder">
+          <Input placeholder={i18n.placeholder_ar} />
+        </Field>
+
+        <Field label="Localised value">
+          <Input defaultValue={i18n.value_ar} />
+        </Field>
+
+        <Field label="LTR placeholder (email input)">
+          <Input placeholder={i18n.placeholder_en} type="email" />
+        </Field>
+
+        <Field label="LTR value (email input)">
+          <Input defaultValue={i18n.value_en} />
+        </Field>
+
         <Field label={i18n.requiredLabel}>
           <Input defaultValue={i18n.inputValue} />
         </Field>
@@ -95,7 +111,18 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    width: 'stretch',
     i18n: {
+      placeholder_en: { ltr: 'LTR placeholder...', rtl: 'LTR placeholder...' },
+      placeholder_ar: { ltr: 'Localised placeholder...', rtl: 'نص بديل مترجم...' },
+      value_en: {
+        ltr: 'ltr@value.com',
+        rtl: 'ltr@value.com',
+      },
+      value_ar: {
+        ltr: 'localised value',
+        rtl: 'قيمة مُكيَّفة محلياً',
+      },
       requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
       optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
       descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },

package/src/Inputs/Input/Input.css

@@ -147,6 +147,25 @@
   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;

package/src/Inputs/Input/Input.less

@@ -5,6 +5,22 @@
     color: var(--color-content-tertiary);
   }
 
+  &::placeholder,
+  &:placeholder-shown{
+    [dir="rtl"] & {
+      direction: rtl !important;
+    }
+  }
+
+  &:placeholder-shown[type="email"],
+  &:placeholder-shown[type="tel"],
+  &:placeholder-shown[type="number"],
+  &:placeholder-shown[type="url"] {
+    [dir="rtl"] & {
+      direction: ltr !important;
+    }
+  }
+
   &--shape-rectangle {
     border-radius: var(--radius-small) !important;
   }

package/src/Inputs/Input/Input.tsx

@@ -26,6 +26,7 @@ export const Input = forwardRef(function Input(
   return (
     <input
       ref={reference}
+      dir="auto"
       className={clsx(className, inputClassNameBase({ size }), 'np-input', {
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',

package/src/Inputs/{_stories → InputGroup/_stories}/InputGroup.story.tsx

@@ -1,19 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
+import { Search } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Field from '../../Field';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 
-import { Input } from '../Input/Input';
-import { Flag } from '@wise/art';
-import { InputGroup } from '../InputGroup/InputGroup';
-import AvatarView from '../../AvatarView';
-import PhoneNumberInput from '../../PhoneNumberInput';
-import Button from '../../Button';
+import Field from '../../../Field';
+import AvatarView from '../../../AvatarView';
+import PhoneNumberInput from '../../../PhoneNumberInput';
+import Button from '../../../Button';
+import { Input } from '../../Input/Input';
+import { InputGroup } from '../InputGroup';
 
 export default {
   component: InputGroup,

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Search } from '@transferwise/icons';
+
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../../Button';
+import { Input } from '../../Input/Input';
+import { InputGroup } from '../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: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+        >
+          <Input placeholder={i18n.placeholder_start} />
+        </InputGroup>
+
+        <InputGroup
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                Copy
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_end} />
+        </InputGroup>
+
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                Clear
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_both} />
+        </InputGroup>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n:{
+      placeholder_both: { ltr: 'addonStart and addonEnd', rtl: 'البادئة والنهاية' },
+      placeholder_start: { ltr: 'addonStart only', rtl: 'البادئة فقط' },
+      placeholder_end: { ltr: 'addonEnd only', rtl: 'النهاية فقط' },
+
+    }
+  }),
+};

package/src/Inputs/{_stories → SearchInput/_stories}/SearchInput.story.tsx

@@ -4,11 +4,11 @@ import { useState } from 'react';
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import { Size } from '../../common';
-import Field from '../../Field';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
+import { Size } from '../../../common';
+import Field from '../../../Field';
 
-import { SearchInput } from '../SearchInput/SearchInput';
+import { SearchInput } from '../SearchInput';
 
 export default {
   component: SearchInput,

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../../common';
+import { SearchInput } from '../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: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        {/* sm — search icon (addonStart) position flips to trailing side in RTL */}
+        <SearchInput size={Size.SMALL} shape="pill" placeholder={i18n.placeholder} />
+
+        {/* md — search icon (addonStart) position flips to trailing side in RTL */}
+        <SearchInput size={Size.MEDIUM} shape="pill" placeholder={i18n.placeholder} />
+
+        {/* sm rectangle — icon flip with rectangle shape */}
+        <SearchInput size={Size.SMALL} shape="rectangle" placeholder={i18n.placeholder} />
+
+        {/* md rectangle — icon flip with rectangle shape */}
+        <SearchInput size={Size.MEDIUM} shape="rectangle" placeholder={i18n.placeholder} />
+      </>
+    );
+  },
+  ...withRTLDiff({i18n:{
+      placeholder: { ltr: 'Search', rtl: 'بحث' },
+    }}),
+};