@common-origin/design-system 2.19.0 → 2.20.0

package/dist/styles/tokens.json.mjs

@@ -0,0 +1,1454 @@
+var base = {
+	border: {
+		radius: {
+			"1": "0.125rem",
+			"2": "0.25rem",
+			"3": "0.5rem",
+			"4": "0.75rem",
+			"5": "1rem",
+			"6": "1.5rem",
+			"7": "2rem",
+			circle: "10rem"
+		},
+		style: {
+			solid: "solid",
+			dashed: "dashed",
+			dotted: "dotted"
+		},
+		width: {
+			"0": "0",
+			"1": "0.0625rem",
+			"2": "0.125rem",
+			"3": "0.1875rem",
+			"4": "0.25rem",
+			"5": "0.3125rem",
+			"6": "0.375rem",
+			"8": "0.5rem"
+		}
+	},
+	shadow: {
+		"1": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+		"2": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+		"3": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+		"4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		"5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+		"6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+		none: "none"
+	},
+	zIndex: {
+		"0": "0",
+		"1": "10",
+		"2": "20",
+		"3": "30",
+		"4": "40",
+		"5": "50",
+		"6": "1000",
+		"7": "1010",
+		"8": "1020"
+	},
+	opacity: {
+		"0": "0",
+		"5": "0.05",
+		"10": "0.1",
+		"20": "0.2",
+		"25": "0.25",
+		"30": "0.3",
+		"40": "0.4",
+		"50": "0.5",
+		"60": "0.6",
+		"70": "0.7",
+		"75": "0.75",
+		"80": "0.8",
+		"90": "0.9",
+		"95": "0.95",
+		"100": "1"
+	},
+	dimension: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"11": "2.75rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"15": "3.75rem",
+		"16": "4rem",
+		"18": "4.5rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"30": "7.5rem",
+		"32": "8rem",
+		"40": "10rem",
+		"45": "11.25rem",
+		"48": "12rem",
+		"50": "12.5rem",
+		"56": "14rem",
+		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem"
+	},
+	size: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"11": "2.75rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"15": "3.75rem",
+		"16": "4rem",
+		"18": "4.5rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"30": "7.5rem",
+		"32": "8rem",
+		"40": "10rem",
+		"45": "11.25rem",
+		"48": "12rem",
+		"50": "12.5rem",
+		"56": "14rem",
+		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem",
+		auto: "auto",
+		full: "100%",
+		screen: "100vh",
+		min: "min-content",
+		max: "max-content",
+		fit: "fit-content"
+	},
+	color: {
+		transparent: "transparent",
+		gray: {
+			"100": "#fcfcfc",
+			"200": "#f9f9f9",
+			"300": "#f2f2f2",
+			"400": "#ebebeb",
+			"500": "#e4e4e4",
+			"600": "#dcdcdc",
+			"700": "#d1d1d1",
+			"800": "#909090",
+			"900": "#848484",
+			"1000": "#797979",
+			"1100": "#636363",
+			"1200": "#222222"
+		},
+		"gray-alpha": {
+			"100": "rgba(34, 34, 34, 0.014)",
+			"200": "rgba(34, 34, 34, 0.027)",
+			"300": "rgba(34, 34, 34, 0.059)",
+			"400": "rgba(34, 34, 34, 0.09)",
+			"500": "rgba(34, 34, 34, 0.122)",
+			"600": "rgba(34, 34, 34, 0.158)",
+			"700": "rgba(34, 34, 34, 0.208)",
+			"800": "rgba(34, 34, 34, 0.502)",
+			"900": "rgba(34, 34, 34, 0.557)",
+			"1000": "rgba(34, 34, 34, 0.606)",
+			"1100": "rgba(34, 34, 34, 0.706)",
+			"1200": "rgba(34, 34, 34, 1)"
+		},
+		neutral: {
+			"100": "#f8f9fa",
+			"200": "#e9ecef",
+			"300": "#dee2e6",
+			"400": "#ced4da",
+			"500": "#adb5bd",
+			"600": "#6c757d",
+			"700": "#495057",
+			"800": "#343a40",
+			"900": "#212529",
+			"1000": "#16191C",
+			"000": "#ffffff"
+		},
+		green: {
+			"100": "#CEF8E0",
+			"200": "#ADF4CE",
+			"300": "#89ECBC",
+			"400": "#67DEA8",
+			"500": "#49CC93",
+			"600": "#2FB880",
+			"700": "#15A46E",
+			"800": "#008F5D",
+			"900": "#007A4D",
+			"1000": "#00653E",
+			"1100": "#005132",
+			"1200": "#053F27",
+			"1300": "#0A2E1D"
+		},
+		orange: {
+			"100": "#FFECCC",
+			"200": "#FFDFAD",
+			"300": "#FDD291",
+			"400": "#FFBB63",
+			"500": "#FFA037",
+			"600": "#F68511",
+			"700": "#E46F00",
+			"800": "#CB5D00",
+			"900": "#B14C00",
+			"1000": "#953D00",
+			"1100": "#7A2F00",
+			"1200": "#612300",
+			"1300": "#491901"
+		},
+		red: {
+			"100": "#FFEBE7",
+			"200": "#FFDDD6",
+			"300": "#FFCDC3",
+			"400": "#FFB7A9",
+			"500": "#FF9B88",
+			"600": "#FF7C65",
+			"700": "#F75C46",
+			"800": "#EA3829",
+			"900": "#D31510",
+			"1000": "#B40000",
+			"1100": "#930000",
+			"1200": "#740000",
+			"1300": "#590000"
+		},
+		blue: {
+			"100": "#E0F2FF",
+			"200": "#CAE8FF",
+			"300": "#B5DEFF",
+			"400": "#96CEFD",
+			"500": "#78BBFA",
+			"600": "#59A7F6",
+			"700": "#3892F3",
+			"800": "#147AF3",
+			"900": "#0265DC",
+			"1000": "#0054B6",
+			"1100": "#004491",
+			"1200": "#003571",
+			"1300": "#002754"
+		},
+		purple: {
+			"100": "#F9F0FF",
+			"200": "#F4E1FF",
+			"300": "#EDD0FF",
+			"400": "#E3B8FF",
+			"500": "#D59DFF",
+			"600": "#C27EF7",
+			"700": "#AD5FE8",
+			"800": "#9644D4",
+			"900": "#7E2EBD",
+			"1000": "#67229F",
+			"1100": "#511882",
+			"1200": "#3D1066",
+			"1300": "#2B0A4D"
+		},
+		pink: {
+			"100": "#FFEFF9",
+			"200": "#FFDFF4",
+			"300": "#FFCBED",
+			"400": "#FFB0E3",
+			"500": "#FF8ED4",
+			"600": "#FF69C1",
+			"700": "#FF42AB",
+			"800": "#F31A93",
+			"900": "#DC007B",
+			"1000": "#B90064",
+			"1100": "#97004E",
+			"1200": "#78003A",
+			"1300": "#5C0029"
+		},
+		yellow: {
+			"100": "#FFF3D6",
+			"200": "#FFE9B3",
+			"300": "#FFDE8F",
+			"400": "#FFD162",
+			"500": "#FFC233",
+			"600": "#EDAD0A",
+			"700": "#D39700",
+			"800": "#B88100",
+			"900": "#9D6C00",
+			"1000": "#825800",
+			"1100": "#694600",
+			"1200": "#523600",
+			"1300": "#3D2800"
+		}
+	},
+	spacing: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"16": "4rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"32": "8rem",
+		"40": "10rem",
+		"48": "12rem",
+		"56": "14rem",
+		"64": "16rem",
+		auto: "auto"
+	},
+	fontFamily: {
+		heading: "'Inter', sans-serif",
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		"1": "0.75rem",
+		"2": "0.875rem",
+		"3": "1rem",
+		"4": "1.125rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "3rem",
+		"10": "5rem"
+	},
+	fontWeight: {
+		"1": "300",
+		"2": "400",
+		"3": "500",
+		"4": "600",
+		"5": "700",
+		"6": "800",
+		"7": "900"
+	},
+	lineHeight: {
+		"1": "1rem",
+		"2": "1.125rem",
+		"3": "1.25rem",
+		"4": "1.5rem",
+		"5": "1.75rem",
+		"6": "2rem",
+		"7": "2.25rem",
+		"8": "2.5rem",
+		"9": "3rem",
+		"10": "4.5rem",
+		"11": "5rem",
+		none: "1"
+	},
+	letterSpacing: {
+		"0": "-0.125rem",
+		"1": "-0.0625rem",
+		"2": "0rem",
+		"3": "0.0625rem",
+		"4": "0.125rem"
+	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	duration: {
+		instant: "0ms",
+		fast: "150ms",
+		normal: "200ms",
+		moderate: "300ms",
+		slow: "500ms",
+		slower: "750ms",
+		slowest: "1000ms"
+	},
+	easing: {
+		linear: "linear",
+		ease: "ease",
+		easeIn: "ease-in",
+		easeOut: "ease-out",
+		easeInOut: "ease-in-out",
+		easeInQuart: "cubic-bezier(0.5, 0, 0.75, 0)",
+		easeOutQuart: "cubic-bezier(0.25, 1, 0.5, 1)",
+		easeInOutQuart: "cubic-bezier(0.76, 0, 0.24, 1)",
+		easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
+		easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+		easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+	}
+};
+var component = {
+	button: {
+		primary: {
+			backgroundColor: "#212529",
+			textColor: "#ffffff",
+			borderRadius: "0.25rem",
+			padding: "0.75rem 1rem",
+			font: "500 1rem/1.5rem 'Inter', sans-serif"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6",
+			textColor: "#adb5bd"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#dee2e6",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#ced4da"
+				},
+				active: {
+					backgroundColor: "#adb5bd"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent",
+					textColor: "#adb5bd"
+				}
+			},
+			accent: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			emphasis: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			danger: {
+				backgroundColor: "#D31510",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#B40000"
+				},
+				active: {
+					backgroundColor: "#930000"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				padding: "0.5rem 0.75rem",
+				font: "500 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "0.5rem 1rem",
+				font: "500 0.875rem/1.5rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.75rem 1rem",
+				font: "500 1rem/1.5rem 'Inter', sans-serif"
+			}
+		}
+	},
+	chip: {
+		closeButton: {
+			size: "1.25rem"
+		},
+		"default": {
+			backgroundColor: "#e9ecef",
+			textColor: "#212529",
+			borderRadius: "0.75rem",
+			padding: "2px 0.5rem",
+			font: "400 1rem/1.5rem 'Inter', sans-serif"
+		},
+		hover: {
+			backgroundColor: "#dee2e6"
+		},
+		active: {
+			backgroundColor: "#ced4da"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#e9ecef",
+			textColor: "#adb5bd"
+		},
+		variants: {
+			emphasis: {
+				backgroundColor: "#212529",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#343a40"
+				},
+				active: {
+					backgroundColor: "#16191C"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			subtle: {
+				backgroundColor: "#ffffff",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#f8f9fa"
+				},
+				active: {
+					backgroundColor: "#e9ecef"
+				},
+				disabled: {
+					backgroundColor: "#ffffff",
+					textColor: "#adb5bd"
+				}
+			},
+			interactive: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				padding: "2px 0.5rem",
+				font: "400 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "2px 0.5rem",
+				font: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.5rem 0.75rem",
+				font: "400 1rem/1.5rem 'Inter', sans-serif"
+			}
+		}
+	},
+	iconButton: {
+		primary: {
+			backgroundColor: "#212529",
+			borderRadius: "0.25rem",
+			minWidth: "40px",
+			minHeight: "40px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#e9ecef",
+				hover: {
+					backgroundColor: "#dee2e6"
+				},
+				active: {
+					backgroundColor: "#f8f9fa"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				minWidth: "32px",
+				minHeight: "32px",
+				padding: "0.25rem"
+			},
+			medium: {
+				minWidth: "40px",
+				minHeight: "40px",
+				padding: "0.5rem"
+			},
+			large: {
+				minWidth: "48px",
+				minHeight: "48px",
+				padding: "0.75rem"
+			}
+		}
+	},
+	separator: {
+		border: "0.0625rem solid #dee2e6",
+		margin: "2rem 0",
+		variants: {
+			"default": {
+				border: "0.0625rem solid #dee2e6",
+				margin: "2rem 0"
+			},
+			strong: {
+				border: "0.0625rem solid #343a40",
+				margin: "2rem 0"
+			},
+			minimal: {
+				border: "0.0625rem solid #dee2e6",
+				margin: "1.5rem 0"
+			}
+		},
+		sizes: {
+			small: {
+				margin: "1rem 0"
+			},
+			medium: {
+				margin: "1.5rem 0"
+			},
+			large: {
+				margin: "2rem 0"
+			},
+			xlarge: {
+				margin: "3rem 0"
+			}
+		}
+	},
+	progressBar: {
+		backgroundColor: "#dee2e6",
+		borderRadius: "0.25rem",
+		sizes: {
+			sm: {
+				height: "0.25rem"
+			},
+			md: {
+				height: "0.5rem"
+			},
+			lg: {
+				height: "1rem"
+			},
+			xl: {
+				height: "1.25rem"
+			}
+		}
+	},
+	input: {
+		"default": {
+			backgroundColor: "#ffffff",
+			textColor: "#212529",
+			borderColor: "#6c757d",
+			borderRadius: "0.25rem",
+			borderWidth: "0.0625rem",
+			paddingY: "11px",
+			paddingX: "1rem",
+			font: "400 1rem/1.5rem 'Inter', sans-serif"
+		},
+		placeholder: {
+			textColor: "#495057"
+		},
+		hover: {
+			borderColor: "#343a40"
+		},
+		focus: {
+			borderColor: "#343a40",
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		error: {
+			borderColor: "#D31510",
+			focus: {
+				borderColor: "#D31510",
+				outline: "0.125rem solid #343a40",
+				outlineOffset: "2px"
+			},
+			hover: {
+				borderColor: "#D31510"
+			}
+		},
+		disabled: {
+			backgroundColor: "#dee2e6",
+			textColor: "#adb5bd",
+			borderColor: "#dee2e6",
+			cursor: "not-allowed"
+		},
+		textarea: {
+			minHeight: "7.5rem"
+		}
+	},
+	badge: {
+		dot: {
+			size: "0.5rem"
+		},
+		count: {
+			minWidth: "1rem",
+			height: "1rem",
+			paddingX: "0.25rem",
+			lineHeight: "1"
+		},
+		ring: {
+			width: "0.125rem"
+		},
+		borderRadius: "10rem",
+		label: {
+			fontWeight: "500",
+			typography: {
+				small: "400 0.75rem/1rem 'Inter', sans-serif",
+				medium: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			}
+		}
+	},
+	field: {
+		gap: "0.5rem",
+		label: {
+			typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
+			color: "#212529",
+			colorDisabled: "#adb5bd",
+			gap: "0.25rem"
+		},
+		requiredIndicator: {
+			color: "#D31510",
+			fontWeight: "700"
+		},
+		helperText: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			color: "#495057",
+			colorError: "#D31510"
+		}
+	},
+	alert: {
+		severity: {
+			error: {
+				background: "#FFEBE7",
+				text: "#D31510"
+			},
+			warning: {
+				background: "#FFECCC",
+				text: "#B14C00"
+			},
+			info: {
+				background: "#E0F2FF",
+				text: "#0265DC"
+			},
+			success: {
+				background: "#CEF8E0",
+				text: "#007A4D"
+			}
+		},
+		appearance: {
+			outlined: {
+				borderColor: {
+					error: "#D31510",
+					warning: "#B14C00",
+					info: "#0265DC",
+					success: "#007A4D"
+				}
+			},
+			borderless: {
+				borderColor: {
+					error: "transparent",
+					warning: "transparent",
+					info: "transparent",
+					success: "transparent"
+				}
+			}
+		},
+		title: {
+			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
+			fontWeight: "600",
+			lineHeight: "1.25rem"
+		},
+		message: {
+			typography: "400 1rem/1.5rem 'Inter', sans-serif",
+			lineHeight: "1.25rem"
+		}
+	},
+	tabBar: {
+		badge: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			fontWeight: "700",
+			size: "1.25rem"
+		},
+		scrollbar: {
+			height: "0.25rem"
+		}
+	},
+	searchField: {
+		sectionHeader: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			letterSpacing: "0.125rem"
+		}
+	},
+	avatar: {
+		initials: {
+			fontFamily: "'Inter', sans-serif",
+			fontWeight: "500",
+			lineHeight: "1",
+			fontSize: {
+				xs: "0.75rem",
+				sm: "0.875rem",
+				md: "1rem",
+				lg: "1.125rem",
+				xl: "1.25rem"
+			}
+		}
+	},
+	codeBlock: {
+		fontFamily: "Menlo, Monaco, Consolas, Courier New, monospace",
+		fontSize: "0.75rem",
+		lineHeight: "1.25rem"
+	},
+	slider: {
+		thumb: {
+			shadow: {
+				"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+				hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+				active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+			},
+			background: "#ffffff"
+		}
+	},
+	accountCard: {
+		header: {
+			minHeight: "3rem"
+		},
+		minWidth: "18.75rem"
+	},
+	breadcrumbs: {
+		item: {
+			maxWidth: "11.25rem"
+		},
+		font: "400 0.75rem/1.125rem 'Inter', sans-serif"
+	},
+	cardLarge: {
+		maxWidth: "48rem"
+	},
+	checkbox: {
+		box: {
+			size: "1.25rem"
+		},
+		row: {
+			minHeight: "2rem"
+		}
+	},
+	emptyState: {
+		illustration: {
+			small: "5rem",
+			medium: "7.5rem",
+			large: "12.5rem"
+		},
+		maxWidth: "25rem",
+		text: {
+			maxWidth: "22.5rem"
+		},
+		actions: {
+			maxWidth: "18.75rem"
+		}
+	},
+	listItem: {
+		expandedIndent: {
+			compact: "3rem",
+			comfortable: "3.75rem"
+		}
+	},
+	transactionListItem: {
+		minHeight: "4.5rem"
+	},
+	status: {
+		pending: {
+			text: "#825800",
+			background: "#FFF3D6"
+		},
+		completed: {
+			text: "#007A4D",
+			background: "#CEF8E0"
+		},
+		failed: {
+			text: "#D31510",
+			background: "#FFEBE7"
+		},
+		cancelled: {
+			text: "#495057",
+			background: "#e9ecef"
+		},
+		processing: {
+			text: "#0265DC",
+			background: "#E0F2FF"
+		},
+		scheduled: {
+			text: "#7E2EBD",
+			background: "#F9F0FF"
+		}
+	},
+	transaction: {
+		credit: "#15A46E",
+		"credit-hover": "#008F5D",
+		debit: "#D31510",
+		"debit-hover": "#B40000",
+		pending: "#F68511",
+		neutral: "#6c757d"
+	},
+	track: {
+		background: "#dee2e6"
+	},
+	tooltip: {
+		border: "0.125rem dotted #dee2e6"
+	}
+};
+var semantic = {
+	elevation: {
+		none: "none",
+		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+		raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+		floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+		sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	opacity: {
+		disabled: "0.5",
+		full: "1",
+		hover: "0.8",
+		pressed: "0.7"
+	},
+	fontFamily: {
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	},
+	lineHeight: {
+		none: "1",
+		tight: "1.25rem",
+		normal: "1.5rem"
+	},
+	letterSpacing: {
+		tighter: "-0.125rem",
+		tight: "-0.0625rem",
+		normal: "0rem",
+		wide: "0.125rem"
+	},
+	fontWeight: {
+		regular: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700"
+	},
+	zIndex: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
+	border: {
+		"default": "0.0625rem solid #e9ecef",
+		subtle: "0.0625rem solid #dee2e6",
+		strong: "0.0625rem solid #343a40",
+		focus: "0.125rem solid #343a40",
+		tooltip: "0.125rem dotted #dee2e6",
+		width: {
+			thin: "0.0625rem",
+			thick: "0.125rem"
+		},
+		focusOffset: "0.125rem",
+		radius: {
+			none: "0",
+			xs: "0.125rem",
+			sm: "0.25rem",
+			md: "0.5rem",
+			lg: "0.75rem",
+			xl: "1rem",
+			"2xl": "1.5rem",
+			"3xl": "2rem",
+			circle: "10rem"
+		},
+		emphasis: "0.0625rem solid #dee2e6",
+		"input-hover": "0.0625rem solid #343a40"
+	},
+	size: {
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"800": "2rem",
+		"1200": "3rem",
+		"1500": "3.75rem",
+		"1800": "4.5rem",
+		"2000": "5rem",
+		"3000": "7.5rem",
+		"4500": "11.25rem",
+		"5000": "12.5rem",
+		"7500": "18.75rem",
+		"9000": "22.5rem",
+		"10000": "25rem",
+		"19200": "48rem",
+		pointerTarget: "1.5rem",
+		touchTarget: "2.75rem",
+		control: {
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem"
+		},
+		overlay: {
+			sm: "25rem",
+			md: "35rem",
+			lg: "45rem"
+		},
+		label: {
+			small: "1.25rem",
+			medium: "1.5rem",
+			large: "2rem"
+		},
+		menu: {
+			maxHeight: "18.75rem"
+		},
+		dimension: {
+			"1": "0.25rem",
+			"2": "0.5rem",
+			"4": "1rem",
+			"5": "1.25rem",
+			"6": "1.5rem",
+			"8": "2rem",
+			"12": "3rem",
+			"15": "3.75rem",
+			"18": "4.5rem",
+			"20": "5rem",
+			"30": "7.5rem",
+			"45": "11.25rem",
+			"50": "12.5rem",
+			"75": "18.75rem",
+			"90": "22.5rem",
+			"100": "25rem",
+			"192": "48rem"
+		},
+		icon: {
+			xs: "0.75rem",
+			sm: "1rem",
+			md: "1.25rem",
+			lg: "1.5rem",
+			xl: "2rem",
+			"2xl": "2.5rem"
+		},
+		avatar: {
+			xs: "1.5rem",
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem",
+			xl: "4rem"
+		}
+	},
+	spacing: {
+		separator: {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2rem",
+			xl: "3rem"
+		},
+		component: {
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem"
+		},
+		layout: {
+			none: "0",
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem",
+			"3xl": "1.75rem",
+			"4xl": "2rem",
+			"5xl": "2.25rem",
+			"6xl": "2.5rem",
+			"7xl": "3rem",
+			"8xl": "3.5rem",
+			"9xl": "4rem",
+			"10xl": "5rem",
+			"11xl": "6rem",
+			auto: "auto"
+		}
+	},
+	color: {
+		text: {
+			"default": "#212529",
+			emphasis: "#16191C",
+			subdued: "#495057",
+			inverse: "#ffffff",
+			disabled: "#adb5bd",
+			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00",
+			muted: "#495057",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
+		},
+		background: {
+			"default": "#f8f9fa",
+			subtle: "#ffffff",
+			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-active": "#16191C",
+			surface: "#e9ecef",
+			inverse: "#343a40",
+			interactive: "#0265DC",
+			"interactive-subtle": "#E0F2FF",
+			"interactive-subtle-hover": "#CAE8FF",
+			"interactive-subtle-active": "#B5DEFF",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			"error-hover": "#B40000",
+			"error-active": "#930000",
+			"error-subtle": "#FFEBE7",
+			success: "#007A4D",
+			"success-subtle": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-subtle": "#FFECCC",
+			disabled: "#dee2e6",
+			neutral: "#dee2e6",
+			"neutral-hover": "#ced4da",
+			"neutral-active": "#adb5bd",
+			transparent: "transparent",
+			progressTrack: "#dee2e6",
+			page: "#f8f9fa",
+			overlay: "rgba(33, 37, 41, 0.5)",
+			"hover-overlay": "rgba(33, 37, 41, 0.1)",
+			"active-overlay": "rgba(33, 37, 41, 0.15)",
+			"inverse-overlay": "rgba(255, 255, 255, 0.2)"
+		},
+		border: {
+			"default": "#e9ecef",
+			subtle: "#dee2e6",
+			control: "#6c757d",
+			strong: "#343a40",
+			interactive: "#0265DC",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00",
+			none: "transparent",
+			emphasis: "#dee2e6",
+			input: "#6c757d",
+			"input-hover": "#343a40",
+			focus: "#343a40",
+			accent: "#0265DC",
+			danger: "#D31510"
+		},
+		icon: {
+			"default": "#212529",
+			emphasis: "#16191C",
+			subdued: "#6c757d",
+			disabled: "#adb5bd",
+			inverse: "#ffffff",
+			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00",
+			muted: "#6c757d",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
+		},
+		financial: {
+			credit: "#15A46E",
+			"credit-hover": "#008F5D",
+			debit: "#D31510",
+			"debit-hover": "#B40000",
+			pending: "#F68511",
+			neutral: "#6c757d"
+		},
+		category: {
+			blue: "#3892F3",
+			"blue-strong": "#0265DC",
+			"blue-emphasis": "#0265DC",
+			"blue-subtle": "#E0F2FF",
+			purple: "#AD5FE8",
+			"purple-strong": "#7E2EBD",
+			"purple-emphasis": "#7E2EBD",
+			"purple-subtle": "#F9F0FF",
+			pink: "#FF42AB",
+			"pink-strong": "#DC007B",
+			"pink-emphasis": "#DC007B",
+			"pink-subtle": "#FFEFF9",
+			yellow: "#D39700",
+			"yellow-strong": "#9D6C00",
+			"yellow-emphasis": "#9D6C00",
+			"yellow-subtle": "#FFF3D6",
+			green: "#15A46E",
+			"green-strong": "#007A4D",
+			"green-emphasis": "#007A4D",
+			"green-subtle": "#CEF8E0",
+			red: "#F75C46",
+			"red-strong": "#D31510",
+			"red-emphasis": "#D31510",
+			"red-subtle": "#FFEBE7",
+			orange: "#E46F00",
+			"orange-strong": "#B14C00",
+			"orange-emphasis": "#B14C00",
+			"orange-subtle": "#FFECCC",
+			gray: "#495057",
+			"gray-strong": "#212529",
+			"gray-emphasis": "#212529",
+			"gray-subtle": "#e9ecef",
+			"blue-text": "#0265DC",
+			"purple-text": "#7E2EBD",
+			"pink-text": "#B90064",
+			"yellow-text": "#825800",
+			"green-text": "#007A4D",
+			"red-text": "#D31510",
+			"orange-text": "#B14C00",
+			"gray-text": "#212529",
+			"blue-muted": "#E0F2FF",
+			"purple-muted": "#F9F0FF",
+			"pink-muted": "#FFEFF9",
+			"yellow-muted": "#FFF3D6",
+			"green-muted": "#CEF8E0",
+			"red-muted": "#FFEBE7",
+			"orange-muted": "#FFECCC",
+			"gray-muted": "#e9ecef"
+		},
+		status: {
+			pending: "#825800",
+			"pending-bg": "#FFF3D6",
+			completed: "#007A4D",
+			"completed-bg": "#CEF8E0",
+			failed: "#D31510",
+			"failed-bg": "#FFEBE7",
+			cancelled: "#495057",
+			"cancelled-bg": "#e9ecef",
+			processing: "#0265DC",
+			"processing-bg": "#E0F2FF",
+			scheduled: "#7E2EBD",
+			"scheduled-bg": "#F9F0FF"
+		},
+		fill: {
+			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-pressed": "#16191C",
+			muted: "#e9ecef",
+			inverse: "#343a40",
+			accent: "#0265DC",
+			"accent-muted": "#E0F2FF",
+			"accent-muted-hover": "#CAE8FF",
+			"accent-muted-pressed": "#B5DEFF",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510",
+			"danger-hover": "#B40000",
+			"danger-pressed": "#930000",
+			"danger-muted": "#FFEBE7",
+			success: "#007A4D",
+			"success-muted": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-muted": "#FFECCC",
+			disabled: "#dee2e6",
+			"default": "#dee2e6",
+			"default-hover": "#ced4da",
+			"default-pressed": "#adb5bd",
+			none: "transparent",
+			"none-hover": "rgba(33, 37, 41, 0.1)",
+			"none-pressed": "rgba(33, 37, 41, 0.15)",
+			"inverse-none-hover": "rgba(255, 255, 255, 0.2)"
+		}
+	},
+	typography: {
+		display: "700 5rem/4.5rem 'Inter', sans-serif",
+		h1: "700 3rem/3rem 'Inter', sans-serif",
+		h2: "700 2rem/2.5rem 'Inter', sans-serif",
+		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
+		h4: "700 1.5rem/2rem 'Inter', sans-serif",
+		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
+		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
+		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
+		body: "400 1rem/1.5rem 'Inter', sans-serif",
+		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
+		overline: "700 0.75rem/1rem 'Inter', sans-serif",
+		caption: "400 0.75rem/1rem 'Inter', sans-serif",
+		button1: "500 1rem/1.5rem 'Inter', sans-serif",
+		button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
+		button3: "500 0.75rem/1rem 'Inter', sans-serif",
+		label: "600 0.875rem/1.25rem 'Inter', sans-serif",
+		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
+	},
+	motion: {
+		duration: {
+			normal: "200ms",
+			fast: "150ms",
+			slow: "300ms",
+			instant: "0ms",
+			moderate: "200ms"
+		},
+		easing: {
+			easeInOut: "ease-in-out",
+			easeOut: "ease-out",
+			standard: "ease-in-out",
+			decelerate: "ease-out",
+			accelerate: "ease-in"
+		},
+		transition: {
+			fast: "all 150ms ease-out",
+			normal: "all 200ms ease-in-out",
+			slow: "all 300ms ease-in-out",
+			feedback: "background-color 150ms ease-out, color 150ms ease-out",
+			focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+			press: "transform 150ms ease-out, opacity 150ms ease-out"
+		},
+		hover: "background-color 150ms ease-out, color 150ms ease-out",
+		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+		interactive: "transform 150ms ease-out, opacity 150ms ease-out",
+		distance: {
+			sm: "0.5rem"
+		}
+	},
+	layer: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
+	radius: {
+		none: "0",
+		xs: "0.125rem",
+		sm: "0.25rem",
+		md: "0.5rem",
+		lg: "0.75rem",
+		xl: "1rem",
+		"2xl": "1.5rem",
+		"3xl": "2rem",
+		full: "10rem"
+	},
+	space: {
+		"0": "0",
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"300": "0.75rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"700": "1.75rem",
+		"800": "2rem",
+		"900": "2.25rem",
+		"1000": "2.5rem",
+		"1200": "3rem",
+		"1400": "3.5rem",
+		"1600": "4rem",
+		"2000": "5rem",
+		"2400": "6rem",
+		inset: {
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem"
+		}
+	},
+	surface: {
+		base: "#f8f9fa",
+		raised: "#ffffff",
+		scrim: "rgba(33, 37, 41, 0.5)"
+	}
+};
+var tokensJson = {
+	base: base,
+	component: component,
+	semantic: semantic
+};
+
+export { base, component, tokensJson as default, semantic };
+//# sourceMappingURL=tokens.json.mjs.map