@jonapin006/tiger 1.0.45 → 1.0.47

package/dist/tiger.es.js

@@ -41,25 +41,41 @@ var v = /* @__PURE__ */ function(e) {
 			xlarge: "text-[32px] md:text-[48px] font-black tracking-tighter leading-tight",
 			weights: {
 				bold: "font-black",
+				semibold: "font-semibold",
 				normal: "font-medium"
 			},
 			styles: {
 				italic: "italic",
-				normal: ""
+				normal: "",
+				underline: "underline",
+				strikethrough: "line-through"
 			}
 		},
 		buttons: {
-			small: { size: "h-7 px-3 text-[10px]" },
-			none: { size: "h-0 px-0 text-[0px] rounded-none overflow-hidden" },
-			medium: { size: "h-9 px-5 text-[12px]" },
-			large: { size: "h-11 px-7 text-[14px]" },
-			xlarge: { size: "h-13 px-9 text-[16px]" },
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+			small: {
+				height: "h-7",
+				padding: "px-3",
+				typography: b.Small
+			},
+			none: {
+				height: "h-0 overflow-hidden",
+				padding: "px-0",
+				typography: b.Small
+			},
+			medium: {
+				height: "h-9",
+				padding: "px-5",
+				typography: b.Medium
+			},
+			large: {
+				height: "h-11",
+				padding: "px-7",
+				typography: b.Large
+			},
+			xlarge: {
+				height: "h-13",
+				padding: "px-9",
+				typography: b.Xlarge
 			},
 			baseTypography: "text-inherit leading-none font-black uppercase tracking-widest whitespace-nowrap",
 			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0",
@@ -98,42 +114,49 @@ var v = /* @__PURE__ */ function(e) {
 			baseStyles: "flex items-center justify-center transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 rounded-full"
 		},
 		badges: {
-			small: { container: "px-2 py-0.5 rounded-sm" },
-			medium: { container: "px-3 py-1 rounded-md" },
-			typographyMappings: {
-				small: b.Xsmall,
-				medium: b.Small
+			small: {
+				padding: "px-2 py-0.5",
+				corner: "rounded-sm",
+				typography: b.Xsmall
+			},
+			medium: {
+				padding: "px-3 py-1",
+				corner: "rounded-md",
+				typography: b.Small
 			},
 			typography: "leading-none tracking-widest uppercase",
 			baseStyles: "inline-flex items-center justify-center transition-all duration-300 shadow-none"
 		},
 		tabs: {
 			small: {
-				size: "h-8 px-6",
-				contentSize: "pt-4"
+				height: "h-8",
+				padding: "px-6",
+				contentSize: "pt-4",
+				typography: b.Small
 			},
 			none: {
-				size: "h-0 px-0",
-				contentSize: "pt-0"
+				height: "h-0",
+				padding: "px-0",
+				contentSize: "pt-0",
+				typography: b.Small
 			},
 			medium: {
-				size: "h-10 px-8",
-				contentSize: "pt-6"
+				height: "h-10",
+				padding: "px-8",
+				contentSize: "pt-6",
+				typography: b.Medium
 			},
 			large: {
-				size: "h-12 px-10",
-				contentSize: "pt-8"
+				height: "h-12",
+				padding: "px-10",
+				contentSize: "pt-8",
+				typography: b.Large
 			},
 			xlarge: {
-				size: "h-14 px-12",
-				contentSize: "pt-10"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				height: "h-14",
+				padding: "px-12",
+				contentSize: "pt-10",
+				typography: b.Xlarge
 			},
 			wrapper: "w-full flex flex-col",
 			disabled: "opacity-50 cursor-not-allowed",
@@ -165,30 +188,28 @@ var v = /* @__PURE__ */ function(e) {
 		cards: {
 			none: {
 				corner: "rounded-none",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Xsmall
 			},
 			small: {
 				corner: "rounded-xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Small
 			},
 			medium: {
 				corner: "rounded-2xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Medium
 			},
 			large: {
 				corner: "rounded-3xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Large
 			},
 			xlarge: {
 				corner: "rounded-4xl",
-				padding: "p-4 md:p-4"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				padding: "p-4 md:p-4",
+				typography: b.Xlarge
 			},
 			baseStyles: "transition-all duration-300",
 			interactiveStyles: "cursor-pointer hover:shadow-2xl active:scale-[0.98]",
@@ -196,21 +217,22 @@ var v = /* @__PURE__ */ function(e) {
 		},
 		checkbox: {
 			small: {
-				size: "w-5 h-5 rounded-md",
-				iconSize: 12
+				size: "w-5 h-5",
+				corner: "rounded-md",
+				iconSize: 12,
+				typography: b.Small
 			},
 			medium: {
-				size: "w-6 h-6 rounded-lg",
-				iconSize: 18
+				size: "w-6 h-6",
+				corner: "rounded-lg",
+				iconSize: 18,
+				typography: b.Medium
 			},
 			large: {
-				size: "w-10 h-10 rounded-lg",
-				iconSize: 20
-			},
-			typographyMappings: {
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large
+				size: "w-10 h-10",
+				corner: "rounded-lg",
+				iconSize: 20,
+				typography: b.Large
 			},
 			disabledStyles: "opacity-50 cursor-not-allowed",
 			icon: {
@@ -224,29 +246,57 @@ var v = /* @__PURE__ */ function(e) {
 			defaultBorderRadius: "rounded-2xl",
 			transition: "transition-all duration-300",
 			interactiveStyles: "cursor-pointer hover:shadow-2xl active:scale-[0.98]",
-			typographyMappings: { default: b.Small }
+			typography: b.Small
 		},
 		input: {
-			small: { size: "h-8 px-3 text-xs" },
-			none: { size: "h-0 px-0 text-[0px]" },
-			medium: { size: "h-11 px-4 text-sm" },
-			large: { size: "h-14 px-6 text-base" },
-			xlarge: { size: "h-16 px-8 text-lg" },
-			baseStyles: "w-full font-medium transition-all",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				height: "h-8",
+				padding: "px-3",
+				fontSize: "text-xs"
+			},
+			none: {
+				height: "h-0",
+				padding: "px-0",
+				fontSize: "text-[0px]"
+			},
+			medium: {
+				height: "h-11",
+				padding: "px-4",
+				fontSize: "text-sm"
+			},
+			large: {
+				height: "h-14",
+				padding: "px-6",
+				fontSize: "text-base"
+			},
+			xlarge: {
+				height: "h-16",
+				padding: "px-8",
+				fontSize: "text-lg"
+			},
+			baseStyles: "w-full font-medium transition-all"
 		},
 		modal: {
-			small: { size: "max-w-md" },
-			none: { size: "max-w-0" },
-			medium: { size: "max-w-2xl" },
-			large: { size: "max-w-4xl" },
-			xlarge: { size: "max-w-6xl" },
+			small: {
+				width: "max-w-md",
+				typography: b.Small
+			},
+			none: {
+				width: "max-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "max-w-2xl",
+				typography: b.Medium
+			},
+			large: {
+				width: "max-w-4xl",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "max-w-6xl",
+				typography: b.Xlarge
+			},
 			wrapper: "fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 overflow-hidden",
 			overlay: "absolute inset-0 backdrop-blur-[8px] bg-transparent animate-in fade-in duration-500",
 			container: "relative w-full flex flex-col transition-all animate-in zoom-in-95 fade-in slide-in-from-bottom-4 duration-500",
@@ -256,34 +306,35 @@ var v = /* @__PURE__ */ function(e) {
 			closeIconSize: 20,
 			contentSpacing: "flex-1 overflow-y-auto",
 			footerSpacing: "mt-8 pt-8 flex items-center justify-end gap-4",
-			footerBorder: "border-t border-white/5",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			footerBorder: "border-t border-white/5"
 		},
 		list: {
-			small: { size: "py-2 px-2" },
-			none: { size: "py-0 px-0" },
-			medium: { size: "py-2.5 px-4" },
-			large: { size: "py-3.5 px-5" },
-			xlarge: { size: "py-4 px-6" },
+			small: {
+				padding: "py-2 px-2",
+				typography: b.Small
+			},
+			none: {
+				padding: "py-0 px-0",
+				typography: b.Small
+			},
+			medium: {
+				padding: "py-2.5 px-4",
+				typography: b.Medium
+			},
+			large: {
+				padding: "py-3.5 px-5",
+				typography: b.Large
+			},
+			xlarge: {
+				padding: "py-4 px-6",
+				typography: b.Xlarge
+			},
 			gap: "gap-0",
 			itemGap: "gap-3",
 			iconOpacity: "opacity-40",
 			transition: "transition-all duration-300",
 			itemCorner: "rounded-md",
 			containerCorner: "first:rounded-t-2xl last:rounded-b-2xl",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			},
 			itemHoverResetColor: "transparent",
 			typographyInherit: "text-inherit"
 		},
@@ -295,10 +346,8 @@ var v = /* @__PURE__ */ function(e) {
 			contentWrapper: "flex-1 flex flex-col justify-center",
 			actionsWrapper: "flex items-center shrink-0",
 			iconSize: "[&>svg]:w-5 [&>svg]:h-5",
-			typographyMappings: {
-				title: b.Medium,
-				description: b.Medium
-			},
+			titleTypographySize: b.Medium,
+			descriptionTypographySize: b.Medium,
 			titleExtra: "tracking-tight mb-0.5",
 			descriptionExtra: "leading-snug",
 			actionGap: "gap-3",
@@ -342,36 +391,39 @@ var v = /* @__PURE__ */ function(e) {
 			dataCell: "",
 			dataBorder: "1px solid",
 			dataTypography: "text-inherit opacity-90 whitespace-nowrap leading-none font-medium",
-			typographyMappings: {
-				header: b.Medium,
-				data: b.Medium
-			}
+			headerTypographySize: b.Medium,
+			dataTypographySize: b.Medium
 		},
 		progress: {
 			small: {
 				height: "h-1",
 				trackRadius: "rounded-full",
-				gap: "gap-0.5"
+				gap: "gap-0.5",
+				typography: b.Small
 			},
 			none: {
 				height: "h-0",
 				trackRadius: "rounded-none",
-				gap: "gap-0"
+				gap: "gap-0",
+				typography: b.Small
 			},
 			medium: {
 				height: "h-1.5",
 				trackRadius: "rounded-full",
-				gap: "gap-1"
+				gap: "gap-1",
+				typography: b.Medium
 			},
 			large: {
 				height: "h-2",
 				trackRadius: "rounded-full",
-				gap: "gap-1.5"
+				gap: "gap-1.5",
+				typography: b.Large
 			},
 			xlarge: {
 				height: "h-2.5",
 				trackRadius: "rounded-full",
-				gap: "gap-2"
+				gap: "gap-2",
+				typography: b.Xlarge
 			},
 			container: "w-full group space-y-2",
 			wrapper: "w-full flex items-center min-h-[12px]",
@@ -382,14 +434,7 @@ var v = /* @__PURE__ */ function(e) {
 			step: "flex-1 transition-all duration-500 relative overflow-hidden border",
 			stepEffect: "absolute inset-0 animate-pulse",
 			valueContainer: "flex justify-start px-0.5",
-			valueStyles: "opacity-80 tracking-tighter tabular-nums",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			valueStyles: "opacity-80 tracking-tighter tabular-nums"
 		},
 		stack: {
 			small: { gap: "gap-2" },
@@ -490,19 +535,27 @@ var v = /* @__PURE__ */ function(e) {
 			closeButton: "absolute top-2 right-2"
 		},
 		dropdown: {
-			small: { size: "min-w-[120px]" },
-			none: { size: "min-w-0" },
-			medium: { size: "min-w-[160px]" },
-			large: { size: "min-w-[200px]" },
-			xlarge: { size: "min-w-[240px]" },
-			contentPositioning: "mt-2",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				width: "min-w-[120px]",
+				typography: b.Small
+			},
+			none: {
+				width: "min-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "min-w-[160px]",
+				typography: b.Medium
+			},
+			large: {
+				width: "min-w-[200px]",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "min-w-[240px]",
+				typography: b.Xlarge
+			},
+			contentPositioning: "mt-2"
 		},
 		switch: {
 			small: {
@@ -523,10 +576,14 @@ var v = /* @__PURE__ */ function(e) {
 				translateChecked: "translate-x-7",
 				translateUnchecked: "translate-x-0.5"
 			},
-			baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
-			thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
-			label: "text-sm font-bold cursor-pointer",
-			description: "text-xs opacity-60"
+			layout: {
+				container: "flex items-start gap-3",
+				contentWrapper: "flex flex-col gap-1",
+				baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
+				thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
+				label: "text-sm font-bold cursor-pointer",
+				description: "text-xs opacity-60"
+			}
 		},
 		sidebar: {
 			wrapper: "w-full md:w-80 md:min-w-[320px] md:max-w-[320px] h-full",
@@ -554,11 +611,12 @@ var v = /* @__PURE__ */ function(e) {
 			title: "block w-full",
 			descriptionContainer: "mt-0.5 opacity-60 w-full",
 			actionsContainer: "flex items-center justify-end flex-shrink-0",
-			typographyMappings: {
+			titleTypography: {
 				medium: b.Medium,
 				large: b.Large,
 				xlarge: b.Xlarge
-			}
+			},
+			descriptionTypography: b.Medium
 		},
 		layout: {
 			bodyWrapper: "min-h-screen relative overflow-hidden transition-theme flex flex-col font-sans bg-fixed bg-cover bg-center",
@@ -961,25 +1019,46 @@ var v = /* @__PURE__ */ function(e) {
 			xlarge: "text-[28px] md:text-[42px] font-black tracking-tighter leading-[0.9]",
 			weights: {
 				bold: "font-black",
+				semibold: "font-semibold",
 				normal: "font-medium"
 			},
 			styles: {
 				italic: "italic",
-				normal: ""
+				normal: "",
+				underline: "underline",
+				strikethrough: "line-through"
 			}
 		},
 		buttons: {
-			small: { size: "h-8 px-4 rounded-md" },
-			none: { size: "h-0 px-0 rounded-none overflow-hidden" },
-			medium: { size: "h-10 px-5 rounded-lg" },
-			large: { size: "h-12 px-6 rounded-xl" },
-			xlarge: { size: "h-14 px-8 rounded-2xl" },
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+			small: {
+				height: "h-8",
+				padding: "px-4",
+				corner: "rounded-md",
+				typography: b.Small
+			},
+			none: {
+				height: "h-0 overflow-hidden",
+				padding: "px-0",
+				corner: "rounded-none",
+				typography: b.Small
+			},
+			medium: {
+				height: "h-10",
+				padding: "px-5",
+				corner: "rounded-lg",
+				typography: b.Medium
+			},
+			large: {
+				height: "h-12",
+				padding: "px-6",
+				corner: "rounded-xl",
+				typography: b.Large
+			},
+			xlarge: {
+				height: "h-14",
+				padding: "px-8",
+				corner: "rounded-2xl",
+				typography: b.Xlarge
 			},
 			baseTypography: "text-inherit leading-none font-black uppercase tracking-widest whitespace-nowrap",
 			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0",
@@ -1018,42 +1097,49 @@ var v = /* @__PURE__ */ function(e) {
 			baseStyles: "flex items-center justify-center transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 rounded-full"
 		},
 		badges: {
-			small: { container: "px-2 py-0.5 rounded-md" },
-			medium: { container: "px-2.5 py-1 rounded-lg" },
-			typographyMappings: {
-				small: b.Xsmall,
-				medium: b.Small
+			small: {
+				padding: "px-2 py-0.5",
+				corner: "rounded-md",
+				typography: b.Xsmall
+			},
+			medium: {
+				padding: "px-2.5 py-1",
+				corner: "rounded-lg",
+				typography: b.Small
 			},
 			typography: "leading-none tracking-widest uppercase font-black",
 			baseStyles: "inline-flex items-center justify-center transition-all duration-300 shadow-none"
 		},
 		tabs: {
 			small: {
-				size: "h-8 px-6",
-				contentSize: "pt-4"
+				height: "h-8",
+				padding: "px-6",
+				contentSize: "pt-4",
+				typography: b.Small
 			},
 			none: {
-				size: "h-0 px-0",
-				contentSize: "pt-0"
+				height: "h-0",
+				padding: "px-0",
+				contentSize: "pt-0",
+				typography: b.Small
 			},
 			medium: {
-				size: "h-10 px-8",
-				contentSize: "pt-6"
+				height: "h-10",
+				padding: "px-8",
+				contentSize: "pt-6",
+				typography: b.Medium
 			},
 			large: {
-				size: "h-12 px-10",
-				contentSize: "pt-8"
+				height: "h-12",
+				padding: "px-10",
+				contentSize: "pt-8",
+				typography: b.Large
 			},
 			xlarge: {
-				size: "h-14 px-12",
-				contentSize: "pt-10"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				height: "h-14",
+				padding: "px-12",
+				contentSize: "pt-10",
+				typography: b.Xlarge
 			},
 			wrapper: "w-full flex flex-col",
 			disabled: "opacity-50 cursor-not-allowed",
@@ -1085,30 +1171,28 @@ var v = /* @__PURE__ */ function(e) {
 		cards: {
 			none: {
 				corner: "rounded-none",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Xsmall
 			},
 			small: {
 				corner: "rounded-xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Small
 			},
 			medium: {
 				corner: "rounded-2xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Medium
 			},
 			large: {
 				corner: "rounded-3xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Large
 			},
 			xlarge: {
 				corner: "rounded-4xl",
-				padding: "p-4 md:p-4"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				padding: "p-4 md:p-4",
+				typography: b.Xlarge
 			},
 			baseStyles: "transition-all duration-300",
 			interactiveStyles: "cursor-pointer hover:shadow-2xl active:scale-[0.98]",
@@ -1116,21 +1200,22 @@ var v = /* @__PURE__ */ function(e) {
 		},
 		checkbox: {
 			small: {
-				size: "w-5 h-5 rounded-md",
-				iconSize: 12
+				size: "w-5 h-5",
+				corner: "rounded-md",
+				iconSize: 12,
+				typography: b.Small
 			},
 			medium: {
-				size: "w-6 h-6 rounded-lg",
-				iconSize: 18
+				size: "w-6 h-6",
+				corner: "rounded-lg",
+				iconSize: 18,
+				typography: b.Medium
 			},
 			large: {
-				size: "w-10 h-10 rounded-lg",
-				iconSize: 20
-			},
-			typographyMappings: {
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large
+				size: "w-10 h-10",
+				corner: "rounded-lg",
+				iconSize: 20,
+				typography: b.Large
 			},
 			disabledStyles: "opacity-50 cursor-not-allowed",
 			icon: {
@@ -1144,29 +1229,57 @@ var v = /* @__PURE__ */ function(e) {
 			defaultBorderRadius: "rounded-xl",
 			transition: "transition-all duration-300",
 			interactiveStyles: "cursor-pointer hover:shadow-2xl active:scale-[0.98]",
-			typographyMappings: { default: b.Medium }
+			typography: b.Medium
 		},
 		input: {
-			small: { size: "h-8 px-3 text-xs" },
-			none: { size: "h-0 px-0 text-[0px]" },
-			medium: { size: "h-11 px-4 text-sm" },
-			large: { size: "h-14 px-6 text-base" },
-			xlarge: { size: "h-16 px-8 text-lg" },
-			baseStyles: "w-full font-medium transition-all",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				height: "h-8",
+				padding: "px-3",
+				fontSize: "text-xs"
+			},
+			none: {
+				height: "h-0",
+				padding: "px-0",
+				fontSize: "text-[0px]"
+			},
+			medium: {
+				height: "h-11",
+				padding: "px-4",
+				fontSize: "text-sm"
+			},
+			large: {
+				height: "h-14",
+				padding: "px-6",
+				fontSize: "text-base"
+			},
+			xlarge: {
+				height: "h-16",
+				padding: "px-8",
+				fontSize: "text-lg"
+			},
+			baseStyles: "w-full font-medium transition-all"
 		},
 		modal: {
-			small: { size: "max-w-md" },
-			none: { size: "max-w-0" },
-			medium: { size: "max-w-2xl" },
-			large: { size: "max-w-4xl" },
-			xlarge: { size: "max-w-6xl" },
+			small: {
+				width: "max-w-md",
+				typography: b.Small
+			},
+			none: {
+				width: "max-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "max-w-2xl",
+				typography: b.Medium
+			},
+			large: {
+				width: "max-w-4xl",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "max-w-6xl",
+				typography: b.Xlarge
+			},
 			wrapper: "fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 overflow-hidden",
 			overlay: "absolute inset-0 backdrop-blur-sm bg-black/5",
 			container: "relative w-full flex flex-col bg-white border border-zinc-200 shadow-2xl",
@@ -1176,34 +1289,35 @@ var v = /* @__PURE__ */ function(e) {
 			closeIconSize: 16,
 			contentSpacing: "flex-1",
 			footerSpacing: "mt-6 pt-6 flex items-center justify-end gap-3",
-			footerBorder: "border-t border-zinc-100",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			footerBorder: "border-t border-zinc-100"
 		},
 		list: {
-			small: { size: "py-2 px-3" },
-			none: { size: "py-0 px-0" },
-			medium: { size: "py-2.5 px-4" },
-			large: { size: "py-3.5 px-5" },
-			xlarge: { size: "py-4 px-6" },
+			small: {
+				padding: "py-2 px-3",
+				typography: b.Small
+			},
+			none: {
+				padding: "py-0 px-0",
+				typography: b.Small
+			},
+			medium: {
+				padding: "py-2.5 px-4",
+				typography: b.Medium
+			},
+			large: {
+				padding: "py-3.5 px-5",
+				typography: b.Large
+			},
+			xlarge: {
+				padding: "py-4 px-6",
+				typography: b.Xlarge
+			},
 			gap: "gap-0",
 			itemGap: "gap-4",
 			iconOpacity: "opacity-40",
 			transition: "transition-all duration-300",
 			itemCorner: "rounded-md",
 			containerCorner: "first:rounded-t-2xl last:rounded-b-2xl",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			},
 			itemHoverResetColor: "transparent",
 			typographyInherit: "text-inherit"
 		},
@@ -1215,10 +1329,8 @@ var v = /* @__PURE__ */ function(e) {
 			contentWrapper: "flex-1 flex flex-col justify-center",
 			actionsWrapper: "flex items-center shrink-0",
 			iconSize: "[&>svg]:w-5 [&>svg]:h-5",
-			typographyMappings: {
-				title: b.Medium,
-				description: b.Small
-			},
+			titleTypographySize: b.Medium,
+			descriptionTypographySize: b.Small,
 			titleExtra: "tracking-tight",
 			descriptionExtra: "leading-normal",
 			actionGap: "gap-2",
@@ -1262,36 +1374,39 @@ var v = /* @__PURE__ */ function(e) {
 			dataCell: "",
 			dataBorder: "1px solid",
 			dataTypography: "text-inherit opacity-90 whitespace-nowrap leading-none font-medium",
-			typographyMappings: {
-				header: b.Medium,
-				data: b.Medium
-			}
+			headerTypographySize: b.Medium,
+			dataTypographySize: b.Medium
 		},
 		progress: {
 			small: {
 				height: "h-1",
 				trackRadius: "rounded-full",
-				gap: "gap-0.5"
+				gap: "gap-0.5",
+				typography: b.Small
 			},
 			none: {
 				height: "h-0",
 				trackRadius: "rounded-none",
-				gap: "gap-0"
+				gap: "gap-0",
+				typography: b.Small
 			},
 			medium: {
 				height: "h-1.5",
 				trackRadius: "rounded-full",
-				gap: "gap-1"
+				gap: "gap-1",
+				typography: b.Medium
 			},
 			large: {
 				height: "h-2",
 				trackRadius: "rounded-full",
-				gap: "gap-1.5"
+				gap: "gap-1.5",
+				typography: b.Large
 			},
 			xlarge: {
 				height: "h-2.5",
 				trackRadius: "rounded-full",
-				gap: "gap-2"
+				gap: "gap-2",
+				typography: b.Xlarge
 			},
 			container: "w-full group space-y-2",
 			wrapper: "w-full flex items-center min-h-[12px]",
@@ -1302,14 +1417,7 @@ var v = /* @__PURE__ */ function(e) {
 			step: "flex-1 transition-all duration-500 relative overflow-hidden border",
 			stepEffect: "absolute inset-0 animate-pulse",
 			valueContainer: "flex justify-start px-0.5",
-			valueStyles: "opacity-80 tracking-tighter tabular-nums",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			valueStyles: "opacity-80 tracking-tighter tabular-nums"
 		},
 		stack: {
 			small: { gap: "gap-2" },
@@ -1410,19 +1518,27 @@ var v = /* @__PURE__ */ function(e) {
 			corner: "rounded-2xl"
 		},
 		dropdown: {
-			small: { size: "min-w-[120px]" },
-			none: { size: "min-w-0" },
-			medium: { size: "min-w-[160px]" },
-			large: { size: "min-w-[200px]" },
-			xlarge: { size: "min-w-[240px]" },
-			contentPositioning: "mt-2",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				width: "min-w-[120px]",
+				typography: b.Small
+			},
+			none: {
+				width: "min-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "min-w-[160px]",
+				typography: b.Medium
+			},
+			large: {
+				width: "min-w-[200px]",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "min-w-[240px]",
+				typography: b.Xlarge
+			},
+			contentPositioning: "mt-2"
 		},
 		switch: {
 			small: {
@@ -1443,10 +1559,14 @@ var v = /* @__PURE__ */ function(e) {
 				translateChecked: "translate-x-7",
 				translateUnchecked: "translate-x-0.5"
 			},
-			baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
-			thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
-			label: "text-sm font-bold cursor-pointer",
-			description: "text-xs opacity-60"
+			layout: {
+				container: "flex items-start gap-3",
+				contentWrapper: "flex flex-col gap-1",
+				baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
+				thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
+				label: "text-sm font-bold cursor-pointer",
+				description: "text-xs opacity-60"
+			}
 		},
 		sidebar: {
 			wrapper: "w-full md:w-80 md:min-w-[320px] md:max-w-[320px] h-full",
@@ -1474,11 +1594,12 @@ var v = /* @__PURE__ */ function(e) {
 			title: "block w-full",
 			descriptionContainer: "mt-0.5 opacity-60 w-full",
 			actionsContainer: "flex items-center justify-end flex-shrink-0",
-			typographyMappings: {
+			titleTypography: {
 				medium: b.Medium,
 				large: b.Large,
 				xlarge: b.Xlarge
-			}
+			},
+			descriptionTypography: b.Medium
 		},
 		layout: {
 			bodyWrapper: "min-h-screen relative overflow-hidden transition-theme flex flex-col font-sans bg-fixed bg-cover bg-center",
@@ -1881,25 +2002,46 @@ var v = /* @__PURE__ */ function(e) {
 			xlarge: "text-[28px] md:text-[42px] font-black tracking-tighter leading-[0.95]",
 			weights: {
 				bold: "font-black",
+				semibold: "font-semibold",
 				normal: "font-medium"
 			},
 			styles: {
 				italic: "italic",
-				normal: ""
+				normal: "",
+				underline: "underline",
+				strikethrough: "line-through"
 			}
 		},
 		buttons: {
-			small: { size: "h-9 px-4 rounded-full" },
-			none: { size: "h-0 px-0 rounded-none overflow-hidden" },
-			medium: { size: "h-11 px-6 rounded-full" },
-			large: { size: "h-14 px-8 rounded-full" },
-			xlarge: { size: "h-16 px-10 rounded-full" },
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+			small: {
+				height: "h-9",
+				padding: "px-4",
+				corner: "rounded-full",
+				typography: b.Small
+			},
+			none: {
+				height: "h-0 overflow-hidden",
+				padding: "px-0",
+				corner: "rounded-none",
+				typography: b.Small
+			},
+			medium: {
+				height: "h-11",
+				padding: "px-6",
+				corner: "rounded-full",
+				typography: b.Medium
+			},
+			large: {
+				height: "h-14",
+				padding: "px-8",
+				corner: "rounded-full",
+				typography: b.Large
+			},
+			xlarge: {
+				height: "h-16",
+				padding: "px-10",
+				corner: "rounded-full",
+				typography: b.Xlarge
 			},
 			baseTypography: "text-inherit leading-none font-bold tracking-tight whitespace-nowrap",
 			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0",
@@ -1938,42 +2080,49 @@ var v = /* @__PURE__ */ function(e) {
 			baseStyles: "flex items-center justify-center transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 rounded-full"
 		},
 		badges: {
-			small: { container: "px-2.5 py-0.5 rounded-full" },
-			medium: { container: "px-3.5 py-1 rounded-full" },
-			typographyMappings: {
-				small: b.Xsmall,
-				medium: b.Small
+			small: {
+				padding: "px-2.5 py-0.5",
+				corner: "rounded-full",
+				typography: b.Xsmall
+			},
+			medium: {
+				padding: "px-3.5 py-1",
+				corner: "rounded-full",
+				typography: b.Small
 			},
 			typography: "leading-none tracking-tight font-bold",
 			baseStyles: "inline-flex items-center justify-center transition-all duration-300 shadow-none"
 		},
 		tabs: {
 			small: {
-				size: "h-8 px-6",
-				contentSize: "pt-4"
+				height: "h-8",
+				padding: "px-6",
+				contentSize: "pt-4",
+				typography: b.Small
 			},
 			none: {
-				size: "h-0 px-0",
-				contentSize: "pt-0"
+				height: "h-0",
+				padding: "px-0",
+				contentSize: "pt-0",
+				typography: b.Small
 			},
 			medium: {
-				size: "h-10 px-8",
-				contentSize: "pt-6"
+				height: "h-10",
+				padding: "px-8",
+				contentSize: "pt-6",
+				typography: b.Medium
 			},
 			large: {
-				size: "h-12 px-10",
-				contentSize: "pt-8"
+				height: "h-12",
+				padding: "px-10",
+				contentSize: "pt-8",
+				typography: b.Large
 			},
 			xlarge: {
-				size: "h-14 px-12",
-				contentSize: "pt-10"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				height: "h-14",
+				padding: "px-12",
+				contentSize: "pt-10",
+				typography: b.Xlarge
 			},
 			wrapper: "w-full flex flex-col",
 			disabled: "opacity-50 cursor-not-allowed",
@@ -2005,30 +2154,28 @@ var v = /* @__PURE__ */ function(e) {
 		cards: {
 			none: {
 				corner: "rounded-none",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Xsmall
 			},
 			small: {
 				corner: "rounded-xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Small
 			},
 			medium: {
 				corner: "rounded-2xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Medium
 			},
 			large: {
 				corner: "rounded-3xl",
-				padding: "p-4 md:p-4"
+				padding: "p-4 md:p-4",
+				typography: b.Large
 			},
 			xlarge: {
 				corner: "rounded-4xl",
-				padding: "p-4 md:p-4"
-			},
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
+				padding: "p-4 md:p-4",
+				typography: b.Xlarge
 			},
 			baseStyles: "transition-all duration-300",
 			interactiveStyles: "cursor-pointer hover:shadow-2xl active:scale-[0.98]",
@@ -2036,21 +2183,22 @@ var v = /* @__PURE__ */ function(e) {
 		},
 		checkbox: {
 			small: {
-				size: "w-6 h-6 rounded-full",
-				iconSize: 14
+				size: "w-6 h-6",
+				corner: "rounded-full",
+				iconSize: 14,
+				typography: b.Small
 			},
 			medium: {
-				size: "w-8 h-8 rounded-full",
-				iconSize: 20
+				size: "w-8 h-8",
+				corner: "rounded-full",
+				iconSize: 20,
+				typography: b.Medium
 			},
 			large: {
-				size: "w-12 h-12 rounded-full",
-				iconSize: 24
-			},
-			typographyMappings: {
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large
+				size: "w-12 h-12",
+				corner: "rounded-full",
+				iconSize: 24,
+				typography: b.Large
 			},
 			disabledStyles: "opacity-50 cursor-not-allowed",
 			icon: {
@@ -2064,29 +2212,57 @@ var v = /* @__PURE__ */ function(e) {
 			defaultBorderRadius: "rounded-[2.5rem]",
 			transition: "transition-all duration-700 cubic-bezier(0.23, 1, 0.32, 1)",
 			interactiveStyles: "cursor-pointer hover:shadow-3xl hover:bg-white/[0.03] active:scale-[0.99] group",
-			typographyMappings: { default: b.Small }
+			typography: b.Small
 		},
 		input: {
-			small: { size: "h-9 px-3 text-xs" },
-			none: { size: "h-0 px-0 text-[0px]" },
-			medium: { size: "h-12 px-3 text-sm" },
-			large: { size: "h-16 px-3 text-base" },
-			xlarge: { size: "h-20 px-3 text-lg" },
-			baseStyles: "w-full font-medium transition-all duration-500",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				height: "h-9",
+				padding: "px-3",
+				fontSize: "text-xs"
+			},
+			none: {
+				height: "h-0",
+				padding: "px-0",
+				fontSize: "text-[0px]"
+			},
+			medium: {
+				height: "h-12",
+				padding: "px-3",
+				fontSize: "text-sm"
+			},
+			large: {
+				height: "h-16",
+				padding: "px-3",
+				fontSize: "text-base"
+			},
+			xlarge: {
+				height: "h-20",
+				padding: "px-3",
+				fontSize: "text-lg"
+			},
+			baseStyles: "w-full font-medium transition-all duration-500"
 		},
 		modal: {
-			small: { size: "max-w-md" },
-			none: { size: "max-w-0" },
-			medium: { size: "max-w-2xl" },
-			large: { size: "max-w-4xl" },
-			xlarge: { size: "max-w-6xl" },
+			small: {
+				width: "max-w-md",
+				typography: b.Small
+			},
+			none: {
+				width: "max-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "max-w-2xl",
+				typography: b.Medium
+			},
+			large: {
+				width: "max-w-4xl",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "max-w-6xl",
+				typography: b.Xlarge
+			},
 			wrapper: "fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 overflow-hidden",
 			overlay: "absolute inset-0 backdrop-blur-xl bg-black/40",
 			titleExtra: "tracking-tighter",
@@ -2096,34 +2272,35 @@ var v = /* @__PURE__ */ function(e) {
 			contentSpacing: "flex-1 px-6 pb-6 md:px-8 md:pb-8",
 			footerSpacing: "p-6 flex items-center justify-end gap-3 md:p-8 md:gap-4",
 			closeIconSize: 20,
-			closeButton: "absolute top-4 right-4 z-50 w-10 h-10 p-0 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-xl transition-all",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			closeButton: "absolute top-4 right-4 z-50 w-10 h-10 p-0 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-xl transition-all"
 		},
 		list: {
-			small: { size: "py-2 px-4 shadow-none" },
-			none: { size: "py-0 px-0 shadow-none" },
-			medium: { size: "py-3 px-4 shadow-none" },
-			large: { size: "py-4 px-4 shadow-none" },
-			xlarge: { size: "py-5 px-4 shadow-none" },
+			small: {
+				padding: "py-2 px-4 shadow-none",
+				typography: b.Small
+			},
+			none: {
+				padding: "py-0 px-0 shadow-none",
+				typography: b.Small
+			},
+			medium: {
+				padding: "py-3 px-4 shadow-none",
+				typography: b.Medium
+			},
+			large: {
+				padding: "py-4 px-4 shadow-none",
+				typography: b.Medium
+			},
+			xlarge: {
+				padding: "py-5 px-4 shadow-none",
+				typography: b.Large
+			},
 			gap: "gap-0",
 			itemGap: "gap-2",
 			iconOpacity: "opacity-60",
 			transition: "transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1)",
 			itemCorner: "rounded-none",
 			containerCorner: "rounded-[1.0rem]",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Medium,
-				xlarge: b.Large
-			},
 			itemHoverResetColor: "transparent",
 			typographyInherit: "bg-transparent transition-all"
 		},
@@ -2135,10 +2312,8 @@ var v = /* @__PURE__ */ function(e) {
 			contentWrapper: "flex-1 flex flex-col justify-center",
 			actionsWrapper: "flex items-center shrink-0",
 			iconSize: "[&>svg]:w-5 [&>svg]:h-5",
-			typographyMappings: {
-				title: b.Medium,
-				description: b.Small
-			},
+			titleTypographySize: b.Medium,
+			descriptionTypographySize: b.Small,
 			titleExtra: "tracking-tighter",
 			descriptionExtra: "leading-tight",
 			actionGap: "gap-4",
@@ -2182,36 +2357,39 @@ var v = /* @__PURE__ */ function(e) {
 			dataCell: "",
 			dataBorder: "1px solid",
 			dataTypography: "text-inherit opacity-90 whitespace-nowrap leading-none font-medium",
-			typographyMappings: {
-				header: b.Medium,
-				data: b.Medium
-			}
+			headerTypographySize: b.Medium,
+			dataTypographySize: b.Medium
 		},
 		progress: {
 			small: {
 				height: "h-1",
 				trackRadius: "rounded-full",
-				gap: "gap-0.5"
+				gap: "gap-0.5",
+				typography: b.Small
 			},
 			none: {
 				height: "h-0",
 				trackRadius: "rounded-none",
-				gap: "gap-0"
+				gap: "gap-0",
+				typography: b.Small
 			},
 			medium: {
 				height: "h-1.5",
 				trackRadius: "rounded-full",
-				gap: "gap-1"
+				gap: "gap-1",
+				typography: b.Medium
 			},
 			large: {
 				height: "h-2",
 				trackRadius: "rounded-full",
-				gap: "gap-1.5"
+				gap: "gap-1.5",
+				typography: b.Large
 			},
 			xlarge: {
 				height: "h-2.5",
 				trackRadius: "rounded-full",
-				gap: "gap-2"
+				gap: "gap-2",
+				typography: b.Xlarge
 			},
 			container: "w-full group space-y-2",
 			wrapper: "w-full flex items-center min-h-[12px]",
@@ -2222,14 +2400,7 @@ var v = /* @__PURE__ */ function(e) {
 			step: "flex-1 transition-all duration-500 relative overflow-hidden border border-white/10 backdrop-blur-xl",
 			stepEffect: "absolute inset-0 animate-pulse",
 			valueContainer: "flex justify-start px-0.5",
-			valueStyles: "opacity-80 tracking-tighter tabular-nums",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			valueStyles: "opacity-80 tracking-tighter tabular-nums"
 		},
 		stack: {
 			small: { gap: "gap-2" },
@@ -2330,19 +2501,27 @@ var v = /* @__PURE__ */ function(e) {
 			corner: "rounded-[1rem]"
 		},
 		dropdown: {
-			small: { size: "min-w-[120px]" },
-			none: { size: "min-w-0" },
-			medium: { size: "min-w-[160px]" },
-			large: { size: "min-w-[200px]" },
-			xlarge: { size: "min-w-[240px]" },
-			contentPositioning: "mt-2",
-			typographyMappings: {
-				xsmall: b.Xsmall,
-				small: b.Small,
-				medium: b.Medium,
-				large: b.Large,
-				xlarge: b.Xlarge
-			}
+			small: {
+				width: "min-w-[120px]",
+				typography: b.Small
+			},
+			none: {
+				width: "min-w-0",
+				typography: b.Small
+			},
+			medium: {
+				width: "min-w-[160px]",
+				typography: b.Medium
+			},
+			large: {
+				width: "min-w-[200px]",
+				typography: b.Large
+			},
+			xlarge: {
+				width: "min-w-[240px]",
+				typography: b.Xlarge
+			},
+			contentPositioning: "mt-2"
 		},
 		switch: {
 			small: {
@@ -2363,10 +2542,14 @@ var v = /* @__PURE__ */ function(e) {
 				translateChecked: "translate-x-7",
 				translateUnchecked: "translate-x-0.5"
 			},
-			baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
-			thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
-			label: "text-sm font-bold cursor-pointer",
-			description: "text-xs opacity-60"
+			layout: {
+				container: "flex items-start gap-3",
+				contentWrapper: "flex flex-col gap-1",
+				baseStyles: "relative rounded-full transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 disabled:opacity-50 disabled:cursor-not-allowed",
+				thumbStyles: "absolute rounded-full transition-transform duration-300 bg-white dark:bg-gray-200 shadow-md top-1/2 -translate-y-1/2 left-0.5",
+				label: "text-sm font-bold cursor-pointer",
+				description: "text-xs opacity-60"
+			}
 		},
 		sidebar: {
 			wrapper: "w-full md:w-70 md:min-w-[280px] md:max-w-[280px] h-full",
@@ -2394,11 +2577,12 @@ var v = /* @__PURE__ */ function(e) {
 			title: "block w-full",
 			descriptionContainer: "mt-0.5 opacity-60 w-full",
 			actionsContainer: "flex items-center justify-end flex-shrink-0",
-			typographyMappings: {
+			titleTypography: {
 				medium: b.Medium,
 				large: b.Large,
 				xlarge: b.Xlarge
-			}
+			},
+			descriptionTypography: b.Medium
 		},
 		layout: {
 			bodyWrapper: "min-h-screen relative overflow-hidden transition-theme flex flex-col font-sans bg-fixed bg-cover bg-center",
@@ -2843,18 +3027,18 @@ function I(...e) {
 }
 //#endregion
 //#region src/presentation/components/TigerTypography.tsx
-var L = ({ children: e, typographySize: t = b.Medium, variant: n = "p", bold: r = !1, italic: i = !1, className: a, style: o, id: s }) => {
-	let { theme: l } = F(), u = n, d = l.geometry.typography, f = r || t === b.Xlarge ? d.weights.bold : d.weights.normal, p = i ? d.styles.italic : d.styles.normal;
-	return /* @__PURE__ */ c(u, {
-		id: s,
-		className: I(d[t], f, p, a),
-		style: o,
+var L = ({ children: e, typographySize: t = b.Medium, variant: n = "p", weight: r, bold: i = !1, italic: a = !1, underline: o = !1, strikethrough: s = !1, className: l, style: u, id: d }) => {
+	let { theme: f } = F(), p = n, m = f.geometry.typography, h = r ?? (i ? "bold" : void 0), g = h === "bold" ? m.weights.bold : h === "semibold" ? m.weights.semibold : h === "regular" ? m.weights.normal : t === b.Xlarge ? m.weights.bold : m.weights.normal, _ = a ? m.styles.italic : m.styles.normal, v = o ? m.styles.underline : "", y = s ? m.styles.strikethrough : "";
+	return /* @__PURE__ */ c(p, {
+		id: d,
+		className: I(m[t], g, _, v, y, l),
+		style: u,
 		children: e
 	});
 }, R = ({ children: e, variant: t = T.Primary, size: n = y.Medium, typographySize: r, className: i, style: a }) => {
-	let { theme: o, themeConfig: s } = F(), l = o.geometry.badges[n], u = r || o.geometry.badges.typographyMappings[n];
+	let { theme: o, themeConfig: s } = F(), l = o.geometry.badges[n], u = r || l.typography;
 	return /* @__PURE__ */ c("div", {
-		className: I(o.geometry.badges.baseStyles, s.badges.base, l.container, s.badges.variants[t], i),
+		className: I(o.geometry.badges.baseStyles, s.badges.base, l.padding, l.corner, s.badges.variants[t], i),
 		style: a,
 		children: /* @__PURE__ */ c(L, {
 			typographySize: u,
@@ -2864,9 +3048,9 @@ var L = ({ children: e, typographySize: t = b.Medium, variant: n = "p", bold: r
 		})
 	});
 }, te = ({ variant: e = E.Primary, size: t = y.Medium, typographySize: n, iconLeft: r, iconRight: i, fullWidth: a = !1, className: o, children: s, ...u }) => {
-	let { theme: d, themeConfig: f } = F(), p = f.buttons[e], m = t, h = d.geometry.buttons[m], g = n || d.geometry.buttons.typographyMappings[m];
+	let { theme: d, themeConfig: f } = F(), p = f.buttons[e], m = t, h = d.geometry.buttons[m], g = n || h.typography;
 	return /* @__PURE__ */ l("button", {
-		className: I(d.geometry.buttons.baseStyles, p, h.size, d.geometry.buttons.layout.container, a && d.geometry.buttons.layout.fullWidth, o),
+		className: I(d.geometry.buttons.baseStyles, p, h.height, h.padding, h.corner, d.geometry.buttons.layout.container, a && d.geometry.buttons.layout.fullWidth, o),
 		...u,
 		children: [
 			r && /* @__PURE__ */ c(r, { className: d.geometry.buttons.layout.icon }),
@@ -2888,7 +3072,7 @@ var L = ({ children: e, typographySize: t = b.Medium, variant: n = "p", bold: r
 		"aria-checked": e,
 		disabled: i,
 		onClick: l,
-		className: I(o.checkbox.base, s.size, e ? o.checkbox.checked : o.checkbox.unchecked, i && a.geometry.checkbox.disabledStyles, r),
+		className: I(o.checkbox.base, s.size, s.corner, e ? o.checkbox.checked : o.checkbox.unchecked, i && a.geometry.checkbox.disabledStyles, r),
 		children: /* @__PURE__ */ c(f, {
 			size: s.iconSize,
 			strokeWidth: 4,
@@ -2908,10 +3092,10 @@ var L = ({ children: e, typographySize: t = b.Medium, variant: n = "p", bold: r
 		children: m()
 	});
 }, B = n(({ size: e = y.Medium, className: t, style: n, ...r }, i) => {
-	let { theme: a, themeConfig: o } = F(), s = e;
+	let { theme: a, themeConfig: o } = F(), s = e, l = a.geometry.input[s];
 	return /* @__PURE__ */ c("input", {
 		ref: i,
-		className: I(a.geometry.input.baseStyles, o.input, a.geometry.input[s].size, t),
+		className: I(a.geometry.input.baseStyles, o.input, l.height, l.padding, l.fontSize, t),
 		style: n,
 		...r
 	});
@@ -2920,32 +3104,32 @@ B.displayName = "TigerInput";
 //#endregion
 //#region src/presentation/components/TigerProgress.tsx
 var re = ({ value: e = 0, currentStep: t = 0, totalSteps: n = 5, variant: r = "bar", max: i = 100, size: a = y.Medium, typographySize: o, showValue: s = !0, className: u }) => {
-	let { theme: d, themeConfig: f } = F(), p = Math.min(Math.max(r === "bar" ? e / i * 100 : t / n * 100, 0), 100), m = d.geometry.progress, h = f.progress, g = m[a], _ = o, v = () => /* @__PURE__ */ c("div", {
-		className: I(m.track, g.height, g.trackRadius, h.track),
+	let { theme: d, themeConfig: f } = F(), p = Math.min(Math.max(r === "bar" ? e / i * 100 : t / n * 100, 0), 100), m = d.geometry.progress, h = f.progress, g = a, _ = m[g], v = o || m[g].typography, b = () => /* @__PURE__ */ c("div", {
+		className: I(m.track, _.height, _.trackRadius, h.track),
 		children: /* @__PURE__ */ c("div", {
-			className: I(m.fill, g.trackRadius, h.fill),
+			className: I(m.fill, _.trackRadius, h.fill),
 			style: { width: `${p}%` },
 			children: /* @__PURE__ */ c("div", { className: I(m.fillEffect, h.fillEffectColor) })
 		})
-	}), b = () => /* @__PURE__ */ c("div", {
-		className: I(m.stepContainer, g.gap),
+	}), x = () => /* @__PURE__ */ c("div", {
+		className: I(m.stepContainer, _.gap),
 		children: Array.from({ length: n }).map((e, n) => /* @__PURE__ */ c("div", {
-			className: I(m.step, g.height, g.trackRadius, n < t ? h.fill : h.unfilled),
+			className: I(m.step, _.height, _.trackRadius, n < t ? h.fill : h.unfilled),
 			children: n < t && /* @__PURE__ */ c("div", { className: I(m.stepEffect, h.fillEffectColor) })
 		}, n))
-	}), x = r === "bar" ? `${Math.round(p)}%` : `${t}/${n}`;
+	}), S = r === "bar" ? `${Math.round(p)}%` : `${t}/${n}`;
 	return /* @__PURE__ */ l("div", {
 		className: I(m.container, u),
 		children: [/* @__PURE__ */ c("div", {
 			className: m.wrapper,
-			children: r === "bar" ? v() : b()
+			children: r === "bar" ? b() : x()
 		}), s && /* @__PURE__ */ c("div", {
 			className: m.valueContainer,
 			children: /* @__PURE__ */ c(L, {
-				typographySize: _,
+				typographySize: v,
 				bold: !0,
 				className: I(m.valueStyles, h.value),
-				children: x
+				children: S
 			})
 		})]
 	});
@@ -2959,28 +3143,29 @@ var re = ({ value: e = 0, currentStep: t = 0, totalSteps: n = 5, variant: r = "b
 		return d.switch.disabled;
 	};
 	return /* @__PURE__ */ l("div", {
-		className: I("flex items-start gap-3", s),
+		className: I(u.geometry.switch.layout.container, s),
 		children: [/* @__PURE__ */ c("button", {
 			role: "switch",
 			"aria-checked": e,
 			"aria-disabled": n,
 			onClick: () => !n && t(!e),
 			disabled: n,
-			className: I(u.geometry.switch.baseStyles, p.track, m()),
-			children: /* @__PURE__ */ c("div", { className: I(u.geometry.switch.thumbStyles, p.thumb, e ? p.translateChecked : p.translateUnchecked) })
+			className: I(u.geometry.switch.layout.baseStyles, p.track, m()),
+			children: /* @__PURE__ */ c("div", { className: I(u.geometry.switch.layout.thumbStyles, p.thumb, e ? p.translateChecked : p.translateUnchecked) })
 		}), (a || o) && /* @__PURE__ */ l("div", {
-			className: "flex flex-col gap-1",
+			className: u.geometry.switch.layout.contentWrapper,
 			children: [a && /* @__PURE__ */ c("label", {
-				className: u.geometry.switch.label,
+				className: u.geometry.switch.layout.label,
+				onClick: () => !n && t(!e),
 				children: a
 			}), o && /* @__PURE__ */ c("p", {
-				className: u.geometry.switch.description,
+				className: u.geometry.switch.layout.description,
 				children: o
 			})]
 		})]
 	});
 }, ae = ({ children: e, className: t, style: n, size: r = y.Medium, typographySize: i, onClick: a }) => {
-	let { theme: o, themeConfig: s } = F(), l = r, u = o.geometry.cards[l], d = i || o.geometry.cards.typographyMappings[l] || b.Medium, f = o.geometry.typography[d];
+	let { theme: o, themeConfig: s } = F(), l = r, u = o.geometry.cards[l], d = i || u.typography, f = o.geometry.typography[d];
 	return /* @__PURE__ */ c("div", {
 		onClick: a,
 		role: a ? "button" : void 0,
@@ -3093,7 +3278,7 @@ var re = ({ value: e = 0, currentStep: t = 0, totalSteps: n = 5, variant: r = "b
 		children: e
 	});
 }, U = ({ title: e, description: t, actions: n, className: r, size: i = y.Xlarge, titleTypographySize: a, descriptionTypographySize: o }) => {
-	let { themeConfig: s, theme: u } = F(), d = u.geometry.topbar, f = a || d.typographyMappings[i], p = o || d.typographyMappings.medium;
+	let { themeConfig: s, theme: u } = F(), d = u.geometry.topbar, f = a || d.titleTypography[i], p = o || d.descriptionTypography;
 	return /* @__PURE__ */ l("header", {
 		className: I(d.wrapper, s.layout.topbar.container, d.padding, d.margin, d.corner, d.height, d.width, r),
 		children: [
@@ -3249,7 +3434,7 @@ var re = ({ value: e = 0, currentStep: t = 0, totalSteps: n = 5, variant: r = "b
 	}, [s, u]), s ? g(/* @__PURE__ */ c("div", {
 		ref: l,
 		role: "listbox",
-		className: I(f.dropdown?.content || "", d.geometry.dropdown?.[h]?.size || "", d.geometry.dropdown?.contentPositioning || "", n),
+		className: I(f.dropdown?.content || "", d.geometry.dropdown?.[h]?.width || "", d.geometry.dropdown?.contentPositioning || "", n),
 		style: {
 			position: "absolute",
 			top: p.top,
@@ -3288,9 +3473,9 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 		}) : t)
 	});
 }, de = ({ children: t, className: n, icon: r, size: i = y.Medium, typographySize: a, style: o }) => {
-	let { theme: s, themeConfig: u } = F(), d = s.geometry.list, { itemCorner: f, itemGap: p, iconOpacity: m, transition: h } = d, g = i, _ = a || d.typographyMappings[g];
+	let { theme: s, themeConfig: u } = F(), d = s.geometry.list, { itemCorner: f, itemGap: p, iconOpacity: m, transition: h } = d, g = i, _ = a || d[g].typography;
 	return /* @__PURE__ */ l("div", {
-		className: I(u.list.itemBase, h, p, f, i, n),
+		className: I(u.list.itemBase, h, p, f, d[g].padding, n),
 		style: { ...o },
 		onMouseEnter: (e) => e.currentTarget.style.backgroundColor = u.list.itemHover,
 		onMouseLeave: (e) => e.currentTarget.style.backgroundColor = s.geometry.list.itemHoverResetColor,
@@ -3324,7 +3509,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 		})
 	});
 }, fe = ({ title: e, description: t, icon: n, variant: r = x.Neutral, action: i, onClose: a, className: o, typographySize: s }) => {
-	let { theme: u, themeConfig: d } = F(), f = u.geometry.message, p = d.message.variants[r], m = s || b.Medium;
+	let { theme: u, themeConfig: d } = F(), f = u.geometry.message, p = d.message.variants[r], m = s || f.titleTypographySize, h = s || f.descriptionTypographySize;
 	return /* @__PURE__ */ l("div", {
 		className: I(f.base, f.containerPadding, f.borderRadius, f.transition, p.container, o),
 		role: "alert",
@@ -3353,7 +3538,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 					className: I(f.titleExtra, d.cardText),
 					children: e
 				}), t && /* @__PURE__ */ c(L, {
-					typographySize: m,
+					typographySize: h,
 					className: I(f.descriptionExtra, d.mutedText),
 					children: t
 				})]
@@ -3395,7 +3580,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 	}, [t]);
 	let v = (e) => {
 		g(e), r && r(e);
-	}, b = p.geometry.tabs, x = a, S = s || b.typographyMappings[x], C = () => /* @__PURE__ */ c("div", {
+	}, b = p.geometry.tabs, x = a, S = s || b[x].typography, C = () => /* @__PURE__ */ c("div", {
 		className: I(m.tabs.container, b.segment.container, d ? b.segment.fullWidth : b.segment.fitted, f),
 		children: e.map((e) => {
 			let t = _ === e.id;
@@ -3405,7 +3590,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 				"aria-selected": t,
 				disabled: e.disabled,
 				onClick: () => !e.disabled && v(e.id),
-				className: I(b.segment.button, b[x].size, p.geometry.typography[S], d && b.segment.buttonFullWidth, t ? m.tabs.active : m.tabs.inactive, e.disabled && b.disabled),
+				className: I(b.segment.button, I(b[x].height, b[x].padding), p.geometry.typography[S], d && b.segment.buttonFullWidth, t ? m.tabs.active : m.tabs.inactive, e.disabled && b.disabled),
 				children: [e.icon, e.label]
 			}, e.id);
 		})
@@ -3419,7 +3604,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 				"aria-selected": t,
 				disabled: e.disabled,
 				onClick: () => !e.disabled && v(e.id),
-				className: I(b.underline.button, b[x].size, p.geometry.typography[S], d && b.underline.buttonFullWidth, e.disabled && b.disabled, t ? m.cardText : m.mutedText),
+				className: I(b.underline.button, I(b[x].height, b[x].padding), p.geometry.typography[S], d && b.underline.buttonFullWidth, e.disabled && b.disabled, t ? m.cardText : m.mutedText),
 				children: [
 					e.icon,
 					e.label,
@@ -3437,7 +3622,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 				"aria-selected": t,
 				disabled: e.disabled,
 				onClick: () => !e.disabled && v(e.id),
-				className: I(b.pill.button, b[x].size, p.geometry.typography[S], t ? m.tabs.active : m.tabs.inactive, e.disabled && b.disabled),
+				className: I(b.pill.button, I(b[x].height, b[x].padding), p.geometry.typography[S], t ? m.tabs.active : m.tabs.inactive, e.disabled && b.disabled),
 				style: t ? void 0 : { borderColor: m.borders.row },
 				children: [e.icon, e.label]
 			}, e.id);
@@ -3457,7 +3642,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 		]
 	});
 }, me = ({ isOpen: e, onClose: t, title: n, children: r, footer: a, size: s = y.Medium, typographySize: u, showCloseButton: d = !0, className: f }) => {
-	let { theme: p } = F(), m = s, _ = p.geometry.modal, v = u || _.typographyMappings[m], [b, x] = o(!1);
+	let { theme: p } = F(), m = s, _ = p.geometry.modal, v = u || _[m].typography, [b, x] = o(!1);
 	if (i(() => (x(!0), e && (document.body.style.overflow = "hidden"), () => {
 		document.body.style.overflow = "unset";
 	}), [e]), i(() => {
@@ -3474,7 +3659,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 			onClick: t,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ l(V, {
-			className: I(S.container, S[m].size, f),
+			className: I(S.container, S[m].width, f),
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": n ? "tiger-modal-title" : void 0,
@@ -3546,7 +3731,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 		}) : t)
 	});
 }, Q = ({ children: e, size: t = y.Medium, className: n, typographySize: r, ...i }) => {
-	let { theme: a, themeConfig: o } = F(), s = a.geometry.table, l = t, u = r || s.typographyMappings.header;
+	let { theme: a, themeConfig: o } = F(), s = a.geometry.table, l = t, u = r || s.headerTypographySize;
 	return /* @__PURE__ */ c("th", {
 		className: I(s.headerCell, s[l].headerCellSize, n),
 		style: {
@@ -3563,7 +3748,7 @@ var ue = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 		})
 	});
 }, ye = ({ children: e, size: t = y.Medium, className: n, typographySize: r, ...i }) => {
-	let { theme: a, themeConfig: o } = F(), s = a.geometry.table, l = t, u = r || s.typographyMappings.data;
+	let { theme: a, themeConfig: o } = F(), s = a.geometry.table, l = t, u = r || s.dataTypographySize;
 	return /* @__PURE__ */ c("td", {
 		className: I(s[l].dataCellSize, n),
 		style: { borderBottom: `${s.dataBorder} ${o.borders.row}` },