@xsolla/xui-core 0.184.0 → 0.185.0

package/index.mjs

@@ -1,8 +1,8 @@
 // src/index.tsx
 import React3, { createContext, useContext, useState, useMemo } from "react";
 
-// src/tokens/pentagram-dark.json
-var pentagram_dark_default = {
+// src/tokens/dark.json
+var dark_default = {
   background: {
     primary: "#1b2628",
     secondary: "#141d1f",
@@ -406,8 +406,8 @@ var pentagram_dark_default = {
   }
 };
 
-// src/tokens/pentagram-light.json
-var pentagram_light_default = {
+// src/tokens/light.json
+var light_default = {
   background: {
     primary: "#ffffff",
     secondary: "#f5f6f4",
@@ -1621,23 +1621,841 @@ var blueprints_default = {
   }
 };
 
+// src/tokens/corpsite-dark.json
+var corpsite_dark_default = {
+  background: {
+    primary: "#141d1f",
+    secondary: "#1b2628",
+    brand: {
+      primary: "#55dcf6",
+      secondary: "#135d6c"
+    },
+    brandExtra: {
+      primary: "#9580ff",
+      secondary: "#301b98"
+    },
+    inverse: "#ffffff",
+    static: {
+      dark: "#000000",
+      light: "#ffffff"
+    },
+    success: {
+      primary: "#70f655",
+      secondary: "#2f5827"
+    },
+    warning: {
+      primary: "#f6ab55",
+      secondary: "#6c4313"
+    },
+    alert: {
+      primary: "#e8304f",
+      secondary: "#58272f"
+    },
+    neutral: {
+      primary: "#607f85",
+      secondary: "#233134"
+    }
+  },
+  content: {
+    primary: "#e8eced",
+    secondary: "#b7c5c8",
+    tertiary: "#7b989d",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#9580ff",
+      secondary: "#7055f6"
+    },
+    inverse: "#000000",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
+    success: {
+      primary: "#50e831",
+      secondary: "#368f24"
+    },
+    warning: {
+      primary: "#f6ab55",
+      secondary: "#c37822"
+    },
+    alert: {
+      primary: "#f65570",
+      secondary: "#c3223d"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#607f85"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#ffffff",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#000000"
+    }
+  },
+  border: {
+    primary: "#ffffff",
+    secondary: "#34474b",
+    brand: "#b2f2ff",
+    brandExtra: "#bfb2ff",
+    inverse: "rgba(20, 29, 31, 0.15)",
+    success: "#95ff80",
+    warning: "#ffc380",
+    alert: "#f65570",
+    neutral: "#607f85"
+  },
+  overlay: {
+    mono: "rgba(178, 242, 255, 0.06)",
+    brand: "rgba(128, 234, 255, 0.2)",
+    brandExtra: "rgba(149, 128, 255, 0.3)",
+    success: "rgba(149, 255, 128, 0.2)",
+    warning: "rgba(255, 195, 128, 0.24)",
+    alert: "rgba(232, 48, 79, 0.32)",
+    neutral: "rgba(123, 152, 157, 0.28)",
+    monoHover: "rgba(178, 242, 255, 0.12)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.5)",
+    float: "rgba(0, 0, 0, 0.95)"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#80eaff",
+        bgHover: "#b2f2ff",
+        bgPress: "#d6f8ff",
+        bgDisable: "rgba(52, 71, 75, 0.85)",
+        border: "#31cae8",
+        borderHover: "#55dcf6",
+        borderPress: "rgba(85, 220, 246, 0)",
+        borderDisable: "rgba(52, 71, 75, 0)"
+      },
+      secondary: {
+        bg: "#135d6c",
+        bgHover: "#1b8398",
+        bgPress: "#22a8c3",
+        border: "#1b8398",
+        borderHover: "#22a8c3",
+        borderPress: "rgba(34, 168, 195, 0)"
+      },
+      tertiary: {
+        bg: "rgba(11, 56, 65, 0)",
+        bgHover: "#0b3841",
+        bgPress: "#135d6c",
+        border: "rgba(11, 56, 65, 0)",
+        borderHover: "rgba(11, 56, 65, 0)",
+        borderPress: "rgba(19, 93, 108, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#80eaff",
+        tertiary: "#31cae8",
+        disable: "rgba(232, 236, 237, 0.2)",
+        ghost: "#80eaff"
+      },
+      ghost: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(128, 234, 255, 0.04)",
+        bgPress: "rgba(128, 234, 255, 0.08)",
+        border: "rgba(128, 234, 255, 0.16)",
+        borderHover: "rgba(128, 234, 255, 0.24)",
+        borderPress: "rgba(128, 234, 255, 0.16)"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#f4f5f6",
+        bgHover: "#e8eced",
+        bgPress: "#d7dee0",
+        border: "rgba(244, 245, 246, 0)",
+        borderHover: "rgba(232, 236, 237, 0)",
+        borderPress: "rgba(215, 222, 224, 0)"
+      },
+      secondary: {
+        bg: "#233134",
+        bgHover: "#34474b",
+        bgPress: "#4a6368",
+        border: "#34474b",
+        borderHover: "#4a6368",
+        borderPress: "rgba(74, 99, 104, 0)"
+      },
+      tertiary: {
+        bg: "rgba(35, 49, 52, 0)",
+        bgHover: "#233134",
+        bgPress: "#34474b",
+        border: "rgba(35, 49, 52, 0)",
+        borderHover: "rgba(35, 49, 52, 0)",
+        borderPress: "rgba(52, 71, 75, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#e8eced",
+        tertiary: "#ffffff",
+        ghost: "#ffffff"
+      },
+      ghost: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(255, 255, 255, 0.04)",
+        bgPress: "rgba(255, 255, 255, 0.08)",
+        border: "rgba(255, 255, 255, 0.16)",
+        borderHover: "rgba(255, 255, 255, 0.24)",
+        borderPress: "rgba(255, 255, 255, 0.16)"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#7055f6",
+        bgHover: "#9580ff",
+        bgPress: "#bfb2ff",
+        border: "#9580ff",
+        borderHover: "#bfb2ff",
+        borderPress: "rgba(191, 178, 255, 0)"
+      },
+      secondary: {
+        bg: "#301b98",
+        bgHover: "#3d22c3",
+        bgPress: "#5031e8",
+        border: "#3d22c3",
+        borderHover: "#5031e8",
+        borderPress: "rgba(80, 49, 232, 0)"
+      },
+      tertiary: {
+        bg: "rgba(20, 11, 65, 0)",
+        bgHover: "#140b41",
+        bgPress: "#22136c",
+        border: "rgba(20, 11, 65, 0)",
+        borderHover: "rgba(20, 11, 65, 0)",
+        borderPress: "rgba(34, 19, 108, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#ffffff",
+        tertiary: "#9580ff",
+        ghost: "#cef655"
+      },
+      ghost: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(206, 246, 85, 0.04)",
+        bgPress: "rgba(206, 246, 85, 0.08)",
+        border: "rgba(206, 246, 85, 0.16)",
+        borderHover: "rgba(206, 246, 85, 0.24)",
+        borderPress: "rgba(206, 246, 85, 0.16)"
+      }
+    },
+    alert: {
+      bg: "#c3223d",
+      border: "#f65570",
+      primary: {
+        bg: "#e8304f",
+        bgHover: "#f65570",
+        bgPress: "#ff8095",
+        border: "#f65570",
+        borderHover: "#ff8095",
+        borderPress: "rgba(255, 128, 149, 0)"
+      },
+      secondary: {
+        bg: "#8f2436",
+        bgHover: "#c3223d",
+        bgPress: "#e8304f",
+        border: "#c3223d",
+        borderHover: "#e8304f",
+        borderPress: "rgba(232, 48, 79, 0)"
+      },
+      tertiary: {
+        bg: "rgba(49, 28, 31, 0)",
+        bgHover: "#311c1f",
+        bgPress: "#58272f",
+        border: "rgba(49, 28, 31, 0)",
+        borderHover: "rgba(49, 28, 31, 0)",
+        borderPress: "rgba(88, 39, 47, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#ffffff",
+        tertiary: "#ff8095",
+        ghost: "#f67055"
+      },
+      ghost: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(246, 112, 85, 0.04)",
+        bgPress: "rgba(246, 112, 85, 0.08)",
+        border: "rgba(246, 112, 85, 0.16)",
+        borderHover: "rgba(246, 112, 85, 0.24)",
+        borderPress: "rgba(246, 112, 85, 0.16)"
+      }
+    },
+    input: {
+      bg: "rgba(178, 242, 255, 0.1)",
+      bgHover: "rgba(178, 242, 255, 0.15)",
+      bgDisable: "rgba(178, 242, 255, 0.25)",
+      border: "rgba(178, 242, 255, 0.1)",
+      borderHover: "rgba(178, 242, 255, 0.15)",
+      borderDisable: "rgba(178, 242, 255, 0)",
+      text: "#e8eced",
+      placeholder: "rgba(232, 236, 237, 0.56)",
+      textDisable: "rgba(232, 236, 237, 0.2)"
+    },
+    focus: {
+      bg: "#141d1f",
+      border: "#31cae8"
+    },
+    check: {
+      bg: "rgba(128, 234, 255, 0.1)",
+      bgHover: "rgba(128, 234, 255, 0.2)",
+      bgDisable: "rgba(52, 71, 75, 0.85)",
+      border: "#80eaff",
+      borderHover: "#b2f2ff",
+      borderDisable: "rgba(52, 71, 75, 0)",
+      icon: "#b2f2ff"
+    },
+    faint: {
+      bg: "#233134",
+      bgHover: "#34474b",
+      border: "#34474b",
+      borderHover: "#4a6368"
+    },
+    slider: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgDisable: "#34474b"
+    },
+    switch: {
+      bg: "rgba(128, 234, 255, 0.1)",
+      bgHover: "rgba(178, 242, 255, 0.2)",
+      bgDisable: "rgba(52, 71, 75, 0.85)",
+      border: "#80eaff",
+      borderHover: "#b2f2ff",
+      borderDisable: "rgba(52, 71, 75, 0)"
+    },
+    knob: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgActive: "#80eaff",
+      bgActiveHover: "#b2f2ff",
+      bgInactive: "#4a6368",
+      bgInactiveHover: "#607f85",
+      bgDisable: "#34474b"
+    },
+    text: {
+      primary: "#e8eced",
+      disable: "rgba(232, 236, 237, 0.2)"
+    },
+    link: {
+      primary: "#80eaff",
+      primaryHover: "#1b8398",
+      secondary: "#9580ff",
+      secondaryHover: "#5031e8"
+    },
+    segmented: {
+      bg: "rgba(20, 29, 31, 0)",
+      bgHover: "#34474b",
+      bgActive: "rgba(128, 234, 255, 0.1)",
+      border: "rgba(52, 71, 75, 0)",
+      borderHover: "#4a6368",
+      borderActive: "#80eaff",
+      text: "#e8eced",
+      textDisable: "rgba(232, 236, 237, 0.2)"
+    },
+    tagLabel: {
+      product: {
+        bg: "#d9ff66",
+        text: "#000000",
+        textCompact: "rgba(255, 255, 255, 0.48)"
+      },
+      rarity: {
+        bg: "#141d1f",
+        text: "#22a8c3"
+      },
+      name: {
+        bg: "#233134",
+        text: "#b7c5c8"
+      },
+      account: {
+        bg: "#9580ff",
+        text: "#000000",
+        textCompact: "rgba(255, 255, 255, 0.48)"
+      },
+      id: {
+        bg: "#34474b",
+        bgSeries: "#000000",
+        textSeries: "#b7c5c8",
+        textNumber: "#b7c5c8",
+        textCompact: "rgba(255, 255, 255, 0.48)"
+      },
+      subentity: {
+        bg: "#607f85",
+        text: "#000000"
+      },
+      item: {
+        bg: "#80eaff",
+        text: "#000000",
+        textCompact: "rgba(255, 255, 255, 0.48)"
+      }
+    },
+    toast: {
+      bg: "#607f85"
+    },
+    toggleButton: {
+      bg: "#233134",
+      bgHover: "#34474b",
+      bgActive: "rgba(128, 234, 255, 0.1)",
+      bgDisable: "rgba(52, 71, 75, 0.85)",
+      border: "#34474b",
+      borderHover: "#4a6368",
+      borderActive: "#80eaff",
+      borderDisable: "rgba(52, 71, 75, 0)",
+      text: "#e8eced",
+      textActive: "#e8eced",
+      textDisable: "rgba(232, 236, 237, 0.2)"
+    },
+    appButton: {
+      bg: "#34474b",
+      bgHover: "#4b6368",
+      bgPress: "#607f85",
+      border: "#4b6368",
+      borderHover: "#607f85",
+      borderPress: "rgba(255, 255, 255, 0)",
+      text: "#b7c5c8",
+      textDisable: "rgba(232, 236, 237, 0.2)"
+    }
+  }
+};
+
+// src/tokens/corpsite-light.json
+var corpsite_light_default = {
+  background: {
+    primary: "#ffffff",
+    secondary: "#f5f6f4",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#b2f2ff"
+    },
+    brandExtra: {
+      primary: "#7055f6",
+      secondary: "#bfb2ff"
+    },
+    inverse: "#000000",
+    static: {
+      dark: "#000000",
+      light: "#ffffff"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#bfffb2"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#ffdbb2"
+    },
+    alert: {
+      primary: "#f65570",
+      secondary: "#ff8095"
+    },
+    neutral: {
+      primary: "#a9aca0",
+      secondary: "#ecede9"
+    }
+  },
+  content: {
+    primary: "#000000",
+    secondary: "#5b5d56",
+    tertiary: "#909385",
+    brand: {
+      primary: "#1b8398",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#7055f6",
+      secondary: "#9580ff"
+    },
+    inverse: "#ffffff",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
+    success: {
+      primary: "#368f24",
+      secondary: "#50e831"
+    },
+    warning: {
+      primary: "#c37822",
+      secondary: "#f6ab55"
+    },
+    alert: {
+      primary: "#c3223d",
+      secondary: "#f65570"
+    },
+    neutral: {
+      primary: "#76786d",
+      secondary: "#a9aca0"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#ffffff",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#000000"
+    }
+  },
+  border: {
+    primary: "#000000",
+    secondary: "#dddfd8",
+    brand: "#31cae8",
+    brandExtra: "#5031e8",
+    inverse: "rgba(255, 255, 255, 0.17)",
+    success: "#3dc322",
+    warning: "#c37822",
+    alert: "#c3223d",
+    neutral: "#a9aca0"
+  },
+  overlay: {
+    mono: "rgba(0, 0, 0, 0.05)",
+    brand: "rgba(128, 234, 255, 0.3)",
+    brandExtra: "rgba(149, 128, 255, 0.3)",
+    success: "rgba(149, 255, 128, 0.24)",
+    warning: "rgba(255, 195, 128, 0.28)",
+    alert: "rgba(232, 48, 79, 0.24)",
+    neutral: "rgba(169, 172, 160, 0.24)",
+    monoHover: "rgba(0, 0, 0, 0.1)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.75)",
+    float: "rgba(255, 255, 255, 0.95)"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#80eaff",
+        bgHover: "#55dcf6",
+        bgPress: "#31cae8",
+        bgDisable: "rgba(221, 223, 216, 0.65)",
+        border: "#31cae8",
+        borderHover: "#22a8c3",
+        borderPress: "rgba(34, 168, 195, 0)",
+        borderDisable: "rgba(221, 223, 216, 0)"
+      },
+      secondary: {
+        bg: "#d6f8ff",
+        bgHover: "#b2f2ff",
+        bgPress: "#80eaff",
+        border: "#b2f2ff",
+        borderHover: "#80eaff",
+        borderPress: "rgba(128, 234, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(235, 252, 255, 0)",
+        bgHover: "#ebfcff",
+        bgPress: "#d6f8ff",
+        border: "rgba(235, 252, 255, 0)",
+        borderHover: "rgba(235, 252, 255, 0)",
+        borderPress: "rgba(214, 248, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#000000",
+        disable: "rgba(0, 0, 0, 0.3)",
+        ghost: "#22a8c3"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(34, 168, 195, 0.04)",
+        bgPress: "rgba(34, 168, 195, 0.08)",
+        border: "rgba(34, 168, 195, 0.1)",
+        borderHover: "rgba(34, 168, 195, 0.16)",
+        borderPress: "rgba(34, 168, 195, 0.1)"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#1a1a19",
+        bgHover: "#272725",
+        bgPress: "#41423e",
+        border: "rgba(26, 26, 25, 0)",
+        borderHover: "rgba(39, 39, 37, 0)",
+        borderPress: "rgba(65, 66, 62, 0)"
+      },
+      secondary: {
+        bg: "#ecede9",
+        bgHover: "#dddfd8",
+        bgPress: "#c2c4ba",
+        border: "#dddfd8",
+        borderHover: "#c2c4ba",
+        borderPress: "rgba(194, 196, 186, 0)"
+      },
+      tertiary: {
+        bg: "rgba(236, 237, 233, 0)",
+        bgHover: "#ecede9",
+        bgPress: "#dddfd8",
+        border: "rgba(236, 237, 233, 0)",
+        borderHover: "rgba(236, 237, 233, 0)",
+        borderPress: "rgba(221, 223, 216, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000",
+        ghost: "#000000"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(0, 0, 0, 0.04)",
+        bgPress: "rgba(0, 0, 0, 0.08)",
+        border: "rgba(0, 0, 0, 0.1)",
+        borderHover: "rgba(0, 0, 0, 0.16)",
+        borderPress: "rgba(0, 0, 0, 0.1)"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#7055f6",
+        bgHover: "#5031e8",
+        bgPress: "#3d22c3",
+        border: "#5031e8",
+        borderHover: "#3d22c3",
+        borderPress: "rgba(61, 34, 195, 0)"
+      },
+      secondary: {
+        bg: "#ddd6ff",
+        bgHover: "#bfb2ff",
+        bgPress: "#9580ff",
+        border: "#bfb2ff",
+        borderHover: "#9580ff",
+        borderPress: "rgba(149, 128, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(238, 235, 255, 0)",
+        bgHover: "#eeebff",
+        bgPress: "#ddd6ff",
+        border: "rgba(238, 235, 255, 0)",
+        borderHover: "rgba(238, 235, 255, 0)",
+        borderPress: "rgba(221, 214, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#301b98",
+        ghost: "#79971b"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(121, 151, 27, 0.04)",
+        bgPress: "rgba(121, 151, 27, 0.08)",
+        border: "rgba(121, 151, 27, 0.1)",
+        borderHover: "rgba(121, 151, 27, 0.16)",
+        borderPress: "rgba(121, 151, 27, 0.1)"
+      }
+    },
+    alert: {
+      bg: "#ffb2bf",
+      border: "#f65570",
+      primary: {
+        bg: "#e8304f",
+        bgHover: "#c3223d",
+        bgPress: "#8f2436",
+        border: "#c3223d",
+        borderHover: "#8f2436",
+        borderPress: "rgba(152, 27, 48, 0)"
+      },
+      secondary: {
+        bg: "#ffd6dd",
+        bgHover: "#ffb2bf",
+        bgPress: "#ff8095",
+        border: "#ffb2bf",
+        borderHover: "#ff8095",
+        borderPress: "rgba(255, 128, 149, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 235, 238, 0)",
+        bgHover: "#ffebee",
+        bgPress: "#ffd6dd",
+        border: "rgba(255, 214, 221, 0)",
+        borderHover: "rgba(255, 214, 221, 0)",
+        borderPress: "rgba(255, 214, 221, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#8f2436",
+        ghost: "#c33d22"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(195, 61, 34, 0.04)",
+        bgPress: "rgba(195, 61, 34, 0.08)",
+        border: "rgba(195, 61, 34, 0.1)",
+        borderHover: "rgba(195, 61, 34, 0.16)",
+        borderPress: "rgba(195, 61, 34, 0.1)"
+      }
+    },
+    input: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.15)",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)",
+      borderDisable: "rgba(221, 223, 216, 0)",
+      text: "#000000",
+      placeholder: "rgba(0, 0, 0, 0.6)",
+      textDisable: "rgba(0, 0, 0, 0.2)"
+    },
+    focus: {
+      bg: "#ffffff",
+      border: "#31cae8"
+    },
+    check: {
+      bg: "rgba(128, 234, 255, 0.15)",
+      bgHover: "rgba(128, 234, 255, 0.3)",
+      bgDisable: "rgba(221, 223, 216, 0.65)",
+      border: "#80eaff",
+      borderHover: "#55dcf6",
+      borderDisable: "rgba(221, 223, 216, 0)",
+      icon: "#31cae8"
+    },
+    faint: {
+      bg: "#ecede9",
+      bgHover: "#dddfd8",
+      border: "#dddfd8",
+      borderHover: "#c2c4ba"
+    },
+    slider: {
+      bg: "#1a1a19",
+      bgHover: "#272725",
+      bgDisable: "#dddfd8"
+    },
+    switch: {
+      bg: "rgba(128, 234, 255, 0.15)",
+      bgHover: "rgba(128, 234, 255, 0.3)",
+      bgDisable: "rgba(221, 223, 216, 0.65)",
+      border: "#80eaff",
+      borderHover: "#55dcf6",
+      borderDisable: "rgba(221, 223, 216, 0)"
+    },
+    knob: {
+      bg: "#1a1a19",
+      bgHover: "#272725",
+      bgActive: "#55dcf6",
+      bgActiveHover: "#31cae8",
+      bgInactive: "#c2c4ba",
+      bgInactiveHover: "#a9aca0",
+      bgDisable: "#dddfd8"
+    },
+    text: {
+      primary: "#000000",
+      disable: "rgba(0, 0, 0, 0.2)"
+    },
+    link: {
+      primary: "#1b8398",
+      primaryHover: "#55dcf6",
+      secondary: "#5031e8",
+      secondaryHover: "#9580ff"
+    },
+    segmented: {
+      bg: "rgba(255, 255, 255, 0.08)",
+      bgHover: "#dddfd8",
+      bgActive: "rgba(128, 234, 255, 0.15)",
+      border: "rgba(255, 255, 255, 0.1)",
+      borderHover: "#c2c4ba",
+      borderActive: "#80eaff",
+      text: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.2)"
+    },
+    tagLabel: {
+      product: {
+        bg: "#d9ff66",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      rarity: {
+        bg: "#141d1f",
+        text: "#22a8c3"
+      },
+      name: {
+        bg: "#ffffff",
+        text: "#000000"
+      },
+      account: {
+        bg: "#9580ff",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      id: {
+        bg: "#dadbd7",
+        bgSeries: "#000000",
+        textSeries: "#d7dee0",
+        textNumber: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      subentity: {
+        bg: "#a8aaa2",
+        text: "#000000"
+      },
+      item: {
+        bg: "#55dcf6",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      }
+    },
+    toast: {
+      bg: "#a9aca0"
+    },
+    toggleButton: {
+      bg: "#ecede9",
+      bgHover: "#dddfd8",
+      bgActive: "rgba(128, 234, 255, 0.15)",
+      bgDisable: "rgba(221, 223, 216, 0.65)",
+      border: "#dddfd8",
+      borderHover: "#c2c4ba",
+      borderActive: "#80eaff",
+      borderDisable: "rgba(221, 223, 216, 0)",
+      text: "#000000",
+      textActive: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.2)"
+    },
+    appButton: {
+      bg: "#dadbd7",
+      bgHover: "#c1c2bc",
+      bgPress: "#a8aaa2",
+      border: "#c1c2bc",
+      borderHover: "#a8aaa2",
+      borderPress: "rgba(255, 255, 255, 0)",
+      text: "#000000",
+      textDisable: "#999999"
+    }
+  }
+};
+
 // src/tokens/colors.ts
 var colors = {
-  dark: pentagram_dark_default,
-  light: pentagram_light_default,
-  "pentagram-dark": pentagram_dark_default,
-  "pentagram-light": pentagram_light_default,
+  dark: dark_default,
+  light: light_default,
+  "pentagram-dark": dark_default,
+  "pentagram-light": light_default,
   "ltg-dark": ltg_dark_default,
-  blueprints: blueprints_default
+  blueprints: blueprints_default,
+  "corpsite-dark": corpsite_dark_default,
+  "corpsite-light": corpsite_light_default
 };
 
 // src/tokens/spacing.ts
 var spacing = {
   xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
   s: 8,
+  /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
   m: 16,
-  l: 24,
-  xl: 32
+  /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
+  l: 24
 };
 var radius = {
   button: 4,
@@ -1688,7 +2506,7 @@ var shape = {
   input: {
     xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
     lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
-    md: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
     sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
     xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
   },
@@ -1750,12 +2568,16 @@ var shape = {
     xs: { borderRadius: radiusScale["50"] }
   },
   avatar: {
-    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["2"] },
-    lg: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
-    md: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
-    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
-    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
-    xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["2"] }
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
+  },
+  cell: {
+    borderRadius: radiusScale["100"],
+    borderWidth: stroke["1"]
   },
   modal: {
     borderRadius: radiusScale["100"]
@@ -1787,24 +2609,33 @@ var shadow = {
 
 // src/tokens/fonts.ts
 var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var PILAT = `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
+var PILAT_WIDE = `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
+var AKTIV_GROTESK = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
 var displayFontByContext = {
-  b2b: `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
-  b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
+  b2b: PILAT,
+  b2c: PILAT_WIDE,
+  corpsite: PILAT
 };
-var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
+var textFontByContext = {
+  b2b: AKTIV_GROTESK,
+  b2c: AKTIV_GROTESK,
+  corpsite: PILAT
+};
+var bodyFont = AKTIV_GROTESK;
 var fonts = {
   heading: displayFontByContext.b2b,
   body: bodyFont,
-  /** Paragraph/reading font — same families as body */
-  text: bodyFont,
+  /** Paragraph/reading font — Figma `text` role */
+  text: textFontByContext.b2b,
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 };
 var getFonts = (productContext = "b2b") => ({
   heading: displayFontByContext[productContext],
   body: bodyFont,
-  /** Paragraph/reading font — same families as body */
-  text: bodyFont,
+  /** Paragraph/reading font — Figma `text` role (differs from `body` for corpsite) */
+  text: textFontByContext[productContext],
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 });
@@ -1831,6 +2662,12 @@ var SCALE_STEPS = [
   "650",
   "750"
 ];
+var DISPLAY_SCALE_STEPS = [
+  ...SCALE_STEPS,
+  "800",
+  "850",
+  "900"
+];
 var fontSize = {
   "75": { common: 10, mobile: 10 },
   "100": { common: 12, mobile: 11 },
@@ -1844,7 +2681,10 @@ var fontSize = {
   "450": { common: 40, mobile: 32 },
   "550": { common: 48, mobile: 40 },
   "650": { common: 56, mobile: 48 },
-  "750": { common: 64, mobile: 56 }
+  "750": { common: 64, mobile: 56 },
+  "800": { common: 72, mobile: 64 },
+  "850": { common: 80, mobile: 72 },
+  "900": { common: 96, mobile: 80 }
 };
 var lineHeightDisplay = {
   "75": { common: 10, mobile: 10 },
@@ -1859,7 +2699,10 @@ var lineHeightDisplay = {
   "450": { common: 40, mobile: 32 },
   "550": { common: 48, mobile: 40 },
   "650": { common: 56, mobile: 48 },
-  "750": { common: 64, mobile: 56 }
+  "750": { common: 64, mobile: 56 },
+  "800": { common: 72, mobile: 64 },
+  "850": { common: 80, mobile: 72 },
+  "900": { common: 96, mobile: 80 }
 };
 var lineHeightCompact = {
   "75": { common: 14, mobile: 13 },
@@ -2032,21 +2875,21 @@ var typographyTokens = {
       h3: {
         fontSize: fontSize["350"].common,
         lineHeight: `${lineHeightDisplay["350"].common}px`,
-        fontWeight: 400,
+        fontWeight: 500,
         scaleStep: "350",
         lineHeightCategory: "display"
       },
       h4: {
         fontSize: fontSize["250"].common,
         lineHeight: `${lineHeightDisplay["250"].common}px`,
-        fontWeight: 400,
+        fontWeight: 500,
         scaleStep: "250",
         lineHeightCategory: "display"
       },
       h5: {
         fontSize: fontSize["200"].common,
         lineHeight: `${lineHeightDisplay["200"].common}px`,
-        fontWeight: 600,
+        fontWeight: 500,
         scaleStep: "200",
         lineHeightCategory: "display"
       }
@@ -2125,6 +2968,122 @@ var typographyTokens = {
         }
       }
     }
+  },
+  corpsite: {
+    heading: {
+      h1: {
+        fontSize: fontSize["650"].common,
+        lineHeight: `${lineHeightDisplay["650"].common}px`,
+        fontWeight: 300,
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: fontSize["550"].common,
+        lineHeight: `${lineHeightDisplay["550"].common}px`,
+        fontWeight: 400,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: fontSize["450"].common,
+        lineHeight: `${lineHeightDisplay["450"].common}px`,
+        fontWeight: 400,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: fontSize["350"].common,
+        lineHeight: `${lineHeightDisplay["350"].common}px`,
+        fontWeight: 400,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: fontSize["250"].common,
+        lineHeight: `${lineHeightDisplay["250"].common}px`,
+        fontWeight: 500,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      }
+    },
+    basic: {
+      // Figma splits corpsite display into display-lg (96px) / display-md (80px)
+      // / display-sm (64px). The app models a single `display`; mapped to
+      // display-lg (step 900) — the largest, matching Figma's primary display.
+      display: {
+        fontSize: fontSize["900"].common,
+        lineHeight: `${lineHeightDisplay["900"].common}px`,
+        fontWeight: 300,
+        scaleStep: "900",
+        lineHeightCategory: "display"
+      },
+      "body-lg": {
+        fontSize: fontSize["175"].common,
+        lineHeight: `${lineHeightCompact["175"].common}px`,
+        fontWeight: 500,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
+        accent: { fontWeight: 600 },
+        paragraph: {
+          lineHeight: `${lineHeightText["175"].common}px`,
+          spacing: 20,
+          lineHeightScaleStep: "175"
+        }
+      },
+      "body-md": {
+        fontSize: fontSize["150"].common,
+        lineHeight: `${lineHeightCompact["150"].common}px`,
+        fontWeight: 500,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
+        accent: { fontWeight: 600 },
+        paragraph: {
+          lineHeight: `${lineHeightText["150"].common}px`,
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
+      },
+      "body-sm": {
+        fontSize: fontSize["125"].common,
+        lineHeight: `${lineHeightCompact["125"].common}px`,
+        fontWeight: 500,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
+        accent: { fontWeight: 600 },
+        paragraph: {
+          lineHeight: `${lineHeightText["125"].common}px`,
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
+      },
+      "body-xs": {
+        fontSize: fontSize["100"].common,
+        lineHeight: `${lineHeightCompact["100"].common}px`,
+        fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
+        accent: { fontWeight: 500 },
+        paragraph: {
+          lineHeight: `${lineHeightText["100"].common}px`,
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
+      },
+      "body-xxs": {
+        fontSize: fontSize["75"].common,
+        lineHeight: `${lineHeightCompact["75"].common}px`,
+        fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
+        accent: { fontWeight: 500 },
+        paragraph: {
+          lineHeight: `${lineHeightText["75"].common}px`,
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
+      }
+    }
   }
 };
 var defaultProductContext = "b2b";
@@ -2397,10 +3356,10 @@ var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
 // src/styles/typography-css.ts
 function buildDeclarations(mode) {
   const lines = [];
-  for (const step of SCALE_STEPS) {
+  for (const step of DISPLAY_SCALE_STEPS) {
     lines.push(`--xui-font-size-${step}:${fontSize[step][mode]}px`);
   }
-  for (const step of SCALE_STEPS) {
+  for (const step of DISPLAY_SCALE_STEPS) {
     lines.push(`--xui-lh-display-${step}:${lineHeightDisplay[step][mode]}px`);
   }
   for (const step of SCALE_STEPS) {
@@ -2962,21 +3921,21 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           },
           lg: {
             height: 128,
-            padding: spacing.l,
+            padding: spacing.lg,
             fontSize: 18,
             iconSize: 28,
             radius: shape.input.lg.borderRadius
           },
           md: {
             height: 112,
-            padding: spacing.m,
+            padding: spacing.md,
             fontSize: 16,
             iconSize: 24,
             radius: shape.input.md.borderRadius
           },
           sm: {
             height: 96,
-            padding: spacing.s,
+            padding: spacing.sm,
             fontSize: 14,
             iconSize: 20,
             radius: shape.input.sm.borderRadius
@@ -3922,6 +4881,7 @@ var useId = hasReactUseId ? React3.useId : useIdFallback;
 var ModalIdContext = createContext(null);
 var useModalId = () => useContext(ModalIdContext);
 export {
+  DISPLAY_SCALE_STEPS,
   FontLoader,
   MOBILE_MAX_WIDTH,
   ModalIdContext,