@xsolla/switch-theme-customization 0.187.3 → 0.188.1

package/index.js

@@ -31,35 +31,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DELETED_LEGACY_TYPO_VARS: () => DELETED_LEGACY_TYPO_VARS,
-  PentagramResolver: () => PentagramResolver,
+  PentagramResolver: () => XuiResolver,
+  XuiResolver: () => XuiResolver,
   base: () => base10,
   baseDark: () => baseDark,
-  buildBaseColorsFromPentagram: () => buildBaseColorsFromPentagram,
+  buildBaseColorsFromPentagram: () => buildBaseColorsFromXui,
+  buildBaseColorsFromXui: () => buildBaseColorsFromXui,
   createResolver: () => createResolver,
   emails: () => emails,
   emailsDark: () => emailsDark,
   emailsThemes: () => emailsThemes,
-  flattenPentagramShapeToVars: () => flattenPentagramShapeToVars,
+  flattenPentagramShapeToVars: () => flattenXuiShapeToVars,
+  flattenXuiShapeToVars: () => flattenXuiShapeToVars,
   generateWithScheme: () => generateWithScheme,
-  mapPentagramShapeToLegacy: () => mapPentagramShapeToLegacy,
-  mapPentagramThemeToLegacy: () => mapPentagramThemeToLegacy,
-  mapPentagramTypoToLegacy: () => mapPentagramTypoToLegacy,
+  mapPentagramShapeToLegacy: () => mapXuiShapeToLegacy,
+  mapPentagramThemeToLegacy: () => mapXuiThemeToLegacy,
+  mapPentagramTypoToLegacy: () => mapXuiTypoToLegacy,
   mapThemeSchemeToLegacy: () => mapThemeSchemeToLegacy,
+  mapXuiShapeToLegacy: () => mapXuiShapeToLegacy,
+  mapXuiThemeToLegacy: () => mapXuiThemeToLegacy,
+  mapXuiTypoToLegacy: () => mapXuiTypoToLegacy,
   palettes: () => palettes,
   paystation4: () => paystation4,
   paystation4Dark: () => paystation4Dark,
   paystation4Gaijin: () => paystation4Gaijin,
   paystation4Nexters: () => paystation4Nexters,
-  paystation4PentagramDark: () => paystation4PentagramDark,
-  paystation4PentagramDarkLegacyCompatible: () => paystation4PentagramDarkLegacyCompatible,
-  paystation4PentagramLight: () => paystation4PentagramLight,
-  paystation4PentagramLightLegacyCompatible: () => paystation4PentagramLightLegacyCompatible,
+  paystation4PentagramDark: () => paystationXuiDark,
+  paystation4PentagramDarkLegacyCompatible: () => paystationXuiDarkLegacyCompatible,
+  paystation4PentagramLight: () => paystationXuiLight,
+  paystation4PentagramLightLegacyCompatible: () => paystationXuiLightLegacyCompatible,
   paystation4Take2: () => paystation4Take2,
   paystation4Themes: () => paystation4Themes,
-  pentagramDark: () => pentagramDark,
-  pentagramDarkScheme: () => pentagramDarkScheme,
-  pentagramLight: () => pentagramLight,
-  pentagramLightScheme: () => pentagramLightScheme,
+  paystation4XuiDark: () => paystationXuiDark,
+  paystation4XuiDarkLegacyCompatible: () => paystationXuiDarkLegacyCompatible,
+  paystation4XuiLight: () => paystationXuiLight,
+  paystation4XuiLightLegacyCompatible: () => paystationXuiLightLegacyCompatible,
+  paystationXuiDark: () => paystationXuiDark,
+  paystationXuiDarkLegacyCompatible: () => paystationXuiDarkLegacyCompatible,
+  paystationXuiLight: () => paystationXuiLight,
+  paystationXuiLightLegacyCompatible: () => paystationXuiLightLegacyCompatible,
+  pentagramDark: () => xuiDark,
+  pentagramDarkScheme: () => xuiDarkScheme,
+  pentagramLight: () => xuiLight,
+  pentagramLightScheme: () => xuiLightScheme,
   primaryPalette: () => primaryPalette,
   publisherV2: () => publisherV2,
   publisherV2Dark: () => publisherV2Dark,
@@ -72,7 +86,11 @@ __export(index_exports, {
   themesBaseColors: () => themesBaseColors,
   themesBaseColorsArray: () => themesBaseColorsArray,
   themesColorsScheme: () => themesColorsScheme,
-  typoPrimitives: () => typo_primitives_default
+  typoPrimitives: () => typo_primitives_default,
+  xuiDark: () => xuiDark,
+  xuiDarkScheme: () => xuiDarkScheme,
+  xuiLight: () => xuiLight,
+  xuiLightScheme: () => xuiLightScheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2015,45 +2033,51 @@ var themesColorsScheme = {
   emailsDark: emailsDarkScheme
 };
 
-// src/pentagram-primitives/typo-primitives.json
+// src/xui-primitives/typo-primitives.json
 var typo_primitives_default = {
   heading: {
     h1: {
-      fontSize: "450",
-      lineHeight: "display/450",
+      fontFamily: "font-family/display",
+      fontSize: "font-size/450",
+      lineHeight: "line-height-display/450",
       fontWeight: 700
     },
     h2: {
-      fontSize: "350",
-      lineHeight: "display/350",
+      fontFamily: "font-family/display",
+      fontSize: "font-size/350",
+      lineHeight: "line-height-display/350",
       fontWeight: 700
     },
     h3: {
-      fontSize: "300",
-      lineHeight: "display/300",
+      fontFamily: "font-family/display",
+      fontSize: "font-size/300",
+      lineHeight: "line-height-display/300",
       fontWeight: 700
     },
     h4: {
-      fontSize: "250",
-      lineHeight: "display/250",
+      fontFamily: "font-family/display",
+      fontSize: "font-size/250",
+      lineHeight: "line-height-display/250",
       fontWeight: 700
     },
     h5: {
-      fontSize: "200",
-      lineHeight: "display/200",
+      fontFamily: "font-family/display",
+      fontSize: "font-size/200",
+      lineHeight: "line-height-display/200",
       fontWeight: 700
     }
   },
   basic: {
     display: {
-      fontFamily: "compact",
-      fontSize: "300",
-      lineHeight: "compact/300",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/300",
+      lineHeight: "line-height-compact/300",
       fontWeight: 500
     },
     bodyLg: {
-      fontSize: "175",
-      lineHeight: "compact/175",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/175",
+      lineHeight: "line-height-compact/175",
       default: {
         fontWeight: 400
       },
@@ -2062,12 +2086,13 @@ var typo_primitives_default = {
       },
       paragraph: {
         spacing: "spacing/250",
-        lineHeight: "text/175"
+        lineHeight: "line-height-text/175"
       }
     },
     bodyMd: {
-      fontSize: "150",
-      lineHeight: "compact/150",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/150",
+      lineHeight: "line-height-compact/150",
       default: {
         fontWeight: 400
       },
@@ -2076,12 +2101,13 @@ var typo_primitives_default = {
       },
       paragraph: {
         spacing: "spacing/200",
-        lineHeight: "text/150"
+        lineHeight: "line-height-text/150"
       }
     },
     bodySm: {
-      fontSize: "125",
-      lineHeight: "compact/125",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/125",
+      lineHeight: "line-height-compact/125",
       default: {
         fontWeight: 400
       },
@@ -2090,12 +2116,13 @@ var typo_primitives_default = {
       },
       paragraph: {
         spacing: "spacing/150",
-        lineHeight: "text/125"
+        lineHeight: "line-height-text/125"
       }
     },
     bodyXs: {
-      fontSize: "100",
-      lineHeight: "compact/100",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/100",
+      lineHeight: "line-height-compact/100",
       default: {
         fontWeight: 400
       },
@@ -2104,12 +2131,13 @@ var typo_primitives_default = {
       },
       paragraph: {
         spacing: "spacing/100",
-        lineHeight: "text/100"
+        lineHeight: "line-height-text/100"
       }
     },
     bodyXxs: {
-      fontSize: "75",
-      lineHeight: "compact/75",
+      fontFamily: "font-family/compact",
+      fontSize: "font-size/75",
+      lineHeight: "line-height-compact/75",
       default: {
         fontWeight: 400
       },
@@ -2118,68 +2146,179 @@ var typo_primitives_default = {
       },
       paragraph: {
         spacing: "spacing/75",
-        lineHeight: "text/75"
+        lineHeight: "line-height-text/75"
       }
     }
   },
   control: {
     button: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" },
-      xs: { scale: "200" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      xs: {
+        fontSize: "component-scale-font-size/200",
+        lineHeight: "component-scale-line-height/200"
+      }
     },
     input: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" },
-      xs: { scale: "200" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      xs: {
+        fontSize: "component-scale-font-size/200",
+        lineHeight: "component-scale-line-height/200"
+      }
     },
     checkbox: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      }
     },
     tab: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" },
-      xs: { scale: "300" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      xs: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      }
     },
     radio: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      }
     },
     segmentedItem: {
-      xl: { scale: "500" },
-      lg: { scale: "400" },
-      md: { scale: "300" },
-      sm: { scale: "200" }
+      xl: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      md: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/200",
+        lineHeight: "component-scale-line-height/200"
+      }
     },
     tag: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" },
-      xs: { scale: "200" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      xs: {
+        fontSize: "component-scale-font-size/200",
+        lineHeight: "component-scale-line-height/200"
+      }
     },
     toggleButton: {
-      xl: { scale: "600" },
-      lg: { scale: "500" },
-      md: { scale: "400" },
-      sm: { scale: "300" },
-      xs: { scale: "200" }
+      xl: {
+        fontSize: "component-scale-font-size/600",
+        lineHeight: "component-scale-line-height/600"
+      },
+      lg: {
+        fontSize: "component-scale-font-size/500",
+        lineHeight: "component-scale-line-height/500"
+      },
+      md: {
+        fontSize: "component-scale-font-size/400",
+        lineHeight: "component-scale-line-height/400"
+      },
+      sm: {
+        fontSize: "component-scale-font-size/300",
+        lineHeight: "component-scale-line-height/300"
+      },
+      xs: {
+        fontSize: "component-scale-font-size/200",
+        lineHeight: "component-scale-line-height/200"
+      }
     }
   }
 };
 
-// src/pentagram-primitives/shape-primitives.json
+// src/xui-primitives/shape-primitives.json
 var shape_primitives_default = {
   button: {
     xl: {
@@ -2457,7 +2596,7 @@ var shape_primitives_default = {
   }
 };
 
-// src/pentagram-to-legacy/pentagram-resolver.ts
+// src/xui-to-legacy/xui-resolver.ts
 var FONT_SIZE_SCALE = {
   "75": { desktop: "10px", mobile: "10px" },
   "100": { desktop: "12px", mobile: "11px" },
@@ -2519,18 +2658,20 @@ var LINE_HEIGHT_TEXT = {
   "750": { desktop: "88px", mobile: "72px" }
 };
 var TYPOGRAPHY_SCALE_FONT_SIZE = {
-  "200": "10px",
-  "300": "12px",
-  "400": "14px",
-  "500": "16px",
-  "600": "18px"
+  "100": "10px",
+  "200": "12px",
+  "300": "14px",
+  "400": "16px",
+  "500": "18px",
+  "600": "20px"
 };
 var TYPOGRAPHY_SCALE_LINE_HEIGHT = {
-  "200": "16px",
-  "300": "18px",
-  "400": "20px",
-  "500": "22px",
-  "600": "24px"
+  "100": "12px",
+  "200": "14px",
+  "300": "16px",
+  "400": "18px",
+  "500": "20px",
+  "600": "22px"
 };
 var SPACING_SCALE = {
   "50": "2px",
@@ -2565,7 +2706,7 @@ var STROKE_SCALE = {
   "2": "2px",
   "3": "3px"
 };
-var PentagramResolver = class {
+var XuiResolver = class {
   device;
   constructor(device = "desktop") {
     this.device = device;
@@ -2634,10 +2775,41 @@ var PentagramResolver = class {
       const step = alias.replace("typography-scale/line-height/", "");
       return TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias;
     }
+    if (alias.startsWith("scale/")) {
+      const step = alias.replace("scale/", "");
+      return context === "lineHeight" ? TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias : TYPOGRAPHY_SCALE_FONT_SIZE[step] ?? alias;
+    }
+    if (alias.startsWith("line-height-display/")) {
+      const step = alias.replace("line-height-display/", "");
+      const value = LINE_HEIGHT_DISPLAY[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("line-height-compact/")) {
+      const step = alias.replace("line-height-compact/", "");
+      const value = LINE_HEIGHT_COMPACT[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("line-height-text/")) {
+      const step = alias.replace("line-height-text/", "");
+      const value = LINE_HEIGHT_TEXT[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("component-scale-font-size/")) {
+      const step = alias.replace("component-scale-font-size/", "");
+      return TYPOGRAPHY_SCALE_FONT_SIZE[step] ?? alias;
+    }
+    if (alias.startsWith("component-scale-line-height/")) {
+      const step = alias.replace("component-scale-line-height/", "");
+      return TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias;
+    }
     if (alias.startsWith("spacing/")) {
       const step = alias.replace("spacing/", "");
       return SPACING_SCALE[step] ?? alias;
     }
+    if (alias.startsWith("font-family/")) {
+      const key = alias.replace("font-family/", "");
+      return FONT_FAMILY[key] ?? alias;
+    }
     if (FONT_FAMILY[alias]) {
       return FONT_FAMILY[alias];
     }
@@ -2698,16 +2870,16 @@ var PentagramResolver = class {
   }
 };
 function createResolver(device = "desktop") {
-  return new PentagramResolver(device);
+  return new XuiResolver(device);
 }
 function resolveForDesktop(obj) {
-  return new PentagramResolver("desktop").resolvePrimitives(obj);
+  return new XuiResolver("desktop").resolvePrimitives(obj);
 }
 function resolveForMobile(obj) {
-  return new PentagramResolver("mobile").resolvePrimitives(obj);
+  return new XuiResolver("mobile").resolvePrimitives(obj);
 }
 
-// src/pentagram-to-legacy/map-pentagram-typo-to-legacy.ts
+// src/xui-to-legacy/map-xui-typo-to-legacy.ts
 function extractControlTypo(size, defaultFontWeight = 400) {
   if (!size) {
     return {
@@ -2738,8 +2910,8 @@ function buildParagraphStyle(variant) {
   };
 }
 var DEFAULT_FONT_FAMILY = `'GraphikLCWebUikit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
-function mapPentagramTypoToLegacy(pentagram, fontFamily = DEFAULT_FONT_FAMILY) {
-  const { heading, basic, control } = pentagram;
+function mapXuiTypoToLegacy(xui, fontFamily = DEFAULT_FONT_FAMILY) {
+  const { heading, basic, control } = xui;
   return {
     fontFamily,
     core: {
@@ -2826,7 +2998,7 @@ var DELETED_LEGACY_TYPO_VARS = [
   "core.bodyLg"
 ];
 
-// src/pentagram-to-legacy/map-pentagram-shape-to-legacy.ts
+// src/xui-to-legacy/map-xui-shape-to-legacy.ts
 function getShapeBorderRadius(shape, preferredSize = "md", fallback = "8px") {
   if (!shape) return fallback;
   const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
@@ -2837,17 +3009,17 @@ function getShapeBorderWidth(shape, preferredSize = "md", fallback = "1px") {
   const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
   return size?.borderWidth ?? fallback;
 }
-function mapPentagramShapeToLegacy(pentagram, existingMisc) {
-  const buttonRadius = getShapeBorderRadius(pentagram.button, "md", "8px");
-  const inputRadius = getShapeBorderRadius(pentagram.input, "md", "8px");
-  const checkboxRadius = getShapeBorderRadius(pentagram.checkbox, "md", "4px");
-  const tagRadius = getShapeBorderRadius(pentagram.tag, "md", "8px");
-  const popupRadius = pentagram.modal?.borderRadius ?? pentagram.contextMenu?.md?.borderRadius ?? pentagram.tooltip?.md?.borderRadius ?? "8px";
-  const borderWidth = getShapeBorderWidth(pentagram.button, "md", "2px");
-  const buttonSm = pentagram.button?.sm?.borderRadius ?? "4px";
-  const buttonMd = pentagram.button?.md?.borderRadius ?? "6px";
-  const buttonLg = pentagram.button?.lg?.borderRadius ?? "8px";
-  const buttonXl = pentagram.button?.xl?.borderRadius ?? "8px";
+function mapXuiShapeToLegacy(xui, existingMisc) {
+  const buttonRadius = getShapeBorderRadius(xui.button, "md", "8px");
+  const inputRadius = getShapeBorderRadius(xui.input, "md", "8px");
+  const checkboxRadius = getShapeBorderRadius(xui.checkbox, "md", "4px");
+  const tagRadius = getShapeBorderRadius(xui.tag, "md", "8px");
+  const popupRadius = xui.modal?.borderRadius ?? xui.contextMenu?.md?.borderRadius ?? xui.tooltip?.md?.borderRadius ?? "8px";
+  const borderWidth = getShapeBorderWidth(xui.button, "md", "2px");
+  const buttonSm = xui.button?.sm?.borderRadius ?? "4px";
+  const buttonMd = xui.button?.md?.borderRadius ?? "6px";
+  const buttonLg = xui.button?.lg?.borderRadius ?? "8px";
+  const buttonXl = xui.button?.xl?.borderRadius ?? "8px";
   return {
     borderRadiusScale: {
       sm: existingMisc?.borderRadiusScale?.sm ?? buttonSm,
@@ -2869,7 +3041,7 @@ function mapPentagramShapeToLegacy(pentagram, existingMisc) {
     }
   };
 }
-function flattenPentagramShapeToVars(pentagram) {
+function flattenXuiShapeToVars(xui) {
   const vars = {};
   function addSizedComponent(name, shape) {
     if (!shape) return;
@@ -2882,32 +3054,32 @@ function flattenPentagramShapeToVars(pentagram) {
       }
     }
   }
-  addSizedComponent("button", pentagram.button);
-  addSizedComponent("input", pentagram.input);
-  addSizedComponent("checkbox", pentagram.checkbox);
-  addSizedComponent("tab", pentagram.tabItem);
-  addSizedComponent("tag", pentagram.tag);
-  addSizedComponent("radio", pentagram.radio);
-  addSizedComponent("switch", pentagram.switch);
-  addSizedComponent("segmented", pentagram.segmented);
-  addSizedComponent("segmentedItem", pentagram.segmentedItem);
-  addSizedComponent("tooltip", pentagram.tooltip);
-  addSizedComponent("contextMenu", pentagram.contextMenu);
-  addSizedComponent("avatar", pentagram.avatar);
-  addSizedComponent("toggleButtonGroup", pentagram.toggleButtonGroup);
-  if (pentagram.modal?.borderRadius) {
-    vars["shape-modal-borderRadius"] = pentagram.modal.borderRadius;
+  addSizedComponent("button", xui.button);
+  addSizedComponent("input", xui.input);
+  addSizedComponent("checkbox", xui.checkbox);
+  addSizedComponent("tab", xui.tabItem);
+  addSizedComponent("tag", xui.tag);
+  addSizedComponent("radio", xui.radio);
+  addSizedComponent("switch", xui.switch);
+  addSizedComponent("segmented", xui.segmented);
+  addSizedComponent("segmentedItem", xui.segmentedItem);
+  addSizedComponent("tooltip", xui.tooltip);
+  addSizedComponent("contextMenu", xui.contextMenu);
+  addSizedComponent("avatar", xui.avatar);
+  addSizedComponent("toggleButtonGroup", xui.toggleButtonGroup);
+  if (xui.modal?.borderRadius) {
+    vars["shape-modal-borderRadius"] = xui.modal.borderRadius;
   }
-  if (pentagram.cell?.borderRadius) {
-    vars["shape-cell-borderRadius"] = pentagram.cell.borderRadius;
+  if (xui.cell?.borderRadius) {
+    vars["shape-cell-borderRadius"] = xui.cell.borderRadius;
   }
-  if (pentagram.toast?.borderRadius) {
-    vars["shape-toast-borderRadius"] = pentagram.toast.borderRadius;
+  if (xui.toast?.borderRadius) {
+    vars["shape-toast-borderRadius"] = xui.toast.borderRadius;
   }
   return vars;
 }
 
-// src/themes/pentagram/mappers/scheme-to-legacy.ts
+// src/themes/xui/mappers/scheme-to-legacy.ts
 function mapThemeSchemeToLegacy(colors) {
   return {
     core: {
@@ -2917,9 +3089,9 @@ function mapThemeSchemeToLegacy(colors) {
         ghost: colors.overlay.mono,
         tone: colors.layer.scrim,
         selection: "transparent",
-        // deleted in Pentagram
+        // deleted in XUI
         hover: "transparent",
-        // deleted in Pentagram
+        // deleted in XUI
         brand: colors.background.brand.secondary,
         brandSecondary: colors.background.brandExtra.secondary,
         success: colors.background.success.secondary,
@@ -3025,8 +3197,8 @@ function mapThemeSchemeToLegacy(colors) {
   };
 }
 
-// src/pentagram-to-legacy/map-pentagram-theme-to-legacy.ts
-function buildBaseColorsFromPentagram(colors) {
+// src/xui-to-legacy/map-xui-theme-to-legacy.ts
+function buildBaseColorsFromXui(colors) {
   return {
     content: colors.content.primary,
     surface: colors.background.primary,
@@ -3040,22 +3212,22 @@ function buildBaseColorsFromPentagram(colors) {
     neutral: colors.content.neutral.primary
   };
 }
-function mapPentagramThemeToLegacy(pentagram, device = "desktop") {
+function mapXuiThemeToLegacy(xui, device = "desktop") {
   const resolver = createResolver(device);
-  const resolvedTypo = resolver.resolvePrimitives(pentagram.typo);
-  const resolvedShape = resolver.resolvePrimitives(pentagram.shape);
+  const resolvedTypo = resolver.resolvePrimitives(xui.text);
+  const resolvedShape = resolver.resolvePrimitives(xui.shape);
   return {
     colors: {
-      base: buildBaseColorsFromPentagram(pentagram.colors),
-      ...mapThemeSchemeToLegacy(pentagram.colors)
+      base: buildBaseColorsFromXui(xui.color),
+      ...mapThemeSchemeToLegacy(xui.color)
     },
-    typo: mapPentagramTypoToLegacy(resolvedTypo),
-    misc: mapPentagramShapeToLegacy(resolvedShape),
-    shadows: pentagram.shadows
+    typo: mapXuiTypoToLegacy(resolvedTypo),
+    misc: mapXuiShapeToLegacy(resolvedShape),
+    shadows: xui.shadow
   };
 }
 
-// src/themes/pentagram/presets/pay-station-dark.ts
+// src/themes/xui/presets/pay-station-dark.ts
 var import_colord10 = require("colord");
 var baseDark = {
   content: (0, import_colord10.colord)("#ffffff"),
@@ -3078,7 +3250,7 @@ var baseDark = {
   onAlert: (0, import_colord10.colord)("#000000"),
   onNeutral: (0, import_colord10.colord)("#000000")
 };
-var pentagramDarkScheme = (b) => ({
+var xuiDarkScheme = (b) => ({
   base: {
     content: b.content.toRgbString(),
     contentInverse: b.contentInverse.toRgbString(),
@@ -3410,9 +3582,9 @@ var pentagramDarkScheme = (b) => ({
     }
   }
 });
-var pentagramDark = pentagramDarkScheme(baseDark);
+var xuiDark = xuiDarkScheme(baseDark);
 
-// src/themes/pentagram/presets/pay-station-light.ts
+// src/themes/xui/presets/pay-station-light.ts
 var import_colord11 = require("colord");
 var base10 = {
   content: (0, import_colord11.colord)("#000000"),
@@ -3435,7 +3607,7 @@ var base10 = {
   onAlert: (0, import_colord11.colord)("#000000"),
   onNeutral: (0, import_colord11.colord)("#000000")
 };
-var pentagramLightScheme = (b) => ({
+var xuiLightScheme = (b) => ({
   base: {
     content: b.content.toRgbString(),
     contentInverse: b.contentInverse.toRgbString(),
@@ -3767,21 +3939,21 @@ var pentagramLightScheme = (b) => ({
     }
   }
 });
-var pentagramLight = pentagramLightScheme(base10);
+var xuiLight = xuiLightScheme(base10);
 
-// src/themes/pentagram/pentagram.ts
-function convertToLegacyBase(pentagramBase) {
+// src/themes/xui/xui.ts
+function convertToLegacyBase(xuiBase) {
   return {
-    content: pentagramBase.content.toRgbString(),
-    surface: pentagramBase.background.toRgbString(),
-    project: pentagramBase.brand.toRgbString(),
-    accent: pentagramBase.brandExtra.toRgbString(),
-    phantom: pentagramBase.mono.toRgbString(),
-    path: pentagramBase.brand.toRgbString(),
-    success: pentagramBase.success.toRgbString(),
-    warning: pentagramBase.warning.toRgbString(),
-    alert: pentagramBase.alert.toRgbString(),
-    neutral: pentagramBase.neutral.toRgbString()
+    content: xuiBase.content.toRgbString(),
+    surface: xuiBase.background.toRgbString(),
+    project: xuiBase.brand.toRgbString(),
+    accent: xuiBase.brandExtra.toRgbString(),
+    phantom: xuiBase.mono.toRgbString(),
+    path: xuiBase.brand.toRgbString(),
+    success: xuiBase.success.toRgbString(),
+    warning: xuiBase.warning.toRgbString(),
+    alert: xuiBase.alert.toRgbString(),
+    neutral: xuiBase.neutral.toRgbString()
   };
 }
 var desktopResolver = createResolver("desktop");
@@ -3789,41 +3961,41 @@ var resolvedTypoDesktop = desktopResolver.resolvePrimitives(
   typo_primitives_default
 );
 var resolvedShapeDesktop = desktopResolver.resolvePrimitives(shape_primitives_default);
-var pentagramTypo = mapPentagramTypoToLegacy(resolvedTypoDesktop);
-var pentagramMisc = mapPentagramShapeToLegacy(resolvedShapeDesktop);
-var paystation4PentagramLightLegacyCompatible = {
+var xuiTypo = mapXuiTypoToLegacy(resolvedTypoDesktop);
+var xuiMisc = mapXuiShapeToLegacy(resolvedShapeDesktop);
+var paystationXuiLightLegacyCompatible = {
   colors: {
     base: convertToLegacyBase(base10),
-    ...mapThemeSchemeToLegacy(pentagramLight)
+    ...mapThemeSchemeToLegacy(xuiLight)
   },
-  typo: pentagramTypo,
-  misc: pentagramMisc,
+  typo: xuiTypo,
+  misc: xuiMisc,
   shadows: shadowsDefault,
-  globalStyle: "pentagram"
+  globalStyle: "xui"
 };
-var paystation4PentagramDarkLegacyCompatible = {
+var paystationXuiDarkLegacyCompatible = {
   colors: {
     base: convertToLegacyBase(baseDark),
-    ...mapThemeSchemeToLegacy(pentagramDark)
+    ...mapThemeSchemeToLegacy(xuiDark)
   },
-  typo: pentagramTypo,
-  misc: pentagramMisc,
+  typo: xuiTypo,
+  misc: xuiMisc,
   shadows: shadowsDefault,
-  globalStyle: "pentagram"
+  globalStyle: "xui"
 };
-var paystation4PentagramLight = {
-  colors: pentagramLight,
+var paystationXuiLight = {
+  color: xuiLight,
   shape: shape_primitives_default,
-  typo: typo_primitives_default,
-  shadows: shadowsDefault,
-  globalStyle: "pentagram"
+  text: typo_primitives_default,
+  shadow: shadowsDefault,
+  globalStyle: "xui"
 };
-var paystation4PentagramDark = {
-  colors: pentagramDark,
+var paystationXuiDark = {
+  color: xuiDark,
   shape: shape_primitives_default,
-  typo: typo_primitives_default,
-  shadows: shadowsDefault,
-  globalStyle: "pentagram"
+  text: typo_primitives_default,
+  shadow: shadowsDefault,
+  globalStyle: "xui"
 };
 
 // src/themes/index.ts
@@ -4004,15 +4176,15 @@ var palettes = {
 // src/generators/themeGenerator.ts
 var import_colord12 = require("colord");
 var import_lodash = __toESM(require("lodash.merge"));
-var pentagramBaseColors = {
+var xuiBaseColors = {
   payStationLight: base10,
   payStationDark: baseDark
 };
-var pentagramColorsScheme = {
-  payStationLight: pentagramLightScheme,
-  payStationDark: pentagramDarkScheme
+var xuiColorsScheme = {
+  payStationLight: xuiLightScheme,
+  payStationDark: xuiDarkScheme
 };
-var pentagramBaseColorsKeys = [
+var xuiBaseColorsKeys = [
   "content",
   "contentInverse",
   "background",
@@ -4061,12 +4233,9 @@ var generateWithScheme = ({
 };
 function themeGenerator(props) {
   const { schemeName, baseColors } = props;
-  if (schemeName in pentagramColorsScheme) {
-    const schemeBase = baseColors ? applyPentagramColors(
-      pentagramBaseColors[schemeName],
-      baseColors
-    ) : { ...pentagramBaseColors[schemeName] };
-    return pentagramColorsScheme[schemeName](schemeBase);
+  if (schemeName in xuiColorsScheme) {
+    const schemeBase = baseColors ? applyXuiColors(xuiBaseColors[schemeName], baseColors) : { ...xuiBaseColors[schemeName] };
+    return xuiColorsScheme[schemeName](schemeBase);
   }
   const { customParams, parentTheme: propParentTheme } = props;
   const parentTheme = propParentTheme || themes[schemeName] || {};
@@ -4085,9 +4254,9 @@ function themeGenerator(props) {
   }
   return generateTheme;
 }
-var applyPentagramColors = (schemeBase, overrides) => {
+var applyXuiColors = (schemeBase, overrides) => {
   const result = { ...schemeBase };
-  pentagramBaseColorsKeys.forEach((key) => {
+  xuiBaseColorsKeys.forEach((key) => {
     if (overrides[key]) result[key] = (0, import_colord12.colord)(overrides[key]);
   });
   return result;
@@ -4096,19 +4265,25 @@ var applyPentagramColors = (schemeBase, overrides) => {
 0 && (module.exports = {
   DELETED_LEGACY_TYPO_VARS,
   PentagramResolver,
+  XuiResolver,
   base,
   baseDark,
   buildBaseColorsFromPentagram,
+  buildBaseColorsFromXui,
   createResolver,
   emails,
   emailsDark,
   emailsThemes,
   flattenPentagramShapeToVars,
+  flattenXuiShapeToVars,
   generateWithScheme,
   mapPentagramShapeToLegacy,
   mapPentagramThemeToLegacy,
   mapPentagramTypoToLegacy,
   mapThemeSchemeToLegacy,
+  mapXuiShapeToLegacy,
+  mapXuiThemeToLegacy,
+  mapXuiTypoToLegacy,
   palettes,
   paystation4,
   paystation4Dark,
@@ -4120,6 +4295,14 @@ var applyPentagramColors = (schemeBase, overrides) => {
   paystation4PentagramLightLegacyCompatible,
   paystation4Take2,
   paystation4Themes,
+  paystation4XuiDark,
+  paystation4XuiDarkLegacyCompatible,
+  paystation4XuiLight,
+  paystation4XuiLightLegacyCompatible,
+  paystationXuiDark,
+  paystationXuiDarkLegacyCompatible,
+  paystationXuiLight,
+  paystationXuiLightLegacyCompatible,
   pentagramDark,
   pentagramDarkScheme,
   pentagramLight,
@@ -4136,6 +4319,10 @@ var applyPentagramColors = (schemeBase, overrides) => {
   themesBaseColors,
   themesBaseColorsArray,
   themesColorsScheme,
-  typoPrimitives
+  typoPrimitives,
+  xuiDark,
+  xuiDarkScheme,
+  xuiLight,
+  xuiLightScheme
 });
 //# sourceMappingURL=index.js.map