@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/select-field/select.d.ts

@@ -1,6 +1,6 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { type ReactNode } from "react";
-import { Field, type FieldState, type OptionsLoad, type OptionsLoadLabels } from "../field/index.ts";
+import { Field, type FieldPendingProps, type FieldState, type OptionsLoad, type OptionsLoadLabels } from "../field/index.ts";
 import { type SelectOption } from "./select-context.ts";
 export type { SelectOption };
 export type SelectRootProps<T extends string> = Omit<BaseSelect.Root.Props<T>, "items" | "onValueChange"> & Readonly<{
@@ -13,17 +13,45 @@ declare const SelectRoot: <T extends string>({ options, onValueChange, ...props
 /** The label that names the trigger. */
 declare const SelectLabel: ({ className, ...props }: BaseSelect.Label.Props) => ReactNode;
 export type SelectTriggerProps = BaseSelect.Trigger.Props & Readonly<{
-    /** Shown while nothing is selected. */
-    placeholder?: string;
     /** The states projected onto the trigger as `data-*` attributes. */
     state?: FieldState;
-    /** The chevron after the value, such as an expand icon. */
-    icon?: ReactNode;
 }>;
-/** The chevron after the trigger's value. Its children are the icon; without them it renders nothing. */
+/**
+ * The chosen option's label on the trigger, or `placeholder` while nothing is
+ * chosen.
+ *
+ * @example
+ * <Select.Value placeholder="Pick a status" />
+ */
+declare const SelectValue: ({ className, ...props }: BaseSelect.Value.Props) => ReactNode;
+/**
+ * What the trigger shows while its `state` is pending, such as a spinner.
+ * Renders nothing otherwise.
+ *
+ * @example
+ * <Select.Pending><Spinner size={1} /></Select.Pending>
+ */
+declare const SelectPending: (props: FieldPendingProps) => ReactNode;
+/**
+ * The chevron after the trigger's value. Its children are the icon; without
+ * them it renders nothing.
+ *
+ * @example
+ * <Select.Icon><ExpandMoreIcon /></Select.Icon>
+ */
 declare const SelectIcon: ({ className, children, ...props }: BaseSelect.Icon.Props) => ReactNode;
-/** The button that opens the list. Without children it shows the value, the pending mark and `icon`. */
-declare const SelectTrigger: ({ placeholder, state, icon, className, children, ...props }: SelectTriggerProps) => ReactNode;
+/**
+ * The button that opens the list, projecting `state` onto itself and holding
+ * what it is given: usually `Value`, `Pending` and `Icon`.
+ *
+ * @example
+ * <Select.Trigger state={state}>
+ * 	<Select.Value placeholder="Pick a status" />
+ * 	<Select.Pending><Spinner size={1} /></Select.Pending>
+ * 	<Select.Icon><ExpandMoreIcon /></Select.Icon>
+ * </Select.Trigger>
+ */
+declare const SelectTrigger: ({ state, className, children, ...props }: SelectTriggerProps) => ReactNode;
 /** Places the popup against the trigger. */
 declare const SelectPositioner: ({ className, sideOffset, alignItemWithTrigger, ...props }: BaseSelect.Positioner.Props) => ReactNode;
 /** The shared popup surface the list sits on. */
@@ -45,6 +73,10 @@ export type SelectItemsProps = Readonly<{
  */
 declare const SelectItems: ({ checkIcon, }: SelectItemsProps) => ReactNode;
 export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsLoadLabels & SelectItemsProps & Readonly<{
+    /** Shown while nothing is selected. */
+    placeholder?: string;
+    /** The chevron after the value, such as an expand icon. */
+    icon?: ReactNode;
     /** How far the options have loaded, when they come from a query. */
     load?: OptionsLoad;
 }>;
@@ -52,13 +84,13 @@ export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsL
  * The trigger over the portalled list of every option: the shape almost every
  * select takes. Reach for the parts where the list needs anything else.
  */
-declare const SelectControl: ({ load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props }: SelectControlProps) => ReactNode;
+declare const SelectControl: ({ placeholder, icon, load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props }: SelectControlProps) => ReactNode;
 /** The parts of a select. */
 export type SelectParts = Readonly<{
     Root: typeof SelectRoot;
     Label: typeof SelectLabel;
     Trigger: typeof SelectTrigger;
-    Value: typeof BaseSelect.Value;
+    Value: typeof SelectValue;
     Icon: typeof SelectIcon;
     Portal: typeof BaseSelect.Portal;
     Positioner: typeof SelectPositioner;
@@ -72,7 +104,7 @@ export type SelectParts = Readonly<{
     GroupLabel: typeof BaseSelect.GroupLabel;
     Separator: typeof BaseSelect.Separator;
     Control: typeof SelectControl;
-    Pending: typeof Field.Pending;
+    Pending: typeof SelectPending;
     Description: typeof Field.Description;
     Error: typeof Field.Error;
     useIds: typeof Field.useIds;

package/dist/components/select-field/select.js

@@ -10,7 +10,7 @@ import select_module_default from "./select.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { createContext, useContext, useRef } from "react";
 import { Select } from "@base-ui/react/select";
 // src/components/select-field/select.tsx
 /** The select's state, holding the options every part below it reads. */
@@ -101,7 +101,62 @@ var SelectLabel = (t0) => {
 	return t2;
 };
 var NO_STATE = {};
-/** The chevron after the trigger's value. Its children are the icon; without them it renders nothing. */
+var TriggerStateContext = createContext(NO_STATE);
+/**
+* The chosen option's label on the trigger, or `placeholder` while nothing is
+* chosen.
+*
+* @example
+* <Select.Value placeholder="Pick a status" />
+*/
+var SelectValue = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(select_module_default.value, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.Value, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* What the trigger shows while its `state` is pending, such as a spinner.
+* Renders nothing otherwise.
+*
+* @example
+* <Select.Pending><Spinner size={1} /></Select.Pending>
+*/
+var SelectPending = (props) => {
+	return useContext(TriggerStateContext).pending === true ? /* @__PURE__ */ jsx(Field.Pending, { ...props }) : null;
+};
+/**
+* The chevron after the trigger's value. Its children are the icon; without
+* them it renders nothing.
+*
+* @example
+* <Select.Icon><ExpandMoreIcon /></Select.Icon>
+*/
 var SelectIcon = (t0) => {
 	const $ = c(8);
 	let children;
@@ -132,66 +187,64 @@ var SelectIcon = (t0) => {
 	} else t1 = $[7];
 	return t1;
 };
-/** The button that opens the list. Without children it shows the value, the pending mark and `icon`. */
+/**
+* The button that opens the list, projecting `state` onto itself and holding
+* what it is given: usually `Value`, `Pending` and `Icon`.
+*
+* @example
+* <Select.Trigger state={state}>
+* 	<Select.Value placeholder="Pick a status" />
+* 	<Select.Pending><Spinner size={1} /></Select.Pending>
+* 	<Select.Icon><ExpandMoreIcon /></Select.Icon>
+* </Select.Trigger>
+*/
 var SelectTrigger = (t0) => {
-	const $ = c(24);
+	const $ = c(20);
 	let children;
 	let className;
-	let icon;
-	let placeholder;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({placeholder, state: t1, icon, className, children, ...props} = t0);
+		({state: t1, className, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = icon;
-		$[4] = placeholder;
-		$[5] = props;
-		$[6] = t1;
+		$[3] = props;
+		$[4] = t1;
 	} else {
 		children = $[1];
 		className = $[2];
-		icon = $[3];
-		placeholder = $[4];
-		props = $[5];
-		t1 = $[6];
+		props = $[3];
+		t1 = $[4];
 	}
 	const state = t1 === void 0 ? NO_STATE : t1;
 	const focus = useFieldFocus(props);
 	const t2 = state.validity === "invalid" || void 0;
 	let t3;
-	if ($[7] !== className) {
+	if ($[5] !== className) {
 		t3 = clsx(select_module_default.trigger, className);
-		$[7] = className;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[5] = className;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[9] !== focus || $[10] !== state) {
+	if ($[7] !== focus || $[8] !== state) {
 		t4 = fieldStateAttributes(withFieldFocus(state, focus));
-		$[9] = focus;
-		$[10] = state;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[7] = focus;
+		$[8] = state;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[12] !== children || $[13] !== icon || $[14] !== placeholder || $[15] !== state.pending) {
-		t5 = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(Select.Value, {
-				className: select_module_default.value,
-				placeholder
-			}),
-			state.pending === true && /* @__PURE__ */ jsx(Field.Pending, {}),
-			/* @__PURE__ */ jsx(SelectIcon, { children: icon })
-		] });
-		$[12] = children;
-		$[13] = icon;
-		$[14] = placeholder;
-		$[15] = state.pending;
-		$[16] = t5;
-	} else t5 = $[16];
+	if ($[10] !== children || $[11] !== state) {
+		t5 = /* @__PURE__ */ jsx(TriggerStateContext, {
+			value: state,
+			children
+		});
+		$[10] = children;
+		$[11] = state;
+		$[12] = t5;
+	} else t5 = $[12];
 	let t6;
-	if ($[17] !== focus.props || $[18] !== props || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+	if ($[13] !== focus.props || $[14] !== props || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Select.Trigger, {
 			"aria-invalid": t2,
 			className: t3,
@@ -200,14 +253,14 @@ var SelectTrigger = (t0) => {
 			...focus.props,
 			children: t5
 		});
-		$[17] = focus.props;
-		$[18] = props;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
+		$[13] = focus.props;
+		$[14] = props;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
 	return t6;
 };
 /** Places the popup against the trigger. */
@@ -478,95 +531,127 @@ var SelectStatus = (t0) => {
 * select takes. Reach for the parts where the list needs anything else.
 */
 var SelectControl = (t0) => {
-	const $ = c(27);
+	const $ = c(36);
 	let checkIcon;
+	let icon;
 	let loadBrokenLabel;
 	let loadFailedLabel;
 	let loadingLabel;
 	let noOptionsLabel;
+	let placeholder;
 	let props;
 	let retryLabel;
 	let t1;
 	if ($[0] !== t0) {
-		({load: t1, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props} = t0);
+		({placeholder, icon, load: t1, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props} = t0);
 		$[0] = t0;
 		$[1] = checkIcon;
-		$[2] = loadBrokenLabel;
-		$[3] = loadFailedLabel;
-		$[4] = loadingLabel;
-		$[5] = noOptionsLabel;
-		$[6] = props;
-		$[7] = retryLabel;
-		$[8] = t1;
+		$[2] = icon;
+		$[3] = loadBrokenLabel;
+		$[4] = loadFailedLabel;
+		$[5] = loadingLabel;
+		$[6] = noOptionsLabel;
+		$[7] = placeholder;
+		$[8] = props;
+		$[9] = retryLabel;
+		$[10] = t1;
 	} else {
 		checkIcon = $[1];
-		loadBrokenLabel = $[2];
-		loadFailedLabel = $[3];
-		loadingLabel = $[4];
-		noOptionsLabel = $[5];
-		props = $[6];
-		retryLabel = $[7];
-		t1 = $[8];
+		icon = $[2];
+		loadBrokenLabel = $[3];
+		loadFailedLabel = $[4];
+		loadingLabel = $[5];
+		noOptionsLabel = $[6];
+		placeholder = $[7];
+		props = $[8];
+		retryLabel = $[9];
+		t1 = $[10];
 	}
 	const load = t1 === void 0 ? OPTIONS_LOADED : t1;
 	const popupRef = useRef(null);
 	let t2;
-	if ($[9] !== props) {
-		t2 = /* @__PURE__ */ jsx(SelectTrigger, { ...props });
-		$[9] = props;
-		$[10] = t2;
-	} else t2 = $[10];
+	if ($[11] !== placeholder) {
+		t2 = /* @__PURE__ */ jsx(SelectValue, { placeholder });
+		$[11] = placeholder;
+		$[12] = t2;
+	} else t2 = $[12];
 	let t3;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = (retry) => {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(SelectPending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== icon) {
+		t4 = /* @__PURE__ */ jsx(SelectIcon, { children: icon });
+		$[14] = icon;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== props || $[17] !== t2 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(SelectTrigger, {
+			...props,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[16] = props;
+		$[17] = t2;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (retry) => {
 			retry();
 			popupRef.current?.focus();
 		};
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== load || $[13] !== loadBrokenLabel || $[14] !== loadFailedLabel || $[15] !== loadingLabel || $[16] !== noOptionsLabel || $[17] !== retryLabel) {
-		t4 = /* @__PURE__ */ jsx(SelectStatus, {
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== load || $[22] !== loadBrokenLabel || $[23] !== loadFailedLabel || $[24] !== loadingLabel || $[25] !== noOptionsLabel || $[26] !== retryLabel) {
+		t7 = /* @__PURE__ */ jsx(SelectStatus, {
 			load,
 			loadingLabel,
 			loadFailedLabel,
 			loadBrokenLabel,
 			retryLabel,
 			noOptionsLabel,
-			onRetry: t3
+			onRetry: t6
 		});
-		$[12] = load;
-		$[13] = loadBrokenLabel;
-		$[14] = loadFailedLabel;
-		$[15] = loadingLabel;
-		$[16] = noOptionsLabel;
-		$[17] = retryLabel;
-		$[18] = t4;
-	} else t4 = $[18];
-	let t5;
-	if ($[19] !== checkIcon) {
-		t5 = /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(SelectItems, { checkIcon }) });
-		$[19] = checkIcon;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== t4 || $[22] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsxs(SelectPopup, {
+		$[21] = load;
+		$[22] = loadBrokenLabel;
+		$[23] = loadFailedLabel;
+		$[24] = loadingLabel;
+		$[25] = noOptionsLabel;
+		$[26] = retryLabel;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== checkIcon) {
+		t8 = /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(SelectItems, { checkIcon }) });
+		$[28] = checkIcon;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== t7 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsxs(SelectPopup, {
 			ref: popupRef,
-			children: [t4, t5]
+			children: [t7, t8]
 		}) }) });
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
-	let t7;
-	if ($[24] !== t2 || $[25] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t6] });
-		$[24] = t2;
-		$[25] = t6;
-		$[26] = t7;
-	} else t7 = $[26];
-	return t7;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t9;
+	} else t9 = $[32];
+	let t10;
+	if ($[33] !== t5 || $[34] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, t9] });
+		$[33] = t5;
+		$[34] = t9;
+		$[35] = t10;
+	} else t10 = $[35];
+	return t10;
 };
 /**
 * The styled parts of a base-ui Select: a trigger wearing the same treatment as
@@ -592,7 +677,7 @@ var Select$1 = {
 	Root: SelectRoot,
 	Label: SelectLabel,
 	Trigger: SelectTrigger,
-	Value: Select.Value,
+	Value: SelectValue,
 	Icon: SelectIcon,
 	Portal: Select.Portal,
 	Positioner: SelectPositioner,
@@ -606,7 +691,7 @@ var Select$1 = {
 	GroupLabel: Select.GroupLabel,
 	Separator: Select.Separator,
 	Control: SelectControl,
-	Pending: Field.Pending,
+	Pending: SelectPending,
 	Description: Field.Description,
 	Error: Field.Error,
 	useIds: Field.useIds

package/dist/components/select-field/select.module.js

@@ -1,21 +1,21 @@
 import './select.css';// src/components/select-field/select.module.scss
-var field = "_field_abji9_3";
-var label = "_label_abji9_9";
-var trigger = "_trigger_abji9_14";
-var value = "_value_abji9_95";
-var icon = "_icon_abji9_103";
-var positioner = "_positioner_abji9_108";
-var popup = "_popup_abji9_122";
-var item = "_item_abji9_148";
-var statusArea = "_statusArea_abji9_195";
-var status = "_status_abji9_195";
-var itemText = "_itemText_abji9_219";
-var itemDetail = "_itemDetail_abji9_223";
-var indicator = "_indicator_abji9_228";
+var field = "_field_1crpp_3";
+var trigger = "_trigger_1crpp_9";
+var label = "_label_1crpp_12";
+var value = "_value_1crpp_191";
+var icon = "_icon_1crpp_202";
+var positioner = "_positioner_1crpp_216";
+var popup = "_popup_1crpp_230";
+var item = "_item_1crpp_256";
+var statusArea = "_statusArea_1crpp_308";
+var status = "_status_1crpp_308";
+var itemText = "_itemText_1crpp_332";
+var itemDetail = "_itemDetail_1crpp_336";
+var indicator = "_indicator_1crpp_341";
 var select_module_default = {
 	field,
-	label,
 	trigger,
+	label,
 	value,
 	icon,
 	positioner,

package/dist/components/skeleton/skeleton.css

@@ -1,16 +1,16 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  @keyframes _loading-pulse_1vc0q_1 {
+  @keyframes _loading-pulse_36m01_1 {
     50% {
       opacity: 1;
     }
   }
-  ._skeleton_1vc0q_8 {
+  ._skeleton_36m01_8 {
     display: block;
     border-radius: var(--skeleton-radius, var(--sys-radius-xs));
     background-color: var(--skeleton-bg, var(--sys-color-surface-highest));
-    block-size: 1em;
+    block-size: var(--skeleton-block-size, 1em);
     opacity: var(--skeleton-rest, 0.75);
-    animation: _loading-pulse_1vc0q_1 2.4s var(--sys-motion-standard) infinite;
+    animation: _loading-pulse_36m01_1 2.4s var(--sys-motion-standard) infinite;
   }
 }

package/dist/components/skeleton/skeleton.module.js

@@ -1,9 +1,9 @@
 import './skeleton.css';// src/components/skeleton/skeleton.module.scss
-var skeleton = "_skeleton_1vc0q_8";
-var loadingPulse = "_loading-pulse_1vc0q_1";
+var skeleton = "_skeleton_36m01_8";
+var loadingPulse = "_loading-pulse_36m01_1";
 var skeleton_module_default = {
 	skeleton,
-	"loading-pulse": "_loading-pulse_1vc0q_1",
+	"loading-pulse": "_loading-pulse_36m01_1",
 	loadingPulse
 };
 export { skeleton_module_default as default, loadingPulse, skeleton };

package/dist/components/stale/stale.css

@@ -1,18 +1,18 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1tgdq_3 {
+  ._root_1w3l8_3 {
     position: relative;
   }
   @media not (prefers-reduced-motion) {
-    ._content_1tgdq_7 {
+    ._content_1w3l8_7 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._content_1tgdq_7[data-busy] {
+  ._content_1w3l8_7[data-busy] {
     opacity: var(--stale-busy-opacity, 0.55);
     pointer-events: none;
   }
-  ._overlay_1tgdq_15 {
+  ._overlay_1w3l8_15 {
     position: absolute;
     inset: 0;
     display: flex;
@@ -22,38 +22,38 @@
     gap: var(--stale-gap, var(--sys-unit-8));
     padding: var(--stale-pad, var(--sys-unit-16));
     background-color: color-mix(in oklab, var(--stale-scrim, var(--sys-color-surface)), transparent 25%);
-    backdrop-filter: blur(8px);
-    color: var(--sys-color-text);
+    backdrop-filter: var(--stale-backdrop-filter, blur(8px));
+    color: var(--stale-fg, var(--sys-color-text));
     text-align: center;
   }
   @media not (prefers-reduced-motion) {
-    ._overlay_1tgdq_15 {
+    ._overlay_1w3l8_15 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), backdrop-filter var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._overlay_1tgdq_15[data-starting-style], ._overlay_1tgdq_15[data-ending-style] {
+  ._overlay_1w3l8_15[data-starting-style], ._overlay_1w3l8_15[data-ending-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
-  ._message_1tgdq_38 {
+  ._message_1w3l8_38 {
     display: grid;
     justify-items: center;
     gap: var(--stale-gap, var(--sys-unit-8));
-    max-inline-size: 40ch;
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-medium);
+    max-inline-size: var(--stale-measure, 40ch);
+    color: var(--stale-message-fg, var(--sys-color-text-muted));
+    font: var(--stale-message-font, var(--sys-font-body-medium));
   }
-  ._illustration_1tgdq_46 {
+  ._illustration_1w3l8_46 {
     display: grid;
     place-items: center;
     color: var(--stale-illustration-fg, var(--sys-color-primary));
   }
   @media not (prefers-reduced-motion) {
-    ._retry_1tgdq_52 {
+    ._retry_1w3l8_52 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), translate var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._retry_1tgdq_52[data-starting-style], ._retry_1tgdq_52[data-ending-style] {
+  ._retry_1w3l8_52[data-starting-style], ._retry_1w3l8_52[data-ending-style] {
     translate: 0 var(--sys-unit-2);
     opacity: 0;
   }