@discourser/design-system 0.25.3 → 0.26.0

package/docs/token-name-mapping.md

@@ -1,10 +1,10 @@
 # Token Name Mapping
 
-> Generated from `dist/figma-variables.json`, `dist/figma-effect-styles.json`,
-> `dist/figma-text-styles.json`, `src/preset/semantic-tokens.ts`, and
-> `src/preset/colors/create-palette-bridge.ts`.
+> Generated from `tokens/export-to-figma/figma-variables.json`, `tokens/export-to-figma/figma-effect-styles.json`,
+> `tokens/export-to-figma/figma-text-styles.json`, `src/preset/semantic-tokens.ts`,
+> `src/preset/colors/create-palette-bridge.ts`, and `src/languages/material3.language.ts`.
 >
-> Version: 0.22.0 (matches `$metadata.version` in `figma-variables.json`)
+> Version: 0.25.3
 
 ---
 
@@ -195,7 +195,7 @@ Defined in `src/preset/index.ts:144–147` as semantic tokens:
 
 ## Section 4: Shadows (Effect Styles)
 
-6 base elevation tokens from `dist/figma-effect-styles.json`, plus semantic
+6 base elevation tokens from `tokens/export-to-figma/figma-effect-styles.json`, plus semantic
 aliases defined in `src/preset/shadows.ts`.
 
 ### Base Elevation Tokens
@@ -225,27 +225,115 @@ aliases defined in `src/preset/shadows.ts`.
 
 ## Section 5: Typography (Text Styles)
 
-15 entries from `dist/figma-text-styles.json`. The Figma text style name is
-identical to the Panda `textStyle` name — no transformation needed.
-
-| Figma Text Style | Panda `textStyle` Name | Font Family | Font Size | Font Weight | Line Height | Example Usage                 |
-| ---------------- | ---------------------- | ----------- | --------- | ----------- | ----------- | ----------------------------- |
-| `displayLarge`   | `displayLarge`         | Fraunces    | 57px      | 400         | 64px        | `textStyle: 'displayLarge'`   |
-| `displayMedium`  | `displayMedium`        | Fraunces    | 45px      | 400         | 52px        | `textStyle: 'displayMedium'`  |
-| `displaySmall`   | `displaySmall`         | Fraunces    | 36px      | 400         | 44px        | `textStyle: 'displaySmall'`   |
-| `headlineLarge`  | `headlineLarge`        | Fraunces    | 32px      | 400         | 40px        | `textStyle: 'headlineLarge'`  |
-| `headlineMedium` | `headlineMedium`       | Fraunces    | 28px      | 400         | 36px        | `textStyle: 'headlineMedium'` |
-| `headlineSmall`  | `headlineSmall`        | Fraunces    | 24px      | 400         | 32px        | `textStyle: 'headlineSmall'`  |
-| `titleLarge`     | `titleLarge`           | Poppins     | 22px      | 500         | 28px        | `textStyle: 'titleLarge'`     |
-| `titleMedium`    | `titleMedium`          | Poppins     | 16px      | 500         | 24px        | `textStyle: 'titleMedium'`    |
-| `titleSmall`     | `titleSmall`           | Poppins     | 14px      | 500         | 20px        | `textStyle: 'titleSmall'`     |
-| `bodyLarge`      | `bodyLarge`            | Poppins     | 16px      | 400         | 24px        | `textStyle: 'bodyLarge'`      |
-| `bodyMedium`     | `bodyMedium`           | Poppins     | 14px      | 400         | 20px        | `textStyle: 'bodyMedium'`     |
-| `bodySmall`      | `bodySmall`            | Poppins     | 12px      | 400         | 16px        | `textStyle: 'bodySmall'`      |
-| `labelLarge`     | `labelLarge`           | Poppins     | 14px      | 500         | 20px        | `textStyle: 'labelLarge'`     |
-| `labelMedium`    | `labelMedium`          | Poppins     | 12px      | 500         | 16px        | `textStyle: 'labelMedium'`    |
-| `labelSmall`     | `labelSmall`           | Poppins     | 11px      | 500         | 16px        | `textStyle: 'labelSmall'`     |
-
-> No mismatches in this section — Figma text style names map 1:1 to Panda
-> `textStyle` names. Display and headline styles use **Fraunces** (serif);
-> all other styles use **Poppins** (sans-serif).
+51 entries from `tokens/export-to-figma/figma-text-styles.json`. The system
+uses slash-hierarchy naming (`Category/Size/Weight`) with all weight variants
+per scale step — upgraded from 15 flat styles (one per scale step, default
+weight only) to 51 styles covering all variants.
+
+**Description field convention:** Each Figma text style carries a description
+field in the format `dds:typography.scale.{scaleName}.weights.{weightName}`.
+This is the semantic bridge the Figma MCP reads to resolve back to the DDS token.
+
+> **pandaTextStyle uses the scale step name, not the weight variant.** Panda
+> `textStyle` tokens are geometry-only (size, line height, letter spacing, font
+> family). Font weight is applied separately via the `fontWeight` utility.
+> For example: `textStyle: 'headlineSmall'` sets geometry; add
+> `fontWeight: 600` (or `'semiBold'`) separately for the SemiBold variant.
+
+### Display (Fraunces)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Display/Large/Regular` | Fraunces | Regular (400) | 57px | 64px | -0.25 | `typography.scale.displayLarge.weights.regular` | `displayLarge` | ✓ |
+| `Display/Large/SemiBold` | Fraunces | SemiBold (600) | 57px | 64px | -0.25 | `typography.scale.displayLarge.weights.semiBold` | `displayLarge` | |
+| `Display/Medium/Regular` | Fraunces | Regular (400) | 45px | 52px | 0 | `typography.scale.displayMedium.weights.regular` | `displayMedium` | ✓ |
+| `Display/Medium/SemiBold` | Fraunces | SemiBold (600) | 45px | 52px | 0 | `typography.scale.displayMedium.weights.semiBold` | `displayMedium` | |
+| `Display/Small/Regular` | Fraunces | Regular (400) | 36px | 44px | 0 | `typography.scale.displaySmall.weights.regular` | `displaySmall` | ✓ |
+| `Display/Small/SemiBold` | Fraunces | SemiBold (600) | 36px | 44px | 0 | `typography.scale.displaySmall.weights.semiBold` | `displaySmall` | |
+
+### Headline (Fraunces)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Headline/Large/Light` | Fraunces | Light (300) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.light` | `headlineLarge` | |
+| `Headline/Large/Regular` | Fraunces | Regular (400) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.regular` | `headlineLarge` | ✓ |
+| `Headline/Large/SemiBold` | Fraunces | SemiBold (600) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.semiBold` | `headlineLarge` | |
+| `Headline/Medium/Light` | Fraunces | Light (300) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.light` | `headlineMedium` | |
+| `Headline/Medium/Regular` | Fraunces | Regular (400) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.regular` | `headlineMedium` | ✓ |
+| `Headline/Medium/SemiBold` | Fraunces | SemiBold (600) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.semiBold` | `headlineMedium` | |
+| `Headline/Small/Light` | Fraunces | Light (300) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.light` | `headlineSmall` | |
+| `Headline/Small/Regular` | Fraunces | Regular (400) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.regular` | `headlineSmall` | ✓ |
+| `Headline/Small/SemiBold` | Fraunces | SemiBold (600) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.semiBold` | `headlineSmall` | |
+
+### Title (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Title/Large/Regular` | Poppins | Regular (400) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.regular` | `titleLarge` | |
+| `Title/Large/Medium` | Poppins | Medium (500) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.medium` | `titleLarge` | ✓ |
+| `Title/Large/SemiBold` | Poppins | SemiBold (600) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.semiBold` | `titleLarge` | |
+| `Title/Large/Bold` | Poppins | Bold (700) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.bold` | `titleLarge` | |
+| `Title/Medium/Regular` | Poppins | Regular (400) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.regular` | `titleMedium` | |
+| `Title/Medium/Medium` | Poppins | Medium (500) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.medium` | `titleMedium` | ✓ |
+| `Title/Medium/SemiBold` | Poppins | SemiBold (600) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.semiBold` | `titleMedium` | |
+| `Title/Medium/Bold` | Poppins | Bold (700) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.bold` | `titleMedium` | |
+| `Title/Small/Regular` | Poppins | Regular (400) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.regular` | `titleSmall` | |
+| `Title/Small/Medium` | Poppins | Medium (500) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.medium` | `titleSmall` | ✓ |
+| `Title/Small/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.semiBold` | `titleSmall` | |
+| `Title/Small/Bold` | Poppins | Bold (700) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.bold` | `titleSmall` | |
+
+### Body (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Body/Large/Light` | Poppins | Light (300) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.light` | `bodyLarge` | |
+| `Body/Large/Regular` | Poppins | Regular (400) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.regular` | `bodyLarge` | ✓ |
+| `Body/Large/Medium` | Poppins | Medium (500) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.medium` | `bodyLarge` | |
+| `Body/Large/SemiBold` | Poppins | SemiBold (600) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.semiBold` | `bodyLarge` | |
+| `Body/Medium/Light` | Poppins | Light (300) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.light` | `bodyMedium` | |
+| `Body/Medium/Regular` | Poppins | Regular (400) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.regular` | `bodyMedium` | ✓ |
+| `Body/Medium/Medium` | Poppins | Medium (500) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.medium` | `bodyMedium` | |
+| `Body/Medium/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.semiBold` | `bodyMedium` | |
+| `Body/Small/Light` | Poppins | Light (300) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.light` | `bodySmall` | |
+| `Body/Small/Regular` | Poppins | Regular (400) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.regular` | `bodySmall` | ✓ |
+| `Body/Small/Medium` | Poppins | Medium (500) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.medium` | `bodySmall` | |
+| `Body/Small/SemiBold` | Poppins | SemiBold (600) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.semiBold` | `bodySmall` | |
+
+### Label (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Label/Large/Light` | Poppins | Light (300) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.light` | `labelLarge` | |
+| `Label/Large/Medium` | Poppins | Medium (500) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.medium` | `labelLarge` | ✓ |
+| `Label/Large/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.semiBold` | `labelLarge` | |
+| `Label/Large/Bold` | Poppins | Bold (700) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.bold` | `labelLarge` | |
+| `Label/Medium/Light` | Poppins | Light (300) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.light` | `labelMedium` | |
+| `Label/Medium/Medium` | Poppins | Medium (500) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.medium` | `labelMedium` | ✓ |
+| `Label/Medium/SemiBold` | Poppins | SemiBold (600) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.semiBold` | `labelMedium` | |
+| `Label/Medium/Bold` | Poppins | Bold (700) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.bold` | `labelMedium` | |
+| `Label/Small/Light` | Poppins | Light (300) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.light` | `labelSmall` | |
+| `Label/Small/Medium` | Poppins | Medium (500) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.medium` | `labelSmall` | ✓ |
+| `Label/Small/SemiBold` | Poppins | SemiBold (600) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.semiBold` | `labelSmall` | |
+| `Label/Small/Bold` | Poppins | Bold (700) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.bold` | `labelSmall` | |
+
+---
+
+## Section 6: Figma MCP Resolution — What the AI Sees
+
+When the Figma Desktop MCP reads a node via `get_design_context`, it returns
+structured data. This table shows what each token type looks like in MCP
+output and how it resolves to a DDS token.
+
+| Token Type | What MCP Returns | How to Resolve to DDS Token |
+| --- | --- | --- |
+| Color fill | `boundVariables.fills[].id` → variable name e.g. `"Semantic/primary"` | Look up `figmaPath` in `token-name-mapping.json` `semantic` array → `pandaToken` |
+| Spacing/padding | `boundVariables.paddingLeft.id` → variable name e.g. `"Spacing & Shape/spacing/md"` | Look up `figmaPath` in `spacingAndShape` array → `pandaToken` + `pandaCategory` |
+| Border radius | `boundVariables.cornerRadius.id` → variable name e.g. `"Spacing & Shape/radii/medium"` | Look up `figmaPath` in `spacingAndShape` array |
+| Shadow/elevation | `effects[].styleId` → effect style name e.g. `"elevation/level2"` | Look up `figmaEffectStyle` in `effectStyles` array → `pandaToken` |
+| Text style | `style.textStyleId` → text style name e.g. `"Headline/Small/SemiBold"` | Look up `figmaTextStyle` in `textStyles` array → `ddsTokenPath` and `pandaTextStyle` |
+| Text style description | `style.description` = `"dds:typography.scale.headlineSmall.weights.semiBold"` | Parse after `"dds:"` → direct DDS token path |
+
+> **The text style description field is the most direct resolution path for
+> typography** — no lookup table needed. The MCP returns it as part of the
+> style metadata and it maps directly to the `DesignLanguageContract` token
+> path (strip the `dds:` prefix to get `typography.scale.{step}.weights.{weight}`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.25.3",
+  "version": "0.26.0",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {

package/src/components/Icons/LeftArrowIcon.tsx

@@ -0,0 +1,28 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type LeftArrowIconProps = ComponentProps<typeof StyledSvg>;
+
+export const LeftArrowIcon = (props: LeftArrowIconProps) => (
+  <StyledSvg
+    viewBox="0 0 21 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381L9.10036 11.988ZM4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496L4.18214 8.92503ZM4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496L4.99167 8.92503ZM8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199L8.29083 4.16192ZM4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304V9.08695ZM15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695V7.91304ZM8.29083 12.8381L4.18214 8.92503L4.99167 8.07496L9.10036 11.988L8.29083 12.8381ZM4.18214 8.07496L8.29083 4.16192L9.10036 5.01199L4.99167 8.92503L4.18214 8.07496ZM4.58691 7.91304H15.5434V9.08695H4.58691V7.91304Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381M9.10036 11.988L8.29083 12.8381M9.10036 11.988L4.99167 8.07496M8.29083 12.8381L4.18214 8.92503M4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496M4.18214 8.92503L4.99167 8.07496M4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496M4.99167 8.92503L4.18214 8.07496M4.99167 8.92503L9.10036 5.01199M4.18214 8.07496L8.29083 4.16192M8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199M8.29083 4.16192L9.10036 5.01199M4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304M4.58691 9.08695V7.91304M4.58691 9.08695H15.5434M4.58691 7.91304H15.5434M15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695M15.5434 7.91304V9.08695"
+      stroke="currentColor"
+      strokeWidth="0.75"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/RightArrowIcon.tsx

@@ -8,7 +8,7 @@ export type RightArrowIconProps = ComponentProps<typeof StyledSvg>;
 
 export const RightArrowIcon = (props: RightArrowIconProps) => (
   <StyledSvg
-    viewBox="0 0 19 19"
+    viewBox="0 0 21 17"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
@@ -16,8 +16,13 @@ export const RightArrowIcon = (props: RightArrowIconProps) => (
     {...props}
   >
     <path
-      d="M15.9172 13.2266H3.74219V11.2266H15.9172L10.3172 5.62656L11.7422 4.22656L19.7422 12.2266L11.7422 20.2266L10.3172 18.8266L15.9172 13.2266Z"
+      d="M11.03 11.988C10.7952 12.2116 10.7861 12.5831 11.0097 12.8178C11.2333 13.0526 11.6048 13.0617 11.8395 12.8381L11.03 11.988ZM15.9482 8.92503C16.183 8.70144 16.1921 8.32993 15.9685 8.09523C15.7449 7.86045 15.3734 7.85137 15.1387 8.07496L15.9482 8.92503ZM15.1387 8.92503C15.3734 9.14862 15.7449 9.13954 15.9685 8.90476C16.1921 8.67006 16.183 8.29855 15.9482 8.07496L15.1387 8.92503ZM11.8395 4.16192C11.6048 3.93836 11.2333 3.94742 11.0097 4.18216C10.7861 4.4169 10.7952 4.78843 11.03 5.01199L11.8395 4.16192ZM15.5435 9.08695C15.8676 9.08695 16.1304 8.82415 16.1304 8.5C16.1304 8.17584 15.8676 7.91304 15.5435 7.91304V9.08695ZM4.58696 7.91304C4.26279 7.91304 4 8.17584 4 8.5C4 8.82415 4.26279 9.08695 4.58696 9.08695V7.91304ZM11.8395 12.8381L15.9482 8.92503L15.1387 8.07496L11.03 11.988L11.8395 12.8381ZM15.9482 8.07496L11.8395 4.16192L11.03 5.01199L15.1387 8.92503L15.9482 8.07496ZM15.5435 7.91304H4.58696V9.08695H15.5435V7.91304Z"
       fill="currentColor"
     />
+    <path
+      d="M11.03 11.988C10.7952 12.2116 10.7861 12.5831 11.0097 12.8178C11.2333 13.0526 11.6048 13.0617 11.8395 12.8381M11.03 11.988L11.8395 12.8381M11.03 11.988L15.1387 8.07496M11.8395 12.8381L15.9482 8.92503M15.9482 8.92503C16.183 8.70144 16.1921 8.32993 15.9685 8.09523C15.7449 7.86045 15.3734 7.85137 15.1387 8.07496M15.9482 8.92503L15.1387 8.07496M15.1387 8.92503C15.3734 9.14862 15.7449 9.13954 15.9685 8.90476C16.1921 8.67006 16.183 8.29855 15.9482 8.07496M15.1387 8.92503L15.9482 8.07496M15.1387 8.92503L11.03 5.01199M15.9482 8.07496L11.8395 4.16192M11.8395 4.16192C11.6048 3.93836 11.2333 3.94742 11.0097 4.18216C10.7861 4.4169 10.7952 4.78843 11.03 5.01199M11.8395 4.16192L11.03 5.01199M15.5435 9.08695C15.8676 9.08695 16.1304 8.82415 16.1304 8.5C16.1304 8.17584 15.8676 7.91304 15.5435 7.91304M15.5435 9.08695V7.91304M15.5435 9.08695H4.58696M15.5435 7.91304H4.58696M4.58696 7.91304C4.26279 7.91304 4 8.17584 4 8.5C4 8.82415 4.26279 9.08695 4.58696 9.08695M4.58696 7.91304V9.08695"
+      stroke="currentColor"
+      strokeWidth="0.75"
+    />
   </StyledSvg>
 );

package/src/components/Icons/index.ts

@@ -9,6 +9,7 @@ export { ScenarioIcon, type ScenarioIconProps } from './ScenarioIcon';
 export { HelpIcon, type HelpIconProps } from './HelpIcon';
 export { AccountIcon, type AccountIconProps } from './AccountIcon';
 export { RightArrowIcon, type RightArrowIconProps } from './RightArrowIcon';
+export { LeftArrowIcon, type LeftArrowIconProps } from './LeftArrowIcon';
 export { ChevronUpIcon, type ChevronUpIconProps } from './ChevronUpIcon';
 export { DiscourserLogo, type DiscourserLogoProps } from './DiscourserLogo';
 export { TimerIcon, type TimerIconProps } from './TimerIcon';

package/src/components/index.ts

@@ -65,6 +65,7 @@ export {
   RightArrowIcon,
   type RightArrowIconProps,
 } from './Icons/RightArrowIcon';
+export { LeftArrowIcon, type LeftArrowIconProps } from './Icons/LeftArrowIcon';
 export { ChevronUpIcon, type ChevronUpIconProps } from './Icons/ChevronUpIcon';
 export {
   DiscourserLogo,

package/src/contracts/design-language.contract.ts

@@ -83,33 +83,82 @@ export interface SemanticColors {
 }
 
 // Typography Types
+
+export type WeightName =
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'medium'
+  | 'semiBold'
+  | 'bold'
+  | 'extraBold';
+
+export interface FontWeightMap {
+  '100'?: string;
+  '200'?: string;
+  '300'?: string;
+  '400'?: string;
+  '500'?: string;
+  '600'?: string;
+  '700'?: string;
+  '800'?: string;
+  '900'?: string;
+}
+
+export interface FontConfig {
+  family: string;
+  figmaName: string;
+  weightMap: FontWeightMap;
+}
+
+export interface TypeGeometry {
+  fontSize: string;
+  lineHeight: string;
+  letterSpacing: string;
+  fontFamily: 'display' | 'body' | 'mono';
+  fontVariationSettings?: string;
+}
+
+export interface WeightVariant {
+  name: WeightName;
+  fontWeight: string;
+  fontVariationSettings?: string;
+}
+
+export interface TypeScaleStep {
+  geometry: TypeGeometry;
+  defaultWeight: WeightName;
+  weights: Partial<Record<WeightName, WeightVariant>>;
+}
+
 export interface TypographyConfig {
   fonts: {
-    display: string;
-    body: string;
-    mono: string;
+    display: FontConfig;
+    body: FontConfig;
+    mono: FontConfig;
   };
   scale: TypographyScale;
 }
 
 export interface TypographyScale {
-  displayLarge: TypeStyle;
-  displayMedium: TypeStyle;
-  displaySmall: TypeStyle;
-  headlineLarge: TypeStyle;
-  headlineMedium: TypeStyle;
-  headlineSmall: TypeStyle;
-  titleLarge: TypeStyle;
-  titleMedium: TypeStyle;
-  titleSmall: TypeStyle;
-  bodyLarge: TypeStyle;
-  bodyMedium: TypeStyle;
-  bodySmall: TypeStyle;
-  labelLarge: TypeStyle;
-  labelMedium: TypeStyle;
-  labelSmall: TypeStyle;
-}
-
+  displayLarge: TypeScaleStep;
+  displayMedium: TypeScaleStep;
+  displaySmall: TypeScaleStep;
+  headlineLarge: TypeScaleStep;
+  headlineMedium: TypeScaleStep;
+  headlineSmall: TypeScaleStep;
+  titleLarge: TypeScaleStep;
+  titleMedium: TypeScaleStep;
+  titleSmall: TypeScaleStep;
+  bodyLarge: TypeScaleStep;
+  bodyMedium: TypeScaleStep;
+  bodySmall: TypeScaleStep;
+  labelLarge: TypeScaleStep;
+  labelMedium: TypeScaleStep;
+  labelSmall: TypeScaleStep;
+}
+
+// Kept unchanged — used by Panda recipes and the resolveTypeStyle() shim.
 export interface TypeStyle {
   fontSize: string;
   lineHeight: string;