@galaxy-io/dls 1.3.4 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/Accordion.d.ts +1 -2
- package/dist/accordion/Accordion.js +18 -26
- package/dist/charts/BarChart.d.ts +1 -7
- package/dist/charts/BarChart.js +2 -3
- package/dist/charts/ChartCategoryTargets.d.ts +16 -16
- package/dist/charts/ChartCategoryTargets.js +19 -70
- package/dist/charts/ChartFrame.d.ts +14 -12
- package/dist/charts/ChartFrame.js +33 -45
- package/dist/charts/ChartLegend.d.ts +4 -5
- package/dist/charts/ChartLegend.js +5 -6
- package/dist/charts/ChartPrimitives.d.ts +21 -34
- package/dist/charts/ChartPrimitives.js +86 -85
- package/dist/charts/LineChart.d.ts +1 -7
- package/dist/charts/LineChart.js +2 -3
- package/dist/charts/PieChart.d.ts +1 -8
- package/dist/charts/PieChart.js +6 -27
- package/dist/charts/chartFormat.d.ts +1 -9
- package/dist/charts/chartFormat.js +1 -13
- package/dist/charts/constants.d.ts +4 -7
- package/dist/charts/constants.js +5 -8
- package/dist/charts/types.d.ts +14 -4
- package/dist/charts/types.js +15 -4
- package/dist/charts/useChartInteraction.d.ts +15 -22
- package/dist/charts/useChartInteraction.js +8 -83
- package/dist/styles.css +18 -20
- package/package.json +1 -1
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
import { ChartMarkState } from "./types";
|
|
2
2
|
/**
|
|
3
|
-
* Hover
|
|
3
|
+
* Hover interaction shared by every chart.
|
|
4
4
|
*
|
|
5
|
-
* Two independent axes:
|
|
5
|
+
* Two independent axes, both hover-only:
|
|
6
6
|
*
|
|
7
|
-
* - **Category** — a numeric index along the plot. Hovering previews
|
|
8
|
-
*
|
|
9
|
-
* - **Series** — a legend key. Hovering
|
|
10
|
-
*
|
|
7
|
+
* - **Category** — a numeric index along the plot. Hovering previews it: the
|
|
8
|
+
* tooltip opens and everything outside the category recedes.
|
|
9
|
+
* - **Series** — a legend key. Hovering (or focusing) a legend entry isolates
|
|
10
|
+
* that series.
|
|
11
11
|
*
|
|
12
12
|
* Both live here rather than one of them in the charts, so there is a single
|
|
13
13
|
* `isEngaged` boolean. That matters more than it looks: `ChartPlotGroup` uses it
|
|
14
14
|
* to cancel the mark restore delay, and a second hover source that didn't feed
|
|
15
15
|
* it would sit through that delay before muting anything and feel broken.
|
|
16
16
|
*
|
|
17
|
-
*
|
|
17
|
+
* Deliberately no click layer. Clicking used to pin the hover so it survived
|
|
18
|
+
* the pointer leaving, and it read as the chart getting stuck — the emphasis
|
|
19
|
+
* now always follows the pointer and releases with it.
|
|
18
20
|
*/
|
|
19
21
|
interface UseChartInteractionOptions {
|
|
20
22
|
/** Number of hoverable categories. A shrinking count clears stale indices. */
|
|
21
23
|
categoryCount: number;
|
|
22
|
-
/** Legend keys currently rendered. A key that disappears clears
|
|
24
|
+
/** Legend keys currently rendered. A key that disappears clears stale hover. */
|
|
23
25
|
seriesKeys?: string[];
|
|
24
26
|
/** Suppress all interaction — used while loading and when the tooltip is off. */
|
|
25
27
|
disabled?: boolean;
|
|
@@ -33,8 +35,6 @@ interface UseChartInteractionOptions {
|
|
|
33
35
|
* which is exactly how one of them came to be missing it.
|
|
34
36
|
*/
|
|
35
37
|
isLoading?: boolean;
|
|
36
|
-
/** Notified when the pinned category changes. */
|
|
37
|
-
onPinnedChange?: (index: number | null) => void;
|
|
38
38
|
}
|
|
39
39
|
interface MarkStateArgs {
|
|
40
40
|
/** Omit for marks that belong to no particular category, such as a line. */
|
|
@@ -43,11 +43,9 @@ interface MarkStateArgs {
|
|
|
43
43
|
seriesKey?: string;
|
|
44
44
|
}
|
|
45
45
|
export interface ChartInteraction {
|
|
46
|
-
|
|
47
|
-
/** Pinned wins over hovered — this is what the tooltip follows. */
|
|
46
|
+
/** The hovered category — what the tooltip follows. */
|
|
48
47
|
activeIndex: number | null;
|
|
49
48
|
hoveredSeriesKey: string | null;
|
|
50
|
-
pinnedSeriesKey: string | null;
|
|
51
49
|
/** True while *either* axis is engaged; cancels the mark restore delay. */
|
|
52
50
|
isEngaged: boolean;
|
|
53
51
|
/**
|
|
@@ -55,22 +53,17 @@ export interface ChartInteraction {
|
|
|
55
53
|
*
|
|
56
54
|
* The grammar is inherited from the reference and is the opposite of the
|
|
57
55
|
* obvious one: engaging something does not brighten it, it softens everything
|
|
58
|
-
* else.
|
|
59
|
-
* the pinned mark and the one under the pointer stay legible against them.
|
|
56
|
+
* else.
|
|
60
57
|
*
|
|
61
58
|
* A mark has to survive *both* filters to stay active — the two axes
|
|
62
|
-
* intersect rather than override, so
|
|
63
|
-
*
|
|
59
|
+
* intersect rather than override, so hovering a legend entry and a category
|
|
60
|
+
* at once leaves only their overlap lit.
|
|
64
61
|
*/
|
|
65
62
|
getMarkState: (args: MarkStateArgs) => ChartMarkState;
|
|
66
63
|
onCategoryEnter: (categoryIndex: number) => void;
|
|
67
64
|
onCategoryLeave: () => void;
|
|
68
|
-
onCategoryClick: (categoryIndex: number) => void;
|
|
69
65
|
onSeriesEnter: (seriesKey: string) => void;
|
|
70
66
|
onSeriesLeave: () => void;
|
|
71
|
-
onSeriesClick: (seriesKey: string) => void;
|
|
72
|
-
/** Attach to the plot backdrop; clears both pins. */
|
|
73
|
-
onBackdropClick: () => void;
|
|
74
67
|
}
|
|
75
|
-
export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading,
|
|
68
|
+
export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
|
|
76
69
|
export {};
|
|
@@ -1,43 +1,11 @@
|
|
|
1
1
|
import { ChartMarkState } from "./types.js";
|
|
2
|
-
import {
|
|
3
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { useCallback, useMemo, useState } from "react";
|
|
4
3
|
//#region src/charts/useChartInteraction.ts
|
|
5
|
-
|
|
6
|
-
function severity(state) {
|
|
7
|
-
return match(state).with(ChartMarkState.ACTIVE, () => 0).with(ChartMarkState.MUTED, () => 1).with(ChartMarkState.FADED, () => 2).exhaustive();
|
|
8
|
-
}
|
|
9
|
-
function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false, onPinnedChange }) {
|
|
4
|
+
function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false }) {
|
|
10
5
|
const [hoveredIndex, setHoveredIndex] = useState(null);
|
|
11
|
-
const [pinnedIndex, setPinnedIndex] = useState(null);
|
|
12
6
|
const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
|
|
13
|
-
const [pinnedSeriesKey, setPinnedSeriesKey] = useState(null);
|
|
14
|
-
const onPinnedChangeRef = useRef(onPinnedChange);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
onPinnedChangeRef.current = onPinnedChange;
|
|
17
|
-
});
|
|
18
7
|
const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
|
|
19
|
-
const
|
|
20
|
-
const isKnownSeries = (key) => key !== null && (seriesKeys === void 0 || seriesKeys.includes(key));
|
|
21
|
-
const safeHoveredSeries = isKnownSeries(hoveredSeriesKey) ? hoveredSeriesKey : null;
|
|
22
|
-
const safePinnedSeries = isKnownSeries(pinnedSeriesKey) ? pinnedSeriesKey : null;
|
|
23
|
-
const clearPins = useCallback(() => {
|
|
24
|
-
setPinnedIndex(null);
|
|
25
|
-
setPinnedSeriesKey(null);
|
|
26
|
-
onPinnedChangeRef.current?.(null);
|
|
27
|
-
}, []);
|
|
28
|
-
const hasPin = safePinned !== null || safePinnedSeries !== null;
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (disabled || !hasPin) return;
|
|
31
|
-
const onKeyDown = (event) => {
|
|
32
|
-
if (event.key === "Escape") clearPins();
|
|
33
|
-
};
|
|
34
|
-
window.addEventListener("keydown", onKeyDown);
|
|
35
|
-
return () => window.removeEventListener("keydown", onKeyDown);
|
|
36
|
-
}, [
|
|
37
|
-
disabled,
|
|
38
|
-
hasPin,
|
|
39
|
-
clearPins
|
|
40
|
-
]);
|
|
8
|
+
const safeHoveredSeries = hoveredSeriesKey !== null && (seriesKeys === void 0 || seriesKeys.includes(hoveredSeriesKey)) ? hoveredSeriesKey : null;
|
|
41
9
|
const onCategoryEnter = useCallback((categoryIndex) => {
|
|
42
10
|
if (disabled) return;
|
|
43
11
|
setHoveredIndex(categoryIndex);
|
|
@@ -46,80 +14,37 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLo
|
|
|
46
14
|
if (disabled) return;
|
|
47
15
|
setHoveredIndex(null);
|
|
48
16
|
}, [disabled]);
|
|
49
|
-
const onCategoryClick = useCallback((categoryIndex) => {
|
|
50
|
-
if (disabled) return;
|
|
51
|
-
const next = pinnedIndex === categoryIndex ? null : categoryIndex;
|
|
52
|
-
setPinnedIndex(next);
|
|
53
|
-
onPinnedChangeRef.current?.(next);
|
|
54
|
-
}, [disabled, pinnedIndex]);
|
|
55
17
|
const onSeriesEnter = useCallback((seriesKey) => {
|
|
56
18
|
setHoveredSeriesKey(seriesKey);
|
|
57
19
|
}, []);
|
|
58
20
|
const onSeriesLeave = useCallback(() => {
|
|
59
21
|
setHoveredSeriesKey(null);
|
|
60
22
|
}, []);
|
|
61
|
-
const onSeriesClick = useCallback((seriesKey) => {
|
|
62
|
-
const next = pinnedSeriesKey === seriesKey ? null : seriesKey;
|
|
63
|
-
setPinnedSeriesKey(next);
|
|
64
|
-
if (next === null) setHoveredSeriesKey(null);
|
|
65
|
-
}, [pinnedSeriesKey]);
|
|
66
23
|
const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
|
|
67
24
|
if (isLoading) return ChartMarkState.MUTED;
|
|
68
|
-
|
|
69
|
-
if (categoryIndex === void 0) return ChartMarkState.ACTIVE;
|
|
70
|
-
if (safePinned !== null) {
|
|
71
|
-
if (categoryIndex === safePinned) return ChartMarkState.ACTIVE;
|
|
72
|
-
if (categoryIndex === safeHovered) return ChartMarkState.MUTED;
|
|
73
|
-
return ChartMarkState.FADED;
|
|
74
|
-
}
|
|
75
|
-
if (safeHovered !== null) return categoryIndex === safeHovered ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
|
|
76
|
-
return ChartMarkState.ACTIVE;
|
|
77
|
-
})();
|
|
78
|
-
const seriesState = (() => {
|
|
79
|
-
if (seriesKey === void 0) return ChartMarkState.ACTIVE;
|
|
80
|
-
if (safePinnedSeries !== null) {
|
|
81
|
-
if (seriesKey === safePinnedSeries) return ChartMarkState.ACTIVE;
|
|
82
|
-
if (seriesKey === safeHoveredSeries) return ChartMarkState.MUTED;
|
|
83
|
-
return ChartMarkState.FADED;
|
|
84
|
-
}
|
|
85
|
-
if (safeHoveredSeries !== null) return seriesKey === safeHoveredSeries ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
|
|
86
|
-
return ChartMarkState.ACTIVE;
|
|
87
|
-
})();
|
|
88
|
-
return severity(categoryState) >= severity(seriesState) ? categoryState : seriesState;
|
|
25
|
+
return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
|
|
89
26
|
}, [
|
|
90
27
|
isLoading,
|
|
91
|
-
safePinned,
|
|
92
28
|
safeHovered,
|
|
93
|
-
safePinnedSeries,
|
|
94
29
|
safeHoveredSeries
|
|
95
30
|
]);
|
|
96
31
|
return useMemo(() => ({
|
|
97
|
-
|
|
98
|
-
activeIndex: safePinned ?? safeHovered,
|
|
32
|
+
activeIndex: safeHovered,
|
|
99
33
|
hoveredSeriesKey: safeHoveredSeries,
|
|
100
|
-
|
|
101
|
-
isEngaged: safePinned !== null || safeHovered !== null || safePinnedSeries !== null || safeHoveredSeries !== null,
|
|
34
|
+
isEngaged: safeHovered !== null || safeHoveredSeries !== null,
|
|
102
35
|
getMarkState,
|
|
103
36
|
onCategoryEnter,
|
|
104
37
|
onCategoryLeave,
|
|
105
|
-
onCategoryClick,
|
|
106
38
|
onSeriesEnter,
|
|
107
|
-
onSeriesLeave
|
|
108
|
-
onSeriesClick,
|
|
109
|
-
onBackdropClick: clearPins
|
|
39
|
+
onSeriesLeave
|
|
110
40
|
}), [
|
|
111
41
|
safeHovered,
|
|
112
|
-
safePinned,
|
|
113
42
|
safeHoveredSeries,
|
|
114
|
-
safePinnedSeries,
|
|
115
43
|
getMarkState,
|
|
116
44
|
onCategoryEnter,
|
|
117
45
|
onCategoryLeave,
|
|
118
|
-
onCategoryClick,
|
|
119
46
|
onSeriesEnter,
|
|
120
|
-
onSeriesLeave
|
|
121
|
-
onSeriesClick,
|
|
122
|
-
clearPins
|
|
47
|
+
onSeriesLeave
|
|
123
48
|
]);
|
|
124
49
|
}
|
|
125
50
|
//#endregion
|
package/dist/styles.css
CHANGED
|
@@ -23,28 +23,26 @@
|
|
|
23
23
|
.bv9nmr4{z-index:1;width:70%;height:70%;border-radius:50%;background-color:var(--bv9nmr4-0);}
|
|
24
24
|
.s99zquh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--s99zquh-0);min-width:var(--s99zquh-1);overflow:var(--s99zquh-2);gap:var(--s99zquh-3);padding:var(--s99zquh-4);height:var(--s99zquh-5);background-color:var(--s99zquh-6);border:var(--s99zquh-7);border-radius:5px;cursor:var(--s99zquh-8);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.s99zquh:hover:not(:disabled){background-color:var(--s99zquh-9);border-color:var(--s99zquh-10);}.s99zquh:disabled{background-color:var(--s99zquh-11);cursor:not-allowed;opacity:0.5;}
|
|
25
25
|
.l9yox33{-webkit-flex:var(--l9yox33-0);-ms-flex:var(--l9yox33-0);flex:var(--l9yox33-0);min-width:var(--l9yox33-1);overflow:hidden;}
|
|
26
|
-
.c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:
|
|
27
|
-
.c1fvbgkp{position:relative;width:
|
|
26
|
+
.c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:var(--c1hcga6s-1);-ms-flex-direction:var(--c1hcga6s-1);flex-direction:var(--c1hcga6s-1);-webkit-align-items:var(--c1hcga6s-2);-webkit-box-align:var(--c1hcga6s-2);-ms-flex-align:var(--c1hcga6s-2);align-items:var(--c1hcga6s-2);-webkit-box-pack:var(--c1hcga6s-3);-ms-flex-pack:var(--c1hcga6s-3);-webkit-justify-content:var(--c1hcga6s-3);justify-content:var(--c1hcga6s-3);width:var(--c1hcga6s-4);min-width:0;height:var(--c1hcga6s-5);min-height:0;}
|
|
27
|
+
.c1fvbgkp{position:relative;width:var(--c1fvbgkp-0);min-width:0;aspect-ratio:var(--c1fvbgkp-1);height:var(--c1fvbgkp-2);-webkit-flex:var(--c1fvbgkp-3);-ms-flex:var(--c1fvbgkp-3);flex:var(--c1fvbgkp-3);min-height:var(--c1fvbgkp-4);}
|
|
28
28
|
.c10uj5yt{display:block;overflow:visible;}
|
|
29
29
|
.cyuty3o[data-active="true"] rect,.cyuty3o[data-active="true"] path,.cyuty3o[data-active="true"] circle{transition-delay:0ms;}
|
|
30
|
-
.c1ob2op2{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1ob2op2[data-state="muted"]{opacity:0.1;}
|
|
31
|
-
.c8c506o{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c8c506o[data-state="muted"]{opacity:0.1;}
|
|
32
|
-
.ceqlpek{stroke:none;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.ceqlpek[data-state="muted"]{opacity:0.1;}
|
|
33
|
-
.c1fcbddl{pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1fcbddl[data-state="muted"]{opacity:0.1;}
|
|
34
|
-
.cpcxr59{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cpcxr59[data-state="muted"]{opacity:0.1;}
|
|
35
|
-
.c1wvzvu4{
|
|
36
|
-
.c17guewt{fill:transparent;outline:none;}
|
|
37
|
-
.cblgiyf{
|
|
38
|
-
.c1lr03cc{
|
|
39
|
-
.cizy1s8{
|
|
40
|
-
.c1ukq11d{
|
|
41
|
-
.cwcko2m{
|
|
42
|
-
.cqwhvyz{position:absolute;
|
|
43
|
-
.c1iaray{
|
|
44
|
-
.cz6jod1{
|
|
45
|
-
.c1de5mqk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:
|
|
46
|
-
.cjirv6a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cjirv6a[data-state="muted"]{opacity:0.1;}.cjirv6a[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.cjirv6a{-webkit-transition:none;transition:none;}}.cjirv6a:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
|
|
47
|
-
.c1armna5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1armna5[data-state="muted"]{opacity:0.1;}.c1armna5[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.c1armna5{-webkit-transition:none;transition:none;}}
|
|
30
|
+
.c1ob2op2{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1ob2op2[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1ob2op2{-webkit-transition:none;transition:none;}}
|
|
31
|
+
.c8c506o{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c8c506o[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c8c506o{-webkit-transition:none;transition:none;}}
|
|
32
|
+
.ceqlpek{stroke:none;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.ceqlpek[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.ceqlpek{-webkit-transition:none;transition:none;}}
|
|
33
|
+
.c1fcbddl{pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1fcbddl[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1fcbddl{-webkit-transition:none;transition:none;}}
|
|
34
|
+
.cpcxr59{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cpcxr59[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cpcxr59{-webkit-transition:none;transition:none;}}
|
|
35
|
+
.c1wvzvu4{fill:transparent;outline:none;}
|
|
36
|
+
.c17guewt{fill:transparent;outline:none;}
|
|
37
|
+
.cblgiyf{stroke:var(--cblgiyf-0);shape-rendering:crispEdges;}
|
|
38
|
+
.c1lr03cc{stroke:var(--c1lr03cc-0);pointer-events:none;}
|
|
39
|
+
.cizy1s8{overflow:visible;pointer-events:none;}
|
|
40
|
+
.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
|
|
41
|
+
.cwcko2m{position:absolute;left:var(--cwcko2m-0);top:var(--cwcko2m-1);width:var(--cwcko2m-2);height:var(--cwcko2m-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
|
|
42
|
+
.cqwhvyz{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:12px;border:0.5px solid var(--cqwhvyz-0);border-radius:6px;background-color:var(--cqwhvyz-1);pointer-events:none;text-align:center;}
|
|
43
|
+
.c1iaray{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1iaray-0);-ms-flex-direction:var(--c1iaray-0);flex-direction:var(--c1iaray-0);-webkit-box-flex-wrap:var(--c1iaray-1);-webkit-flex-wrap:var(--c1iaray-1);-ms-flex-wrap:var(--c1iaray-1);flex-wrap:var(--c1iaray-1);-webkit-align-items:var(--c1iaray-2);-webkit-box-align:var(--c1iaray-2);-ms-flex-align:var(--c1iaray-2);align-items:var(--c1iaray-2);gap:var(--c1iaray-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--c1iaray-4);padding-left:var(--c1iaray-5);}.c1iaray[data-active="true"]>*{transition-delay:0ms;}
|
|
44
|
+
.cz6jod1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cz6jod1[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cz6jod1{-webkit-transition:none;transition:none;}}.cz6jod1:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
|
|
45
|
+
.c1de5mqk{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1de5mqk[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1de5mqk{-webkit-transition:none;transition:none;}}
|
|
48
46
|
.cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
|
|
49
47
|
.s1yc7aow{position:relative;height:var(--s1yc7aow-0);width:100%;background-color:var(--s1yc7aow-1);border:0.5px solid var(--s1yc7aow-2);border-radius:4px;overflow:hidden;}
|
|
50
48
|
.p1sc05jm{position:absolute;top:0;left:0;height:100%;width:var(--p1sc05jm-0);background-color:var(--p1sc05jm-1);-webkit-animation:var(--p1sc05jm-2);animation:var(--p1sc05jm-2);-webkit-transition:width 0.075s ease-in-out;transition:width 0.075s ease-in-out;}@-webkit-keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}@keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}
|