@galaxy-io/dls 2.3.2 → 2.4.1

package/dist/beacons/Beacon.d.ts

@@ -13,7 +13,7 @@ export declare enum BeaconSize {
     /** 10px, beside `body_lg` (20px line); a label is `body_lg` with an 8px gap. */
     X_LARGE = "X_LARGE"
 }
-/** Dot color role (Constitution V-A color set). Resolves to `color.text.*`. */
+/** Dot color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.solid.<status>.background` and label with `color.text.<status>`. */
 export declare enum BeaconVariant {
     /** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
     PRIMARY = "PRIMARY",
@@ -25,11 +25,11 @@ export declare enum BeaconVariant {
     DISABLED = "DISABLED",
     /** The parent's color (`currentColor`). */
     INHERIT = "INHERIT",
-    /** Status: success, `text.success`. */
+    /** Status: success. Dot `solid.success.background`, label `text.success`. */
     SUCCESS = "SUCCESS",
-    /** Status: warning, `text.warning`. */
+    /** Status: warning. Dot `solid.warning.background`, label `text.warning`. */
     WARNING = "WARNING",
-    /** Status: error, `text.error`. */
+    /** Status: error. Dot `solid.error.background`, label `text.error`. */
     ERROR = "ERROR"
 }
 interface BeaconBaseProps extends AriaAttributes {
@@ -85,8 +85,9 @@ interface BeaconColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the dot, ring and label take
-     * `text.<family>`, the way a status variant renders. For categories; meanings take `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …): the dot and ring take
+     * `solid.<family>.background` and the label `text.<family>`, the way a status variant renders.
+     * For categories; meanings take `variant`.
      * Not with `variant`.
      */
     color: PaletteColor;

package/dist/beacons/Beacon.js

@@ -18,10 +18,13 @@ import { cx } from "@linaria/core";
 * lands on the root, so `<Tooltip body={reason}><Beacon label="Failed" … /></Tooltip>` works.
 *
 * Color is CSS, not JS: `BEACON_VARIANT_TO_CSS_MAP` (or `BEACON_COLOR_TO_CSS_MAP` for a categorical
-* `color`) sets `color` from `color.text.*` and the fill
-* reads `currentColor` (the Icon and Circle pattern), so `INHERIT` and `hex` share one path and a
-* theme switch needs no re-render. `hex` is set as the `--gx-beacon-hex` custom property
-* in `style` and read by a block switched on only when the prop is set.
+* `color`) sets `color` from `color.text.*` for the label and `--gx-beacon-fill` from
+* `color.solid.*.background` for the dot and its ring. A small solid fill is not text: the `text`
+* roles are tuned for 4.5:1 copy on the canvas, which in Light makes a dark, muddy dot, while the
+* `solid` fills are the strong, mode-stable fills the Button and Chip draw. The neutral steps have
+* no solid fill, so they and `INHERIT` fill with `currentColor` (the Icon and Circle pattern); a
+* theme switch needs no re-render. `hex` is set as the `--gx-beacon-hex` custom property in
+* `style` and read by a block, switched on only when the prop is set, that routes it to both.
 *
 * `isPulse` repeats an expanding ring (the root's `::after`, in the dot's own color) to say "this is
 * happening now". It stops under `prefers-reduced-motion` and `GalaxyProvider reducedMotion`. Not a
@@ -42,7 +45,7 @@ var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
 	BeaconSize["X_LARGE"] = "X_LARGE";
 	return BeaconSize;
 }({});
-/** Dot color role (Constitution V-A color set). Resolves to `color.text.*`. */
+/** Dot color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`; statuses fill with `color.solid.<status>.background` and label with `color.text.<status>`. */
 var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
 	/** `text.primary`. The default (1.x `BASE` / `PRIMARY`). */
 	BeaconVariant["PRIMARY"] = "PRIMARY";
@@ -54,18 +57,19 @@ var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
 	BeaconVariant["DISABLED"] = "DISABLED";
 	/** The parent's color (`currentColor`). */
 	BeaconVariant["INHERIT"] = "INHERIT";
-	/** Status: success, `text.success`. */
+	/** Status: success. Dot `solid.success.background`, label `text.success`. */
 	BeaconVariant["SUCCESS"] = "SUCCESS";
-	/** Status: warning, `text.warning`. */
+	/** Status: warning. Dot `solid.warning.background`, label `text.warning`. */
 	BeaconVariant["WARNING"] = "WARNING";
-	/** Status: error, `text.error`. */
+	/** Status: error. Dot `solid.error.background`, label `text.error`. */
 	BeaconVariant["ERROR"] = "ERROR";
 	return BeaconVariant;
 }({});
 /**
 * The root is the dot: phrasing content, so it is valid inside `Text`, a `<button>` or a `<label>`.
-* The fill is `currentColor`; `forced-color-adjust: none` keeps it visible in high contrast. The
-* pulse ring is `::after`, invisible at rest.
+* The fill is `--gx-beacon-fill` (a `solid` fill for a status or family), falling back to
+* `currentColor` for the neutral steps and `INHERIT`; `forced-color-adjust: none` keeps it visible
+* in high contrast. The pulse ring is `::after`, invisible at rest, in the same fill.
 */
 var Root = /*#__PURE__*/ styled("span")({
 	name: "Root",
@@ -105,7 +109,10 @@ var BEACON_SIZE_TO_TEXT_SIZE_MAP = {
 	["LARGE"]: TextSize.BODY_LG,
 	["X_LARGE"]: TextSize.BODY_LG
 };
-/** Sets `color`; the dot and ring read it. Block for block the same as `ICON_VARIANT_TO_CSS_MAP`. */
+/**
+* Sets `color` (the label; the neutral dots) and, for a status, `--gx-beacon-fill` (the dot and
+* ring). The color blocks are block for block the same as `ICON_VARIANT_TO_CSS_MAP`.
+*/
 var BEACON_VARIANT_TO_CSS_MAP = {
 	["PRIMARY"]: "gx-Beacon-PRIMARY-piy6lav",
 	["SECONDARY"]: "gx-Beacon-SECONDARY-sm47yol",
@@ -116,7 +123,7 @@ var BEACON_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Beacon-WARNING-w1d27vzd",
 	["ERROR"]: "gx-Beacon-ERROR-eshtlvu"
 };
-/** Categorical `color`: `text.<family>`, the way a status variant renders. */
+/** Categorical `color`: the label `text.<family>`, the dot `solid.<family>.background`, the way a status variant renders. */
 var BEACON_COLOR_TO_CSS_MAP = {
 	red: "gx-Beacon-red-r1nxs4in",
 	orange: "gx-Beacon-orange-o1dc3rbq",
@@ -136,11 +143,11 @@ var BEACON_COLOR_TO_CSS_MAP = {
 	pink: "gx-Beacon-pink-p1tc1xnc",
 	rose: "gx-Beacon-rose-rgzv1cm"
 };
-/** Declared after the variant and color maps so `hex` wins over them. */
+/** Declared after the variant and color maps so `hex` wins over them: the label and the dot both take it. */
 var HEX_CSS = "gx-Beacon-HEX_CSS-h1marsuc";
 /**
 * One pulse every thirteen `duration.base` steps (1.95s, the 1.x 2s default), linear, forever: the
-* ring grows from the dot's edge to 2.5× while it fades from 0.5 to 0. Paint-only (`transform`), so
+* ring, in the dot's fill, grows from the dot's edge to 2.5× while it fades from 0.5 to 0. Paint-only (`transform`), so
 * the line box never moves. The keyframes are global, so the name is `gx-` prefixed.
 * `REDUCED_MOTION` stops it and the ring falls back to its resting `opacity: 0`.
 */

package/dist/brand/GalaxyFilamentWordmark.js

@@ -1,4 +1,5 @@
 import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyFilamentWordmarkSvg, { GALAXY_FILAMENT_WORDMARK_VIEW_BOX } from "./internal/svg/GalaxyFilamentWordmarkSvg.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
@@ -6,32 +7,30 @@ import { cx } from "@linaria/core";
 /**
 * Filament's product wordmark: the word "filament" in the slanted Galaxy display lettering, as one
 * inline SVG. It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS
-* variables, and is SSR-safe. 1.x swapped a dark
-* and a light svgr asset by reading the theme in JS (and its JSDoc called it "The Galaxy wordmark").
+* variables, and is SSR-safe.
+*
+* The artwork is `src/brand/assets/galaxy-filament-wordmark.svg`, compiled by `pnpm assets` into
+* the private `GalaxyFilamentWordmarkSvg`; the aspect ratio comes from its
+* `GALAXY_FILAMENT_WORDMARK_VIEW_BOX`.
 */
-/** Width ÷ height of the artwork (its viewBox, `0 0 4513 1200`). */
-var GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO = 4513 / 1200;
-/** The `d` of the single `<path>` of the 1.x `galaxy-filament-wordmark-dark.svg`, verbatim. */
-var GALAXY_FILAMENT_WORDMARK_PATH = "M181.814 1141.98L159.701 1200L0 985.717L292.377 210.999L363.136 151.659H701.801L660.525 253.856H517.432L468.053 385.708H617.534L579.697 487.246H429.725L181.814 1141.98ZM720.432 336.273L766.622 212.318H1005.44L958.942 336.273H720.432ZM505.694 910.552L701.758 384.404H941.065L745.001 910.552H505.694ZM825.912 910.552L1109.45 151.659L1131.06 92.978L1290.77 307.262L1065.71 910.552H825.912ZM1452.44 720.004L1419.51 808.356H1510.91L1544.32 720.004H1452.44ZM1582.16 617.808L1630.81 487.259H1539.41L1510.41 563.743H1271.11L1316.32 443.085L1359.56 384.404H1864.71L1886.33 443.085L1711.4 910.552H1185.61L1163.99 851.872L1250.96 617.808H1582.16ZM2016.67 910.552H1788.05L1983.62 385.063H2742.33L2763.95 443.085L2590 910.552H2361.38L2519.61 487.259H2457.44L2299.21 910.552H2082.28L2240.01 487.259H2173.91L2016.67 910.552ZM2998.33 664.621L2943.8 808.356H3034.7L3075 703.522H3314.3L3258.29 852.531L3215.04 910.552H2709.9L2688.27 852.531L2840.6 443.085L2883.84 385.063H3388.99L3410.62 443.085L3330.03 665.281H3090.23V664.621H2998.33ZM3128.07 563.083L3155.09 487.259H3063.2L3035.68 563.083H3128.07ZM3553.12 910.552H3313.32L3508.9 385.063H4033.2L4054.83 443.085L3880.38 910.552H3640.59L3798.81 487.259H3710.36L3553.12 910.552ZM4120.38 481.326L4158.22 379.788L4243.72 149.681L4265.34 91L4425.04 304.625L4397.53 379.788H4513L4470.74 481.326H4359.69L4237.83 808.356H4343.2L4299.17 910.552H4197.24H4003.92L3980.82 854.51L4120.38 481.326Z";
+/** Width ÷ height of the artwork, from its viewBox. */
+var GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO = GALAXY_FILAMENT_WORDMARK_VIEW_BOX.width / GALAXY_FILAMENT_WORDMARK_VIEW_BOX.height;
 /** Filament's product wordmark, painted `text.primary`. Labelled "Filament" unless `ariaLabel=""`. */
 var GalaxyFilamentWordmark = forwardRef(function GalaxyFilamentWordmark({ size = 20, isInverse = false, ariaLabel = "Filament", id, className, style, ...rest }, ref) {
 	const aria = brandMarkAriaProps(ariaLabel);
-	return /* @__PURE__ */ jsx("svg", {
+	return /* @__PURE__ */ jsx(GalaxyFilamentWordmarkSvg, {
 		ref,
 		id,
 		role: aria.role,
 		"aria-label": aria["aria-label"],
 		"aria-hidden": aria["aria-hidden"],
 		...rest,
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 4513 1200",
 		width: size * GALAXY_FILAMENT_WORDMARK_ASPECT_RATIO,
 		height: size,
 		fill: "currentColor",
 		focusable: "false",
 		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
-		style,
-		children: /* @__PURE__ */ jsx("path", { d: GALAXY_FILAMENT_WORDMARK_PATH })
+		style
 	});
 });
 GalaxyFilamentWordmark.displayName = "GalaxyFilamentWordmark";

package/dist/brand/GalaxyLogomark.js

@@ -1,39 +1,33 @@
 import { BRAND_MARK_CSS, BRAND_MARK_INVERSE_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyLogomarkSvg from "./internal/svg/GalaxyLogomarkSvg.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 //#region src/brand/GalaxyLogomark.tsx
 /**
 * The Galaxy brand mark: the two-circle, one-ribbon glyph as one inline SVG. It paints with the
 * monochrome fill (`color.solid.primary.background`, which is `text.primary`: the 1.x look). Color
-* is CSS (`fill="currentColor"`), so it is SSR-safe and a theme switch needs no re-render. 1.x swapped a dark and a light svgr asset by reading the theme in JS.
+* is CSS (`fill="currentColor"`), so it is SSR-safe and a theme switch needs no re-render.
+*
+* The artwork is `src/brand/assets/galaxy-logomark.svg`, compiled by `pnpm assets` into the private
+* `GalaxyLogomarkSvg`; this component only names, sizes and colors it.
 */
-/**
-* The two circles (top left, bottom right): the `d` of the first two `<path>`s of the 1.x
-* `galaxy-logomark-dark.svg`, verbatim, joined (each starts with its own `M`).
-*/
-var GALAXY_LOGOMARK_CIRCLES_PATH = "M239.88,479.75c132.27,0,239.88-107.61,239.88-239.88S372.14,0,239.88,0,0,107.61,0,239.88s107.61,239.88,239.88,239.88M840.12,600.25c-132.27,0-239.88,107.61-239.88,239.88s107.61,239.88,239.88,239.88,239.88-107.61,239.88-239.88-107.61-239.88-239.88-239.88";
-/** The ribbon joining them: the `d` of the third `<path>` of the 1.x asset, verbatim. */
-var GALAXY_LOGOMARK_RIBBON_PATH = "M473.59,894.23c27.96-103.95.03-195.9,112.41-308.28,112.37-112.38,204.13-84.39,308.07-112.32,8.08-1.87,16.02-4.15,23.77-6.81.07-.02.13-.04.19-.06h.01c94.13-32.43,161.95-121.88,161.95-226.88C1080,107.61,972.39,0,840.12,0,735.12,0,645.68,67.82,613.25,161.95h-.01c-.03.1-.05.18-.08.26-2.65,7.72-4.92,15.61-6.78,23.67-27.93,103.9-.72,196.5-112.24,308.02-111.53,111.52-204.35,84.54-308.26,112.48-8.06,1.86-15.95,4.13-23.67,6.78-.08.02-.16.05-.25.08h-.01C67.82,645.68,0,735.13,0,840.13,0,972.39,107.61,1079.99,239.88,1079.99c105,0,194.46-67.82,226.88-161.95,0,0,0,0,0,0,0-.02,0-.04.01-.06,1.66-4.8,3.16-9.67,4.51-14.6.83-3.02,1.59-6.07,2.3-9.14";
 /** The Galaxy brand mark, painted `text.primary`. Decorative unless `ariaLabel` is set. */
 var GalaxyLogomark = forwardRef(function GalaxyLogomark({ size = 20, isInverse = false, ariaLabel, id, className, style, ...rest }, ref) {
 	const aria = brandMarkAriaProps(ariaLabel ?? rest["aria-label"]);
-	return /* @__PURE__ */ jsxs("svg", {
+	return /* @__PURE__ */ jsx(GalaxyLogomarkSvg, {
 		ref,
 		id,
 		role: aria.role,
 		"aria-label": aria["aria-label"],
 		"aria-hidden": aria["aria-hidden"],
 		...rest,
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1080 1080",
 		width: size,
 		height: size,
 		fill: "currentColor",
 		focusable: "false",
 		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_CSS, className),
-		style,
-		children: [/* @__PURE__ */ jsx("path", { d: GALAXY_LOGOMARK_CIRCLES_PATH }), /* @__PURE__ */ jsx("path", { d: GALAXY_LOGOMARK_RIBBON_PATH })]
+		style
 	});
 });
 GalaxyLogomark.displayName = "GalaxyLogomark";

package/dist/{three → brand}/GalaxyLogomark3D.d.ts

@@ -21,12 +21,7 @@ export interface GalaxyLogomark3DProps extends AriaAttributes {
      */
     isInteractive?: boolean;
     /**
-     * Do a quick double flip on random axes when the pointer enters.
-     * @default false
-     */
-    isHoverable?: boolean;
-    /**
-     * Auto-rotation rate in radians per second. The hover flip lasts `0.5 / speed` seconds.
+     * Auto-rotation rate in radians per second.
      * @default 2
      */
     speed?: number;

package/dist/{three → brand}/GalaxyLogomark3D.js

@@ -1,21 +1,23 @@
 import { useGalaxyTheme } from "../theme/useGalaxyTheme.js";
-import { brandMarkAriaProps } from "../brand/brandMark.js";
-import GalaxyLogomark from "../brand/GalaxyLogomark.js";
+import { brandMarkAriaProps } from "./brandMark.js";
+import GalaxyLogomark from "./GalaxyLogomark.js";
 import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
-//#region src/three/GalaxyLogomark3D.tsx
+//#region src/brand/GalaxyLogomark3D.tsx
 /**
 * The Galaxy mark as a lit, glossy 3D object for hero moments (a landing hero, a sign-in splash).
-* It can spin slowly, flip when the pointer arrives, and be dragged to orbit. Its material takes
-* the monochrome fill (`solid.primary.background`, read as resolved hex from `useGalaxyTheme()`
-* because WebGL needs a number, not a CSS variable). It always starts as the flat `GalaxyLogomark`: the server and first
+* It can spin slowly and be dragged to orbit. Its material takes the monochrome fill
+* (`solid.primary.background`, read as resolved hex from `useGalaxyTheme()` because WebGL needs a
+* number, not a CSS variable). It always starts as the flat `GalaxyLogomark`: the server and first
 * client render are the static mark; after mount, if WebGL is available and motion is not reduced,
-* three.js (an optional peer) and the model load lazily and the 3D mark replaces the flat one in
-* the same box. This module imports nothing from three.js; the scene lives behind one `import()`.
+* three.js (an optional peer) and the model (`src/brand/assets/galaxy-logomark.obj`) load lazily
+* and the 3D mark replaces the flat one in the same box. This module imports nothing from
+* three.js; the scene lives behind one `import()`, like the Lottie player behind
+* `GalaxyLogomarkAnimation`.
 */
 /**
 * At the 1.x camera (z = 4, fov 45°, mesh scale 0.088) the resting mesh spans ≈ 76% of the
@@ -25,15 +27,15 @@ var FALLBACK_SCALE = .76;
 /** The box: a square of the requested size; the flat mark centers in it, the canvas covers it. */
 var Root = /*#__PURE__*/ styled("span")({
 	name: "Root",
-	class: "gx-GalaxyLogomark3D-r1dn73it",
+	class: "gx-GalaxyLogomark3D-r1kglu6n",
 	propsAsIs: false
 });
 /** `isInteractive`: the grab cursor while orbiting is possible. */
-var INTERACTIVE_CSS = "gx-GalaxyLogomark3D-INTERACTIVE_CSS-i13nzb8h";
+var INTERACTIVE_CSS = "gx-GalaxyLogomark3D-INTERACTIVE_CSS-it2gejs";
 /** The WebGL canvas fills the box. */
-var CANVAS_CSS = "gx-GalaxyLogomark3D-CANVAS_CSS-c11hevag";
+var CANVAS_CSS = "gx-GalaxyLogomark3D-CANVAS_CSS-cxuzirs";
 /** Until the first frame is drawn, the canvas is laid out but not shown. */
-var CANVAS_HIDDEN_CSS = "gx-GalaxyLogomark3D-CANVAS_HIDDEN_CSS-c1eyhbl2";
+var CANVAS_HIDDEN_CSS = "gx-GalaxyLogomark3D-CANVAS_HIDDEN_CSS-cfz0w5z";
 /** Whether this browser can create a WebGL context. Called in an effect, never at import. */
 function isWebGLSupported() {
 	try {
@@ -44,7 +46,7 @@ function isWebGLSupported() {
 	}
 }
 /** The Galaxy mark in 3D, painted `text.primary`. Decorative unless `ariaLabel` is set. */
-var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInverse = false, isAutoRotate = false, isInteractive = false, isHoverable = false, speed = 2, ariaLabel, id, className, style, ...rest }, ref) {
+var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInverse = false, isAutoRotate = false, isInteractive = false, speed = 2, ariaLabel, id, className, style, ...rest }, ref) {
 	const { theme } = useGalaxyTheme();
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const [isWebGLAvailable, setIsWebGLAvailable] = useState(false);
@@ -57,7 +59,6 @@ var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInve
 		color,
 		isAutoRotate,
 		isInteractive,
-		isHoverable,
 		speed
 	};
 	const optionsRef = useRef(options);
@@ -72,7 +73,7 @@ var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInve
 		let isCancelled = false;
 		const onContextLost = () => setIsReady(false);
 		canvas.addEventListener("webglcontextlost", onContextLost);
-		import("./galaxyLogomark3DScene.js").then(({ mountGalaxyLogomark3DScene }) => {
+		import("./internal/galaxyLogomark3DScene.js").then(({ mountGalaxyLogomark3DScene }) => {
 			if (isCancelled) return;
 			try {
 				sceneRef.current = mountGalaxyLogomark3DScene(canvas, optionsRef.current, () => {
@@ -94,7 +95,6 @@ var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInve
 			color,
 			isAutoRotate,
 			isInteractive,
-			isHoverable,
 			speed
 		});
 	}, [
@@ -102,7 +102,6 @@ var GalaxyLogomark3D = forwardRef(function GalaxyLogomark3D({ size = 128, isInve
 		color,
 		isAutoRotate,
 		isInteractive,
-		isHoverable,
 		speed
 	]);
 	const aria = brandMarkAriaProps(ariaLabel ?? rest["aria-label"]);

package/dist/brand/GalaxyWordmark.js

@@ -1,61 +1,35 @@
 import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyWordmarkSvg, { GALAXY_WORDMARK_VIEW_BOX } from "./internal/svg/GalaxyWordmarkSvg.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 //#region src/brand/GalaxyWordmark.tsx
 /**
 * The word "galaxy" in the Galaxy brand lettering, as one inline SVG. It is type, so it paints
 * with the monochrome hierarchy (`text.primary`), like the `GalaxyLogomark` beside it. Color is
-* CSS (`fill="currentColor"`), so it is SSR-safe and follows the theme with no re-render. 1.x swapped a dark and a light svgr
-* asset by reading the theme in JS.
+* CSS (`fill="currentColor"`), so it is SSR-safe and follows the theme with no re-render.
+*
+* The artwork is `src/brand/assets/galaxy-wordmark.svg`, compiled by `pnpm assets` into the private
+* `GalaxyWordmarkSvg`; the aspect ratio comes from its `GALAXY_WORDMARK_VIEW_BOX`.
 */
-/** Width ÷ height of the artwork (its viewBox, `0 0 1080 355.84`). */
-var GALAXY_WORDMARK_ASPECT_RATIO = 1080 / 355.84;
-/** "g". */
-var GALAXY_WORDMARK_G_PATH = "M55.16,176.18c0,40.12,20.28,53.2,46.88,53.2s46.01-13.08,46.01-53.2-19.41-53.2-46.01-53.2-46.88,13.08-46.88,53.2M98.34,355.84c-63.01,0-98.34-22.68-98.34-74.13h61.05c-.87,25.95,15.26,30.96,40.99,30.96s45.35-6.98,45.35-37.72v-17.66c-11.56,11.34-28.56,18.97-50.58,18.97C37.5,276.26,0,243.55,0,176.18s38.81-102.26,90.92-102.26c22.68,0,42.3,8.94,56.47,22.02v-18.53h55.6v197.54c0,58.22-37.29,80.89-104.66,80.89";
-/** The first "a". */
-var GALAXY_WORDMARK_FIRST_A_PATH = "M300.69,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M346.69,255.11c-15.26,15.7-32.71,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z";
-/** "l": `<rect x width height>`. */
-var GALAXY_WORDMARK_L_RECT = {
-	x: "419.1",
-	width: "55.6",
-	height: "274.95"
-};
-/** The second "a". */
-var GALAXY_WORDMARK_SECOND_A_PATH = "M572.39,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M618.39,255.11c-15.26,15.7-32.7,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z";
-/** "x": `<polygon points>`. */
-var GALAXY_WORDMARK_X_POINTS = "776.09 221.75 739.25 274.95 672.53 274.95 742.3 176.61 673.62 77.4 740.12 77.4 776.75 131.26 813.38 77.4 879.01 77.4 809.24 176.39 878.57 274.95 812.29 274.95 776.09 221.75";
-/** "y". */
-var GALAXY_WORDMARK_Y_PATH = "M1080,77.4l-82.85,226.98c-10.25,27.91-20.93,51.46-52.55,51.46-13.08,0-27.47-3.05-41.43-7.2v-50.37l10.03,3.05c20.06,6.11,29,1.31,34.01-12.65l5.45-15.26-75.44-196.02h60.83l41.21,120.58,42.74-120.58h58Z";
+/** Width ÷ height of the artwork, from its viewBox. */
+var GALAXY_WORDMARK_ASPECT_RATIO = GALAXY_WORDMARK_VIEW_BOX.width / GALAXY_WORDMARK_VIEW_BOX.height;
 /** The Galaxy wordmark, painted `text.primary`. Labelled "Galaxy" unless `ariaLabel=""`. */
 var GalaxyWordmark = forwardRef(function GalaxyWordmark({ size = 20, isInverse = false, ariaLabel = "Galaxy", id, className, style, ...rest }, ref) {
 	const aria = brandMarkAriaProps(ariaLabel);
-	return /* @__PURE__ */ jsxs("svg", {
+	return /* @__PURE__ */ jsx(GalaxyWordmarkSvg, {
 		ref,
 		id,
 		role: aria.role,
 		"aria-label": aria["aria-label"],
 		"aria-hidden": aria["aria-hidden"],
 		...rest,
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1080 355.84",
 		width: size * GALAXY_WORDMARK_ASPECT_RATIO,
 		height: size,
 		fill: "currentColor",
 		focusable: "false",
 		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
-		style,
-		children: [
-			/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_G_PATH }), /* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_FIRST_A_PATH })] }),
-			/* @__PURE__ */ jsx("rect", {
-				x: GALAXY_WORDMARK_L_RECT.x,
-				width: GALAXY_WORDMARK_L_RECT.width,
-				height: GALAXY_WORDMARK_L_RECT.height
-			}),
-			/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_SECOND_A_PATH }),
-			/* @__PURE__ */ jsx("polygon", { points: GALAXY_WORDMARK_X_POINTS }),
-			/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_Y_PATH })
-		]
+		style
 	});
 });
 GalaxyWordmark.displayName = "GalaxyWordmark";