@transferwise/components 46.165.0 → 46.165.2

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx

@@ -6,7 +6,7 @@ import { ActionPrompt } from '../ActionPrompt';
 import { Body, Title } from '../../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../../.storybook/modes';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { lorem10 } from '../../../test-utils';
 
@@ -275,41 +275,77 @@ export const Responsiveness: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <ActionPrompt
-        title="Default status icon"
-        description="No media provided, uses default sentiment icon."
-        action={{ label: 'Continue' }}
-      />
-      <ActionPrompt
-        title="Custom image"
-        description="Media with a custom image source."
-        media={{ imgSrc: '../../wise-card.svg' }}
-        action={{ label: 'View card' }}
-      />
-      <ActionPrompt
-        title="Avatar with icon"
-        description="Media with an avatar containing a custom icon."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Connect bank' }}
-      />
-      <ActionPrompt
-        title="Primary and secondary actions"
-        description="Both action buttons present."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Confirm' }}
-        actionSecondary={{ label: 'Cancel' }}
-      />
-      <ActionPrompt
-        title="Dismissible with two actions"
-        description="Close button and both action buttons."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Confirm' }}
-        actionSecondary={{ label: 'Cancel' }}
-        onDismiss={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <ActionPrompt
+          title={i18n.defaultIconTitle}
+          description={i18n.defaultIconDescription}
+          action={{ label: i18n.continueAction }}
+        />
+        <ActionPrompt
+          title={i18n.customImageTitle}
+          description={i18n.customImageDescription}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: i18n.viewCardAction }}
+        />
+        <ActionPrompt
+          title={i18n.avatarIconTitle}
+          description={i18n.avatarIconDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.connectBankAction }}
+        />
+        <ActionPrompt
+          title={i18n.twoActionsTitle}
+          description={i18n.twoActionsDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.confirmAction }}
+          actionSecondary={{ label: i18n.cancelAction }}
+        />
+        <ActionPrompt
+          title={i18n.dismissibleTitle}
+          description={i18n.dismissibleDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.confirmAction }}
+          actionSecondary={{ label: i18n.cancelAction }}
+          onDismiss={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultIconTitle: { en: 'Default status icon', ar: 'أيقونة الحالة الافتراضية' },
+      defaultIconDescription: {
+        en: 'No media provided, uses default sentiment icon.',
+        ar: 'لا توجد وسائط، يتم استخدام أيقونة الحالة الافتراضية.',
+      },
+      continueAction: { en: 'Continue', ar: 'متابعة' },
+      customImageTitle: { en: 'Custom image', ar: 'صورة مخصصة' },
+      customImageDescription: {
+        en: 'Media with a custom image source.',
+        ar: 'وسائط مع مصدر صورة مخصص.',
+      },
+      viewCardAction: { en: 'View card', ar: 'عرض البطاقة' },
+      avatarIconTitle: { en: 'Avatar with icon', ar: 'صورة رمزية مع أيقونة' },
+      avatarIconDescription: {
+        en: 'Media with an avatar containing a custom icon.',
+        ar: 'وسائط مع صورة رمزية تحتوي على أيقونة مخصصة.',
+      },
+      connectBankAction: { en: 'Connect bank', ar: 'ربط البنك' },
+      twoActionsTitle: { en: 'Primary and secondary actions', ar: 'إجراءات أساسية وثانوية' },
+      twoActionsDescription: {
+        en: 'Both action buttons present.',
+        ar: 'زرّا الإجراء موجودان معًا.',
+      },
+      confirmAction: { en: 'Confirm', ar: 'تأكيد' },
+      cancelAction: { en: 'Cancel', ar: 'إلغاء' },
+      dismissibleTitle: { en: 'Dismissible with two actions', ar: 'قابل للإغلاق مع إجراءين' },
+      dismissibleDescription: {
+        en: 'Close button and both action buttons.',
+        ar: 'زر الإغلاق وزرّا الإجراء.',
+      },
+    },
+  }),
 };

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import Button from '../../../Button';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { CriticalBanner } from '../CriticalBanner';
 
@@ -482,34 +482,71 @@ export const UncontrolledStateInteraction: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <CriticalBanner title="Title only" description="Description without actions or media." />
-      <CriticalBanner
-        title="With primary action"
-        description="Banner with a single action button."
-        action={{ label: 'Verify now' }}
-      />
-      <CriticalBanner
-        title="With both actions"
-        description="Banner with primary and secondary actions."
-        action={{ label: 'Verify now' }}
-        actionSecondary={{ label: 'Learn more' }}
-      />
-      <CriticalBanner
-        title="With media image"
-        description="Banner with a custom image."
-        media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise card' }}
-        action={{ label: 'Take action' }}
-      />
-      <CriticalBanner
-        title="With avatar media"
-        description="Banner with an avatar icon."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Connect bank' }}
-        actionSecondary={{ label: 'Learn more' }}
-      />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <CriticalBanner title={i18n.titleOnly} description={i18n.titleOnlyDescription} />
+        <CriticalBanner
+          title={i18n.withPrimaryAction}
+          description={i18n.withPrimaryActionDescription}
+          action={{ label: i18n.verifyNow }}
+        />
+        <CriticalBanner
+          title={i18n.withBothActions}
+          description={i18n.withBothActionsDescription}
+          action={{ label: i18n.verifyNow }}
+          actionSecondary={{ label: i18n.learnMore }}
+        />
+        <CriticalBanner
+          title={i18n.withMediaImage}
+          description={i18n.withMediaImageDescription}
+          media={{ imgSrc: '../../wise-card.svg', 'aria-label': i18n.cardImage }}
+          action={{ label: i18n.takeAction }}
+        />
+        <CriticalBanner
+          title={i18n.withAvatarMedia}
+          description={i18n.withAvatarMediaDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.connectBank }}
+          actionSecondary={{ label: i18n.learnMore }}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      titleOnly: { en: 'Title only', ar: 'العنوان فقط' },
+      titleOnlyDescription: {
+        en: 'Description without actions or media.',
+        ar: 'وصف بدون إجراءات أو وسائط.',
+      },
+      withPrimaryAction: { en: 'With primary action', ar: 'مع إجراء رئيسي' },
+      withPrimaryActionDescription: {
+        en: 'Banner with a single action button.',
+        ar: 'لافتة تحتوي على زر إجراء واحد.',
+      },
+      withBothActions: { en: 'With both actions', ar: 'مع كلا الإجراءين' },
+      withBothActionsDescription: {
+        en: 'Banner with primary and secondary actions.',
+        ar: 'لافتة تحتوي على إجراء رئيسي وإجراء ثانوي.',
+      },
+      withMediaImage: { en: 'With media image', ar: 'مع صورة' },
+      withMediaImageDescription: {
+        en: 'Banner with a custom image.',
+        ar: 'لافتة تحتوي على صورة مخصصة.',
+      },
+      withAvatarMedia: { en: 'With avatar media', ar: 'مع صورة رمزية' },
+      withAvatarMediaDescription: {
+        en: 'Banner with an avatar icon.',
+        ar: 'لافتة تحتوي على أيقونة رمزية.',
+      },
+      verifyNow: { en: 'Verify now', ar: 'تحقّق الآن' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      takeAction: { en: 'Take action', ar: 'اتخذ إجراءً' },
+      connectBank: { en: 'Connect bank', ar: 'ربط البنك' },
+      cardImage: { en: 'Wise card', ar: 'بطاقة Wise' },
+    },
+  }),
 };

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

@@ -5,7 +5,7 @@ import { action } from 'storybook/actions';
 import { Star } from '@transferwise/icons';
 import { InfoPrompt, type InfoPromptProps } from '../InfoPrompt';
 import { allModes } from '../../../../.storybook/modes';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 
 const withComponentGrid =
@@ -556,25 +556,55 @@ export const LiveRegionDismiss: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InfoPrompt description="Basic description only." />
-      <InfoPrompt title="With Title" description="Description with a title above it." />
-      <InfoPrompt description="Dismissible prompt." onDismiss={() => {}} />
-      <InfoPrompt
-        title="With Action"
-        description="Description with an action link below."
-        action={{ label: 'Learn more', href: '#' }}
-      />
-      <InfoPrompt description="Custom media icon." media={{ asset: <Star title="Starred" /> }} />
-      <InfoPrompt
-        title="All Options"
-        description="Title, action, dismiss, and custom media combined."
-        media={{ asset: <Star title="Starred" /> }}
-        action={{ label: 'View details', href: '#' }}
-        onDismiss={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <InfoPrompt description={i18n.basicDescription} />
+        <InfoPrompt title={i18n.withTitleHeading} description={i18n.withTitleDescription} />
+        <InfoPrompt description={i18n.dismissibleDescription} onDismiss={() => {}} />
+        <InfoPrompt
+          title={i18n.withActionHeading}
+          description={i18n.withActionDescription}
+          action={{ label: i18n.learnMore, href: '#' }}
+        />
+        <InfoPrompt
+          description={i18n.customMediaDescription}
+          media={{ asset: <Star title={i18n.starredMedia} /> }}
+        />
+        <InfoPrompt
+          title={i18n.allOptionsHeading}
+          description={i18n.allOptionsDescription}
+          media={{ asset: <Star title={i18n.starredMedia} /> }}
+          action={{ label: i18n.viewDetails, href: '#' }}
+          onDismiss={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basicDescription: { en: 'Basic description only.', ar: 'الوصف الأساسي فقط.' },
+      withTitleHeading: { en: 'With Title', ar: 'مع عنوان' },
+      withTitleDescription: {
+        en: 'Description with a title above it.',
+        ar: 'وصف مع عنوان في الأعلى.',
+      },
+      dismissibleDescription: { en: 'Dismissible prompt.', ar: 'تنبيه قابل للإغلاق.' },
+      withActionHeading: { en: 'With Action', ar: 'مع إجراء' },
+      withActionDescription: {
+        en: 'Description with an action link below.',
+        ar: 'وصف مع رابط إجراء في الأسفل.',
+      },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      customMediaDescription: { en: 'Custom media icon.', ar: 'أيقونة وسائط مخصصة.' },
+      starredMedia: { en: 'Starred', ar: 'مميز بنجمة' },
+      allOptionsHeading: { en: 'All Options', ar: 'جميع الخيارات' },
+      allOptionsDescription: {
+        en: 'Title, action, dismiss, and custom media combined.',
+        ar: 'عنوان وإجراء وإغلاق ووسائط مخصصة مجتمعة.',
+      },
+      viewDetails: { en: 'View details', ar: 'عرض التفاصيل' },
+    },
+  }),
 };

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.test.story.tsx

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from '../InlinePrompt';
 import { withVariantConfig } from '../../../../.storybook/helpers';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   title: 'Prompts/InlinePrompt/Tests',
@@ -22,27 +22,42 @@ export const TinyScreen: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* default icon at inline-start, auto width */}
-      <InlinePrompt sentiment="positive">Short content with default icon.</InlinePrompt>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* default icon at inline-start, auto width */}
+        <InlinePrompt sentiment="positive">{i18n.defaultIcon}</InlinePrompt>
 
-      {/* custom media icon, auto width */}
-      <InlinePrompt sentiment="positive" media={<Suitcase />}>
-        Custom icon with auto width.
-      </InlinePrompt>
+        {/* custom media icon, auto width */}
+        <InlinePrompt sentiment="positive" media={<Suitcase />}>
+          {i18n.customIcon}
+        </InlinePrompt>
 
-      {/* full width — icon position flips */}
-      <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
-        Custom icon with full width.
-      </InlinePrompt>
+        {/* full width — icon position flips */}
+        <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
+          {i18n.fullWidth}
+        </InlinePrompt>
 
-      {/* multi-line content — verifies wrapping alignment */}
-      <InlinePrompt sentiment="warning" width="full">
-        This prompt has longer content that may wrap to multiple lines to verify that the icon
-        alignment remains correct in RTL layout.
-      </InlinePrompt>
-    </>
-  ),
-  ...withRTLDiff(),
+        {/* multi-line content — verifies wrapping alignment */}
+        <InlinePrompt sentiment="warning" width="full">
+          {i18n.multiLine}
+        </InlinePrompt>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultIcon: {
+        en: 'Short content with default icon.',
+        ar: 'محتوى قصير مع الأيقونة الافتراضية.',
+      },
+      customIcon: { en: 'Custom icon with auto width.', ar: 'أيقونة مخصصة بعرض تلقائي.' },
+      fullWidth: { en: 'Custom icon with full width.', ar: 'أيقونة مخصصة بعرض كامل.' },
+      multiLine: {
+        en: 'This prompt has longer content that may wrap to multiple lines to verify that the icon alignment remains correct in RTL layout.',
+        ar: 'يحتوي هذا التنبيه على محتوى أطول قد يمتد على عدة أسطر للتحقق من أن محاذاة الأيقونة تظل صحيحة في التصميم من اليمين إلى اليسار.',
+      },
+    },
+  }),
 };

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import Radio from '../Radio';
 
@@ -13,49 +13,63 @@ export default {
 type Story = StoryObj<typeof Radio>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Radio
-        label="Standard option"
-        name="radio-rtl"
-        id="radio-rtl-basic"
-        value="basic"
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with secondary text"
-        secondary="Secondary description"
-        name="radio-rtl"
-        id="radio-rtl-secondary"
-        value="secondary"
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with avatar"
-        name="radio-rtl"
-        id="radio-rtl-avatar"
-        value="avatar"
-        avatar={
-          <AvatarView size={40}>
-            <Flag code="IM" />
-          </AvatarView>
-        }
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with secondary text and avatar"
-        secondary="Secondary description"
-        name="radio-rtl"
-        id="radio-rtl-secondary-avatar"
-        value="secondary-avatar"
-        avatar={
-          <AvatarView size={40}>
-            <Flag code="IM" />
-          </AvatarView>
-        }
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Radio
+          label={i18n.standardOption}
+          name="radio-rtl"
+          id="radio-rtl-basic"
+          value="basic"
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withSecondary}
+          secondary={i18n.secondaryDescription}
+          name="radio-rtl"
+          id="radio-rtl-secondary"
+          value="secondary"
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withAvatar}
+          name="radio-rtl"
+          id="radio-rtl-avatar"
+          value="avatar"
+          avatar={
+            <AvatarView size={40}>
+              <Flag code="IM" />
+            </AvatarView>
+          }
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withSecondaryAndAvatar}
+          secondary={i18n.secondaryDescription}
+          name="radio-rtl"
+          id="radio-rtl-secondary-avatar"
+          value="secondary-avatar"
+          avatar={
+            <AvatarView size={40}>
+              <Flag code="IM" />
+            </AvatarView>
+          }
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      standardOption: { en: 'Standard option', ar: 'خيار عادي' },
+      withSecondary: { en: 'Option with secondary text', ar: 'خيار مع نص ثانوي' },
+      withAvatar: { en: 'Option with avatar', ar: 'خيار مع صورة رمزية' },
+      withSecondaryAndAvatar: {
+        en: 'Option with secondary text and avatar',
+        ar: 'خيار مع نص ثانوي وصورة رمزية',
+      },
+      secondaryDescription: { en: 'Secondary description', ar: 'وصف ثانوي' },
+    },
+  }),
 };

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

@@ -3,7 +3,7 @@ import Field from '../../Field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 
 const meta = {
@@ -65,54 +65,73 @@ export const FieldsWithoutPrompt = {
 } satisfies Story;
 
 export const RTLDiff: Story<string> = {
-  render: () => (
-    <>
-      <RadioGroup
-        name="radio-group-rtl-basic"
-        selectedValue="option-1"
-        radios={[
-          { value: 'option-1', label: 'Option one' },
-          { value: 'option-2', label: 'Option two' },
-          { value: 'option-3', label: 'Option three' },
-        ]}
-        onChange={() => {}}
-      />
-      <RadioGroup
-        name="radio-group-rtl-secondary"
-        selectedValue="option-a"
-        radios={[
-          { value: 'option-a', label: 'Option A', secondary: 'Secondary text for A' },
-          { value: 'option-b', label: 'Option B', secondary: 'Secondary text for B' },
-        ]}
-        onChange={() => {}}
-      />
-      <RadioGroup
-        name="radio-group-rtl-avatar"
-        selectedValue="option-x"
-        radios={[
-          {
-            value: 'option-x',
-            label: 'Option X',
-            avatar: (
-              <AvatarView size={40}>
-                <Flag code="IM" />
-              </AvatarView>
-            ),
-          },
-          {
-            value: 'option-y',
-            label: 'Option Y',
-            secondary: 'With secondary and avatar',
-            avatar: (
-              <AvatarView size={40}>
-                <Flag code="IM" />
-              </AvatarView>
-            ),
-          },
-        ]}
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <RadioGroup
+          name="radio-group-rtl-basic"
+          selectedValue="option-1"
+          radios={[
+            { value: 'option-1', label: i18n.optionOne },
+            { value: 'option-2', label: i18n.optionTwo },
+            { value: 'option-3', label: i18n.optionThree },
+          ]}
+          onChange={() => {}}
+        />
+        <RadioGroup
+          name="radio-group-rtl-secondary"
+          selectedValue="option-a"
+          radios={[
+            { value: 'option-a', label: i18n.optionA, secondary: i18n.secondaryA },
+            { value: 'option-b', label: i18n.optionB, secondary: i18n.secondaryB },
+          ]}
+          onChange={() => {}}
+        />
+        <RadioGroup
+          name="radio-group-rtl-avatar"
+          selectedValue="option-x"
+          radios={[
+            {
+              value: 'option-x',
+              label: i18n.optionX,
+              avatar: (
+                <AvatarView size={40}>
+                  <Flag code="IM" />
+                </AvatarView>
+              ),
+            },
+            {
+              value: 'option-y',
+              label: i18n.optionY,
+              secondary: i18n.secondaryWithAvatar,
+              avatar: (
+                <AvatarView size={40}>
+                  <Flag code="IM" />
+                </AvatarView>
+              ),
+            },
+          ]}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      optionOne: { en: 'Option one', ar: 'الخيار الأول' },
+      optionTwo: { en: 'Option two', ar: 'الخيار الثاني' },
+      optionThree: { en: 'Option three', ar: 'الخيار الثالث' },
+      optionA: { en: 'Option A', ar: 'الخيار أ' },
+      optionB: { en: 'Option B', ar: 'الخيار ب' },
+      secondaryA: { en: 'Secondary text for A', ar: 'نص ثانوي للخيار أ' },
+      secondaryB: { en: 'Secondary text for B', ar: 'نص ثانوي للخيار ب' },
+      optionX: { en: 'Option X', ar: 'الخيار س' },
+      optionY: { en: 'Option Y', ar: 'الخيار ص' },
+      secondaryWithAvatar: {
+        en: 'With secondary and avatar',
+        ar: 'مع نص ثانوي وصورة رمزية',
+      },
+    },
+  }),
 };