@transferwise/components 46.160.6 → 46.160.8

package/build/styles/styles/less/popovers.css

@@ -72,6 +72,7 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -79,6 +80,34 @@ button.close {
   box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
   position: absolute;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .popover,
 .np-theme-personal--bright-green .popover,
 .np-theme-personal--dark .popover {
@@ -236,6 +265,7 @@ button.close {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -293,9 +323,38 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-content {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-content {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .popover-content > :last-child {
   margin-block-end: 0;
 }

package/build/styles/styles/less/tooltip.css

@@ -51,6 +51,7 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
   padding-block: 16px;
@@ -65,6 +66,34 @@
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .tooltip-inner,
 .np-theme-personal--bright-green .tooltip-inner,
 .np-theme-personal--dark .tooltip-inner {

package/build/types/Prompt/InfoPrompt/InfoPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAEtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA2FjB,CAAC"}
+{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAElG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCAkGjB,CAAC"}

package/build/types/Prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/E,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;gHAEgH;AAChH,eAAO,MAAM,eAAe;IA/B1B;;;OAGG;gBACS,SAAS;IACrB;;;OAGG;eACQ,QAAQ;IACnB;;OAEG;WACI,SAAS;IAChB;;OAEG;cACO,SAAS;IACnB;;OAEG;gBACS,MAAM,IAAI;IACtB;;OAEG;oBACa,MAAM;kDAqDvB,CAAC"}
+{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/E,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;gHAEgH;AAChH,eAAO,MAAM,eAAe;IA/B1B;;;OAGG;gBACS,SAAS;IACrB;;;OAGG;eACQ,QAAQ;IACnB;;OAEG;WACI,SAAS;IAChB;;OAEG;cACO,SAAS;IACnB;;OAEG;gBACS,MAAM,IAAI;IACtB;;OAEG;oBACa,MAAM;kDAsDvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.6",
+  "version": "46.160.8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
     "@transferwise/less-config": "3.2.0",
-    "@wise/components-theming": "1.10.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.3"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Body from '../Body';
+import Container from '../../Container';
+import Title from '../../Title';
+import { Typography } from '../../common/PropsValues/typography';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+export default {
+  title: 'Typography/Body/Tests',
+  component: Body,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Body>;
+
+type Story = StoryObj<typeof Body>;
+
+const HyphenationTest = {
+  render: () => (
+    <Container size="compact">
+      <Title type={Typography.TITLE_SUBSECTION}>German (de)</Title>
+      <div lang="de">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Donaudampfschifffahrtsgesellschaftskapitän Überweisungsgebühren
+          Rechtsschutzversicherungsgesellschaften Kraftfahrzeughaftpflichtversicherung
+          Geschwindigkeitsbeschränkung Aufmerksamkeitsdefizithyperaktivitätsstörung
+          Bundesausbildungsförderungsgesetz
+          Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Dutch (nl)</Title>
+      <div lang="nl">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Verzekeringsmaatschappij arbeidsongeschiktheidsverzekering
+          kindercarnavalsoptochtvoorbereidingswerkzaamheden aansprakelijkheidsverzekering
+          gemeenteraadsverkiezingen rijkswaterstaatwerkzaamheden ovaboratoriumonderzoeksresultaten
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Ukrainian (uk)</Title>
+      <div lang="uk">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          Найбільш міжнародний рахунок відповідальність працевлаштування перевантажувальний Найбільш
+          міжнародний рахунок відповідальність працевлаштування перевантажувальний Найбільш
+          міжнародний рахунок відповідальність працевлаштування перевантажувальний.
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Japanese (ja) — no hyphens</Title>
+      <div lang="ja">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          私たちは世界で最も国際的なアカウントを構築しています。送金手数料についてもっと知りたい方はこちらをご覧ください。
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Chinese Simplified (zh-CN) — no hyphens</Title>
+      <div lang="zh-CN">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          我们正在建设世界上最国际化的账户。如果您想了解更多关于汇款费用的信息请查看这里。
+        </Body>
+      </div>
+
+      <Title type={Typography.TITLE_SUBSECTION}>Thai (th) — no hyphens</Title>
+      <div lang="th">
+        <Body as="p" type={Typography.BODY_DEFAULT}>
+          เรากำลังสร้างบัญชีที่เป็นสากลที่สุดในโลก
+          หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับค่าธรรมเนียมการโอนเงิน
+        </Body>
+      </div>
+    </Container>
+  ),
+};
+
+export const Hyphenation: Story = {
+  ...HyphenationTest,
+};
+
+export const HyphenationMobile: Story = {
+  ...HyphenationTest,
+  ...withVariantConfig(['mobile'], HyphenationTest),
+};

package/src/Inputs/Input/Input.css

@@ -45,11 +45,40 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
   padding-block-end: 12px;
   padding-block-end: var(--size-12);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
@@ -63,9 +92,38 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-sm {
     block-size: 64px !important;
@@ -79,9 +137,38 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-md {
     block-size: 72px !important;
@@ -95,6 +182,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);

package/src/Inputs/TextArea/TextArea.css

@@ -45,11 +45,40 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
   padding-block-end: 12px;
   padding-block-end: var(--size-12);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
@@ -63,9 +92,38 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-sm {
     block-size: 64px !important;
@@ -79,9 +137,38 @@
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-md {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 @media (max-width: 320px) {
   .np-form-control--size-md {
     block-size: 72px !important;
@@ -95,6 +182,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);

package/src/Popover/Popover.css

@@ -29,6 +29,7 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);

package/src/Prompt/InfoPrompt/InfoPrompt.test.tsx

@@ -274,11 +274,12 @@ describe('InfoPrompt', () => {
       expect(window.location.assign).not.toHaveBeenCalled();
     });
 
-    it('should not navigate if no action href is provided', () => {
+    it('should call onClick on touch tap when action has no href', () => {
+      const onClick = jest.fn();
       render(
         <InfoPrompt
           {...defaultProps}
-          action={{ label: 'Click me', onClick: jest.fn() }}
+          action={{ label: 'Click me', onClick }}
           data-testid="prompt"
         />,
       );
@@ -286,8 +287,61 @@ describe('InfoPrompt', () => {
 
       fireEvent.touchStart(prompt);
       fireEvent.touchEnd(prompt);
+      expect(onClick).toHaveBeenCalledTimes(1);
       expect(window.location.assign).not.toHaveBeenCalled();
       expect(window.open).not.toHaveBeenCalled();
     });
+
+    it('should call onClick and navigate when action has both href and onClick', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      fireEvent.touchEnd(prompt);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(window.location.assign).toHaveBeenCalledWith('/learn-more');
+    });
+
+    it('should not fire action when tapping dismiss button', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+          onDismiss={jest.fn()}
+        />,
+      );
+      const dismissButton = screen.getByRole('button', { name: 'Close', hidden: true });
+
+      fireEvent.touchStart(dismissButton);
+      fireEvent.touchEnd(dismissButton);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
+
+    it('should not double-fire onClick when tapping the action element directly', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+        />,
+      );
+      const actionLink = screen.getByRole('link', { name: 'Learn more', hidden: true });
+
+      fireEvent.touchStart(actionLink);
+      fireEvent.touchEnd(actionLink);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
   });
 });

package/src/Prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,4 +1,4 @@
-import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';
+import { Children, HTMLAttributes, ReactNode, TouchEvent, isValidElement, useState } from 'react';
 import { LiveRegion, Sentiment, Typography } from '../../common';
 import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
@@ -103,16 +103,23 @@ export const InfoPrompt = ({
       ? Sentiment.POSITIVE
       : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);
 
-  const handleTouchStart = () => {
+  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.wds-prompt__dismiss') || target.closest('.wds-info-prompt__action')) {
+      return;
+    }
     setShouldFire(true);
   };
 
   const handleTouchEnd = () => {
-    if (shouldFire && action?.href) {
-      if (action.target === '_blank') {
-        window.top?.open(action.href, '_blank', 'noopener, noreferrer');
-      } else {
-        window.top?.location.assign(action.href);
+    if (shouldFire && action) {
+      (action.onClick as (() => void) | undefined)?.();
+      if (action.href) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href, '_blank', 'noopener, noreferrer');
+        } else {
+          window.top?.location.assign(action.href);
+        }
       }
     }
     setShouldFire(false);

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx

@@ -236,7 +236,11 @@ export const WithTitle: Story = {
 
 /**
  * Use the `action` prop to add a clickable link below the message.
- * Actions can have an `href` for navigation or an `onClick` for custom behavior.
+ * Actions can have an `href` for navigation, an `onClick` for custom behavior, or both.
+ *
+ * On touch devices the entire prompt surface acts as a tap target for the action,
+ * making it easier to interact with on small screens. A scroll gesture (touch move)
+ * cancels the tap. Tapping the dismiss button does not trigger the action.
  */
 export const WithAction: Story = {
   render: (args: InfoPromptProps) => (
@@ -322,6 +326,7 @@ export const Dismissible: Story = {
             sentiment="success"
             title="Payment successful"
             description="Your payment was successful."
+            action={{ label: 'Learn more', href: '#', target: '_blank' }}
             onDismiss={() => setShowPrompt(false)}
           />
         ) : (

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -51,3 +51,20 @@
     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));
+}

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -46,4 +46,19 @@
       }
     }
   }
+
+  &__dismiss {
+    position: relative;
+
+    &: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: var(--offset);
+      width: var(--size);
+      height: var(--size);
+      border-radius: var(--Prompt-border-radius, var(--radius-small));
+    }
+  }
 }