@uni-design-system/uni-core 2.0.2 → 2.0.4

package/dist/cjs/index.cjs

@@ -1,459 +1,55 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/concepts/theme/themes/base.theme.ts
-var palette = {
-	primary: "#0070b9",
-	secondary: "#00b034",
-	tertiary: "#ff9f00",
-	quaternary: "#4d4d4d",
-	warn: "#ff3300",
-	success: "#00b034",
-	light: "#b3b3b3",
-	onLight: "#4d4d4d",
-	onLightVariant: "rgba(0,0,0,0.4)",
-	dark: "#4d4d4d",
-	onDark: "rgba(255,255,255,0.8)",
-	background: "#fff",
-	disabled: "rgba(0,0,0,0.12)",
-	onDisabled: "rgba(0,0,0,0.5)"
+//#region src/concepts/animation/keyframes.constants.ts
+var fadeIn = {
+	"0%": { opacity: 0 },
+	"100%": { opacity: 1 }
 };
-var BaseButton = {
-	borderRadius: 100,
-	color: "primary-container",
-	contentColor: "on-primary-container",
-	verticalPadding: {
-		xxs: 2,
-		xs: 5,
-		sm: 8,
-		md: 12,
-		lg: 16,
-		xl: 20,
-		xxl: 24
+var fadeOut = {
+	"0%": { opacity: 1 },
+	"100%": { opacity: 0 }
+};
+var expandFadeIn = {
+	"0%": {
+		gridTemplateRows: "0fr",
+		opacity: 0
 	},
-	horizontalPadding: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 18,
-		lg: 24,
-		xl: 30,
-		xxl: 36
+	"100%": {
+		gridTemplateRows: "1fr",
+		opacity: 1
 	}
 };
-var BaseContainer = {
-	color: "primary-container",
-	contentColor: "on-primary-container",
-	borderRadii: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 16,
-		lg: 20,
-		xl: 24,
-		xxl: 28
-	},
-	horizontalPadding: {
-		xxs: 6,
-		xs: 12,
-		sm: 18,
-		md: 24,
-		lg: 30,
-		xl: 36,
-		xxl: 42
+var collapseFadeOut = {
+	"0%": {
+		gridTemplateRows: "1fr",
+		opacity: 1
 	},
-	contentSpacing: {
-		xxs: 4,
-		xs: 8,
-		sm: 12,
-		md: 16,
-		lg: 20,
-		xl: 24,
-		xxl: 28
+	"100%": {
+		gridTemplateRows: "0fr",
+		opacity: 0
 	}
 };
-var BaseTheme = {
-	id: "BaseTheme",
-	name: "Base Theme",
-	colors: {
-		primary: "#6750A4",
-		"on-primary": "#FFFFFF",
-		"primary-container": "#EADDFF",
-		"on-primary-container": "#21005E",
-		secondary: "#625B71",
-		"on-secondary": "#FFFFFF",
-		"secondary-container": "#E8DEF8",
-		"on-secondary-container": "#1E192B",
-		tertiary: "#7D5260",
-		"on-tertiary": "#FFFFFF",
-		"tertiary-container": "#FFD8E4",
-		"on-tertiary-container": "#370B1E",
-		error: "#B3261E",
-		"on-error": "#FFFFFF",
-		"error-container": "#F9DEDC",
-		"on-error-container": "#370B1E",
-		background: "#FFFBFE",
-		"on-background": "#1C1B1F",
-		surface: "#FFFBFE",
-		"on-surface": "#1C1B1F",
-		"surface-variant": "#E7E0EC",
-		"on-surface-variant": "#49454E",
-		outline: "#79747E",
-		shadow: "#000000",
-		"surface-tint": "#6750A4",
-		"inverse-surface": "#313033",
-		"on-inverse-surface": "#F4EFF4",
-		"on-inverse-surface-primary": "#D0BCFF",
-		scrim: "#000000",
-		transparent: "rgba(0,0,0,0)"
+//#endregion
+//#region src/concepts/color/color.records.ts
+var CategorySaturation = {
+	jewel: {
+		low: 73,
+		high: 83
 	},
-	typography: {
-		"display-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 57,
-			lineHeight: 64,
-			fontWeight: "normal",
-			letterSpacing: -.25
-		},
-		"display-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 45,
-			lineHeight: 52,
-			fontWeight: "normal"
-		},
-		"display-small": {
-			fontFamily: "Red Hat Display",
-			fontSize: 36,
-			lineHeight: 44,
-			fontWeight: "normal"
-		},
-		"headline-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 32,
-			lineHeight: 40,
-			fontWeight: "normal"
-		},
-		"headline-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 28,
-			lineHeight: 36,
-			fontWeight: "normal"
-		},
-		"headline-small": {
-			fontFamily: "Red Hat Display",
-			fontSize: 24,
-			lineHeight: 32,
-			fontWeight: "normal"
-		},
-		"title-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 22,
-			lineHeight: 28,
-			fontWeight: "normal"
-		},
-		"title-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 16,
-			lineHeight: 24,
-			fontWeight: "medium",
-			letterSpacing: .15
-		},
-		"title-small": {
-			fontFamily: "Red Hat Display",
-			fontWeight: "medium",
-			fontSize: 14,
-			lineHeight: 20,
-			letterSpacing: .1
-		},
-		"body-1-long": {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 22
-		},
-		"body-1-short": {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		"body-2-long": {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 18
-		},
-		"body-2-short": {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 20
-		},
-		"subtitle-1": {
-			fontFamily: "Red Hat Display",
-			fontSize: 16,
-			lineHeight: 24,
-			letterSpacing: .15
-		},
-		"subtitle-2": {
-			fontFamily: "Red Hat Display",
-			fontSize: 14,
-			lineHeight: 20,
-			fontWeight: "medium",
-			letterSpacing: .1
-		},
-		label: {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 20
-		},
-		button: {
-			fontFamily: "Red Hat Display",
-			fontSize: 14,
-			lineHeight: 20,
-			fontWeight: "medium",
-			textTransform: "capitalize"
-		},
-		caption: {
-			fontFamily: "Roboto",
-			fontSize: 12,
-			lineHeight: 18,
-			letterSpacing: .4
-		},
-		overline: {
-			fontFamily: "Red Hat Display",
-			fontSize: 10,
-			lineHeight: 18,
-			letterSpacing: 1.5,
-			textTransform: "uppercase"
-		},
-		paragraph: {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		quote: {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		note: {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 22,
-			fontStyle: "italic"
-		}
+	pastel: {
+		low: 14,
+		high: 21
 	},
-	borders: {
-		primary: `1px solid ${palette.primary}`,
-		secondary: `1px solid ${palette.secondary}`,
-		tertiary: `1px solid ${palette.tertiary}`,
-		quaternary: `1px solid ${palette.quaternary}`,
-		warn: `1px solid ${palette.warn}`,
-		success: `1px solid ${palette.secondary}`,
-		light: `1px solid ${palette.light}`,
-		dark: `1px solid ${palette.dark}`,
-		dotted: `1px dotted ${palette.dark}`
-	},
-	components: {},
-	shadows: {
-		raised: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
-		menu: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
-		dialog: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
-		warn: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
+	earth: {
+		low: 36,
+		high: 41
 	},
-	spacing: {
-		none: "none",
-		xxs: "2px",
-		xs: "4px",
-		sm: "8px",
-		md: "16px",
-		lg: "32px",
-		xl: "64px"
+	neutral: {
+		low: 1,
+		high: 10
 	},
-	thicknesses: {
-		thin: 1,
-		standard: 2,
-		thick: 4
-	},
-	radii: {
-		none: "none",
-		xxs: "4px",
-		xs: "8px",
-		sm: "16px",
-		md: "24px",
-		lg: "32px",
-		max: "999px"
-	},
-	buttons: {
-		elevated: {
-			...BaseButton,
-			color: "surface",
-			contentColor: "on-surface",
-			shadowElevation: "raised"
-		},
-		filled: {
-			...BaseButton,
-			color: "primary"
-		},
-		"filled-secondary": {
-			...BaseButton,
-			color: "secondary",
-			contentColor: "on-secondary"
-		},
-		outlined: {
-			...BaseButton,
-			color: "transparent",
-			borderColor: "primary",
-			contentColor: "on-primary",
-			borderWidth: 1
-		},
-		text: {
-			...BaseButton,
-			color: "transparent",
-			contentColor: "on-surface"
-		},
-		icon: {
-			...BaseButton,
-			color: "transparent",
-			contentColor: "on-surface",
-			horizontalPadding: BaseButton.verticalPadding
-		},
-		"floating-action": {
-			...BaseButton,
-			color: "secondary",
-			contentColor: "on-secondary",
-			borderRadii: {
-				xxs: 3,
-				xs: 5,
-				sm: 8,
-				md: 12,
-				lg: 16,
-				xl: 12,
-				xxl: 20
-			},
-			shadowElevation: "navigation",
-			verticalPadding: {
-				xxs: 4,
-				xs: 8,
-				sm: 12,
-				md: 18,
-				lg: 24,
-				xl: 30,
-				xxl: 36
-			},
-			horizontalPadding: {
-				xxs: 4,
-				xs: 8,
-				sm: 12,
-				md: 18,
-				lg: 24,
-				xl: 30,
-				xxl: 36
-			}
-		}
-	},
-	containers: {
-		card: {
-			...BaseContainer,
-			color: "surface",
-			contentColor: "on-surface",
-			shadowMode: "interactive"
-		},
-		screen: {
-			...BaseContainer,
-			color: "background",
-			contentColor: "on-background"
-		},
-		modal: {
-			...BaseContainer,
-			borderRadii: {
-				xxs: 8,
-				xs: 16,
-				sm: 22,
-				md: 28,
-				lg: 32,
-				xl: 38,
-				xxl: 44
-			},
-			color: "surface",
-			contentColor: "on-surface",
-			shadowMode: "static",
-			shadowElevation: "modal",
-			maxWidth: 560
-		}
-	},
-	typefaces: {},
-	icons: {}
-};
-//#endregion
-//#region src/concepts/theme/themes/dark.theme.ts
-var DarkTheme = {
-	...BaseTheme,
-	id: "DarkTheme",
-	name: "Dark Theme",
-	colors: {
-		primary: "#D0BCFF",
-		"on-primary": "#371E73",
-		"primary-container": "#4F378B",
-		"on-primary-container": "#EADDFF",
-		secondary: "#CCC2DC",
-		"on-secondary": "#332D41",
-		"secondary-container": "#4A4458",
-		"on-secondary-container": "#E8DEF8",
-		tertiary: "#EFB8C8",
-		"on-tertiary": "#492532",
-		"tertiary-container": "#633B48",
-		"on-tertiary-container": "#FFD8E4",
-		error: "#F2B8B5",
-		"on-error": "#601410",
-		"error-container": "#8C1D18",
-		"on-error-container": "#F9DEDC",
-		background: "#1C1B1F",
-		"on-background": "#E6E1E5",
-		surface: "#1C1B1F",
-		"on-surface": "#E6E1E5",
-		"surface-variant": "#49454F",
-		"on-surface-variant": "#CAC4D0",
-		outline: "#938F99",
-		shadow: "#000000",
-		"surface-tint": "#D0BCFF",
-		"inverse-surface": "#E6E1E5",
-		"inverse-on-surface": "#313033",
-		"inverse-on-surface-primary": "#6750A4",
-		transparent: "rgba(0,0,0,0)"
-	}
-};
-//#endregion
-//#region src/concepts/theme/themes/light.theme.ts
-var LightTheme = {
-	...BaseTheme,
-	id: "LightTheme",
-	name: "Light Theme"
-};
-//#endregion
-//#region src/concepts/theme/theme.records.ts
-var UniThemes = {
-	LightTheme,
-	DarkTheme
-};
-var DefaultThemeId = Object.keys(UniThemes)[0];
-//#endregion
-//#region src/concepts/color/color.records.ts
-var CategorySaturation = {
-	jewel: {
-		low: 73,
-		high: 83
-	},
-	pastel: {
-		low: 14,
-		high: 21
-	},
-	earth: {
-		low: 36,
-		high: 41
-	},
-	neutral: {
-		low: 1,
-		high: 10
-	},
-	florescent: {
-		low: 63,
-		high: 100
+	florescent: {
+		low: 63,
+		high: 100
 	},
 	shades: {
 		low: 0,
@@ -627,68 +223,845 @@ var ShadowMap = {
 			blur: 2,
 			opacity: 24
 		},
-		penumbra: {
-			offset: 1,
-			blur: 3,
-			opacity: 12
-		}
-	},
-	raised: {
-		umbra: {
-			offset: 3,
-			blur: 6,
-			opacity: 23
+		penumbra: {
+			offset: 1,
+			blur: 3,
+			opacity: 12
+		}
+	},
+	raised: {
+		umbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 23
+		},
+		penumbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 16
+		}
+	},
+	focussed: {
+		umbra: {
+			offset: 6,
+			blur: 6,
+			opacity: 23
+		},
+		penumbra: {
+			offset: 10,
+			blur: 20,
+			opacity: 19
+		}
+	},
+	navigation: {
+		umbra: {
+			offset: 10,
+			blur: 10,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 14,
+			blur: 28,
+			opacity: 25
+		}
+	},
+	modal: {
+		umbra: {
+			offset: 15,
+			blur: 12,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 19,
+			blur: 38,
+			opacity: 30
+		}
+	}
+};
+var ShadowCssMap = {
+	pressed: GetBoxShadows(ShadowMap["pressed"]),
+	raised: GetBoxShadows(ShadowMap["raised"]),
+	focussed: GetBoxShadows(ShadowMap["focussed"]),
+	navigation: GetBoxShadows(ShadowMap["navigation"]),
+	modal: GetBoxShadows(ShadowMap["modal"])
+};
+//#endregion
+//#region src/concepts/theme/palettes/theme.palette.ts
+var genericLightTheme = {
+	primary: "#0066B2",
+	secondary: "#008528",
+	tertiary: "#D97706",
+	quaternary: "#52525B",
+	warn: "#DC2626",
+	success: "#008528",
+	light: "#F4F4F5",
+	onLight: "#18181B",
+	onLightVariant: "rgba(24, 24, 27, 0.6)",
+	dark: "#18181B",
+	onDark: "rgba(255, 255, 255, 0.85)",
+	background: "#FFFFFF",
+	disabled: "rgba(24, 24, 27, 0.08)",
+	onDisabled: "rgba(24, 24, 27, 0.4)"
+};
+//#endregion
+//#region src/concepts/theme/themes/base.theme.ts
+var BaseButton = {
+	borderRadius: 100,
+	color: "primary-container",
+	contentColor: "on-primary-container",
+	verticalPadding: {
+		xxs: 2,
+		xs: 5,
+		sm: 8,
+		md: 12,
+		lg: 16,
+		xl: 20,
+		xxl: 24
+	},
+	horizontalPadding: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 18,
+		lg: 24,
+		xl: 30,
+		xxl: 36
+	}
+};
+var BaseContainer = {
+	color: "primary-container",
+	contentColor: "on-primary-container",
+	borderRadii: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 16,
+		lg: 20,
+		xl: 24,
+		xxl: 28
+	},
+	horizontalPadding: {
+		xxs: 6,
+		xs: 12,
+		sm: 18,
+		md: 24,
+		lg: 30,
+		xl: 36,
+		xxl: 42
+	},
+	contentSpacing: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 16,
+		lg: 20,
+		xl: 24,
+		xxl: 28
+	}
+};
+var BaseTheme = {
+	id: "BaseTheme",
+	name: "Base Theme",
+	colors: {
+		primary: "#6750A4",
+		"on-primary": "#FFFFFF",
+		"primary-container": "#EADDFF",
+		"on-primary-container": "#21005E",
+		secondary: "#625B71",
+		"on-secondary": "#FFFFFF",
+		"secondary-container": "#E8DEF8",
+		"on-secondary-container": "#1E192B",
+		tertiary: "#7D5260",
+		"on-tertiary": "#FFFFFF",
+		"tertiary-container": "#FFD8E4",
+		"on-tertiary-container": "#370B1E",
+		error: "#B3261E",
+		"on-error": "#FFFFFF",
+		"error-container": "#F9DEDC",
+		"on-error-container": "#370B1E",
+		background: "#FFFBFE",
+		"on-background": "#1C1B1F",
+		surface: "#FFFBFE",
+		"on-surface": "#1C1B1F",
+		"surface-variant": "#E7E0EC",
+		"on-surface-variant": "#49454E",
+		outline: "#79747E",
+		shadow: "#000000",
+		"surface-tint": "#6750A4",
+		"inverse-surface": "#313033",
+		"on-inverse-surface": "#F4EFF4",
+		"on-inverse-surface-primary": "#D0BCFF",
+		scrim: "#000000",
+		transparent: "rgba(0,0,0,0)",
+		"primary-surface": genericLightTheme.background,
+		"on-primary-surface": genericLightTheme.onLight,
+		"on-primary-surface-variant": genericLightTheme.primary
+	},
+	typography: {
+		"display-large": {
+			fontFamily: "Red Hat Display",
+			fontSize: 57,
+			lineHeight: 64,
+			fontWeight: "normal",
+			letterSpacing: -.25
+		},
+		"display-medium": {
+			fontFamily: "Red Hat Display",
+			fontSize: 45,
+			lineHeight: 52,
+			fontWeight: "normal"
+		},
+		"display-small": {
+			fontFamily: "Red Hat Display",
+			fontSize: 36,
+			lineHeight: 44,
+			fontWeight: "normal"
+		},
+		"headline-large": {
+			fontFamily: "Red Hat Display",
+			fontSize: 32,
+			lineHeight: 40,
+			fontWeight: "normal"
+		},
+		"headline-medium": {
+			fontFamily: "Red Hat Display",
+			fontSize: 28,
+			lineHeight: 36,
+			fontWeight: "normal"
+		},
+		"headline-small": {
+			fontFamily: "Red Hat Display",
+			fontSize: 24,
+			lineHeight: 32,
+			fontWeight: "normal"
+		},
+		"title-large": {
+			fontFamily: "Red Hat Display",
+			fontSize: 22,
+			lineHeight: 28,
+			fontWeight: "normal"
+		},
+		"title-medium": {
+			fontFamily: "Red Hat Display",
+			fontSize: 16,
+			lineHeight: 24,
+			fontWeight: "medium",
+			letterSpacing: .15
+		},
+		"title-small": {
+			fontFamily: "Red Hat Display",
+			fontWeight: "medium",
+			fontSize: 14,
+			lineHeight: 20,
+			letterSpacing: .1
+		},
+		"body-1-long": {
+			fontFamily: "Roboto",
+			fontSize: 16,
+			lineHeight: 22
+		},
+		"body-1-short": {
+			fontFamily: "Roboto",
+			fontSize: 16,
+			lineHeight: 24
+		},
+		"body-2-long": {
+			fontFamily: "Roboto",
+			fontSize: 14,
+			lineHeight: 18
+		},
+		"body-2-short": {
+			fontFamily: "Roboto",
+			fontSize: 14,
+			lineHeight: 20
+		},
+		"subtitle-1": {
+			fontFamily: "Red Hat Display",
+			fontSize: 16,
+			lineHeight: 24,
+			letterSpacing: .15
+		},
+		"subtitle-2": {
+			fontFamily: "Red Hat Display",
+			fontSize: 14,
+			lineHeight: 20,
+			fontWeight: "medium",
+			letterSpacing: .1
+		},
+		label: {
+			fontFamily: "Roboto",
+			fontSize: 14,
+			lineHeight: 20
+		},
+		button: {
+			fontFamily: "Red Hat Display",
+			fontSize: 14,
+			lineHeight: 20,
+			fontWeight: "medium",
+			textTransform: "capitalize"
+		},
+		caption: {
+			fontFamily: "Roboto",
+			fontSize: 12,
+			lineHeight: 18,
+			letterSpacing: .4
+		},
+		overline: {
+			fontFamily: "Red Hat Display",
+			fontSize: 10,
+			lineHeight: 18,
+			letterSpacing: 1.5,
+			textTransform: "uppercase"
+		},
+		paragraph: {
+			fontFamily: "Roboto",
+			fontSize: 16,
+			lineHeight: 24
 		},
-		penumbra: {
-			offset: 3,
-			blur: 6,
-			opacity: 16
+		quote: {
+			fontFamily: "Roboto",
+			fontSize: 16,
+			lineHeight: 24
+		},
+		note: {
+			fontFamily: "Roboto",
+			fontSize: 14,
+			lineHeight: 22,
+			fontStyle: "italic"
 		}
 	},
-	focussed: {
-		umbra: {
-			offset: 6,
-			blur: 6,
-			opacity: 23
+	borders: {
+		primary: `1px solid ${genericLightTheme.primary}`,
+		secondary: `1px solid ${genericLightTheme.secondary}`,
+		tertiary: `1px solid ${genericLightTheme.tertiary}`,
+		quaternary: `1px solid ${genericLightTheme.quaternary}`,
+		warn: `1px solid ${genericLightTheme.warn}`,
+		success: `1px solid ${genericLightTheme.secondary}`,
+		light: `1px solid ${genericLightTheme.light}`,
+		dark: `1px solid ${genericLightTheme.dark}`,
+		dotted: `1px dotted ${genericLightTheme.dark}`
+	},
+	shadows: {
+		raised: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
+		menu: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
+		dialog: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
+		warn: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
+	},
+	spacing: {
+		none: "none",
+		xxs: "2px",
+		xs: "4px",
+		sm: "8px",
+		md: "16px",
+		lg: "32px",
+		xl: "64px"
+	},
+	thicknesses: {
+		thin: 1,
+		standard: 2,
+		thick: 4
+	},
+	radii: {
+		none: "none",
+		xxs: "4px",
+		xs: "8px",
+		sm: "16px",
+		md: "24px",
+		lg: "32px",
+		max: "999px"
+	},
+	buttons: {
+		elevated: {
+			...BaseButton,
+			color: "surface",
+			contentColor: "on-surface",
+			shadowElevation: "raised"
 		},
-		penumbra: {
-			offset: 10,
-			blur: 20,
-			opacity: 19
+		filled: {
+			...BaseButton,
+			color: "primary"
+		},
+		"filled-secondary": {
+			...BaseButton,
+			color: "secondary",
+			contentColor: "on-secondary"
+		},
+		outlined: {
+			...BaseButton,
+			color: "transparent",
+			borderColor: "primary",
+			contentColor: "on-primary",
+			borderWidth: 1
+		},
+		text: {
+			...BaseButton,
+			color: "transparent",
+			contentColor: "on-surface"
+		},
+		icon: {
+			...BaseButton,
+			color: "transparent",
+			contentColor: "on-surface",
+			horizontalPadding: BaseButton.verticalPadding
+		},
+		"floating-action": {
+			...BaseButton,
+			color: "secondary",
+			contentColor: "on-secondary",
+			borderRadii: {
+				xxs: 3,
+				xs: 5,
+				sm: 8,
+				md: 12,
+				lg: 16,
+				xl: 12,
+				xxl: 20
+			},
+			shadowElevation: "navigation",
+			verticalPadding: {
+				xxs: 4,
+				xs: 8,
+				sm: 12,
+				md: 18,
+				lg: 24,
+				xl: 30,
+				xxl: 36
+			},
+			horizontalPadding: {
+				xxs: 4,
+				xs: 8,
+				sm: 12,
+				md: 18,
+				lg: 24,
+				xl: 30,
+				xxl: 36
+			}
 		}
 	},
-	navigation: {
-		umbra: {
-			offset: 10,
-			blur: 10,
-			opacity: 22
+	containers: {
+		card: {
+			...BaseContainer,
+			color: "surface",
+			contentColor: "on-surface",
+			shadowMode: "interactive"
 		},
-		penumbra: {
-			offset: 14,
-			blur: 28,
-			opacity: 25
+		screen: {
+			...BaseContainer,
+			color: "background",
+			contentColor: "on-background"
+		},
+		modal: {
+			...BaseContainer,
+			borderRadii: {
+				xxs: 8,
+				xs: 16,
+				sm: 22,
+				md: 28,
+				lg: 32,
+				xl: 38,
+				xxl: 44
+			},
+			color: "surface",
+			contentColor: "on-surface",
+			shadowMode: "static",
+			shadowElevation: "modal",
+			maxWidth: 560
 		}
 	},
-	modal: {
-		umbra: {
-			offset: 15,
-			blur: 12,
-			opacity: 22
+	typefaces: {},
+	icons: {},
+	components: {
+		alert: { options: {
+			topPosition: 40,
+			borderRadius: "sm",
+			transitionSpeed: .35,
+			elevation: "md"
+		} },
+		checkbox: { options: { size: 20 } },
+		dialog: { options: {
+			borderRadius: "lg",
+			color: "primary-surface",
+			border: "quaternary",
+			padding: "sm",
+			elevation: "dialog",
+			backdrop: {
+				background: "rgba(255, 255, 255, 0.6)",
+				backdropFilter: "blur(2px)"
+			}
+		} },
+		dialogHeader: { options: {
+			borderRadius: "max",
+			color: "primary",
+			height: 48,
+			textRole: "title-large",
+			textAlign: "center",
+			closeButtonIcon: "close",
+			closeButtonSize: "md"
+		} },
+		dropdown: { options: {
+			border: "none",
+			borderRadius: "xxs",
+			color: "primary-surface",
+			shadow: "menu"
+		} },
+		footer: { options: {
+			height: 52,
+			color: "primary",
+			logoHeight: 18.6,
+			logoPadding: "md"
+		} },
+		input: { options: {
+			typeFace: "input",
+			color: "primary-surface",
+			textColor: "on-primary-surface",
+			disabledColor: "disabled-surface",
+			disabledTextColor: "on-disabled-surface",
+			border: "light",
+			borderRadius: "xs",
+			errorShadow: "warn",
+			errorBorder: "warn",
+			height: 32,
+			paddingLeft: "sm",
+			focusOutline: `2px solid ${genericLightTheme.primary}`,
+			focusOutlineOffset: 2
+		} },
+		multiSelectDropdown: { options: {
+			textRole: "input",
+			textColor: "on-primary-surface",
+			dividerBorder: "light",
+			searchInputBorder: "light",
+			searchInputBorderRadius: "xxs",
+			focusOutline: `2px solid ${genericLightTheme.primary}`,
+			focusOutlineOffset: 2
+		} },
+		badge: { options: { borderRadius: "xxs" } },
+		button: {
+			fixed: {
+				position: "relative",
+				overflow: "hidden",
+				outline: "0",
+				border: "0",
+				cursor: "pointer",
+				fontFamily: "Euphemia, sans-serif",
+				transition: "all 0.28s ease"
+			},
+			colors: {
+				ghost: {
+					backgroundColor: "transparent",
+					color: "currentcolor"
+				},
+				primary: {
+					backgroundColor: genericLightTheme.primary,
+					color: genericLightTheme.onDark
+				},
+				secondary: {
+					backgroundColor: genericLightTheme.secondary,
+					color: genericLightTheme.onDark
+				},
+				tertiary: {
+					backgroundColor: genericLightTheme.tertiary,
+					color: genericLightTheme.onDark
+				},
+				warn: {
+					backgroundColor: genericLightTheme.warn,
+					color: genericLightTheme.onDark
+				},
+				disabled: {
+					backgroundColor: `${genericLightTheme.disabled} !important`,
+					color: "#fff !important"
+				},
+				success: {
+					backgroundColor: genericLightTheme.success,
+					color: genericLightTheme.onDark
+				}
+			},
+			sizes: {
+				sm: {
+					height: 22,
+					borderRadius: 11,
+					fontSize: 12,
+					padding: "0 12px",
+					fontFamily: "Euphemia Bold, sans-serif",
+					fontWeight: 600
+				},
+				md: {
+					height: 26,
+					borderRadius: 13,
+					fontSize: 16,
+					padding: "0 16px"
+				},
+				lg: {
+					height: 36,
+					borderRadius: 18,
+					fontSize: 18,
+					padding: "0 18px"
+				},
+				xl: {
+					height: 48,
+					borderRadius: 24,
+					fontSize: 24,
+					padding: "0 22px"
+				}
+			}
 		},
-		penumbra: {
-			offset: 19,
-			blur: 38,
-			opacity: 30
-		}
+		iconButton: {
+			colors: {
+				ghost: {
+					backgroundColor: "transparent",
+					color: "currentcolor"
+				},
+				primary: {
+					backgroundColor: genericLightTheme.primary,
+					color: genericLightTheme.onDark
+				},
+				secondary: {
+					backgroundColor: genericLightTheme.secondary,
+					color: genericLightTheme.onDark
+				},
+				tertiary: {
+					backgroundColor: genericLightTheme.tertiary,
+					color: genericLightTheme.onDark
+				},
+				warn: {
+					backgroundColor: genericLightTheme.warn,
+					color: genericLightTheme.onDark
+				},
+				success: {
+					backgroundColor: genericLightTheme.success,
+					color: genericLightTheme.onDark
+				},
+				disabled: {
+					backgroundColor: "transparent !important",
+					color: "rgba(0,0,0,0.25) !important"
+				}
+			},
+			sizes: {
+				sm: {
+					height: 22,
+					minHeight: 22,
+					width: 22,
+					minWidth: 22,
+					fontSize: 18
+				},
+				md: {
+					height: 26,
+					minHeight: 26,
+					width: 26,
+					minWidth: 26,
+					fontSize: 22
+				},
+				lg: {
+					height: 36,
+					minHeight: 36,
+					width: 36,
+					minWidth: 36,
+					fontSize: 30
+				},
+				xl: {
+					height: 40,
+					minHeight: 40,
+					width: 40,
+					minWidth: 40,
+					fontSize: 34
+				}
+			}
+		},
+		progressGauge: {
+			fixed: { textFill: genericLightTheme.onLight },
+			colors: {
+				primary: {
+					backgroundColor: "#b3d4ea",
+					color: genericLightTheme.primary
+				},
+				secondary: {
+					backgroundColor: "#b3e7c2",
+					color: genericLightTheme.secondary
+				},
+				tertiary: {
+					backgroundColor: "#ffe2b3",
+					color: genericLightTheme.tertiary
+				},
+				warn: {
+					backgroundColor: "#ffc2b3",
+					color: genericLightTheme.warn
+				},
+				success: {
+					backgroundColor: "#b3e7c2",
+					color: genericLightTheme.success
+				}
+			},
+			sizes: {
+				sm: { height: "54px" },
+				md: { height: "68px" },
+				lg: { height: "82px" },
+				xl: { height: "104px" }
+			}
+		},
+		card: {
+			fixed: {
+				borderStyle: "solid",
+				borderWidth: "1px",
+				borderRadius: "8px",
+				overflow: "hidden"
+			},
+			colors: {
+				primary: {
+					borderColor: genericLightTheme.primary,
+					backgroundColor: genericLightTheme.background
+				},
+				secondary: {
+					borderColor: genericLightTheme.secondary,
+					backgroundColor: genericLightTheme.background
+				},
+				tertiary: {
+					borderColor: genericLightTheme.tertiary,
+					backgroundColor: genericLightTheme.background
+				},
+				warn: {
+					borderColor: genericLightTheme.warn,
+					backgroundColor: genericLightTheme.background
+				},
+				success: {
+					borderColor: genericLightTheme.success,
+					backgroundColor: genericLightTheme.background
+				}
+			}
+		},
+		cardHeader: {
+			fixed: { padding: "12px 24px" },
+			colors: {
+				primary: {
+					backgroundColor: genericLightTheme.primary,
+					color: genericLightTheme.onDark
+				},
+				secondary: {
+					backgroundColor: genericLightTheme.secondary,
+					color: genericLightTheme.onDark
+				},
+				tertiary: {
+					backgroundColor: genericLightTheme.tertiary,
+					color: genericLightTheme.onDark
+				},
+				warn: {
+					backgroundColor: genericLightTheme.warn,
+					color: genericLightTheme.onDark
+				},
+				success: {
+					backgroundColor: genericLightTheme.success,
+					color: genericLightTheme.onDark
+				}
+			}
+		},
+		cardContent: { fixed: { padding: "12px 24px" } },
+		dataSearch: { options: {
+			border: "light",
+			borderRadius: "xs",
+			color: "primary-surface",
+			placeholderColor: "disabled"
+		} },
+		dataTable: { options: {
+			color: "primary-surface",
+			border: "light",
+			borderRadius: "sm",
+			elevation: void 0,
+			headerPadding: "sm",
+			footerPadding: "sm",
+			thTextRole: "headline-small",
+			thColor: "primary-container",
+			thVerticalBorder: "dotted",
+			thHorizontalBorder: "light",
+			thPadding: "sm",
+			tdTextRole: "title-small",
+			tdColor: "primary-surface",
+			tdStickyColor: "primary-container",
+			tdPadding: "sm",
+			tdVerticalBorder: "dotted",
+			tdHorizontalBorder: "light",
+			rowHoverColor: "primary-container",
+			loadingOverlayColor: "scrim",
+			loadingSpinnerColor: "primary",
+			loadingSpinnerSize: 40
+		} },
+		notificationBadge: { options: {
+			borderRadius: "sm",
+			offset: -10
+		} },
+		paginator: { options: {
+			gap: "xs",
+			textRole: "label",
+			inputBorder: "light",
+			inputBorderRadius: "xs",
+			pageBorderRadius: "xs",
+			currentPageBorder: "light",
+			currentPageBorderRadius: "xs"
+		} },
+		snackbar: { options: {
+			bottomPosition: 40,
+			transitionDelay: "0.35s",
+			autoCloseDelay: 35e3
+		} },
+		toggle: { options: { size: 20 } },
+		tooltip: { options: {
+			border: void 0,
+			borderRadius: "xs",
+			shadow: "raised",
+			color: "inverse-surface",
+			typeface: "label"
+		} }
 	}
 };
-var ShadowCssMap = {
-	pressed: GetBoxShadows(ShadowMap["pressed"]),
-	raised: GetBoxShadows(ShadowMap["raised"]),
-	focussed: GetBoxShadows(ShadowMap["focussed"]),
-	navigation: GetBoxShadows(ShadowMap["navigation"]),
-	modal: GetBoxShadows(ShadowMap["modal"])
+//#endregion
+//#region src/concepts/theme/themes/dark.theme.ts
+var DarkTheme = {
+	...BaseTheme,
+	id: "DarkTheme",
+	name: "Dark Theme",
+	colors: {
+		primary: "#D0BCFF",
+		"on-primary": "#371E73",
+		"primary-container": "#4F378B",
+		"on-primary-container": "#EADDFF",
+		secondary: "#CCC2DC",
+		"on-secondary": "#332D41",
+		"secondary-container": "#4A4458",
+		"on-secondary-container": "#E8DEF8",
+		tertiary: "#EFB8C8",
+		"on-tertiary": "#492532",
+		"tertiary-container": "#633B48",
+		"on-tertiary-container": "#FFD8E4",
+		error: "#F2B8B5",
+		"on-error": "#601410",
+		"error-container": "#8C1D18",
+		"on-error-container": "#F9DEDC",
+		background: "#1C1B1F",
+		"on-background": "#E6E1E5",
+		surface: "#1C1B1F",
+		"on-surface": "#E6E1E5",
+		"surface-variant": "#49454F",
+		"on-surface-variant": "#CAC4D0",
+		outline: "#938F99",
+		shadow: "#000000",
+		"surface-tint": "#D0BCFF",
+		"inverse-surface": "#E6E1E5",
+		"inverse-on-surface": "#313033",
+		"inverse-on-surface-primary": "#6750A4",
+		transparent: "rgba(0,0,0,0)"
+	}
+};
+//#endregion
+//#region src/concepts/theme/themes/light.theme.ts
+var LightTheme = {
+	...BaseTheme,
+	id: "LightTheme",
+	name: "Light Theme"
+};
+//#endregion
+//#region src/concepts/theme/theme.records.ts
+var UniThemes = {
+	LightTheme,
+	DarkTheme
 };
+var DefaultThemeId = Object.keys(UniThemes)[0];
 //#endregion
 //#region src/concepts/typography/typography.records.ts
 var FontWeightMap = {
@@ -736,8 +1109,12 @@ exports.ShadowCssMap = ShadowCssMap;
 exports.ShadowMap = ShadowMap;
 exports.UniThemes = UniThemes;
 exports.Z_INDEX = Z_INDEX;
+exports.collapseFadeOut = collapseFadeOut;
 exports.cycle = cycle;
 exports.debounce = debounce;
+exports.expandFadeIn = expandFadeIn;
+exports.fadeIn = fadeIn;
+exports.fadeOut = fadeOut;
 exports.getAnalogousHues = getAnalogousHues;
 exports.getComplimentaryHue = getComplimentaryHue;
 exports.getDeviceOrientation = getDeviceOrientation;
@@ -746,7 +1123,6 @@ exports.getSplitComplimentaryHues = getSplitComplimentaryHues;
 exports.getTriadicHues = getTriadicHues;
 exports.getValue = getValue;
 exports.gradient = gradient;
-exports.palette = palette;
 exports.randomRangeValue = randomRangeValue;
 exports.uniColor = uniColor;