@developer_tribe/react-builder 1.2.29 → 1.2.30

package/src/hooks/useLocalize.ts

@@ -1,27 +1,31 @@
 import { useCallback } from 'react';
-import type { AppConfig } from '../types/PreviewConfig';
-import { defaultAppConfig } from '../types/PreviewConfig';
+import { type Localication, defaultLocalization } from '../types/PreviewConfig';
 import { useBuilderParams } from '../components/BuilderProvider';
 import { useLocalizationParams } from './useLocalizationParams';
 import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
 
 export type LocalizeFn = (keyOrText: string) => string;
 
-export function useLocalize(options?: { appConfig?: AppConfig }): LocalizeFn {
+export function useLocalize(options?: {
+  localization?: Localication;
+  defaultLanguage?: string;
+}): LocalizeFn {
   const {
-    appConfig: builderAppConfig,
-    defaultLanguage: builderDefaultLanguage,
+    localization: builderLocalization,
+    mockDefaultLanguage: builderDefaultLanguage,
   } = useBuilderParams();
-  const appConfig = options?.appConfig ?? builderAppConfig ?? defaultAppConfig;
-  const defaultLanguage = builderDefaultLanguage ?? 'en';
-  const { localication } = appConfig;
+
+  const localization =
+    options?.localization ?? builderLocalization ?? defaultLocalization;
+  const defaultLanguage =
+    options?.defaultLanguage ?? builderDefaultLanguage ?? 'en';
   const params = useLocalizationParams();
 
   return useCallback(
     (keyOrText: string) => {
-      const raw = localication?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
+      const raw = localization?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
       return replaceLocalizationParams(raw, params);
     },
-    [defaultLanguage, localication, params],
+    [defaultLanguage, localization, params],
   );
 }

package/src/hooks/usePreviewSelection.ts

@@ -0,0 +1,66 @@
+import { useEffect, type RefObject } from 'react';
+import type { Node } from '../types/Node';
+import { findNodeByKeyNested } from '../utils/findNodeByKeyNested';
+
+type UsePreviewSelectionParams = {
+  previewMode: boolean;
+  data: Node;
+  rootRef: RefObject<HTMLDivElement>;
+  onSelectNode?: (node: Node | null) => void;
+  setCurrent: (node: Node) => void;
+  forceRender: number;
+};
+
+export function usePreviewSelection({
+  previewMode,
+  data,
+  rootRef,
+  onSelectNode,
+  setCurrent,
+  forceRender,
+}: UsePreviewSelectionParams) {
+  useEffect(() => {
+    if (!previewMode) {
+      return;
+    }
+
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+
+      if (!target) return;
+
+      // Ignore clicks on carousel dots to avoid interfering with navigation
+      if (target.closest('.embla__dot')) {
+        return;
+      }
+
+      // Some build-components may attach synthetic keys (e.g. React `useId()`),
+      // which are not present in the persisted node tree. Walk up until we find
+      // an attribute-key that resolves to a real node.
+      let element = target.closest('[attribute-key]') as HTMLElement | null;
+      while (element) {
+        const key = element.getAttribute('attribute-key');
+        if (key) {
+          const node = findNodeByKeyNested(data, key);
+          if (node) {
+            setCurrent(node);
+            onSelectNode?.(node);
+            return;
+          }
+        }
+        element = element.parentElement?.closest('[attribute-key]') ?? null;
+      }
+    };
+
+    root.addEventListener('click', handleClick);
+
+    return () => {
+      root.removeEventListener('click', handleClick);
+    };
+  }, [previewMode, data, onSelectNode, setCurrent, forceRender, rootRef]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
+}

package/src/index.ts

@@ -16,13 +16,11 @@ export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 export type { Project, ProjectColors, ProjectMeta } from './types/Project';
 export type { Device } from './types/Device';
 export type {
-  AppConfig,
   Theme,
   Localication,
   LocalizationKey,
 } from './types/PreviewConfig';
 export {
-  defaultAppConfig,
   defaultTheme,
   defaultLocalization,
   mergeLocalization,

package/src/logger.ts

@@ -6,33 +6,17 @@
  */
 
 type LogPayload = Record<string, unknown>;
-type LogOptions = { remote?: boolean };
 
 function noop() {}
-
+//TODO: bizim logger'ı kullan
 export const iapLogger = {
-  error(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  error(_tags: string[], message: string, payload?: LogPayload) {
     console.error(`[iap] ${message}`, payload);
   },
-  warn(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  warn(_tags: string[], message: string, payload?: LogPayload) {
     console.warn(`[iap] ${message}`, payload);
   },
-  info(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  info(_tags: string[], message: string, payload?: LogPayload) {
     console.info(`[iap] ${message}`, payload);
   },
   debug: noop,

package/src/modals/IconPickerModal.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import Modal from './Modal';
-import { Icons, type IconsType } from '../types/Icons';
+import { Icons, type IconsType } from '../types/Icons.generated';
 import { Icon } from '../components/Icon.generated';
 
 type IconPickerModalProps = {

package/src/modals/InspectModal.tsx

@@ -15,14 +15,13 @@ type InspectModalProps = {
 export function InspectModal({ onClose }: InspectModalProps) {
   const [activeTab, setActiveTab] = useState<InspectTab>('localizations');
 
-  const { appConfig, projectColors, theme, defaultLanguage } = useRenderStore(
-    (s) => ({
-      appConfig: s.appConfig,
+  const { localization, projectColors, theme, defaultLanguage } =
+    useRenderStore((s) => ({
+      localization: s.localization,
       projectColors: s.projectColors,
       theme: s.theme,
       defaultLanguage: s.defaultLanguage,
-    }),
-  );
+    }));
 
   const paramsSnapshot = useMemo(() => getLastParamsSnapshot(), []);
 
@@ -69,7 +68,7 @@ export function InspectModal({ onClose }: InspectModalProps) {
       <div className="inspect-modal__body">
         {activeTab === 'localizations' && (
           <LocalizationsTab
-            localication={appConfig.localication ?? {}}
+            localication={localization ?? {}}
             language={defaultLanguage}
           />
         )}
@@ -107,7 +106,7 @@ function LocalizationsTab({
   if (entries.length === 0) {
     return (
       <p className="inspect-modal__empty">
-        No localization keys found for "{language}".
+        No localization keys found for &quot;{language}&quot;.
       </p>
     );
   }

package/src/pages/DebugJsonPage.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import type { Node } from '../types/Node';
 import type { NodeData, NodeDefaultAttribute } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
 import { Checkbox } from '../components/Checkbox';
 import { JsonTextEditor } from '../components/JsonTextEditor';
 import { analyseAndProccess } from '../utils/analyseNode';
@@ -24,9 +23,6 @@ export type DebugJsonPageProps = {
   previewMode?: boolean;
   setPreviewMode?: (next: boolean) => void;
 
-  appConfig?: AppConfig;
-  setAppConfig?: (next: AppConfig) => void;
-
   logLabel?: string;
 };
 
@@ -39,8 +35,6 @@ export function DebugJsonPage({
   description,
   previewMode,
   setPreviewMode,
-  appConfig,
-  setAppConfig,
   logLabel,
 }: DebugJsonPageProps) {
   const setCurrent = useRenderStore((s) => s.setCurrent);

package/src/pages/ProjectPage.tsx

@@ -7,13 +7,7 @@ import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
 import { BuilderPanel } from './tabs/BuilderPanel';
 import { BottomBar } from '../components/BottomBar';
-import {
-  type AppConfig,
-  defaultAppConfig,
-  defaultLocalization,
-  mergeLocalization,
-  type Localication,
-} from '../types/PreviewConfig';
+import { type Localication } from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
 import { useLogRender } from '../utils/useLogRender';
@@ -24,7 +18,6 @@ import {
   isNodeNullOrUndefined,
 } from '../utils/analyseNode';
 import { getImage, TribeAssetName } from '../utils/getImage';
-import type { PaywallBenefits } from '../paywall/types/benefits';
 import { LoadingComponent } from '../components/LoadingComponent';
 import { ProjectValidationPage } from './ProjectValidationPage';
 import { ProjectMigrationPage } from './ProjectMigrationPage';
@@ -89,32 +82,18 @@ export function ProjectPage({
     setCurrent,
     setProjectColors,
     setProjectName,
-    setAppConfig,
-    storeAppConfig,
-    storeTheme,
-    storeDefaultLanguage,
+    setLocalization,
     products,
     benefits,
-    previewMode,
   } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
     setProjectColors: s.setProjectColors,
     setProjectName: s.setProjectName,
-    setAppConfig: s.setAppConfig,
-    storeAppConfig: s.appConfig,
-    storeTheme: s.theme,
-    storeDefaultLanguage: s.defaultLanguage,
+    setLocalization: s.setLocalization,
     products: s.products,
     benefits: s.benefits,
-    previewMode: s.previewMode,
   }));
-  const resolvedAppConfig: AppConfig = localization
-    ? {
-        ...defaultAppConfig,
-        localication: mergeLocalization(defaultLocalization, localization),
-      }
-    : (storeAppConfig ?? defaultAppConfig);
   const [overrideProject, setOverrideProject] = useState<Project | null>(null);
   const activeProject = overrideProject ?? project;
   const resolvedName = name ?? activeProject.name;
@@ -184,15 +163,16 @@ export function ProjectPage({
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
     setOverrideProject(null);
-    if (localization) {
-      const merged = mergeLocalization(defaultLocalization, localization);
-      setAppConfig({ ...defaultAppConfig, localication: merged });
-      logger.verbose('ProjectPage', 'localization applied', merged);
-    }
     return () => {
       logger.info('ProjectPage', 'unmount');
     };
-  }, [localization, project.name, setAppConfig]);
+  }, [project.name]);
+
+  useEffect(() => {
+    if (localization) {
+      setLocalization(localization);
+    }
+  }, [localization, setLocalization]);
 
   useEffect(() => {
     setProjectName(resolvedName);
@@ -460,10 +440,7 @@ export function ProjectPage({
               name: fixedName,
               version: CURRENT_PROJECT_VERSION,
               data: nodeCandidate,
-              appConfig: activeRecord?.appConfig,
-              projectColors: activeRecord?.projectColors as
-                | ProjectColors
-                | undefined,
+              projectColors: {},
               type: isAllowedProjectType(activeRecord?.type)
                 ? (activeRecord.type as 'paywall' | 'onboard' | 'other')
                 : undefined,
@@ -655,29 +632,7 @@ export function ProjectPage({
               )}
               {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
               {!showLoading && (
-                <RenderPage
-                  data={editorData}
-                  name={resolvedName}
-                  params={{
-                    mockProducts: products,
-                    mockBenefits:
-                      benefits && typeof benefits === 'object'
-                        ? (benefits as PaywallBenefits)
-                        : {},
-                    // Colors/fonts/theme must be passed via BuilderProvider params so build-components never touch useRenderStore.
-                    theme: storeTheme,
-                    defaultLanguage: storeDefaultLanguage,
-                    appConfig: resolvedAppConfig,
-                    projectColors: resolvedProjectColors,
-                    fonts: typography.fonts,
-                    appFont: resolvedAppFont,
-                    previewMode,
-                    selectedKey:
-                      current && typeof current === 'object' && 'key' in current
-                        ? ((current as NodeData).key as string | undefined)
-                        : undefined,
-                  }}
-                />
+                <RenderPage data={editorData} name={resolvedName} />
               )}
             </div>
             {/* BOTOM BAR */}

package/src/pages/tabs/SideTool.tsx

@@ -19,8 +19,8 @@ export function SideTool({ data, setData }: SideToolProps) {
   const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
   const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
   const {
-    appConfig,
-    setAppConfig,
+    localization,
+    setLocalization,
     theme,
     setTheme,
     defaultLanguage,
@@ -30,8 +30,8 @@ export function SideTool({ data, setData }: SideToolProps) {
     isRtl,
     setIsRtl,
   } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
+    localization: s.localization,
+    setLocalization: s.setLocalization,
     theme: s.theme,
     setTheme: s.setTheme,
     defaultLanguage: s.defaultLanguage,
@@ -43,7 +43,7 @@ export function SideTool({ data, setData }: SideToolProps) {
   }));
 
   const handleLocalicationChange = (data: Localication) => {
-    setAppConfig({ ...appConfig, localication: data });
+    setLocalization(data);
   };
 
   return (
@@ -63,7 +63,7 @@ export function SideTool({ data, setData }: SideToolProps) {
             value={defaultLanguage}
             onChange={(e) => setDefaultLanguage(e.target.value)}
           >
-            {Object.keys(appConfig.localication ?? {}).map((language) => (
+            {Object.keys(localization ?? {}).map((language) => (
               <option key={language} value={language}>
                 {language}
               </option>
@@ -129,7 +129,7 @@ export function SideTool({ data, setData }: SideToolProps) {
 
           {isLocalicationModalOpen && (
             <LocalicationModal
-              data={appConfig.localication ?? {}}
+              data={localization ?? {}}
               onChange={handleLocalicationChange}
               onClose={() => setIsLocalicationModalOpen(false)}
             />

package/src/product-base/extractAndroidParams.ts

@@ -62,7 +62,6 @@ export function extractAndroidParams(
             requestedOfferId: offerId,
             availableOffers: subscriptionOffers.map((o) => o.id),
           },
-          { remote: true },
         );
       }
     }
@@ -102,15 +101,10 @@ export function extractAndroidParams(
       pricingPhases[pricingPhases.length - 1];
 
     if (!regularPhase) {
-      iapLogger.error(
-        ['extractAndroidParams'],
-        'No regular phase found',
-        {
-          productId: product.id || product.productId,
-          pricingPhasesCount: pricingPhases.length,
-        },
-        { remote: true },
-      );
+      iapLogger.error(['extractAndroidParams'], 'No regular phase found', {
+        productId: product.id || product.productId,
+        pricingPhasesCount: pricingPhases.length,
+      });
       return getEmptyParams();
     }
 
@@ -178,7 +172,6 @@ export function extractAndroidParams(
         productId: product?.id || product?.productId,
         error: error instanceof Error ? error.message : String(error),
       },
-      { remote: true },
     );
     return getEmptyParams();
   }

package/src/product-base/extractIOSParams.ts

@@ -134,7 +134,6 @@ export function extractIOSParams(
               (d: IOSDiscount) => d.identifier,
             ),
           },
-          { remote: true },
         );
       }
     }
@@ -163,15 +162,10 @@ export function extractIOSParams(
       pricePerYear,
     };
   } catch (error) {
-    iapLogger.error(
-      ['extractIOSParams'],
-      'Failed to extract iOS params',
-      {
-        productId: product?.id || product?.productId,
-        error: error instanceof Error ? error.message : String(error),
-      },
-      { remote: true },
-    );
+    iapLogger.error(['extractIOSParams'], 'Failed to extract iOS params', {
+      productId: product?.id || product?.productId,
+      error: error instanceof Error ? error.message : String(error),
+    });
     return getEmptyParams();
   }
 }

package/src/size-matters/index.ts

@@ -1,23 +1,31 @@
-import { useRenderStore } from '../store';
-import { defaultAppConfig } from '../types/PreviewConfig';
+import { defaultBaseSize, type BaseSize } from '../types/PreviewConfig';
 import { getDefaultDevice } from '../utils/getDevices';
+import type { Device } from '../types/Device';
 
 const fallbackDevice = getDefaultDevice();
-const fallbackBaseSize = defaultAppConfig.baseSize;
+const fallbackBaseSize = defaultBaseSize;
 
 function ensureNumber(value: number | undefined, fallback: number) {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 }
 
-function getBaseDimensions() {
-  const currentState = useRenderStore.getState();
-  const device = currentState.device ?? fallbackDevice;
-  const baseSize = currentState.appConfig?.baseSize ?? fallbackBaseSize;
-
-  const deviceWidth = ensureNumber(device?.width, fallbackDevice.width);
-  const deviceHeight = ensureNumber(device?.height, fallbackDevice.height);
-  const baseWidth = ensureNumber(baseSize?.width, fallbackBaseSize.width);
-  const baseHeight = ensureNumber(baseSize?.height, fallbackBaseSize.height);
+/**
+ * Calculates scaling factors based on baseSize and current device dimensions.
+ */
+export function getScalers(
+  customBaseSize: BaseSize = fallbackBaseSize,
+  customDevice: Device = fallbackDevice,
+) {
+  const deviceWidth = ensureNumber(customDevice?.width, fallbackDevice.width);
+  const deviceHeight = ensureNumber(
+    customDevice?.height,
+    fallbackDevice.height,
+  );
+  const baseWidth = ensureNumber(customBaseSize?.width, fallbackBaseSize.width);
+  const baseHeight = ensureNumber(
+    customBaseSize?.height,
+    fallbackBaseSize.height,
+  );
 
   const [shortDimension, longDimension] =
     deviceWidth < deviceHeight
@@ -25,46 +33,51 @@ function getBaseDimensions() {
       : [deviceHeight, deviceWidth];
 
   return {
-    baseSize: { width: baseWidth, height: baseHeight },
-    shortDimension,
-    longDimension,
+    scale: (size: number) => (shortDimension / baseWidth) * size,
+    verticalScale: (size: number) => (longDimension / baseHeight) * size,
+    moderateScale: (size: number, factor = 0.5) => {
+      const s = (shortDimension / baseWidth) * size;
+      return size + (s - size) * factor;
+    },
   };
 }
-export function scale(size: number) {
-  const { baseSize, shortDimension } = getBaseDimensions();
-  return (shortDimension / baseSize.width) * size;
-}
-export function verticalScale(size: number) {
-  const { baseSize, longDimension } = getBaseDimensions();
-  return (longDimension / baseSize.height) * size;
-}
 
-export const s = scale;
-export const vs = verticalScale;
-export const fs = verticalScale;
+// Deprecated: legacy exports that rely on defaults - prefer usage via getScalers or passing params
+// For backward compatibility (if any), these will use defaults, effectively disabling dynamic store updates
+export const s = (size: number) => getScalers().scale(size);
+export const vs = (size: number) => getScalers().verticalScale(size);
+export const fs = vs;
+export const ms = (size: number, factor?: number) =>
+  getScalers().moderateScale(size, factor);
 
-export function parseSize(value?: string | number) {
+export function parseSize(
+  value: string | number | undefined,
+  baseSize?: BaseSize,
+  device?: Device,
+) {
   if (value === undefined) return undefined;
   if (typeof value === 'number') {
     return value;
   }
 
+  const scalers = getScalers(baseSize, device);
+
   const raw = String(value).trim();
   const lower = raw.toLowerCase();
 
   // Handle explicit scalers via suffixes
   if (lower.endsWith('@s')) {
     const n = parseFloat(lower.slice(0, -2));
-    return Number.isFinite(n) ? s(n) : raw;
+    return Number.isFinite(n) ? scalers.scale(n) : raw;
   }
   if (lower.endsWith('@vs')) {
     const n = parseFloat(lower.slice(0, -3));
-    return Number.isFinite(n) ? vs(n) : raw;
+    return Number.isFinite(n) ? scalers.verticalScale(n) : raw;
   }
   if (lower.endsWith('@f') || lower.endsWith('@fs')) {
     const cut = lower.endsWith('@f') ? -2 : -3;
     const n = parseFloat(lower.slice(0, cut));
-    return Number.isFinite(n) ? fs(n) : raw;
+    return Number.isFinite(n) ? scalers.verticalScale(n) : raw;
   }
 
   // Preserve percentage values as-is
@@ -79,7 +92,7 @@ export function parseSize(value?: string | number) {
     return Number.isFinite(n) ? n : raw;
   }
 
-  // Plain numeric strings fall back to provided scaler
+  // Plain numeric strings fall back to provided scaler (implicit number)
   const numeric = parseFloat(lower);
   if (Number.isFinite(numeric)) {
     return numeric;

package/src/store.ts

@@ -2,9 +2,11 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
 import {
-  defaultAppConfig,
+  defaultBaseSize,
+  defaultLocalization,
   defaultTheme,
-  type AppConfig,
+  type BaseSize,
+  type Localication,
   type Theme,
 } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
@@ -29,14 +31,16 @@ type RenderStore = {
   incForceRender: () => void;
   device: Device;
   setDevice: (device: Device) => void;
-  appConfig: AppConfig;
-  setAppConfig: (appConfig: AppConfig) => void;
+  baseSize: BaseSize;
+  setBaseSize: (baseSize: BaseSize) => void;
   projectColors?: ProjectColors;
   setProjectColors: (projectColors?: ProjectColors) => void;
   theme: Theme;
   setTheme: (theme: Theme) => void;
   defaultLanguage: string;
   setDefaultLanguage: (lang: string) => void;
+  localization: Localication;
+  setLocalization: (localization: Localication) => void;
   isRtl: boolean;
   setIsRtl: (isRtl: boolean) => void;
   previewMode: boolean;
@@ -106,14 +110,16 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
         set((state) => ({ forceRender: state.forceRender + 1 })),
       device: getDefaultDevice(),
       setDevice: (device) => set({ device }),
-      appConfig: defaultAppConfig,
-      setAppConfig: (appConfig) => set({ appConfig }),
+      baseSize: defaultBaseSize,
+      setBaseSize: (baseSize) => set({ baseSize }),
       projectColors: undefined,
       setProjectColors: (projectColors) => set({ projectColors }),
       theme: defaultTheme,
       setTheme: (theme) => set({ theme }),
       defaultLanguage: 'en',
       setDefaultLanguage: (lang) => set({ defaultLanguage: lang }),
+      localization: defaultLocalization,
+      setLocalization: (localization) => set({ localization }),
       isRtl: false,
       setIsRtl: (isRtl) => set({ isRtl }),
       previewMode: false,

package/src/styles/modals/_inspect-modal.scss

@@ -31,7 +31,9 @@
   font-weight: 500;
   color: colors.$mutedTextColor;
   border-bottom: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 
   &:hover {
     color: colors.$textColor;
@@ -99,7 +101,8 @@
 }
 
 .inspect-modal__cell-key {
-  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-family:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
   font-size: sizes.$fontSizeXs;
   word-break: break-all;
   max-width: 320px;
@@ -110,7 +113,8 @@
 }
 
 .inspect-modal__cell-value {
-  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-family:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
   font-size: sizes.$fontSizeXs;
   word-break: break-all;
   display: flex;