@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606090726

package/dist/tag/theme.js

@@ -1,231 +1,186 @@
 //#region src/tag/theme.ts
+/** Token references per semantic intent. Tag-only; kept local per design decision. */
+const intentTokens = {
+	brand: {
+		solid: "var(--vui-action-brand-solid)",
+		solidHover: "var(--vui-action-brand-solid-hover)",
+		solidPressed: "var(--vui-action-brand-solid-pressed)",
+		solidInverse: "var(--vui-action-brand-solid-inverse)",
+		subtle: "var(--vui-action-brand-subtle)",
+		subtleHover: "var(--vui-action-brand-subtle-hover)",
+		subtlePressed: "var(--vui-action-brand-subtle-pressed)",
+		subtleInverse: "var(--vui-action-brand-subtle-inverse)"
+	},
+	success: {
+		solid: "var(--vui-action-success-solid)",
+		solidHover: "var(--vui-action-success-solid-hover)",
+		solidPressed: "var(--vui-action-success-solid-pressed)",
+		solidInverse: "var(--vui-action-success-solid-inverse)",
+		subtle: "var(--vui-action-success-subtle)",
+		subtleHover: "var(--vui-action-success-subtle-hover)",
+		subtlePressed: "var(--vui-action-success-subtle-pressed)",
+		subtleInverse: "var(--vui-action-success-subtle-inverse)"
+	},
+	danger: {
+		solid: "var(--vui-action-danger-solid)",
+		solidHover: "var(--vui-action-danger-solid-hover)",
+		solidPressed: "var(--vui-action-danger-solid-pressed)",
+		solidInverse: "var(--vui-action-danger-solid-inverse)",
+		subtle: "var(--vui-action-danger-subtle)",
+		subtleHover: "var(--vui-action-danger-subtle-hover)",
+		subtlePressed: "var(--vui-action-danger-subtle-pressed)",
+		subtleInverse: "var(--vui-action-danger-subtle-inverse)"
+	},
+	lavender: {
+		solid: "var(--vui-action-lavender-solid)",
+		solidHover: "var(--vui-action-lavender-solid-hover)",
+		solidPressed: "var(--vui-action-lavender-solid-pressed)",
+		solidInverse: "var(--vui-action-lavender-solid-inverse)",
+		subtle: "var(--vui-action-lavender-subtle)",
+		subtleHover: "var(--vui-action-lavender-subtle-hover)",
+		subtlePressed: "var(--vui-action-lavender-subtle-pressed)",
+		subtleInverse: "var(--vui-action-lavender-subtle-inverse)"
+	},
+	eucalyptus: {
+		solid: "var(--vui-action-eucalyptus-solid)",
+		solidHover: "var(--vui-action-eucalyptus-solid-hover)",
+		solidPressed: "var(--vui-action-eucalyptus-solid-pressed)",
+		solidInverse: "var(--vui-action-eucalyptus-solid-inverse)",
+		subtle: "var(--vui-action-eucalyptus-subtle)",
+		subtleHover: "var(--vui-action-eucalyptus-subtle-hover)",
+		subtlePressed: "var(--vui-action-eucalyptus-subtle-pressed)",
+		subtleInverse: "var(--vui-action-eucalyptus-subtle-inverse)"
+	},
+	terracotta: {
+		solid: "var(--vui-action-terracotta-solid)",
+		solidHover: "var(--vui-action-terracotta-solid-hover)",
+		solidPressed: "var(--vui-action-terracotta-solid-pressed)",
+		solidInverse: "var(--vui-action-terracotta-solid-inverse)",
+		subtle: "var(--vui-action-terracotta-subtle)",
+		subtleHover: "var(--vui-action-terracotta-subtle-hover)",
+		subtlePressed: "var(--vui-action-terracotta-subtle-pressed)",
+		subtleInverse: "var(--vui-action-terracotta-subtle-inverse)"
+	},
+	grey: {
+		solid: "var(--vui-action-grey-solid)",
+		solidHover: "var(--vui-action-grey-solid-hover)",
+		solidPressed: "var(--vui-action-grey-solid-pressed)",
+		solidInverse: "var(--vui-action-grey-solid-inverse)",
+		subtle: "var(--vui-action-grey-subtle)",
+		subtleHover: "var(--vui-action-grey-subtle-hover)",
+		subtlePressed: "var(--vui-action-grey-subtle-pressed)",
+		subtleInverse: "var(--vui-action-grey-subtle-inverse)"
+	},
+	warning: {
+		solid: "var(--vui-action-yellow-solid)",
+		solidHover: "var(--vui-action-yellow-solid-hover)",
+		solidPressed: "var(--vui-action-yellow-solid-pressed)",
+		solidInverse: "var(--vui-action-yellow-solid-inverse)",
+		subtle: "var(--vui-action-yellow-subtle)",
+		subtleHover: "var(--vui-action-yellow-subtle-hover)",
+		subtlePressed: "var(--vui-action-yellow-subtle-pressed)",
+		subtleInverse: "var(--vui-action-yellow-subtle-inverse)"
+	}
+};
+/** Container styles per visual hierarchy, composed from intent tokens. */
+const hierarchyRules = {
+	subtle: (t) => ({
+		bg: t.subtle,
+		color: t.subtleInverse,
+		bgHover: t.subtleHover,
+		bgPressed: t.subtlePressed
+	}),
+	solid: (t) => ({
+		bg: t.solid,
+		color: t.solidInverse,
+		bgHover: t.solidHover,
+		bgPressed: t.solidPressed
+	})
+};
 const baseStyle = {};
 const defaultProps = {
 	size: "md",
-	variant: "subtleBlue",
+	variant: "subtleBrand",
 	fontWeight: "medium"
 };
 const parts = [
 	"container",
-	"button",
 	"icon",
-	"text"
+	"dismiss"
 ];
 const sizes = {
 	xs: {
 		container: {
-			borderRadius: "lg",
 			fontSize: "sm",
 			h: 20,
-			spaceX: 4
+			paddingX: 4,
+			paddingY: 2,
+			gapX: 4,
+			borderRadius: 6
 		},
-		button: { size: "sm" },
-		icon: { size: "xs" }
+		icon: { fontSize: "12px" },
+		dismiss: {
+			size: "sm",
+			w: 20,
+			h: 20,
+			minW: 20
+		}
 	},
 	sm: {
 		container: {
 			fontSize: "sm",
 			h: 24,
-			spaceX: 4
+			paddingX: 6,
+			paddingY: 4,
+			gapX: 6,
+			borderRadius: 6
 		},
-		button: { size: "sm" },
-		icon: { size: "xs" }
+		icon: { fontSize: "16px" },
+		dismiss: {
+			size: "sm",
+			w: 24,
+			h: 24,
+			minW: 24
+		}
 	},
 	md: {
 		container: {
 			fontSize: "sm",
 			h: 32,
-			spaceX: 6
+			paddingX: 8,
+			paddingY: 6,
+			gapX: 8,
+			borderRadius: 6
 		},
-		button: { size: "sm" },
-		icon: { size: "sm" }
+		icon: { fontSize: "16px" },
+		dismiss: {
+			size: "md",
+			w: 32,
+			h: 32,
+			minW: 32
+		}
 	},
 	lg: {
 		container: {
 			fontSize: "md",
 			h: 40,
-			spaceX: 8
-		},
-		button: { size: "md" },
-		icon: { size: "md" }
-	}
-};
-const variants = {
-	subtleGrey: {
-		container: {
-			bg: "sandstone.90",
-			hoverBg: "sandstone.85",
-			borderColor: "sandstone.85",
-			color: "sandstone.20",
-			activeBg: "sandstone.79"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "sandstone.85",
-			hoverBorderColor: "transparent",
-			hoverColor: "sandstone.20",
-			color: "sandstone.20",
-			activeBg: "sandstone.79"
-		}
-	},
-	subtleBlue: {
-		container: {
-			bg: "skyBlue.95",
-			hoverBg: "skyBlue.90",
-			activeBg: "skyBlue.85",
-			borderColor: "skyBlue.95",
-			color: "seaBlue.main"
+			paddingX: 12,
+			paddingY: 8,
+			gapX: 10,
+			borderRadius: 6
 		},
-		button: {
-			bg: "transparent",
-			hoverBg: "skyBlue.90",
-			activeBg: "skyBlue.85",
-			hoverBorderColor: "transparent",
-			hoverColor: "seaBlue.main",
-			color: "seaBlue.main"
-		}
-	},
-	subtleRed: {
-		container: {
-			bg: "energyRed.95",
-			borderColor: "energyRed.95",
-			hoverBg: "energyRed.90",
-			activeBg: "energyRed.85",
-			color: "energyRed.45"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "energyRed.90",
-			activeBg: "energyRed.85",
-			hoverBorderColor: "transparent",
-			hoverColor: "energyRed.45",
-			color: "energyRed.45"
-		}
-	},
-	subtleYellow: {
-		container: {
-			bg: "sunflower.85",
-			hoverBg: "sunflower.70",
-			activeBg: "sunflower.65",
-			borderColor: "terracotta.30",
-			color: "sunflower.20"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "sunflower.70",
-			activeBg: "sunflower.65",
-			hoverBorderColor: "transparent",
-			hoverColor: "sunflower.20",
-			color: "sunflower.20"
-		}
-	},
-	subtleGreen: {
-		container: {
-			bg: "landGreen.95",
-			hoverBg: "landGreen.90",
-			borderColor: "landGreen.30",
-			color: "landGreen.30",
-			activeBg: "landGreen.85"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "landGreen.90",
-			activeBg: "landGreen.85",
-			hoverBorderColor: "transparent",
-			hoverColor: "landGreen.30",
-			color: "landGreen.30"
-		}
-	},
-	/** solids next */
-	solidBlue: {
-		container: {
-			bg: "seaBlue.main",
-			hoverBg: "seaBlue.35",
-			activeBg: "seaBlue.40",
-			borderColor: "seaBlue.main",
-			color: "white"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "seaBlue.35",
-			activeBg: "seaBlue.40",
-			hoverBorderColor: "transparent",
-			activeBorderColor: "transparent",
-			hoverColor: "white",
-			color: "white"
-		}
-	},
-	solidDarkBlue: {
-		container: {
-			bg: "darkBlue.18",
-			hoverBg: "darkBlue.25",
-			activeBg: "darkBlue.35",
-			borderColor: "darkBlue.18",
-			color: "white"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "darkBlue.25",
-			activeBg: "darkBlue.35",
-			hoverBorderColor: "transparent",
-			hoverColor: "white",
-			color: "white"
-		}
-	},
-	solidRed: {
-		container: {
-			bg: "energyRed.45",
-			hoverBg: "energyRed.54",
-			activeBg: "energyRed.60",
-			borderColor: "energyRed.45",
-			color: "white"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "energyRed.54",
-			activeBg: "energyRed.60",
-			hoverBorderColor: "transparent",
-			activeBorderColor: "transparent",
-			hoverColor: "white",
-			color: "white"
-		}
-	},
-	solidYellow: {
-		container: {
-			bg: "sunflower.50",
-			hoverBg: "sunflower.80",
-			activeBg: "sunflower.85",
-			borderColor: "sunflower.50",
-			color: "sunflower.15"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "sunflower.80",
-			activeBg: "sunflower.85",
-			hoverBorderColor: "transparent",
-			hoverColor: "sunflower.15",
-			color: "sunflower.15"
-		}
-	},
-	solidGreen: {
-		container: {
-			bg: "landGreen.35",
-			hoverBg: "landGreen.41",
-			activeBg: "landGreen.45",
-			borderColor: "landGreen.35",
-			color: "white"
-		},
-		button: {
-			bg: "transparent",
-			hoverBg: "landGreen.41",
-			activeBg: "landGreen.45",
-			hoverBorderColor: "transparent",
-			activeBorderColor: "transparent",
-			hoverColor: "white",
-			color: "white"
+		icon: { fontSize: "18px" },
+		dismiss: {
+			size: "lg",
+			w: 40,
+			h: 40,
+			minW: 40
 		}
 	}
 };
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+/** 16 canonical variants: `${hierarchy}${Intent}` (e.g. `subtleBrand`, `solidGrey`). */
+const variants = Object.fromEntries(Object.entries(intentTokens).flatMap(([intentKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [`${hierarchyKey}${capitalize(intentKey)}`, { container: buildContainer(tokens) }])));
 var theme_default = {
 	baseStyle,
 	defaultProps,
@@ -236,5 +191,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/tag/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/tag/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleBlue',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'button', 'icon', 'text']\n\nconst sizes = {\n  xs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 20,\n      spaceX: 4,\n    },\n    button: {\n      size: 'sm',\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  sm: {\n    container: {\n      fontSize: 'sm',\n      h: 24,\n      spaceX: 4,\n    },\n    button: {\n      size: 'sm',\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      spaceX: 6,\n    },\n    button: {\n      size: 'sm',\n    },\n    icon: {\n      size: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      spaceX: 8,\n    },\n    button: {\n      size: 'md',\n    },\n    icon: {\n      size: 'md',\n    },\n  },\n}\n\nconst variants = {\n  subtleGrey: {\n    container: {\n      bg: 'sandstone.90',\n      hoverBg: 'sandstone.85',\n      borderColor: 'sandstone.85',\n      color: 'sandstone.20',\n      activeBg: 'sandstone.79',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'sandstone.85',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'sandstone.20',\n      color: 'sandstone.20',\n      activeBg: 'sandstone.79',\n    },\n  },\n  subtleBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      hoverBg: 'skyBlue.90',\n      activeBg: 'skyBlue.85',\n      borderColor: 'skyBlue.95',\n      color: 'seaBlue.main',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'skyBlue.90',\n      activeBg: 'skyBlue.85',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'seaBlue.main',\n      color: 'seaBlue.main',\n    },\n  },\n  subtleRed: {\n    container: {\n      bg: 'energyRed.95',\n      borderColor: 'energyRed.95',\n      hoverBg: 'energyRed.90',\n      activeBg: 'energyRed.85',\n      color: 'energyRed.45',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'energyRed.90',\n      activeBg: 'energyRed.85',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'energyRed.45',\n      color: 'energyRed.45',\n    },\n  },\n  subtleYellow: {\n    container: {\n      bg: 'sunflower.85',\n      hoverBg: 'sunflower.70',\n      activeBg: 'sunflower.65',\n      borderColor: 'terracotta.30',\n      color: 'sunflower.20',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'sunflower.70',\n      activeBg: 'sunflower.65',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'sunflower.20',\n      color: 'sunflower.20',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'landGreen.95',\n      hoverBg: 'landGreen.90',\n      borderColor: 'landGreen.30',\n      color: 'landGreen.30',\n      activeBg: 'landGreen.85',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'landGreen.90',\n      activeBg: 'landGreen.85',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'landGreen.30',\n      color: 'landGreen.30',\n    },\n  },\n\n  /** solids next */\n  solidBlue: {\n    container: {\n      bg: 'seaBlue.main',\n      hoverBg: 'seaBlue.35',\n      activeBg: 'seaBlue.40',\n      borderColor: 'seaBlue.main',\n      color: 'white',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'seaBlue.35',\n      activeBg: 'seaBlue.40',\n      hoverBorderColor: 'transparent',\n      activeBorderColor: 'transparent',\n      hoverColor: 'white',\n      color: 'white',\n    },\n  },\n  solidDarkBlue: {\n    container: {\n      bg: 'darkBlue.18',\n      hoverBg: 'darkBlue.25',\n      activeBg: 'darkBlue.35',\n      borderColor: 'darkBlue.18',\n      color: 'white',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'darkBlue.25',\n      activeBg: 'darkBlue.35',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'white',\n      color: 'white',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      hoverBg: 'energyRed.54',\n      activeBg: 'energyRed.60',\n      borderColor: 'energyRed.45',\n      color: 'white',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'energyRed.54',\n      activeBg: 'energyRed.60',\n      hoverBorderColor: 'transparent',\n      activeBorderColor: 'transparent',\n      hoverColor: 'white',\n      color: 'white',\n    },\n  },\n  solidYellow: {\n    container: {\n      bg: 'sunflower.50',\n      hoverBg: 'sunflower.80',\n      activeBg: 'sunflower.85',\n      borderColor: 'sunflower.50',\n      color: 'sunflower.15',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'sunflower.80',\n      activeBg: 'sunflower.85',\n      hoverBorderColor: 'transparent',\n      hoverColor: 'sunflower.15',\n      color: 'sunflower.15',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      hoverBg: 'landGreen.41',\n      activeBg: 'landGreen.45',\n      borderColor: 'landGreen.35',\n      color: 'white',\n    },\n    button: {\n      bg: 'transparent',\n      hoverBg: 'landGreen.41',\n      activeBg: 'landGreen.45',\n      hoverBorderColor: 'transparent',\n      activeBorderColor: 'transparent',\n      hoverColor: 'white',\n      color: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/tag/theme.ts"],"sourcesContent":["import type { TagContainerStyles, TagHierarchy, TagIntent, TagIntentTokens } from './tag.types'\n\n// ---------------------------------------------------------------------------\n// Generated variant approach (mirrors button/theme.ts)\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container styles from those tokens.\n// The 21 canonical variants (7 intents × 3 hierarchies) are produced via\n// Object.fromEntries — no hand-written duplication.\n// ---------------------------------------------------------------------------\n\n/** Token references per semantic intent. Tag-only; kept local per design decision. */\nconst intentTokens: Record<TagIntent, TagIntentTokens> = {\n  brand: {\n    solid: 'var(--vui-action-brand-solid)',\n    solidHover: 'var(--vui-action-brand-solid-hover)',\n    solidPressed: 'var(--vui-action-brand-solid-pressed)',\n    solidInverse: 'var(--vui-action-brand-solid-inverse)',\n    subtle: 'var(--vui-action-brand-subtle)',\n    subtleHover: 'var(--vui-action-brand-subtle-hover)',\n    subtlePressed: 'var(--vui-action-brand-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-brand-subtle-inverse)',\n  },\n  success: {\n    solid: 'var(--vui-action-success-solid)',\n    solidHover: 'var(--vui-action-success-solid-hover)',\n    solidPressed: 'var(--vui-action-success-solid-pressed)',\n    solidInverse: 'var(--vui-action-success-solid-inverse)',\n    subtle: 'var(--vui-action-success-subtle)',\n    subtleHover: 'var(--vui-action-success-subtle-hover)',\n    subtlePressed: 'var(--vui-action-success-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-success-subtle-inverse)',\n  },\n  danger: {\n    solid: 'var(--vui-action-danger-solid)',\n    solidHover: 'var(--vui-action-danger-solid-hover)',\n    solidPressed: 'var(--vui-action-danger-solid-pressed)',\n    solidInverse: 'var(--vui-action-danger-solid-inverse)',\n    subtle: 'var(--vui-action-danger-subtle)',\n    subtleHover: 'var(--vui-action-danger-subtle-hover)',\n    subtlePressed: 'var(--vui-action-danger-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-danger-subtle-inverse)',\n  },\n  lavender: {\n    solid: 'var(--vui-action-lavender-solid)',\n    solidHover: 'var(--vui-action-lavender-solid-hover)',\n    solidPressed: 'var(--vui-action-lavender-solid-pressed)',\n    solidInverse: 'var(--vui-action-lavender-solid-inverse)',\n    subtle: 'var(--vui-action-lavender-subtle)',\n    subtleHover: 'var(--vui-action-lavender-subtle-hover)',\n    subtlePressed: 'var(--vui-action-lavender-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-lavender-subtle-inverse)',\n  },\n  eucalyptus: {\n    solid: 'var(--vui-action-eucalyptus-solid)',\n    solidHover: 'var(--vui-action-eucalyptus-solid-hover)',\n    solidPressed: 'var(--vui-action-eucalyptus-solid-pressed)',\n    solidInverse: 'var(--vui-action-eucalyptus-solid-inverse)',\n    subtle: 'var(--vui-action-eucalyptus-subtle)',\n    subtleHover: 'var(--vui-action-eucalyptus-subtle-hover)',\n    subtlePressed: 'var(--vui-action-eucalyptus-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-eucalyptus-subtle-inverse)',\n  },\n  terracotta: {\n    solid: 'var(--vui-action-terracotta-solid)',\n    solidHover: 'var(--vui-action-terracotta-solid-hover)',\n    solidPressed: 'var(--vui-action-terracotta-solid-pressed)',\n    solidInverse: 'var(--vui-action-terracotta-solid-inverse)',\n    subtle: 'var(--vui-action-terracotta-subtle)',\n    subtleHover: 'var(--vui-action-terracotta-subtle-hover)',\n    subtlePressed: 'var(--vui-action-terracotta-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-terracotta-subtle-inverse)',\n  },\n  grey: {\n    solid: 'var(--vui-action-grey-solid)',\n    solidHover: 'var(--vui-action-grey-solid-hover)',\n    solidPressed: 'var(--vui-action-grey-solid-pressed)',\n    solidInverse: 'var(--vui-action-grey-solid-inverse)',\n    subtle: 'var(--vui-action-grey-subtle)',\n    subtleHover: 'var(--vui-action-grey-subtle-hover)',\n    subtlePressed: 'var(--vui-action-grey-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-grey-subtle-inverse)',\n  },\n  warning: {\n    solid: 'var(--vui-action-yellow-solid)',\n    solidHover: 'var(--vui-action-yellow-solid-hover)',\n    solidPressed: 'var(--vui-action-yellow-solid-pressed)',\n    solidInverse: 'var(--vui-action-yellow-solid-inverse)',\n    subtle: 'var(--vui-action-yellow-subtle)',\n    subtleHover: 'var(--vui-action-yellow-subtle-hover)',\n    subtlePressed: 'var(--vui-action-yellow-subtle-pressed)',\n    subtleInverse: 'var(--vui-action-yellow-subtle-inverse)',\n  },\n}\n\n/** Container styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<TagHierarchy, (t: TagIntentTokens) => TagContainerStyles> = {\n  subtle: t => ({\n    bg: t.subtle,\n    color: t.subtleInverse,\n    bgHover: t.subtleHover,\n    bgPressed: t.subtlePressed,\n  }),\n  solid: t => ({\n    bg: t.solid,\n    color: t.solidInverse,\n    bgHover: t.solidHover,\n    bgPressed: t.solidPressed,\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleBrand',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'dismiss']\n\n// Per-Figma `Tag / Static` (file VPUW5N9Dng7UTK3YX5RJlY, node 1117:3410).\n// borderRadius is 6px on every size (NOT pill); no border on any static variant.\n// `dismiss.size` maps tag size → DismissButton size; w/h override forces square footprint.\nconst sizes = {\n  xs: {\n    container: { fontSize: 'sm', h: 20, paddingX: 4, paddingY: 2, gapX: 4, borderRadius: 6 },\n    icon: { fontSize: '12px' },\n    dismiss: { size: 'sm', w: 20, h: 20, minW: 20 },\n  },\n  sm: {\n    container: { fontSize: 'sm', h: 24, paddingX: 6, paddingY: 4, gapX: 6, borderRadius: 6 },\n    icon: { fontSize: '16px' },\n    dismiss: { size: 'sm', w: 24, h: 24, minW: 24 },\n  },\n  md: {\n    container: { fontSize: 'sm', h: 32, paddingX: 8, paddingY: 6, gapX: 8, borderRadius: 6 },\n    icon: { fontSize: '16px' },\n    dismiss: { size: 'md', w: 32, h: 32, minW: 32 },\n  },\n  lg: {\n    container: { fontSize: 'md', h: 40, paddingX: 12, paddingY: 8, gapX: 10, borderRadius: 6 },\n    icon: { fontSize: '18px' },\n    dismiss: { size: 'lg', w: 40, h: 40, minW: 40 },\n  },\n}\n\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\n/** 16 canonical variants: `${hierarchy}${Intent}` (e.g. `subtleBrand`, `solidGrey`). */\nconst variants: Record<string, Record<string, TagContainerStyles>> = Object.fromEntries(\n  (Object.entries(intentTokens) as Array<[TagIntent, TagIntentTokens]>).flatMap(([intentKey, tokens]) =>\n    (Object.entries(hierarchyRules) as Array<[TagHierarchy, (t: TagIntentTokens) => TagContainerStyles]>).map(\n      ([hierarchyKey, buildContainer]) => [\n        `${hierarchyKey}${capitalize(intentKey)}`,\n        { container: buildContainer(tokens) },\n      ],\n    ),\n  ),\n)\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;AAYA,MAAM,eAAmD;CACvD,OAAO;EACL,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,SAAS;EACP,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,UAAU;EACR,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,YAAY;EACV,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,YAAY;EACV,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,MAAM;EACJ,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,SAAS;EACP,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;AACF;;AAGA,MAAM,iBAAmF;CACvF,SAAQ,OAAM;EACZ,IAAI,EAAE;EACN,OAAO,EAAE;EACT,SAAS,EAAE;EACX,WAAW,EAAE;CACf;CACA,QAAO,OAAM;EACX,IAAI,EAAE;EACN,OAAO,EAAE;EACT,SAAS,EAAE;EACX,WAAW,EAAE;CACf;AACF;AAIA,MAAM,YAAY,CAAC;AAEnB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;AACd;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAQ;AAAS;AAK7C,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS;GAAE,MAAM;GAAM,GAAG;GAAI,GAAG;GAAI,MAAM;EAAG;CAChD;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS;GAAE,MAAM;GAAM,GAAG;GAAI,GAAG;GAAI,MAAM;EAAG;CAChD;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS;GAAE,MAAM;GAAM,GAAG;GAAI,GAAG;GAAI,MAAM;EAAG;CAChD;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAI,UAAU;GAAG,MAAM;GAAI,cAAc;EAAE;EACzF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS;GAAE,MAAM;GAAM,GAAG;GAAI,GAAG;GAAI,MAAM;EAAG;CAChD;AACF;AAEA,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC;;AAGvE,MAAM,WAA+D,OAAO,YACzE,OAAO,QAAQ,YAAY,CAAC,CAAyC,SAAS,CAAC,WAAW,YACxF,OAAO,QAAQ,cAAc,CAAC,CAAuE,KACnG,CAAC,cAAc,oBAAoB,CAClC,GAAG,eAAe,WAAW,SAAS,KACtC,EAAE,WAAW,eAAe,MAAM,EAAE,CACtC,CACF,CACF,CACF;AAEA,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}

package/dist/tag/utils.d.ts

@@ -0,0 +1,18 @@
+import { TagIntent } from "./tag.types.js";
+
+//#region src/tag/utils.d.ts
+/**
+ * Converts a two-prop variant+intent pair into the combined theme key used
+ * internally (e.g. `resolveTagVariantKey('subtle','brand') => 'subtleBrand'`).
+ * When `intent` is omitted, `'brand'` is used as the default.
+ *
+ * If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or
+ * `'subtleBrand'`) it is returned unchanged so the new API is backward-compatible.
+ *
+ * Returns `'subtleBrand'` (the default variant) when `variant` is absent.
+ */
+declare const resolveTagVariantKey: (variant: string | undefined, intent: TagIntent | string | undefined) => string;
+//#endregion
+export { resolveTagVariantKey };
+
+//# sourceMappingURL=utils.d.ts.map

package/dist/tag/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/tag/utils.ts"],"mappings":";;;;;AAiBA;;;;;;;;cAAa,oBAAA,GACX,OAAA,sBACA,MAAA,EAAQ,SAAS"}

package/dist/tag/utils.js

@@ -0,0 +1,24 @@
+//#region src/tag/utils.ts
+/** Canonical hierarchy keys recognised by the two-prop API. */
+const HIERARCHY_KEYS = new Set(["subtle", "solid"]);
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+/**
+* Converts a two-prop variant+intent pair into the combined theme key used
+* internally (e.g. `resolveTagVariantKey('subtle','brand') => 'subtleBrand'`).
+* When `intent` is omitted, `'brand'` is used as the default.
+*
+* If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or
+* `'subtleBrand'`) it is returned unchanged so the new API is backward-compatible.
+*
+* Returns `'subtleBrand'` (the default variant) when `variant` is absent.
+*/
+const resolveTagVariantKey = (variant, intent) => {
+	if (!variant) return `subtle${capitalize(intent ?? "brand")}`;
+	if (!HIERARCHY_KEYS.has(variant)) return variant;
+	return `${variant}${capitalize(intent ?? "brand")}`;
+};
+
+//#endregion
+export { resolveTagVariantKey };
+globalThis.__vuiVersion__ = "5.2.0"
+//# sourceMappingURL=utils.js.map

package/dist/tag/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/tag/utils.ts"],"sourcesContent":["import type { TagHierarchy, TagIntent } from './tag.types'\n\n/** Canonical hierarchy keys recognised by the two-prop API. */\nconst HIERARCHY_KEYS = new Set<TagHierarchy>(['subtle', 'solid'])\n\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\n/**\n * Converts a two-prop variant+intent pair into the combined theme key used\n * internally (e.g. `resolveTagVariantKey('subtle','brand') => 'subtleBrand'`).\n * When `intent` is omitted, `'brand'` is used as the default.\n *\n * If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or\n * `'subtleBrand'`) it is returned unchanged so the new API is backward-compatible.\n *\n * Returns `'subtleBrand'` (the default variant) when `variant` is absent.\n */\nexport const resolveTagVariantKey = (\n  variant: string | undefined,\n  intent: TagIntent | string | undefined,\n): string => {\n  if (!variant) return `subtle${capitalize(intent ?? 'brand')}`\n\n  // Already a combined / legacy key — pass through unchanged.\n  if (!HIERARCHY_KEYS.has(variant as TagHierarchy)) return variant\n\n  // New two-prop API: combine hierarchy + intent (defaults to 'brand').\n  return `${variant}${capitalize(intent ?? 'brand')}`\n}\n"],"mappings":";;AAGA,MAAM,iBAAiB,IAAI,IAAkB,CAAC,UAAU,OAAO,CAAC;AAEhE,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC;;;;;;;;;;;AAYvE,MAAa,wBACX,SACA,WACW;CACX,IAAI,CAAC,SAAS,OAAO,SAAS,WAAW,UAAU,OAAO;CAG1D,IAAI,CAAC,eAAe,IAAI,OAAuB,GAAG,OAAO;CAGzD,OAAO,GAAG,UAAU,WAAW,UAAU,OAAO;AAClD"}

package/dist/tagToggle/TagToggle.d.ts

@@ -0,0 +1,12 @@
+import { VuiComponent } from "../core/vui.js";
+import { TagToggleProps } from "./tagToggle.types.js";
+//#region src/tagToggle/TagToggle.d.ts
+/**
+ * A toggle button styled as a tag. Uses brand-only colour tokens and an
+ * `aria-pressed` attribute to convey selected state.
+ */
+declare const TagToggle: VuiComponent<"button", TagToggleProps>;
+//#endregion
+export { TagToggle };
+
+//# sourceMappingURL=TagToggle.d.ts.map

package/dist/tagToggle/TagToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagToggle.d.ts","names":[],"sources":["../../src/tagToggle/TagToggle.tsx"],"mappings":";;;;;;;cAoCa,SAAA,EAAS,YAAA,WAAA,cAAA"}

package/dist/tagToggle/TagToggle.js

@@ -0,0 +1,82 @@
+import { isString } from "../utils/assertion.js";
+import { cs } from "../utils/styles.js";
+import fontSizes_default from "../theme/foundations/fontSizes.js";
+import { useStyleConfig } from "../core/theme.js";
+import styled from "../core/styled.js";
+import vui from "../core/vui.js";
+import Icon from "../icon/icon.js";
+import T from "../t/t.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/tagToggle/TagToggle.tsx
+const TagToggleBase = styled.buttonBox`
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: medium;
+  justify-content: center;
+  line-height: 1;
+  position: relative;
+  transition-duration: fast;
+  user-select: none;
+  width: fit-content;
+
+  &:focus {
+    outline: none;
+  }
+`;
+/**
+* A toggle button styled as a tag. Uses brand-only colour tokens and an
+* `aria-pressed` attribute to convey selected state.
+*/
+const TagToggle = vui((props, ref) => {
+	const { className, icon, isSelected = false, label, onChange, variant = "solid", ...rest } = props;
+	const themeVariant = isSelected ? `${variant}Selected` : variant;
+	const styles = useStyleConfig("TagToggle", {
+		...props,
+		variant: themeVariant
+	});
+	const { h, fontSize: themeFontSize, paddingX = 0, paddingY = 0, gapX = 0, borderRadius, bgHover, bgPressed, ...containerColors } = styles.container ?? {};
+	const iconStyles = styles.icon ?? {};
+	const fontSize = `var(--vui-tag-font-size, ${fontSizes_default[themeFontSize] ?? themeFontSize}px)`;
+	const pxX = `${paddingX}px`;
+	const pxY = `${paddingY}px`;
+	const pxGap = `${gapX}px`;
+	return /* @__PURE__ */ jsx(TagToggleBase, {
+		"aria-pressed": isSelected,
+		borderRadius,
+		className: cs("vui-tagToggle", className),
+		focusRing: 2,
+		fontSize,
+		h,
+		onClick: () => onChange?.(!isSelected),
+		px: pxX,
+		py: pxY,
+		ref,
+		type: "button",
+		activeBg: bgPressed,
+		hoverBg: bgHover,
+		...containerColors,
+		...rest,
+		children: isString(icon) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			className: "vui-tagToggleIcon",
+			mr: label ? pxGap : void 0,
+			name: icon,
+			...iconStyles
+		}), label && /* @__PURE__ */ jsx(T, {
+			className: "vui-tagToggleText",
+			fontSize,
+			children: label
+		})] }) : label && /* @__PURE__ */ jsx(T, {
+			className: "vui-tagToggleText",
+			fontSize,
+			children: label
+		})
+	});
+});
+TagToggle.displayName = "TagToggle";
+
+//#endregion
+export { TagToggle as default };
+globalThis.__vuiVersion__ = "5.2.0"
+//# sourceMappingURL=TagToggle.js.map

package/dist/tagToggle/TagToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagToggle.js","names":["fontSizes"],"sources":["../../src/tagToggle/TagToggle.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { fontSizes } from '../theme'\nimport { cs, isString } from '../utils'\nimport type { TagToggleProps } from './tagToggle.types'\n\n// ---------------------------------------------------------------------------\n// Styled primitive\n// ---------------------------------------------------------------------------\n\nconst TagToggleBase = styled.buttonBox`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: medium;\n  justify-content: center;\n  line-height: 1;\n  position: relative;\n  transition-duration: fast;\n  user-select: none;\n  width: fit-content;\n\n  &:focus {\n    outline: none;\n  }\n`\n\n// ---------------------------------------------------------------------------\n// TagToggle component\n// ---------------------------------------------------------------------------\n\n/**\n * A toggle button styled as a tag. Uses brand-only colour tokens and an\n * `aria-pressed` attribute to convey selected state.\n */\nexport const TagToggle = vui<'button', TagToggleProps>((props, ref) => {\n  const { className, icon, isSelected = false, label, onChange, variant = 'solid', ...rest } = props\n\n  // Resolve the theme variant key: e.g. subtle → subtle, subtle + selected → subtleSelected.\n  const themeVariant = isSelected ? `${variant}Selected` : variant\n\n  const styles = useStyleConfig('TagToggle', { ...props, variant: themeVariant })\n  const {\n    h,\n    fontSize: themeFontSize,\n    paddingX = 0,\n    paddingY = 0,\n    gapX = 0,\n    borderRadius,\n    bgHover,\n    bgPressed,\n    ...containerColors\n  } = styles.container ?? {}\n  const iconStyles = styles.icon ?? {}\n\n  const resolvedFontSize = fontSizes[themeFontSize as keyof typeof fontSizes] ?? themeFontSize\n  const fontSize = `var(--vui-tag-font-size, ${resolvedFontSize}px)`\n\n  const pxX = `${paddingX}px`\n  const pxY = `${paddingY}px`\n  const pxGap = `${gapX}px`\n\n  return (\n    <TagToggleBase\n      aria-pressed={isSelected}\n      borderRadius={borderRadius}\n      className={cs('vui-tagToggle', className)}\n      focusRing={2}\n      fontSize={fontSize}\n      h={h}\n      onClick={() => onChange?.(!isSelected)}\n      px={pxX}\n      py={pxY}\n      ref={ref}\n      type=\"button\"\n      activeBg={bgPressed}\n      hoverBg={bgHover}\n      {...containerColors}\n      {...rest}\n    >\n      {isString(icon) ? (\n        <>\n          <Icon className=\"vui-tagToggleIcon\" mr={label ? pxGap : undefined} name={icon} {...iconStyles} />\n          {label && (\n            <T className=\"vui-tagToggleText\" fontSize={fontSize}>\n              {label}\n            </T>\n          )}\n        </>\n      ) : (\n        label && (\n          <T className=\"vui-tagToggleText\" fontSize={fontSize}>\n            {label}\n          </T>\n        )\n      )}\n    </TagToggleBase>\n  )\n})\n\nTagToggle.displayName = 'TagToggle'\n\nexport default TagToggle\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,gBAAgB,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;AAyBtC,MAAa,YAAY,KAA+B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,MAAM,aAAa,OAAO,OAAO,UAAU,UAAU,SAAS,GAAG,SAAS;CAG7F,MAAM,eAAe,aAAa,GAAG,QAAQ,YAAY;CAEzD,MAAM,SAAS,eAAe,aAAa;EAAE,GAAG;EAAO,SAAS;CAAa,CAAC;CAC9E,MAAM,EACJ,GACA,UAAU,eACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,cACA,SACA,WACA,GAAG,oBACD,OAAO,aAAa,CAAC;CACzB,MAAM,aAAa,OAAO,QAAQ,CAAC;CAGnC,MAAM,WAAW,4BADQA,kBAAU,kBAA4C,cACjB;CAE9D,MAAM,MAAM,GAAG,SAAS;CACxB,MAAM,MAAM,GAAG,SAAS;CACxB,MAAM,QAAQ,GAAG,KAAK;CAEtB,OACE,oBAAC,eAAD;EACE,gBAAc;EACA;EACd,WAAW,GAAG,iBAAiB,SAAS;EACxC,WAAW;EACD;EACP;EACH,eAAe,WAAW,CAAC,UAAU;EACrC,IAAI;EACJ,IAAI;EACC;EACL,MAAK;EACL,UAAU;EACV,SAAS;EACT,GAAI;EACJ,GAAI;YAEH,SAAS,IAAI,IACZ,4CACE,oBAAC,MAAD;GAAM,WAAU;GAAoB,IAAI,QAAQ,QAAQ;GAAW,MAAM;GAAM,GAAI;EAAa,IAC/F,SACC,oBAAC,GAAD;GAAG,WAAU;GAA8B;aACxC;EACA,EAEL,OAEF,SACE,oBAAC,GAAD;GAAG,WAAU;GAA8B;aACxC;EACA;CAGM;AAEnB,CAAC;AAED,UAAU,cAAc"}

package/dist/tagToggle/index.d.ts

@@ -0,0 +1,2 @@
+import { TagToggleHierarchy, TagToggleInnerProps, TagToggleProps } from "./tagToggle.types.js";
+import { TagToggle } from "./TagToggle.js";

package/dist/tagToggle/tagToggle.types.d.ts

@@ -0,0 +1,19 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+//#region src/tagToggle/tagToggle.types.d.ts
+/** Visual hierarchy of the toggle tag. */
+type TagToggleHierarchy = 'subtle' | 'solid';
+type TagToggleInnerProps = {
+  /** Visual hierarchy. @default 'solid' */variant?: TagToggleHierarchy; /** Size of the toggle tag. @default 'md' */
+  size?: 'xs' | 'sm' | 'md'; /** Icon displayed on the leading side. */
+  icon?: IconProp; /** Label text. */
+  label?: string; /** Whether the toggle is in the selected/active state. */
+  isSelected?: boolean; /** Callback fired when the selected state changes. */
+  onChange?: (isSelected: boolean) => void;
+};
+type TagToggleProps = SystemProps & Omit<ThemingProps<'TagToggle'>, 'size'> & TagToggleInnerProps;
+//#endregion
+export { TagToggleHierarchy, TagToggleInnerProps, TagToggleProps };
+
+//# sourceMappingURL=tagToggle.types.d.ts.map

package/dist/tagToggle/tagToggle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagToggle.types.d.ts","names":[],"sources":["../../src/tagToggle/tagToggle.types.ts"],"mappings":";;;;;KAKY,kBAAA;AAAA,KAEA,mBAAA;2CAEV,OAAA,GAAU,kBAAA,EAJA;EAMV,IAAA;EAEA,IAAA,GAAO,QAAQ,EARa;EAU5B,KAAA,WAR6B;EAU7B,UAAA,YAJe;EAMf,QAAA,IAAY,UAAA;AAAA;AAAA,KAGF,cAAA,GAAiB,WAAA,GAAc,IAAA,CAAK,YAAA,yBAAqC,mBAAA"}