@nobak/design-system 1.0.0

package/lib/styles/typography.js

@@ -0,0 +1,1419 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// src/design-tokens/typography.ts
+// Typography Design System with Semantic Token Architecture
+// Following Adobe Spectrum patterns: Global → Semantic → Fintech → Component
+
+// ===========================
+// LAYER 1: GLOBAL TYPOGRAPHY TOKENS
+// Raw typographic values - the source of truth
+// ===========================
+
+// Add this type definition near the top of your file, with other type definitions
+
+// Define valid font weight values
+
+// Define the font weight mapping type
+
+export var globalTypography = {
+  fontFamily: {
+    sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: 'ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
+    system: 'system-ui',
+    tabular: '"SF Pro Display", "Segoe UI", system-ui, sans-serif',
+    currency: '"SF Pro Display", "Segoe UI", system-ui, sans-serif'
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  },
+  fontSize: {
+    50: 6,
+    // Fine print
+    75: 8,
+    // Captions
+    100: 10,
+    // Small body
+    200: 13,
+    // Default body
+    300: 16,
+    // Large body
+    400: 21,
+    // Emphasized body
+    500: 24,
+    // Small headings
+    600: 34,
+    // Medium headings
+    700: 42,
+    // Large headings
+    800: 55,
+    // XL headings
+    900: 68,
+    // XXL headings
+    1000: 89,
+    // Small display
+    1100: 110,
+    // Medium display
+    1200: 144,
+    // Large display
+    1300: 178 // XL display
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.8
+  },
+  letterSpacing: {
+    tight: -0.05,
+    normal: 0,
+    wide: 0.05
+  },
+  fontFeatures: {
+    tabularNums: '"tnum" 1',
+    proportionalNums: '"pnum" 1',
+    slashedZero: '"zero" 1',
+    financialNums: '"tnum" 1, "zero" 1',
+    "default": 'normal'
+  }
+};
+
+// ===========================
+// DERIVED GLOBAL TYPES
+// ===========================
+
+// ===========================
+// UTILITY FUNCTIONS
+// ===========================
+
+// Helper type for text style properties
+
+// Type guard to check if a value is a valid GlobalFontFamily
+var isGlobalFontFamily = function isGlobalFontFamily(value) {
+  return ['sans', 'serif', 'mono', 'system', 'tabular', 'currency'].includes(value);
+};
+
+// Type guard to check if a value is a valid GlobalFontWeight
+var isGlobalFontWeight = function isGlobalFontWeight(value) {
+  return ['light', 'regular', 'medium', 'semibold', 'bold', 'extrabold', 'black'].includes(value);
+};
+
+// Type for React Native font weights
+
+// Map fontWeight values to React Native compatible values
+var mapFontWeight = function mapFontWeight(weight) {
+  try {
+    // Handle numeric weights
+    if (typeof weight === 'number') {
+      var weightStr = weight.toString();
+      if (['100', '200', '300', '400', '500', '600', '700', '800', '900'].includes(weightStr)) {
+        return weightStr;
+      }
+      return null;
+    }
+
+    // Handle string weights
+    var lowerWeight = weight.toLowerCase();
+
+    // Map common weight names to numeric values
+    var weightMap = {
+      '100': '100',
+      '200': '200',
+      '300': '300',
+      '400': '400',
+      '500': '500',
+      '600': '600',
+      '700': '700',
+      '800': '800',
+      '900': '900',
+      'normal': '400',
+      'bold': '700',
+      'lighter': '300',
+      'bolder': '700'
+    };
+
+    // Check if the weight is a direct match
+    if (lowerWeight in weightMap) {
+      return weightMap[lowerWeight];
+    }
+
+    // Check if the weight exists in our global typography
+    if (lowerWeight in globalTypography.fontWeight) {
+      var numericWeight = globalTypography.fontWeight[lowerWeight];
+      if (typeof numericWeight === 'number') {
+        var _weightStr = numericWeight.toString();
+        if (['100', '200', '300', '400', '500', '600', '700', '800', '900'].includes(_weightStr)) {
+          return _weightStr;
+        }
+      }
+    }
+    return null;
+  } catch (e) {
+    console.warn('Error mapping font weight:', e);
+    return null;
+  }
+};
+
+/**
+ * Converts design system typography tokens to React Native's TextStyle format
+ * This is the unified function that handles all typography style conversions
+ */
+var toTextStyle = function toTextStyle(style, baseFontSize) {
+  var result = {};
+  var resolvedFontSize;
+
+  // 1. Resolve Font Size
+  if (style.fontSize !== undefined) {
+    if (typeof style.fontSize === 'number') {
+      resolvedFontSize = style.fontSize;
+    } else if (typeof style.fontSize === 'string') {
+      // Check if it's a token key
+      if (style.fontSize in globalTypography.fontSize) {
+        var tokenValue = globalTypography.fontSize;
+        if (typeof tokenValue === 'number') {
+          resolvedFontSize = tokenValue;
+        }
+      } else if (!isNaN(Number(style.fontSize))) {
+        // It's a string number like ', '
+        resolvedFontSize = Number(style.fontSize);
+      }
+    }
+    if (resolvedFontSize !== undefined) {
+      result.fontSize = resolvedFontSize;
+    }
+  } else if (baseFontSize !== undefined) {
+    resolvedFontSize = baseFontSize;
+  }
+
+  // 2. Resolve Font Family
+  if (style.fontFamily) {
+    if (typeof style.fontFamily === 'string' && globalTypography.fontFamily[style.fontFamily]) {
+      result.fontFamily = globalTypography.fontFamily[style.fontFamily];
+    } else {
+      result.fontFamily = String(style.fontFamily);
+    }
+  }
+
+  // 3. Resolve Font Weight
+  if (style.fontWeight !== undefined) {
+    try {
+      if (typeof style.fontWeight === 'string' && globalTypography.fontWeight[style.fontWeight]) {
+        var fw = globalTypography.fontWeight[style.fontWeight];
+        result.fontWeight = fw.toString();
+      } else if (typeof style.fontWeight === 'string' || typeof style.fontWeight === 'number') {
+        var mappedWeight = mapFontWeight(style.fontWeight);
+        if (mappedWeight) {
+          result.fontWeight = mappedWeight;
+        } else {
+          // Fallback for direct string weights like 'bold' or '400'
+          result.fontWeight = String(style.fontWeight);
+        }
+      }
+    } catch (e) {
+      console.warn("Error processing font weight: ".concat(style.fontWeight), e);
+    }
+  }
+
+  // 4. Resolve Line Height (can be a key for multiplier or a raw number for absolute value)
+  if (style.lineHeight !== undefined) {
+    var lineHeightValue;
+    if (style.lineHeight === 'normal') {
+      lineHeightValue = undefined;
+    } else if (typeof style.lineHeight === 'string' && style.lineHeight in globalTypography.lineHeight) {
+      // Convert line height token to number (multiplier)
+      var _tokenValue = globalTypography.lineHeight[style.lineHeight];
+      if (typeof _tokenValue === 'number' && resolvedFontSize !== undefined) {
+        lineHeightValue = _tokenValue * resolvedFontSize;
+      }
+    } else if (typeof style.lineHeight === 'number' && !isNaN(style.lineHeight)) {
+      // Direct assignment for valid numbers (absolute pixel value)
+      lineHeightValue = style.lineHeight;
+    } else if (typeof style.lineHeight === 'string' && !isNaN(Number(style.lineHeight))) {
+      // Convert string numbers to actual numbers
+      lineHeightValue = Number(style.lineHeight);
+    }
+    if (lineHeightValue !== undefined) {
+      result.lineHeight = lineHeightValue;
+    }
+  }
+
+  // 5. Resolve Letter Spacing (can be a key for em-multiplier or a raw number for absolute value)
+  if (style.letterSpacing !== undefined) {
+    var letterSpacingValue;
+    if (typeof style.letterSpacing === 'string' && style.letterSpacing in globalTypography.letterSpacing) {
+      // Convert letter spacing token to number (em multiplier)
+      var _tokenValue2 = globalTypography.letterSpacing[style.letterSpacing];
+      if (typeof _tokenValue2 === 'number' && resolvedFontSize !== undefined) {
+        letterSpacingValue = _tokenValue2 * resolvedFontSize;
+      }
+    } else if (typeof style.letterSpacing === 'number' && !isNaN(style.letterSpacing)) {
+      // Direct assignment for valid numbers (absolute pixel value)
+      letterSpacingValue = style.letterSpacing;
+    } else if (typeof style.letterSpacing === 'string' && !isNaN(Number(style.letterSpacing))) {
+      // Convert string numbers to actual numbers
+      letterSpacingValue = Number(style.letterSpacing);
+    } else if (style.letterSpacing === 'normal') {
+      // 'normal' means 0 letter spacing
+      letterSpacingValue = 0;
+    }
+    if (typeof letterSpacingValue === 'number') {
+      result.letterSpacing = letterSpacingValue;
+    }
+  }
+
+  // 6. Handle textTransform and other text style properties
+  var textStyleProps = ['textTransform', 'fontFeatureSettings', 'textAlign', 'textAlignVertical', 'includeFontPadding'];
+  textStyleProps.forEach(function (prop) {
+    if (prop in style) {
+      result[prop] = style[prop];
+    }
+  });
+
+  // 7. Copy any additional properties that aren't handled above
+  Object.keys(style).forEach(function (key) {
+    if (!['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing'].concat(textStyleProps).includes(key)) {
+      result[key] = style[key];
+    }
+  });
+  return result;
+};
+
+// ===========================
+// LAYER 2: SEMANTIC TYPOGRAPHY TOKENS
+// Purpose-based typography assignments
+// ===========================
+
+export var semanticTypography = {
+  // Text hierarchy - what users read
+  text: {
+    // Primary content text
+    primary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Secondary supporting text
+    secondary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Tertiary/subtle text
+    tertiary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[75],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    },
+    // Emphasized text within body content
+    emphasis: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  },
+  // Heading hierarchy
+  heading: {
+    // Page/section titles
+    primary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[800],
+      fontWeight: globalTypography.fontWeight.bold,
+      lineHeight: globalTypography.fontSize[800] * globalTypography.lineHeight.tight,
+      letterSpacing: globalTypography.letterSpacing.tight
+    },
+    // Sub-section titles
+    secondary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[600],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[600] * globalTypography.lineHeight.tight,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Card/component titles
+    tertiary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[500],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[500] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Minor headings
+    quaternary: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[400],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[400] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  },
+  // Interactive text
+  interactive: {
+    // Links
+    link: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Button text
+    button: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    }
+  },
+  // Utility text
+  utility: {
+    // Labels and form text
+    label: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    },
+    // Captions and metadata
+    caption: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[75],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    },
+    // Code and technical text
+    code: {
+      fontFamily: globalTypography.fontFamily.mono,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  }
+};
+
+// ===========================
+// LAYER 3: FINTECH-SPECIFIC TYPOGRAPHY TOKENS
+// Business domain typography assignments
+// ===========================
+
+export var fintechTypography = {
+  // Currency and monetary amounts
+  currency: {
+    // Large amounts (hero displays)
+    large: {
+      fontFamily: globalTypography.fontFamily.currency,
+      fontSize: globalTypography.fontSize[800],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[800] * globalTypography.lineHeight.tight,
+      letterSpacing: globalTypography.letterSpacing.tight,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    },
+    // Standard amounts (cards, lists)
+    medium: {
+      fontFamily: globalTypography.fontFamily.currency,
+      fontSize: globalTypography.fontSize[500],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[500] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    },
+    // Small amounts (subtext, fees)
+    small: {
+      fontFamily: globalTypography.fontFamily.currency,
+      fontSize: globalTypography.fontSize[300],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    },
+    // Micro amounts (precise values)
+    micro: {
+      fontFamily: globalTypography.fontFamily.currency,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    }
+  },
+  // Tabular data (tables, lists with aligned numbers)
+  tabular: {
+    // Headers
+    header: {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide,
+      fontFeatureSettings: globalTypography.fontFeatures.tabularNums
+    },
+    // Data cells
+    data: {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.tabularNums
+    },
+    // Numeric data emphasis
+    dataEmphasis: {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.tabularNums
+    }
+  },
+  // Legal and compliance text
+  legal: {
+    // Terms and conditions
+    terms: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.relaxed,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Disclaimers and fine print
+    disclaimer: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[75],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    },
+    // Risk warnings
+    warning: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  },
+  // Transaction and account identifiers
+  identifier: {
+    // Account numbers, transaction IDs
+    account: {
+      fontFamily: globalTypography.fontFamily.mono,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide,
+      fontFeatureSettings: globalTypography.fontFeatures.slashedZero
+    },
+    // Reference numbers, confirmation codes
+    reference: {
+      fontFamily: globalTypography.fontFamily.mono,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide,
+      fontFeatureSettings: globalTypography.fontFeatures.slashedZero
+    }
+  },
+  // Market data and trading
+  market: {
+    // Price displays
+    price: {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[400],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[400] * globalTypography.lineHeight.tight,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    },
+    // Percentage changes
+    percentage: {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal,
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    },
+    // Symbol/ticker text
+    symbol: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    }
+  }
+};
+
+// ===========================
+// LAYER 4: COMPONENT-SPECIFIC TYPOGRAPHY TOKENS
+// Typography for specific UI components
+// ===========================
+
+export var componentTypography = {
+  // Button component typography
+  button: {
+    large: _objectSpread(_objectSpread({}, semanticTypography.interactive.button), {}, {
+      fontSize: globalTypography.fontSize[300],
+      lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+    }),
+    medium: _objectSpread(_objectSpread({}, semanticTypography.interactive.button), {}, {
+      fontSize: globalTypography.fontSize[200],
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+    }),
+    small: _objectSpread(_objectSpread({}, semanticTypography.interactive.button), {}, {
+      fontSize: globalTypography.fontSize[100],
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.wide
+    })
+  },
+  // Input component typography
+  input: {
+    // Input field text
+    field: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Placeholder text
+    placeholder: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Label text
+    label: _objectSpread({}, semanticTypography.utility.label),
+    // Error messages
+    error: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  },
+  // Card component typography
+  card: {
+    // Card titles
+    title: _objectSpread({}, semanticTypography.heading.tertiary),
+    // Card content
+    content: _objectSpread({}, semanticTypography.text.primary),
+    // Card metadata
+    metadata: _objectSpread({}, semanticTypography.utility.caption)
+  },
+  // Navigation component typography
+  navigation: {
+    // Menu items
+    item: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Breadcrumbs
+    breadcrumb: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  },
+  // Alert/notification component typography
+  alert: {
+    // Alert titles
+    title: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.semibold,
+      lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    },
+    // Alert body text
+    body: {
+      fontFamily: globalTypography.fontFamily.sans,
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular,
+      lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }
+  }
+};
+
+// ===========================
+// TYPOGRAPHY UTILITIES
+// ===========================
+
+// Export the unified toTextStyle function for backward compatibility
+export var typographyUtils = {
+  /**
+   * Create a complete TextStyle from typography tokens
+   * @deprecated Use toTextStyle() directly instead
+   */
+  createTextStyle: function createTextStyle(tokens) {
+    return toTextStyle(tokens);
+  },
+  /**
+   * Get responsive font size based on screen width
+   */
+  getResponsiveSize: function getResponsiveSize(baseSize, screenWidth) {
+    if (screenWidth < 375) {
+      return baseSize * 0.9; // Scale down for small screens
+    } else if (screenWidth > 768) {
+      return baseSize * 1.1; // Scale up for large screens
+    }
+    return baseSize;
+  },
+  /**
+   * Get currency style based on amount magnitude
+   */
+  getCurrencyStyle: function getCurrencyStyle(amount) {
+    var absAmount = Math.abs(amount);
+    if (absAmount >= 1000000) {
+      return fintechTypography.currency.large;
+    } else if (absAmount >= 1000) {
+      return fintechTypography.currency.medium;
+    } else if (absAmount >= 1) {
+      return fintechTypography.currency.small;
+    }
+    return fintechTypography.currency.micro;
+  },
+  /**
+   * Enhance text style with financial number features
+   */
+  withFinancialFeatures: function withFinancialFeatures(baseStyle) {
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      fontFeatureSettings: globalTypography.fontFeatures.financialNums
+    });
+  },
+  /**
+   * Enhance text style for accessibility
+   */
+  withA11yEnhancements: function withA11yEnhancements(baseStyle) {
+    var minSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      fontSize: Math.max(baseStyle.fontSize || globalTypography.fontSize[200], minSize),
+      lineHeight: Math.max(baseStyle.lineHeight || globalTypography.lineHeight.normal, 1.4)
+    });
+  }
+};
+
+// ===========================
+// TYPE EXPORTS
+// ===========================
+
+// ===========================
+// MAIN EXPORT
+// ===========================
+
+export var typography = {
+  global: globalTypography,
+  semantic: semanticTypography,
+  fintech: fintechTypography,
+  component: componentTypography,
+  utils: typographyUtils
+};
+
+// ====================
+// Type Definitions
+// ====================
+
+// Black
+
+/**
+ * Defines the structure for a single typography variant using global token keys.
+ * This is used to define entries in `typographyVariantData`.
+ */
+
+// ====================
+// Font Definitions
+// ====================
+
+var Fonts = {
+  Inter: {
+    regular: 'Inter-Regular',
+    medium: 'Inter-Medium',
+    semiBold: 'Inter-SemiBold',
+    bold: 'Inter-Bold',
+    light: 'Inter-Light'
+  },
+  RobotoMono: 'RobotoMono-Regular'
+};
+
+// ===========================
+// LAYER 2: SEMANTIC TYPOGRAPHY TOKENS
+// Purpose-based typography assignments
+// ===========================
+
+export var textStyles = {
+  // Display styles
+  displayLarge: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[900],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[900] * globalTypography.lineHeight.tight
+  }),
+  displayMedium: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[800],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[800] * globalTypography.lineHeight.tight
+  }),
+  displaySmall: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[700],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[700] * globalTypography.lineHeight.tight
+  }),
+  // Heading styles
+  headingH1: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[600],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.fontSize[600] * globalTypography.lineHeight.tight
+  }),
+  headingH2: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[500],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.fontSize[500] * globalTypography.lineHeight.tight
+  }),
+  headingH3: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[400],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.lineHeight.tight
+  }),
+  headingH4: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  }),
+  headingH5: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  }),
+  headingH6: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  }),
+  // Title styles
+  titleLarge: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[400],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.lineHeight.tight
+  }),
+  titleMedium: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.lineHeight.tight
+  }),
+  titleSmall: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.semiBold,
+    lineHeight: globalTypography.lineHeight.normal
+  }),
+  // Body styles
+  bodyLarge: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  }),
+  bodyMedium: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  }),
+  bodySmall: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  }),
+  // Label styles
+  labelLarge: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  }),
+  labelMedium: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.tight,
+    letterSpacing: globalTypography.letterSpacing.wide
+  }),
+  labelSmall: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[75],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  }),
+  // Other text styles
+  caption: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.tight
+  }),
+  buttonLarge: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  }),
+  buttonMedium: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  }),
+  buttonSmall: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.tight,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  }),
+  input: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  }),
+  helper: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  }),
+  error: toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  })
+};
+
+// ====================
+// Typography Variant Mappings
+// ====================
+
+// Helper function to create a variant with consistent typing
+var createVariant = function createVariant(variant) {
+  return toTextStyle(variant);
+};
+
+// Define the actual variant data with proper typing
+var typographyVariantData = {
+  // global/display variants
+  'global/display/large': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[1200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[1200] * globalTypography.lineHeight.relaxed,
+    letterSpacing: globalTypography.letterSpacing.tight
+  },
+  'global/display/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[1100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[1100] * globalTypography.lineHeight.tight
+  },
+  'global/display/small': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[900],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[900] * globalTypography.lineHeight.tight
+  },
+  // global/heading variants
+  'global/heading/h1': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[800],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[800] * globalTypography.lineHeight.tight
+  },
+  'global/heading/h2': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[700],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[700] * globalTypography.lineHeight.tight
+  },
+  'global/heading/h3': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[600],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[600] * globalTypography.lineHeight.tight
+  },
+  'global/heading/h4': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[500],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[500] * globalTypography.lineHeight.normal
+  },
+  'global/heading/h5': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[400],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[400] * globalTypography.lineHeight.tight
+  },
+  'global/heading/h6': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.tight
+  },
+  // global/title variants
+  'global/title/large': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[600],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[600] * globalTypography.lineHeight.tight
+  },
+  'global/title/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[400],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[400] * globalTypography.lineHeight.tight
+  },
+  'global/title/small': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.tight
+  },
+  // global/body variants
+  'global/body/large/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  },
+  'global/body/large/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  },
+  'global/body/large/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  },
+  'global/body/medium/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  },
+  'global/body/medium/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  },
+  'global/body/medium/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  },
+  'global/body/small/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  },
+  'global/body/small/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  },
+  'global/body/small/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.lineHeight.normal
+  },
+  // global/label variants
+  'global/label/large/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/large/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/large/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/medium/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/medium/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/medium/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/small/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[75],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/small/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[75],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  'global/label/small/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[75],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[75] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide
+  },
+  // global/code variants
+  'global/code/large': {
+    fontFamily: globalTypography.fontFamily.mono,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  },
+  'global/code/medium': {
+    fontFamily: globalTypography.fontFamily.mono,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal
+  },
+  'global/code/small': {
+    fontFamily: globalTypography.fontFamily.mono,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  },
+  // global/button variants
+  'global/button/large': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  },
+  'global/button/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[200] * globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  },
+  'global/button/small': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.lineHeight.tight,
+    letterSpacing: globalTypography.letterSpacing.wide,
+    textTransform: 'uppercase'
+  },
+  // global/input variants
+  'global/input/default': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[300] * globalTypography.lineHeight.normal
+  },
+  'global/input/helper': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  },
+  'global/input/error': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.normal
+  },
+  // global/caption variants
+  'global/caption/regular': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.tight
+  },
+  'global/caption/medium': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.tight
+  },
+  'global/caption/bold': {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    fontWeight: globalTypography.fontWeight.bold,
+    lineHeight: globalTypography.fontSize[100] * globalTypography.lineHeight.tight
+  },
+  // Buttons
+  // Semantic Typography Variants - Directly spread from semanticTypography
+  'semantic/text/primary': _objectSpread({}, semanticTypography.text.primary),
+  'semantic/text/secondary': _objectSpread({}, semanticTypography.text.secondary),
+  'semantic/text/tertiary': _objectSpread({}, semanticTypography.text.tertiary),
+  'semantic/text/emphasis': _objectSpread({}, semanticTypography.text.emphasis),
+  'semantic/heading/primary': _objectSpread({}, semanticTypography.heading.primary),
+  'semantic/heading/secondary': _objectSpread({}, semanticTypography.heading.secondary),
+  'semantic/heading/tertiary': _objectSpread({}, semanticTypography.heading.tertiary),
+  'semantic/heading/quaternary': _objectSpread({}, semanticTypography.heading.quaternary),
+  'semantic/interactive/link': _objectSpread({}, semanticTypography.interactive.link),
+  'semantic/interactive/button': _objectSpread({}, semanticTypography.interactive.button),
+  'semantic/utility/label': _objectSpread({}, semanticTypography.utility.label),
+  'semantic/utility/caption': _objectSpread({}, semanticTypography.utility.caption),
+  'semantic/utility/code': _objectSpread({}, semanticTypography.utility.code),
+  // Fintech Typography Variants - Directly spread from fintechTypography
+  'fintech/currency/large': _objectSpread({}, fintechTypography.currency.large),
+  'fintech/currency/medium': _objectSpread({}, fintechTypography.currency.medium),
+  'fintech/currency/small': _objectSpread({}, fintechTypography.currency.small),
+  'fintech/currency/micro': _objectSpread({}, fintechTypography.currency.micro),
+  'fintech/tabular/header': _objectSpread({}, fintechTypography.tabular.header),
+  'fintech/tabular/data': _objectSpread({}, fintechTypography.tabular.data),
+  'fintech/tabular/dataEmphasis': _objectSpread({}, fintechTypography.tabular.dataEmphasis),
+  'fintech/legal/terms': _objectSpread({}, fintechTypography.legal.terms),
+  'fintech/legal/disclaimer': _objectSpread({}, fintechTypography.legal.disclaimer),
+  'fintech/legal/warning': _objectSpread({}, fintechTypography.legal.warning),
+  'fintech/identifier/account': _objectSpread({}, fintechTypography.identifier.account),
+  // Button Components - Using the new textStyles
+  'component/button/contained/large': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonLarge), {}, {
+    fontWeight: 'semibold'
+  })),
+  'component/button/contained/medium': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonMedium), {}, {
+    fontWeight: 'semibold'
+  })),
+  'component/button/contained/small': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonSmall), {}, {
+    fontWeight: 'semibold',
+    lineHeight: 'tight'
+  })),
+  'component/button/outlined/large': toTextStyle(_objectSpread({}, textStyles.buttonLarge)),
+  'component/button/outlined/medium': toTextStyle(_objectSpread({}, textStyles.buttonMedium)),
+  'component/button/outlined/small': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonSmall), {}, {
+    lineHeight: 'tight'
+  })),
+  'component/button/text/large': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonLarge), {}, {
+    textTransform: 'none',
+    letterSpacing: 'normal'
+  })),
+  'component/button/text/medium': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonMedium), {}, {
+    textTransform: 'none',
+    letterSpacing: 'normal'
+  })),
+  'component/button/text/small': toTextStyle(_objectSpread(_objectSpread({}, textStyles.buttonSmall), {}, {
+    textTransform: 'none',
+    letterSpacing: 'normal'
+  })),
+  // Input Components
+  'component/input/label': toTextStyle(_objectSpread(_objectSpread({}, textStyles.labelMedium), {}, {
+    marginBottom: 4
+  })),
+  'component/input/value': toTextStyle(_objectSpread({}, textStyles.input)),
+  'component/input/placeholder': toTextStyle(_objectSpread(_objectSpread({}, textStyles.input), {}, {
+    opacity: 0.6
+  })),
+  'component/input/helper': toTextStyle(_objectSpread(_objectSpread({}, textStyles.helper), {}, {
+    marginTop: 4
+  })),
+  'component/input/error': toTextStyle(_objectSpread(_objectSpread({}, textStyles.error), {}, {
+    fontWeight: 'medium',
+    marginTop: 4
+  })),
+  // Card Components
+  'component/card/title': toTextStyle(_objectSpread(_objectSpread({}, textStyles.titleMedium), {}, {
+    fontWeight: 'semibold',
+    marginBottom: 8
+  })),
+  // Component variants
+  'component/card/subtitle': toTextStyle(_objectSpread(_objectSpread({}, textStyles.bodyMedium), {}, {
+    fontWeight: 'medium',
+    marginBottom: 4
+  })),
+  'component/card/body': toTextStyle(_objectSpread({}, textStyles.bodyMedium)),
+  'component/card/caption': toTextStyle(_objectSpread(_objectSpread({}, textStyles.caption), {}, {
+    opacity: 0.7
+  })),
+  // Fintech variants
+  'fintech/identifier/reference': toTextStyle({
+    fontFamily: globalTypography.fontFamily.mono,
+    fontSize: globalTypography.fontSize[100],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  'fintech/market/symbol': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[300],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.tight
+  }),
+  'fintech/market/price': toTextStyle({
+    fontFamily: globalTypography.fontFamily.tabular,
+    fontSize: globalTypography.fontSize[400],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  'fintech/market/percentage': toTextStyle({
+    fontFamily: globalTypography.fontFamily.tabular,
+    fontSize: globalTypography.fontSize[300],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  // Special variants
+  'special/table/header': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.semibold,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal,
+    textTransform: 'uppercase'
+  }),
+  'special/table/cell': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[200],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  'special/table/footer': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  'special/tooltip': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  }),
+  'special/tab-bar': toTextStyle({
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[100],
+    // Using number literal type
+    fontWeight: globalTypography.fontWeight.medium,
+    lineHeight: globalTypography.lineHeight.normal,
+    letterSpacing: globalTypography.letterSpacing.normal
+  })
+};
+/**
+ * Get typography style for a given variant
+ */
+export function getTypographyStyle(variant) {
+  var variantDefinition = typographyVariantData[variant];
+  if (!variantDefinition) {
+    console.warn("[DesignSystem] Typography variant \"".concat(variant, "\" not found. Returning empty style."));
+    return {};
+  }
+
+  // Use the unified toTextStyle function to handle the variant definition
+  return toTextStyle(variantDefinition);
+}
+
+/**
+ * Type guard to check if a string is a valid TypographyVariant
+ */
+export function isTypographyVariant(value) {
+  return value in typographyVariantData;
+}
+
+/**
+ * Get all available typography variants
+ */
+export function getTypographyVariants() {
+  return Object.keys(typographyVariantData);
+}
+
+// ====================
+// Type Exports
+// ====================