@yahoo/uds 3.66.1 → 3.67.0-beta.2

package/dist/styles/variants.js

@@ -0,0 +1,1513 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { autoVariants } from "../generated/autoVariants.js";
+import { DARK_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME } from "../tokens/consts/cssTokens.js";
+
+//#region src/styles/variants.ts
+const variants = {
+	color: {
+		accent: "text-accent",
+		alert: "text-alert",
+		"alert-secondary": "text-alert-secondary",
+		black: "text-black",
+		brand: "text-brand",
+		"brand-secondary": "text-brand-secondary",
+		positive: "text-positive",
+		"positive-secondary": "text-positive-secondary",
+		warning: "text-warning",
+		"warning-secondary": "text-warning-secondary",
+		info: "text-info",
+		"info-secondary": "text-info-secondary",
+		white: "text-white",
+		transparent: "text-transparent",
+		muted: "text-muted",
+		"on-color": "text-on-color",
+		primary: "text-primary",
+		secondary: "text-secondary",
+		tertiary: "text-tertiary",
+		current: "text-current"
+	},
+	placeholderColor: {
+		accent: "placeholder:text-accent",
+		alert: "placeholder:text-alert",
+		"alert-secondary": "placeholder:text-alert-secondary",
+		black: "placeholder:text-black",
+		brand: "placeholder:text-brand",
+		"brand-secondary": "placeholder:text-brand-secondary",
+		positive: "placeholder:text-positive",
+		"positive-secondary": "placeholder:text-positive-secondary",
+		warning: "placeholder:text-warning",
+		"warning-secondary": "placeholder:text-warning-secondary",
+		info: "placeholder:text-info",
+		"info-secondary": "placeholder:text-info-secondary",
+		white: "placeholder:text-white",
+		transparent: "placeholder:text-transparent",
+		muted: "placeholder:text-muted",
+		"on-color": "placeholder:text-on-color",
+		primary: "placeholder:text-primary",
+		secondary: "placeholder:text-secondary",
+		tertiary: "placeholder:text-tertiary",
+		current: "placeholder:text-current"
+	},
+	fontFamily: {
+		sans: "font-sans",
+		"sans-alt": "font-sans-alt",
+		serif: "font-serif",
+		"serif-alt": "font-serif-alt",
+		mono: "font-mono",
+		display1: "font-display1",
+		display2: "font-display2",
+		display3: "font-display3",
+		title1: "font-title1",
+		title2: "font-title2",
+		title3: "font-title3",
+		title4: "font-title4",
+		headline1: "font-headline1",
+		body1: "font-body1",
+		label1: "font-label1",
+		label2: "font-label2",
+		label3: "font-label3",
+		label4: "font-label4",
+		caption1: "font-caption1",
+		caption2: "font-caption2",
+		legal1: "font-legal1",
+		"display1/emphasized": "font-display1-emphasized",
+		"display2/emphasized": "font-display2-emphasized",
+		"display3/emphasized": "font-display3-emphasized",
+		"title1/emphasized": "font-title1-emphasized",
+		"title2/emphasized": "font-title2-emphasized",
+		"title3/emphasized": "font-title3-emphasized",
+		"title4/emphasized": "font-title4-emphasized",
+		"headline1/emphasized": "font-headline1-emphasized",
+		"body1/emphasized": "font-body1-emphasized",
+		"label1/emphasized": "font-label1-emphasized",
+		"label2/emphasized": "font-label2-emphasized",
+		"label3/emphasized": "font-label3-emphasized",
+		"label4/emphasized": "font-label4-emphasized",
+		"caption1/emphasized": "font-caption1-emphasized",
+		"caption2/emphasized": "font-caption2-emphasized",
+		"legal1/emphasized": "font-legal1-emphasized",
+		ui1: "font-ui1",
+		ui2: "font-ui2",
+		ui3: "font-ui3",
+		ui4: "font-ui4",
+		ui5: "font-ui5",
+		ui6: "font-ui6",
+		"ui1/emphasized": "font-ui1-emphasized",
+		"ui2/emphasized": "font-ui2-emphasized",
+		"ui3/emphasized": "font-ui3-emphasized",
+		"ui4/emphasized": "font-ui4-emphasized",
+		"ui5/emphasized": "font-ui5-emphasized",
+		"ui6/emphasized": "font-ui6-emphasized"
+	},
+	fontSize: {
+		display1: "font-size-display1",
+		display2: "font-size-display2",
+		display3: "font-size-display3",
+		title1: "font-size-title1",
+		title2: "font-size-title2",
+		title3: "font-size-title3",
+		title4: "font-size-title4",
+		headline1: "font-size-headline1",
+		body1: "font-size-body1",
+		label1: "font-size-label1",
+		label2: "font-size-label2",
+		label3: "font-size-label3",
+		label4: "font-size-label4",
+		caption1: "font-size-caption1",
+		caption2: "font-size-caption2",
+		legal1: "font-size-legal1",
+		"display1/emphasized": "font-size-display1-emphasized",
+		"display2/emphasized": "font-size-display2-emphasized",
+		"display3/emphasized": "font-size-display3-emphasized",
+		"title1/emphasized": "font-size-title1-emphasized",
+		"title2/emphasized": "font-size-title2-emphasized",
+		"title3/emphasized": "font-size-title3-emphasized",
+		"title4/emphasized": "font-size-title4-emphasized",
+		"headline1/emphasized": "font-size-headline1-emphasized",
+		"body1/emphasized": "font-size-body1-emphasized",
+		"label1/emphasized": "font-size-label1-emphasized",
+		"label2/emphasized": "font-size-label2-emphasized",
+		"label3/emphasized": "font-size-label3-emphasized",
+		"label4/emphasized": "font-size-label4-emphasized",
+		"caption1/emphasized": "font-size-caption1-emphasized",
+		"caption2/emphasized": "font-size-caption2-emphasized",
+		"legal1/emphasized": "font-size-legal1-emphasized",
+		ui1: "font-size-ui1",
+		ui2: "font-size-ui2",
+		ui3: "font-size-ui3",
+		ui4: "font-size-ui4",
+		ui5: "font-size-ui5",
+		ui6: "font-size-ui6",
+		"ui1/emphasized": "font-size-ui1-emphasized",
+		"ui2/emphasized": "font-size-ui2-emphasized",
+		"ui3/emphasized": "font-size-ui3-emphasized",
+		"ui4/emphasized": "font-size-ui4-emphasized",
+		"ui5/emphasized": "font-size-ui5-emphasized",
+		"ui6/emphasized": "font-size-ui6-emphasized"
+	},
+	fontWeight: {
+		thin: "font-weight-thin",
+		extralight: "font-weight-extralight",
+		light: "font-weight-light",
+		regular: "font-weight-regular",
+		medium: "font-weight-medium",
+		semibold: "font-weight-semibold",
+		bold: "font-weight-bold",
+		extrabold: "font-weight-extrabold",
+		black: "font-weight-black",
+		display1: "font-weight-display1",
+		display2: "font-weight-display2",
+		display3: "font-weight-display3",
+		title1: "font-weight-title1",
+		title2: "font-weight-title2",
+		title3: "font-weight-title3",
+		title4: "font-weight-title4",
+		headline1: "font-weight-headline1",
+		body1: "font-weight-body1",
+		label1: "font-weight-label1",
+		label2: "font-weight-label2",
+		label3: "font-weight-label3",
+		label4: "font-weight-label4",
+		caption1: "font-weight-caption1",
+		caption2: "font-weight-caption2",
+		legal1: "font-weight-legal1",
+		"display1/emphasized": "font-weight-display1-emphasized",
+		"display2/emphasized": "font-weight-display2-emphasized",
+		"display3/emphasized": "font-weight-display3-emphasized",
+		"title1/emphasized": "font-weight-title1-emphasized",
+		"title2/emphasized": "font-weight-title2-emphasized",
+		"title3/emphasized": "font-weight-title3-emphasized",
+		"title4/emphasized": "font-weight-title4-emphasized",
+		"headline1/emphasized": "font-weight-headline1-emphasized",
+		"body1/emphasized": "font-weight-body1-emphasized",
+		"label1/emphasized": "font-weight-label1-emphasized",
+		"label2/emphasized": "font-weight-label2-emphasized",
+		"label3/emphasized": "font-weight-label3-emphasized",
+		"label4/emphasized": "font-weight-label4-emphasized",
+		"caption1/emphasized": "font-weight-caption1-emphasized",
+		"caption2/emphasized": "font-weight-caption2-emphasized",
+		"legal1/emphasized": "font-weight-legal1-emphasized",
+		ui1: "font-weight-ui1",
+		ui2: "font-weight-ui2",
+		ui3: "font-weight-ui3",
+		ui4: "font-weight-ui4",
+		ui5: "font-weight-ui5",
+		ui6: "font-weight-ui6",
+		"ui1/emphasized": "font-weight-ui1-emphasized",
+		"ui2/emphasized": "font-weight-ui2-emphasized",
+		"ui3/emphasized": "font-weight-ui3-emphasized",
+		"ui4/emphasized": "font-weight-ui4-emphasized",
+		"ui5/emphasized": "font-weight-ui5-emphasized",
+		"ui6/emphasized": "font-weight-ui6-emphasized"
+	},
+	lineHeight: {
+		display1: "leading-display1",
+		display2: "leading-display2",
+		display3: "leading-display3",
+		title1: "leading-title1",
+		title2: "leading-title2",
+		title3: "leading-title3",
+		title4: "leading-title4",
+		headline1: "leading-headline1",
+		body1: "leading-body1",
+		label1: "leading-label1",
+		label2: "leading-label2",
+		label3: "leading-label3",
+		label4: "leading-label4",
+		caption1: "leading-caption1",
+		caption2: "leading-caption2",
+		legal1: "leading-legal1",
+		"display1/emphasized": "leading-display1-emphasized",
+		"display2/emphasized": "leading-display2-emphasized",
+		"display3/emphasized": "leading-display3-emphasized",
+		"title1/emphasized": "leading-title1-emphasized",
+		"title2/emphasized": "leading-title2-emphasized",
+		"title3/emphasized": "leading-title3-emphasized",
+		"title4/emphasized": "leading-title4-emphasized",
+		"headline1/emphasized": "leading-headline1-emphasized",
+		"body1/emphasized": "leading-body1-emphasized",
+		"label1/emphasized": "leading-label1-emphasized",
+		"label2/emphasized": "leading-label2-emphasized",
+		"label3/emphasized": "leading-label3-emphasized",
+		"label4/emphasized": "leading-label4-emphasized",
+		"caption1/emphasized": "leading-caption1-emphasized",
+		"caption2/emphasized": "leading-caption2-emphasized",
+		"legal1/emphasized": "leading-legal1-emphasized",
+		ui1: "leading-ui1",
+		ui2: "leading-ui2",
+		ui3: "leading-ui3",
+		ui4: "leading-ui4",
+		ui5: "leading-ui5",
+		ui6: "leading-ui6",
+		"ui1/emphasized": "leading-ui1-emphasized",
+		"ui2/emphasized": "leading-ui2-emphasized",
+		"ui3/emphasized": "leading-ui3-emphasized",
+		"ui4/emphasized": "leading-ui4-emphasized",
+		"ui5/emphasized": "leading-ui5-emphasized",
+		"ui6/emphasized": "leading-ui6-emphasized"
+	},
+	letterSpacing: {
+		display1: "tracking-display1",
+		display2: "tracking-display2",
+		display3: "tracking-display3",
+		title1: "tracking-title1",
+		title2: "tracking-title2",
+		title3: "tracking-title3",
+		title4: "tracking-title4",
+		headline1: "tracking-headline1",
+		body1: "tracking-body1",
+		label1: "tracking-label1",
+		label2: "tracking-label2",
+		label3: "tracking-label3",
+		label4: "tracking-label4",
+		caption1: "tracking-caption1",
+		caption2: "tracking-caption2",
+		legal1: "tracking-legal1",
+		"display1/emphasized": "tracking-display1-emphasized",
+		"display2/emphasized": "tracking-display2-emphasized",
+		"display3/emphasized": "tracking-display3-emphasized",
+		"title1/emphasized": "tracking-title1-emphasized",
+		"title2/emphasized": "tracking-title2-emphasized",
+		"title3/emphasized": "tracking-title3-emphasized",
+		"title4/emphasized": "tracking-title4-emphasized",
+		"headline1/emphasized": "tracking-headline1-emphasized",
+		"body1/emphasized": "tracking-body1-emphasized",
+		"label1/emphasized": "tracking-label1-emphasized",
+		"label2/emphasized": "tracking-label2-emphasized",
+		"label3/emphasized": "tracking-label3-emphasized",
+		"label4/emphasized": "tracking-label4-emphasized",
+		"caption1/emphasized": "tracking-caption1-emphasized",
+		"caption2/emphasized": "tracking-caption2-emphasized",
+		"legal1/emphasized": "tracking-legal1-emphasized",
+		ui1: "tracking-ui1",
+		ui2: "tracking-ui2",
+		ui3: "tracking-ui3",
+		ui4: "tracking-ui4",
+		ui5: "tracking-ui5",
+		ui6: "tracking-ui6",
+		"ui1/emphasized": "tracking-ui1-emphasized",
+		"ui2/emphasized": "tracking-ui2-emphasized",
+		"ui3/emphasized": "tracking-ui3-emphasized",
+		"ui4/emphasized": "tracking-ui4-emphasized",
+		"ui5/emphasized": "tracking-ui5-emphasized",
+		"ui6/emphasized": "tracking-ui6-emphasized"
+	},
+	textAlign: {
+		center: "text-center",
+		justify: "text-justify",
+		start: "text-start",
+		end: "text-end"
+	},
+	textTransform: {
+		display1: "case-display1",
+		display2: "case-display2",
+		display3: "case-display3",
+		title1: "case-title1",
+		title2: "case-title2",
+		title3: "case-title3",
+		title4: "case-title4",
+		headline1: "case-headline1",
+		body1: "case-body1",
+		label1: "case-label1",
+		label2: "case-label2",
+		label3: "case-label3",
+		label4: "case-label4",
+		caption1: "case-caption1",
+		caption2: "case-caption2",
+		legal1: "case-legal1",
+		"display1/emphasized": "case-display1-emphasized",
+		"display2/emphasized": "case-display2-emphasized",
+		"display3/emphasized": "case-display3-emphasized",
+		"title1/emphasized": "case-title1-emphasized",
+		"title2/emphasized": "case-title2-emphasized",
+		"title3/emphasized": "case-title3-emphasized",
+		"title4/emphasized": "case-title4-emphasized",
+		"headline1/emphasized": "case-headline1-emphasized",
+		"body1/emphasized": "case-body1-emphasized",
+		"label1/emphasized": "case-label1-emphasized",
+		"label2/emphasized": "case-label2-emphasized",
+		"label3/emphasized": "case-label3-emphasized",
+		"label4/emphasized": "case-label4-emphasized",
+		"caption1/emphasized": "case-caption1-emphasized",
+		"caption2/emphasized": "case-caption2-emphasized",
+		"legal1/emphasized": "case-legal1-emphasized",
+		ui1: "case-ui1",
+		ui2: "case-ui2",
+		ui3: "case-ui3",
+		ui4: "case-ui4",
+		ui5: "case-ui5",
+		ui6: "case-ui6",
+		"ui1/emphasized": "case-ui1-emphasized",
+		"ui2/emphasized": "case-ui2-emphasized",
+		"ui3/emphasized": "case-ui3-emphasized",
+		"ui4/emphasized": "case-ui4-emphasized",
+		"ui5/emphasized": "case-ui5-emphasized",
+		"ui6/emphasized": "case-ui6-emphasized",
+		none: "normal-case",
+		uppercase: "uppercase",
+		lowercase: "lowercase",
+		capitalize: "capitalize"
+	},
+	spacing: {
+		"0": "p-0",
+		px: "p-px",
+		"0.5": "p-0.5",
+		"1": "p-1",
+		"1.5": "p-1.5",
+		"2": "p-2",
+		"2.5": "p-2.5",
+		"3": "p-3",
+		"3.5": "p-3.5",
+		"4": "p-4",
+		"4.5": "p-4.5",
+		"5": "p-5",
+		"5.5": "p-5.5",
+		"6": "p-6",
+		"7": "p-7",
+		"8": "p-8",
+		"9": "p-9",
+		"10": "p-10",
+		"11": "p-11",
+		"12": "p-12",
+		"14": "p-14",
+		"16": "p-16",
+		"20": "p-20",
+		"24": "p-24",
+		"28": "p-28",
+		"32": "p-32",
+		"36": "p-36",
+		"40": "p-40",
+		"44": "p-44",
+		"48": "p-48",
+		"52": "p-52",
+		"56": "p-56",
+		"60": "p-60",
+		"64": "p-64",
+		"72": "p-72",
+		"80": "p-80",
+		"96": "p-96"
+	},
+	spacingHorizontal: {
+		"0": "px-0",
+		px: "px-px",
+		"0.5": "px-0.5",
+		"1": "px-1",
+		"1.5": "px-1.5",
+		"2": "px-2",
+		"2.5": "px-2.5",
+		"3": "px-3",
+		"3.5": "px-3.5",
+		"4": "px-4",
+		"4.5": "px-4.5",
+		"5": "px-5",
+		"5.5": "px-5.5",
+		"6": "px-6",
+		"7": "px-7",
+		"8": "px-8",
+		"9": "px-9",
+		"10": "px-10",
+		"11": "px-11",
+		"12": "px-12",
+		"14": "px-14",
+		"16": "px-16",
+		"20": "px-20",
+		"24": "px-24",
+		"28": "px-28",
+		"32": "px-32",
+		"36": "px-36",
+		"40": "px-40",
+		"44": "px-44",
+		"48": "px-48",
+		"52": "px-52",
+		"56": "px-56",
+		"60": "px-60",
+		"64": "px-64",
+		"72": "px-72",
+		"80": "px-80",
+		"96": "px-96"
+	},
+	spacingVertical: {
+		"0": "py-0",
+		px: "py-px",
+		"0.5": "py-0.5",
+		"1": "py-1",
+		"1.5": "py-1.5",
+		"2": "py-2",
+		"2.5": "py-2.5",
+		"3": "py-3",
+		"3.5": "py-3.5",
+		"4": "py-4",
+		"4.5": "py-4.5",
+		"5": "py-5",
+		"5.5": "py-5.5",
+		"6": "py-6",
+		"7": "py-7",
+		"8": "py-8",
+		"9": "py-9",
+		"10": "py-10",
+		"11": "py-11",
+		"12": "py-12",
+		"14": "py-14",
+		"16": "py-16",
+		"20": "py-20",
+		"24": "py-24",
+		"28": "py-28",
+		"32": "py-32",
+		"36": "py-36",
+		"40": "py-40",
+		"44": "py-44",
+		"48": "py-48",
+		"52": "py-52",
+		"56": "py-56",
+		"60": "py-60",
+		"64": "py-64",
+		"72": "py-72",
+		"80": "py-80",
+		"96": "py-96"
+	},
+	spacingBottom: {
+		"0": "pb-0",
+		px: "pb-px",
+		"0.5": "pb-0.5",
+		"1": "pb-1",
+		"1.5": "pb-1.5",
+		"2": "pb-2",
+		"2.5": "pb-2.5",
+		"3": "pb-3",
+		"3.5": "pb-3.5",
+		"4": "pb-4",
+		"4.5": "pb-4.5",
+		"5": "pb-5",
+		"5.5": "pb-5.5",
+		"6": "pb-6",
+		"7": "pb-7",
+		"8": "pb-8",
+		"9": "pb-9",
+		"10": "pb-10",
+		"11": "pb-11",
+		"12": "pb-12",
+		"14": "pb-14",
+		"16": "pb-16",
+		"20": "pb-20",
+		"24": "pb-24",
+		"28": "pb-28",
+		"32": "pb-32",
+		"36": "pb-36",
+		"40": "pb-40",
+		"44": "pb-44",
+		"48": "pb-48",
+		"52": "pb-52",
+		"56": "pb-56",
+		"60": "pb-60",
+		"64": "pb-64",
+		"72": "pb-72",
+		"80": "pb-80",
+		"96": "pb-96"
+	},
+	spacingEnd: {
+		"0": "pe-0",
+		px: "pe-px",
+		"0.5": "pe-0.5",
+		"1": "pe-1",
+		"1.5": "pe-1.5",
+		"2": "pe-2",
+		"2.5": "pe-2.5",
+		"3": "pe-3",
+		"3.5": "pe-3.5",
+		"4": "pe-4",
+		"4.5": "pe-4.5",
+		"5": "pe-5",
+		"5.5": "pe-5.5",
+		"6": "pe-6",
+		"7": "pe-7",
+		"8": "pe-8",
+		"9": "pe-9",
+		"10": "pe-10",
+		"11": "pe-11",
+		"12": "pe-12",
+		"14": "pe-14",
+		"16": "pe-16",
+		"20": "pe-20",
+		"24": "pe-24",
+		"28": "pe-28",
+		"32": "pe-32",
+		"36": "pe-36",
+		"40": "pe-40",
+		"44": "pe-44",
+		"48": "pe-48",
+		"52": "pe-52",
+		"56": "pe-56",
+		"60": "pe-60",
+		"64": "pe-64",
+		"72": "pe-72",
+		"80": "pe-80",
+		"96": "pe-96"
+	},
+	spacingStart: {
+		"0": "ps-0",
+		px: "ps-px",
+		"0.5": "ps-0.5",
+		"1": "ps-1",
+		"1.5": "ps-1.5",
+		"2": "ps-2",
+		"2.5": "ps-2.5",
+		"3": "ps-3",
+		"3.5": "ps-3.5",
+		"4": "ps-4",
+		"4.5": "ps-4.5",
+		"5": "ps-5",
+		"5.5": "ps-5.5",
+		"6": "ps-6",
+		"7": "ps-7",
+		"8": "ps-8",
+		"9": "ps-9",
+		"10": "ps-10",
+		"11": "ps-11",
+		"12": "ps-12",
+		"14": "ps-14",
+		"16": "ps-16",
+		"20": "ps-20",
+		"24": "ps-24",
+		"28": "ps-28",
+		"32": "ps-32",
+		"36": "ps-36",
+		"40": "ps-40",
+		"44": "ps-44",
+		"48": "ps-48",
+		"52": "ps-52",
+		"56": "ps-56",
+		"60": "ps-60",
+		"64": "ps-64",
+		"72": "ps-72",
+		"80": "ps-80",
+		"96": "ps-96"
+	},
+	spacingTop: {
+		"0": "pt-0",
+		px: "pt-px",
+		"0.5": "pt-0.5",
+		"1": "pt-1",
+		"1.5": "pt-1.5",
+		"2": "pt-2",
+		"2.5": "pt-2.5",
+		"3": "pt-3",
+		"3.5": "pt-3.5",
+		"4": "pt-4",
+		"4.5": "pt-4.5",
+		"5": "pt-5",
+		"5.5": "pt-5.5",
+		"6": "pt-6",
+		"7": "pt-7",
+		"8": "pt-8",
+		"9": "pt-9",
+		"10": "pt-10",
+		"11": "pt-11",
+		"12": "pt-12",
+		"14": "pt-14",
+		"16": "pt-16",
+		"20": "pt-20",
+		"24": "pt-24",
+		"28": "pt-28",
+		"32": "pt-32",
+		"36": "pt-36",
+		"40": "pt-40",
+		"44": "pt-44",
+		"48": "pt-48",
+		"52": "pt-52",
+		"56": "pt-56",
+		"60": "pt-60",
+		"64": "pt-64",
+		"72": "pt-72",
+		"80": "pt-80",
+		"96": "pt-96"
+	},
+	offset: {
+		"0": "-m-0",
+		px: "-m-px",
+		"0.5": "-m-0.5",
+		"1": "-m-1",
+		"1.5": "-m-1.5",
+		"2": "-m-2",
+		"2.5": "-m-2.5",
+		"3": "-m-3",
+		"3.5": "-m-3.5",
+		"4": "-m-4",
+		"4.5": "-m-4.5",
+		"5": "-m-5",
+		"5.5": "-m-5.5",
+		"6": "-m-6",
+		"7": "-m-7",
+		"8": "-m-8",
+		"9": "-m-9",
+		"10": "-m-10",
+		"11": "-m-11",
+		"12": "-m-12",
+		"14": "-m-14",
+		"16": "-m-16",
+		"20": "-m-20",
+		"24": "-m-24",
+		"28": "-m-28",
+		"32": "-m-32",
+		"36": "-m-36",
+		"40": "-m-40",
+		"44": "-m-44",
+		"48": "-m-48",
+		"52": "-m-52",
+		"56": "-m-56",
+		"60": "-m-60",
+		"64": "-m-64",
+		"72": "-m-72",
+		"80": "-m-80",
+		"96": "-m-96"
+	},
+	offsetVertical: {
+		"0": "-my-0",
+		px: "-my-px",
+		"0.5": "-my-0.5",
+		"1": "-my-1",
+		"1.5": "-my-1.5",
+		"2": "-my-2",
+		"2.5": "-my-2.5",
+		"3": "-my-3",
+		"3.5": "-my-3.5",
+		"4": "-my-4",
+		"4.5": "-my-4.5",
+		"5": "-my-5",
+		"5.5": "-my-5.5",
+		"6": "-my-6",
+		"7": "-my-7",
+		"8": "-my-8",
+		"9": "-my-9",
+		"10": "-my-10",
+		"11": "-my-11",
+		"12": "-my-12",
+		"14": "-my-14",
+		"16": "-my-16",
+		"20": "-my-20",
+		"24": "-my-24",
+		"28": "-my-28",
+		"32": "-my-32",
+		"36": "-my-36",
+		"40": "-my-40",
+		"44": "-my-44",
+		"48": "-my-48",
+		"52": "-my-52",
+		"56": "-my-56",
+		"60": "-my-60",
+		"64": "-my-64",
+		"72": "-my-72",
+		"80": "-my-80",
+		"96": "-my-96"
+	},
+	offsetHorizontal: {
+		"0": "-mx-0",
+		px: "-mx-px",
+		"0.5": "-mx-0.5",
+		"1": "-mx-1",
+		"1.5": "-mx-1.5",
+		"2": "-mx-2",
+		"2.5": "-mx-2.5",
+		"3": "-mx-3",
+		"3.5": "-mx-3.5",
+		"4": "-mx-4",
+		"4.5": "-mx-4.5",
+		"5": "-mx-5",
+		"5.5": "-mx-5.5",
+		"6": "-mx-6",
+		"7": "-mx-7",
+		"8": "-mx-8",
+		"9": "-mx-9",
+		"10": "-mx-10",
+		"11": "-mx-11",
+		"12": "-mx-12",
+		"14": "-mx-14",
+		"16": "-mx-16",
+		"20": "-mx-20",
+		"24": "-mx-24",
+		"28": "-mx-28",
+		"32": "-mx-32",
+		"36": "-mx-36",
+		"40": "-mx-40",
+		"44": "-mx-44",
+		"48": "-mx-48",
+		"52": "-mx-52",
+		"56": "-mx-56",
+		"60": "-mx-60",
+		"64": "-mx-64",
+		"72": "-mx-72",
+		"80": "-mx-80",
+		"96": "-mx-96"
+	},
+	offsetBottom: {
+		"0": "-mb-0",
+		px: "-mb-px",
+		"0.5": "-mb-0.5",
+		"1": "-mb-1",
+		"1.5": "-mb-1.5",
+		"2": "-mb-2",
+		"2.5": "-mb-2.5",
+		"3": "-mb-3",
+		"3.5": "-mb-3.5",
+		"4": "-mb-4",
+		"4.5": "-mb-4.5",
+		"5": "-mb-5",
+		"5.5": "-mb-5.5",
+		"6": "-mb-6",
+		"7": "-mb-7",
+		"8": "-mb-8",
+		"9": "-mb-9",
+		"10": "-mb-10",
+		"11": "-mb-11",
+		"12": "-mb-12",
+		"14": "-mb-14",
+		"16": "-mb-16",
+		"20": "-mb-20",
+		"24": "-mb-24",
+		"28": "-mb-28",
+		"32": "-mb-32",
+		"36": "-mb-36",
+		"40": "-mb-40",
+		"44": "-mb-44",
+		"48": "-mb-48",
+		"52": "-mb-52",
+		"56": "-mb-56",
+		"60": "-mb-60",
+		"64": "-mb-64",
+		"72": "-mb-72",
+		"80": "-mb-80",
+		"96": "-mb-96"
+	},
+	offsetEnd: {
+		"0": "-me-0",
+		px: "-me-px",
+		"0.5": "-me-0.5",
+		"1": "-me-1",
+		"1.5": "-me-1.5",
+		"2": "-me-2",
+		"2.5": "-me-2.5",
+		"3": "-me-3",
+		"3.5": "-me-3.5",
+		"4": "-me-4",
+		"4.5": "-me-4.5",
+		"5": "-me-5",
+		"5.5": "-me-5.5",
+		"6": "-me-6",
+		"7": "-me-7",
+		"8": "-me-8",
+		"9": "-me-9",
+		"10": "-me-10",
+		"11": "-me-11",
+		"12": "-me-12",
+		"14": "-me-14",
+		"16": "-me-16",
+		"20": "-me-20",
+		"24": "-me-24",
+		"28": "-me-28",
+		"32": "-me-32",
+		"36": "-me-36",
+		"40": "-me-40",
+		"44": "-me-44",
+		"48": "-me-48",
+		"52": "-me-52",
+		"56": "-me-56",
+		"60": "-me-60",
+		"64": "-me-64",
+		"72": "-me-72",
+		"80": "-me-80",
+		"96": "-me-96"
+	},
+	offsetStart: {
+		"0": "-ms-0",
+		px: "-ms-px",
+		"0.5": "-ms-0.5",
+		"1": "-ms-1",
+		"1.5": "-ms-1.5",
+		"2": "-ms-2",
+		"2.5": "-ms-2.5",
+		"3": "-ms-3",
+		"3.5": "-ms-3.5",
+		"4": "-ms-4",
+		"4.5": "-ms-4.5",
+		"5": "-ms-5",
+		"5.5": "-ms-5.5",
+		"6": "-ms-6",
+		"7": "-ms-7",
+		"8": "-ms-8",
+		"9": "-ms-9",
+		"10": "-ms-10",
+		"11": "-ms-11",
+		"12": "-ms-12",
+		"14": "-ms-14",
+		"16": "-ms-16",
+		"20": "-ms-20",
+		"24": "-ms-24",
+		"28": "-ms-28",
+		"32": "-ms-32",
+		"36": "-ms-36",
+		"40": "-ms-40",
+		"44": "-ms-44",
+		"48": "-ms-48",
+		"52": "-ms-52",
+		"56": "-ms-56",
+		"60": "-ms-60",
+		"64": "-ms-64",
+		"72": "-ms-72",
+		"80": "-ms-80",
+		"96": "-ms-96"
+	},
+	offsetTop: {
+		"0": "-mt-0",
+		px: "-mt-px",
+		"0.5": "-mt-0.5",
+		"1": "-mt-1",
+		"1.5": "-mt-1.5",
+		"2": "-mt-2",
+		"2.5": "-mt-2.5",
+		"3": "-mt-3",
+		"3.5": "-mt-3.5",
+		"4": "-mt-4",
+		"4.5": "-mt-4.5",
+		"5": "-mt-5",
+		"5.5": "-mt-5.5",
+		"6": "-mt-6",
+		"7": "-mt-7",
+		"8": "-mt-8",
+		"9": "-mt-9",
+		"10": "-mt-10",
+		"11": "-mt-11",
+		"12": "-mt-12",
+		"14": "-mt-14",
+		"16": "-mt-16",
+		"20": "-mt-20",
+		"24": "-mt-24",
+		"28": "-mt-28",
+		"32": "-mt-32",
+		"36": "-mt-36",
+		"40": "-mt-40",
+		"44": "-mt-44",
+		"48": "-mt-48",
+		"52": "-mt-52",
+		"56": "-mt-56",
+		"60": "-mt-60",
+		"64": "-mt-64",
+		"72": "-mt-72",
+		"80": "-mt-80",
+		"96": "-mt-96"
+	},
+	columnGap: {
+		"0": "gap-x-0",
+		px: "gap-x-px",
+		"0.5": "gap-x-0.5",
+		"1": "gap-x-1",
+		"1.5": "gap-x-1.5",
+		"2": "gap-x-2",
+		"2.5": "gap-x-2.5",
+		"3": "gap-x-3",
+		"3.5": "gap-x-3.5",
+		"4": "gap-x-4",
+		"4.5": "gap-x-4.5",
+		"5": "gap-x-5",
+		"5.5": "gap-x-5.5",
+		"6": "gap-x-6",
+		"7": "gap-x-7",
+		"8": "gap-x-8",
+		"9": "gap-x-9",
+		"10": "gap-x-10",
+		"11": "gap-x-11",
+		"12": "gap-x-12",
+		"14": "gap-x-14",
+		"16": "gap-x-16",
+		"20": "gap-x-20",
+		"24": "gap-x-24",
+		"28": "gap-x-28",
+		"32": "gap-x-32",
+		"36": "gap-x-36",
+		"40": "gap-x-40",
+		"44": "gap-x-44",
+		"48": "gap-x-48",
+		"52": "gap-x-52",
+		"56": "gap-x-56",
+		"60": "gap-x-60",
+		"64": "gap-x-64",
+		"72": "gap-x-72",
+		"80": "gap-x-80",
+		"96": "gap-x-96"
+	},
+	rowGap: {
+		"0": "gap-y-0",
+		px: "gap-y-px",
+		"0.5": "gap-y-0.5",
+		"1": "gap-y-1",
+		"1.5": "gap-y-1.5",
+		"2": "gap-y-2",
+		"2.5": "gap-y-2.5",
+		"3": "gap-y-3",
+		"3.5": "gap-y-3.5",
+		"4": "gap-y-4",
+		"4.5": "gap-y-4.5",
+		"5": "gap-y-5",
+		"5.5": "gap-y-5.5",
+		"6": "gap-y-6",
+		"7": "gap-y-7",
+		"8": "gap-y-8",
+		"9": "gap-y-9",
+		"10": "gap-y-10",
+		"11": "gap-y-11",
+		"12": "gap-y-12",
+		"14": "gap-y-14",
+		"16": "gap-y-16",
+		"20": "gap-y-20",
+		"24": "gap-y-24",
+		"28": "gap-y-28",
+		"32": "gap-y-32",
+		"36": "gap-y-36",
+		"40": "gap-y-40",
+		"44": "gap-y-44",
+		"48": "gap-y-48",
+		"52": "gap-y-52",
+		"56": "gap-y-56",
+		"60": "gap-y-60",
+		"64": "gap-y-64",
+		"72": "gap-y-72",
+		"80": "gap-y-80",
+		"96": "gap-y-96"
+	},
+	backgroundColor: {
+		accent: "bg-accent",
+		alert: "bg-alert",
+		brand: "bg-brand",
+		positive: "bg-positive",
+		warning: "bg-warning",
+		info: "bg-info",
+		"alert-secondary": "bg-alert-secondary",
+		"brand-secondary": "bg-brand-secondary",
+		"positive-secondary": "bg-positive-secondary",
+		"warning-secondary": "bg-warning-secondary",
+		"info-secondary": "bg-info-secondary",
+		primary: "bg-primary",
+		secondary: "bg-secondary",
+		white: "bg-white",
+		black: "bg-black",
+		transparent: "bg-transparent",
+		current: "bg-current",
+		"elevation-0": "bg-elevation-0",
+		"elevation-1": "bg-elevation-1",
+		"elevation-2": "bg-elevation-2",
+		"elevation-3": "bg-elevation-3",
+		"elevation-4": "bg-elevation-4",
+		"elevation-5": "bg-elevation-5"
+	},
+	borderColor: {
+		accent: "border-accent",
+		black: "border-black",
+		brand: "border-brand",
+		alert: "border-alert",
+		positive: "border-positive",
+		warning: "border-warning",
+		info: "border-info",
+		"brand-secondary": "border-brand-secondary",
+		"alert-secondary": "border-alert-secondary",
+		"positive-secondary": "border-positive-secondary",
+		"warning-secondary": "border-warning-secondary",
+		"info-secondary": "border-info-secondary",
+		white: "border-white",
+		transparent: "border-transparent",
+		muted: "border-muted",
+		primary: "border-primary",
+		secondary: "border-secondary",
+		tertiary: "border-tertiary",
+		current: "border-current",
+		"elevation-0": "border-elevation-0",
+		"elevation-1": "border-elevation-1",
+		"elevation-2": "border-elevation-2",
+		"elevation-3": "border-elevation-3",
+		"elevation-4": "border-elevation-4",
+		"elevation-5": "border-elevation-5"
+	},
+	borderStartColor: {
+		accent: "border-s-accent",
+		alert: "border-s-alert",
+		brand: "border-s-brand",
+		positive: "border-s-positive",
+		warning: "border-s-warning",
+		info: "border-s-info",
+		"alert-secondary": "border-s-alert-secondary",
+		"brand-secondary": "border-s-brand-secondary",
+		"positive-secondary": "border-s-positive-secondary",
+		"warning-secondary": "border-s-warning-secondary",
+		"info-secondary": "border-s-info-secondary",
+		black: "border-s-black",
+		white: "border-s-white",
+		transparent: "border-s-transparent",
+		muted: "border-s-muted",
+		primary: "border-s-primary",
+		secondary: "border-s-secondary",
+		tertiary: "border-s-tertiary",
+		current: "border-s-current",
+		"elevation-0": "border-s-elevation-0",
+		"elevation-1": "border-s-elevation-1",
+		"elevation-2": "border-s-elevation-2",
+		"elevation-3": "border-s-elevation-3",
+		"elevation-4": "border-s-elevation-4",
+		"elevation-5": "border-s-elevation-5"
+	},
+	borderEndColor: {
+		accent: "border-e-accent",
+		alert: "border-e-alert",
+		black: "border-e-black",
+		brand: "border-e-brand",
+		positive: "border-e-positive",
+		warning: "border-e-warning",
+		info: "border-e-info",
+		"alert-secondary": "border-e-alert-secondary",
+		"brand-secondary": "border-e-brand-secondary",
+		"positive-secondary": "border-e-positive-secondary",
+		"warning-secondary": "border-e-warning-secondary",
+		"info-secondary": "border-e-info-secondary",
+		white: "border-e-white",
+		transparent: "border-e-transparent",
+		muted: "border-e-muted",
+		primary: "border-e-primary",
+		secondary: "border-e-secondary",
+		tertiary: "border-e-tertiary",
+		current: "border-e-current",
+		"elevation-0": "border-e-elevation-0",
+		"elevation-1": "border-e-elevation-1",
+		"elevation-2": "border-e-elevation-2",
+		"elevation-3": "border-e-elevation-3",
+		"elevation-4": "border-e-elevation-4",
+		"elevation-5": "border-e-elevation-5"
+	},
+	borderBottomColor: {
+		accent: "border-b-accent",
+		alert: "border-b-alert",
+		black: "border-b-black",
+		brand: "border-b-brand",
+		positive: "border-b-positive",
+		warning: "border-b-warning",
+		info: "border-b-info",
+		"alert-secondary": "border-b-alert-secondary",
+		"brand-secondary": "border-b-brand-secondary",
+		"positive-secondary": "border-b-positive-secondary",
+		"warning-secondary": "border-b-warning-secondary",
+		"info-secondary": "border-b-info-secondary",
+		white: "border-b-white",
+		transparent: "border-b-transparent",
+		muted: "border-b-muted",
+		primary: "border-b-primary",
+		secondary: "border-b-secondary",
+		tertiary: "border-b-tertiary",
+		current: "border-b-current",
+		"elevation-0": "border-b-elevation-0",
+		"elevation-1": "border-b-elevation-1",
+		"elevation-2": "border-b-elevation-2",
+		"elevation-3": "border-b-elevation-3",
+		"elevation-4": "border-b-elevation-4",
+		"elevation-5": "border-b-elevation-5"
+	},
+	borderTopColor: {
+		accent: "border-t-accent",
+		alert: "border-t-alert",
+		black: "border-t-black",
+		brand: "border-t-brand",
+		positive: "border-t-positive",
+		warning: "border-t-warning",
+		info: "border-t-info",
+		"alert-secondary": "border-t-alert-secondary",
+		"brand-secondary": "border-t-brand-secondary",
+		"positive-secondary": "border-t-positive-secondary",
+		"warning-secondary": "border-t-warning-secondary",
+		"info-secondary": "border-t-info-secondary",
+		white: "border-t-white",
+		transparent: "border-t-transparent",
+		muted: "border-t-muted",
+		primary: "border-t-primary",
+		secondary: "border-t-secondary",
+		tertiary: "border-t-tertiary",
+		current: "border-t-current",
+		"elevation-0": "border-t-elevation-0",
+		"elevation-1": "border-t-elevation-1",
+		"elevation-2": "border-t-elevation-2",
+		"elevation-3": "border-t-elevation-3",
+		"elevation-4": "border-t-elevation-4",
+		"elevation-5": "border-t-elevation-5"
+	},
+	borderRadius: {
+		none: "rounded-none",
+		xs: "rounded-sm",
+		sm: "rounded",
+		md: "rounded-md",
+		lg: "rounded-lg",
+		xl: "rounded-xl",
+		full: "rounded-full"
+	},
+	borderTopStartRadius: {
+		none: "rounded-ss-none",
+		xs: "rounded-ss-xs",
+		sm: "rounded-ss-sm",
+		md: "rounded-ss-md",
+		lg: "rounded-ss-lg",
+		xl: "rounded-ss-xl",
+		full: "rounded-ss-full"
+	},
+	borderTopEndRadius: {
+		none: "rounded-se-none",
+		xs: "rounded-se-xs",
+		sm: "rounded-se-sm",
+		md: "rounded-se-md",
+		lg: "rounded-se-lg",
+		xl: "rounded-se-xl",
+		full: "rounded-se-full"
+	},
+	borderBottomStartRadius: {
+		none: "rounded-es-none",
+		xs: "rounded-es-xs",
+		sm: "rounded-es-sm",
+		md: "rounded-es-md",
+		lg: "rounded-es-lg",
+		xl: "rounded-es-xl",
+		full: "rounded-es-full"
+	},
+	borderBottomEndRadius: {
+		none: "rounded-ee-none",
+		xs: "rounded-ee-xs",
+		sm: "rounded-ee-sm",
+		md: "rounded-ee-md",
+		lg: "rounded-ee-lg",
+		xl: "rounded-ee-xl",
+		full: "rounded-ee-full"
+	},
+	borderWidth: {
+		none: "border-none",
+		thin: "border-thin",
+		medium: "border-medium",
+		thick: "border-thick",
+		"elevation-0": "border-width-elevation-0",
+		"elevation-1": "border-width-elevation-1",
+		"elevation-2": "border-width-elevation-2",
+		"elevation-3": "border-width-elevation-3",
+		"elevation-4": "border-width-elevation-4",
+		"elevation-5": "border-width-elevation-5"
+	},
+	borderVerticalWidth: {
+		none: "border-y-none",
+		thin: "border-y-thin",
+		medium: "border-y-medium",
+		thick: "border-y-thick",
+		"elevation-0": "border-width-y-elevation-0",
+		"elevation-1": "border-width-y-elevation-1",
+		"elevation-2": "border-width-y-elevation-2",
+		"elevation-3": "border-width-y-elevation-3",
+		"elevation-4": "border-width-y-elevation-4",
+		"elevation-5": "border-width-y-elevation-5"
+	},
+	borderHorizontalWidth: {
+		none: "border-x-none",
+		thin: "border-x-thin",
+		medium: "border-x-medium",
+		thick: "border-x-thick",
+		"elevation-0": "border-width-x-elevation-0",
+		"elevation-1": "border-width-x-elevation-1",
+		"elevation-2": "border-width-x-elevation-2",
+		"elevation-3": "border-width-x-elevation-3",
+		"elevation-4": "border-width-x-elevation-4",
+		"elevation-5": "border-width-x-elevation-5"
+	},
+	borderStartWidth: {
+		none: "border-s-none",
+		thin: "border-s-thin",
+		medium: "border-s-medium",
+		thick: "border-s-thick",
+		"elevation-0": "border-width-s-elevation-0",
+		"elevation-1": "border-width-s-elevation-1",
+		"elevation-2": "border-width-s-elevation-2",
+		"elevation-3": "border-width-s-elevation-3",
+		"elevation-4": "border-width-s-elevation-4",
+		"elevation-5": "border-width-s-elevation-5"
+	},
+	borderEndWidth: {
+		none: "border-e-none",
+		thin: "border-e-thin",
+		medium: "border-e-medium",
+		thick: "border-e-thick",
+		"elevation-0": "border-width-e-elevation-0",
+		"elevation-1": "border-width-e-elevation-1",
+		"elevation-2": "border-width-e-elevation-2",
+		"elevation-3": "border-width-e-elevation-3",
+		"elevation-4": "border-width-e-elevation-4",
+		"elevation-5": "border-width-e-elevation-5"
+	},
+	borderTopWidth: {
+		none: "border-t-none",
+		thin: "border-t-thin",
+		medium: "border-t-medium",
+		thick: "border-t-thick",
+		"elevation-0": "border-width-t-elevation-0",
+		"elevation-1": "border-width-t-elevation-1",
+		"elevation-2": "border-width-t-elevation-2",
+		"elevation-3": "border-width-t-elevation-3",
+		"elevation-4": "border-width-t-elevation-4",
+		"elevation-5": "border-width-t-elevation-5"
+	},
+	borderBottomWidth: {
+		none: "border-b-none",
+		thin: "border-b-thin",
+		medium: "border-b-medium",
+		thick: "border-b-thick",
+		"elevation-0": "border-width-b-elevation-0",
+		"elevation-1": "border-width-b-elevation-1",
+		"elevation-2": "border-width-b-elevation-2",
+		"elevation-3": "border-width-b-elevation-3",
+		"elevation-4": "border-width-b-elevation-4",
+		"elevation-5": "border-width-b-elevation-5"
+	},
+	avatarSize: {
+		xs: "avatarSize-xs",
+		sm: "avatarSize-sm",
+		md: "avatarSize-md",
+		lg: "avatarSize-lg",
+		xl: "avatarSize-xl"
+	},
+	iconSize: {
+		xs: "iconSize-xs leading-none",
+		sm: "iconSize-sm leading-none",
+		md: "iconSize-md leading-none",
+		lg: "iconSize-lg leading-none"
+	},
+	alignContent: {
+		"flex-start": "content-start",
+		"flex-end": "content-end",
+		center: "content-center",
+		stretch: "content-stretch",
+		"space-between": "content-between",
+		"space-around": "content-around"
+	},
+	alignItems: {
+		"flex-start": "items-start",
+		"flex-end": "items-end",
+		center: "items-center",
+		stretch: "items-stretch",
+		baseline: "items-baseline"
+	},
+	alignSelf: {
+		auto: "self-auto",
+		"flex-start": "self-start",
+		"flex-end": "self-end",
+		center: "self-center",
+		stretch: "self-stretch",
+		baseline: "self-baseline"
+	},
+	flex: {
+		"1": "flex-1",
+		auto: "flex-auto",
+		initial: "flex-initial",
+		none: "flex-none"
+	},
+	flexDirection: {
+		row: "flex-row",
+		column: "flex-col",
+		"row-reverse": "flex-row-reverse",
+		"column-reverse": "flex-col-reverse"
+	},
+	flexGrow: {
+		"0": "grow-0",
+		"1": "grow",
+		"2": "grow-[2]",
+		"3": "grow-[3]"
+	},
+	flexShrink: {
+		"0": "shrink-0",
+		"1": "shrink"
+	},
+	flexWrap: {
+		wrap: "flex-wrap",
+		"wrap-reverse": "flex-wrap-reverse",
+		nowrap: "flex-nowrap"
+	},
+	justifyContent: {
+		"flex-start": "justify-start",
+		"flex-end": "justify-end",
+		center: "justify-center",
+		"space-between": "justify-between",
+		"space-around": "justify-around",
+		"space-evenly": "justify-evenly"
+	},
+	flexBasis: { "min-content": "basis-[min-content]" },
+	display: {
+		block: "block",
+		"inline-block": "inline-block",
+		inline: "inline",
+		flex: "flex",
+		"inline-flex": "inline-flex",
+		table: "table",
+		"inline-table": "inline-table",
+		"table-caption": "table-caption",
+		"table-cell": "table-cell",
+		"table-column": "table-column",
+		"table-column-group": "table-column-group",
+		"table-footer-group": "table-footer-group",
+		"table-header-group": "table-header-group",
+		"table-row-group": "table-row-group",
+		"table-row": "table-row",
+		"flow-root": "flow-root",
+		grid: "grid",
+		contents: "contents"
+	},
+	overflow: {
+		auto: "overflow-auto",
+		hidden: "overflow-hidden",
+		clip: "overflow-clip",
+		visible: "overflow-visible",
+		scroll: "overflow-scroll"
+	},
+	overflowX: {
+		auto: "overflow-x-auto",
+		hidden: "overflow-x-hidden",
+		clip: "overflow-x-clip",
+		visible: "overflow-x-visible",
+		scroll: "overflow-x-scroll"
+	},
+	overflowY: {
+		auto: "overflow-y-auto",
+		hidden: "overflow-y-hidden",
+		clip: "overflow-y-clip",
+		visible: "overflow-y-visible",
+		scroll: "overflow-y-scroll"
+	},
+	position: {
+		static: "static",
+		fixed: "fixed",
+		absolute: "absolute",
+		relative: "relative",
+		sticky: "sticky"
+	},
+	contentFit: {
+		contain: "object-contain",
+		cover: "object-cover",
+		fill: "object-fill",
+		none: "object-none",
+		"scale-down": "object-scale-down"
+	},
+	colorMode: {
+		dark: DARK_COLOR_MODE_CLASSNAME,
+		light: LIGHT_COLOR_MODE_CLASSNAME
+	},
+	scaleMode: {
+		xSmall: XSMALL_SCALE_MODE_CLASSNAME,
+		small: SMALL_SCALE_MODE_CLASSNAME,
+		medium: MEDIUM_SCALE_MODE_CLASSNAME,
+		large: LARGE_SCALE_MODE_CLASSNAME,
+		xLarge: XLARGE_SCALE_MODE_CLASSNAME,
+		xxxLarge: XXXLARGE_SCALE_MODE_CLASSNAME,
+		xxLarge: XXLARGE_SCALE_MODE_CLASSNAME
+	},
+	width: {
+		full: "w-full",
+		fit: "w-fit",
+		screen: "w-screen"
+	},
+	height: {
+		full: "h-full",
+		fit: "h-fit",
+		screen: "h-screen"
+	},
+	dropShadow: {
+		none: "uds-drop-shadow-none",
+		xs: "uds-drop-shadow-xs",
+		sm: "uds-drop-shadow-sm",
+		md: "uds-drop-shadow-md",
+		lg: "uds-drop-shadow-lg",
+		xl: "uds-drop-shadow-xl",
+		"2xl": "uds-drop-shadow-2xl",
+		"elevation-0": "uds-drop-shadow-elevation-0",
+		"elevation-1": "uds-drop-shadow-elevation-1",
+		"elevation-2": "uds-drop-shadow-elevation-2",
+		"elevation-3": "uds-drop-shadow-elevation-3",
+		"elevation-4": "uds-drop-shadow-elevation-4",
+		"elevation-5": "uds-drop-shadow-elevation-5"
+	},
+	insetShadow: {
+		none: "uds-inset-shadow-none",
+		xs: "uds-inset-shadow-xs",
+		sm: "uds-inset-shadow-sm",
+		md: "uds-inset-shadow-md",
+		lg: "uds-inset-shadow-lg",
+		xl: "uds-inset-shadow-xl",
+		"2xl": "uds-inset-shadow-2xl",
+		"xs-invert": "uds-inset-shadow-xs-invert",
+		"sm-invert": "uds-inset-shadow-sm-invert",
+		"md-invert": "uds-inset-shadow-md-invert",
+		"lg-invert": "uds-inset-shadow-lg-invert",
+		"xl-invert": "uds-inset-shadow-xl-invert",
+		"2xl-invert": "uds-inset-shadow-2xl-invert"
+	},
+	nestedBorderRadiusSize: {
+		none: "uds-nested-border-radius-size-none",
+		xs: "uds-nested-border-radius-size-xs",
+		sm: "uds-nested-border-radius-size-sm",
+		md: "uds-nested-border-radius-size-md",
+		lg: "uds-nested-border-radius-size-lg",
+		xl: "uds-nested-border-radius-size-xl",
+		full: "uds-nested-border-radius-size-full"
+	},
+	nestedBorderRadiusWidth: {
+		none: "uds-nested-border-radius-width-none",
+		thin: "uds-nested-border-radius-width-thin",
+		medium: "uds-nested-border-radius-width-medium",
+		thick: "uds-nested-border-radius-width-thick",
+		"elevation-0": "uds-nested-border-radius-width-elevation-0",
+		"elevation-1": "uds-nested-border-radius-width-elevation-1",
+		"elevation-2": "uds-nested-border-radius-width-elevation-2",
+		"elevation-3": "uds-nested-border-radius-width-elevation-3",
+		"elevation-4": "uds-nested-border-radius-width-elevation-4",
+		"elevation-5": "uds-nested-border-radius-width-elevation-5"
+	},
+	nestedBorderRadiusSpacing: {
+		"0": "uds-nested-border-radius-spacing-0",
+		px: "uds-nested-border-radius-spacing-px",
+		"0.5": "uds-nested-border-radius-spacing-0.5",
+		"1": "uds-nested-border-radius-spacing-1",
+		"1.5": "uds-nested-border-radius-spacing-1.5",
+		"2": "uds-nested-border-radius-spacing-2",
+		"2.5": "uds-nested-border-radius-spacing-2.5",
+		"3": "uds-nested-border-radius-spacing-3",
+		"3.5": "uds-nested-border-radius-spacing-3.5",
+		"4": "uds-nested-border-radius-spacing-4",
+		"4.5": "uds-nested-border-radius-spacing-4.5",
+		"5": "uds-nested-border-radius-spacing-5",
+		"5.5": "uds-nested-border-radius-spacing-5.5",
+		"6": "uds-nested-border-radius-spacing-6",
+		"7": "uds-nested-border-radius-spacing-7",
+		"8": "uds-nested-border-radius-spacing-8",
+		"9": "uds-nested-border-radius-spacing-9",
+		"10": "uds-nested-border-radius-spacing-10",
+		"11": "uds-nested-border-radius-spacing-11",
+		"12": "uds-nested-border-radius-spacing-12",
+		"14": "uds-nested-border-radius-spacing-14",
+		"16": "uds-nested-border-radius-spacing-16",
+		"20": "uds-nested-border-radius-spacing-20",
+		"24": "uds-nested-border-radius-spacing-24",
+		"28": "uds-nested-border-radius-spacing-28",
+		"32": "uds-nested-border-radius-spacing-32",
+		"36": "uds-nested-border-radius-spacing-36",
+		"40": "uds-nested-border-radius-spacing-40",
+		"44": "uds-nested-border-radius-spacing-44",
+		"48": "uds-nested-border-radius-spacing-48",
+		"52": "uds-nested-border-radius-spacing-52",
+		"56": "uds-nested-border-radius-spacing-56",
+		"60": "uds-nested-border-radius-spacing-60",
+		"64": "uds-nested-border-radius-spacing-64",
+		"72": "uds-nested-border-radius-spacing-72",
+		"80": "uds-nested-border-radius-spacing-80",
+		"96": "uds-nested-border-radius-spacing-96"
+	},
+	nestedBorderRadius: {
+		true: "uds-nested-border-radius",
+		first: "uds-nested-border-radius-first",
+		last: "uds-nested-border-radius-last"
+	},
+	...autoVariants
+};
+
+//#endregion
+export { variants };