@number10/jsx-components 5.0.0

package/dist/theme-defaults.js

@@ -0,0 +1,1288 @@
+import { createTextStyleTokens as e, ensureContrast as t, getContrastRatio as n, getPresetWithMode as r, numberToHex as i, registerComponentThemeDefaults as a, resolveContrastTextColor as o, resolveContrastTintColor as s } from "@number10/jsx-core";
+//#region src/theme-defaults.ts
+function c(e, r, i = 4.5) {
+	for (let t of r) if (n(t, e) >= i) return t;
+	return [
+		...r.map((n) => t(n, e, i)),
+		t(0, e, i),
+		t(16777215, e, i)
+	].reduce((t, r) => n(r, e) > n(t, e) ? r : t);
+}
+function l(e, t, n = 4.5) {
+	return i(c(e, t, n));
+}
+function u(t) {
+	let n = t, r = e(n.text.DEFAULT.toString()), i = [
+		n.text.lightest.toNumber(),
+		16777215,
+		n.text.light.toNumber(),
+		n.text.dark.toNumber(),
+		n.text.darkest.toNumber(),
+		0
+	], a = [
+		n.text.dark.toNumber(),
+		n.text.darkest.toNumber(),
+		0,
+		n.text.DEFAULT.toNumber(),
+		n.text.light.toNumber(),
+		16777215
+	], u = {
+		alpha: 1,
+		visible: !0
+	}, d = {
+		text: "",
+		alpha: 1,
+		visible: !0,
+		style: r.DEFAULT
+	}, f = {
+		size: 24,
+		tint: n.border.dark.toNumber()
+	}, p = {
+		alpha: 1,
+		visible: !0
+	}, m = {
+		alpha: 1,
+		visible: !0
+	}, h = {
+		variant: "spinner",
+		size: "medium",
+		color: n.primary.DEFAULT.toNumber(),
+		trackColor: n.primary.DEFAULT.toNumber(),
+		animationSpeed: 2.4,
+		gap: 8,
+		dotCount: 3,
+		dotSize: 7,
+		pulseScale: 1,
+		labelStyle: {
+			...r.small,
+			color: n.text.light.toString()
+		},
+		labels: { loading: "" }
+	}, g = {
+		backgroundColor: n.surface.dark.toNumber(),
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		padding: 14,
+		gap: 18,
+		previewSize: 116,
+		previewGap: 10,
+		previewBorderWidth: 2,
+		previewCornerRadius: 8,
+		trackLength: 280,
+		trackHeight: 14,
+		gradientSteps: 32,
+		controlGap: 12,
+		controlBackgroundColor: n.surface.medium.toNumber(),
+		controlBackgroundAlpha: .65,
+		closeButtonSize: 24,
+		closeButtonCornerRadius: 5,
+		thumbSize: 18,
+		thumbBorderColor: 16777215,
+		swatchSize: 18,
+		swatchGap: 6,
+		swatchCornerRadius: 4,
+		labelStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "12px"
+		},
+		valueStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "12px"
+		},
+		titleStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "16px",
+			fontStyle: "bold"
+		},
+		hexStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontStyle: "bold"
+		},
+		labels: {
+			title: "Color Picker",
+			tone: "Tone",
+			vivid: "Vivid",
+			muted: "Muted",
+			hue: "Hue",
+			saturation: "Saturation",
+			lightness: "Lightness",
+			close: "X"
+		}
+	}, _ = {
+		checkedColor: n.primary.DEFAULT.toNumber(),
+		indeterminateColor: n.primary.medium.toNumber(),
+		color: n.border.medium.toNumber(),
+		gap: 10,
+		size: 20,
+		disabledAlpha: .5,
+		labelPosition: "right",
+		labelStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "14px"
+		}
+	}, v = {
+		animated: !1,
+		maxHeight: 200,
+		animationConfig: "gentle",
+		direction: "column",
+		effect: "none",
+		effectConfig: {
+			magnitude: .02,
+			time: 150
+		},
+		headerStyle: {
+			backgroundColor: n.surface.dark.toNumber(),
+			padding: 10,
+			gap: 10,
+			cornerRadius: 5,
+			width: "fill"
+		},
+		contentStyle: {
+			backgroundColor: n.surface.light.toNumber(),
+			padding: 10,
+			cornerRadius: 5,
+			width: "fill"
+		},
+		Icon: { size: 24 },
+		textStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "18px"
+		}
+	}, y = {
+		tone: "neutral",
+		variant: "solid",
+		size: "medium",
+		maxCount: 99,
+		disabledAlpha: .5,
+		textStyle: { fontFamily: "Arial" }
+	}, b = {
+		tone: "neutral",
+		variant: "soft",
+		size: "medium",
+		disabledAlpha: .5,
+		textStyle: { fontFamily: "Arial" },
+		closeSize: 16
+	}, x = n.primary.dark.toNumber(), S = o(n, "text/on-brand", x), C = s(n, "icon/on-brand", x, 3), w = n.surface.lightest.toNumber(), T = l(w, a), E = c(w, a, 3), D = n.error.dark.toNumber(), O = o(n, "text/on-danger", D), k = s(n, "icon/on-danger", D, 3), A = {
+		variant: "primary",
+		size: "medium",
+		backgroundColor: x,
+		backgroundAlpha: 1,
+		borderColor: n.primary.darkest.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		gap: 8,
+		padding: {
+			top: 8,
+			bottom: 8,
+			left: 16,
+			right: 16
+		},
+		justifyContent: "center",
+		alignItems: "center",
+		effect: "press",
+		effectConfig: {
+			intensity: .94,
+			time: 140
+		},
+		iconSize: 18,
+		height: 40,
+		disabledColor: n.surface.medium.toNumber(),
+		disabledTextColor: n.text.light.toString(),
+		disabledIconTint: n.text.light.toNumber(),
+		disabledAlpha: .48,
+		textStyle: {
+			color: S,
+			fontFamily: "Arial",
+			fontSize: "16px",
+			fontStyle: "bold"
+		},
+		Text: { style: {
+			color: S,
+			fontFamily: "Arial",
+			fontSize: "16px",
+			fontStyle: "bold"
+		} },
+		Icon: {
+			size: 18,
+			tint: C
+		},
+		primary: {
+			backgroundColor: x,
+			borderColor: n.primary.darkest.toNumber(),
+			textStyle: {
+				color: S,
+				fontStyle: "bold"
+			},
+			Icon: { tint: C }
+		},
+		secondary: {
+			backgroundColor: w,
+			backgroundAlpha: .92,
+			borderColor: n.border.light.toNumber(),
+			borderWidth: 1,
+			textStyle: {
+				color: T,
+				fontStyle: "bold"
+			},
+			Icon: { tint: E }
+		},
+		outline: {
+			backgroundColor: n.primary.dark.toNumber(),
+			backgroundAlpha: .08,
+			borderColor: n.primary.light.toNumber(),
+			borderWidth: 2,
+			textStyle: {
+				color: n.primary.light.toString(),
+				fontStyle: "bold"
+			},
+			Icon: { tint: n.primary.light.toNumber() }
+		},
+		ghost: {
+			backgroundColor: n.surface.light.toNumber(),
+			backgroundAlpha: .18,
+			borderColor: n.border.medium.toNumber(),
+			borderAlpha: .35,
+			borderWidth: 1,
+			textStyle: {
+				color: n.text.light.toString(),
+				fontStyle: "bold"
+			},
+			Icon: { tint: n.text.light.toNumber() }
+		},
+		danger: {
+			backgroundColor: D,
+			borderColor: n.error.darkest.toNumber(),
+			textStyle: {
+				color: O,
+				fontStyle: "bold"
+			},
+			Icon: { tint: k }
+		},
+		small: {
+			height: 32,
+			padding: {
+				top: 6,
+				bottom: 6,
+				left: 12,
+				right: 12
+			},
+			cornerRadius: 6,
+			gap: 6,
+			iconSize: 15,
+			textStyle: { fontSize: "12px" },
+			Icon: { size: 15 }
+		},
+		medium: {
+			height: 40,
+			padding: {
+				top: 8,
+				bottom: 8,
+				left: 16,
+				right: 16
+			},
+			cornerRadius: 8,
+			gap: 8,
+			iconSize: 18,
+			Icon: { size: 18 }
+		},
+		large: {
+			height: 48,
+			padding: {
+				top: 10,
+				bottom: 10,
+				left: 20,
+				right: 20
+			},
+			cornerRadius: 10,
+			gap: 10,
+			iconSize: 22,
+			textStyle: { fontSize: "18px" },
+			Icon: { size: 22 }
+		}
+	}, j = {
+		backgroundColor: n.surface.dark.toNumber(),
+		backgroundAlpha: .95,
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		padding: 2,
+		itemHeight: 36,
+		itemGap: 1,
+		itemPadding: {
+			left: 12,
+			right: 12,
+			top: 6,
+			bottom: 6
+		},
+		itemCornerRadius: 5,
+		itemStyle: {
+			backgroundColor: n.surface.dark.toNumber(),
+			backgroundAlpha: 0,
+			borderWidth: 0
+		},
+		itemHoverStyle: {
+			backgroundColor: n.surface.medium.toNumber(),
+			backgroundAlpha: .55
+		},
+		itemSelectedStyle: {
+			backgroundColor: n.primary.dark.toNumber(),
+			backgroundAlpha: 1,
+			borderColor: n.primary.dark.toNumber(),
+			borderWidth: 1
+		},
+		itemDisabledStyle: { alpha: .45 },
+		disabledAlpha: .5,
+		textStyle: {
+			...r.small,
+			color: l(n.surface.dark.toNumber(), a)
+		},
+		selectedTextStyle: {
+			color: l(n.primary.dark.toNumber(), i),
+			fontStyle: "bold"
+		},
+		disabledTextStyle: { color: n.text.light.toString() },
+		emptyStyle: {
+			color: l(n.surface.dark.toNumber(), a),
+			fontSize: "14px"
+		},
+		labels: { empty: "No items" }
+	}, M = {
+		buttonVariant: "secondary",
+		buttonSize: "medium",
+		placement: "bottom-start",
+		width: 220,
+		gap: 6,
+		iconGap: 8
+	}, N = {
+		backdropColor: 0,
+		backdropOpacity: .5,
+		openDuration: 320,
+		closeDuration: 260
+	}, P = {
+		gap: 10,
+		padding: 0,
+		valueWidth: 78,
+		controlHeight: 34,
+		controlGap: 0,
+		buttonControlSize: 34,
+		buttonGap: 0,
+		buttonPlacement: "split",
+		buttonDirection: "row",
+		buttonVariant: "secondary",
+		buttonSize: "small",
+		buttonTextStyle: {
+			...r.DEFAULT,
+			fontStyle: "bold"
+		},
+		buttonIndicatorColor: n.text.DEFAULT.toNumber(),
+		buttonIndicatorActiveColor: n.surface.DEFAULT.toNumber(),
+		labelPosition: "left",
+		valueBackgroundColor: n.surface.light.toNumber(),
+		valueBackgroundAlpha: 1,
+		valueBorderColor: n.border.medium.toNumber(),
+		valueBorderWidth: 1,
+		valueCornerRadius: 0,
+		valuePadding: {
+			left: 6,
+			right: 6,
+			top: 4,
+			bottom: 4
+		},
+		disabledAlpha: .5,
+		repeatOnHold: !0,
+		holdDelay: 350,
+		repeatInterval: 90,
+		labelStyle: {
+			...r.medium,
+			color: n.text.DEFAULT.toString()
+		},
+		valueStyle: {
+			...r.medium,
+			color: n.text.DEFAULT.toString(),
+			fontStyle: "bold"
+		},
+		labels: {
+			decrement: "-",
+			increment: "+",
+			value: "Value"
+		},
+		Button: {
+			minWidth: 34,
+			width: 34,
+			height: 34,
+			padding: 0,
+			cornerRadius: 0,
+			backgroundColor: n.primary.dark.toNumber(),
+			borderColor: n.primary.dark.toNumber(),
+			borderWidth: 1,
+			textStyle: {
+				...r.DEFAULT,
+				fontStyle: "bold",
+				color: o(n, "text/on-brand", n.primary.dark.toNumber())
+			}
+		}
+	}, F = {
+		columns: 6,
+		swatchSize: 28,
+		swatchGap: 8,
+		rowGap: 8,
+		itemWidth: 28,
+		swatchCornerRadius: 5,
+		swatchBorderColor: n.border.medium.toNumber(),
+		swatchBorderWidth: 1,
+		swatchSelectedBorderColor: n.surface.lightest.toNumber(),
+		swatchSelectedBorderWidth: 3,
+		swatchDisabledAlpha: .45,
+		selectedCheckColor: n.surface.lightest.toNumber(),
+		disabledAlpha: .5,
+		showTitle: !0,
+		showHex: !1,
+		padding: 0,
+		gap: 10,
+		titleStyle: {
+			...r.medium,
+			color: n.text.DEFAULT.toString(),
+			fontStyle: "bold"
+		},
+		emptyStyle: {
+			...r.small,
+			color: n.text.light.toString()
+		},
+		hexStyle: {
+			...r.small,
+			color: n.text.light.toString()
+		},
+		labels: {
+			title: "Palette",
+			empty: "No colors"
+		}
+	}, I = {
+		width: 240,
+		height: 22,
+		orientation: "horizontal",
+		labelPosition: "right",
+		trackColor: n.surface.dark.toNumber(),
+		fillColor: n.success.DEFAULT.toNumber(),
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 11,
+		gap: 8,
+		disabledAlpha: .5,
+		labelStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "13px"
+		}
+	}, L = {
+		width: "fill",
+		barHeight: 24,
+		gap: 8,
+		labelStyle: {
+			color: "#e0e7ff",
+			fontSize: "14px"
+		},
+		percentageStyle: {
+			color: "#9fb3c8",
+			fontSize: "13px"
+		},
+		cancelButtonSize: "small",
+		labels: {
+			cancel: "Cancel",
+			loading: "Loading..."
+		}
+	}, R = {
+		trackColor: n.surface.dark.toNumber(),
+		trackFilledColor: n.primary.dark.toNumber(),
+		trackHeight: 6,
+		trackBorderRadius: 3,
+		trackLength: 200,
+		trackHoverColor: n.surface.dark.toNumber(),
+		thumbColor: n.primary.light.toNumber(),
+		thumbSize: 20,
+		thumbBorderColor: n.border.light.toNumber(),
+		thumbBorderWidth: 2,
+		thumbHoverColor: n.primary.light.toNumber(),
+		thumbActiveColor: n.primary.dark.toNumber(),
+		thumbDragScale: 1.1,
+		markColor: n.border.medium.toNumber(),
+		markHeight: 8,
+		markWidth: 2,
+		labelStyle: r.small,
+		labelOffset: 10,
+		valueLabel: {
+			backgroundColor: n.background.dark.toNumber(),
+			textStyle: {
+				...r.small,
+				color: n.text.light.toString()
+			},
+			padding: {
+				left: 6,
+				right: 6,
+				top: 4,
+				bottom: 4
+			},
+			cornerRadius: 4,
+			offset: 8
+		},
+		minDistance: 0,
+		disabledAlpha: .4
+	}, z = {
+		selectedColor: n.primary.DEFAULT.toNumber(),
+		color: n.border.dark.toNumber(),
+		borderWidth: 2,
+		gap: 8,
+		size: 18,
+		innerSize: 8,
+		disabledAlpha: .5,
+		labelPosition: "right",
+		labelStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "14px"
+		}
+	}, ee = {
+		direction: "column",
+		gap: 8
+	}, B = {
+		size: "medium",
+		gap: 4,
+		iconSize: 24,
+		filledColor: "#fbbf24",
+		emptyColor: "#475569",
+		disabledAlpha: .5,
+		labelStyle: {
+			color: n.text.DEFAULT.toString(),
+			fontSize: "13px"
+		},
+		labels: { rating: "" }
+	}, V = {
+		variant: "solid",
+		size: "md",
+		backgroundColor: n.surface.light.toNumber(),
+		backgroundAlpha: 1,
+		padding: 16,
+		gap: 8,
+		dividerColor: n.border.light.toNumber(),
+		itemGap: 8,
+		sectionGap: 10,
+		headerStyle: {
+			gap: 10,
+			padding: {
+				top: 0,
+				right: 0,
+				bottom: 6,
+				left: 0
+			},
+			width: "fill"
+		},
+		footerStyle: {
+			gap: 8,
+			padding: {
+				top: 6,
+				right: 0,
+				bottom: 0,
+				left: 0
+			},
+			width: "fill"
+		},
+		sectionStyle: {
+			gap: 8,
+			padding: {
+				top: 4,
+				right: 0,
+				bottom: 8,
+				left: 0
+			},
+			width: "fill",
+			titleStyle: {
+				...r.medium,
+				color: n.text.dark.toString(),
+				fontStyle: "bold"
+			}
+		},
+		itemStyle: {
+			gap: 8,
+			padding: {
+				top: 8,
+				bottom: 8,
+				left: 10,
+				right: 10
+			},
+			width: "fill",
+			cornerRadius: 8,
+			backgroundColor: n.surface.lightest.toNumber(),
+			textStyle: {
+				...r.medium,
+				color: n.text.dark.toString()
+			},
+			active: {
+				backgroundColor: n.primary.lightest.toNumber(),
+				borderColor: n.primary.light.toNumber(),
+				borderWidth: 1,
+				backgroundAlpha: .9
+			},
+			disabledAlpha: .5
+		},
+		badgeStyle: {
+			backgroundColor: n.primary.light.toNumber(),
+			backgroundAlpha: .15,
+			cornerRadius: 6,
+			padding: {
+				top: 4,
+				bottom: 4,
+				left: 8,
+				right: 8
+			},
+			textStyle: {
+				...r.small,
+				color: o(n, "text/strong", n.primary.light.toNumber()),
+				fontStyle: "bold"
+			}
+		},
+		variants: {
+			solid: {
+				backgroundColor: n.surface.light.toNumber(),
+				borderColor: n.border.light.toNumber(),
+				borderWidth: 1
+			},
+			muted: {
+				backgroundColor: n.surface.medium.toNumber(),
+				backgroundAlpha: .85,
+				borderColor: n.border.light.toNumber(),
+				borderWidth: 1
+			},
+			ghost: {
+				backgroundColor: n.background.lightest.toNumber(),
+				backgroundAlpha: .6,
+				borderWidth: 0
+			},
+			inset: {
+				backgroundColor: n.surface.dark.toNumber(),
+				backgroundAlpha: 1,
+				borderColor: n.border.medium.toNumber(),
+				borderWidth: 1
+			}
+		},
+		sizes: {
+			sm: {
+				padding: 10,
+				gap: 6
+			},
+			md: {
+				padding: 16,
+				gap: 8
+			},
+			lg: {
+				padding: {
+					top: 20,
+					bottom: 20,
+					left: 16,
+					right: 16
+				},
+				gap: 12
+			}
+		}
+	}, H = {
+		tabListStyle: {
+			backgroundColor: n.surface.dark.toNumber(),
+			padding: {
+				left: 8,
+				right: 8,
+				top: 8,
+				bottom: 0
+			},
+			cornerRadius: {
+				tl: 6,
+				tr: 6,
+				bl: 0,
+				br: 0
+			},
+			width: "fill",
+			gap: 10,
+			alignItems: "end",
+			justifyContent: "start"
+		},
+		tabStyle: {
+			backgroundColor: n.surface.medium.toNumber(),
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			padding: {
+				left: 8,
+				right: 8,
+				top: 8,
+				bottom: 3
+			},
+			cornerRadius: {
+				tl: 6,
+				tr: 6,
+				bl: 0,
+				br: 0
+			}
+		},
+		tabActiveStyle: {
+			padding: {
+				left: 8,
+				right: 8,
+				top: 8,
+				bottom: 8
+			},
+			backgroundColor: n.primary.DEFAULT.toNumber(),
+			borderColor: n.primary.dark.toNumber(),
+			borderWidth: 2
+		},
+		tabDisabledStyle: { alpha: .4 },
+		panelStyle: {
+			backgroundColor: n.surface.light.toNumber(),
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			padding: 10,
+			cornerRadius: {
+				tl: 0,
+				tr: 0,
+				bl: 6,
+				br: 6
+			},
+			width: "fill"
+		}
+	}, U = {
+		variant: "info",
+		width: 320,
+		minHeight: 58,
+		gap: 10,
+		contentGap: 2,
+		accentWidth: 4,
+		prefixWidth: 24,
+		padding: {
+			left: 10,
+			right: 10,
+			top: 9,
+			bottom: 9
+		},
+		backgroundColor: n.surface.dark.toNumber(),
+		backgroundAlpha: .98,
+		borderColor: n.border.dark.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		closeButtonSize: 24,
+		titleStyle: {
+			...r.small,
+			color: o(n, "text/strong", n.surface.dark.toNumber()),
+			fontStyle: "bold"
+		},
+		messageStyle: {
+			...r.small,
+			color: o(n, "text/muted", n.surface.dark.toNumber())
+		},
+		closeTextStyle: {
+			...r.small,
+			color: o(n, "text/muted", n.surface.dark.toNumber()),
+			fontStyle: "normal"
+		},
+		labels: { close: "x" },
+		variants: {
+			info: {
+				accentColor: n.info.DEFAULT.toNumber(),
+				borderColor: n.info.dark.toNumber()
+			},
+			success: {
+				accentColor: n.success.DEFAULT.toNumber(),
+				borderColor: n.success.dark.toNumber()
+			},
+			warning: {
+				accentColor: n.warning.DEFAULT.toNumber(),
+				borderColor: n.warning.dark.toNumber()
+			},
+			error: {
+				accentColor: n.error.DEFAULT.toNumber(),
+				borderColor: n.error.dark.toNumber()
+			}
+		},
+		Button: { ghost: {
+			padding: 0,
+			backgroundAlpha: 0,
+			textStyle: {
+				color: n.text.light.toString(),
+				fontStyle: "bold"
+			}
+		} }
+	}, W = {
+		position: "top-right",
+		width: 320,
+		gap: 8,
+		offset: 16,
+		duration: 4e3,
+		depth: 1200
+	}, G = {
+		wrap: !0,
+		paddingOffset: 0,
+		textStyle: r.DEFAULT
+	}, K = {
+		borderColor: n.border.medium.toNumber(),
+		trackColor: n.surface.dark.toNumber(),
+		trackCornerRadius: 0,
+		thumbColor: n.primary.DEFAULT.toNumber(),
+		thumbActiveColor: n.primary.dark.toNumber(),
+		thumbBorderColor: n.primary.light.toNumber(),
+		thumbBorderWidth: 1,
+		thumbCornerRadius: 0,
+		borderWidth: 1,
+		cornerRadius: 0,
+		minThumbSize: 30,
+		size: 24
+	}, q = {
+		showVerticalSlider: "auto",
+		showHorizontalSlider: "auto"
+	}, J = {
+		rowTextStyle: r.small,
+		valueTextStyle: r.small,
+		rowGap: 4,
+		columnGap: 8
+	}, Y = {
+		backgroundColor: n.surface.DEFAULT.toNumber(),
+		cornerRadius: 8,
+		maxWidth: 600,
+		showClose: !0,
+		Header: {
+			padding: {
+				left: 24,
+				right: 24,
+				top: 20,
+				bottom: 16
+			},
+			gap: 12,
+			borderColor: n.border.light.toNumber(),
+			closeButton: {
+				size: 32,
+				cornerRadius: 4,
+				backgroundColor: n.surface.dark.toNumber(),
+				borderColor: n.border.light.toNumber(),
+				borderWidth: 1
+			},
+			textStyle: r.heading
+		},
+		Content: {
+			padding: {
+				left: 24,
+				right: 24,
+				top: 16,
+				bottom: 16
+			},
+			gap: 12
+		},
+		Actions: {
+			padding: {
+				left: 24,
+				right: 24,
+				top: 16,
+				bottom: 20
+			},
+			gap: 12,
+			justifyContent: "end",
+			borderColor: n.border.light.toNumber()
+		}
+	}, X = {
+		maxWidth: 500,
+		variants: {
+			info: {},
+			warning: {},
+			destructive: {},
+			success: {}
+		}
+	}, Z = {
+		backdropAlpha: .5,
+		backdropColor: 0,
+		backgroundColor: n.surface.dark.toNumber(),
+		backgroundAlpha: 1,
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		panelCornerRadius: 16,
+		handleWidth: 36,
+		handleHeight: 5,
+		handleColor: n.border.dark.toNumber()
+	}, Q = {
+		placement: "bottom",
+		offset: 8,
+		depth: 1100,
+		closeOnOutside: !0,
+		closeOnEscape: !0,
+		viewportPadding: 8,
+		openDuration: 120,
+		closeDuration: 100,
+		backgroundColor: n.surface.dark.toNumber(),
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		padding: 10,
+		gap: 8
+	}, $ = {
+		width: 220,
+		itemHeight: 34,
+		itemGap: 8,
+		itemPadding: {
+			left: 10,
+			right: 10,
+			top: 6,
+			bottom: 6
+		},
+		itemCornerRadius: 5,
+		backgroundColor: n.surface.dark.toNumber(),
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		padding: 6,
+		gap: 2,
+		textStyle: {
+			...r.small,
+			color: n.text.medium.toString()
+		},
+		disabledTextColor: n.text.lightest.toString(),
+		dangerTextColor: n.error.darkest.toString(),
+		dangerBackgroundColor: n.error.dark.toNumber()
+	}, te = {
+		orientation: "horizontal",
+		thickness: 1,
+		color: n.border.medium.toNumber()
+	}, ne = {
+		trigger: {
+			backgroundColor: n.surface.light.toNumber(),
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 7,
+			padding: {
+				left: 12,
+				right: 10,
+				top: 9,
+				bottom: 9
+			},
+			width: "fill",
+			gap: 8
+		},
+		triggerHover: { borderColor: n.primary.DEFAULT.toNumber() },
+		triggerOpen: {
+			borderColor: n.primary.DEFAULT.toNumber(),
+			borderWidth: 2,
+			backgroundColor: n.surface.lightest.toNumber()
+		},
+		triggerDisabled: {
+			backgroundColor: n.surface.light.toNumber(),
+			alpha: .5
+		},
+		arrow: {
+			color: n.text.dark.toString(),
+			size: 12
+		},
+		selectionIndicator: {
+			color: n.primary.dark.toString(),
+			size: 16
+		},
+		overlay: {
+			backgroundColor: n.surface.lightest.toNumber(),
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 7,
+			maxHeight: 300,
+			padding: 6
+		},
+		option: {
+			padding: {
+				left: 10,
+				right: 10,
+				top: 8,
+				bottom: 8
+			},
+			cornerRadius: 5,
+			gap: 8
+		},
+		optionSelected: {
+			backgroundColor: n.primary.lightest.toNumber(),
+			borderColor: n.primary.light.toNumber(),
+			borderWidth: 1,
+			backgroundAlpha: .9
+		},
+		optionDisabled: { alpha: .3 },
+		optionGap: 2,
+		filterInput: {
+			backgroundColor: n.surface.lightest.toNumber(),
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 6,
+			padding: {
+				left: 10,
+				right: 10,
+				top: 6,
+				bottom: 6
+			},
+			width: "calc(100% - 20px)"
+		},
+		textStyle: {
+			...r.DEFAULT,
+			color: n.text.DEFAULT.toString()
+		},
+		placeholderStyle: {
+			...r.DEFAULT,
+			color: n.text.light.toString()
+		},
+		animationConfig: "stiff"
+	}, re = {
+		charSpacing: 2,
+		cursorColor: n.secondary.DEFAULT.toNumber(),
+		cursorWidth: 3,
+		cursorBlinkSpeed: 530,
+		selectionColor: n.accent.DEFAULT.toNumber(),
+		selectionAlpha: .75,
+		lineHeight: 1.2,
+		wordWrap: !1,
+		disabledBackgroundColor: n.surface.medium.toNumber(),
+		disabledBorderColor: n.border.light.toNumber(),
+		disabledAlpha: .6,
+		focusedBorderColor: n.primary.DEFAULT.toNumber(),
+		backgroundColor: n.surface.lightest.toNumber(),
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 7,
+		padding: 10,
+		textStyle: {
+			...r.DEFAULT,
+			color: n.text.dark.toString()
+		},
+		placeholderStyle: {
+			...r.DEFAULT,
+			color: n.text.light.toString()
+		}
+	}, ie = {
+		position: "top",
+		showDelay: 1e3,
+		hideDelay: 500,
+		offset: 8,
+		textStyle: {
+			fontSize: "12px",
+			fontFamily: "Arial",
+			color: n.text.dark.toString(),
+			backgroundColor: n.warning.medium.toString(),
+			padding: {
+				x: 2,
+				y: 2
+			}
+		},
+		cornerRadius: 8,
+		animation: {
+			fadeIn: 200,
+			fadeOut: 200,
+			move: {
+				dx: 0,
+				dy: -20
+			},
+			pulse: !1,
+			pulseScale: [.75, 1.25]
+		}
+	}, ae = {
+		size: "medium",
+		textColor: n.text.light.toString(),
+		overlayAlpha: .85,
+		backgroundColor: n.surface.darkest.toNumber(),
+		backgroundAlpha: .95,
+		borderColor: n.border.medium.toNumber(),
+		borderWidth: 1,
+		cornerRadius: 8,
+		itemHeight: 40,
+		visibleItems: 5,
+		itemPadding: {
+			left: 12,
+			right: 12
+		},
+		disabledAlpha: .5,
+		textStyle: {
+			...r.medium,
+			color: l(n.surface.darkest.toNumber(), a)
+		},
+		selectedTextStyle: {
+			...r.medium,
+			color: l(n.surface.darkest.toNumber(), a),
+			fontStyle: "bold"
+		},
+		disabledTextStyle: { color: n.text.lightest.toString() },
+		labels: { empty: "No items" }
+	};
+	return {
+		View: u,
+		Text: d,
+		Icon: f,
+		Image: p,
+		Sprite: m,
+		ActivityIndicator: h,
+		Accordion: v,
+		AlertDialog: X,
+		Badge: y,
+		Tag: b,
+		BottomSheet: Z,
+		Button: A,
+		Checkbox: _,
+		ColorPicker: g,
+		ContextMenu: $,
+		DebugPanel: J,
+		Dialog: Y,
+		Divider: te,
+		Dropdown: ne,
+		ListBox: j,
+		MenuButton: M,
+		Modal: N,
+		NumberInput: P,
+		PalettePicker: F,
+		Popover: Q,
+		ProgressBar: I,
+		ProgressView: L,
+		RadioButton: z,
+		RadioGroup: ee,
+		RatingBar: B,
+		Sidebar: V,
+		NotificationStack: W,
+		Tabs: H,
+		TextInput: re,
+		Toast: U,
+		Toolbar: {
+			orientation: "horizontal",
+			density: "normal",
+			itemWidth: 42,
+			itemHeight: 36,
+			compactItemWidth: 38,
+			compactItemHeight: 38,
+			itemGap: 6,
+			iconSize: 18,
+			compactIconSize: 16,
+			buttonSize: "small",
+			compactButtonSize: "small",
+			backgroundColor: n.surface.dark.toNumber(),
+			backgroundAlpha: .92,
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 8,
+			padding: 4,
+			gap: 6,
+			separatorColor: n.border.medium.toNumber(),
+			separatorThickness: 1,
+			separatorLength: 26,
+			disabledAlpha: .55,
+			textStyle: {
+				...r.small,
+				color: n.text.DEFAULT.toString(),
+				fontStyle: "bold"
+			},
+			activeTextStyle: {
+				color: n.text.DEFAULT.toString(),
+				fontStyle: "bold"
+			},
+			disabledTextStyle: { color: n.text.lightest.toString() },
+			menuIndicatorStyle: {
+				...r.small,
+				color: n.text.light.toString()
+			},
+			labels: {
+				overflow: "More",
+				menuIndicator: "v"
+			},
+			Icon: { tint: n.text.DEFAULT.toNumber() },
+			Button: {
+				minWidth: 0,
+				padding: {
+					left: 8,
+					right: 8,
+					top: 4,
+					bottom: 4
+				},
+				cornerRadius: 5,
+				gap: 6
+			}
+		},
+		WrapText: G,
+		WheelPicker: ae,
+		ScrollSlider: K,
+		ScrollView: q,
+		SegmentedControl: {
+			orientation: "horizontal",
+			size: "medium",
+			variant: "solid",
+			backgroundColor: n.surface.dark.toNumber(),
+			backgroundAlpha: .95,
+			borderColor: n.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 8,
+			padding: 3,
+			gap: 8,
+			segmentGap: 0,
+			segmentWidth: 92,
+			segmentHeight: 34,
+			segmentPadding: {
+				left: 10,
+				right: 10,
+				top: 6,
+				bottom: 6
+			},
+			segmentCornerRadius: 6,
+			segmentStyle: {
+				backgroundColor: n.surface.dark.toNumber(),
+				backgroundAlpha: 0,
+				borderWidth: 0
+			},
+			segmentHoverStyle: {
+				backgroundColor: n.surface.medium.toNumber(),
+				backgroundAlpha: .55
+			},
+			segmentSelectedStyle: {
+				backgroundColor: n.primary.dark.toNumber(),
+				backgroundAlpha: 1,
+				borderColor: n.primary.dark.toNumber(),
+				borderWidth: 1
+			},
+			segmentDisabledStyle: { alpha: .45 },
+			iconGap: 6,
+			iconSize: 16,
+			disabledAlpha: .5,
+			labelPosition: "none",
+			labelStyle: {
+				...r.medium,
+				color: n.text.DEFAULT.toString()
+			},
+			textStyle: {
+				...r.small,
+				color: o(n, "text/default", n.surface.dark.toNumber()),
+				fontStyle: "bold"
+			},
+			selectedTextStyle: {
+				color: o(n, "text/on-brand", n.primary.dark.toNumber()),
+				fontStyle: "bold"
+			},
+			disabledTextStyle: { color: n.text.lightest.toString() },
+			labels: { group: "Options" }
+		},
+		Slider: R,
+		Tooltip: ie,
+		Toggle: {
+			width: 50,
+			height: 28,
+			thumbSize: 24,
+			trackColorOff: n.surface.dark.toNumber(),
+			trackColorOn: n.primary.DEFAULT.toNumber(),
+			trackBorderColorOff: n.border.medium.toNumber(),
+			trackBorderColorOn: n.primary.dark.toNumber(),
+			trackBorderWidth: 1,
+			thumbColor: n.surface.lightest.toNumber(),
+			thumbBorderColor: n.border.light.toNumber(),
+			thumbBorderWidth: 1,
+			disabledColor: n.border.medium.toNumber(),
+			disabledAlpha: .5,
+			padding: 2,
+			duration: 200,
+			gap: 8,
+			labelStyle: r.DEFAULT,
+			labelPosition: "right"
+		}
+	};
+}
+function d(e = "oceanBlue", t = "light") {
+	return u(r(e, t).colors);
+}
+var f = d();
+function p() {
+	for (let e of Object.keys(f)) a(e, (t) => u(t)[e]);
+}
+//#endregion
+export { u as buildPortableThemeDefaults, d as createPortableThemeDefaults, p as registerPortableDefaults };