@xsolla/switch-theme-customization 0.161.2 → 0.161.3-pr315.1779889787

package/index.d.ts

@@ -489,6 +489,9 @@ declare const base: PentagramBaseColors;
 declare const createScheme: (b: PentagramBaseColors) => ThemeScheme;
 declare const payStationScheme: ThemeScheme;
 
+declare const paystation4PentagramLight: Theme;
+declare const paystation4PentagramDark: Theme;
+
 declare const themes: Record<string, Theme>;
 
 declare const palettes: {
@@ -1964,4 +1967,1158 @@ declare function themeGenerator(props: {
 }): ThemeScheme;
 declare function themeGenerator(props: ThemeFunctionType): Theme;
 
-export { type BaseColors, type BaseColorsIndex, type ColorValue, type Colors$1 as Colors, type ComponentBaseColors$1 as ComponentBaseColors, type Misc, type PentagramBaseColors, type PresetName, type Shadows, type Size, type Theme, type ThemeFunctionType, type ThemeScheme, type ThemeVariant, type Typography, base, baseDark, createDarkScheme, createScheme, emails, emailsDark, emailsThemes, generateWithScheme, palettes, payStationDarkScheme, payStationScheme, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4Take2, paystation4Themes, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme };
+/**
+ * Resolves Pentagram design token aliases to concrete CSS values.
+ *
+ * Source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ * Scale tables: see FONT_SIZE_SCALE and LINE_HEIGHT_* constants below.
+ *
+ * This resolver converts aliases like "font-size/300" → "28px" (desktop) or "24px" (mobile).
+ * It is used BEFORE the mappers (mapPentagramTypoToLegacy, mapPentagramShapeToLegacy).
+ *
+ * @example
+ * ```typescript
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedTypo = resolver.resolveObject(themeContentPentagram.typo);
+ * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
+ * ```
+ */
+type Viewport = "desktop" | "mobile";
+declare class PentagramResolver {
+    private viewport;
+    constructor(viewport?: Viewport);
+    setViewport(viewport: Viewport): void;
+    /**
+     * Resolve a single alias to a concrete value.
+     *
+     * @param alias - Alias string like "300" (fontSize), "display/300" (lineHeight), or "radius/100"
+     * @param context - Optional context hint: 'fontSize' or 'lineHeight'
+     * @returns Resolved value (e.g., "28px") or original if not an alias
+     */
+    resolve(alias: string | number, context?: "fontSize" | "lineHeight"): string | number;
+    /**
+     * Recursively resolve all aliases in an object.
+     *
+     * @param obj - Object containing alias strings
+     * @returns New object with all aliases resolved to concrete values
+     */
+    resolveObject<T>(obj: T): T;
+    /**
+     * Check if a value is already resolved (not an alias).
+     */
+    private isResolved;
+}
+/**
+ * Create a resolver for the given viewport.
+ *
+ * @param viewport - 'desktop' (default) or 'mobile'
+ * @returns PentagramResolver instance
+ *
+ * @example
+ * ```typescript
+ * const resolver = createResolver('desktop');
+ * const resolved = resolver.resolveObject(pentagramTypo);
+ * ```
+ */
+declare function createResolver(viewport?: Viewport): PentagramResolver;
+/**
+ * Resolve all aliases in a Pentagram object for desktop viewport.
+ * Convenience function for the most common case.
+ *
+ * @example
+ * ```typescript
+ * const resolvedTypo = resolveForDesktop(themeContentPentagram.typo);
+ * ```
+ */
+declare function resolveForDesktop<T>(obj: T): T;
+/**
+ * Resolve all aliases in a Pentagram object for mobile viewport.
+ */
+declare function resolveForMobile<T>(obj: T): T;
+
+/**
+ * Maps Pentagram Typography → Legacy Typography structure.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ * Task: https://xsolla.atlassian.net/browse/PAYMENTS-27883
+ *
+ * Used for themes that have themeContentPentagram.typo (new set).
+ * Converts to themeContent.typo (old set) so that Pay Station 4 keeps working.
+ *
+ * NOTE: This mapper expects RESOLVED values (px), not aliases like "font-size/300".
+ * Use PentagramResolver to resolve aliases before calling this mapper.
+ */
+interface TypographyStyle {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight?: number;
+    textTransform?: string;
+}
+interface PentagramTypoBasicVariant {
+    fontSize: string;
+    lineHeight: string;
+    default?: {
+        fontWeight: number;
+    };
+    accent?: {
+        fontWeight: number;
+    };
+    paragraph?: {
+        spacing?: string;
+        lineHeight?: string;
+    };
+}
+interface PentagramTypoControlSize {
+    typography?: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    fontSize?: string;
+    lineHeight?: string;
+}
+/**
+ * Pentagram Typography structure (from themeContentPentagram.typo)
+ */
+interface PentagramTypo {
+    heading: {
+        h1: TypographyStyle;
+        h2: TypographyStyle;
+        h3: TypographyStyle;
+        h4: TypographyStyle;
+        h5: TypographyStyle;
+    };
+    basic: {
+        display: TypographyStyle & {
+            fontFamily?: string;
+        };
+        bodyLg: PentagramTypoBasicVariant;
+        bodyMd: PentagramTypoBasicVariant;
+        bodySm: PentagramTypoBasicVariant;
+        bodyXs: PentagramTypoBasicVariant;
+        bodyXxs: PentagramTypoBasicVariant;
+    };
+    control: {
+        button: Record<string, PentagramTypoControlSize>;
+        input: Record<string, PentagramTypoControlSize>;
+        checkbox: Record<string, PentagramTypoControlSize>;
+        tab: Record<string, PentagramTypoControlSize>;
+        radio: Record<string, PentagramTypoControlSize>;
+        segmentedItem?: Record<string, PentagramTypoControlSize>;
+        tag?: Record<string, PentagramTypoControlSize>;
+        toggleButton?: Record<string, PentagramTypoControlSize>;
+    };
+}
+/**
+ * Legacy Typography structure (themeContent.typo)
+ */
+interface LegacyTypo {
+    fontFamily: string;
+    core: {
+        h1: TypographyStyle;
+        h2: TypographyStyle;
+        h3: TypographyStyle;
+        h4: TypographyStyle;
+        bodyMd: TypographyStyle;
+        bodyMdAccent: TypographyStyle;
+        bodyLgAccent: TypographyStyle;
+        paragraph: TypographyStyle;
+        label: TypographyStyle;
+        minor: TypographyStyle;
+    };
+    components: {
+        button: Record<string, TypographyStyle>;
+        input: Record<string, TypographyStyle>;
+        tab: Record<string, TypographyStyle>;
+        check: Record<string, TypographyStyle>;
+        label: Record<string, TypographyStyle>;
+    };
+}
+/**
+ * Maps Pentagram typography to legacy typography structure.
+ *
+ * @param pentagram - Pentagram typography (RESOLVED values, not aliases)
+ * @param fontFamily - Optional custom font family (defaults to GraphikLCWebUikit)
+ * @returns Legacy typography structure for themeContent.typo
+ *
+ * @example
+ * ```typescript
+ * // First resolve aliases
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedTypo = resolver.resolveObject(themeContentPentagram.typo);
+ *
+ * // Then map to legacy
+ * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
+ * ```
+ */
+declare function mapPentagramTypoToLegacy(pentagram: PentagramTypo, fontFamily?: string): LegacyTypo;
+/**
+ * These legacy variables are DELETED in Pentagram and should NOT be mapped:
+ *
+ * - components.heading (sm/md/lg) — was uppercase labels, not used in PS4
+ * - components.fieldGroup (sm/md/lg) — never used in PS4
+ * - core.strong — never used in PS4
+ * - core.bodyLg — replaced by bodyLgAccent (only accent variant used)
+ *
+ * If PS4 code still references these variables, it will fall back to
+ * default CSS values from design-typography-variables.scss
+ */
+declare const DELETED_LEGACY_TYPO_VARS: readonly ["components.heading", "components.fieldGroup", "core.strong", "core.bodyLg"];
+
+/**
+ * Maps Pentagram Shape → Legacy Misc structure.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ * Task: https://xsolla.atlassian.net/browse/PAYMENTS-27883
+ *
+ * Pentagram has per-component, per-size shape tokens (button.xl.borderRadius, etc).
+ * Legacy misc has single borderRadius per component type (borderRadius.button).
+ *
+ * This mapper uses the "md" size as default for legacy compatibility.
+ *
+ * NOTE: This mapper expects RESOLVED values (px), not aliases like "radius/100".
+ * Use PentagramResolver to resolve aliases before calling this mapper.
+ */
+interface PentagramShapeSize {
+    borderRadius?: string;
+    borderWidth?: string;
+    borderWeight?: string;
+}
+interface PentagramShape {
+    button?: Record<string, PentagramShapeSize>;
+    checkbox?: Record<string, PentagramShapeSize>;
+    input?: Record<string, PentagramShapeSize>;
+    cell?: PentagramShapeSize;
+    modal?: PentagramShapeSize;
+    toast?: PentagramShapeSize;
+    segmentedItem?: Record<string, PentagramShapeSize>;
+    segmented?: Record<string, PentagramShapeSize>;
+    switch?: Record<string, PentagramShapeSize>;
+    knob?: Record<string, {
+        borderRadius?: string;
+    }>;
+    tabItem?: Record<string, PentagramShapeSize>;
+    tag?: Record<string, PentagramShapeSize>;
+    tagLabel?: {
+        borderRadius?: string;
+    };
+    tooltip?: Record<string, PentagramShapeSize>;
+    radio?: Record<string, PentagramShapeSize>;
+    contextMenu?: Record<string, PentagramShapeSize>;
+    avatar?: Record<string, PentagramShapeSize>;
+    toggleButtonGroup?: Record<string, PentagramShapeSize>;
+}
+interface LegacyMisc {
+    borderRadiusScale: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderWidth: string;
+    borderRadius: {
+        input: string;
+        button: string;
+        buttonIcon: string;
+        popup: string;
+        checkbox: string;
+        tag: string;
+    };
+    minWidth: {
+        button: string;
+    };
+}
+/**
+ * Maps Pentagram shape to legacy misc structure.
+ *
+ * @param pentagram - Pentagram shape (RESOLVED values, not aliases)
+ * @param existingMisc - Optional existing misc to merge with (preserves non-shape values)
+ * @returns Legacy misc structure for themeContent.misc
+ *
+ * @example
+ * ```typescript
+ * // First resolve aliases
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedShape = resolver.resolveObject(themeContentPentagram.shape);
+ *
+ * // Then map to legacy
+ * const legacyMisc = mapPentagramShapeToLegacy(resolvedShape);
+ * ```
+ */
+declare function mapPentagramShapeToLegacy(pentagram: PentagramShape, existingMisc?: Partial<LegacyMisc>): LegacyMisc;
+/**
+ * If PS4 adopts per-size CSS variables (--shape-button-md-borderRadius),
+ * this function can generate them directly from Pentagram shape.
+ *
+ * This is for future use when PS4 migrates to granular shape tokens.
+ */
+declare function flattenPentagramShapeToVars(pentagram: PentagramShape): Record<string, string>;
+
+/**
+ * Maps hand-crafted Pentagram colors → legacy Switch Colors structure.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ *
+ * Used for default themes that are hand-crafted (not auto-generated via themeGenerator).
+ * Converts themeContentPentagram.colors (new set) → themeContent.colors (old set),
+ * so that products still on the legacy variable set (Chat, Proxy Page) keep working.
+ */
+
+/**
+ * Hand-crafted Pentagram colors structure (from Figma export)
+ */
+interface HandCraftedPentagramColors {
+    content: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        brandPrimary: string;
+        brandSecondary: string;
+        brandExtraPrimary: string;
+        brandExtraSecondary: string;
+        inverse: string;
+        staticLight: string;
+        staticDark: string;
+        successPrimary: string;
+        successSecondary: string;
+        warningPrimary: string;
+        warningSecondary: string;
+        alertPrimary: string;
+        alertSecondary: string;
+        neutralPrimary: string;
+        neutralSecondary: string;
+        onBrand: string;
+        onBrandExtra: string;
+        onSuccess: string;
+        onWarning: string;
+        onAlert: string;
+        onNeutral: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        brandPrimary: string;
+        brandSecondary: string;
+        brandExtraPrimary: string;
+        brandExtraSecondary: string;
+        inverse: string;
+        staticDark: string;
+        staticLight: string;
+        successPrimary: string;
+        successSecondary: string;
+        warningPrimary: string;
+        warningSecondary: string;
+        alertPrimary: string;
+        alertSecondary: string;
+        neutralPrimary: string;
+        neutralSecondary: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        brand: string;
+        brandExtra: string;
+        inverse: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    overlay: {
+        mono: string;
+        brand: string;
+        brandExtra: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    control: {
+        input: {
+            bg: string;
+            bgHover: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderDisable: string;
+            text: string;
+            placeholder: string;
+            textDisable: string;
+        };
+        focus: {
+            bg: string;
+            border: string;
+        };
+        check: {
+            bg: string;
+            bgHover: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderDisable: string;
+            icon: string;
+        };
+        faint: {
+            bg: string;
+            bgHover: string;
+            border: string;
+            borderHover: string;
+        };
+        text: {
+            primary: string;
+            disable: string;
+        };
+        link: {
+            primary: string;
+            primaryHover: string;
+            secondary: string;
+            secondaryHover: string;
+        };
+        switch: {
+            bg: string;
+            bgHover: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderDisable: string;
+        };
+        slider: {
+            bg: string;
+            bgHover: string;
+            bgDisable: string;
+        };
+        knob: {
+            bg: string;
+            bgActive: string;
+            bgHover: string;
+            bgInactive: string;
+            bgDisable: string;
+        };
+        segmented: {
+            bg: string;
+            bgHover: string;
+            bgActive: string;
+            border: string;
+            borderHover: string;
+            borderActive: string;
+            text: string;
+            textDisable: string;
+        };
+        toggleButton: {
+            bg: string;
+            bgHover: string;
+            bgActive: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderActive: string;
+            borderDisable: string;
+            text: string;
+            textActive: string;
+            textDisable: string;
+        };
+        brand: {
+            primary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+                borderDisable: string;
+            };
+            secondary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            tertiary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                disable: string;
+            };
+        };
+        mono: {
+            primary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            secondary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            tertiary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        brandExtra: {
+            primary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            secondary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            tertiary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        alert: {
+            primary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            secondary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            tertiary: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+            };
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+    };
+    layer: {
+        scrim: string;
+        float: string;
+    };
+}
+/**
+ * @param pentagram Hand-crafted Pentagram color scheme (all values already RGB strings).
+ * @returns Legacy colors without 'base' (seed colors not needed for hand-crafted themes).
+ */
+declare function mapHandCraftedPentagramToLegacy(pentagram: HandCraftedPentagramColors): Omit<Colors$1<string>, "base">;
+
+/**
+ * Orchestrator: maps full themeContentPentagram → legacy themeContent.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ */
+
+interface PentagramThemeContent {
+    colors: HandCraftedPentagramColors;
+    typo: PentagramTypo;
+    shape: PentagramShape;
+    shadows?: Shadows;
+}
+interface LegacyThemeContent {
+    colors: Colors$1<string>;
+    typo: LegacyTypo;
+    misc: LegacyMisc;
+    shadows?: Shadows;
+}
+/**
+ * Builds legacy `base` seed colors from Pentagram colors.
+ * See Variables mapping table → base.* section.
+ */
+declare function buildBaseColorsFromPentagram(colors: HandCraftedPentagramColors): BaseColors<string>;
+/**
+ * Maps full themeContentPentagram to legacy themeContent.
+ * Resolves typo/shape aliases to absolute values before mapping.
+ */
+declare function mapPentagramThemeToLegacy(pentagram: PentagramThemeContent, viewport?: Viewport): LegacyThemeContent;
+
+var heading = {
+	h1: {
+		fontSize: "450",
+		lineHeight: "display/450",
+		fontWeight: 700
+	},
+	h2: {
+		fontSize: "350",
+		lineHeight: "display/350",
+		fontWeight: 700
+	},
+	h3: {
+		fontSize: "300",
+		lineHeight: "display/300",
+		fontWeight: 700
+	},
+	h4: {
+		fontSize: "250",
+		lineHeight: "display/250",
+		fontWeight: 700
+	},
+	h5: {
+		fontSize: "200",
+		lineHeight: "display/200",
+		fontWeight: 700
+	}
+};
+var basic = {
+	display: {
+		fontFamily: "compact",
+		fontSize: "300",
+		lineHeight: "compact/300",
+		fontWeight: 500
+	},
+	bodyLg: {
+		fontSize: "175",
+		lineHeight: "compact/175",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/250",
+			lineHeight: "text/175"
+		}
+	},
+	bodyMd: {
+		fontSize: "150",
+		lineHeight: "compact/150",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/200",
+			lineHeight: "text/150"
+		}
+	},
+	bodySm: {
+		fontSize: "125",
+		lineHeight: "compact/125",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/150",
+			lineHeight: "text/125"
+		}
+	},
+	bodyXs: {
+		fontSize: "100",
+		lineHeight: "compact/100",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/100",
+			lineHeight: "text/100"
+		}
+	},
+	bodyXxs: {
+		fontSize: "75",
+		lineHeight: "compact/75",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/75",
+			lineHeight: "text/75"
+		}
+	}
+};
+var control = {
+	button: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	input: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	checkbox: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		}
+	},
+	tab: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "300"
+		}
+	},
+	radio: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		}
+	},
+	segmentedItem: {
+		xl: {
+			scale: "500"
+		},
+		lg: {
+			scale: "400"
+		},
+		md: {
+			scale: "300"
+		},
+		sm: {
+			scale: "200"
+		}
+	},
+	tag: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	toggleButton: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	}
+};
+var typoPrimitives = {
+	heading: heading,
+	basic: basic,
+	control: control
+};
+
+var button = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var checkbox = {
+	xl: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var input = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var cell = {
+	borderRadius: "radius/100",
+	borderWidth: "stroke/1"
+};
+var modal = {
+	borderRadius: "radius/100"
+};
+var toast = {
+	borderRadius: "radius/50",
+	borderWidth: "0px"
+};
+var segmentedItem = {
+	xl: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/25",
+		borderWeight: "stroke/1"
+	}
+};
+var segmented = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWeight: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWeight: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/100",
+		borderWeight: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	}
+};
+var knob = {
+	xl: {
+		borderRadius: "radius/25"
+	},
+	lg: {
+		borderRadius: "radius/25"
+	},
+	md: {
+		borderRadius: "radius/25"
+	},
+	sm: {
+		borderRadius: "radius/25"
+	}
+};
+var tabItem = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/50"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var tag = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var tagLabel = {
+	borderRadius: "0px"
+};
+var tooltip = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/100"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var radio = {
+	xl: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	}
+};
+var contextMenu = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/100"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var avatar = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/2"
+	},
+	lg: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/2"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/2"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/2"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/2"
+	},
+	xxs: {
+		borderRadius: "radius/25",
+		borderWidth: "stroke/2"
+	}
+};
+var toggleButtonGroup = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var shapePrimitives = {
+	button: button,
+	checkbox: checkbox,
+	input: input,
+	cell: cell,
+	modal: modal,
+	toast: toast,
+	segmentedItem: segmentedItem,
+	segmented: segmented,
+	"switch": {
+	xl: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWeight: "stroke/1"
+	}
+},
+	knob: knob,
+	tabItem: tabItem,
+	tag: tag,
+	tagLabel: tagLabel,
+	tooltip: tooltip,
+	radio: radio,
+	contextMenu: contextMenu,
+	avatar: avatar,
+	toggleButtonGroup: toggleButtonGroup
+};
+
+type TypoPrimitives = typeof typoPrimitives;
+type ShapePrimitives = typeof shapePrimitives;
+
+export { type BaseColors, type BaseColorsIndex, type ColorValue, type Colors$1 as Colors, type ComponentBaseColors$1 as ComponentBaseColors, DELETED_LEGACY_TYPO_VARS, type HandCraftedPentagramColors, type LegacyMisc, type LegacyThemeContent, type LegacyTypo, type Misc, type PentagramBaseColors, PentagramResolver, type PentagramShape, type PentagramThemeContent, type PentagramTypo, type PresetName, type Shadows, type ShapePrimitives, type Size, type Theme, type ThemeFunctionType, type ThemeScheme, type ThemeVariant, type TypoPrimitives, type Typography, type TypographyStyle, type Viewport, base, baseDark, buildBaseColorsFromPentagram, createDarkScheme, createResolver, createScheme, emails, emailsDark, emailsThemes, flattenPentagramShapeToVars, generateWithScheme, mapHandCraftedPentagramToLegacy, mapPentagramShapeToLegacy, mapPentagramThemeToLegacy, mapPentagramTypoToLegacy, palettes, payStationDarkScheme, payStationScheme, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4PentagramDark, paystation4PentagramLight, paystation4Take2, paystation4Themes, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, resolveForDesktop, resolveForMobile, shapePrimitives, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme, typoPrimitives };