@lablup/ui-common 0.2.0-alpha.15 → 0.2.0-alpha.17

package/README.md

@@ -15,13 +15,41 @@ Consumers are Lablup product frontends, including
 only. It has no API client, no application state, no router, and no
 desktop-shell integration.
 
+## Versions
+
+| Line | Branch        | State                        | Install                         |
+| ---- | ------------- | ---------------------------- | ------------------------------- |
+| 0.2  | `main`        | Developed here (prereleases) | `@lablup/ui-common@next`        |
+| 0.1  | `release/0.1` | Maintained: fixes only       | `@lablup/ui-common@release-0.1` |
+
+Until 0.2.0 is published, the `latest` dist-tag still points at 0.1's last
+alpha, so a bare `pnpm add @lablup/ui-common` installs 0.1: name `@next` for
+0.2.
+
+An app that stays on 0.1 keeps getting fixes as patch releases of the 0.1
+line, published under the `release-0.1` dist-tag, never under `next` or
+`latest`. 0.1 never had a plain release, so its fixes continue its prerelease
+sequence (`0.1.0-alpha.24`, `0.1.0-alpha.25`, …), which a `^0.1.0-alpha.N`
+range already accepts; an exact pin moves by hand:
+
+```
+pnpm add @lablup/ui-common@release-0.1
+```
+
+0.1's own README and CHANGELOG are on the
+[`release/0.1`](https://github.com/lablup/ui-common/tree/release/0.1) branch.
+To fix a bug in 0.1, open the pull request against `release/0.1`
+([CONTRIBUTING.md](CONTRIBUTING.md#patching-an-older-line)). Moving to 0.2 is
+[Upgrading from 0.1](#upgrading-from-01).
+
 ## Install
 
 ```
-pnpm add @lablup/ui-common @stylexjs/stylex
+pnpm add @lablup/ui-common@next @stylexjs/stylex
 ```
 
-That is npmjs, which needs no authentication.
+That is npmjs, which needs no authentication. Drop `@next` once 0.2.0 is
+published ([Versions](#versions)).
 
 Peer dependencies:
 
@@ -74,14 +102,14 @@ there):
 
 ```yaml
 overrides:
-  "@astryxdesign/lab>@astryxdesign/core": "0.6.2"
+  "@astryxdesign/lab>@astryxdesign/core": "0.6.5"
 ```
 
 npm, in the root `package.json`:
 
 ```json
 "overrides": {
-  "@astryxdesign/lab": { "@astryxdesign/core": "0.6.2" }
+  "@astryxdesign/lab": { "@astryxdesign/core": "0.6.5" }
 }
 ```
 
@@ -413,7 +441,9 @@ import astryxKo from "@lablup/ui-common/locales/ko-KR.json";
 </InternationalizationProvider>;
 ```
 
-- `@lablup/ui-common/locales/<locale>.json` is Astryx's own catalog.
+- `@lablup/ui-common/locales/<locale>.json` is Astryx's own catalog;
+  `@lablup/ui-common/locales/<locale>.generated.js` is the same catalog as a
+  compact string map, without translator descriptions.
 - `@lablup/ui-common/ui-common-locales/<locale>.json` is ui-common's.
 - Without a provider, everything renders in English.
 

package/dist/astryx/Markdown/parser.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Markdown/parser';

package/dist/astryx/Markdown/parser.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Markdown/parser";

package/dist/astryx/Markdown/plugins.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Markdown/plugins';

package/dist/astryx/Markdown/plugins.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Markdown/plugins";

package/dist/astryx/Markdown/remark.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Markdown/remark';

package/dist/astryx/Markdown/remark.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Markdown/remark";

package/dist/astryx/Timer.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Timer';

package/dist/astryx/Timer.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Timer";

package/dist/astryx/lab.d.ts

@@ -1,5 +1,5 @@
-export { Chart, ChartArea, ChartAxis, ChartBar, ChartBrush, ChartCandlestick, ChartDot, ChartDotGL, ChartDotGLInteractive, ChartErrorBar, ChartGrid, ChartHeatmapGL, ChartLegend, ChartLine, ChartReferenceLine, ChartSelect, ChartStreamGL, ChartTooltip, ChartZoom, ChatEmojiPicker, ChatReactionBar, ChatReasoning, ChatTypingIndicator, ChatUnreadDivider, CircularProgress, CodeEditor, DEFAULT_CHAT_EMOJIS, InfoTip, ListInput, LogStream, RadialArea, RadialAxis, RadialChart, RadialGrid, RadialSlice, RadialTooltip, SVGIcon, SYNC_TOKENIZE_THRESHOLD, SankeyChart, SankeyGrid, SankeyLabel, SankeyLink, SankeyNode, Schedule, ScheduleContext, Stat, ThreeDAxis, ThreeDBar, ThreeDChart, ThreeDGrid, ThreeDScatter, ThreeDScatterGL, ThreeDSurface, TransferList, TransferListSelector, bellIcon, calendarIcon, checkIcon, compactNumber, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, currency, defaultSchedulePlugins, eyeIcon, folderIcon, getChartColors, getChartColorsFromResolver, heartIcon, homeIcon, iconVars, lockIcon, m4Reduce, mailIcon, menuIcon, monthYear, opticalSize, percent, searchIcon, settingsIcon, shieldIcon, shortDate, starIcon, starterIcons, tokenize, tokenizeAsync, transferListVars, use3D, useChart, useChartColors, useChartRange, useRadial, useSankey, useScheduleContext, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin, variations, xIcon, } from '@astryxdesign/lab';
-export type { BrushMode, BrushRange, CalendarDayEvent, CalendarEvent, CalendarEventBase, CalendarInstantEvent, Camera, ChartAreaProps, ChartAxisProps, ChartBarProps, ChartBrushProps, ChartCandlestickProps, ChartColorsAPI, ChartContext, ChartCrosshairMode, ChartDotGLInteractiveProps, ChartDotGLProps, ChartDotProps, ChartErrorBarProps, ChartGridProps, ChartHeatmapGLProps, ChartLegendItem, ChartLegendProps, ChartLineProps, ChartMargin, ChartProps, ChartReferenceLineProps, ChartScale, ChartSelectProps, ChartStreamGLHandle, ChartStreamGLProps, ChartTooltipProps, ChartZoomProps, ChatEmojiOption, ChatEmojiPickerProps, ChatReaction, ChatReactionBarProps, ChatReasoningProps, ChatTypingIndicatorProps, ChatUnreadDividerProps, CircularProgressProps, CircularProgressSize, CircularProgressVariant, CircularProgressVariantMap, CodeEditorProps, IconShape, IconShapeRole, InfoTipProps, InfoTipSize, Instant, ListInputChange, ListInputColumn, ListInputProps, ListInputRenderContext, ListInputValueContext, LogEntry, LogStreamLevel, LogStreamProps, M4Point, PlainDate, Point3D, ProjectedPoint, RadialAreaProps, RadialAxisProps, RadialChartProps, RadialContext, RadialGridProps, RadialMode, RadialSliceProps, RadialTooltipDatum, RadialTooltipProps, SVGIconColor, SVGIconDef, SVGIconProps, SVGIconSize, SVGIconVariation, SankeyChartProps, SankeyColumn, SankeyColumnDef, SankeyColumnLayout, SankeyContext, SankeyGridProps, SankeyLabelProps, SankeyLinkDatum, SankeyLinkLayout, SankeyLinkProps, SankeyNodeDatum, SankeyNodeLayout, SankeyNodeProps, ScheduleCategory, ScheduleContextValue, ScheduleDate, ScheduleDayViewOptions, ScheduleEventColor, ScheduleEventSource, ScheduleHeaderContent, ScheduleListViewOptions, ScheduleMonthlyViewOptions, SchedulePaginationPluginOptions, SchedulePlugin, SchedulePluginPosition, ScheduleProps, ScheduleRange, ScheduleView, ScheduleViewBase, ScheduleViewOptions, ScheduleViewSelectorOption, ScheduleViewSelectorPluginOptions, ScheduleWeeklyViewOptions, SequentialHue, StatDelta, StatDeltaDirection, StatDeltaSentiment, StatProps, StatSize, SyntaxToken, ThreeDAxisProps, ThreeDBarProps, ThreeDChartProps, ThreeDContext, ThreeDGridProps, ThreeDScatterGLProps, ThreeDScatterProps, ThreeDSurfaceProps, TokenResolver, TransferListOption, TransferListProps, TransferListSelectorCommitBehavior, TransferListSelectorProps, UseChartRangeOptions, UseChartRangeReturn, YBaseline, ZonedDateTime, ZonedDateTimeRange, } from '@astryxdesign/lab';
+export { Chart, ChartArea, ChartAxis, ChartBar, ChartBrush, ChartCandlestick, ChartDot, ChartDotGL, ChartDotGLInteractive, ChartErrorBar, ChartGrid, ChartHeatmapGL, ChartLegend, ChartLine, ChartReferenceLine, ChartSelect, ChartStreamGL, ChartTooltip, ChartZoom, ChatEmojiPicker, ChatReactionBar, ChatReasoning, ChatTypingIndicator, ChatUnreadDivider, CircularProgress, CodeEditor, DEFAULT_CHAT_EMOJIS, DrawerHeader, InfoTip, ListInput, LogStream, MobileTokenizer, RadialArea, RadialAxis, RadialChart, RadialGrid, RadialSlice, RadialTooltip, SVGIcon, SYNC_TOKENIZE_THRESHOLD, SankeyChart, SankeyGrid, SankeyLabel, SankeyLink, SankeyNode, Schedule, ScheduleContext, Stat, ThreeDAxis, ThreeDBar, ThreeDChart, ThreeDGrid, ThreeDScatter, ThreeDScatterGL, ThreeDSurface, TransferList, TransferListSelector, bellIcon, calendarIcon, checkIcon, compactNumber, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, currency, defaultSchedulePlugins, eyeIcon, folderIcon, getChartColors, getChartColorsFromResolver, heartIcon, homeIcon, iconVars, lockIcon, m4Reduce, mailIcon, menuIcon, monthYear, opticalSize, percent, searchIcon, settingsIcon, shieldIcon, shortDate, starIcon, starterIcons, tokenize, tokenizeAsync, transferListVars, use3D, useChart, useChartColors, useChartRange, useRadial, useSankey, useScheduleContext, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin, variations, xIcon, } from '@astryxdesign/lab';
+export type { BrushMode, BrushRange, CalendarDayEvent, CalendarEvent, CalendarEventBase, CalendarInstantEvent, Camera, ChartAreaProps, ChartAxisProps, ChartBarProps, ChartBrushProps, ChartCandlestickProps, ChartColorsAPI, ChartContext, ChartCrosshairMode, ChartDotGLInteractiveProps, ChartDotGLProps, ChartDotProps, ChartErrorBarProps, ChartGridProps, ChartHeatmapGLProps, ChartLegendItem, ChartLegendProps, ChartLineProps, ChartMargin, ChartProps, ChartReferenceLineProps, ChartScale, ChartSelectProps, ChartStreamGLHandle, ChartStreamGLProps, ChartTooltipProps, ChartZoomProps, ChatEmojiOption, ChatEmojiPickerProps, ChatReaction, ChatReactionBarProps, ChatReasoningProps, ChatTypingIndicatorProps, ChatUnreadDividerProps, CircularProgressProps, CircularProgressSize, CircularProgressVariant, CircularProgressVariantMap, CodeEditorProps, DrawerHeaderProps, IconShape, IconShapeRole, InfoTipProps, InfoTipSize, Instant, ListInputChange, ListInputColumn, ListInputProps, ListInputRenderContext, ListInputValueContext, LogEntry, LogStreamLevel, LogStreamProps, M4Point, MobileTokenizerChange, MobileTokenizerProps, PlainDate, Point3D, ProjectedPoint, RadialAreaProps, RadialAxisProps, RadialChartProps, RadialContext, RadialGridProps, RadialMode, RadialSliceProps, RadialTooltipDatum, RadialTooltipProps, SVGIconColor, SVGIconDef, SVGIconProps, SVGIconSize, SVGIconVariation, SankeyChartProps, SankeyColumn, SankeyColumnDef, SankeyColumnLayout, SankeyContext, SankeyGridProps, SankeyLabelProps, SankeyLinkDatum, SankeyLinkLayout, SankeyLinkProps, SankeyNodeDatum, SankeyNodeLayout, SankeyNodeProps, ScheduleCategory, ScheduleContextValue, ScheduleDate, ScheduleDayViewOptions, ScheduleEventColor, ScheduleEventSource, ScheduleHeaderContent, ScheduleListViewOptions, ScheduleMonthlyViewOptions, SchedulePaginationPluginOptions, SchedulePlugin, SchedulePluginPosition, ScheduleProps, ScheduleRange, ScheduleTimeGridViewOptions, ScheduleView, ScheduleViewBase, ScheduleViewOptions, ScheduleViewSelectorOption, ScheduleViewSelectorPluginOptions, ScheduleWeeklyViewOptions, SequentialHue, StatDelta, StatDeltaDirection, StatDeltaSentiment, StatProps, StatSize, SyntaxToken, ThreeDAxisProps, ThreeDBarProps, ThreeDChartProps, ThreeDContext, ThreeDGridProps, ThreeDScatterGLProps, ThreeDScatterProps, ThreeDSurfaceProps, TokenResolver, TransferListOption, TransferListProps, TransferListSelectorCommitBehavior, TransferListSelectorProps, UseChartRangeOptions, UseChartRangeReturn, YBaseline, ZonedDateTime, ZonedDateTimeRange, } from '@astryxdesign/lab';
 export { Drawer } from '../forks/Drawer';
 export type { DrawerProps } from '../forks/Drawer';
 export { Tour, TourStep, useTour } from '../forks/Tour';

package/dist/astryx/lab.js

@@ -2,5 +2,5 @@ import { Drawer as e } from "../forks/Drawer/Drawer.js";
 import { Tour as t } from "../forks/Tour/Tour.js";
 import { TourStep as n } from "../forks/Tour/TourStep.js";
 import { useTour as r } from "../forks/Tour/useTour.js";
-import { Chart as i, ChartArea as a, ChartAxis as o, ChartBar as s, ChartBrush as c, ChartCandlestick as l, ChartDot as u, ChartDotGL as d, ChartDotGLInteractive as f, ChartErrorBar as p, ChartGrid as m, ChartHeatmapGL as h, ChartLegend as g, ChartLine as _, ChartReferenceLine as v, ChartSelect as y, ChartStreamGL as b, ChartTooltip as x, ChartZoom as S, ChatEmojiPicker as C, ChatReactionBar as w, ChatReasoning as T, ChatTypingIndicator as E, ChatUnreadDivider as D, CircularProgress as O, CodeEditor as k, DEFAULT_CHAT_EMOJIS as A, InfoTip as j, ListInput as M, LogStream as N, RadialArea as P, RadialAxis as F, RadialChart as I, RadialGrid as L, RadialSlice as R, RadialTooltip as z, SVGIcon as B, SYNC_TOKENIZE_THRESHOLD as V, SankeyChart as H, SankeyGrid as U, SankeyLabel as W, SankeyLink as G, SankeyNode as K, Schedule as q, ScheduleContext as J, Stat as Y, ThreeDAxis as X, ThreeDBar as Z, ThreeDChart as Q, ThreeDGrid as $, ThreeDScatter as ee, ThreeDScatterGL as te, ThreeDSurface as ne, TransferList as re, TransferListSelector as ie, bellIcon as ae, calendarIcon as oe, checkIcon as se, compactNumber as ce, createEventFromISO as le, createScheduleDayView as ue, createScheduleListView as de, createScheduleMonthlyView as fe, createScheduleWeeklyView as pe, currency as me, defaultSchedulePlugins as he, eyeIcon as ge, folderIcon as _e, getChartColors as ve, getChartColorsFromResolver as ye, heartIcon as be, homeIcon as xe, iconVars as Se, lockIcon as Ce, m4Reduce as we, mailIcon as Te, menuIcon as Ee, monthYear as De, opticalSize as Oe, percent as ke, searchIcon as Ae, settingsIcon as je, shieldIcon as Me, shortDate as Ne, starIcon as Pe, starterIcons as Fe, tokenize as Ie, tokenizeAsync as Le, transferListVars as Re, use3D as ze, useChart as Be, useChartColors as Ve, useChartRange as He, useRadial as Ue, useSankey as We, useScheduleContext as Ge, useSchedulePaginationPlugin as Ke, useScheduleViewSelectorPlugin as qe, variations as Je, xIcon as Ye } from "@astryxdesign/lab";
-export { i as Chart, a as ChartArea, o as ChartAxis, s as ChartBar, c as ChartBrush, l as ChartCandlestick, u as ChartDot, d as ChartDotGL, f as ChartDotGLInteractive, p as ChartErrorBar, m as ChartGrid, h as ChartHeatmapGL, g as ChartLegend, _ as ChartLine, v as ChartReferenceLine, y as ChartSelect, b as ChartStreamGL, x as ChartTooltip, S as ChartZoom, C as ChatEmojiPicker, w as ChatReactionBar, T as ChatReasoning, E as ChatTypingIndicator, D as ChatUnreadDivider, O as CircularProgress, k as CodeEditor, A as DEFAULT_CHAT_EMOJIS, e as Drawer, j as InfoTip, M as ListInput, N as LogStream, P as RadialArea, F as RadialAxis, I as RadialChart, L as RadialGrid, R as RadialSlice, z as RadialTooltip, B as SVGIcon, V as SYNC_TOKENIZE_THRESHOLD, H as SankeyChart, U as SankeyGrid, W as SankeyLabel, G as SankeyLink, K as SankeyNode, q as Schedule, J as ScheduleContext, Y as Stat, X as ThreeDAxis, Z as ThreeDBar, Q as ThreeDChart, $ as ThreeDGrid, ee as ThreeDScatter, te as ThreeDScatterGL, ne as ThreeDSurface, t as Tour, n as TourStep, re as TransferList, ie as TransferListSelector, ae as bellIcon, oe as calendarIcon, se as checkIcon, ce as compactNumber, le as createEventFromISO, ue as createScheduleDayView, de as createScheduleListView, fe as createScheduleMonthlyView, pe as createScheduleWeeklyView, me as currency, he as defaultSchedulePlugins, ge as eyeIcon, _e as folderIcon, ve as getChartColors, ye as getChartColorsFromResolver, be as heartIcon, xe as homeIcon, Se as iconVars, Ce as lockIcon, we as m4Reduce, Te as mailIcon, Ee as menuIcon, De as monthYear, Oe as opticalSize, ke as percent, Ae as searchIcon, je as settingsIcon, Me as shieldIcon, Ne as shortDate, Pe as starIcon, Fe as starterIcons, Ie as tokenize, Le as tokenizeAsync, Re as transferListVars, ze as use3D, Be as useChart, Ve as useChartColors, He as useChartRange, Ue as useRadial, We as useSankey, Ge as useScheduleContext, Ke as useSchedulePaginationPlugin, qe as useScheduleViewSelectorPlugin, r as useTour, Je as variations, Ye as xIcon };
+import { Chart as i, ChartArea as a, ChartAxis as o, ChartBar as s, ChartBrush as c, ChartCandlestick as l, ChartDot as u, ChartDotGL as d, ChartDotGLInteractive as f, ChartErrorBar as p, ChartGrid as m, ChartHeatmapGL as h, ChartLegend as g, ChartLine as _, ChartReferenceLine as v, ChartSelect as y, ChartStreamGL as b, ChartTooltip as x, ChartZoom as S, ChatEmojiPicker as C, ChatReactionBar as w, ChatReasoning as T, ChatTypingIndicator as E, ChatUnreadDivider as D, CircularProgress as O, CodeEditor as k, DEFAULT_CHAT_EMOJIS as A, DrawerHeader as j, InfoTip as M, ListInput as N, LogStream as P, MobileTokenizer as F, RadialArea as I, RadialAxis as L, RadialChart as R, RadialGrid as z, RadialSlice as B, RadialTooltip as V, SVGIcon as H, SYNC_TOKENIZE_THRESHOLD as U, SankeyChart as W, SankeyGrid as G, SankeyLabel as K, SankeyLink as q, SankeyNode as J, Schedule as Y, ScheduleContext as X, Stat as Z, ThreeDAxis as Q, ThreeDBar as $, ThreeDChart as ee, ThreeDGrid as te, ThreeDScatter as ne, ThreeDScatterGL as re, ThreeDSurface as ie, TransferList as ae, TransferListSelector as oe, bellIcon as se, calendarIcon as ce, checkIcon as le, compactNumber as ue, createEventFromISO as de, createScheduleDayView as fe, createScheduleListView as pe, createScheduleMonthlyView as me, createScheduleWeeklyView as he, currency as ge, defaultSchedulePlugins as _e, eyeIcon as ve, folderIcon as ye, getChartColors as be, getChartColorsFromResolver as xe, heartIcon as Se, homeIcon as Ce, iconVars as we, lockIcon as Te, m4Reduce as Ee, mailIcon as De, menuIcon as Oe, monthYear as ke, opticalSize as Ae, percent as je, searchIcon as Me, settingsIcon as Ne, shieldIcon as Pe, shortDate as Fe, starIcon as Ie, starterIcons as Le, tokenize as Re, tokenizeAsync as ze, transferListVars as Be, use3D as Ve, useChart as He, useChartColors as Ue, useChartRange as We, useRadial as Ge, useSankey as Ke, useScheduleContext as qe, useSchedulePaginationPlugin as Je, useScheduleViewSelectorPlugin as Ye, variations as Xe, xIcon as Ze } from "@astryxdesign/lab";
+export { i as Chart, a as ChartArea, o as ChartAxis, s as ChartBar, c as ChartBrush, l as ChartCandlestick, u as ChartDot, d as ChartDotGL, f as ChartDotGLInteractive, p as ChartErrorBar, m as ChartGrid, h as ChartHeatmapGL, g as ChartLegend, _ as ChartLine, v as ChartReferenceLine, y as ChartSelect, b as ChartStreamGL, x as ChartTooltip, S as ChartZoom, C as ChatEmojiPicker, w as ChatReactionBar, T as ChatReasoning, E as ChatTypingIndicator, D as ChatUnreadDivider, O as CircularProgress, k as CodeEditor, A as DEFAULT_CHAT_EMOJIS, e as Drawer, j as DrawerHeader, M as InfoTip, N as ListInput, P as LogStream, F as MobileTokenizer, I as RadialArea, L as RadialAxis, R as RadialChart, z as RadialGrid, B as RadialSlice, V as RadialTooltip, H as SVGIcon, U as SYNC_TOKENIZE_THRESHOLD, W as SankeyChart, G as SankeyGrid, K as SankeyLabel, q as SankeyLink, J as SankeyNode, Y as Schedule, X as ScheduleContext, Z as Stat, Q as ThreeDAxis, $ as ThreeDBar, ee as ThreeDChart, te as ThreeDGrid, ne as ThreeDScatter, re as ThreeDScatterGL, ie as ThreeDSurface, t as Tour, n as TourStep, ae as TransferList, oe as TransferListSelector, se as bellIcon, ce as calendarIcon, le as checkIcon, ue as compactNumber, de as createEventFromISO, fe as createScheduleDayView, pe as createScheduleListView, me as createScheduleMonthlyView, he as createScheduleWeeklyView, ge as currency, _e as defaultSchedulePlugins, ve as eyeIcon, ye as folderIcon, be as getChartColors, xe as getChartColorsFromResolver, Se as heartIcon, Ce as homeIcon, we as iconVars, Te as lockIcon, Ee as m4Reduce, De as mailIcon, Oe as menuIcon, ke as monthYear, Ae as opticalSize, je as percent, Me as searchIcon, Ne as settingsIcon, Pe as shieldIcon, Fe as shortDate, Ie as starIcon, Le as starterIcons, Re as tokenize, ze as tokenizeAsync, Be as transferListVars, Ve as use3D, He as useChart, Ue as useChartColors, We as useChartRange, Ge as useRadial, Ke as useSankey, qe as useScheduleContext, Je as useSchedulePaginationPlugin, Ye as useScheduleViewSelectorPlugin, r as useTour, Xe as variations, Ze as xIcon };

package/dist/components/Modal/modalStack.d.ts

@@ -32,6 +32,8 @@ export interface ModalZIndexBand {
  * `{ base: 1100, step: 10, max: 10999 }`. Pass nothing to restore it.
  */
 export declare function configureModalZIndex(next?: Partial<ModalZIndexBand>): void;
+/** The band's first level; a scrimless Drawer (src/forks/Drawer) stays below it. */
+export declare function modalZIndexBase(): number;
 /** A claim on the stack. Released by reference, never by level. */
 export interface ModalLevelEntry {
     level: number;

package/dist/components/Modal/modalStack.js

@@ -13,69 +13,72 @@ function d(e) {
 		...e
 	};
 }
-var f = "--modal-level", p = "--modal-z", m = [];
-function h(e, t) {
+function f() {
+	return u.base;
+}
+var p = "--modal-level", m = "--modal-z", h = [];
+function g(e, t) {
 	let n = t;
 	n != null && (n < u.base || n > u.max) && (a("Modal", `zIndex ${n} is outside the modal band (${u.base}..${u.max}); ignoring it. Change the band with configureModalZIndex instead.`), n = void 0);
 	let r = e?.zIndex ?? u.base - u.step;
 	return Math.min(Math.max(r + u.step, n ?? 0), u.max);
 }
-var g = "data-uic-modal-live", _ = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Set([
+var _ = "data-uic-modal-live", v = /* @__PURE__ */ new Set(), y = /* @__PURE__ */ new Set([
 	"SCRIPT",
 	"STYLE",
 	"LINK",
 	"TEMPLATE",
 	"NOSCRIPT"
 ]);
-function y(e) {
+function b(e) {
 	let t = new Set(e), n = /* @__PURE__ */ new Set();
 	for (let t of e) for (let e = t.parentElement; e && e !== document.body;) n.add(e), e = e.parentElement;
 	let r = [], i = (e) => {
-		for (let a of Array.from(e.children)) t.has(a) || v.has(a.tagName) || (n.has(a) ? i(a) : r.push(a));
+		for (let a of Array.from(e.children)) t.has(a) || y.has(a.tagName) || (n.has(a) ? i(a) : r.push(a));
 	};
 	return i(document.body), r;
 }
-function b() {
-	if (typeof document > "u" || !document.body) return;
-	let e = m.map((e) => e.root).filter((e) => e != null && e.isConnected), t = new Set(m.length === 0 ? [] : y([...e, ...Array.from(document.querySelectorAll(`[${g}]`))]));
-	for (let e of _) t.has(e) || (e.removeAttribute("inert"), _.delete(e));
-	for (let e of t) _.has(e) || e.hasAttribute("inert") || (e.setAttribute("inert", ""), _.add(e));
-}
 function x() {
-	(m.length > 0 || _.size > 0) && b();
+	if (typeof document > "u" || !document.body) return;
+	let e = h.map((e) => e.root).filter((e) => e != null && e.isConnected), t = new Set(h.length === 0 ? [] : b([...e, ...Array.from(document.querySelectorAll(`[${_}]`))]));
+	for (let e of v) t.has(e) || (e.removeAttribute("inert"), v.delete(e));
+	for (let e of t) v.has(e) || e.hasAttribute("inert") || (e.setAttribute("inert", ""), v.add(e));
 }
 function S() {
-	b(), m.forEach((e, t) => {
-		let n = t === m.length - 1;
+	(h.length > 0 || v.size > 0) && x();
+}
+function C() {
+	x(), h.forEach((e, t) => {
+		let n = t === h.length - 1;
 		e.root?.toggleAttribute("inert", !n), e.isTopmost !== n && (e.isTopmost = n, e.setIsTopmost(n));
 	});
 }
-function C(t, n, r) {
+function w(t, n, r) {
 	e();
-	let i = m.at(-1), a = {
+	let i = h.at(-1), a = {
 		level: Math.min((i?.level ?? -1) + 1, 80),
-		zIndex: h(i, r),
+		zIndex: g(i, r),
 		isTopmost: !0,
 		root: t,
 		setIsTopmost: n
 	};
-	return m.push(a), S(), a;
+	return h.push(a), C(), a;
 }
-function w(e) {
-	let t = m.indexOf(e);
-	t !== -1 && (e.root?.removeAttribute("inert"), m.splice(t, 1), S());
+function T(e) {
+	let t = h.indexOf(e);
+	t !== -1 && (e.root?.removeAttribute("inert"), h.splice(t, 1), C());
 }
-function T(e, t, a) {
+function E(e, t, a) {
 	let [o, s] = i(!0), c = n(() => a);
 	return r(() => {
 		if (!t) return;
-		let n = e.current, r = C(n, s, c());
-		return n?.style.setProperty(f, String(r.level)), n?.style.setProperty(p, String(r.zIndex)), () => {
-			w(r), n?.style.removeProperty(f), n?.style.removeProperty(p);
+		let n = e.current, r = w(n, s, c());
+		return n?.style.setProperty(p, String(r.level)), n?.style.setProperty(m, String(r.zIndex)), () => {
+			T(r), n?.style.removeProperty(p), n?.style.removeProperty(m);
 		};
 	}, [t, e]), o;
 }
 //#endregion
-export { c as MAX_MODAL_LEVEL, g as MODAL_LIVE_ATTRIBUTE, o as MODAL_OPEN_ATTRIBUTE, s as ModalPortalContext, C as claimModalLevel, d as configureModalZIndex, x as refreshModalBackground, w as releaseModalLevel, T as useModalLevel };
+export { c as MAX_MODAL_LEVEL, _ as MODAL_LIVE_ATTRIBUTE, o as MODAL_OPEN_ATTRIBUTE, s as ModalPortalContext, w as claimModalLevel, d as configureModalZIndex, f as modalZIndexBase, S as refreshModalBackground, T as releaseModalLevel, E as useModalLevel };
 
 //# sourceMappingURL=modalStack.js.map

package/dist/components/Modal/modalStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.js","names":[],"sources":["../../../src/components/Modal/modalStack.ts"],"sourcesContent":["/**\n * The one level stack every portalled modal surface shares.\n *\n * `Modal` renders into a `document.body` portal instead of the browser's top\n * layer (see Modal.tsx for why). Without the top layer, stacking and\n * inertness are this module's job: a surface opened from inside another\n * paints above it, only the topmost one is interactive, and while any is\n * open the page behind them is inert, except what is marked\n * `MODAL_LIVE_ATTRIBUTE`.\n *\n * Other portalled modal surfaces (a scrimmed drawer, say) claim a level with\n * `useModalLevel` so they stack on the same order as `Modal`.\n */\nimport {\n  createContext,\n  useEffectEvent,\n  useLayoutEffect,\n  useState,\n  type RefObject,\n} from \"react\";\nimport { devWarn } from \"@astryxdesign/core/utils\";\n\nimport { registerInstance } from \"../../instance\";\n\n/**\n * Marks an open modal root. Scope document queries to it through this\n * constant rather than retyping the string.\n */\nexport const MODAL_OPEN_ATTRIBUTE = \"data-uic-modal-open\";\n\n/**\n * The open modal `<dialog>` a surface inside it renders into, instead of\n * `document.body`. `showModal()` makes everything outside the dialog inert,\n * so a `Modal` portalled to the body from inside a scrimmed drawer would sit\n * behind the drawer, unreachable. `Drawer` (src/forks/Drawer) provides its\n * dialog while it is modal; `Modal` renders there and enters the top layer\n * itself, as a manual popover, so it paints above the drawer and escapes the\n * panel's clipping and transform. Internal: not exported from the package.\n */\nexport const ModalPortalContext = createContext<HTMLElement | null>(null);\n\n/** Nesting depth ceiling. Two surfaces past it share a level. */\nexport const MAX_MODAL_LEVEL = 80;\n\n/**\n * The z-index band modal roots paint in. `base` is the first level, each\n * nested level adds `step`, and nothing paints above `max`, so whatever the\n * app layers above the band (a notification stack) stays above every modal.\n */\nexport interface ModalZIndexBand {\n  base: number;\n  step: number;\n  max: number;\n}\n\nconst DEFAULT_BAND: ModalZIndexBand = { base: 1100, step: 10, max: 10999 };\nlet band: ModalZIndexBand = DEFAULT_BAND;\n\n/**\n * Sets the z-index band for every modal opened after the call. Call it once,\n * at startup, to fit the app's own layer ladder. The default is\n * `{ base: 1100, step: 10, max: 10999 }`. Pass nothing to restore it.\n */\nexport function configureModalZIndex(next?: Partial<ModalZIndexBand>): void {\n  band = { ...DEFAULT_BAND, ...next };\n}\n\nconst LEVEL_CSS_VAR = \"--modal-level\";\nconst Z_INDEX_CSS_VAR = \"--modal-z\";\n\n/** A claim on the stack. Released by reference, never by level. */\nexport interface ModalLevelEntry {\n  level: number;\n  zIndex: number;\n  isTopmost: boolean;\n  root: HTMLElement | null;\n  setIsTopmost: (isTopmost: boolean) => void;\n}\n\nconst openModals: ModalLevelEntry[] = [];\n\n/**\n * One step above the topmost surface (or the band's base), raised by an\n * accepted override. Stacking and inertness therefore run on one order: a\n * surface opened later paints above an earlier one, whatever that one asked.\n */\nfunction resolveZIndex(\n  topmost: ModalLevelEntry | undefined,\n  requested?: number,\n): number {\n  let override = requested;\n  if (override != null && (override < band.base || override > band.max)) {\n    devWarn(\n      \"Modal\",\n      `zIndex ${override} is outside the modal band (${band.base}..${band.max}); ` +\n        \"ignoring it. Change the band with configureModalZIndex instead.\",\n    );\n    override = undefined;\n  }\n  const floor = topmost?.zIndex ?? band.base - band.step;\n  return Math.min(Math.max(floor + band.step, override ?? 0), band.max);\n}\n\n/**\n * Marks an element that stays reachable while a modal is open: it, and the\n * ancestors it needs, are never made inert. `NotificationStack` sets it on\n * its root, so a notice raised over a modal can still be read and dismissed.\n * The mark is read when a modal opens or closes and on\n * `refreshModalBackground()`; call that after mounting a marked element while\n * a modal is open.\n */\nexport const MODAL_LIVE_ATTRIBUTE = \"data-uic-modal-live\";\n\n/** The background elements this module made inert, and only those. */\nconst inertedBackground = new Set<Element>();\n\nconst NEVER_INERT = new Set([\"SCRIPT\", \"STYLE\", \"LINK\", \"TEMPLATE\", \"NOSCRIPT\"]);\n\n/**\n * The elements to inert while `keep` stays reachable: every child of\n * `document.body` that holds none of them, and, inside a body child that\n * does, every sibling on the way down to them.\n */\nfunction backgroundOf(keep: Element[]): Element[] {\n  const kept = new Set(keep);\n  const onPath = new Set<Element>();\n  for (const el of keep) {\n    for (let node = el.parentElement; node && node !== document.body;) {\n      onPath.add(node);\n      node = node.parentElement;\n    }\n  }\n  const out: Element[] = [];\n  const visit = (parent: Element) => {\n    for (const child of Array.from(parent.children)) {\n      if (kept.has(child) || NEVER_INERT.has(child.tagName)) continue;\n      if (onPath.has(child)) visit(child);\n      else out.push(child);\n    }\n  };\n  visit(document.body);\n  return out;\n}\n\n/**\n * While any modal is open the rest of the page is `inert`, which is what\n * `aria-modal` promises. Modal roots (a drawer's too, when it claims a level\n * through `useModalLevel`) and elements marked `MODAL_LIVE_ATTRIBUTE` are\n * spared. An `inert` the page set itself is left alone, before and after.\n */\nfunction syncBackground(): void {\n  if (typeof document === \"undefined\" || !document.body) return;\n  const roots = openModals\n    .map((entry) => entry.root)\n    .filter((root): root is HTMLElement => root != null && root.isConnected);\n  const target = new Set(\n    openModals.length === 0\n      ? []\n      : backgroundOf([\n          ...roots,\n          ...Array.from(document.querySelectorAll(`[${MODAL_LIVE_ATTRIBUTE}]`)),\n        ]),\n  );\n  for (const el of inertedBackground) {\n    if (target.has(el)) continue;\n    el.removeAttribute(\"inert\");\n    inertedBackground.delete(el);\n  }\n  for (const el of target) {\n    if (inertedBackground.has(el) || el.hasAttribute(\"inert\")) continue;\n    el.setAttribute(\"inert\", \"\");\n    inertedBackground.add(el);\n  }\n}\n\n/**\n * Re-reads which elements are marked `MODAL_LIVE_ATTRIBUTE` (and which modal\n * roots are in the document) while a modal is open. A no-op otherwise.\n */\nexport function refreshModalBackground(): void {\n  if (openModals.length > 0 || inertedBackground.size > 0) syncBackground();\n}\n\n/**\n * Only the topmost surface stays interactive. A covered one drops its focus\n * trap and goes `inert`: the trap alone lets Tab escape to the parent, and\n * `inert` alone leaves the covered trap swallowing Tab with nothing to focus.\n */\nfunction syncCovered(): void {\n  syncBackground();\n  openModals.forEach((entry, index) => {\n    const isTopmost = index === openModals.length - 1;\n    entry.root?.toggleAttribute(\"inert\", !isTopmost);\n    if (entry.isTopmost !== isTopmost) {\n      entry.isTopmost = isTopmost;\n      entry.setIsTopmost(isTopmost);\n    }\n  });\n}\n\nexport function claimModalLevel(\n  root: HTMLElement | null,\n  setIsTopmost: (isTopmost: boolean) => void,\n  requestedZIndex?: number,\n): ModalLevelEntry {\n  registerInstance();\n  const topmost = openModals.at(-1);\n  const entry: ModalLevelEntry = {\n    level: Math.min((topmost?.level ?? -1) + 1, MAX_MODAL_LEVEL),\n    zIndex: resolveZIndex(topmost, requestedZIndex),\n    isTopmost: true,\n    root,\n    setIsTopmost,\n  };\n  openModals.push(entry);\n  syncCovered();\n  return entry;\n}\n\nexport function releaseModalLevel(entry: ModalLevelEntry): void {\n  const index = openModals.indexOf(entry);\n  if (index === -1) return;\n  entry.root?.removeAttribute(\"inert\");\n  openModals.splice(index, 1);\n  syncCovered();\n}\n\n/**\n * Claims a level for `rootRef` while `isOpen`, and writes the level and the\n * resolved z-index onto the root as `--modal-level` and `--modal-z`.\n * Returns whether this surface is the topmost one; gate a focus trap on it.\n */\nexport function useModalLevel(\n  rootRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  zIndex?: number,\n): boolean {\n  const [isTopmost, setIsTopmost] = useState(true);\n  // Read at claim time only: re-claiming would move an open surface to the\n  // top of the stack and inert whatever legitimately covered it.\n  const readZIndex = useEffectEvent(() => zIndex);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const root = rootRef.current;\n    const entry = claimModalLevel(root, setIsTopmost, readZIndex());\n    root?.style.setProperty(LEVEL_CSS_VAR, String(entry.level));\n    root?.style.setProperty(Z_INDEX_CSS_VAR, String(entry.zIndex));\n    return () => {\n      releaseModalLevel(entry);\n      root?.style.removeProperty(LEVEL_CSS_VAR);\n      root?.style.removeProperty(Z_INDEX_CSS_VAR);\n    };\n    // An effect event is not a dependency; this plugin version predates it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, rootRef]);\n\n  return isTopmost;\n}\n"],"mappings":"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"}
+{"version":3,"file":"modalStack.js","names":[],"sources":["../../../src/components/Modal/modalStack.ts"],"sourcesContent":["/**\n * The one level stack every portalled modal surface shares.\n *\n * `Modal` renders into a `document.body` portal instead of the browser's top\n * layer (see Modal.tsx for why). Without the top layer, stacking and\n * inertness are this module's job: a surface opened from inside another\n * paints above it, only the topmost one is interactive, and while any is\n * open the page behind them is inert, except what is marked\n * `MODAL_LIVE_ATTRIBUTE`.\n *\n * Other portalled modal surfaces (a scrimmed drawer, say) claim a level with\n * `useModalLevel` so they stack on the same order as `Modal`.\n */\nimport {\n  createContext,\n  useEffectEvent,\n  useLayoutEffect,\n  useState,\n  type RefObject,\n} from \"react\";\nimport { devWarn } from \"@astryxdesign/core/utils\";\n\nimport { registerInstance } from \"../../instance\";\n\n/**\n * Marks an open modal root. Scope document queries to it through this\n * constant rather than retyping the string.\n */\nexport const MODAL_OPEN_ATTRIBUTE = \"data-uic-modal-open\";\n\n/**\n * The open modal `<dialog>` a surface inside it renders into, instead of\n * `document.body`. `showModal()` makes everything outside the dialog inert,\n * so a `Modal` portalled to the body from inside a scrimmed drawer would sit\n * behind the drawer, unreachable. `Drawer` (src/forks/Drawer) provides its\n * dialog while it is modal; `Modal` renders there and enters the top layer\n * itself, as a manual popover, so it paints above the drawer and escapes the\n * panel's clipping and transform. Internal: not exported from the package.\n */\nexport const ModalPortalContext = createContext<HTMLElement | null>(null);\n\n/** Nesting depth ceiling. Two surfaces past it share a level. */\nexport const MAX_MODAL_LEVEL = 80;\n\n/**\n * The z-index band modal roots paint in. `base` is the first level, each\n * nested level adds `step`, and nothing paints above `max`, so whatever the\n * app layers above the band (a notification stack) stays above every modal.\n */\nexport interface ModalZIndexBand {\n  base: number;\n  step: number;\n  max: number;\n}\n\nconst DEFAULT_BAND: ModalZIndexBand = { base: 1100, step: 10, max: 10999 };\nlet band: ModalZIndexBand = DEFAULT_BAND;\n\n/**\n * Sets the z-index band for every modal opened after the call. Call it once,\n * at startup, to fit the app's own layer ladder. The default is\n * `{ base: 1100, step: 10, max: 10999 }`. Pass nothing to restore it.\n */\nexport function configureModalZIndex(next?: Partial<ModalZIndexBand>): void {\n  band = { ...DEFAULT_BAND, ...next };\n}\n\n/** The band's first level; a scrimless Drawer (src/forks/Drawer) stays below it. */\nexport function modalZIndexBase(): number {\n  return band.base;\n}\n\nconst LEVEL_CSS_VAR = \"--modal-level\";\nconst Z_INDEX_CSS_VAR = \"--modal-z\";\n\n/** A claim on the stack. Released by reference, never by level. */\nexport interface ModalLevelEntry {\n  level: number;\n  zIndex: number;\n  isTopmost: boolean;\n  root: HTMLElement | null;\n  setIsTopmost: (isTopmost: boolean) => void;\n}\n\nconst openModals: ModalLevelEntry[] = [];\n\n/**\n * One step above the topmost surface (or the band's base), raised by an\n * accepted override. Stacking and inertness therefore run on one order: a\n * surface opened later paints above an earlier one, whatever that one asked.\n */\nfunction resolveZIndex(\n  topmost: ModalLevelEntry | undefined,\n  requested?: number,\n): number {\n  let override = requested;\n  if (override != null && (override < band.base || override > band.max)) {\n    devWarn(\n      \"Modal\",\n      `zIndex ${override} is outside the modal band (${band.base}..${band.max}); ` +\n        \"ignoring it. Change the band with configureModalZIndex instead.\",\n    );\n    override = undefined;\n  }\n  const floor = topmost?.zIndex ?? band.base - band.step;\n  return Math.min(Math.max(floor + band.step, override ?? 0), band.max);\n}\n\n/**\n * Marks an element that stays reachable while a modal is open: it, and the\n * ancestors it needs, are never made inert. `NotificationStack` sets it on\n * its root, so a notice raised over a modal can still be read and dismissed.\n * The mark is read when a modal opens or closes and on\n * `refreshModalBackground()`; call that after mounting a marked element while\n * a modal is open.\n */\nexport const MODAL_LIVE_ATTRIBUTE = \"data-uic-modal-live\";\n\n/** The background elements this module made inert, and only those. */\nconst inertedBackground = new Set<Element>();\n\nconst NEVER_INERT = new Set([\"SCRIPT\", \"STYLE\", \"LINK\", \"TEMPLATE\", \"NOSCRIPT\"]);\n\n/**\n * The elements to inert while `keep` stays reachable: every child of\n * `document.body` that holds none of them, and, inside a body child that\n * does, every sibling on the way down to them.\n */\nfunction backgroundOf(keep: Element[]): Element[] {\n  const kept = new Set(keep);\n  const onPath = new Set<Element>();\n  for (const el of keep) {\n    for (let node = el.parentElement; node && node !== document.body;) {\n      onPath.add(node);\n      node = node.parentElement;\n    }\n  }\n  const out: Element[] = [];\n  const visit = (parent: Element) => {\n    for (const child of Array.from(parent.children)) {\n      if (kept.has(child) || NEVER_INERT.has(child.tagName)) continue;\n      if (onPath.has(child)) visit(child);\n      else out.push(child);\n    }\n  };\n  visit(document.body);\n  return out;\n}\n\n/**\n * While any modal is open the rest of the page is `inert`, which is what\n * `aria-modal` promises. Modal roots (a drawer's too, when it claims a level\n * through `useModalLevel`) and elements marked `MODAL_LIVE_ATTRIBUTE` are\n * spared. An `inert` the page set itself is left alone, before and after.\n */\nfunction syncBackground(): void {\n  if (typeof document === \"undefined\" || !document.body) return;\n  const roots = openModals\n    .map((entry) => entry.root)\n    .filter((root): root is HTMLElement => root != null && root.isConnected);\n  const target = new Set(\n    openModals.length === 0\n      ? []\n      : backgroundOf([\n          ...roots,\n          ...Array.from(document.querySelectorAll(`[${MODAL_LIVE_ATTRIBUTE}]`)),\n        ]),\n  );\n  for (const el of inertedBackground) {\n    if (target.has(el)) continue;\n    el.removeAttribute(\"inert\");\n    inertedBackground.delete(el);\n  }\n  for (const el of target) {\n    if (inertedBackground.has(el) || el.hasAttribute(\"inert\")) continue;\n    el.setAttribute(\"inert\", \"\");\n    inertedBackground.add(el);\n  }\n}\n\n/**\n * Re-reads which elements are marked `MODAL_LIVE_ATTRIBUTE` (and which modal\n * roots are in the document) while a modal is open. A no-op otherwise.\n */\nexport function refreshModalBackground(): void {\n  if (openModals.length > 0 || inertedBackground.size > 0) syncBackground();\n}\n\n/**\n * Only the topmost surface stays interactive. A covered one drops its focus\n * trap and goes `inert`: the trap alone lets Tab escape to the parent, and\n * `inert` alone leaves the covered trap swallowing Tab with nothing to focus.\n */\nfunction syncCovered(): void {\n  syncBackground();\n  openModals.forEach((entry, index) => {\n    const isTopmost = index === openModals.length - 1;\n    entry.root?.toggleAttribute(\"inert\", !isTopmost);\n    if (entry.isTopmost !== isTopmost) {\n      entry.isTopmost = isTopmost;\n      entry.setIsTopmost(isTopmost);\n    }\n  });\n}\n\nexport function claimModalLevel(\n  root: HTMLElement | null,\n  setIsTopmost: (isTopmost: boolean) => void,\n  requestedZIndex?: number,\n): ModalLevelEntry {\n  registerInstance();\n  const topmost = openModals.at(-1);\n  const entry: ModalLevelEntry = {\n    level: Math.min((topmost?.level ?? -1) + 1, MAX_MODAL_LEVEL),\n    zIndex: resolveZIndex(topmost, requestedZIndex),\n    isTopmost: true,\n    root,\n    setIsTopmost,\n  };\n  openModals.push(entry);\n  syncCovered();\n  return entry;\n}\n\nexport function releaseModalLevel(entry: ModalLevelEntry): void {\n  const index = openModals.indexOf(entry);\n  if (index === -1) return;\n  entry.root?.removeAttribute(\"inert\");\n  openModals.splice(index, 1);\n  syncCovered();\n}\n\n/**\n * Claims a level for `rootRef` while `isOpen`, and writes the level and the\n * resolved z-index onto the root as `--modal-level` and `--modal-z`.\n * Returns whether this surface is the topmost one; gate a focus trap on it.\n */\nexport function useModalLevel(\n  rootRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  zIndex?: number,\n): boolean {\n  const [isTopmost, setIsTopmost] = useState(true);\n  // Read at claim time only: re-claiming would move an open surface to the\n  // top of the stack and inert whatever legitimately covered it.\n  const readZIndex = useEffectEvent(() => zIndex);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const root = rootRef.current;\n    const entry = claimModalLevel(root, setIsTopmost, readZIndex());\n    root?.style.setProperty(LEVEL_CSS_VAR, String(entry.level));\n    root?.style.setProperty(Z_INDEX_CSS_VAR, String(entry.zIndex));\n    return () => {\n      releaseModalLevel(entry);\n      root?.style.removeProperty(LEVEL_CSS_VAR);\n      root?.style.removeProperty(Z_INDEX_CSS_VAR);\n    };\n    // An effect event is not a dependency; this plugin version predates it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, rootRef]);\n\n  return isTopmost;\n}\n"],"mappings":"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"}

package/dist/components/PagedSelector/PanelSearchInput.d.ts

@@ -6,7 +6,7 @@ export declare const PANEL_SEARCH_CLASS_NAMES: {
     readonly field: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92";
     /** Added to `field` while focus arrived by keyboard: draws the inset ring. */
     readonly fieldKeyboardFocus: "x1gnnqk1 x1btxeh5";
-    readonly input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5";
+    readonly input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib x1w61h2b x1kq96og x1a2a7pz xeyghm5";
 };
 export interface PanelSearchInputProps {
     ref?: Ref<HTMLInputElement>;

package/dist/components/PagedSelector/PanelSearchInput.js

@@ -9,7 +9,7 @@ var c = {
 	wrapper: "xu0wf1k x2hg6jq",
 	field: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92",
 	fieldKeyboardFocus: "x1gnnqk1 x1btxeh5",
-	input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
+	input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib x1w61h2b x1kq96og x1a2a7pz xeyghm5"
 }, l = e({ icon: {
 	k1xSpc: "x78zum5",
 	kGNEyG: "x6s0dn4",

package/dist/components/PagedSelector/PanelSearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSearchInput.js","names":[],"sources":["../../../src/components/PagedSelector/PanelSearchInput.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Adapted from @astryxdesign/core 0.6.2, dist/Field/PanelSearchInput.js and\n// dist/utils/interactionModality.js (MIT; see NOTICE). Neither is exported by\n// the package; Selector and MultiSelector use them for their search row.\n\n\"use client\";\n\n/**\n * The search row at the top of PagedSelector's panel: magnifier, borderless\n * input, and a clear button once a query is typed, in a rounded box shaped\n * like the option rows beneath it. Astryx's own, so the row reads exactly as\n * `Selector`'s does.\n *\n * It renders with the class names Astryx compiled for this version (their\n * rules arrive with `astryx.css`), so it needs no stylesheet and no StyleX\n * compiler. The keyboard-only focus ring is Astryx's too. The test suite\n * fails when an Astryx bump drops one of these classes.\n */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type KeyboardEventHandler,\n  type Ref,\n} from \"react\";\nimport { InputClearButton } from \"@astryxdesign/core/Field\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\n\nimport { compiledStyles } from \"../../forks/compiled\";\n\n/** Astryx's compiled classes, from dist/Field/PanelSearchInput.js and Selector's `searchRowInput`. */\nexport const PANEL_SEARCH_CLASS_NAMES = {\n  /** `styles.wrapper` with Selector's popover `searchRowInput` padding. */\n  wrapper: \"xu0wf1k x2hg6jq\",\n  field:\n    \"x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92\",\n  /** Added to `field` while focus arrived by keyboard: draws the inset ring. */\n  fieldKeyboardFocus: \"x1gnnqk1 x1btxeh5\",\n  input:\n    \"x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5\",\n} as const;\n\nconst iconStyles = compiledStyles({\n  icon: { k1xSpc: \"x78zum5\", kGNEyG: \"x6s0dn4\", kmuXW: \"x2lah0s\", $$css: true },\n});\n\n// Astryx's interaction-modality store, shared through the same document\n// symbol, so this copy and Astryx's agree on how the user last interacted.\n// `:focus-visible` matches a text input focused by pointer too, so the ring\n// is gated on the last modality being the keyboard.\ntype Modality = \"keyboard\" | \"pointer\";\ntype ModalityStore = {\n  modality: Modality;\n  isListening: boolean;\n  onPointerDown: () => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n};\nconst MODALITY_STORE_KEY = Symbol.for(\"@astryxdesign/core/interaction-modality/v1\");\n\nfunction getModalityStore(doc: Document): ModalityStore {\n  const holder = doc as unknown as Record<symbol, ModalityStore | undefined>;\n  const existing = holder[MODALITY_STORE_KEY];\n  if (existing != null) return existing;\n  const store: ModalityStore = {\n    modality: \"keyboard\",\n    isListening: false,\n    onPointerDown: () => {\n      store.modality = \"pointer\";\n    },\n    onKeyDown: (event) => {\n      if (event.metaKey || event.altKey || event.ctrlKey) return;\n      store.modality = \"keyboard\";\n    },\n  };\n  Object.defineProperty(doc, MODALITY_STORE_KEY, { value: store });\n  return store;\n}\n\nfunction trackInteractionModality(): void {\n  if (typeof document === \"undefined\") return;\n  const store = getModalityStore(document);\n  if (store.isListening) return;\n  store.isListening = true;\n  document.addEventListener(\"pointerdown\", store.onPointerDown, {\n    capture: true,\n    passive: true,\n  });\n  document.addEventListener(\"keydown\", store.onKeyDown, {\n    capture: true,\n    passive: true,\n  });\n}\n\nfunction getInteractionModality(): Modality {\n  return typeof document === \"undefined\"\n    ? \"keyboard\"\n    : getModalityStore(document).modality;\n}\n\nexport interface PanelSearchInputProps {\n  ref?: Ref<HTMLInputElement>;\n  label: string;\n  clearLabel: string;\n  placeholder?: string;\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  \"aria-controls\"?: string;\n  \"aria-activedescendant\"?: string;\n}\n\nexport function PanelSearchInput({\n  ref,\n  label,\n  clearLabel,\n  placeholder,\n  value,\n  onValueChange,\n  onKeyDown,\n  ...ariaProps\n}: PanelSearchInputProps) {\n  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  useEffect(() => trackInteractionModality(), []);\n\n  const attachInput = useCallback(\n    (node: HTMLInputElement | null) => {\n      setInput(node);\n      if (typeof ref === \"function\") ref(node);\n      else if (ref != null)\n        (ref as { current: HTMLInputElement | null }).current = node;\n    },\n    [ref],\n  );\n\n  const handleClear = useCallback(\n    (event?: React.MouseEvent) => {\n      onValueChange(\"\");\n      // Upstream: keyboard keeps focus synchronously; a tap defers it past the\n      // button's unmount so touch browsers do not jump the page.\n      if (!event || event.detail === 0) input?.focus();\n      else requestAnimationFrame(() => input?.focus({ preventScroll: true }));\n    },\n    [input, onValueChange],\n  );\n\n  return (\n    <div className={PANEL_SEARCH_CLASS_NAMES.wrapper}>\n      <div\n        data-keyboard-focus={isKeyboardFocus ? \"true\" : undefined}\n        className={\n          isKeyboardFocus\n            ? `${PANEL_SEARCH_CLASS_NAMES.field} ${PANEL_SEARCH_CLASS_NAMES.fieldKeyboardFocus}`\n            : PANEL_SEARCH_CLASS_NAMES.field\n        }\n      >\n        <Icon icon=\"search\" size=\"sm\" color=\"secondary\" xstyle={iconStyles.icon} />\n        <input\n          ref={attachInput}\n          type=\"text\"\n          aria-label={label}\n          placeholder={placeholder}\n          value={value}\n          onChange={(event) => onValueChange(event.target.value)}\n          onKeyDown={onKeyDown}\n          onFocus={() => setIsKeyboardFocus(getInteractionModality() === \"keyboard\")}\n          onBlur={() => setIsKeyboardFocus(false)}\n          className={PANEL_SEARCH_CLASS_NAMES.input}\n          role=\"combobox\"\n          aria-expanded\n          aria-autocomplete=\"list\"\n          {...ariaProps}\n        />\n        {value !== \"\" && <InputClearButton label={clearLabel} onClick={handleClear} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,IAAa,IAA2B;CAEtC,SAAS;CACT,OACE;CAEF,oBAAoB;CACpB,OACE;AACJ,GAEM,IAAa,EAAe,EAChC,MAAM;CAAE,QAAQ;CAAW,QAAQ;CAAW,OAAO;CAAW,OAAO;AAAK,EAC9E,CAAC,GAaK,IAAqB,OAAO,IAAI,4CAA4C;AAElF,SAAS,EAAiB,GAA8B;CAEtD,IAAM,IAAW,EAAO;CACxB,IAAI,KAAY,MAAM,OAAO;CAC7B,IAAM,IAAuB;EAC3B,UAAU;EACV,aAAa;EACb,qBAAqB;GACnB,EAAM,WAAW;EACnB;EACA,YAAY,MAAU;GAChB,EAAM,WAAW,EAAM,UAAU,EAAM,YAC3C,EAAM,WAAW;EACnB;CACF;CAEA,OADA,OAAO,eAAe,GAAK,GAAoB,EAAE,OAAO,EAAM,CAAC,GACxD;AACT;AAEA,SAAS,IAAiC;CACxC,IAAI,OAAO,WAAa,KAAa;CACrC,IAAM,IAAQ,EAAiB,QAAQ;CACnC,EAAM,gBACV,EAAM,cAAc,IACpB,SAAS,iBAAiB,eAAe,EAAM,eAAe;EAC5D,SAAS;EACT,SAAS;CACX,CAAC,GACD,SAAS,iBAAiB,WAAW,EAAM,WAAW;EACpD,SAAS;EACT,SAAS;CACX,CAAC;AACH;AAEA,SAAS,IAAmC;CAC1C,OAAO,OAAO,WAAa,MACvB,aACA,EAAiB,QAAQ,CAAC,CAAC;AACjC;AAcA,SAAgB,EAAiB,EAC/B,QACA,UACA,eACA,gBACA,UACA,kBACA,cACA,GAAG,KACqB;CACxB,IAAM,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,CAAC,GAAO,KAAY,EAAkC,IAAI;CAEhE,QAAgB,EAAyB,GAAG,CAAC,CAAC;CAE9C,IAAM,IAAc,GACjB,MAAkC;EAEjC,AADA,EAAS,CAAI,GACT,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,KAAO,SACd,EAA8C,UAAU;CAC5D,GACA,CAAC,CAAG,CACN,GAEM,IAAc,GACjB,MAA6B;EAI5B,AAHA,EAAc,EAAE,GAGZ,CAAC,KAAS,EAAM,WAAW,IAAG,GAAO,MAAM,IAC1C,4BAA4B,GAAO,MAAM,EAAE,eAAe,GAAK,CAAC,CAAC;CACxE,GACA,CAAC,GAAO,CAAa,CACvB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAyB;EACvC,UAAA,kBAAC,OAAD;GACE,uBAAqB,IAAkB,SAAS,KAAA;GAChD,WACE,IACI,GAAG,EAAyB,MAAM,GAAG,EAAyB,uBAC9D,EAAyB;GALjC,UAAA;IAQE,kBAAC,GAAD;KAAM,MAAK;KAAS,MAAK;KAAK,OAAM;KAAY,QAAQ,EAAW;IAAO,CAAA;IAC1E,kBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,cAAY;KACC;KACN;KACP,WAAW,MAAU,EAAc,EAAM,OAAO,KAAK;KAC1C;KACX,eAAe,EAAmB,EAAuB,MAAM,UAAU;KACzE,cAAc,EAAmB,EAAK;KACtC,WAAW,EAAyB;KACpC,MAAK;KACL,iBAAA;KACA,qBAAkB;KAClB,GAAI;IACL,CAAA;IACA,MAAU,MAAM,kBAAC,GAAD;KAAkB,OAAO;KAAY,SAAS;IAAc,CAAA;GAC1E;;CACF,CAAA;AAET"}
+{"version":3,"file":"PanelSearchInput.js","names":[],"sources":["../../../src/components/PagedSelector/PanelSearchInput.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Adapted from @astryxdesign/core 0.6.5, dist/Field/PanelSearchInput.js and\n// dist/utils/interactionModality.js (MIT; see NOTICE). Neither is exported by\n// the package; Selector and MultiSelector use them for their search row.\n\n\"use client\";\n\n/**\n * The search row at the top of PagedSelector's panel: magnifier, borderless\n * input, and a clear button once a query is typed, in a rounded box shaped\n * like the option rows beneath it. Astryx's own, so the row reads exactly as\n * `Selector`'s does.\n *\n * It renders with the class names Astryx compiled for this version (their\n * rules arrive with `astryx.css`), so it needs no stylesheet and no StyleX\n * compiler. The keyboard-only focus ring is Astryx's too. The test suite\n * fails when an Astryx bump drops one of these classes.\n */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type KeyboardEventHandler,\n  type Ref,\n} from \"react\";\nimport { InputClearButton } from \"@astryxdesign/core/Field\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\n\nimport { compiledStyles } from \"../../forks/compiled\";\n\n/** Astryx's compiled classes, from dist/Field/PanelSearchInput.js and Selector's `searchRowInput`. */\nexport const PANEL_SEARCH_CLASS_NAMES = {\n  /** `styles.wrapper` with Selector's popover `searchRowInput` padding. */\n  wrapper: \"xu0wf1k x2hg6jq\",\n  field:\n    \"x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92\",\n  /** Added to `field` while focus arrived by keyboard: draws the inset ring. */\n  fieldKeyboardFocus: \"x1gnnqk1 x1btxeh5\",\n  input:\n    \"x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib x1w61h2b x1kq96og x1a2a7pz xeyghm5\",\n} as const;\n\nconst iconStyles = compiledStyles({\n  icon: { k1xSpc: \"x78zum5\", kGNEyG: \"x6s0dn4\", kmuXW: \"x2lah0s\", $$css: true },\n});\n\n// Astryx's interaction-modality store, shared through the same document\n// symbol, so this copy and Astryx's agree on how the user last interacted.\n// `:focus-visible` matches a text input focused by pointer too, so the ring\n// is gated on the last modality being the keyboard.\ntype Modality = \"keyboard\" | \"pointer\";\ntype ModalityStore = {\n  modality: Modality;\n  isListening: boolean;\n  onPointerDown: () => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n};\nconst MODALITY_STORE_KEY = Symbol.for(\"@astryxdesign/core/interaction-modality/v1\");\n\nfunction getModalityStore(doc: Document): ModalityStore {\n  const holder = doc as unknown as Record<symbol, ModalityStore | undefined>;\n  const existing = holder[MODALITY_STORE_KEY];\n  if (existing != null) return existing;\n  const store: ModalityStore = {\n    modality: \"keyboard\",\n    isListening: false,\n    onPointerDown: () => {\n      store.modality = \"pointer\";\n    },\n    onKeyDown: (event) => {\n      if (event.metaKey || event.altKey || event.ctrlKey) return;\n      store.modality = \"keyboard\";\n    },\n  };\n  Object.defineProperty(doc, MODALITY_STORE_KEY, { value: store });\n  return store;\n}\n\nfunction trackInteractionModality(): void {\n  if (typeof document === \"undefined\") return;\n  const store = getModalityStore(document);\n  if (store.isListening) return;\n  store.isListening = true;\n  document.addEventListener(\"pointerdown\", store.onPointerDown, {\n    capture: true,\n    passive: true,\n  });\n  document.addEventListener(\"keydown\", store.onKeyDown, {\n    capture: true,\n    passive: true,\n  });\n}\n\nfunction getInteractionModality(): Modality {\n  return typeof document === \"undefined\"\n    ? \"keyboard\"\n    : getModalityStore(document).modality;\n}\n\nexport interface PanelSearchInputProps {\n  ref?: Ref<HTMLInputElement>;\n  label: string;\n  clearLabel: string;\n  placeholder?: string;\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  \"aria-controls\"?: string;\n  \"aria-activedescendant\"?: string;\n}\n\nexport function PanelSearchInput({\n  ref,\n  label,\n  clearLabel,\n  placeholder,\n  value,\n  onValueChange,\n  onKeyDown,\n  ...ariaProps\n}: PanelSearchInputProps) {\n  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  useEffect(() => trackInteractionModality(), []);\n\n  const attachInput = useCallback(\n    (node: HTMLInputElement | null) => {\n      setInput(node);\n      if (typeof ref === \"function\") ref(node);\n      else if (ref != null)\n        (ref as { current: HTMLInputElement | null }).current = node;\n    },\n    [ref],\n  );\n\n  const handleClear = useCallback(\n    (event?: React.MouseEvent) => {\n      onValueChange(\"\");\n      // Upstream: keyboard keeps focus synchronously; a tap defers it past the\n      // button's unmount so touch browsers do not jump the page.\n      if (!event || event.detail === 0) input?.focus();\n      else requestAnimationFrame(() => input?.focus({ preventScroll: true }));\n    },\n    [input, onValueChange],\n  );\n\n  return (\n    <div className={PANEL_SEARCH_CLASS_NAMES.wrapper}>\n      <div\n        data-keyboard-focus={isKeyboardFocus ? \"true\" : undefined}\n        className={\n          isKeyboardFocus\n            ? `${PANEL_SEARCH_CLASS_NAMES.field} ${PANEL_SEARCH_CLASS_NAMES.fieldKeyboardFocus}`\n            : PANEL_SEARCH_CLASS_NAMES.field\n        }\n      >\n        <Icon icon=\"search\" size=\"sm\" color=\"secondary\" xstyle={iconStyles.icon} />\n        <input\n          ref={attachInput}\n          type=\"text\"\n          aria-label={label}\n          placeholder={placeholder}\n          value={value}\n          onChange={(event) => onValueChange(event.target.value)}\n          onKeyDown={onKeyDown}\n          onFocus={() => setIsKeyboardFocus(getInteractionModality() === \"keyboard\")}\n          onBlur={() => setIsKeyboardFocus(false)}\n          className={PANEL_SEARCH_CLASS_NAMES.input}\n          role=\"combobox\"\n          aria-expanded\n          aria-autocomplete=\"list\"\n          {...ariaProps}\n        />\n        {value !== \"\" && <InputClearButton label={clearLabel} onClick={handleClear} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,IAAa,IAA2B;CAEtC,SAAS;CACT,OACE;CAEF,oBAAoB;CACpB,OACE;AACJ,GAEM,IAAa,EAAe,EAChC,MAAM;CAAE,QAAQ;CAAW,QAAQ;CAAW,OAAO;CAAW,OAAO;AAAK,EAC9E,CAAC,GAaK,IAAqB,OAAO,IAAI,4CAA4C;AAElF,SAAS,EAAiB,GAA8B;CAEtD,IAAM,IAAW,EAAO;CACxB,IAAI,KAAY,MAAM,OAAO;CAC7B,IAAM,IAAuB;EAC3B,UAAU;EACV,aAAa;EACb,qBAAqB;GACnB,EAAM,WAAW;EACnB;EACA,YAAY,MAAU;GAChB,EAAM,WAAW,EAAM,UAAU,EAAM,YAC3C,EAAM,WAAW;EACnB;CACF;CAEA,OADA,OAAO,eAAe,GAAK,GAAoB,EAAE,OAAO,EAAM,CAAC,GACxD;AACT;AAEA,SAAS,IAAiC;CACxC,IAAI,OAAO,WAAa,KAAa;CACrC,IAAM,IAAQ,EAAiB,QAAQ;CACnC,EAAM,gBACV,EAAM,cAAc,IACpB,SAAS,iBAAiB,eAAe,EAAM,eAAe;EAC5D,SAAS;EACT,SAAS;CACX,CAAC,GACD,SAAS,iBAAiB,WAAW,EAAM,WAAW;EACpD,SAAS;EACT,SAAS;CACX,CAAC;AACH;AAEA,SAAS,IAAmC;CAC1C,OAAO,OAAO,WAAa,MACvB,aACA,EAAiB,QAAQ,CAAC,CAAC;AACjC;AAcA,SAAgB,EAAiB,EAC/B,QACA,UACA,eACA,gBACA,UACA,kBACA,cACA,GAAG,KACqB;CACxB,IAAM,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,CAAC,GAAO,KAAY,EAAkC,IAAI;CAEhE,QAAgB,EAAyB,GAAG,CAAC,CAAC;CAE9C,IAAM,IAAc,GACjB,MAAkC;EAEjC,AADA,EAAS,CAAI,GACT,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,KAAO,SACd,EAA8C,UAAU;CAC5D,GACA,CAAC,CAAG,CACN,GAEM,IAAc,GACjB,MAA6B;EAI5B,AAHA,EAAc,EAAE,GAGZ,CAAC,KAAS,EAAM,WAAW,IAAG,GAAO,MAAM,IAC1C,4BAA4B,GAAO,MAAM,EAAE,eAAe,GAAK,CAAC,CAAC;CACxE,GACA,CAAC,GAAO,CAAa,CACvB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAyB;EACvC,UAAA,kBAAC,OAAD;GACE,uBAAqB,IAAkB,SAAS,KAAA;GAChD,WACE,IACI,GAAG,EAAyB,MAAM,GAAG,EAAyB,uBAC9D,EAAyB;GALjC,UAAA;IAQE,kBAAC,GAAD;KAAM,MAAK;KAAS,MAAK;KAAK,OAAM;KAAY,QAAQ,EAAW;IAAO,CAAA;IAC1E,kBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,cAAY;KACC;KACN;KACP,WAAW,MAAU,EAAc,EAAM,OAAO,KAAK;KAC1C;KACX,eAAe,EAAmB,EAAuB,MAAM,UAAU;KACzE,cAAc,EAAmB,EAAK;KACtC,WAAW,EAAyB;KACpC,MAAK;KACL,iBAAA;KACA,qBAAkB;KAClB,GAAI;IACL,CAAA;IACA,MAAU,MAAM,kBAAC,GAAD;KAAkB,OAAO;KAAY,SAAS;IAAc,CAAA;GAC1E;;CACF,CAAA;AAET"}

package/dist/forks/ComplexSelector/ComplexSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexSelector.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/core 0.6.2, src/ComplexSelector/ComplexSelector.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * ComplexSelector, ui-common's copy of Astryx's, with one upstream fix\n * applied: `hasClear` / `onClear`, a clear button between the loading spinner\n * and the chevron, as `Selector`'s `hasClear` has (facebook/astryx#6362, open).\n *\n * Everything else is upstream's, line for line. Two things differ in form\n * only: the style namespaces are Astryx's compiled output (src/forks/compiled.ts),\n * and the two internals Astryx does not export are inlined —\n * `useResolvedRequired` (read through the public `FormLayoutContext`) and\n * `interactionOverlayStyles` (compiled, like the rest).\n *\n * Delete this fork, and its exports.exclude.json entry, once Astryx ships\n * the fix (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\nimport React, {\n  use,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useOptimistic,\n  useRef,\n  useTransition,\n  type ReactNode,\n} from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core/BaseProps\";\nimport {\n  Field,\n  InputClearButton,\n  inputWrapperStyles,\n  type FieldStatusVariant,\n} from \"@astryxdesign/core/Field\";\nimport { FormLayoutContext } from \"@astryxdesign/core/FormLayout\";\nimport { Icon, renderIconSlot, type IconType } from \"@astryxdesign/core/Icon\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { useTranslator } from \"@astryxdesign/core/i18n\";\nimport {\n  layerAnimations,\n  type LayerAlignment,\n  type LayerPlacement,\n} from \"@astryxdesign/core/Layer\";\nimport { usePopover } from \"@astryxdesign/core/Popover\";\nimport { spacingVars } from \"@astryxdesign/core/theme/tokens.stylex\";\nimport {\n  composeEventHandlers,\n  focusOutlineStyles,\n  isRenderable,\n  mergeProps,\n  themeProps,\n  type SizeValue,\n} from \"@astryxdesign/core/utils\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./ComplexSelector.styles\";\n\n// dist/ComplexSelector/ComplexSelector.js `styles`, and\n// dist/utils/interactionOverlay.stylex.js, which core does not export.\nconst styles = compiledStyles(compiled.styles);\nconst interactionOverlayStyles = compiledStyles(compiled.interactionOverlayStyles);\n\n// @astryxdesign/core 0.6.2 src/hooks/useResolvedRequired.ts, which core does\n// not export: a field under `FormLayout defaultOptionality=\"required\"` is\n// required unless it opts out.\nfunction useResolvedRequired({\n  isRequired = false,\n  isOptional = false,\n}: {\n  isRequired?: boolean;\n  isOptional?: boolean;\n}): boolean {\n  const { defaultOptionality } = use(FormLayoutContext);\n  return !isOptional && (isRequired || defaultOptionality === \"required\");\n}\n\nexport type ComplexSelectorVariant = \"input\" | \"ghost\";\n\nexport type ComplexSelectorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ComplexSelectorRenderState {\n  /** Whether the selector surface is open. */\n  isOpen: boolean;\n  /** Whether changeAction/isLoading is pending. */\n  isBusy: boolean;\n  /** ID of the trigger button. */\n  triggerId: string;\n  /** ID of the popup content container. */\n  contentId: string;\n}\n\n/**\n * Imperative control surface for ComplexSelector, accessed via the `handleRef`\n * prop. Methods drive the same popover machinery as the built-in trigger, so\n * they respect focus restoration, light dismiss, and Escape. Prefer these\n * callbacks over mirroring open state in the parent — the selector owns its\n * visibility, and imperative calls avoid the focus-management pitfalls of\n * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every\n * open and close, including the ones the selector performs itself.\n */\nexport interface ComplexSelectorHandle {\n  /** Open the selector surface. No-op when disabled or already open. */\n  open(): void;\n  /** Close the selector surface. Restores focus to the trigger. */\n  close(): void;\n  /** Toggle the selector surface open or closed. */\n  toggle(): void;\n  /** Whether the selector surface is currently open. Reads live state. */\n  isOpen(): boolean;\n}\n\nexport interface ComplexSelectorStatus {\n  type: \"warning\" | \"error\" | \"success\";\n  message?: string;\n}\n\nexport interface ComplexSelectorProps<Value> extends Omit<\n  BaseProps<HTMLDivElement>,\n  \"children\" | \"onChange\"\n> {\n  /** Label text for accessibility and the field label. */\n  label: string;\n  /** Current controlled value. */\n  value: Value;\n  /** Called when custom content commits a new value. */\n  onChange?: (value: Value) => void;\n  /** Optional async action after onChange; drives optimistic UI. */\n  changeAction?: (value: Value) => void | Promise<void>;\n  /** Custom selector surface content rendered inside a dialog popover. */\n  children: (\n    value: Value,\n    onChange: (value: Value) => void,\n    close: () => void,\n    state: ComplexSelectorRenderState,\n  ) => ReactNode;\n  /** Label/content shown in the closed trigger. */\n  triggerLabel?: ReactNode;\n  /** Placeholder shown when triggerLabel is omitted. */\n  placeholder?: ReactNode;\n  /** Whether to visually hide the field label. */\n  isLabelHidden?: boolean;\n  /** Helper text displayed below the label. */\n  description?: string;\n  /** Marks the field optional. */\n  isOptional?: boolean;\n  /** Marks the field required. */\n  isRequired?: boolean;\n  /** Disables the selector. */\n  isDisabled?: boolean;\n  /** Shows loading state on the trigger. */\n  isLoading?: boolean;\n  /**\n   * Shows a clear button between the loading spinner and the chevron while\n   * `triggerLabel` is set, as `Selector`'s `hasClear` does. Activating it\n   * calls `onClear`, or `onChange(undefined)` when `onClear` is not given.\n   */\n  hasClear?: boolean;\n  /** Called when the clear button is activated. */\n  onClear?: () => void;\n  /** Validation status. */\n  status?: ComplexSelectorStatus;\n  /** Status placement. */\n  statusVariant?: FieldStatusVariant;\n  /** Tooltip text displayed next to the label. */\n  labelTooltip?: string;\n  /** Trigger and field size. */\n  size?: ComplexSelectorSize;\n  /** Visual trigger style. Ghost matches toolbar buttons. */\n  variant?: ComplexSelectorVariant;\n  /** Icon displayed at the start of the trigger. */\n  startIcon?: ReactNode | IconType;\n  /** Width of the field. */\n  width?: SizeValue;\n  /** Popup placement. */\n  placement?: LayerPlacement;\n  /** Popup alignment along the placement axis. */\n  alignment?: LayerAlignment;\n  /**\n   * Imperative handle for programmatic open/close control. Exposes open,\n   * close, toggle, and the isOpen query. Use this instead of mirroring open\n   * state in the parent — the selector owns its visibility.\n   */\n  handleRef?: React.Ref<ComplexSelectorHandle>;\n  /**\n   * Called whenever the selector surface opens or closes, however it happened\n   * — the trigger, the keyboard, a light dismiss, Escape, content that calls\n   * `close()`, or the imperative handle. Pair it with `handleRef` to drive the\n   * surface from outside without mirroring its state.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** StyleX styles for the popup content container. */\n  contentXstyle?: StyleXStyles;\n  /** Test ID for the trigger container. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A selector shell for rich, custom selection surfaces.\n *\n * ComplexSelector owns the field, trigger, popover, focus restore, and async\n * change action flow. Consumers provide the dialog content as a render function,\n * using the supplied `value`, `onChange`, and `close` helpers to compose the\n * right accessible structure for the custom selector.\n *\n * @example\n * ```\n * <ComplexSelector\n *   label=\"Fruit\"\n *   value={value}\n *   onChange={setValue}\n *   triggerLabel={`${value.fruit} ${value.ripeness}`}>\n *   {(value, onChange, close) => (\n *     <FruitGrid\n *       value={value}\n *       onChange={nextValue => {\n *         onChange(nextValue);\n *         close();\n *       }}\n *     />\n *   )}\n * </ComplexSelector>\n * ```\n */\nexport function ComplexSelector<Value>({\n  label,\n  value,\n  onChange,\n  changeAction,\n  children,\n  triggerLabel,\n  placeholder: placeholderFromProps,\n  isLabelHidden = false,\n  description,\n  isOptional = false,\n  isRequired = false,\n  isDisabled = false,\n  isLoading = false,\n  hasClear = false,\n  onClear,\n  status,\n  statusVariant = \"attached\",\n  labelTooltip,\n  size = \"md\",\n  variant = \"input\",\n  startIcon,\n  width,\n  placement = \"below\",\n  alignment = \"start\",\n  handleRef,\n  onOpenChange,\n  contentXstyle,\n  xstyle,\n  className,\n  style,\n  \"data-testid\": testId,\n  onClick: onClickProp,\n  ...props\n}: ComplexSelectorProps<Value>) {\n  const t = useTranslator();\n  const isEffectivelyRequired = useResolvedRequired({ isRequired, isOptional });\n  const placeholder = placeholderFromProps ?? t(\"@astryx.selector.placeholder\");\n  const effectiveStatusVariant =\n    variant === \"ghost\" && statusVariant === \"attached\" ? \"detached\" : statusVariant;\n\n  const triggerId = useId();\n  const labelId = useId();\n  const contentId = useId();\n  const descriptionId = useId();\n  const statusMessageId = useId();\n  const ariaDescribedBy =\n    [description ? descriptionId : null, status?.message ? statusMessageId : null]\n      .filter((id): id is string => id != null)\n      .join(\" \") || undefined;\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const [isPending, startTransition] = useTransition();\n  const [optimisticValue, setOptimisticValue] = useOptimistic(value);\n  const isBusy = isLoading || isPending;\n\n  const handlePopoverShow = useCallback(() => {\n    onOpenChange?.(true);\n  }, [onOpenChange]);\n\n  const handlePopoverHide = useCallback(() => {\n    // Focus is restored first so a consumer that moves focus elsewhere from\n    // the callback wins, instead of being overwritten a line later.\n    triggerRef.current?.focus();\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const popover = usePopover({\n    dialogLabel: label,\n    hasCloseButton: false,\n    hasAutoFocus: true,\n    surfaceTarget: \"complex-selector-popup\",\n    onShow: handlePopoverShow,\n    onHide: handlePopoverHide,\n  });\n\n  const isOpen = popover.isOpen;\n\n  const handleTriggerClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    if (popover.isOpen) {\n      popover.hide();\n    } else {\n      popover.show();\n    }\n  }, [isDisabled, popover]);\n\n  const close = useCallback(() => {\n    popover.hide();\n  }, [popover]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      open: () => {\n        if (!isDisabled) {\n          popover.show();\n        }\n      },\n      close: () => popover.hide(),\n      toggle: () => {\n        if (isDisabled) {\n          return;\n        }\n        if (popover.isOpen) {\n          popover.hide();\n        } else {\n          popover.show();\n        }\n      },\n      isOpen: () => popover.isOpen,\n    }),\n    [isDisabled, popover],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: Value) => {\n      onChange?.(nextValue);\n      if (changeAction) {\n        startTransition(async () => {\n          setOptimisticValue(nextValue);\n          await changeAction(nextValue);\n        });\n      }\n    },\n    [changeAction, onChange, setOptimisticValue, startTransition],\n  );\n\n  const triggerContent = triggerLabel ?? placeholder;\n\n  const startIconSlot = renderIconSlot(startIcon, {\n    size: \"sm\",\n    color: \"secondary\",\n  });\n\n  const content = (\n    <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>\n      {children(optimisticValue, commitValue, close, {\n        isOpen,\n        isBusy,\n        triggerId,\n        contentId,\n      })}\n    </div>\n  );\n\n  const selectorContent = (\n    <>\n      <div\n        ref={popover.triggerRef}\n        data-testid={testId}\n        {...props}\n        onClick={composeEventHandlers(onClickProp, handleTriggerClick)}\n        {...mergeProps(\n          themeProps(\"complex-selector\", {\n            variant,\n            size,\n            status: status?.type ?? null,\n          }),\n          stylex.props(\n            inputWrapperStyles.base,\n            styles.triggerContainer,\n            styles[size],\n            // The ring belongs to the wrapper (the focusable `<button>` sits\n            // inside it), but it must still be a KEYBOARD ring: `:focus-within`\n            // matched a mouse click on the trigger and drew the outline for\n            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.\n            focusOutlineStyles.focusWithin,\n            variant === \"ghost\" && styles.triggerGhost,\n            variant === \"ghost\" && interactionOverlayStyles.backgroundImage,\n            isDisabled && inputWrapperStyles.disabled,\n            variant === \"ghost\" && isDisabled && styles.triggerGhostDisabled,\n            isDisabled && styles.disabled,\n            triggerLabel == null && styles.placeholder,\n            xstyle,\n          ),\n          className,\n          style,\n        )}\n      >\n        {isRenderable(startIconSlot) && startIconSlot}\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          aria-describedby={ariaDescribedBy}\n          aria-labelledby={labelId}\n          aria-required={isEffectivelyRequired ? \"true\" : undefined}\n          aria-invalid={status?.type === \"error\" ? \"true\" : undefined}\n          aria-busy={isBusy || undefined}\n          disabled={isDisabled}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowDown\" && !isOpen && !isDisabled) {\n              event.preventDefault();\n              popover.show();\n            }\n          }}\n          {...stylex.props(styles.trigger)}\n        >\n          <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>\n        </button>\n        {isBusy && <Spinner size=\"sm\" />}\n        {/* ui-common: the clear button (facebook/astryx#6362). */}\n        {hasClear && triggerLabel != null && !isDisabled && (\n          <InputClearButton\n            label={t(\"@astryx.selector.clearLabel\", { label })}\n            // The container's own click opens the popover; a clear must not.\n            onClick={(event) => {\n              event.stopPropagation();\n              if (onClear) {\n                onClear();\n              } else {\n                // Clearing hands back \"no value\", which `Value` may not name.\n                onChange?.(undefined as Value);\n              }\n            }}\n          />\n        )}\n        <Icon\n          icon=\"chevronDown\"\n          size=\"sm\"\n          color=\"secondary\"\n          // No wrapper: Icon's own span already provides the 16px box (`sm`)\n          // and the secondary icon color the wrapper used to set, so the glyph\n          // IS the trigger's icon element — one node carrying the box, the\n          // color, the rotation, and the theme target.\n          xstyle={[\n            styles.triggerIcon,\n            styles.triggerIconRotation,\n            isOpen && styles.triggerIconOpen,\n          ]}\n          {...themeProps(\"complex-selector-indicator-icon\", {\n            state: isOpen ? \"expanded\" : \"collapsed\",\n          })}\n        />\n      </div>\n\n      {popover.render(content, {\n        placement,\n        alignment,\n        offset: spacingVars[\"--spacing-1\"],\n        xstyle: [styles.popover, layerAnimations[placement]],\n      })}\n    </>\n  );\n\n  return (\n    <Field\n      label={label}\n      isLabelHidden={isLabelHidden}\n      description={description}\n      inputID={triggerId}\n      descriptionID={description ? descriptionId : undefined}\n      labelID={labelId}\n      isOptional={isOptional}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      status={\n        status\n          ? {\n              type: status.type,\n              message: status.message,\n              messageID: status.message ? statusMessageId : undefined,\n            }\n          : undefined\n      }\n      statusVariant={effectiveStatusVariant}\n      labelTooltip={labelTooltip}\n      width={width}\n    >\n      {selectorContent}\n    </Field>\n  );\n}\n\nComplexSelector.displayName = \"ComplexSelector\";\n"],"mappings":"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"}
+{"version":3,"file":"ComplexSelector.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/core 0.6.5, src/ComplexSelector/ComplexSelector.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * ComplexSelector, ui-common's copy of Astryx's, with one upstream fix\n * applied: `hasClear` / `onClear`, a clear button between the loading spinner\n * and the chevron, as `Selector`'s `hasClear` has (facebook/astryx#6362, open).\n *\n * Everything else is upstream's, line for line. Two things differ in form\n * only: the style namespaces are Astryx's compiled output (src/forks/compiled.ts),\n * and the two internals Astryx does not export are inlined —\n * `useResolvedRequired` (read through the public `FormLayoutContext`) and\n * `interactionOverlayStyles` (compiled, like the rest).\n *\n * Delete this fork, and its exports.exclude.json entry, once Astryx ships\n * the fix (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\nimport React, {\n  use,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useOptimistic,\n  useRef,\n  useTransition,\n  type ReactNode,\n} from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core/BaseProps\";\nimport {\n  Field,\n  InputClearButton,\n  inputWrapperStyles,\n  type FieldStatusVariant,\n} from \"@astryxdesign/core/Field\";\nimport { FormLayoutContext } from \"@astryxdesign/core/FormLayout\";\nimport { Icon, renderIconSlot, type IconType } from \"@astryxdesign/core/Icon\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { useTranslator } from \"@astryxdesign/core/i18n\";\nimport {\n  layerAnimations,\n  type LayerAlignment,\n  type LayerPlacement,\n} from \"@astryxdesign/core/Layer\";\nimport { usePopover } from \"@astryxdesign/core/Popover\";\nimport { spacingVars } from \"@astryxdesign/core/theme/tokens.stylex\";\nimport {\n  composeEventHandlers,\n  focusOutlineStyles,\n  isRenderable,\n  mergeProps,\n  themeProps,\n  type SizeValue,\n} from \"@astryxdesign/core/utils\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./ComplexSelector.styles\";\n\n// dist/ComplexSelector/ComplexSelector.js `styles`, and\n// dist/utils/interactionOverlay.stylex.js, which core does not export.\nconst styles = compiledStyles(compiled.styles);\nconst interactionOverlayStyles = compiledStyles(compiled.interactionOverlayStyles);\n\n// @astryxdesign/core 0.6.5 src/hooks/useResolvedRequired.ts, which core does\n// not export: a field under `FormLayout defaultOptionality=\"required\"` is\n// required unless it opts out.\nfunction useResolvedRequired({\n  isRequired = false,\n  isOptional = false,\n}: {\n  isRequired?: boolean;\n  isOptional?: boolean;\n}): boolean {\n  const { defaultOptionality } = use(FormLayoutContext);\n  return !isOptional && (isRequired || defaultOptionality === \"required\");\n}\n\nexport type ComplexSelectorVariant = \"input\" | \"ghost\";\n\nexport type ComplexSelectorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ComplexSelectorRenderState {\n  /** Whether the selector surface is open. */\n  isOpen: boolean;\n  /** Whether changeAction/isLoading is pending. */\n  isBusy: boolean;\n  /** ID of the trigger button. */\n  triggerId: string;\n  /** ID of the popup content container. */\n  contentId: string;\n}\n\n/**\n * Imperative control surface for ComplexSelector, accessed via the `handleRef`\n * prop. Methods drive the same popover machinery as the built-in trigger, so\n * they respect focus restoration, light dismiss, and Escape. Prefer these\n * callbacks over mirroring open state in the parent — the selector owns its\n * visibility, and imperative calls avoid the focus-management pitfalls of\n * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every\n * open and close, including the ones the selector performs itself.\n */\nexport interface ComplexSelectorHandle {\n  /** Open the selector surface. No-op when disabled or already open. */\n  open(): void;\n  /** Close the selector surface. Restores focus to the trigger. */\n  close(): void;\n  /** Toggle the selector surface open or closed. */\n  toggle(): void;\n  /** Whether the selector surface is currently open. Reads live state. */\n  isOpen(): boolean;\n}\n\nexport interface ComplexSelectorStatus {\n  type: \"warning\" | \"error\" | \"success\";\n  message?: string;\n}\n\nexport interface ComplexSelectorProps<Value> extends Omit<\n  BaseProps<HTMLDivElement>,\n  \"children\" | \"onChange\"\n> {\n  /** Label text for accessibility and the field label. */\n  label: string;\n  /** Current controlled value. */\n  value: Value;\n  /** Called when custom content commits a new value. */\n  onChange?: (value: Value) => void;\n  /** Optional async action after onChange; drives optimistic UI. */\n  changeAction?: (value: Value) => void | Promise<void>;\n  /** Custom selector surface content rendered inside a dialog popover. */\n  children: (\n    value: Value,\n    onChange: (value: Value) => void,\n    close: () => void,\n    state: ComplexSelectorRenderState,\n  ) => ReactNode;\n  /** Label/content shown in the closed trigger. */\n  triggerLabel?: ReactNode;\n  /** Placeholder shown when triggerLabel is omitted. */\n  placeholder?: ReactNode;\n  /** Whether to visually hide the field label. */\n  isLabelHidden?: boolean;\n  /** Helper text displayed below the label. */\n  description?: string;\n  /** Marks the field optional. */\n  isOptional?: boolean;\n  /** Marks the field required. */\n  isRequired?: boolean;\n  /** Disables the selector. */\n  isDisabled?: boolean;\n  /** Shows loading state on the trigger. */\n  isLoading?: boolean;\n  /**\n   * Shows a clear button between the loading spinner and the chevron while\n   * `triggerLabel` is set, as `Selector`'s `hasClear` does. Activating it\n   * calls `onClear`, or `onChange(undefined)` when `onClear` is not given.\n   */\n  hasClear?: boolean;\n  /** Called when the clear button is activated. */\n  onClear?: () => void;\n  /** Validation status. */\n  status?: ComplexSelectorStatus;\n  /** Status placement. */\n  statusVariant?: FieldStatusVariant;\n  /** Tooltip text displayed next to the label. */\n  labelTooltip?: string;\n  /** Trigger and field size. */\n  size?: ComplexSelectorSize;\n  /** Visual trigger style. Ghost matches toolbar buttons. */\n  variant?: ComplexSelectorVariant;\n  /** Icon displayed at the start of the trigger. */\n  startIcon?: ReactNode | IconType;\n  /** Width of the field. */\n  width?: SizeValue;\n  /** Popup placement. */\n  placement?: LayerPlacement;\n  /** Popup alignment along the placement axis. */\n  alignment?: LayerAlignment;\n  /**\n   * Imperative handle for programmatic open/close control. Exposes open,\n   * close, toggle, and the isOpen query. Use this instead of mirroring open\n   * state in the parent — the selector owns its visibility.\n   */\n  handleRef?: React.Ref<ComplexSelectorHandle>;\n  /**\n   * Called whenever the selector surface opens or closes, however it happened\n   * — the trigger, the keyboard, a light dismiss, Escape, content that calls\n   * `close()`, or the imperative handle. Pair it with `handleRef` to drive the\n   * surface from outside without mirroring its state.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** StyleX styles for the popup content container. */\n  contentXstyle?: StyleXStyles;\n  /** Test ID for the trigger container. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A selector shell for rich, custom selection surfaces.\n *\n * ComplexSelector owns the field, trigger, popover, focus restore, and async\n * change action flow. Consumers provide the dialog content as a render function,\n * using the supplied `value`, `onChange`, and `close` helpers to compose the\n * right accessible structure for the custom selector.\n *\n * @example\n * ```\n * <ComplexSelector\n *   label=\"Fruit\"\n *   value={value}\n *   onChange={setValue}\n *   triggerLabel={`${value.fruit} ${value.ripeness}`}>\n *   {(value, onChange, close) => (\n *     <FruitGrid\n *       value={value}\n *       onChange={nextValue => {\n *         onChange(nextValue);\n *         close();\n *       }}\n *     />\n *   )}\n * </ComplexSelector>\n * ```\n */\nexport function ComplexSelector<Value>({\n  label,\n  value,\n  onChange,\n  changeAction,\n  children,\n  triggerLabel,\n  placeholder: placeholderFromProps,\n  isLabelHidden = false,\n  description,\n  isOptional = false,\n  isRequired = false,\n  isDisabled = false,\n  isLoading = false,\n  hasClear = false,\n  onClear,\n  status,\n  statusVariant = \"attached\",\n  labelTooltip,\n  size = \"md\",\n  variant = \"input\",\n  startIcon,\n  width,\n  placement = \"below\",\n  alignment = \"start\",\n  handleRef,\n  onOpenChange,\n  contentXstyle,\n  xstyle,\n  className,\n  style,\n  \"data-testid\": testId,\n  onClick: onClickProp,\n  ...props\n}: ComplexSelectorProps<Value>) {\n  const t = useTranslator();\n  const isEffectivelyRequired = useResolvedRequired({ isRequired, isOptional });\n  const placeholder = placeholderFromProps ?? t(\"@astryx.selector.placeholder\");\n  const effectiveStatusVariant =\n    variant === \"ghost\" && statusVariant === \"attached\" ? \"detached\" : statusVariant;\n\n  const triggerId = useId();\n  const labelId = useId();\n  const contentId = useId();\n  const descriptionId = useId();\n  const statusMessageId = useId();\n  const ariaDescribedBy =\n    [description ? descriptionId : null, status?.message ? statusMessageId : null]\n      .filter((id): id is string => id != null)\n      .join(\" \") || undefined;\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const [isPending, startTransition] = useTransition();\n  const [optimisticValue, setOptimisticValue] = useOptimistic(value);\n  const isBusy = isLoading || isPending;\n\n  const handlePopoverShow = useCallback(() => {\n    onOpenChange?.(true);\n  }, [onOpenChange]);\n\n  const handlePopoverHide = useCallback(() => {\n    // Focus is restored first so a consumer that moves focus elsewhere from\n    // the callback wins, instead of being overwritten a line later.\n    triggerRef.current?.focus();\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const popover = usePopover({\n    dialogLabel: label,\n    hasCloseButton: false,\n    hasAutoFocus: true,\n    surfaceTarget: \"complex-selector-popup\",\n    onShow: handlePopoverShow,\n    onHide: handlePopoverHide,\n  });\n\n  const isOpen = popover.isOpen;\n\n  const handleTriggerClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    if (popover.isOpen) {\n      popover.hide();\n    } else {\n      popover.show();\n    }\n  }, [isDisabled, popover]);\n\n  const close = useCallback(() => {\n    popover.hide();\n  }, [popover]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      open: () => {\n        if (!isDisabled) {\n          popover.show();\n        }\n      },\n      close: () => popover.hide(),\n      toggle: () => {\n        if (isDisabled) {\n          return;\n        }\n        if (popover.isOpen) {\n          popover.hide();\n        } else {\n          popover.show();\n        }\n      },\n      isOpen: () => popover.isOpen,\n    }),\n    [isDisabled, popover],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: Value) => {\n      onChange?.(nextValue);\n      if (changeAction) {\n        startTransition(async () => {\n          setOptimisticValue(nextValue);\n          await changeAction(nextValue);\n        });\n      }\n    },\n    [changeAction, onChange, setOptimisticValue, startTransition],\n  );\n\n  const triggerContent = triggerLabel ?? placeholder;\n\n  const startIconSlot = renderIconSlot(startIcon, {\n    size: \"sm\",\n    color: \"secondary\",\n  });\n\n  const content = (\n    <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>\n      {children(optimisticValue, commitValue, close, {\n        isOpen,\n        isBusy,\n        triggerId,\n        contentId,\n      })}\n    </div>\n  );\n\n  const selectorContent = (\n    <>\n      <div\n        ref={popover.triggerRef}\n        data-testid={testId}\n        {...props}\n        onClick={composeEventHandlers(onClickProp, handleTriggerClick)}\n        {...mergeProps(\n          themeProps(\"complex-selector\", {\n            variant,\n            size,\n            status: status?.type ?? null,\n          }),\n          stylex.props(\n            inputWrapperStyles.base,\n            styles.triggerContainer,\n            styles[size],\n            // The ring belongs to the wrapper (the focusable `<button>` sits\n            // inside it), but it must still be a KEYBOARD ring: `:focus-within`\n            // matched a mouse click on the trigger and drew the outline for\n            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.\n            focusOutlineStyles.focusWithin,\n            variant === \"ghost\" && styles.triggerGhost,\n            variant === \"ghost\" && interactionOverlayStyles.backgroundImage,\n            isDisabled && inputWrapperStyles.disabled,\n            variant === \"ghost\" && isDisabled && styles.triggerGhostDisabled,\n            isDisabled && styles.disabled,\n            triggerLabel == null && styles.placeholder,\n            xstyle,\n          ),\n          className,\n          style,\n        )}\n      >\n        {isRenderable(startIconSlot) && startIconSlot}\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          aria-describedby={ariaDescribedBy}\n          aria-labelledby={labelId}\n          aria-required={isEffectivelyRequired ? \"true\" : undefined}\n          aria-invalid={status?.type === \"error\" ? \"true\" : undefined}\n          aria-busy={isBusy || undefined}\n          disabled={isDisabled}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowDown\" && !isOpen && !isDisabled) {\n              event.preventDefault();\n              popover.show();\n            }\n          }}\n          {...stylex.props(styles.trigger)}\n        >\n          <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>\n        </button>\n        {isBusy && <Spinner size=\"sm\" />}\n        {/* ui-common: the clear button (facebook/astryx#6362). */}\n        {hasClear && triggerLabel != null && !isDisabled && (\n          <InputClearButton\n            label={t(\"@astryx.selector.clearLabel\", { label })}\n            // The container's own click opens the popover; a clear must not.\n            onClick={(event) => {\n              event.stopPropagation();\n              if (onClear) {\n                onClear();\n              } else {\n                // Clearing hands back \"no value\", which `Value` may not name.\n                onChange?.(undefined as Value);\n              }\n            }}\n          />\n        )}\n        <Icon\n          icon=\"chevronDown\"\n          size=\"sm\"\n          color=\"secondary\"\n          // No wrapper: Icon's own span already provides the 16px box (`sm`)\n          // and the secondary icon color the wrapper used to set, so the glyph\n          // IS the trigger's icon element — one node carrying the box, the\n          // color, the rotation, and the theme target.\n          xstyle={[\n            styles.triggerIcon,\n            styles.triggerIconRotation,\n            isOpen && styles.triggerIconOpen,\n          ]}\n          {...themeProps(\"complex-selector-indicator-icon\", {\n            state: isOpen ? \"expanded\" : \"collapsed\",\n          })}\n        />\n      </div>\n\n      {popover.render(content, {\n        placement,\n        alignment,\n        offset: spacingVars[\"--spacing-1\"],\n        xstyle: [styles.popover, layerAnimations[placement]],\n      })}\n    </>\n  );\n\n  return (\n    <Field\n      label={label}\n      isLabelHidden={isLabelHidden}\n      description={description}\n      inputID={triggerId}\n      descriptionID={description ? descriptionId : undefined}\n      labelID={labelId}\n      isOptional={isOptional}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      status={\n        status\n          ? {\n              type: status.type,\n              message: status.message,\n              messageID: status.message ? statusMessageId : undefined,\n            }\n          : undefined\n      }\n      statusVariant={effectiveStatusVariant}\n      labelTooltip={labelTooltip}\n      width={width}\n    >\n      {selectorContent}\n    </Field>\n  );\n}\n\nComplexSelector.displayName = \"ComplexSelector\";\n"],"mappings":"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"}

package/dist/forks/ComplexSelector/ComplexSelector.styles.d.ts

@@ -122,4 +122,8 @@ export declare const interactionOverlayStyles: {
         kKwaWg: string;
         $$css: boolean;
     };
+    pressedBackgroundColor: {
+        kWkggS: string;
+        $$css: boolean;
+    };
 };

package/dist/forks/ComplexSelector/ComplexSelector.styles.js

@@ -10,7 +10,7 @@ var e = {
 		k8WAf4: "xce4md1",
 		kg3NbH: "xrrkdod",
 		kMv6JI: "x9ynric",
-		kGuDYH: "xcr08ib xdk3u5w",
+		kGuDYH: "xcr08ib x1w61h2b",
 		kLWn49: "x1kq96og",
 		kMwMTN: "x1tgivj0",
 		kkrTdU: "x1ypdohk x16khyan",
@@ -121,6 +121,10 @@ var e = {
 	backgroundImageOnNeutral: {
 		kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e",
 		$$css: !0
+	},
+	pressedBackgroundColor: {
+		kWkggS: "x1anq1lc",
+		$$css: !0
 	}
 };
 //#endregion

package/dist/forks/ComplexSelector/ComplexSelector.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexSelector.styles.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/core 0.6.2, reused by the\n// ComplexSelector fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/ComplexSelector/ComplexSelector.js\nexport const styles = {\n  triggerContainer: {\n    kVAEAm: \"x1n2onr6\",\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"xce4md1\",\n    kg3NbH: \"xrrkdod\",\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xcr08ib xdk3u5w\",\n    kLWn49: \"x1kq96og\",\n    kMwMTN: \"x1tgivj0\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    $$css: true,\n  },\n  trigger: {\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kCS8Yb: \"x1r8uery\",\n    k7Eaqz: \"xeuugli\",\n    kmVPX3: \"x1717udv\",\n    kogj98: \"x1ghz6dp\",\n    kMzoRj: \"xc342km\",\n    ksu8eU: \"xng3xce\",\n    kWkggS: \"xjbqb8w\",\n    kMv6JI: \"xjb2p0i\",\n    kGuDYH: \"x1qlqyl8\",\n    kLWn49: \"x15bjb6t\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    kI3sdo: \"x1a2a7pz\",\n    kaIpWk: \"xh6dtrn\",\n    $$css: true,\n  },\n  triggerText: {\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true,\n  },\n  placeholder: {\n    kMwMTN: \"xv1l7n4\",\n    $$css: true,\n  },\n  triggerGhost: {\n    kzqmXN: \"x14atkfc\",\n    kMzoRj: \"xc342km\",\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1 x1s17dad x15ysqaf\",\n    k63SB2: \"x1e4wzip\",\n    k1ekBW: \"xrafxwg\",\n    k3aq6I: \"x3oybdh xk4oym4\",\n    $$css: true,\n  },\n  triggerGhostDisabled: {\n    kKwaWg: \"x18o3ruo\",\n    k3aq6I: \"x1c071of x1pdlv7q\",\n    $$css: true,\n  },\n  triggerIcon: {\n    kmuXW: \"x2lah0s\",\n    $$css: true,\n  },\n  triggerIconRotation: {\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"xuedmi6\",\n    kAMwcw: \"xlr8y92\",\n    k3nNDw: \"x1g0ag68\",\n    $$css: true,\n  },\n  triggerIconOpen: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true,\n  },\n  popover: {\n    k7Eaqz: \"xrzjruh\",\n    $$css: true,\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    kskxy: \"xpnbb6b\",\n    kVQacm: \"xysyzu8\",\n    kmVPX3: \"x1b2ylru\",\n    $$css: true,\n  },\n  sm: {\n    kZKoxP: \"x6k0iem\",\n    $$css: true,\n  },\n  md: {\n    kZKoxP: \"x1ueg155\",\n    $$css: true,\n  },\n  lg: {\n    kZKoxP: \"xssyfek\",\n    $$css: true,\n  },\n  disabled: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true,\n  },\n};\n\n// dist/utils/interactionOverlay.stylex.js\nexport const interactionOverlayStyles = {\n  backgroundColor: {\n    kWkggS: \"xjbqb8w x1anq1lc xoevpu5 xprvw0a\",\n    $$css: true,\n  },\n  backgroundImage: {\n    kKwaWg: \"x7uyq82 xmvprkv xetgvay\",\n    $$css: true,\n  },\n  backgroundImageOnNeutral: {\n    kKwaWg: \"x14bno8m xzmimnh x1otsd3y xo3fi6e\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,OAAO;EACP,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGa,IAA2B;CACtC,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"ComplexSelector.styles.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/core 0.6.5, reused by the\n// ComplexSelector fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/ComplexSelector/ComplexSelector.js\nexport const styles = {\n  triggerContainer: {\n    kVAEAm: \"x1n2onr6\",\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"xce4md1\",\n    kg3NbH: \"xrrkdod\",\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xcr08ib x1w61h2b\",\n    kLWn49: \"x1kq96og\",\n    kMwMTN: \"x1tgivj0\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    $$css: true,\n  },\n  trigger: {\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kCS8Yb: \"x1r8uery\",\n    k7Eaqz: \"xeuugli\",\n    kmVPX3: \"x1717udv\",\n    kogj98: \"x1ghz6dp\",\n    kMzoRj: \"xc342km\",\n    ksu8eU: \"xng3xce\",\n    kWkggS: \"xjbqb8w\",\n    kMv6JI: \"xjb2p0i\",\n    kGuDYH: \"x1qlqyl8\",\n    kLWn49: \"x15bjb6t\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    kI3sdo: \"x1a2a7pz\",\n    kaIpWk: \"xh6dtrn\",\n    $$css: true,\n  },\n  triggerText: {\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true,\n  },\n  placeholder: {\n    kMwMTN: \"xv1l7n4\",\n    $$css: true,\n  },\n  triggerGhost: {\n    kzqmXN: \"x14atkfc\",\n    kMzoRj: \"xc342km\",\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1 x1s17dad x15ysqaf\",\n    k63SB2: \"x1e4wzip\",\n    k1ekBW: \"xrafxwg\",\n    k3aq6I: \"x3oybdh xk4oym4\",\n    $$css: true,\n  },\n  triggerGhostDisabled: {\n    kKwaWg: \"x18o3ruo\",\n    k3aq6I: \"x1c071of x1pdlv7q\",\n    $$css: true,\n  },\n  triggerIcon: {\n    kmuXW: \"x2lah0s\",\n    $$css: true,\n  },\n  triggerIconRotation: {\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"xuedmi6\",\n    kAMwcw: \"xlr8y92\",\n    k3nNDw: \"x1g0ag68\",\n    $$css: true,\n  },\n  triggerIconOpen: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true,\n  },\n  popover: {\n    k7Eaqz: \"xrzjruh\",\n    $$css: true,\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    kskxy: \"xpnbb6b\",\n    kVQacm: \"xysyzu8\",\n    kmVPX3: \"x1b2ylru\",\n    $$css: true,\n  },\n  sm: {\n    kZKoxP: \"x6k0iem\",\n    $$css: true,\n  },\n  md: {\n    kZKoxP: \"x1ueg155\",\n    $$css: true,\n  },\n  lg: {\n    kZKoxP: \"xssyfek\",\n    $$css: true,\n  },\n  disabled: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true,\n  },\n};\n\n// dist/utils/interactionOverlay.stylex.js\nexport const interactionOverlayStyles = {\n  backgroundColor: {\n    kWkggS: \"xjbqb8w x1anq1lc xoevpu5 xprvw0a\",\n    $$css: true,\n  },\n  backgroundImage: {\n    kKwaWg: \"x7uyq82 xmvprkv xetgvay\",\n    $$css: true,\n  },\n  backgroundImageOnNeutral: {\n    kKwaWg: \"x14bno8m xzmimnh x1otsd3y xo3fi6e\",\n    $$css: true,\n  },\n  pressedBackgroundColor: {\n    kWkggS: \"x1anq1lc\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,OAAO;EACP,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGa,IAA2B;CACtC,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;AACF"}