import { useBreakpoints } from "./breakpoints.js";
import { colors, darkGradient, hcNeutralFromBg, isColorKey } from "./colors.js";
import { buttonsThemeBase, defaultButtonsTheme } from "./themeDefaults/buttons.js";
import { cardFormThemeBase, defaultCardFormTheme } from "./themeDefaults/cardForm.js";
import { defaultLoadingTheme, loadingThemeBase } from "./themeDefaults/loading.js";
import { getTypography } from "./tokens/typography.js";
import { css, useTheme } from "@emotion/react";
import merge from "deepmerge";
//#region src/styles/themes.tsx
let Themes = /* @__PURE__ */ function(Themes) {
	Themes["Light"] = "light";
	Themes["Dark"] = "dark";
	Themes["LightsparkDocsLight"] = "lightsparkDocsLight";
	Themes["LightsparkDocsDark"] = "lightsparkDocsDark";
	Themes["UmaAuthSdkLight"] = "umaAuthSdkLight";
	Themes["UmaAuthSdkDark"] = "umaAuthSdkDark";
	Themes["UmameDocsLight"] = "umameDocsLight";
	Themes["UmameDocsDark"] = "umameDocsDark";
	Themes["BridgeLight"] = "bridgeLight";
	Themes["BridgeDark"] = "bridgeDark";
	Themes["NageLight"] = "nageLight";
	Themes["NageDark"] = "nageDark";
	Themes["Hardcore"] = "hardcore";
	return Themes;
}({});
function isTheme(theme) {
	return Object.values(Themes).includes(theme);
}
const baseThemeColors = {
	bg: colors.white,
	smBg: colors.white,
	c02Neutral: colors.gray98,
	c02NeutralLight: "#F9F9F91A",
	c05Neutral: colors.gray95,
	c1Neutral: colors.gray90,
	c15Neutral: colors.gray85,
	c2Neutral: colors.gray80,
	c25Neutral: colors.gray75,
	c3Neutral: colors.gray70,
	c4Neutral: colors.gray60,
	c5Neutral: colors.gray50,
	c6Neutral: colors.gray40,
	c7Neutral: colors.gray30,
	c8Neutral: colors.gray20,
	c9Neutral: colors.gray10,
	danger: colors.danger,
	hcNeutral: colors.black,
	info: colors.blue43,
	lcNeutral: colors.gray80,
	link: colors.blue43,
	linkLight: "#0068C90F",
	mcNeutral: colors.gray40,
	onInfoText: colors.white,
	onPrimaryText: colors.black,
	onSuccessText: colors.white,
	primary: colors.primary,
	secondary: colors.secondary,
	tertiary: colors.black,
	success: colors.success,
	text: colors.black,
	vlcNeutral: colors.gray95,
	warning: colors.warning,
	errorBackground: colors.errorBackground,
	errorText: colors.errorText,
	transparent: colors.transparent,
	border: colors["black-10"]
};
const themeOrColorKeyValues = [...Object.keys(baseThemeColors), ...Object.keys(colors)];
const lightBaseTheme = {
	...baseThemeColors,
	type: "light",
	typography: getTypography("Lightspark"),
	hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
	buttons: defaultButtonsTheme,
	loading: defaultLoadingTheme,
	cardForm: defaultCardFormTheme,
	badge: { bg: "c05Neutral" },
	inputBackground: colors.white
};
const darkBaseTheme = {
	type: "dark",
	bg: colors.black,
	smBg: colors.black,
	c02Neutral: colors.gray98,
	c02NeutralLight: "#F9F9F91A",
	c05Neutral: colors.gray5,
	c1Neutral: colors.gray10,
	c15Neutral: colors.gray15,
	c2Neutral: colors.gray20,
	c25Neutral: colors.gray25,
	c3Neutral: colors.gray30,
	c4Neutral: colors.gray40,
	c5Neutral: colors.gray50,
	c6Neutral: colors.gray60,
	c7Neutral: colors.gray70,
	c8Neutral: colors.gray80,
	c9Neutral: colors.gray90,
	danger: colors.danger,
	hcNeutral: colors.white,
	hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.white, colors.black),
	info: colors.white,
	lcNeutral: colors.gray40,
	link: colors.blue43,
	linkLight: "#0068C90F",
	mcNeutral: colors.gray60,
	onInfoText: colors.white,
	onPrimaryText: colors.black,
	onSuccessText: colors.white,
	primary: colors.primary,
	secondary: colors.secondary,
	tertiary: colors.white,
	success: colors.success,
	text: colors.white,
	typography: getTypography("Lightspark"),
	vlcNeutral: colors.gray20,
	warning: colors.warning,
	errorBackground: colors.errorBackground,
	errorText: colors.errorText,
	transparent: colors.transparent,
	border: colors["black-10"],
	buttons: defaultButtonsTheme,
	loading: defaultLoadingTheme,
	cardForm: defaultCardFormTheme,
	inputBackground: colors.black,
	badge: { bg: "c15Neutral" }
};
const lightTheme = extend(lightBaseTheme, {
	header: extendBase(lightBaseTheme, { text: colors.gray60 }),
	nav: extendBase(lightBaseTheme, {
		text: colors.gray10,
		secondary: colors.gray40
	}),
	content: extendBase(lightBaseTheme, {
		bg: colors.white,
		smBg: colors.white
	}),
	controls: extendBase(lightBaseTheme, {
		bg: colors.gray95,
		smBg: colors.gray95,
		text: colors.gray60,
		secondary: colors.secondary
	})
});
const darkTheme = extend(darkBaseTheme, {
	header: extendBase(darkBaseTheme, {}),
	nav: extendBase(darkBaseTheme, {}),
	content: extendBase(darkBaseTheme, {}),
	controls: extendBase(darkBaseTheme, {
		bg: colors.gray40,
		smBg: colors.gray40,
		text: colors.white,
		secondary: colors.secondary
	}),
	buttons: merge(defaultButtonsTheme, { kinds: { secondary: { defaultBorderColor: "gray15" } } })
});
const umaAuthSdkLightTheme = extend(lightTheme, {
	type: "umaAuthSdkLight",
	bg: colors.gray98,
	smBg: colors.gray98,
	secondary: colors.grayBlue43,
	tertiary: colors.grayBlue9,
	warning: "#F7E3E3",
	danger: "#E31A1A",
	text: colors.grayBlue9,
	link: colors.blue39,
	linkLight: "#0068C90F",
	inputBackground: colors.white,
	typography: getTypography("UmaAuthSdk", {
		main: "Manrope",
		code: "Monaco"
	}),
	content: extendBase(lightBaseTheme, {
		bg: colors.gray98,
		smBg: colors.gray98,
		text: colors.grayBlue9,
		secondary: colors.grayBlue43
	}),
	controls: extendBase(lightBaseTheme, {
		text: colors.grayBlue9,
		secondary: colors.grayBlue43,
		bg: colors.grayBlue94
	}),
	buttons: merge(buttonsThemeBase, {
		defaultTypographyType: "Title",
		defaultSize: "Medium",
		defaultBorderRadius: 999,
		defaultPaddingsY: {
			ExtraSmall: {
				short: 14,
				regular: 16
			},
			Small: {
				short: 14,
				regular: 16
			},
			Schmedium: {
				short: 14,
				regular: 16
			},
			Medium: {
				short: 14,
				regular: 16
			},
			Mlarge: {
				short: 14,
				regular: 16
			},
			Large: {
				short: 14,
				regular: 16
			}
		},
		kinds: {
			primary: {
				defaultColor: "bg",
				defaultBorderColor: "blue39",
				defaultBackgroundColor: "blue39",
				defaultHoverBackgroundColor: "blue37",
				defaultHoverBorderColor: "blue37",
				defaultActiveBackgroundColor: "blue22",
				defaultActiveBorderColor: "blue22"
			},
			ghost: {
				defaultColor: "secondary",
				defaultBackgroundColor: "transparent",
				defaultHoverBackgroundColor: "transparent",
				defaultHoverBorderColor: "transparent",
				defaultPaddingsY: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				},
				defaultPaddingsX: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				}
			},
			secondary: {
				defaultBackgroundColor: "grayBlue94",
				defaultBorderColor: "grayBlue94",
				defaultHoverBackgroundColor: "grayBlue88",
				defaultHoverBorderColor: "grayBlue88",
				defaultActiveBackgroundColor: "grayBlue69",
				defaultActiveBorderColor: "grayBlue69"
			},
			quaternary: {
				defaultBackgroundColor: "transparent",
				defaultBorderColor: "grayBlue80",
				defaultHoverBackgroundColor: "grayBlue94",
				defaultHoverBorderColor: "grayBlue80",
				defaultActiveBackgroundColor: "grayBlue88",
				defaultActiveBorderColor: "grayBlue80"
			},
			tertiary: {
				defaultColor: "bg",
				defaultBackgroundColor: "grayBlue9",
				defaultHoverBackgroundColor: "grayBlue12",
				defaultActiveBackgroundColor: "grayBlue14"
			},
			transparent: {
				defaultBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "transparenta02",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "transparenta08",
				defaultActiveBorderColor: "transparent"
			},
			linkLight: {
				defaultColor: "link",
				defaultBackgroundColor: "linkLight",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "grayBlue93",
				defaultHoverBorderColor: "grayBlue93",
				defaultActiveBackgroundColor: "grayBlue92",
				defaultActiveBorderColor: "grayBlue92"
			},
			warning: {
				defaultColor: "danger",
				defaultBackgroundColor: "red42a10",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "red42a20",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "red42a30",
				defaultActiveBorderColor: "transparent"
			},
			danger: { defaultColor: "white" }
		}
	})
});
const umaAuthSdkDarkTheme = extend(darkTheme, {
	type: "umaAuthSdkDark",
	bg: colors.gray5,
	smBg: colors.gray5,
	secondary: colors.grayBlue57,
	tertiary: colors.gray98,
	text: colors.gray98,
	link: colors.blue39,
	inputBackground: colors.gray5,
	typography: getTypography("UmaAuthSdk", {
		main: "Manrope",
		code: "Monaco"
	}),
	content: extendBase(lightBaseTheme, {
		bg: colors.gray5,
		smBg: colors.gray5,
		text: colors.grayBlue94,
		secondary: colors.grayBlue43
	}),
	controls: extendBase(lightBaseTheme, {
		text: colors.grayBlue94,
		secondary: colors.grayBlue43,
		bg: colors.grayBlue9
	}),
	buttons: merge(buttonsThemeBase, {
		defaultTypographyType: "Title",
		defaultSize: "Medium",
		defaultBorderRadius: 999,
		defaultPaddingsY: {
			ExtraSmall: {
				short: 14,
				regular: 16
			},
			Small: {
				short: 14,
				regular: 16
			},
			Schmedium: {
				short: 14,
				regular: 16
			},
			Medium: {
				short: 14,
				regular: 16
			},
			Mlarge: {
				short: 14,
				regular: 16
			},
			Large: {
				short: 14,
				regular: 16
			}
		},
		kinds: {
			primary: {
				defaultColor: "bg",
				defaultBackgroundColor: "blue39",
				defaultHoverBackgroundColor: "blue37"
			},
			ghost: {
				defaultColor: "secondary",
				defaultBackgroundColor: "transparent",
				defaultHoverBackgroundColor: "transparent",
				defaultHoverBorderColor: "transparent",
				defaultPaddingsY: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				},
				defaultPaddingsX: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				}
			},
			secondary: {
				defaultBackgroundColor: "grayBlue80",
				defaultHoverBackgroundColor: "grayBlue94",
				defaultBorderColor: "grayBlue80"
			},
			tertiary: {
				defaultColor: "bg",
				defaultHoverBackgroundColor: "grayBlue80"
			},
			transparent: {
				defaultBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "transparenta02",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "transparenta08",
				defaultActiveBorderColor: "transparent"
			},
			linkLight: {
				defaultColor: "link",
				defaultBackgroundColor: "linkLight",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "linkLight",
				defaultHoverBorderColor: "transparent"
			},
			warning: {
				defaultColor: "danger",
				defaultBackgroundColor: "warning",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "warning",
				defaultHoverBorderColor: "transparent"
			}
		}
	})
});
const umameDocsLightTheme = extend(lightTheme, {
	type: "umameDocsLight",
	bg: colors.gray98,
	smBg: colors.gray98,
	secondary: colors.grayBlue43,
	text: colors.grayBlue9,
	link: colors.blue39,
	inputBackground: colors.white,
	typography: getTypography("UmameDocs", {
		main: "Manrope",
		code: "Monaco"
	}),
	content: extendBase(lightBaseTheme, {
		bg: colors.gray98,
		smBg: colors.gray98,
		text: colors.grayBlue9,
		secondary: colors.grayBlue43
	}),
	controls: extendBase(lightBaseTheme, {
		text: colors.grayBlue9,
		secondary: colors.grayBlue43,
		bg: colors.grayBlue94
	})
});
const umameDocsDarkTheme = extend(darkTheme, {
	type: "umameDocsDark",
	bg: colors.gray98,
	smBg: colors.gray98,
	secondary: colors.grayBlue43,
	text: colors.grayBlue9,
	link: colors.blue39,
	typography: getTypography("UmameDocs", {
		main: "Manrope",
		code: "Monaco"
	})
});
const lightsparkDocsLightTheme = extend(lightTheme, {
	type: "lightsparkDocsLight",
	typography: getTypography("LightsparkDocs")
});
const lightsparkDocsDarkTheme = extend(darkTheme, {
	type: "lightsparkDocsDark",
	typography: getTypography("LightsparkDocs")
});
const bridgeBaseSettings = {
	secondary: colors.grayBlue43,
	mcNeutral: colors.grayBlue43,
	success: colors.green37,
	link: colors.blue39,
	linkLight: colors.blue10,
	typography: getTypography("Bridge", {
		main: "Manrope",
		code: "Roboto Mono"
	}),
	buttons: merge(buttonsThemeBase, {
		defaultTypographyType: "Title",
		defaultSize: "Medium",
		defaultBorderRadius: 999,
		defaultPaddingsY: {
			ExtraSmall: 10,
			Small: 10,
			Schmedium: 13,
			Medium: 13,
			Mlarge: 13,
			Large: 13
		},
		defaultPaddingsX: {
			ExtraSmall: 16,
			Small: 16,
			Schmedium: 24,
			Medium: 24,
			Mlarge: 24,
			Large: 24
		},
		kinds: {
			primary: {
				defaultColor: "bg",
				defaultBackgroundColor: "blue39",
				defaultBorderColor: "blue39",
				defaultHoverBackgroundColor: "blue37",
				defaultHoverBorderColor: "blue37",
				defaultActiveBackgroundColor: "blue22",
				defaultActiveBorderColor: "blue22"
			},
			ghost: {
				defaultColor: "secondary",
				defaultBackgroundColor: "transparent",
				defaultHoverBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "transparent",
				defaultPaddingsY: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				},
				defaultPaddingsX: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				}
			},
			secondary: {
				defaultBackgroundColor: "gray99",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "grayBlue94",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "grayBlue88",
				defaultActiveBorderColor: "transparent"
			},
			tertiary: {
				defaultColor: "gray99",
				defaultBackgroundColor: "gray99",
				defaultBorderColor: "gray99",
				defaultHoverBackgroundColor: "gray98",
				defaultHoverBorderColor: "gray98",
				defaultActiveBackgroundColor: "gray",
				defaultActiveBorderColor: "gray"
			},
			transparent: {
				defaultColor: "secondary",
				defaultBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "transparenta02",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "transparenta08",
				defaultActiveBorderColor: "transparent"
			},
			gray: {
				defaultColor: "gray",
				defaultBackgroundColor: "gray",
				defaultBorderColor: "gray",
				defaultHoverBackgroundColor: "grayhover",
				defaultHoverBorderColor: "grayhover",
				defaultActiveBackgroundColor: "grayactive",
				defaultActiveBorderColor: "grayactive"
			},
			grayGradient: {
				defaultColor: "gray98",
				defaultBackgroundColor: "gray98",
				defaultBorderColor: "gray98",
				defaultHoverBackgroundColor: "gray98",
				defaultHoverBorderColor: "gray98"
			},
			linkLight: {
				defaultColor: "link",
				defaultBackgroundColor: "linkLight",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "linkLight",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "linkLight",
				defaultActiveBorderColor: "transparent"
			},
			locked: {
				defaultColor: "gray75",
				defaultBackgroundColor: "gray75",
				defaultBorderColor: "gray75",
				defaultHoverBackgroundColor: "gray75hover",
				defaultHoverBorderColor: "gray75hover",
				defaultActiveBackgroundColor: "gray75active",
				defaultActiveBorderColor: "gray75active"
			},
			warningLight: {
				defaultColor: "errorText",
				defaultBackgroundColor: "errorBackground",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "errorBackground",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "errorBackground",
				defaultActiveBorderColor: "transparent"
			}
		}
	}),
	loading: merge(loadingThemeBase, {
		defaultIconName: "UmaBridgeLoading",
		kinds: {
			primary: { defaultIconName: "UmaBridgeLoading" },
			secondary: { defaultIconName: "UmaBridgeLoadingTransparent" }
		}
	}),
	cardForm: merge(cardFormThemeBase, {
		backgroundColor: "white",
		smBackgroundColor: "bg",
		borderRadius: 32,
		contentMarginTop: 0,
		defaultDescriptionTypographyMap: {
			default: {
				type: "Body",
				size: "Medium",
				color: "secondary"
			},
			link: {
				type: "Body",
				size: "Medium",
				color: "text"
			}
		},
		kinds: {
			primary: {
				borderWidth: 1,
				smBorderWidth: 0,
				borderColor: "gray3",
				paddingTop: 24,
				paddingBottom: 64,
				paddingX: 40,
				shadow: "none"
			},
			secondary: {
				borderWidth: 1,
				smBorderWidth: 0,
				borderColor: "gray3",
				paddingTop: 32,
				paddingBottom: 64,
				paddingX: 32,
				shadow: "none"
			}
		}
	}),
	badge: { bg: "grayBlue94" }
};
const bridgeLightTheme = extend(lightTheme, {
	...bridgeBaseSettings,
	type: "bridgeLight",
	bg: colors.gray98,
	smBg: colors.gray98,
	text: colors.grayBlue9,
	secondary: colors.gray2,
	tertiary: colors.gray6,
	inputBackground: colors.white,
	danger: colors.red50
});
const bridgeDarkTheme = extend(darkTheme, {
	...bridgeBaseSettings,
	type: "bridgeDark"
});
const nageTypography = getTypography("Nage", {
	main: "SuisseIntl",
	code: "SuisseIntl-Mono"
});
const nageBaseSettings = {
	secondary: colors["gray-500"],
	tertiary: colors.gray6,
	mcNeutral: colors.grayBlue43,
	success: colors.green37,
	typography: nageTypography,
	controls: extendBase(lightBaseTheme, { border: colors["black-10"] }),
	buttons: merge(buttonsThemeBase, {
		defaultTypographyType: "Btn",
		defaultSize: "Medium",
		defaultBorderRadius: 8,
		defaultGap: 16,
		defaultPaddingsY: {
			ExtraSmall: 6,
			Small: 6,
			Schmedium: 8,
			Medium: 8,
			Mlarge: 10,
			Large: 10
		},
		defaultPaddingsX: {
			ExtraSmall: 8,
			Small: 8,
			Schmedium: 12,
			Medium: 12,
			Mlarge: 12,
			Large: 12
		},
		kinds: {
			primary: {
				defaultColor: "white",
				defaultBackgroundColor: "gray-950",
				defaultBorderColor: "gray-050",
				defaultHoverBackgroundColor: "gray-950",
				defaultHoverBorderColor: "gray-050",
				defaultActiveBackgroundColor: "gray-950",
				defaultActiveBorderColor: "gray-050"
			},
			ghost: {
				defaultColor: "secondary",
				defaultBackgroundColor: "transparent",
				defaultHoverBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "transparent",
				defaultActiveBorderColor: "transparent",
				defaultPaddingsY: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				},
				defaultPaddingsX: {
					ExtraSmall: 0,
					Small: 0,
					Schmedium: 0,
					Medium: 0,
					Mlarge: 0,
					Large: 0
				}
			},
			secondary: {
				defaultBackgroundColor: "gray-050",
				defaultBorderColor: "gray-210",
				defaultHoverBackgroundColor: "gray-090",
				defaultHoverBorderColor: "gray-250",
				defaultActiveBackgroundColor: "gray-210",
				defaultActiveBorderColor: "gray-275"
			},
			warning: {
				defaultColor: "warningText2",
				defaultBackgroundColor: "warningBackground2",
				defaultBorderColor: "warningBackground2",
				defaultHoverBackgroundColor: "warningBackgroundHover",
				defaultHoverBorderColor: "warningBackgroundHover",
				defaultActiveBackgroundColor: "warningBackgroundActive",
				defaultActiveBorderColor: "warningBackgroundActive"
			},
			transparent: {
				defaultBackgroundColor: "transparent",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "black-04",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "black-10",
				defaultActiveBorderColor: "transparent"
			},
			danger: {
				defaultColor: "gray-050",
				defaultBackgroundColor: "errorText",
				defaultBorderColor: "transparent",
				defaultHoverBackgroundColor: "errorText2",
				defaultHoverBorderColor: "transparent",
				defaultActiveBackgroundColor: "errorText3",
				defaultActiveBorderColor: "transparent"
			}
		}
	}),
	loading: merge(loadingThemeBase, {
		defaultIconName: "CentralLoadingCircle",
		kinds: {
			primary: { defaultIconName: "CentralLoadingCircle" },
			secondary: { defaultIconName: "CentralLoadingCircle" }
		}
	})
};
const nageLightTheme = extend(lightTheme, {
	...nageBaseSettings,
	type: "nageLight",
	bg: colors["gray-100"],
	smBg: colors["gray-100"],
	text: colors["gray-950"],
	info: colors["gray-950"],
	secondary: colors["gray-500"],
	tertiary: colors.gray6,
	inputBackground: colors["gray-050"],
	danger: colors.red50,
	content: extendBase(lightBaseTheme, {
		bg: colors.white,
		smBg: colors.white,
		typography: nageTypography,
		buttons: nageBaseSettings.buttons,
		loading: nageBaseSettings.loading
	})
});
const nageDarkTheme = extend(darkTheme, {
	...nageBaseSettings,
	type: "nageDark",
	content: extendBase(darkBaseTheme, {
		typography: nageTypography,
		buttons: nageBaseSettings.buttons,
		loading: nageBaseSettings.loading
	})
});
const hardcoreButtons = merge(buttonsThemeBase, {
	defaultTypographyType: "Title",
	defaultSize: "Medium",
	defaultBorderRadius: 0,
	kinds: {
		primary: {
			defaultColor: "black",
			defaultBackgroundColor: "radioactiveGreen",
			defaultBorderColor: "radioactiveGreen",
			defaultHoverBackgroundColor: "radioactiveGreenLight",
			defaultHoverBorderColor: "radioactiveGreenLight",
			defaultActiveBackgroundColor: "radioactiveGreenDark",
			defaultActiveBorderColor: "radioactiveGreenDark"
		},
		secondary: {
			defaultColor: "radioactiveGreen",
			defaultBackgroundColor: "transparent",
			defaultBorderColor: "radioactiveGreen",
			defaultHoverBackgroundColor: "radioactiveGreen10",
			defaultHoverBorderColor: "radioactiveGreenLight",
			defaultActiveBackgroundColor: "radioactiveGreen20",
			defaultActiveBorderColor: "radioactiveGreenDark"
		},
		tertiary: {
			defaultColor: "radioactiveGreen",
			defaultBackgroundColor: "gray10",
			defaultBorderColor: "radioactiveGreen",
			defaultHoverBackgroundColor: "gray15",
			defaultHoverBorderColor: "radioactiveGreenLight",
			defaultActiveBackgroundColor: "gray20",
			defaultActiveBorderColor: "radioactiveGreenDark"
		},
		ghost: {
			defaultColor: "radioactiveGreen",
			defaultBackgroundColor: "transparent",
			defaultBorderColor: "radioactiveGreen",
			defaultHoverBackgroundColor: "radioactiveGreen10",
			defaultHoverBorderColor: "radioactiveGreenLight"
		},
		danger: {
			defaultColor: "black",
			defaultBackgroundColor: "danger",
			defaultBorderColor: "danger",
			defaultHoverBackgroundColor: "red50",
			defaultHoverBorderColor: "red50"
		}
	}
});
const hardcoreBaseTheme = {
	...nageDarkTheme,
	type: "hardcore",
	bg: colors.black,
	smBg: colors.black,
	text: colors.radioactiveGreen,
	hcNeutral: colors.radioactiveGreen,
	mcNeutral: colors.radioactiveGreenDark,
	lcNeutral: colors.radioactiveGreenDarker,
	vlcNeutral: colors.gray15,
	secondary: colors.radioactiveGreenDark,
	tertiary: colors.radioactiveGreen,
	primary: colors.radioactiveGreen,
	link: colors.radioactiveGreenLight,
	linkLight: colors.radioactiveGreen10,
	success: colors.radioactiveGreen,
	info: colors.radioactiveGreen,
	c05Neutral: colors.radioactiveGreenDarker,
	c1Neutral: colors.radioactiveGreenDarker,
	c15Neutral: colors.radioactiveGreenDark,
	c2Neutral: colors.radioactiveGreenDark,
	c3Neutral: colors.radioactiveGreen,
	c4Neutral: colors.radioactiveGreenLight,
	border: colors.radioactiveGreen30,
	inputBackground: colors.black,
	typography: getTypography("Hardcore", {
		main: "Roboto Mono",
		code: "Roboto Mono"
	}),
	buttons: hardcoreButtons,
	badge: { bg: "c15Neutral" }
};
const hardcoreTheme = extend(hardcoreBaseTheme, {
	header: extendBase(hardcoreBaseTheme, {}),
	nav: extendBase(hardcoreBaseTheme, {}),
	content: extendBase(hardcoreBaseTheme, {}),
	controls: extendBase(hardcoreBaseTheme, {
		bg: colors.gray10,
		smBg: colors.gray10
	})
});
const themes = {
	["light"]: lightTheme,
	["dark"]: darkTheme,
	["lightsparkDocsLight"]: lightsparkDocsLightTheme,
	["lightsparkDocsDark"]: lightsparkDocsDarkTheme,
	["umaAuthSdkLight"]: umaAuthSdkLightTheme,
	["umaAuthSdkDark"]: umaAuthSdkDarkTheme,
	["umameDocsLight"]: umameDocsLightTheme,
	["umameDocsDark"]: umameDocsDarkTheme,
	["bridgeLight"]: bridgeLightTheme,
	["bridgeDark"]: bridgeDarkTheme,
	["nageLight"]: nageLightTheme,
	["nageDark"]: nageDarkTheme,
	["hardcore"]: hardcoreTheme
};
function extend(obj, rest) {
	return {
		...obj,
		...rest
	};
}
function extendBase(obj, rest) {
	return {
		...obj,
		...rest
	};
}
function setFonts(theme, fontFamilies) {
	return {
		...theme,
		typography: getTypography(theme.typography.group, fontFamilies)
	};
}
function isThemeColorKey(key) {
	return Boolean(key && typeof key === "string" && key in baseThemeColors);
}
function isThemeOrColorKey(key) {
	return Boolean(typeof key === "string" && (isThemeColorKey(key) || isColorKey(key) || Array.isArray(key) && key.length === 2 && isThemeColorKey(key[1])));
}
function getColor(theme, key) {
	if (key && isThemeColorKey(key)) return theme[key];
	else if (key && Array.isArray(key)) {
		const [surface, colorKey] = key;
		return theme[surface][colorKey];
	} else if (key && isColorKey(key)) return colors[key];
	return theme.text;
}
function getFontColor(theme, key, defaultColor = "inherit") {
	if (key === "inherit" || !key && defaultColor === "inherit") return "inherit";
	return getColor(theme, key);
}
function isBackgroundColorKey(key) {
	return key === "transparent" || isThemeOrColorKey(key);
}
function isBackgroundColorKeyTuple(key) {
	return Array.isArray(key) && key.length === 2 && isBackgroundColorKey(key[0]) && isBackgroundColorKey(key[1]);
}
function getBackgroundColor(theme, key, defaultColor = "transparent") {
	if (isBackgroundColorKeyTuple(key)) key = isLight(theme) ? key[0] : key[1];
	if (isBackgroundColorKeyTuple(defaultColor)) defaultColor = isLight(theme) ? defaultColor[0] : defaultColor[1];
	if (key === "transparent") return "transparent";
	else if (!key) {
		if (defaultColor === "transparent") return "transparent";
		return getColor(theme, defaultColor);
	}
	return getColor(theme, key);
}
const isDark = (theme) => [
	"dark",
	"bridgeDark",
	"nageDark",
	"lightsparkDocsDark",
	"umameDocsDark",
	"umaAuthSdkDark",
	"hardcore"
].includes(theme.type);
const isLight = (theme) => [
	"light",
	"bridgeLight",
	"nageLight",
	"lightsparkDocsLight",
	"umameDocsLight",
	"umaAuthSdkLight"
].includes(theme.type);
const isBridge = (theme) => ["bridgeLight", "bridgeDark"].includes(theme.type);
const isNage = (theme) => ["nageLight", "nageDark"].includes(theme.type);
const themeOr = (lightValue, darkValue) => ({ theme }) => {
	return isLight(theme) ? lightValue : darkValue;
};
const themeOrWithKey = (lightValue, darkValue) => ({ theme }) => {
	if (isLight(theme)) return getColor(theme, lightValue);
	return getColor(theme, darkValue);
};
function ifLight(style) {
	return function({ theme }) {
		if (theme.type === "light") return css`
        ${style}
      `;
		return "";
	};
}
function ifDark(style) {
	return function({ theme }) {
		if (theme.type === "dark") return css`
        ${style}
      `;
		return "";
	};
}
function useThemeBg() {
	const theme = useTheme();
	const isSm = useBreakpoints().current("sm");
	if (isDark(theme)) return darkGradient;
	return isSm ? theme.smBg : theme.bg;
}
//#endregion
export { Themes, getBackgroundColor, getColor, getFontColor, ifDark, ifLight, isBackgroundColorKey, isBackgroundColorKeyTuple, isBridge, isDark, isLight, isNage, isTheme, isThemeColorKey, isThemeOrColorKey, setFonts, themeOr, themeOrColorKeyValues, themeOrWithKey, themes, useThemeBg };
