@lolmath/ui 9.5.0 → 9.6.0

package/dist/index.css

@@ -1,185 +1,3 @@
-@layer lol {
-	/* ----- CSS reset ----- */
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	/* ----- Default CSS variables ----- */
-
-	:root {
-		color-scheme: dark;
-
-		--lol-z-index-app: 100;
-		--lol-z-index-modal: 200;
-		--lol-z-index-popover: 300;
-		--lol-z-index-overlay: 400;
-		--lol-z-index-max: 9999;
-
-		--lol-scale: 1;
-
-		--lol-color-blue-100: #cdfafa;
-		--lol-color-blue-200: #0ac8b9;
-		--lol-color-blue-300: #0397ab;
-		--lol-color-blue-400: #005a82;
-		--lol-color-blue-500: #0a323c;
-		--lol-color-blue-600: #091428;
-		--lol-color-blue-700: #0a1428;
-
-		--lol-color-grey-100: #a09b8c;
-		--lol-color-grey-150: #5b5a56;
-		--lol-color-grey-200: #3c3c41;
-		--lol-color-grey-300: #1e2328;
-		--lol-color-grey-cool: #1e282d;
-
-		--lol-color-hextech-black: #010a13;
-
-		--lol-color-gold-100: #f0e6d2;
-		--lol-color-gold-200: #c8aa6e;
-		--lol-color-gold-300: #cdbe91;
-		--lol-color-gold-400: #c89b3c;
-		--lol-color-gold-500: #785a28;
-		--lol-color-gold-600: #463714;
-		--lol-color-gold-700: #32281e;
-
-		--lol-font-size-h1: 3.3333rem;
-		--lol-line-height-h1: 3.5rem;
-		--lol-letter-spacing-h1: 0.05em;
-		--lol-font-weight-h1: 700;
-
-		--lol-font-size-h2: 2.3333rem;
-		--lol-line-height-h2: 2.6667rem;
-		--lol-letter-spacing-h2: 0.05em;
-		--lol-font-weight-h2: 700;
-
-		--lol-font-size-h3: 1.9167rem;
-		--lol-line-height-h3: 2.3333rem;
-		--lol-letter-spacing-h3: 0.05em;
-		--lol-font-weight-h3: 700;
-
-		--lol-font-size-h4: 1.5rem;
-		--lol-line-height-h4: 1.8333rem;
-		--lol-letter-spacing-h4: 0.05em;
-		--lol-font-weight-h4: 700;
-
-		--lol-font-size-h5: 1.1667rem;
-		--lol-line-height-h5: 1.5rem;
-		--lol-letter-spacing-h5: 0.075em;
-		--lol-font-weight-h5: 700;
-
-		--lol-font-size-label: 0.9167rem;
-		--lol-line-height-label: 1.3333rem;
-		--lol-letter-spacing-label: 0.05em;
-		--lol-font-weight-label: 700;
-
-		--lol-font-size-stat: 1.1667rem;
-		--lol-line-height-stat: 1.6667rem;
-		--lol-letter-spacing-stat: 0.05em;
-		--lol-font-weight-stat: 700;
-
-		--lol-font-size-large-number: 4.75rem;
-		--lol-line-height-large-number: 5.1667rem;
-		--lol-letter-spacing-large-number: 0.025em;
-		--lol-font-weight-large-number: 500;
-
-		--lol-font-size-xs: 0.75rem;
-		--lol-line-height-xs: 1rem;
-		--lol-letter-spacing-xs: 0.025em;
-		--lol-font-weight-xs: 400;
-
-		--lol-font-size-sm: 0.875rem;
-		--lol-line-height-sm: 1.1025rem;
-		--lol-letter-spacing-sm: 0.02em;
-		--lol-font-weight-sm: 400;
-
-		--lol-font-size-base: 1rem;
-		--lol-line-height-base: 1.24rem;
-		--lol-letter-spacing-base: 0.01em;
-		--lol-font-weight-base: 400;
-
-		--lol-font-size-md: 1.1667rem;
-		--lol-line-height-md: 1.6667rem;
-		--lol-letter-spacing-md: 0.025em;
-		--lol-font-weight-md: 400;
-
-		--lol-font-size-lg: 1.5rem;
-		--lol-line-height-lg: 1.875rem;
-		--lol-letter-spacing-lg: 0.025em;
-		--lol-font-weight-lg: 400;
-
-		--lol-font-family-beaufort: "beaufort";
-		--lol-font-family-spiegel: "spiegel";
-
-		--lol-gradient-gold: linear-gradient(
-			to top,
-			var(--lol-color-gold-500),
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200)
-		);
-		--lol-gradient-gold-hover: linear-gradient(
-			to top,
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200),
-			var(--lol-color-gold-100)
-		);
-		--lol-gradient-gold-press: linear-gradient(
-			to top,
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-500)
-		);
-
-		--lol-gradient-grey-300: linear-gradient(
-			to top,
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-grey-focus: linear-gradient(
-			to top,
-			var(--lol-color-grey-200),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-hextech-black: linear-gradient(
-			to top,
-			var(--lol-color-hextech-black),
-			var(--lol-color-hextech-black)
-		);
-		--lol-gradient-disabled: linear-gradient(
-			to top,
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150)
-		);
-		--lol-gradient-transparent: linear-gradient(
-			to top,
-			transparent,
-			transparent
-		);
-
-		--lol-gradient-hextech: linear-gradient(
-			to top,
-			var(--lol-color-blue-200),
-			var(--lol-color-blue-400)
-		);
-		--lol-gradient-hextech-hover: linear-gradient(
-			to top,
-			var(--lol-color-blue-100),
-			var(--lol-color-blue-300)
-		);
-		--lol-gradient-hextech-press: linear-gradient(
-			to top,
-			var(--lol-color-blue-500),
-			var(--lol-color-blue-400)
-		);
-
-		--lol-form-height-small: 2rem;
-		--lol-form-height-medium: 2.25rem;
-		--lol-form-height-large: 2.5rem;
-	}
-}
 @layer lol {
 	._breadcrumbs_1gzfl_2 {
 		display: flex;
@@ -3388,3 +3206,502 @@
 		text-align: end;
 	}
 }
+@layer lol {
+	/*
+	 * "Metal linework as a framing element to support and draw focus towards
+	 * key pieces of information." The frame is a one-pixel hairline and nothing
+	 * more: a gradient painted into the border box, the plot painted into the
+	 * padding box. Anything heavier would compete with the data.
+	 */
+	._frame_7dkb0_8 {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		border: 1px solid transparent;
+		background:
+			var(--lol-chart-frame-fill) padding-box,
+			var(--lol-chart-frame-border) border-box;
+		color: var(--lol-chart-foreground);
+		font-family: var(--lol-chart-font-body);
+		/* A <figure>: the UA gives it 1em block and 40px inline margins. */
+		margin: 0;
+		padding: 1rem 1.125rem 1.125rem;
+		gap: 0.75rem;
+	}
+
+	/* Unframed: the same type and colours, no metal. For charts that already
+	 * sit inside a panel of their own. */
+	._bare_7dkb0_26 {
+		border-color: transparent;
+		background: none;
+		padding: 0;
+	}
+
+	/*
+	 * The diamond is the language's accent piece — it "guides attention toward
+	 * key information". Four of them pin the frame's corners to the grid the
+	 * square establishes. They are decoration, so they are hidden from the
+	 * accessibility tree by the component.
+	 */
+	._corner_7dkb0_38 {
+		position: absolute;
+		width: 5px;
+		height: 5px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-accent);
+		background: var(--lol-chart-surface);
+	}
+
+	._bare_7dkb0_26 ._corner_7dkb0_38 {
+		display: none;
+	}
+
+	._cornerTopLeft_7dkb0_51 {
+		top: -3px;
+		left: -3px;
+	}
+
+	._cornerTopRight_7dkb0_56 {
+		top: -3px;
+		right: -3px;
+	}
+
+	._cornerBottomLeft_7dkb0_61 {
+		bottom: -3px;
+		left: -3px;
+	}
+
+	._cornerBottomRight_7dkb0_66 {
+		bottom: -3px;
+		right: -3px;
+	}
+
+	._header_7dkb0_71 {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	._headings_7dkb0_78 {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	/* Beaufort, spaced and uppercased — the client's voice for anything that
+	 * names a thing rather than measures it. */
+	._title_7dkb0_87 {
+		margin: 0;
+		font-family: var(--lol-chart-font-display);
+		font-size: var(--lol-font-size-h5, 1.1667rem);
+		line-height: var(--lol-line-height-h5, 1.5);
+		letter-spacing: var(--lol-letter-spacing-h5, 0.075em);
+		font-weight: var(--lol-font-weight-h5, 700);
+		text-transform: uppercase;
+		color: var(--lol-chart-foreground);
+	}
+
+	._subtitle_7dkb0_98 {
+		margin: 0;
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+		color: var(--lol-chart-muted);
+	}
+
+	._actions_7dkb0_106 {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	/* A rule terminated at both ends by a diamond: the same figure the client
+	 * draws under every panel heading. */
+	._rule_7dkb0_115 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	._ruleLine_7dkb0_121 {
+		height: 1px;
+		flex-grow: 1;
+		border: none;
+		margin: 0;
+		background-image: linear-gradient(
+			to right,
+			transparent,
+			var(--lol-chart-frame-rule) 15%,
+			var(--lol-chart-frame-rule) 85%,
+			transparent
+		);
+	}
+
+	._ruleDiamond_7dkb0_135 {
+		width: 4px;
+		height: 4px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-rule);
+		flex-shrink: 0;
+	}
+
+	._body_7dkb0_143 {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	._footer_7dkb0_149 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem 1rem;
+	}
+}
+@layer lol {
+	._legend_1rk8r_2 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem 1.25rem;
+		/* A <ul>: the UA gives it block margins and a list marker. */
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	._item_1rk8r_13 {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		/* Never the series colour. Identity comes from the swatch beside the
+		 * label; a light teal or gold set as text would not clear contrast. */
+		color: var(--lol-chart-muted);
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+	}
+
+	/* The diamond again, at series scale, lit by the hue it stands for. */
+	._swatch_1rk8r_26 {
+		width: 0.5rem;
+		height: 0.5rem;
+		flex-shrink: 0;
+		rotate: 45deg;
+		background: var(--lol-chart-legend-color);
+		box-shadow: 0 0 5px var(--lol-chart-legend-color);
+	}
+
+	._square_1rk8r_35 {
+		rotate: none;
+	}
+
+	._line_1rk8r_39 {
+		width: 0.875rem;
+		height: 2px;
+		rotate: none;
+		box-shadow: none;
+	}
+}
+@layer lol {
+	._chart_1mnqy_2 {
+		width: 100%;
+		min-width: 0;
+	}
+}
+@layer lol {
+	/* ----- CSS reset ----- */
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	/* ----- Default CSS variables ----- */
+
+	:root {
+		color-scheme: dark;
+
+		--lol-z-index-app: 100;
+		--lol-z-index-modal: 200;
+		--lol-z-index-popover: 300;
+		--lol-z-index-overlay: 400;
+		--lol-z-index-max: 9999;
+
+		--lol-scale: 1;
+
+		--lol-color-blue-100: #cdfafa;
+		--lol-color-blue-200: #0ac8b9;
+		--lol-color-blue-300: #0397ab;
+		--lol-color-blue-400: #005a82;
+		--lol-color-blue-500: #0a323c;
+		--lol-color-blue-600: #091428;
+		--lol-color-blue-700: #0a1428;
+
+		--lol-color-grey-100: #a09b8c;
+		--lol-color-grey-150: #5b5a56;
+		--lol-color-grey-200: #3c3c41;
+		--lol-color-grey-300: #1e2328;
+		--lol-color-grey-cool: #1e282d;
+
+		--lol-color-hextech-black: #010a13;
+
+		--lol-color-gold-100: #f0e6d2;
+		--lol-color-gold-200: #c8aa6e;
+		--lol-color-gold-300: #cdbe91;
+		--lol-color-gold-400: #c89b3c;
+		--lol-color-gold-500: #785a28;
+		--lol-color-gold-600: #463714;
+		--lol-color-gold-700: #32281e;
+
+		--lol-font-size-h1: 3.3333rem;
+		--lol-line-height-h1: 3.5rem;
+		--lol-letter-spacing-h1: 0.05em;
+		--lol-font-weight-h1: 700;
+
+		--lol-font-size-h2: 2.3333rem;
+		--lol-line-height-h2: 2.6667rem;
+		--lol-letter-spacing-h2: 0.05em;
+		--lol-font-weight-h2: 700;
+
+		--lol-font-size-h3: 1.9167rem;
+		--lol-line-height-h3: 2.3333rem;
+		--lol-letter-spacing-h3: 0.05em;
+		--lol-font-weight-h3: 700;
+
+		--lol-font-size-h4: 1.5rem;
+		--lol-line-height-h4: 1.8333rem;
+		--lol-letter-spacing-h4: 0.05em;
+		--lol-font-weight-h4: 700;
+
+		--lol-font-size-h5: 1.1667rem;
+		--lol-line-height-h5: 1.5rem;
+		--lol-letter-spacing-h5: 0.075em;
+		--lol-font-weight-h5: 700;
+
+		--lol-font-size-label: 0.9167rem;
+		--lol-line-height-label: 1.3333rem;
+		--lol-letter-spacing-label: 0.05em;
+		--lol-font-weight-label: 700;
+
+		--lol-font-size-stat: 1.1667rem;
+		--lol-line-height-stat: 1.6667rem;
+		--lol-letter-spacing-stat: 0.05em;
+		--lol-font-weight-stat: 700;
+
+		--lol-font-size-large-number: 4.75rem;
+		--lol-line-height-large-number: 5.1667rem;
+		--lol-letter-spacing-large-number: 0.025em;
+		--lol-font-weight-large-number: 500;
+
+		--lol-font-size-xs: 0.75rem;
+		--lol-line-height-xs: 1rem;
+		--lol-letter-spacing-xs: 0.025em;
+		--lol-font-weight-xs: 400;
+
+		--lol-font-size-sm: 0.875rem;
+		--lol-line-height-sm: 1.1025rem;
+		--lol-letter-spacing-sm: 0.02em;
+		--lol-font-weight-sm: 400;
+
+		--lol-font-size-base: 1rem;
+		--lol-line-height-base: 1.24rem;
+		--lol-letter-spacing-base: 0.01em;
+		--lol-font-weight-base: 400;
+
+		--lol-font-size-md: 1.1667rem;
+		--lol-line-height-md: 1.6667rem;
+		--lol-letter-spacing-md: 0.025em;
+		--lol-font-weight-md: 400;
+
+		--lol-font-size-lg: 1.5rem;
+		--lol-line-height-lg: 1.875rem;
+		--lol-letter-spacing-lg: 0.025em;
+		--lol-font-weight-lg: 400;
+
+		--lol-font-family-beaufort: "beaufort";
+		--lol-font-family-spiegel: "spiegel";
+
+		--lol-gradient-gold: linear-gradient(
+			to top,
+			var(--lol-color-gold-500),
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200)
+		);
+		--lol-gradient-gold-hover: linear-gradient(
+			to top,
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200),
+			var(--lol-color-gold-100)
+		);
+		--lol-gradient-gold-press: linear-gradient(
+			to top,
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-500)
+		);
+
+		--lol-gradient-grey-300: linear-gradient(
+			to top,
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-grey-focus: linear-gradient(
+			to top,
+			var(--lol-color-grey-200),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-hextech-black: linear-gradient(
+			to top,
+			var(--lol-color-hextech-black),
+			var(--lol-color-hextech-black)
+		);
+		--lol-gradient-disabled: linear-gradient(
+			to top,
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150)
+		);
+		--lol-gradient-transparent: linear-gradient(
+			to top,
+			transparent,
+			transparent
+		);
+
+		--lol-gradient-hextech: linear-gradient(
+			to top,
+			var(--lol-color-blue-200),
+			var(--lol-color-blue-400)
+		);
+		--lol-gradient-hextech-hover: linear-gradient(
+			to top,
+			var(--lol-color-blue-100),
+			var(--lol-color-blue-300)
+		);
+		--lol-gradient-hextech-press: linear-gradient(
+			to top,
+			var(--lol-color-blue-500),
+			var(--lol-color-blue-400)
+		);
+
+		--lol-form-height-small: 2rem;
+		--lol-form-height-medium: 2.25rem;
+		--lol-form-height-large: 2.5rem;
+
+		/* ----- Charts -----
+		 *
+		 * Hextech separates the interface into two materials: metal linework
+		 * that *frames* information, and hextech magic that *is* it. A chart
+		 * maps onto that split exactly — gold for the frame, the axes and the
+		 * grid; the magic palette for the marks — so the ink and frame tokens
+		 * below are gold and the series tokens are not.
+		 *
+		 * Used by `@lolmath/ui/charts`, but defined here so a host page can
+		 * retune them from one place, and so a chart built by hand against
+		 * TanStack Charts picks them up too. */
+
+		/* Parchment gold for what you read, dimmer gold for what merely
+		 * orients you. The chart engine paints tick labels at 0.68 opacity on
+		 * top of these, so `muted` is deliberately brighter than it looks. */
+		--lol-chart-foreground: var(--lol-color-gold-100);
+		--lol-chart-muted: var(--lol-color-gold-300);
+		/* The grid is painted at 0.11 opacity — it has to start bright to
+		 * survive that and still read as gold rather than grey. */
+		--lol-chart-grid: var(--lol-color-gold-200);
+		--lol-chart-surface: var(--lol-color-hextech-black);
+
+		--lol-chart-frame-fill: linear-gradient(
+			180deg,
+			var(--lol-color-blue-600) 0%,
+			var(--lol-color-hextech-black) 100%
+		);
+		--lol-chart-frame-border: linear-gradient(
+			180deg,
+			var(--lol-color-gold-500) 0%,
+			var(--lol-color-gold-600) 55%,
+			var(--lol-color-gold-500) 100%
+		);
+		--lol-chart-frame-accent: var(--lol-color-gold-400);
+		--lol-chart-frame-rule: var(--lol-color-gold-500);
+
+		/* Six categorical slots in a fixed order, assigned in sequence and
+		 * never cycled. Slots 1 and 2 are the Hextech signature (teal energy,
+		 * Piltover gold); the rest reach into the wider Runeterra palette,
+		 * because a palette that stayed inside gold and teal could not be told
+		 * apart. The set is validated on the hextech-black surface for the
+		 * OKLCH lightness band, the chroma floor, protan/deutan separation and
+		 * contrast — see the readme before changing a value. */
+		--lol-chart-series-1: #0aa89b;
+		--lol-chart-series-2: #ba8c2e;
+		--lol-chart-series-3: #8e6be8;
+		--lol-chart-series-4: #e8574f;
+		--lol-chart-series-5: #1e8fd5;
+		--lol-chart-series-6: #4fa83a;
+
+		/* Reserved meanings. Never spend these on "series 4". */
+		--lol-chart-positive: #2e9e63;
+		--lol-chart-negative: #d6453c;
+
+		--lol-chart-font-display:
+			var(--lol-font-family-beaufort), "Times New Roman", serif;
+		--lol-chart-font-body:
+			var(--lol-font-family-spiegel), system-ui, sans-serif;
+
+		/* Bridge to TanStack Charts' own defaults, so a chart definition
+		 * written by hand — one that never sets a theme — still picks up the
+		 * Hextech palette and tooltip. */
+		--ts-chart-1: var(--lol-chart-series-1);
+		--ts-chart-2: var(--lol-chart-series-2);
+		--ts-chart-3: var(--lol-chart-series-3);
+		--ts-chart-4: var(--lol-chart-series-4);
+		--ts-chart-5: var(--lol-chart-series-5);
+		--ts-chart-6: var(--lol-chart-series-6);
+		--ts-chart-focus-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-marker-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-label-halo: var(--lol-chart-surface);
+
+		--ts-chart-tooltip-background: var(--lol-chart-surface);
+		--ts-chart-tooltip-border: 1px solid var(--lol-color-gold-500);
+		--ts-chart-tooltip-border-radius: 0;
+		--ts-chart-tooltip-color: var(--lol-chart-foreground);
+		--ts-chart-tooltip-padding: 0.5rem 0.7rem;
+		--ts-chart-tooltip-shadow:
+			0 0 0 1px var(--lol-color-hextech-black), 0 8px 24px rgb(1 10 19 / 0.75);
+		--ts-chart-tooltip-font: 400 0.8125rem / 1.35 var(--lol-chart-font-body);
+	}
+
+	/*
+	 * The scene TanStack Charts paints is plain SVG with stable class names on
+	 * it, so the parts CSS does better than JS — line caps, the magic glow —
+	 * are done here. `[data-lol-chart]` is set by `HextechChart`; nothing
+	 * outside a Hextech chart is touched.
+	 */
+	[data-lol-chart] {
+		font-family: var(--lol-chart-font-body);
+		color: var(--lol-chart-foreground);
+	}
+
+	[data-lol-chart] .ts-chart__line {
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	/*
+	 * "Its brightest executions are reserved for pivotal moments." The glow is
+	 * the one place the marks are allowed to be loud, so it stays faint.
+	 */
+	[data-lol-chart-glow="true"] .ts-chart__line,
+	[data-lol-chart-glow="true"] .ts-chart__area {
+		filter: drop-shadow(0 0 3px rgb(10 168 155 / 0.18));
+	}
+
+	[data-lol-chart] .ts-chart__crosshair {
+		pointer-events: none;
+	}
+}

package/dist/index.d.mts

@@ -18,7 +18,7 @@ interface ButtonProps$1 extends ButtonProps {
   size?: ButtonSize;
 }
 declare const button: (props?: ({
-  preset?: "hextech" | "primary" | "secondary" | "text" | "dimmed" | undefined;
+  preset?: "primary" | "secondary" | "text" | "hextech" | "dimmed" | undefined;
   shape?: "round" | "square" | "normal" | undefined;
   thin?: boolean | undefined;
   size?: "small" | "medium" | "large" | undefined;
@@ -616,7 +616,7 @@ interface TokenInputProps<T extends TokenFieldValue$1 = TokenFieldValue$1> exten
 /** The editable area of a `TokenField`, rendering a `Token` per token segment. */
 declare function TokenInput<T extends TokenFieldValue$1 = TokenFieldValue$1>({ className, placeholder, size, ...props }: TokenInputProps<T>): import("react").JSX.Element;
 declare const token: (props?: ({
-  variant?: "gold" | "hextech" | "grey" | undefined;
+  variant?: "hextech" | "gold" | "grey" | undefined;
 } & ({
   class?: import("cva").ClassValue;
   className?: never;

package/dist/index.mjs

@@ -1,3 +1,4 @@
+/* empty css                */
 import { Autocomplete, Autocomplete as Autocomplete$1, AutocompleteContext, AutocompleteStateContext, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, Cell, CheckboxButton as CheckboxButton$1, CheckboxField as CheckboxField$1, Collection, Collection as Collection$1, Column, ColumnResizer, DateField as DateField$1, DateInput as DateInput$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DateSegment as DateSegment$1, Dialog, Dialog as Dialog$1, DialogTrigger, Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, DropIndicator, FieldError, Focusable, GridLayout, Group as Group$1, Header, Heading as Heading$1, Input, Label as Label$1, Link, ListBox, ListBoxItem, ListBoxItem as ListBoxItem$1, ListLayout, ListLayout as ListLayout$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, Popover as Popover$1, Popover as UnstyledPopover, Pressable, PreviewTrigger, ProgressBar as ProgressBar$1, RadioButton as RadioButton$1, RadioField as RadioField$1, RadioGroup as RadioGroup$1, RangeCalendar as RangeCalendar$1, ResizableTableContainer as ResizableTableContainer$1, RouterProvider, Row, SearchField as SearchField$1, Select, Select as Select$1, SelectValue, SelectValue as SelectValue$1, SelectionIndicator, Separator, Size, Slider as Slider$1, SliderFill, SliderOutput as SliderOutput$1, SliderThumb, SliderTrack, SubmenuTrigger as SubmenuTrigger$1, SwitchButton as SwitchButton$1, SwitchField as SwitchField$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHeader as TableHeader$1, TableLayout, TableLoadMoreItem as TableLoadMoreItem$1, Tabs as Tabs$1, Tag as Tag$1, TagGroup as TagGroup$1, TagList as TagList$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimeField as TimeField$1, ToggleButton as ToggleButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Token as Token$1, TokenField as TokenField$1, TokenFieldValue, TokenInput as TokenInput$1, Toolbar as Toolbar$1, Tree as Tree$1, TreeItem as TreeItem$1, TreeItemContent as TreeItemContent$1, TreeLoadMoreItem as TreeLoadMoreItem$1, Virtualizer, Virtualizer as Virtualizer$1, WaterfallLayout, composeRenderProps, isTextDropItem, useAsyncList, useDragAndDrop, useDragAndDrop as useDragAndDrop$1, useFilter, useFilter as useFilter$1, useListData, useTableOptions } from "react-aria-components";
 import { cva, cx } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";