@deriv-web-design/ui 0.1.36 → 0.1.37

package/block-registry.json

@@ -7525,7 +7525,8 @@
     "optionalFields": [
       "variant",
       "title",
-      "description"
+      "description",
+      "labels"
     ],
     "variants": [
       "margin",
@@ -7563,6 +7564,73 @@
         "required": false,
         "maxLength": 200
       },
+      "labels": {
+        "type": "object",
+        "required": false,
+        "description": "Optional UI copy overrides for Raven / Makima i18n. Flat keys replace strings in the active block; swapPoints/swapPercentage cover each swap tab. Omit any key to keep the English default. Does not add variants.",
+        "objectFields": {
+          "calculations": {
+            "type": "array",
+            "required": false,
+            "description": "Replaces the annotated calculation strips when set."
+          },
+          "exampleHeading": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40
+          },
+          "exampleIntro": {
+            "type": "string",
+            "required": false,
+            "maxLength": 400
+          },
+          "exampleLead": {
+            "type": "string",
+            "required": false,
+            "maxLength": 120
+          },
+          "formulaBlocks": {
+            "type": "array",
+            "required": false,
+            "description": "Replaces the Formula column blocks when set."
+          },
+          "formulaHeading": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40
+          },
+          "note": {
+            "type": "string",
+            "required": false,
+            "maxLength": 400
+          },
+          "resultText": {
+            "type": "string",
+            "required": false,
+            "maxLength": 300
+          },
+          "swapPercentage": {
+            "type": "object",
+            "required": false,
+            "description": "Body overrides for the swap In-percentage tab (same shape as swapPoints)."
+          },
+          "swapPoints": {
+            "type": "object",
+            "required": false,
+            "description": "Body overrides for the swap In-points tab (formulaBlocks, exampleIntro, calculations, resultText, note, …)."
+          },
+          "swapTabPercentage": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60
+          },
+          "swapTabPoints": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60
+          }
+        }
+      },
       "title": {
         "type": "string",
         "required": false,

package/components.manifest.json

@@ -4103,6 +4103,11 @@
           "required": false,
           "description": "Section description, shown under the title. Defaults to the canonical copy for `variant`."
         },
+        "labels": {
+          "type": "TradingCalculatorHowToLabels",
+          "required": false,
+          "description": "Optional UI copy overrides for Raven / Makima i18n. Omit to keep English formula/example/chip defaults."
+        },
         "title": {
           "type": "string",
           "required": false,

package/dist/index.d.mts

@@ -2395,6 +2395,50 @@ type FormulaBlock =
         content: string;
     }[];
 };
+/**
+ * Optional UI copy overrides for Raven / Makima i18n.
+ * Omit any key (or the whole object) to keep the English defaults baked into
+ * the existing margin / pip / swap content. Does not add new variants — it
+ * only replaces strings inside the block already on the page.
+ *
+ * Flat keys apply to whatever content is currently shown. For `swap-*`
+ * instances (both formulas behind the tab switch), also pass
+ * `swapPoints` / `swapPercentage` so each tab keeps its own translated body.
+ *
+ * Section `title` / `description` stay top-level props (already overridable).
+ */
+type TradingCalculatorHowToLabels = {
+    /** Left column heading. @default "Formula" */
+    formulaHeading?: string;
+    /** Right column heading. @default "Example" */
+    exampleHeading?: string;
+    /** Chip: "Swap calculation (In points)" */
+    swapTabPoints?: string;
+    /** Chip: "Swap calculation (In percentage)" */
+    swapTabPercentage?: string;
+    /** Formula column blocks. Replaces the whole column when set. */
+    formulaBlocks?: FormulaBlock[];
+    /** Lead paragraph under Example. */
+    exampleIntro?: string;
+    /** Optional second lead line (pip uses "The calculation would be:"). */
+    exampleLead?: string;
+    /** Annotated calculation strips. Replaces all strips when set. */
+    calculations?: CalculationToken[][];
+    /** Closing sentence after the strips. */
+    resultText?: string;
+    /** Muted note under the example. */
+    note?: string;
+    /**
+     * Body overrides for the swap "In points" tab only.
+     * Same shape as the flat body keys above (`formulaBlocks`, `exampleIntro`, …).
+     */
+    swapPoints?: Pick<TradingCalculatorHowToLabels, "formulaBlocks" | "exampleIntro" | "exampleLead" | "calculations" | "resultText" | "note" | "formulaHeading" | "exampleHeading">;
+    /**
+     * Body overrides for the swap "In percentage" tab only.
+     * Same shape as the flat body keys above.
+     */
+    swapPercentage?: Pick<TradingCalculatorHowToLabels, "formulaBlocks" | "exampleIntro" | "exampleLead" | "calculations" | "resultText" | "note" | "formulaHeading" | "exampleHeading">;
+};
 interface TradingCalculatorHowToProps extends HTMLAttributes<HTMLElement> {
     /**
      * Which deriv.com "How to calculate…" page this instance mirrors.
@@ -2405,11 +2449,18 @@ interface TradingCalculatorHowToProps extends HTMLAttributes<HTMLElement> {
     title?: string;
     /** Section description, shown under the title. Defaults to the canonical copy for `variant`. */
     description?: string;
+    /**
+     * Optional UI copy overrides for Raven / Makima i18n.
+     * Omit to keep English formula/example/chip defaults.
+     */
+    labels?: TradingCalculatorHowToLabels;
     /** Extra class name merged onto the root `<section>`. */
     className?: string;
 }
+/** Shared English defaults for column headings and swap chips. */
+declare const DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS: Required<Pick<TradingCalculatorHowToLabels, "formulaHeading" | "exampleHeading" | "swapTabPoints" | "swapTabPercentage">>;
 
-declare const TradingCalculatorHowTo: ({ variant, title, description, className, ...props }: TradingCalculatorHowToProps) => react_jsx_runtime.JSX.Element;
+declare const TradingCalculatorHowTo: ({ variant, title, description, labels, className, ...props }: TradingCalculatorHowToProps) => react_jsx_runtime.JSX.Element;
 
 type CryptoTradeConverterVariant = "default";
 /**
@@ -3146,4 +3197,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
 
 declare const AffiliatesSlider: ({ title, description, min, max, step, defaultValue, value, onValueChange, referralsLabel, incomeLabel, incomePerReferral, currencySymbol, tickValues, disclaimer, disclaimerIconSrc, disclaimerIconAlt, sliderLabel, className, ...props }: AffiliatesSliderProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, type CalculationToken, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, ComparisonCards, type ComparisonCardsCard, type ComparisonCardsProps, type ComparisonCardsRow, type ComparisonCardsTheme, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, CryptoMarketsTable, type CryptoMarketsTableLabels, type CryptoMarketsTableProps, type CryptoMarketsTableVariant, CryptoTradeConverter, type CryptoTradeConverterLabels, type CryptoTradeConverterProps, type CryptoTradeConverterVariant, DEFAULT_AWARDS, DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, DEFAULT_CRYPTO_MARKETS_TABLE_TITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS, DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DEFAULT_TRADE_HREF, DEFAULT_TRADING_CALCULATOR_LABELS, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsCarousel, type FeatureCardsCarouselItem, type FeatureCardsCarouselProps, type FeatureCardsCarouselTone, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, type FormulaBlock, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroTrustpilotProps, type HeroVariant, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, StickyMarketCardsLottie, type StickyMarketCardsLottieItem, type StickyMarketCardsLottieProps, type StickyMarketCardsLottieTheme, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, type SwapCalculationMode, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorLabels, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset, isLottieSrc };
+export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, type CalculationToken, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, ComparisonCards, type ComparisonCardsCard, type ComparisonCardsProps, type ComparisonCardsRow, type ComparisonCardsTheme, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, CryptoMarketsTable, type CryptoMarketsTableLabels, type CryptoMarketsTableProps, type CryptoMarketsTableVariant, CryptoTradeConverter, type CryptoTradeConverterLabels, type CryptoTradeConverterProps, type CryptoTradeConverterVariant, DEFAULT_AWARDS, DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, DEFAULT_CRYPTO_MARKETS_TABLE_TITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS, DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DEFAULT_TRADE_HREF, DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS, DEFAULT_TRADING_CALCULATOR_LABELS, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsCarousel, type FeatureCardsCarouselItem, type FeatureCardsCarouselProps, type FeatureCardsCarouselTone, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, type FormulaBlock, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroTrustpilotProps, type HeroVariant, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, StickyMarketCardsLottie, type StickyMarketCardsLottieItem, type StickyMarketCardsLottieProps, type StickyMarketCardsLottieTheme, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, type SwapCalculationMode, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToLabels, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorLabels, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset, isLottieSrc };

package/dist/index.d.ts

@@ -2395,6 +2395,50 @@ type FormulaBlock =
         content: string;
     }[];
 };
+/**
+ * Optional UI copy overrides for Raven / Makima i18n.
+ * Omit any key (or the whole object) to keep the English defaults baked into
+ * the existing margin / pip / swap content. Does not add new variants — it
+ * only replaces strings inside the block already on the page.
+ *
+ * Flat keys apply to whatever content is currently shown. For `swap-*`
+ * instances (both formulas behind the tab switch), also pass
+ * `swapPoints` / `swapPercentage` so each tab keeps its own translated body.
+ *
+ * Section `title` / `description` stay top-level props (already overridable).
+ */
+type TradingCalculatorHowToLabels = {
+    /** Left column heading. @default "Formula" */
+    formulaHeading?: string;
+    /** Right column heading. @default "Example" */
+    exampleHeading?: string;
+    /** Chip: "Swap calculation (In points)" */
+    swapTabPoints?: string;
+    /** Chip: "Swap calculation (In percentage)" */
+    swapTabPercentage?: string;
+    /** Formula column blocks. Replaces the whole column when set. */
+    formulaBlocks?: FormulaBlock[];
+    /** Lead paragraph under Example. */
+    exampleIntro?: string;
+    /** Optional second lead line (pip uses "The calculation would be:"). */
+    exampleLead?: string;
+    /** Annotated calculation strips. Replaces all strips when set. */
+    calculations?: CalculationToken[][];
+    /** Closing sentence after the strips. */
+    resultText?: string;
+    /** Muted note under the example. */
+    note?: string;
+    /**
+     * Body overrides for the swap "In points" tab only.
+     * Same shape as the flat body keys above (`formulaBlocks`, `exampleIntro`, …).
+     */
+    swapPoints?: Pick<TradingCalculatorHowToLabels, "formulaBlocks" | "exampleIntro" | "exampleLead" | "calculations" | "resultText" | "note" | "formulaHeading" | "exampleHeading">;
+    /**
+     * Body overrides for the swap "In percentage" tab only.
+     * Same shape as the flat body keys above.
+     */
+    swapPercentage?: Pick<TradingCalculatorHowToLabels, "formulaBlocks" | "exampleIntro" | "exampleLead" | "calculations" | "resultText" | "note" | "formulaHeading" | "exampleHeading">;
+};
 interface TradingCalculatorHowToProps extends HTMLAttributes<HTMLElement> {
     /**
      * Which deriv.com "How to calculate…" page this instance mirrors.
@@ -2405,11 +2449,18 @@ interface TradingCalculatorHowToProps extends HTMLAttributes<HTMLElement> {
     title?: string;
     /** Section description, shown under the title. Defaults to the canonical copy for `variant`. */
     description?: string;
+    /**
+     * Optional UI copy overrides for Raven / Makima i18n.
+     * Omit to keep English formula/example/chip defaults.
+     */
+    labels?: TradingCalculatorHowToLabels;
     /** Extra class name merged onto the root `<section>`. */
     className?: string;
 }
+/** Shared English defaults for column headings and swap chips. */
+declare const DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS: Required<Pick<TradingCalculatorHowToLabels, "formulaHeading" | "exampleHeading" | "swapTabPoints" | "swapTabPercentage">>;
 
-declare const TradingCalculatorHowTo: ({ variant, title, description, className, ...props }: TradingCalculatorHowToProps) => react_jsx_runtime.JSX.Element;
+declare const TradingCalculatorHowTo: ({ variant, title, description, labels, className, ...props }: TradingCalculatorHowToProps) => react_jsx_runtime.JSX.Element;
 
 type CryptoTradeConverterVariant = "default";
 /**
@@ -3146,4 +3197,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
 
 declare const AffiliatesSlider: ({ title, description, min, max, step, defaultValue, value, onValueChange, referralsLabel, incomeLabel, incomePerReferral, currencySymbol, tickValues, disclaimer, disclaimerIconSrc, disclaimerIconAlt, sliderLabel, className, ...props }: AffiliatesSliderProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, type CalculationToken, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, ComparisonCards, type ComparisonCardsCard, type ComparisonCardsProps, type ComparisonCardsRow, type ComparisonCardsTheme, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, CryptoMarketsTable, type CryptoMarketsTableLabels, type CryptoMarketsTableProps, type CryptoMarketsTableVariant, CryptoTradeConverter, type CryptoTradeConverterLabels, type CryptoTradeConverterProps, type CryptoTradeConverterVariant, DEFAULT_AWARDS, DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, DEFAULT_CRYPTO_MARKETS_TABLE_TITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS, DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DEFAULT_TRADE_HREF, DEFAULT_TRADING_CALCULATOR_LABELS, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsCarousel, type FeatureCardsCarouselItem, type FeatureCardsCarouselProps, type FeatureCardsCarouselTone, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, type FormulaBlock, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroTrustpilotProps, type HeroVariant, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, StickyMarketCardsLottie, type StickyMarketCardsLottieItem, type StickyMarketCardsLottieProps, type StickyMarketCardsLottieTheme, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, type SwapCalculationMode, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorLabels, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset, isLottieSrc };
+export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, type CalculationToken, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, ComparisonCards, type ComparisonCardsCard, type ComparisonCardsProps, type ComparisonCardsRow, type ComparisonCardsTheme, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, CryptoMarketsTable, type CryptoMarketsTableLabels, type CryptoMarketsTableProps, type CryptoMarketsTableVariant, CryptoTradeConverter, type CryptoTradeConverterLabels, type CryptoTradeConverterProps, type CryptoTradeConverterVariant, DEFAULT_AWARDS, DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, DEFAULT_CRYPTO_MARKETS_TABLE_TITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS, DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE, DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DEFAULT_TRADE_HREF, DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS, DEFAULT_TRADING_CALCULATOR_LABELS, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsCarousel, type FeatureCardsCarouselItem, type FeatureCardsCarouselProps, type FeatureCardsCarouselTone, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, type FormulaBlock, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroTrustpilotProps, type HeroVariant, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, StickyMarketCardsLottie, type StickyMarketCardsLottieItem, type StickyMarketCardsLottieProps, type StickyMarketCardsLottieTheme, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, type SwapCalculationMode, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToLabels, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorLabels, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset, isLottieSrc };

package/dist/index.js

@@ -61,6 +61,7 @@ __export(index_exports, {
   DEFAULT_EXCHANGE_RATE_WS_URL: () => DEFAULT_EXCHANGE_RATE_WS_URL,
   DEFAULT_SYMBOLS_ENDPOINT: () => DEFAULT_SYMBOLS_ENDPOINT,
   DEFAULT_TRADE_HREF: () => DEFAULT_TRADE_HREF,
+  DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS: () => DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS,
   DEFAULT_TRADING_CALCULATOR_LABELS: () => DEFAULT_TRADING_CALCULATOR_LABELS,
   DayNightTransition: () => DayNightTransition,
   DocumentChips: () => DocumentChips,
@@ -8922,7 +8923,53 @@ var TradingCalculator = ({
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
 var import_react35 = require("react");
+
+// templates/TradingCalculatorHowTo/TradingCalculatorHowTo.types.ts
+var DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS = {
+  formulaHeading: "Formula",
+  exampleHeading: "Example",
+  swapTabPoints: "Swap calculation (In points)",
+  swapTabPercentage: "Swap calculation (In percentage)"
+};
+
+// templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
+function applyContentLabels(base, overrides) {
+  if (!overrides) {
+    return {
+      ...base,
+      formulaHeading: DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.formulaHeading,
+      exampleHeading: DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.exampleHeading
+    };
+  }
+  return {
+    ...base,
+    formulaHeading: overrides.formulaHeading ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.formulaHeading,
+    exampleHeading: overrides.exampleHeading ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.exampleHeading,
+    formulaBlocks: overrides.formulaBlocks ?? base.formulaBlocks,
+    exampleIntro: overrides.exampleIntro ?? base.exampleIntro,
+    exampleLead: overrides.exampleLead ?? base.exampleLead,
+    calculations: overrides.calculations ?? base.calculations,
+    resultText: overrides.resultText ?? base.resultText,
+    note: overrides.note ?? base.note
+  };
+}
+function bodyLabelsForMode(labels, isSwap, swapTab) {
+  if (!labels) return void 0;
+  const flat = {
+    formulaHeading: labels.formulaHeading,
+    exampleHeading: labels.exampleHeading,
+    formulaBlocks: labels.formulaBlocks,
+    exampleIntro: labels.exampleIntro,
+    exampleLead: labels.exampleLead,
+    calculations: labels.calculations,
+    resultText: labels.resultText,
+    note: labels.note
+  };
+  if (!isSwap) return flat;
+  const tabSpecific = swapTab === "percentage" ? labels.swapPercentage : labels.swapPoints;
+  return { ...flat, ...tabSpecific };
+}
 var MARGIN_CONTENT = {
   title: "How to calculate margin requirements",
   description: "Use this formula to calculate how much margin is required based on your lot size, leverage ratio, and the current market price.",
@@ -9067,11 +9114,15 @@ var SWAP_PERCENTAGE_CONTENT = {
   ],
   resultText: "This means the swap charge is USD -0.26 to keep the position open overnight."
 };
-var SWAP_TABS = [
-  { id: "points", label: "Swap calculation (In points)" },
-  { id: "percentage", label: "Swap calculation (In percentage)" }
-];
 var swapModeForVariant = (variant) => variant === "swap-percentage" ? "percentage" : "points";
+function swapTabsForLabels(labels) {
+  const points = labels?.swapTabPoints ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.swapTabPoints;
+  const percentage = labels?.swapTabPercentage ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.swapTabPercentage;
+  return [
+    { id: "points", label: points },
+    { id: "percentage", label: percentage }
+  ];
+}
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react35.useLayoutEffect : import_react35.useEffect;
 var FormulaBlockView = ({ block }) => {
   if (block.type === "footnote") {
@@ -9174,6 +9225,7 @@ var TradingCalculatorHowTo = ({
   variant = "margin",
   title,
   description,
+  labels,
   className,
   ...props
 }) => {
@@ -9182,9 +9234,14 @@ var TradingCalculatorHowTo = ({
   (0, import_react35.useEffect)(() => {
     setSwapTab(swapModeForVariant(variant));
   }, [variant]);
-  const content = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
+  const baseContent = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
+  const content = applyContentLabels(
+    baseContent,
+    bodyLabelsForMode(labels, isSwap, swapTab)
+  );
   const heading = title ?? content.title;
   const desc = description ?? content.description;
+  const swapTabs = swapTabsForLabels(labels);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("section", { className: ["tchow-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "tchow-container", children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "tchow-intro", children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h2", { className: "tchow-title", children: heading }),
@@ -9194,7 +9251,7 @@ var TradingCalculatorHowTo = ({
       Tabs,
       {
         className: "tchow-tabs",
-        items: SWAP_TABS,
+        items: swapTabs,
         activeId: swapTab,
         onChange: (id) => setSwapTab(id)
       }
@@ -12473,6 +12530,7 @@ var AffiliatesSlider = ({
   DEFAULT_EXCHANGE_RATE_WS_URL,
   DEFAULT_SYMBOLS_ENDPOINT,
   DEFAULT_TRADE_HREF,
+  DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS,
   DEFAULT_TRADING_CALCULATOR_LABELS,
   DayNightTransition,
   DocumentChips,