@kanso-labs/kanso-ui 0.40.9 → 0.42.0

package/dist/glyphs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","SVGProps","stylex","mergeStyles","glyphStyles","GlyphProps","Omit","SVGSVGElement","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ClockGlyph","Glyph","children","t2","t3","t4","t5","t6","glyph","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","ChevronDownGlyph","ChevronEndGlyph","CloseGlyph","PlusGlyph","SearchGlyph","_c","props","stylex.props"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode, SVGProps } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../styles/merge';\nimport { glyphStyles } from './styles';\n\n// The glyphs the library's own controls draw: the check and the dash a\n// checkbox shows, the plus and minus a number field's steppers show, and\n// the magnifier and cross a search field shows. Inline SVG in\n// `currentColor`, sized by whatever renders them, and private to the\n// library — a call site with icons of its own passes them to IconButton and\n// the slots that take a node, which is why nothing here is exported from\n// the package.\n//\n// The paths are the check, the horizontal rule, the plus, the search, the\n// close, the right and down chevrons, the two sort arrows, the back arrow,\n// the drop-down arrow, the calendar, the schedule clock and the keyboard from\n// Material Symbols on their 24-unit grid, which is what the checkbox page\n// draws at 18dp, the icon buttons page at 20 and the search, menus, date\n// picker and time picker pages at 24 — the date picker's menu\n// buttons draw their arrow at 18, and a split button's menu button its\n// chevron at between 22 and 50.\n\ntype GlyphProps = Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'>;\n\n// What a search view's back button draws, pointing at the page it returns\n// to. It says \"back\" rather than \"to the left\", so whatever renders it\n// mirrors it under a right-to-left writing mode, as ChevronEndGlyph's\n// renderers do.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>;\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending, which is the direction the data tables page puts beside a\n// column header's name. Neither mirrors under a right-to-left writing mode:\n// they say \"up\" and \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>;\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>;\n}\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>;\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>;\n}\nfunction CheckGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>;\n}\n\n// What the time picker's trigger draws, and the button that takes its\n// keyboard entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>;\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, the colour it\n * takes from the text around it, and its box. The call site's `className`\n * and `style` are merged with the glyph's own rather than replacing them.\n */\nfunction Glyph({\n  children,\n  ...props\n}: GlyphProps & {\n  children: ReactNode;\n}) {\n  return <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props} {...mergeStyles(stylex.props(glyphStyles.glyph), props)}>\n      {children}\n    </svg>;\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>;\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>;\n}\nconst IndeterminateGlyph = MinusGlyph;\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>;\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so whatever renders it mirrors it under a right-to-left\n// writing mode — the glyph itself carries no direction of its own, since a\n// transform here would be an inline style.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>;\n}\nfunction CloseGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>;\n}\nfunction PlusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>;\n}\nfunction SearchGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>;\n}\nexport { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PlusGlyph, SearchGlyph };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","SVGProps","stylex","mergeStyles","glyphStyles","GlyphProps","Omit","SVGSVGElement","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ClockGlyph","Glyph","children","t2","t3","t4","t5","t6","glyph","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","ChevronDownGlyph","ChevronEndGlyph","CloseGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c","props","stylex.props"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode, SVGProps } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../styles/merge';\nimport { glyphStyles } from './styles';\n\n// The glyphs the library's own controls draw: the check and the dash a\n// checkbox shows, the plus and minus a number field's steppers show, and\n// the magnifier and cross a search field shows. Inline SVG in\n// `currentColor`, sized by whatever renders them, and private to the\n// library — a call site with icons of its own passes them to IconButton and\n// the slots that take a node, which is why nothing here is exported from\n// the package.\n//\n// The paths are the check, the horizontal rule, the plus, the search, the\n// close, the right and down chevrons, the two sort arrows, the back arrow,\n// the drop-down arrow, the calendar, the schedule clock, the keyboard and the\n// person from\n// Material Symbols on their 24-unit grid, which is what the checkbox page\n// draws at 18dp, the icon buttons page at 20 and the search, menus, date\n// picker and time picker pages at 24 — the date picker's menu\n// buttons draw their arrow at 18, and a split button's menu button its\n// chevron at between 22 and 50.\n\ntype GlyphProps = Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'>;\n\n// What a search view's back button draws, pointing at the page it returns\n// to. It says \"back\" rather than \"to the left\", so whatever renders it\n// mirrors it under a right-to-left writing mode, as ChevronEndGlyph's\n// renderers do.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>;\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending, which is the direction the data tables page puts beside a\n// column header's name. Neither mirrors under a right-to-left writing mode:\n// they say \"up\" and \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>;\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>;\n}\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>;\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>;\n}\nfunction CheckGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>;\n}\n\n// What the time picker's trigger draws, and the button that takes its\n// keyboard entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>;\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, the colour it\n * takes from the text around it, and its box. The call site's `className`\n * and `style` are merged with the glyph's own rather than replacing them.\n */\nfunction Glyph({\n  children,\n  ...props\n}: GlyphProps & {\n  children: ReactNode;\n}) {\n  return <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props} {...mergeStyles(stylex.props(glyphStyles.glyph), props)}>\n      {children}\n    </svg>;\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>;\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>;\n}\nconst IndeterminateGlyph = MinusGlyph;\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>;\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so whatever renders it mirrors it under a right-to-left\n// writing mode — the glyph itself carries no direction of its own, since a\n// transform here would be an inline style.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>;\n}\nfunction CloseGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>;\n}\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>;\n}\nfunction PlusGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>;\n}\nfunction SearchGlyph(props: GlyphProps) {\n  return <Glyph {...props}>\n      <path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>;\n}\nexport { ArrowBackGlyph, ArrowDownwardGlyph, ArrowDropDownGlyph, ArrowUpwardGlyph, CalendarGlyph, CheckGlyph, ChevronDownGlyph, ChevronEndGlyph, ClockGlyph, CloseGlyph, IndeterminateGlyph, KeyboardGlyph, MinusGlyph, PersonGlyph, PlusGlyph, SearchGlyph };"],"mappings":"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"}

package/dist/hooks/useImageLoadingStatus.js

@@ -1,58 +1,69 @@
 import { c } from "react/compiler-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 //#region src/hooks/useImageLoadingStatus.ts
 /**
-* Whether an image at `src` can be shown yet. It is loaded off-screen first,
-* so a component can keep its fallback in place until the picture is ready
-* and bring the fallback back if the picture fails — an `<img>` swapped in
-* as soon as `src` is known would show the browser's broken-image glyph in
-* between.
+* Whether the picture at `src` can be shown yet, from what the component's
+* own `<img>` reports. The image is rendered from the start and hidden until
+* it loads, so the browser fetches it as it would any image — `loading`,
+* `srcSet` and `sizes` all apply, which a detached preloader started on
+* mount left them no part in — and hand `onLoad` and `onError` to that
+* element. A component keeps its fallback until the picture is ready and
+* brings it back if the picture fails, so the browser's broken-image glyph
+* is never what shows.
+*
+* `previous` is the picture last loaded, while a new `src` is still loading,
+* so the component can keep showing it rather than drop back to the fallback
+* for as long as the new one takes — a theme swapping one logo for another
+* flashed the initial between them. It is the resource the browser actually
+* loaded, which is cached, so an element showing it needs no `srcSet`.
 *
 * No `src` counts as a failure, since the outcome is the same: the fallback
-* shows. What settled is remembered against the `src` it settled for, so a
-* change of `src` reads as loading again rather than as the old outcome.
+* shows. Outcomes are remembered against the `src` they came for, so a
+* change of `src` reads as loading rather than as the old outcome.
 */
 function useImageLoadingStatus(src) {
-	const $ = c(3);
-	const [settled, setSettled] = useState(null);
+	const $ = c(5);
+	const [loaded, setLoaded] = useState(null);
+	const [failed, setFailed] = useState(null);
 	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (event) => {
+			const image = event.currentTarget;
+			const from = image.getAttribute("src");
+			if (from !== null) setLoaded({
+				shown: image.currentSrc === "" ? from : image.currentSrc,
+				src: from
+			});
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const onLoad = t0;
 	let t1;
-	if ($[0] !== src) {
-		t0 = () => {
-			if (src === void 0) return;
-			const onLoad = () => {
-				setSettled({
-					src,
-					status: "loaded"
-				});
-			};
-			const onError = () => {
-				setSettled({
-					src,
-					status: "error"
-				});
-			};
-			const image = new window.Image();
-			image.addEventListener("load", onLoad, { once: true });
-			image.addEventListener("error", onError, { once: true });
-			image.src = src;
-			return () => {
-				image.removeEventListener("load", onLoad);
-				image.removeEventListener("error", onError);
-				image.removeAttribute("src");
-			};
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (event_0) => {
+			const from_0 = event_0.currentTarget.getAttribute("src");
+			if (from_0 !== null) setFailed(from_0);
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const onError = t1;
+	let status = "loading";
+	if (src === void 0 || failed === src) status = "error";
+	else if (loaded?.src === src) status = "loaded";
+	const t2 = status === "loading" ? loaded?.shown : void 0;
+	let t3;
+	if ($[2] !== status || $[3] !== t2) {
+		t3 = {
+			onError,
+			onLoad,
+			previous: t2,
+			status
 		};
-		t1 = [src];
-		$[0] = src;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useEffect(t0, t1);
-	if (src === void 0) return "error";
-	return settled?.src === src ? settled.status : "loading";
+		$[2] = status;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 //#endregion
 export { useImageLoadingStatus };

package/dist/hooks/useImageLoadingStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageLoadingStatus.js","names":["useEffect","useState","ImageLoadingStatus","Settled","src","status","useImageLoadingStatus","$","_c","settled","setSettled","t0","t1","undefined","onLoad","onError","image","window","Image","addEventListener","once","removeEventListener","removeAttribute","_c"],"sources":["../../src/hooks/useImageLoadingStatus.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\ninterface Settled {\n  src: string\n  status: 'error' | 'loaded'\n}\n\n/**\n * Whether an image at `src` can be shown yet. It is loaded off-screen first,\n * so a component can keep its fallback in place until the picture is ready\n * and bring the fallback back if the picture fails — an `<img>` swapped in\n * as soon as `src` is known would show the browser's broken-image glyph in\n * between.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. What settled is remembered against the `src` it settled for, so a\n * change of `src` reads as loading again rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined): ImageLoadingStatus {\n  const [settled, setSettled] = useState<null | Settled>(null)\n\n  useEffect(() => {\n    if (src === undefined) {\n      return undefined\n    }\n\n    const onLoad = () => {\n      setSettled({ src, status: 'loaded' })\n    }\n    const onError = () => {\n      setSettled({ src, status: 'error' })\n    }\n\n    const image = new window.Image()\n    image.addEventListener('load', onLoad, { once: true })\n    image.addEventListener('error', onError, { once: true })\n    image.src = src\n\n    // A load `src` has moved on from, or one the component went before, is\n    // stopped rather than left to run. Taking the listeners off is what keeps\n    // it from reporting an outcome nobody asked for, and lets the image go\n    // once nothing else holds it; removing its source aborts the fetch. That\n    // is the source removed rather than set empty, which would also abort it\n    // but queue an `error` event on the way.\n    return () => {\n      image.removeEventListener('load', onLoad)\n      image.removeEventListener('error', onError)\n      image.removeAttribute('src')\n    }\n  }, [src])\n\n  if (src === undefined) {\n    return 'error'\n  }\n  return settled?.src === src ? settled.status : 'loading'\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;AAoBA,SAAAM,sBAAAF,KAAA;CAAA,MAAAG,IAAAC,EAAA,CAAA;CACE,MAAA,CAAAC,SAAAC,cAA8BT,SAAyB,IAAI;CAAC,IAAAU;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAH,KAAA;EAElDO,WAAA;GACR,IAAIP,QAAQS,KAAAA,GAAS;GAIrB,MAAAC,eAAe;IACbJ,WAAW;KAAAN;KAAAC,QAAe;IAAS,CAAC;GAAC;GAEvC,MAAAU,gBAAgB;IACdL,WAAW;KAAAN;KAAAC,QAAe;IAAQ,CAAC;GAAC;GAGtC,MAAAW,QAAc,IAAIC,OAAMC,MAAO;GAC/BF,MAAKG,iBAAkB,QAAQL,QAAQ,EAAAM,MAAQ,KAAK,CAAC;GACrDJ,MAAKG,iBAAkB,SAASJ,SAAS,EAAAK,MAAQ,KAAK,CAAC;GACvDJ,MAAKZ,MAAOA;GAAH,aAQF;IACLY,MAAKK,oBAAqB,QAAQP,MAAM;IACxCE,MAAKK,oBAAqB,SAASN,OAAO;IAC1CC,MAAKM,gBAAiB,KAAK;GAAC;EAC7B;EACAV,KAAA,CAACR,GAAG;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CA5BRP,UAAUW,IA4BPC,EAAK;CAER,IAAIR,QAAQS,KAAAA,GAAS,OACZ;CACR,OACMJ,SAAOL,QAAUA,MAAMK,QAAOJ,SAA9B;AAAiD"}
+{"version":3,"file":"useImageLoadingStatus.js","names":["SyntheticEvent","useCallback","useState","ImageLoadingStatus","Loaded","shown","src","useImageLoadingStatus","$","_c","loaded","setLoaded","failed","setFailed","t0","Symbol","for","event","image","currentTarget","from","getAttribute","currentSrc","onLoad","t1","event_0","from_0","onError","status","undefined","t2","t3","previous","_c"],"sources":["../../src/hooks/useImageLoadingStatus.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react'\n\nimport { useCallback, useState } from 'react'\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\ninterface Loaded {\n  /** The resource the browser chose and loaded, out of a `srcSet` too. */\n  shown: string\n  /** The `src` it loaded for. */\n  src: string\n}\n\n/**\n * Whether the picture at `src` can be shown yet, from what the component's\n * own `<img>` reports. The image is rendered from the start and hidden until\n * it loads, so the browser fetches it as it would any image — `loading`,\n * `srcSet` and `sizes` all apply, which a detached preloader started on\n * mount left them no part in — and hand `onLoad` and `onError` to that\n * element. A component keeps its fallback until the picture is ready and\n * brings it back if the picture fails, so the browser's broken-image glyph\n * is never what shows.\n *\n * `previous` is the picture last loaded, while a new `src` is still loading,\n * so the component can keep showing it rather than drop back to the fallback\n * for as long as the new one takes — a theme swapping one logo for another\n * flashed the initial between them. It is the resource the browser actually\n * loaded, which is cached, so an element showing it needs no `srcSet`.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. Outcomes are remembered against the `src` they came for, so a\n * change of `src` reads as loading rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined) {\n  const [loaded, setLoaded] = useState<Loaded | null>(null)\n  const [failed, setFailed] = useState<null | string>(null)\n\n  // Read off the element rather than closed over, so the one pair of\n  // handlers serves whichever `src` the element carries when it settles.\n  const onLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    const image = event.currentTarget\n    const from = image.getAttribute('src')\n    if (from !== null) {\n      setLoaded({\n        shown: image.currentSrc === '' ? from : image.currentSrc,\n        src: from,\n      })\n    }\n  }, [])\n  const onError = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    const from = event.currentTarget.getAttribute('src')\n    if (from !== null) {\n      setFailed(from)\n    }\n  }, [])\n\n  let status: ImageLoadingStatus = 'loading'\n  if (src === undefined || failed === src) {\n    status = 'error'\n  } else if (loaded?.src === src) {\n    status = 'loaded'\n  }\n\n  return {\n    onError,\n    onLoad,\n    previous: status === 'loading' ? loaded?.shown : undefined,\n    status,\n  }\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAAO,sBAAAD,KAAA;CAAA,MAAAE,IAAAC,EAAA,CAAA;CACE,MAAA,CAAAC,QAAAC,aAA4BT,SAAwB,IAAI;CACxD,MAAA,CAAAU,QAAAC,aAA4BX,SAAwB,IAAI;CAAC,IAAAY;CAAA,IAAAN,EAAA,OAAAO,OAAAC,IAAA,2BAAA,GAAA;EAI9BF,MAAAG,UAAA;GACzB,MAAAC,QAAcD,MAAKE;GACnB,MAAAC,OAAaF,MAAKG,aAAc,KAAK;GACrC,IAAID,SAAS,MACXT,UAAU;IAAAN,OACDa,MAAKI,eAAgB,KAArBF,OAAiCF,MAAKI;IAAWhB,KACnDc;GACP,CAAC;EACF;EACFZ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CATD,MAAAe,SAAeT;CAST,IAAAU;CAAA,IAAAhB,EAAA,OAAAO,OAAAC,IAAA,2BAAA,GAAA;EACsBQ,MAAAC,YAAA;GAC1B,MAAAC,SAAaT,QAAKE,cAAcE,aAAc,KAAK;GACnD,IAAID,WAAS,MACXP,UAAUO,MAAI;EACf;EACFZ,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CALD,MAAAmB,UAAgBH;CAOhB,IAAAI,SAAiC;CACjC,IAAItB,QAAQuB,KAAAA,KAAajB,WAAWN,KAClCsB,SAASA;MACJ,IAAIlB,QAAMJ,QAAUA,KACzBsB,SAASA;CAMC,MAAAE,KAAAF,WAAW,YAAYlB,QAAML,QAA7BwB,KAAAA;CAAgD,IAAAE;CAAA,IAAAvB,EAAA,OAAAoB,UAAApB,EAAA,OAAAsB,IAAA;EAHrDC,KAAA;GAAAJ;GAAAJ;GAAAS,UAGKF;GAAgDF;EAE5D;EAACpB,EAAA,KAAAoB;EAAApB,EAAA,KAAAsB;EAAAtB,EAAA,KAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,OALMuB;AAKN"}

package/dist/mark/index.js

@@ -1,11 +1,12 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../render/useRender.js";
 import { mergeStyles } from "../styles/merge.js";
+import { PersonGlyph } from "../glyphs/index.js";
 import { useImageLoadingStatus } from "../hooks/useImageLoadingStatus.js";
 import { initialOfThing, initialsOfPerson } from "./initials.js";
 import { markStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocale } from "react-aria-components";
 //#region src/mark/index.tsx
 const KINDS = {
@@ -31,105 +32,144 @@ const KINDS = {
 * pill.
 */
 function Mark(t0) {
-	const $ = c(27);
-	const { kind, name, render, size, src, tone, ...props$1 } = t0;
+	const $ = c(41);
+	const { decorative: t1, imgProps, kind, name, render, showPersonIcon: t2, size, src, tone, ...props$1 } = t0;
+	const decorative = t1 === void 0 ? false : t1;
+	const showPersonIcon = t2 === void 0 ? true : t2;
 	const { fit, initials, shape, tintsFallback } = KINDS[kind];
-	const status = useImageLoadingStatus(src);
+	const { onError, onLoad, previous, status } = useImageLoadingStatus(src);
 	const { locale } = useLocale();
-	let t1;
+	let t3;
 	if ($[0] !== initials || $[1] !== locale || $[2] !== name) {
-		t1 = initials(name, locale);
+		t3 = initials(name, locale);
 		$[0] = initials;
 		$[1] = locale;
 		$[2] = name;
-		$[3] = t1;
-	} else t1 = $[3];
-	const fallback = t1;
-	let t2;
-	if ($[4] !== name) {
-		t2 = name.trim();
-		$[4] = name;
-		$[5] = t2;
-	} else t2 = $[5];
-	const named = t2 !== "";
-	let children;
-	if (status === "loaded") {
-		let t3;
-		if ($[6] !== fit) {
-			t3 = props(markStyles.image, fit);
-			$[6] = fit;
-			$[7] = t3;
-		} else t3 = $[7];
-		let t4;
-		if ($[8] !== src || $[9] !== t3) {
-			t4 = /* @__PURE__ */ jsx("img", {
-				alt: "",
-				src,
-				...t3
-			});
-			$[8] = src;
-			$[9] = t3;
-			$[10] = t4;
-		} else t4 = $[10];
-		children = t4;
-	} else if (tintsFallback) {
-		let t3;
-		if ($[11] !== tone) {
-			t3 = props(markStyles.fallback, markStyles[tone]);
-			$[11] = tone;
-			$[12] = t3;
-		} else t3 = $[12];
-		let t4;
-		if ($[13] !== fallback || $[14] !== t3) {
-			t4 = /* @__PURE__ */ jsx("span", {
-				...t3,
-				children: fallback
-			});
-			$[13] = fallback;
-			$[14] = t3;
-			$[15] = t4;
-		} else t4 = $[15];
-		children = t4;
-	} else children = fallback;
-	const t3 = "span";
+		$[3] = t3;
+	} else t3 = $[3];
+	const fallback = t3;
 	let t4;
-	if ($[16] !== name || $[17] !== named) {
-		t4 = named ? {
+	if ($[4] !== decorative || $[5] !== name) {
+		t4 = !decorative && name.trim() !== "";
+		$[4] = decorative;
+		$[5] = name;
+		$[6] = t4;
+	} else t4 = $[6];
+	const named = t4;
+	const showsPicture = status === "loaded" || previous !== void 0;
+	let initialsNode = null;
+	if (!showsPicture && kind === "person" && fallback === "") {
+		let t5;
+		if ($[7] !== showPersonIcon) {
+			t5 = showPersonIcon ? /* @__PURE__ */ jsx(PersonGlyph, { ...props(markStyles.personGlyph) }) : null;
+			$[7] = showPersonIcon;
+			$[8] = t5;
+		} else t5 = $[8];
+		initialsNode = t5;
+	} else if (!showsPicture) {
+		let t5;
+		if ($[9] !== fallback || $[10] !== tintsFallback || $[11] !== tone) {
+			t5 = tintsFallback ? /* @__PURE__ */ jsx("span", {
+				...props(markStyles.fallback, markStyles[tone]),
+				children: fallback
+			}) : fallback;
+			$[9] = fallback;
+			$[10] = tintsFallback;
+			$[11] = tone;
+			$[12] = t5;
+		} else t5 = $[12];
+		initialsNode = t5;
+	}
+	let t5;
+	if ($[13] !== fit || $[14] !== previous) {
+		t5 = previous === void 0 ? null : /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src: previous,
+			...props(markStyles.image, fit)
+		}, previous);
+		$[13] = fit;
+		$[14] = previous;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== fit || $[17] !== imgProps || $[18] !== onError || $[19] !== onLoad || $[20] !== src || $[21] !== status) {
+		t6 = src === void 0 || status === "error" ? null : /* @__PURE__ */ jsx("img", {
+			alt: "",
+			decoding: "async",
+			loading: "lazy",
+			...imgProps,
+			onError,
+			onLoad,
+			src,
+			...props(markStyles.image, fit, status !== "loaded" && markStyles.imagePending)
+		}, src);
+		$[16] = fit;
+		$[17] = imgProps;
+		$[18] = onError;
+		$[19] = onLoad;
+		$[20] = src;
+		$[21] = status;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== initialsNode || $[24] !== t5 || $[25] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			initialsNode,
+			t5,
+			t6
+		] });
+		$[23] = initialsNode;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
+	const children = t7;
+	const t8 = "span";
+	let t9;
+	if ($[27] !== name || $[28] !== named) {
+		t9 = named ? {
 			"aria-label": name,
 			role: "img"
 		} : {};
-		$[16] = name;
-		$[17] = named;
-		$[18] = t4;
-	} else t4 = $[18];
-	const t5 = children;
-	const t6 = mergeStyles(props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props$1);
-	let t7;
-	if ($[19] !== children || $[20] !== props$1 || $[21] !== t4 || $[22] !== t6) {
-		t7 = {
-			...t4,
+		$[27] = name;
+		$[28] = named;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== decorative) {
+		t10 = decorative ? { "aria-hidden": true } : {};
+		$[30] = decorative;
+		$[31] = t10;
+	} else t10 = $[31];
+	const t11 = mergeStyles(props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props$1);
+	let t12;
+	if ($[32] !== children || $[33] !== props$1 || $[34] !== t10 || $[35] !== t11 || $[36] !== t9) {
+		t12 = {
+			...t9,
+			...t10,
 			...props$1,
-			children: t5,
-			...t6
+			children,
+			...t11
 		};
-		$[19] = children;
-		$[20] = props$1;
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t8;
-	if ($[24] !== render || $[25] !== t7) {
-		t8 = {
-			defaultTagName: t3,
-			props: t7,
+		$[32] = children;
+		$[33] = props$1;
+		$[34] = t10;
+		$[35] = t11;
+		$[36] = t9;
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== render || $[39] !== t12) {
+		t13 = {
+			defaultTagName: t8,
+			props: t12,
 			render
 		};
-		$[24] = render;
-		$[25] = t7;
-		$[26] = t8;
-	} else t8 = $[26];
-	return useRender(t8);
+		$[38] = render;
+		$[39] = t12;
+		$[40] = t13;
+	} else t13 = $[40];
+	return useRender(t13);
 }
 //#endregion
 export { Mark as default };

package/dist/mark/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","useLocale","RenderComponentProps","MarkSize","MarkTone","useImageLoadingStatus","useRender","mergeStyles","initialOfThing","initialsOfPerson","markStyles","KINDS","person","fit","cover","initials","shape","circle","tintsFallback","thing","contain","square","const","MarkProps","Omit","kind","name","size","src","tone","Mark","t0","$","_c","render","props","status","locale","t1","fallback","t2","trim","named","children","t3","image","t4","role","t6","base","t7","t8","defaultTagName","_c","props","stylex.props"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../render/useRender';\nimport type { MarkSize, MarkTone } from './styles';\nimport { useImageLoadingStatus } from '../hooks/useImageLoadingStatus';\nimport { useRender } from '../render/useRender';\nimport { mergeStyles } from '../styles/merge';\nimport { initialOfThing, initialsOfPerson } from './initials';\nimport { markStyles } from './styles';\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    fit: markStyles.cover,\n    initials: initialsOfPerson,\n    shape: markStyles.circle,\n    tintsFallback: false\n  },\n  thing: {\n    fit: markStyles.contain,\n    initials: initialOfThing,\n    shape: markStyles.square,\n    tintsFallback: true\n  }\n} as const;\ntype MarkProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  kind: keyof typeof KINDS;\n  /** Supplies both the fallback's initials and the accessible name. */\n  name: string;\n  size: MarkSize;\n  /** An image to show in place of the initials once it has loaded. */\n  src?: string;\n  tone: MarkTone;\n};\n\n/**\n * The small identity mark Avatar and ProductIcon both render: an image once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both. Not a component of the library's own and not exported\n * from the package; see `src/chip` for the same arrangement around a chip's\n * pill.\n */\nfunction Mark({\n  kind,\n  name,\n  render,\n  size,\n  src,\n  tone,\n  ...props\n}: MarkProps) {\n  const {\n    fit,\n    initials,\n    shape,\n    tintsFallback\n  } = KINDS[kind];\n  // The image is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n  const {\n    locale\n  } = useLocale();\n  const fallback = initials(name, locale);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the image and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no image, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the mark is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its image with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  let children;\n  if (status === 'loaded') {\n    children = <img alt=\"\" src={src} {...stylex.props(markStyles.image, fit)} />;\n  } else if (tintsFallback) {\n    children = <span {...stylex.props(markStyles.fallback, markStyles[tone])}>\n        {fallback}\n      </span>;\n  } else {\n    children = fallback;\n  }\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children,\n      ...mergeStyles(stylex.props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props)\n    },\n    render\n  });\n}\nexport default Mark;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ImgHTMLAttributes","stylex","useLocale","RenderComponentProps","MarkSize","MarkTone","PersonGlyph","useImageLoadingStatus","useRender","mergeStyles","initialOfThing","initialsOfPerson","markStyles","KINDS","person","fit","cover","initials","shape","circle","tintsFallback","thing","contain","square","const","MarkProps","decorative","imgProps","Pick","HTMLImageElement","kind","name","showPersonIcon","size","src","tone","Omit","Mark","t0","$","_c","t1","render","t2","props","undefined","onError","onLoad","previous","status","locale","t3","fallback","t4","trim","named","showsPicture","initialsNode","t5","personGlyph","image","t6","imagePending","t7","children","t8","t9","role","t10","t11","base","t12","t13","defaultTagName","_c","props","stylex.props"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../render/useRender';\nimport type { MarkSize, MarkTone } from './styles';\nimport { PersonGlyph } from '../glyphs';\nimport { useImageLoadingStatus } from '../hooks/useImageLoadingStatus';\nimport { useRender } from '../render/useRender';\nimport { mergeStyles } from '../styles/merge';\nimport { initialOfThing, initialsOfPerson } from './initials';\nimport { markStyles } from './styles';\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    fit: markStyles.cover,\n    initials: initialsOfPerson,\n    shape: markStyles.circle,\n    tintsFallback: false\n  },\n  thing: {\n    fit: markStyles.contain,\n    initials: initialOfThing,\n    shape: markStyles.square,\n    tintsFallback: true\n  }\n} as const;\ntype MarkProps = {\n  /**\n   * Hides the mark from assistive technology, for one beside the name it\n   * stands for, which would otherwise be announced twice.\n   */\n  decorative?: boolean | undefined;\n  /** Attributes for the picture's own `<img>`, as Avatar and ProductIcon take them. */\n  imgProps?: Pick<ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'fetchPriority' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet'> | undefined;\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  kind: keyof typeof KINDS;\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  name: string;\n  /**\n   * Whether a person with no initials to take — a blank name — draws the\n   * anonymous person glyph, or an empty disc, as a loading skeleton wants.\n   */\n  showPersonIcon?: boolean | undefined;\n  size: MarkSize;\n  /** An image to show in place of the initials once it has loaded. */\n  src?: string;\n  tone: MarkTone;\n} & Omit<RenderComponentProps<'span'>, 'children'>;\n\n/**\n * The small identity mark Avatar and ProductIcon both render: an image once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both. Not a component of the library's own and not exported\n * from the package; see `src/chip` for the same arrangement around a chip's\n * pill.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  render,\n  showPersonIcon = true,\n  size,\n  src,\n  tone,\n  ...props\n}: MarkProps) {\n  const {\n    fit,\n    initials,\n    shape,\n    tintsFallback\n  } = KINDS[kind];\n  // The image is rendered from the start and shown once it has loaded, and\n  // the initials stay until then and come back if it fails — see\n  // useImageLoadingStatus.\n  const {\n    onError,\n    onLoad,\n    previous,\n    status\n  } = useImageLoadingStatus(src);\n  const {\n    locale\n  } = useLocale();\n  const fallback = initials(name, locale);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the image and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no image, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the mark is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its image with an\n  // empty alt, leave it nothing to announce.\n  //\n  // A decorative mark is hidden outright. Beside the name it stands for — a\n  // list row whose headline is the person — the name came out twice, once as\n  // the image and once as the text, and with no role the initials would be\n  // read as bare letters instead.\n  const named = !decorative && name.trim() !== '';\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined;\n  let initialsNode = null;\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take — a blank name, one still loading —\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour, where it drew an empty disc. Decoration: a blank name is\n    // unnamed, and the glyph announces nothing either.\n    initialsNode = showPersonIcon ? <PersonGlyph {...stylex.props(markStyles.personGlyph)} /> : null;\n  } else if (!showsPicture) {\n    initialsNode = tintsFallback ? <span {...stylex.props(markStyles.fallback, markStyles[tone])}>\n        {fallback}\n      </span> : fallback;\n  }\n\n  // Two pictures at most, laid over the initials. The one last loaded stays\n  // while a new `src` loads, and the new one is rendered on top of it from\n  // the start, hidden until it has loaded: lazy, so an avatar far down an\n  // unvirtualised list is not fetched on mount, and decoded off the main\n  // thread, both of which the call site can change through `imgProps`. The\n  // last loaded one is the resource the browser chose, out of a `srcSet`\n  // too, and is cached, so it needs none of those.\n  const children = <>\n      {initialsNode}\n      {previous === undefined ? null : <img alt=\"\" key={previous} src={previous} {...stylex.props(markStyles.image, fit)} />}\n      {src === undefined || status === 'error' ? null : <img alt=\"\" decoding=\"async\" key={src} loading=\"lazy\" {...imgProps} onError={onError} onLoad={onLoad} src={src} {...stylex.props(markStyles.image, fit, status !== 'loaded' && markStyles.imagePending)} />}\n    </>;\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...(decorative ? {\n        'aria-hidden': true\n      } : {}),\n      ...props,\n      children,\n      ...mergeStyles(stylex.props(markStyles.base, shape, markStyles[size], !tintsFallback && markStyles[tone]), props)\n    },\n    render\n  });\n}\nexport default Mark;"],"mappings":"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"}

package/dist/mark/styles.js

@@ -12,6 +12,7 @@ const markStyles = {
 		k63SB2: "x1bf3uqz",
 		kjj79g: "xl56j7k",
 		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
 		kfSwDN: "x87ps6o",
 		$$css: true
 	},
@@ -37,7 +38,15 @@ const markStyles = {
 	},
 	image: {
 		kZKoxP: "x5yr21d",
+		kB7OPa: "x9f619",
 		kzqmXN: "xh8yej3",
+		k87sOh: "x13vifvy",
+		kLqNvP: "x1o0tod",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	},
+	imagePending: {
+		kSiTet: "xg01cxk",
 		$$css: true
 	},
 	lg: {
@@ -57,6 +66,11 @@ const markStyles = {
 		kMwMTN: "xylzu7l",
 		$$css: true
 	},
+	personGlyph: {
+		kZKoxP: "x39lw6i",
+		kzqmXN: "xycev2y",
+		$$css: true
+	},
 	positive: {
 		kWkggS: "xa3zu90",
 		kMwMTN: "x1di7zbg",

package/dist/mark/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","typography","FORCED_COLORS","markStyles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","circle","kaIpWk","contain","kVIFPx","cover","fallback","kZKoxP","kzqmXN","image","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","square","tertiary","MarkSize","MarkTone"],"sources":["../../src/mark/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../tokens/design.tokens.stylex';\n\n// The box Avatar and ProductIcon draw in, shared so a person and a thing stay\n// the same three sizes in the same five tones, and so either can fill a\n// leading slot without moving what sits beside it. They differ in the two\n// ways that matter for a mark rather than a face, and those are the keys a\n// kind picks between in `./index.tsx`.\n//\n// A person is a circle with the photo cropped to fill it; a thing is a\n// rounded square with its mark letterboxed. A logo is drawn to its own\n// bounding box, so a circle crops the corners it was composed with, and\n// cropping a face loses nothing anyone minds where cropping a wordmark loses\n// the word. The cost of `contain` is letterboxing — a wide mark leaves space\n// above and below — and that is the right trade for a mark whose whole job\n// is to be recognised.\n//\n// That cost is also why a thing's tone tints the fallback rather than the\n// root. A mark letterboxed into the square does not cover it, and neither\n// does one drawn with transparency, so a tint on the root showed as a\n// coloured box around every logo that was not an opaque square. On the\n// fallback it is seen exactly when it is meant to be: while there is no\n// mark, or none has loaded. A photo covers the whole circle, so a person's\n// tone stays on the root.\n//\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large mark is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so a mark and a control line up\n// in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an `xs`\n// control take and that 40dp default, for a row that wants a person smaller\n// than the button beside them.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst markStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1w1tqly\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  circle: {\n    kaIpWk: \"x16fbrrb\",\n    $$css: true\n  },\n  contain: {\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  cover: {\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  square: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype MarkSize = 'lg' | 'md' | 'sm';\ntype MarkTone = 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\nexport type { MarkSize, MarkTone };\nexport { markStyles };"],"mappings":";AA+CA,MAAMK,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;CACAG,SAAS;EACPC,QAAQ;EACRJ,OAAO;CACT;CACAK,OAAO;EACLD,QAAQ;EACRJ,OAAO;CACT;CACAM,UAAU;EACRlB,QAAQ;EACRmB,QAAQ;EACRd,QAAQ;EACRe,QAAQ;EACRX,QAAQ;EACRG,OAAO;CACT;CACAS,OAAO;EACLF,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAU,IAAI;EACFH,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAY,IAAI;EACFL,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAa,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,UAAU;EACRF,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAiB,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAkB,WAAW;EACTJ,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAmB,IAAI;EACFZ,QAAQ;EACRI,QAAQ;EACRH,QAAQ;EACRR,OAAO;CACT;CACAoB,QAAQ;EACNlB,QAAQ;EACRF,OAAO;CACT;CACAqB,UAAU;EACRP,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","typography","FORCED_COLORS","markStyles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kVAEAm","kfSwDN","$$css","circle","kaIpWk","contain","kVIFPx","cover","fallback","kZKoxP","kzqmXN","image","k87sOh","kLqNvP","imagePending","kSiTet","lg","kGuDYH","md","negative","kWkggS","kMwMTN","personGlyph","positive","primary","secondary","sm","square","tertiary","MarkSize","MarkTone"],"sources":["../../src/mark/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../tokens/design.tokens.stylex';\n\n// The box Avatar and ProductIcon draw in, shared so a person and a thing stay\n// the same three sizes in the same five tones, and so either can fill a\n// leading slot without moving what sits beside it. They differ in the two\n// ways that matter for a mark rather than a face, and those are the keys a\n// kind picks between in `./index.tsx`.\n//\n// A person is a circle with the photo cropped to fill it; a thing is a\n// rounded square with its mark letterboxed. A logo is drawn to its own\n// bounding box, so a circle crops the corners it was composed with, and\n// cropping a face loses nothing anyone minds where cropping a wordmark loses\n// the word. The cost of `contain` is letterboxing — a wide mark leaves space\n// above and below — and that is the right trade for a mark whose whole job\n// is to be recognised.\n//\n// That cost is also why a thing's tone tints the fallback rather than the\n// root. A mark letterboxed into the square does not cover it, and neither\n// does one drawn with transparency, so a tint on the root showed as a\n// coloured box around every logo that was not an opaque square. On the\n// fallback it is seen exactly when it is meant to be: while there is no\n// mark, or none has loaded. A photo covers the whole circle, so a person's\n// tone stays on the root.\n//\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large mark is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so a mark and a control line up\n// in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an `xs`\n// control take and that 40dp default, for a row that wants a person smaller\n// than the button beside them.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst markStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1w1tqly\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  circle: {\n    kaIpWk: \"x16fbrrb\",\n    $$css: true\n  },\n  contain: {\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  cover: {\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  imagePending: {\n    kSiTet: \"xg01cxk\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  personGlyph: {\n    kZKoxP: \"x39lw6i\",\n    kzqmXN: \"xycev2y\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  square: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype MarkSize = 'lg' | 'md' | 'sm';\ntype MarkTone = 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\nexport type { MarkSize, MarkTone };\nexport { markStyles };"],"mappings":";AA+CA,MAAMK,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;CACAG,SAAS;EACPC,QAAQ;EACRJ,OAAO;CACT;CACAK,OAAO;EACLD,QAAQ;EACRJ,OAAO;CACT;CACAM,UAAU;EACRnB,QAAQ;EACRoB,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRZ,QAAQ;EACRI,OAAO;CACT;CACAS,OAAO;EACLF,QAAQ;EACRhB,QAAQ;EACRiB,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRE,OAAO;CACT;CACAY,cAAc;EACZC,QAAQ;EACRb,OAAO;CACT;CACAc,IAAI;EACFP,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAgB,IAAI;EACFT,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAiB,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,aAAa;EACXb,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAqB,UAAU;EACRH,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAsB,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAuB,WAAW;EACTL,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAwB,IAAI;EACFjB,QAAQ;EACRQ,QAAQ;EACRP,QAAQ;EACRR,OAAO;CACT;CACAyB,QAAQ;EACNvB,QAAQ;EACRF,OAAO;CACT;CACA0B,UAAU;EACRR,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;AACF"}

package/dist/overlay/index.js

@@ -0,0 +1,24 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { SeparatorContext } from "react-aria-components";
+//#region src/overlay/index.tsx
+const NO_SEPARATOR = {};
+/** Clears, for an overlay's content, the contexts that reach it from outside. */
+function OverlayScope(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(SeparatorContext, {
+			value: NO_SEPARATOR,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+export { OverlayScope };
+
+//# sourceMappingURL=index.js.map

package/dist/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","SeparatorContext","NO_SEPARATOR","OverlayScope","t0","$","_c","children","t1","_c"],"sources":["../../src/overlay/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { SeparatorContext } from 'react-aria-components'\n\n// React context crosses the portal an overlay renders through, so what a\n// component around the trigger sets for its own children reaches into the\n// overlay as well. `Toolbar` sets the one that matters: it turns a\n// `Separator` across the bar, and a horizontal rule in a popover opened from\n// the bar took that orientation and drew as a vertical rule 0px long, told\n// to assistive technology as vertical too. An overlay is a surface of its\n// own, so its content starts from none of it, and a `Separator` there falls\n// back to its own horizontal default — as one inside React Aria's `Menu`\n// already did, since `Menu` provides a separator context of its own.\n//\n// Empty rather than null, so the separator reads no props from it rather\n// than finding no context and looking further out; a module constant, so the\n// value is the same object on every render.\nconst NO_SEPARATOR = {}\n\n/** Clears, for an overlay's content, the contexts that reach it from outside. */\nfunction OverlayScope({ children }: { children: ReactNode }) {\n  return <SeparatorContext value={NO_SEPARATOR}>{children}</SeparatorContext>\n}\n\nexport { OverlayScope }\n"],"mappings":";;;;AAiBA,MAAME,eAAe,CAAC;;AAGtB,SAAAC,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAC,aAAAH;CAAqC,IAAAI;CAAA,IAAAH,EAAA,OAAAE,UAAA;EAClDC,KAAA,oBAAC,kBAAD;GAAyBN,OAAAA;GAAeK;EAAvB,CAAA;EAAmDF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAApEG;AAAoE"}

package/dist/styles/scheme.js

@@ -0,0 +1,19 @@
+//#region src/styles/scheme.ts
+const pinnedScheme = {
+	dark: {
+		kWkggS: "x14s9m32",
+		kMwMTN: "x139gbkf",
+		kQNsl9: "xntwwlm",
+		$$css: true
+	},
+	light: {
+		kWkggS: "x14s9m32",
+		kMwMTN: "x139gbkf",
+		kQNsl9: "x19aimcq",
+		$$css: true
+	}
+};
+//#endregion
+export { pinnedScheme };
+
+//# sourceMappingURL=scheme.js.map