@transferwise/components 0.0.0-experimental-e94d625 → 0.0.0-experimental-8e1de95

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Width } from '../../common';
 import Tabs from '..';
 
@@ -12,61 +12,101 @@ export default {
 
 type Story = StoryObj<typeof Tabs>;
 
-const defaultTabs = [
-  { title: 'First tab', disabled: false, content: <div className="p-a-2">First content</div> },
-  { title: 'Second tab', disabled: false, content: <div className="p-a-2">Second content</div> },
-  { title: 'Third tab', disabled: false, content: <div className="p-a-2">Third content</div> },
-];
-
 /**
  * The tab list is horizontal: tab order, the active indicator translateX, and
  * swipe direction all flip between LTR and RTL. The indicator uses a negated
  * translateX in RTL mode. This diff verifies the layout mirrors correctly.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Block width — first tab selected</h4>
-        <Tabs
-          name="rtl-block-first"
-          tabs={defaultTabs}
-          selected={0}
-          headerWidth={Width.BLOCK}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Block width — second tab selected</h4>
-        <Tabs
-          name="rtl-block-second"
-          tabs={defaultTabs}
-          selected={1}
-          headerWidth={Width.BLOCK}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Auto width — first tab selected</h4>
-        <Tabs
-          name="rtl-auto-first"
-          tabs={defaultTabs}
-          selected={0}
-          headerWidth={Width.AUTO}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Auto width — second tab selected</h4>
-        <Tabs
-          name="rtl-auto-second"
-          tabs={defaultTabs}
-          selected={1}
-          headerWidth={Width.AUTO}
-          onTabSelect={() => {}}
-        />
-      </div>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const defaultTabs = [
+      {
+        title: i18n.firstTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.firstContent}</div>,
+      },
+      {
+        title: i18n.secondTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.secondContent}</div>,
+      },
+      {
+        title: i18n.thirdTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.thirdContent}</div>,
+      },
+    ];
+
+    return (
+      <>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.blockFirstSelected}</h4>
+          <Tabs
+            name="rtl-block-first"
+            tabs={defaultTabs}
+            selected={0}
+            headerWidth={Width.BLOCK}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.blockSecondSelected}</h4>
+          <Tabs
+            name="rtl-block-second"
+            tabs={defaultTabs}
+            selected={1}
+            headerWidth={Width.BLOCK}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.autoFirstSelected}</h4>
+          <Tabs
+            name="rtl-auto-first"
+            tabs={defaultTabs}
+            selected={0}
+            headerWidth={Width.AUTO}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.autoSecondSelected}</h4>
+          <Tabs
+            name="rtl-auto-second"
+            tabs={defaultTabs}
+            selected={1}
+            headerWidth={Width.AUTO}
+            onTabSelect={() => {}}
+          />
+        </div>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      firstTab: { en: 'First tab', ar: 'التبويب الأول' },
+      secondTab: { en: 'Second tab', ar: 'التبويب الثاني' },
+      thirdTab: { en: 'Third tab', ar: 'التبويب الثالث' },
+      firstContent: { en: 'First content', ar: 'المحتوى الأول' },
+      secondContent: { en: 'Second content', ar: 'المحتوى الثاني' },
+      thirdContent: { en: 'Third content', ar: 'المحتوى الثالث' },
+      blockFirstSelected: {
+        en: 'Block width — first tab selected',
+        ar: 'عرض كامل — التبويب الأول محدد',
+      },
+      blockSecondSelected: {
+        en: 'Block width — second tab selected',
+        ar: 'عرض كامل — التبويب الثاني محدد',
+      },
+      autoFirstSelected: {
+        en: 'Auto width — first tab selected',
+        ar: 'عرض تلقائي — التبويب الأول محدد',
+      },
+      autoSecondSelected: {
+        en: 'Auto width — second tab selected',
+        ar: 'عرض تلقائي — التبويب الثاني محدد',
+      },
+    },
+  }),
 };

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

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { allModes } from '../../../.storybook/modes';
 import Tag from '..';
 import type { TagProps } from '..';
@@ -72,21 +72,32 @@ export const AllThemesAndSentiments: Story = {
  * The tag's horizontal padding is asymmetric and long copy truncates, so both need to mirror.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <div
-      style={{
-        alignItems: 'flex-start',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem',
-      }}
-    >
-      <Tag label="Tag copy" />
-      <Tag label="Tag copy" size="large" sentiment="success" emphasis="elevated" />
-      <Tag label="A tag with copy far too long to fit within its maximum width" />
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div
+        style={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.5rem',
+        }}
+      >
+        <Tag label={i18n.tagCopy} />
+        <Tag label={i18n.tagCopy} size="large" sentiment="success" emphasis="elevated" />
+        <Tag label={i18n.longCopy} />
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      tagCopy: { en: 'Tag copy', ar: 'نص الوسم' },
+      longCopy: {
+        en: 'A tag with copy far too long to fit within its maximum width',
+        ar: 'وسم يحتوي على نص طويل جدًا بحيث لا يتسع داخل الحد الأقصى لعرضه',
+      },
+    },
+  }),
 };
 
 /**

package/src/Tooltip/_stories/Tooltip.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Button from '../../Button';
 import Tooltip from '../Tooltip';
 
@@ -21,41 +21,84 @@ const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 };
 
 export const PositionTop: Story = {
-  render: () => (
-    <Tooltip label="Top positioned tooltip" position="top">
-      <Button>Top</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="top">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'bottom',
+    i18n: {
+      tooltip: { en: 'Top positioned tooltip', ar: 'تلميح في الأعلى' },
+      trigger: { en: 'Top', ar: 'أعلى' },
+    },
+  }),
 };
 
 export const PositionBottom: Story = {
-  render: () => (
-    <Tooltip label="Bottom positioned tooltip" position="bottom">
-      <Button>Bottom</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="bottom">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Bottom positioned tooltip', ar: 'تلميح في الأسفل' },
+      trigger: { en: 'Bottom', ar: 'أسفل' },
+    },
+  }),
 };
 
 export const PositionRight: Story = {
-  render: () => (
-    <Tooltip label="Right positioned tooltip" position="right">
-      <Button>Right</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="right">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Right positioned tooltip', ar: 'تلميح على اليمين' },
+      trigger: { en: 'Right', ar: 'يمين' },
+    },
+  }),
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <Tooltip label="Left positioned tooltip" position="left">
-      <Button>Left</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="left">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Left positioned tooltip', ar: 'تلميح على اليسار' },
+      trigger: { en: 'Left', ar: 'يسار' },
+    },
+  }),
 };

package/src/Typeahead/_stories/Typeahead.rtl.test.story.tsx

@@ -19,9 +19,9 @@ export default {
 type Story = StoryObj<typeof Typeahead>;
 
 const localisedStrings = {
-  gbp: { en: 'British pound', ar: 'جنيه إسترليني' },
-  eur: { en: 'Euro', ar: 'يورو' },
-  usd: { en: 'US Dollar', ar: 'دولار أمريكي' },
+  gbp: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+  eur: { en: 'Euro', ar: 'اليورو' },
+  usd: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
   placeholder: { en: 'Search currencies…', ar: 'ابحث عن العملات...' },
 };
 

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import Upload from '..';
 
 export default {
@@ -13,30 +17,42 @@ export default {
 type Story = StoryObj<typeof Upload>;
 
 export const Sizes: Story = {
-  render: () => (
-    <>
-      <Upload usLabel="Small upload" size="sm" />
-      <Upload usLabel="Medium upload" size="md" />
-      <Upload usLabel="Large upload" size="lg" />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Upload usLabel={i18n.smallUpload} size="sm" />
+        <Upload usLabel={i18n.mediumUpload} size="md" />
+        <Upload usLabel={i18n.largeUpload} size="lg" />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      smallUpload: { en: 'Small upload', ar: 'منطقة رفع صغيرة' },
+      mediumUpload: { en: 'Medium upload', ar: 'منطقة رفع متوسطة' },
+      largeUpload: { en: 'Large upload', ar: 'منطقة رفع كبيرة' },
+    },
+  }),
 };
 
 export const WithError: Story = {
-  render: () => (
-    <Upload
-      usAccept="*"
-      usLabel="Upload a file"
-      usPlaceholder="Maximum filesize is 1B"
-      maxSize={1}
-      size="md"
-      httpOptions={{
-        url: 'https://httpbin.org/post',
-        method: 'POST',
-      }}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Upload
+        usAccept="*"
+        usLabel={i18n.label}
+        usPlaceholder={i18n.placeholder}
+        maxSize={1}
+        size="md"
+        httpOptions={{
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+        }}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const fileInput = column.querySelector<HTMLInputElement>('input[type="file"]');
@@ -45,9 +61,16 @@ export const WithError: Story = {
         type: 'text/plain',
       });
       await userEvent.upload(fileInput, file);
-      const scope = within(column);
-      await scope.findByText(/Maximum filesize is/i, {}, { timeout: 3000 });
+      await waitFor(
+        async () => expect(column.querySelector('.upload-error-message')).not.toBeNull(),
+        { timeout: 3000 },
+      );
     });
   },
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    i18n: {
+      label: { en: 'Upload a file', ar: 'رفع ملف' },
+      placeholder: { en: 'Maximum filesize is 1B', ar: 'الحد الأقصى لحجم الملف هو ١ بايت' },
+    },
+  }),
 };

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

@@ -5,7 +5,7 @@ import { Status } from '../../common';
 import UploadInput, { UploadInputProps } from '../UploadInput';
 import { UploadedFile, UploadResponse } from '../types';
 import { userEvent } from 'storybook/test';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -305,45 +305,67 @@ export const DeletingBottom: Story = {
 const noOpUpload = async () => ({ id: 'upload-1' });
 const noOpDelete = async () => {};
 
-const mixedFiles = [
-  { id: 'file-1', filename: 'document-front.pdf', url: '#' },
-  { id: 'file-2', filename: 'succeeded-file.pdf', url: '#' },
-  { id: 'file-3', filename: 'failed-file.png', status: Status.FAILED },
-  { id: 'file-4', filename: 'valid-document.pdf', url: '#' },
-  {
-    id: 'file-5',
-    filename: 'too-large-image.png',
-    status: Status.FAILED,
-    errors: [
-      'File size exceeds the 5MB limit',
-      'Please compress the image or choose a smaller file',
-      'Supported formats: JPG, PNG under 5MB',
-    ],
-  },
-  {
-    id: 'file-6',
-    filename: 'corrupted-file.pdf',
-    status: Status.FAILED,
-    error: 'File could not be processed',
-  },
-];
-
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <UploadInput onUploadFile={noOpUpload} />
-      <UploadInput
-        files={[{ id: 'file-s', filename: 'single-upload.pdf', url: '#' }]}
-        onUploadFile={noOpUpload}
-        onDeleteFile={noOpDelete}
-      />
-      <UploadInput
-        multiple
-        files={mixedFiles}
-        onUploadFile={noOpUpload}
-        onDeleteFile={noOpDelete}
-      />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const mixedFiles = [
+      { id: 'file-1', filename: i18n.documentFront, url: '#' },
+      { id: 'file-2', filename: i18n.succeededFile, url: '#' },
+      { id: 'file-3', filename: i18n.failedFile, status: Status.FAILED },
+      { id: 'file-4', filename: i18n.validDocument, url: '#' },
+      {
+        id: 'file-5',
+        filename: i18n.tooLargeImage,
+        status: Status.FAILED,
+        errors: [i18n.sizeLimitError, i18n.compressHint, i18n.supportedFormats],
+      },
+      {
+        id: 'file-6',
+        filename: i18n.corruptedFile,
+        status: Status.FAILED,
+        error: i18n.processingError,
+      },
+    ];
+    return (
+      <>
+        <UploadInput onUploadFile={noOpUpload} />
+        <UploadInput
+          files={[{ id: 'file-s', filename: i18n.singleUpload, url: '#' }]}
+          onUploadFile={noOpUpload}
+          onDeleteFile={noOpDelete}
+        />
+        <UploadInput
+          multiple
+          files={mixedFiles}
+          onUploadFile={noOpUpload}
+          onDeleteFile={noOpDelete}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      singleUpload: { en: 'single-upload.pdf', ar: 'تحميل-واحد.pdf' },
+      documentFront: { en: 'document-front.pdf', ar: 'مستند-الوجه-الأمامي.pdf' },
+      succeededFile: { en: 'succeeded-file.pdf', ar: 'ملف-ناجح.pdf' },
+      failedFile: { en: 'failed-file.png', ar: 'ملف-فاشل.png' },
+      validDocument: { en: 'valid-document.pdf', ar: 'مستند-صالح.pdf' },
+      tooLargeImage: { en: 'too-large-image.png', ar: 'صورة-كبيرة-جدًا.png' },
+      corruptedFile: { en: 'corrupted-file.pdf', ar: 'ملف-تالف.pdf' },
+      sizeLimitError: {
+        en: 'File size exceeds the 5MB limit',
+        ar: 'حجم الملف يتجاوز الحد الأقصى 5 ميغابايت',
+      },
+      compressHint: {
+        en: 'Please compress the image or choose a smaller file',
+        ar: 'يُرجى ضغط الصورة أو اختيار ملف أصغر',
+      },
+      supportedFormats: {
+        en: 'Supported formats: JPG, PNG under 5MB',
+        ar: 'الصيغ المدعومة: JPG وPNG بحجم أقل من 5 ميغابايت',
+      },
+      processingError: { en: 'File could not be processed', ar: 'تعذّر معالجة الملف' },
+    },
+  }),
 };

package/src/_deprecated/Alert/_stories/Alert.test.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '../../..';
 import Alert, { type AlertProps, AlertArrowPosition } from '../Alert';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta = {
   title: 'Prompts/Alert/Tests',
@@ -134,27 +134,48 @@ export const MultipleDynamicAlerts: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Alert message="Basic alert without dismiss button." />
-      <Alert message="Alert with dismiss button." onDismiss={() => {}} />
-      <Alert
-        title="With title and link action"
-        message="Alert with a link action and dismiss."
-        action={{ href: '#', text: 'Read more' }}
-        onDismiss={() => {}}
-      />
-      <Alert
-        title="With title and button action"
-        message="Alert with a button action."
-        action={{ onClick: () => {}, text: 'Open', as: 'button' }}
-        onDismiss={() => {}}
-      />
-      <Alert message="Arrow top left." arrow={AlertArrowPosition.TOP_LEFT} />
-      <Alert message="Arrow top right." arrow={AlertArrowPosition.TOP_RIGHT} />
-      <Alert message="Arrow bottom left." arrow={AlertArrowPosition.BOTTOM_LEFT} />
-      <Alert message="Arrow bottom right." arrow={AlertArrowPosition.BOTTOM_RIGHT} />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Alert message={i18n.basic} />
+        <Alert message={i18n.dismissible} onDismiss={() => {}} />
+        <Alert
+          title={i18n.linkActionTitle}
+          message={i18n.linkActionMessage}
+          action={{ href: '#', text: i18n.readMore }}
+          onDismiss={() => {}}
+        />
+        <Alert
+          title={i18n.buttonActionTitle}
+          message={i18n.buttonActionMessage}
+          action={{ onClick: () => {}, text: i18n.open, as: 'button' }}
+          onDismiss={() => {}}
+        />
+        <Alert message={i18n.arrowTopLeft} arrow={AlertArrowPosition.TOP_LEFT} />
+        <Alert message={i18n.arrowTopRight} arrow={AlertArrowPosition.TOP_RIGHT} />
+        <Alert message={i18n.arrowBottomLeft} arrow={AlertArrowPosition.BOTTOM_LEFT} />
+        <Alert message={i18n.arrowBottomRight} arrow={AlertArrowPosition.BOTTOM_RIGHT} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basic: { en: 'Basic alert without dismiss button.', ar: 'تنبيه أساسي بدون زر إغلاق.' },
+      dismissible: { en: 'Alert with dismiss button.', ar: 'تنبيه مع زر إغلاق.' },
+      linkActionTitle: { en: 'With title and link action', ar: 'مع عنوان وإجراء رابط' },
+      linkActionMessage: {
+        en: 'Alert with a link action and dismiss.',
+        ar: 'تنبيه مع إجراء رابط وزر إغلاق.',
+      },
+      readMore: { en: 'Read more', ar: 'اقرأ المزيد' },
+      buttonActionTitle: { en: 'With title and button action', ar: 'مع عنوان وإجراء زر' },
+      buttonActionMessage: { en: 'Alert with a button action.', ar: 'تنبيه مع إجراء زر.' },
+      open: { en: 'Open', ar: 'فتح' },
+      arrowTopLeft: { en: 'Arrow top left.', ar: 'سهم أعلى اليسار.' },
+      arrowTopRight: { en: 'Arrow top right.', ar: 'سهم أعلى اليمين.' },
+      arrowBottomLeft: { en: 'Arrow bottom left.', ar: 'سهم أسفل اليسار.' },
+      arrowBottomRight: { en: 'Arrow bottom right.', ar: 'سهم أسفل اليمين.' },
+    },
+  }),
 };