@bioturing/components 0.28.1 → 0.29.1
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/components/breadcrumb/style.css +1 -1
- package/dist/components/checkbox/style.css +1 -1
- package/dist/components/choice-list/component.js +102 -42
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/choice-list/style.css +1 -1
- package/dist/components/color-select/style.css +1 -1
- package/dist/components/combobox/component.js +171 -141
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/combobox/style.css +1 -1
- package/dist/components/drag-drop/style.css +1 -1
- package/dist/components/dropdown-menu/component.js +113 -105
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/item.css +1 -1
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/ds-root/component.js +22 -17
- package/dist/components/ds-root/component.js.map +1 -1
- package/dist/components/ds-root/style.css +1 -1
- package/dist/components/form/style.css +1 -1
- package/dist/components/modal/style.css +1 -1
- package/dist/components/nav/style.css +1 -1
- package/dist/components/scroll-area/component.js +70 -24
- package/dist/components/scroll-area/component.js.map +1 -1
- package/dist/components/scroll-area/style.css +1 -1
- package/dist/components/select-trigger/component.js +150 -0
- package/dist/components/select-trigger/component.js.map +1 -0
- package/dist/components/select-trigger/style.css +1 -0
- package/dist/components/switch/style.css +1 -1
- package/dist/components/table/style.css +1 -1
- package/dist/components/theme-provider/component.js.map +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/tour/style.css +1 -1
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/index.d.ts +72 -41
- package/dist/index.js +125 -125
- package/dist/tokens/and-theme/tokens.js +12 -12
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +6 -6
- package/dist/components/combobox/trigger.js +0 -89
- package/dist/components/combobox/trigger.js.map +0 -1
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { ThemeProvider as
|
|
4
|
-
import { Modal as
|
|
5
|
-
import
|
|
6
|
-
import { DSRootContextProvider as
|
|
2
|
+
import { jsx as o, jsxs as p } from "react/jsx-runtime";
|
|
3
|
+
import { ThemeProvider as c } from "../theme-provider/component.js";
|
|
4
|
+
import { Modal as d } from "../modal/index.js";
|
|
5
|
+
import n from "antd/es/app/App";
|
|
6
|
+
import { DSRootContextProvider as f } from "./context.js";
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
|
-
import { Toast as
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
import { Toast as t } from "../toast/component.js";
|
|
9
|
+
import { useCls as a } from "../utils/antdUtils.js";
|
|
10
|
+
import { clsx as h } from "../utils/cn.js";
|
|
11
|
+
const T = ({
|
|
12
|
+
className: i,
|
|
13
|
+
appendClassesTo: m = "html",
|
|
14
|
+
children: e,
|
|
15
|
+
theme: r,
|
|
16
|
+
...s
|
|
17
|
+
}) => {
|
|
18
|
+
const l = a();
|
|
19
|
+
return /* @__PURE__ */ o(f, { value: { theme: r }, children: /* @__PURE__ */ o(c, { theme: r, ...s, appendClassesTo: m, children: /* @__PURE__ */ o(t.Provider, { children: /* @__PURE__ */ p(d.Provider, { children: [
|
|
20
|
+
/* @__PURE__ */ o(t.List, {}),
|
|
21
|
+
/* @__PURE__ */ o(n, { className: h(l("root"), i), children: e })
|
|
22
|
+
] }) }) }) });
|
|
23
|
+
};
|
|
19
24
|
export {
|
|
20
|
-
|
|
25
|
+
T as DSRoot
|
|
21
26
|
};
|
|
22
27
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n ThemeProvider,\n type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n /**\n * Classname passed to App component\n */\n className?: string;\n\n /**\n * Element to which the theme classes are appended\n * @default \"html\"\n */\n appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n className,\n appendClassesTo = \"html\",\n children,\n theme,\n ...props\n}: DSRootProps) => {\n return (\n <DSRootContextProvider value={{ theme: theme }}>\n <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n <
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/ds-root/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n ThemeProvider,\n type ThemeProviderProps,\n} from \"../theme-provider/component\";\nimport { Toast } from \"../toast\";\nimport { Modal } from \"../modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n /**\n * Classname passed to App component\n */\n className?: string;\n\n /**\n * Element to which the theme classes are appended\n * @default \"html\"\n */\n appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n className,\n appendClassesTo = \"html\",\n children,\n theme,\n ...props\n}: DSRootProps) => {\n const cls = useCls();\n return (\n <DSRootContextProvider value={{ theme: theme }}>\n <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n <Toast.Provider>\n <Modal.Provider>\n <Toast.List />\n <App className={clsx(cls(\"root\"), className)}>{children}</App>\n </Modal.Provider>\n </Toast.Provider>\n </ThemeProvider>\n </DSRootContextProvider>\n );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","cls","useCls","DSRootContextProvider","ThemeProvider","Toast","jsxs","Modal","jsx","App","clsx"],"mappings":";;;;;;;;;;AA2BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAMC,IAAMC,EAAO;AACnB,2BACGC,GAAsB,EAAA,OAAO,EAAE,OAAAJ,KAC9B,4BAACK,GAAc,EAAA,OAAAL,GAAe,GAAGC,GAAO,iBAAAH,GACtC,4BAACQ,EAAM,UAAN,EACC,UAAC,gBAAAC,EAAAC,EAAM,UAAN,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAH,EAAM,MAAN,EAAW;AAAA,IACZ,gBAAAG,EAACC,KAAI,WAAWC,EAAKT,EAAI,MAAM,GAAGL,CAAS,GAAI,UAAAE,EAAS,CAAA;AAAA,EAAA,GAC1D,EAAA,CACF,EACF,CAAA,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{body{margin:0;padding:0}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{
|
|
1
|
+
@layer base{body{margin:0;padding:0}html{overflow:hidden}a[href],button:not(:disabled){cursor:pointer}svg{vertical-align:baseline}}@layer components{.ds-root{isolation:isolate}@supports (scrollbar-width: auto){*{scrollbar-color:var(--ds-scrollbar-color-thumb) var(--ds-scrollbar-color-track);scrollbar-width:var(--ds-scrollbar-width)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar-thumb{background:var(--ds-scrollbar-color-thumb)}*::-webkit-scrollbar-track{background:var(--ds-scrollbar-color-track)}*::-webkit-scrollbar{max-width:var(--ds-scrollbar-width-legacy);max-height:var(--ds-scrollbar-width-legacy)}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}
|
|
1
|
+
@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}.ds-form-item-label>label.ds-form-item-required:after{display:none}.ds-form-item-label>label.ds-form-item-required:before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}.ds-form-item-label{overflow:visible}.ds-form-item-row .ds-form-item-label label{width:100%}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}
|
|
1
|
+
@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}.ds-modal-wrap .ds-modal .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}.ds-modal-wrap .ds-modal .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}.ds-modal-wrap .ds-modal .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}.ds-modal-no-body-scroll .ds-modal .ds-modal-body{overflow:hidden;display:grid}.ds-modal-no-body-scroll .ds-modal .ds-modal-body>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}.ds-modal-fixed .ds-modal .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-close{top:8px}.ds-modal-content-overflow .ds-modal .ds-modal-inner{margin-top:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}
|
|
1
|
+
@layer components{.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}.ds-nav-small .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-small .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}.ds-nav-large .ds-nav-item .ds-nav-item-icon,.ds-nav-item.ds-nav-item-large .ds-nav-item-icon{font-size:1.5rem}.ds-nav-large .ds-nav-item .ds-nav-item-content,.ds-nav-item.ds-nav-item-large .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}}
|
|
@@ -1,34 +1,80 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import {
|
|
2
|
+
import { jsxs as x, jsx as f } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as y, useState as R, useEffect as T } from "react";
|
|
4
|
+
import { ScrollArea as S } from "@base-ui-components/react";
|
|
4
5
|
import './style.css';/* empty css */
|
|
5
|
-
import { useCls as
|
|
6
|
-
import { clsx as
|
|
7
|
-
const
|
|
8
|
-
children:
|
|
9
|
-
className:
|
|
10
|
-
classNames:
|
|
11
|
-
orientation:
|
|
6
|
+
import { useCls as E } from "../utils/antdUtils.js";
|
|
7
|
+
import { clsx as b } from "../utils/cn.js";
|
|
8
|
+
const I = ({
|
|
9
|
+
children: m,
|
|
10
|
+
className: w,
|
|
11
|
+
classNames: o = {},
|
|
12
|
+
orientation: t = "vertical",
|
|
13
|
+
fadeEdges: e = !1,
|
|
14
|
+
onScroll: h
|
|
12
15
|
}) => {
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
const l = E(), u = y(null), [r, v] = R({
|
|
17
|
+
isAtStart: !0,
|
|
18
|
+
isAtEnd: !1,
|
|
19
|
+
isScrollable: !1
|
|
20
|
+
});
|
|
21
|
+
return T(() => {
|
|
22
|
+
if (!u.current) return;
|
|
23
|
+
const c = u.current, i = (d) => {
|
|
24
|
+
if (d && h && h(d), e)
|
|
25
|
+
if (t === "vertical") {
|
|
26
|
+
const { scrollTop: s, scrollHeight: a, clientHeight: n } = c, A = a > n;
|
|
27
|
+
v({
|
|
28
|
+
isAtStart: s <= 1,
|
|
29
|
+
isAtEnd: s >= a - n - 1,
|
|
30
|
+
isScrollable: A
|
|
31
|
+
});
|
|
32
|
+
} else {
|
|
33
|
+
const { scrollLeft: s, scrollWidth: a, clientWidth: n } = c, A = a > n + 2;
|
|
34
|
+
v({
|
|
35
|
+
isAtStart: s <= 1,
|
|
36
|
+
isAtEnd: s >= a - n - 1,
|
|
37
|
+
isScrollable: A
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
i();
|
|
42
|
+
const z = setTimeout(i, 0);
|
|
43
|
+
c.addEventListener("scroll", i);
|
|
44
|
+
const p = new ResizeObserver(() => {
|
|
45
|
+
i();
|
|
46
|
+
});
|
|
47
|
+
return p.observe(c), () => {
|
|
48
|
+
clearTimeout(z), c.removeEventListener("scroll", i), p.disconnect();
|
|
49
|
+
};
|
|
50
|
+
}, [e, t, h]), /* @__PURE__ */ x(S.Root, { className: b(l("scroll-area"), w), children: [
|
|
51
|
+
/* @__PURE__ */ f(
|
|
52
|
+
S.Viewport,
|
|
17
53
|
{
|
|
18
|
-
|
|
19
|
-
|
|
54
|
+
ref: u,
|
|
55
|
+
className: b(
|
|
56
|
+
l("scroll-area-viewport"),
|
|
57
|
+
e && r.isScrollable && t === "vertical" && r.isAtStart && l("scroll-area-fade-bottom-only"),
|
|
58
|
+
e && r.isScrollable && t === "vertical" && r.isAtEnd && l("scroll-area-fade-top-only"),
|
|
59
|
+
e && r.isScrollable && t === "vertical" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-vertical"),
|
|
60
|
+
e && r.isScrollable && t === "horizontal" && r.isAtStart && l("scroll-area-fade-right-only"),
|
|
61
|
+
e && r.isScrollable && t === "horizontal" && r.isAtEnd && l("scroll-area-fade-left-only"),
|
|
62
|
+
e && r.isScrollable && t === "horizontal" && !r.isAtStart && !r.isAtEnd && l("scroll-area-fade-both-horizontal"),
|
|
63
|
+
o == null ? void 0 : o.viewport
|
|
64
|
+
),
|
|
65
|
+
children: /* @__PURE__ */ f(S.Content, { className: b(l("scroll-area-content")), children: m })
|
|
20
66
|
}
|
|
21
67
|
),
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
|
|
68
|
+
/* @__PURE__ */ f(
|
|
69
|
+
S.Scrollbar,
|
|
24
70
|
{
|
|
25
|
-
className: l(
|
|
26
|
-
orientation:
|
|
27
|
-
"data-orientation":
|
|
28
|
-
children: /* @__PURE__ */
|
|
29
|
-
|
|
71
|
+
className: b(l("scroll-area-scrollbar"), o == null ? void 0 : o.scrollbar),
|
|
72
|
+
orientation: t,
|
|
73
|
+
"data-orientation": t,
|
|
74
|
+
children: /* @__PURE__ */ f(
|
|
75
|
+
S.Thumb,
|
|
30
76
|
{
|
|
31
|
-
className: l(
|
|
77
|
+
className: b(l("scroll-area-thumb"), o == null ? void 0 : o.thumb)
|
|
32
78
|
}
|
|
33
79
|
)
|
|
34
80
|
}
|
|
@@ -36,6 +82,6 @@ const S = ({
|
|
|
36
82
|
] });
|
|
37
83
|
};
|
|
38
84
|
export {
|
|
39
|
-
|
|
85
|
+
I as ScrollArea
|
|
40
86
|
};
|
|
41
87
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n children: ReactNode;\n /**\n * Additional class name for the root component\n */\n className?: string;\n /**\n * Custom class names for each part of the scroll area\n */\n classNames?: {\n /**\n * Class name for the viewport element\n */\n viewport?: string;\n /**\n * Class name for the scrollbar element\n */\n scrollbar?: string;\n /**\n * Class name for the thumb element\n */\n thumb?: string;\n };\n /**\n * Orientation of the scrollbar\n * @default \"vertical\"\n */\n orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport const ScrollArea = ({\n children,\n className,\n classNames = {},\n orientation = \"vertical\",\n}: ScrollAreaProps) => {\n const cls = useCls();\n return (\n <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n <BaseScrollArea.Viewport\n className={clsx(cls(\"scroll-area-viewport\")
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/scroll-area/component.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui-components/react\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ScrollAreaProps {\n children: ReactNode;\n /**\n * Additional class name for the root component\n */\n className?: string;\n /**\n * Custom class names for each part of the scroll area\n */\n classNames?: {\n /**\n * Class name for the viewport element\n */\n viewport?: string;\n /**\n * Class name for the scrollbar element\n */\n scrollbar?: string;\n /**\n * Class name for the thumb element\n */\n thumb?: string;\n };\n /**\n * Orientation of the scrollbar\n * @default \"vertical\"\n */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * Enable fade-out effect at scrollable edges\n * @default false\n */\n fadeEdges?: boolean;\n /**\n * Callback fired when the scroll position changes\n */\n onScroll?: (event: Event) => void;\n}\n\nexport const ScrollArea = ({\n children,\n className,\n classNames = {},\n orientation = \"vertical\",\n fadeEdges = false,\n onScroll,\n}: ScrollAreaProps) => {\n const cls = useCls();\n const viewportRef = useRef<HTMLDivElement>(null);\n const [scrollState, setScrollState] = useState({\n isAtStart: true,\n isAtEnd: false,\n isScrollable: false,\n });\n\n useEffect(() => {\n if (!viewportRef.current) return;\n\n const viewport = viewportRef.current;\n\n const handleScroll = (event?: Event) => {\n // Call the onScroll callback if provided and event exists\n if (event && onScroll) {\n onScroll(event);\n }\n\n // Handle fade edges state update if enabled\n if (fadeEdges) {\n if (orientation === \"vertical\") {\n const { scrollTop, scrollHeight, clientHeight } = viewport;\n const isScrollable = scrollHeight > clientHeight;\n setScrollState({\n isAtStart: scrollTop <= 1,\n isAtEnd: scrollTop >= scrollHeight - clientHeight - 1,\n isScrollable,\n });\n } else {\n const { scrollLeft, scrollWidth, clientWidth } = viewport;\n // Add a small buffer (2px) to account for rounding errors\n const isScrollable = scrollWidth > clientWidth + 2;\n setScrollState({\n isAtStart: scrollLeft <= 1,\n isAtEnd: scrollLeft >= scrollWidth - clientWidth - 1,\n isScrollable,\n });\n }\n }\n };\n\n // Initial check (without event)\n handleScroll();\n\n // Use a timeout to check again after content might have rendered\n const timeoutId = setTimeout(handleScroll, 0);\n\n viewport.addEventListener(\"scroll\", handleScroll);\n\n // Add resize observer to detect content size changes\n const resizeObserver = new ResizeObserver(() => {\n handleScroll();\n });\n resizeObserver.observe(viewport);\n\n return () => {\n clearTimeout(timeoutId);\n viewport.removeEventListener(\"scroll\", handleScroll);\n resizeObserver.disconnect();\n };\n }, [fadeEdges, orientation, onScroll]);\n return (\n <BaseScrollArea.Root className={clsx(cls(\"scroll-area\"), className)}>\n <BaseScrollArea.Viewport\n ref={viewportRef}\n className={clsx(\n cls(\"scroll-area-viewport\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n scrollState.isAtStart &&\n cls(\"scroll-area-fade-bottom-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n scrollState.isAtEnd &&\n cls(\"scroll-area-fade-top-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"vertical\" &&\n !scrollState.isAtStart &&\n !scrollState.isAtEnd &&\n cls(\"scroll-area-fade-both-vertical\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n scrollState.isAtStart &&\n cls(\"scroll-area-fade-right-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n scrollState.isAtEnd &&\n cls(\"scroll-area-fade-left-only\"),\n fadeEdges &&\n scrollState.isScrollable &&\n orientation === \"horizontal\" &&\n !scrollState.isAtStart &&\n !scrollState.isAtEnd &&\n cls(\"scroll-area-fade-both-horizontal\"),\n classNames?.viewport\n )}\n >\n <BaseScrollArea.Content className={clsx(cls(\"scroll-area-content\"))}>\n {children}\n </BaseScrollArea.Content>\n </BaseScrollArea.Viewport>\n <BaseScrollArea.Scrollbar\n className={clsx(cls(\"scroll-area-scrollbar\"), classNames?.scrollbar)}\n orientation={orientation}\n data-orientation={orientation}\n >\n <BaseScrollArea.Thumb\n className={clsx(cls(\"scroll-area-thumb\"), classNames?.thumb)}\n />\n </BaseScrollArea.Scrollbar>\n </BaseScrollArea.Root>\n );\n};\n"],"names":["ScrollArea","children","className","classNames","orientation","fadeEdges","onScroll","cls","useCls","viewportRef","useRef","scrollState","setScrollState","useState","useEffect","viewport","handleScroll","event","scrollTop","scrollHeight","clientHeight","isScrollable","scrollLeft","scrollWidth","clientWidth","timeoutId","resizeObserver","jsxs","BaseScrollArea","clsx","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-scroll-area{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}
|
|
1
|
+
@layer components{.ds-scroll-area{--ds-scroll-area-fade-distance: 20px;display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.ds-scroll-area .ds-scroll-area-viewport{flex-shrink:1;height:100%;max-height:100%;overflow:hidden;overscroll-behavior:contain}.ds-scroll-area .ds-scroll-area-viewport:focus-visible{outline-width:2px;outline-offset:4px;outline-color:var(--ds-color-primary)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-bottom-only{mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-top-only{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-vertical{mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-right-only{mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,black 0px,black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-left-only{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black 100%)}.ds-scroll-area .ds-scroll-area-viewport.ds-scroll-area-fade-both-horizontal{mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds-scroll-area-fade-distance),black calc(100% - var(--ds-scroll-area-fade-distance)),transparent 100%)}.ds-scroll-area .ds-scroll-area-scrollbar{padding:.125rem;display:flex;justify-content:center;background-color:transparent;opacity:0;transition-property:opacity;transition-delay:.1s}.ds-scroll-area .ds-scroll-area-scrollbar .ds-scroll-area-thumb{border-radius:9999px;background-color:var(--ds-color-bg-fill-tertiary);border:1px solid var(--ds-color-border)}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical]{width:.625rem}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=vertical] .ds-scroll-area-thumb{width:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal]{width:100%;height:.625rem;flex-direction:column}.ds-scroll-area .ds-scroll-area-scrollbar[data-orientation=horizontal] .ds-scroll-area-thumb{height:100%}.ds-scroll-area .ds-scroll-area-scrollbar[data-hovering],.ds-scroll-area .ds-scroll-area-scrollbar[data-scrolling]{opacity:1;transition-delay:0ms;transition-duration:.2s}}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as p, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { XCircleIcon as K, CaretDownIcon as V } from "@bioturing/assets";
|
|
4
|
+
import W from "merge-refs";
|
|
5
|
+
import { forwardRef as X, useCallback as E, useRef as q, useEffect as B } from "react";
|
|
6
|
+
import { WithRenderProp as F } from "../utils/WithRenderProp.js";
|
|
7
|
+
import './style.css';/* empty css */
|
|
8
|
+
import { useCls as G } from "../utils/antdUtils.js";
|
|
9
|
+
import { clsx as l } from "../utils/cn.js";
|
|
10
|
+
const H = X(
|
|
11
|
+
({
|
|
12
|
+
size: h = "middle",
|
|
13
|
+
disabled: n = !1,
|
|
14
|
+
open: o = !1,
|
|
15
|
+
status: w,
|
|
16
|
+
placeholder: b = "Select...",
|
|
17
|
+
value: c,
|
|
18
|
+
prefix: x,
|
|
19
|
+
allowClear: u = !1,
|
|
20
|
+
suffixIcon: k,
|
|
21
|
+
clearIcon: m,
|
|
22
|
+
onClear: d,
|
|
23
|
+
onOpenChange: f,
|
|
24
|
+
classNames: e,
|
|
25
|
+
render: S,
|
|
26
|
+
role: j = "combobox",
|
|
27
|
+
className: L,
|
|
28
|
+
...P
|
|
29
|
+
}, T) => {
|
|
30
|
+
const r = G(), g = c != null && c !== "", $ = {
|
|
31
|
+
disabled: n,
|
|
32
|
+
open: o,
|
|
33
|
+
hasValue: g,
|
|
34
|
+
size: h
|
|
35
|
+
}, R = E(
|
|
36
|
+
(i) => {
|
|
37
|
+
i.stopPropagation(), d == null || d();
|
|
38
|
+
},
|
|
39
|
+
[d]
|
|
40
|
+
), y = q(null);
|
|
41
|
+
B(() => {
|
|
42
|
+
const i = y.current;
|
|
43
|
+
if (!i) return;
|
|
44
|
+
const v = (D) => {
|
|
45
|
+
D.key === "ArrowDown" && !n && !o && (D.preventDefault(), f == null || f(!0));
|
|
46
|
+
};
|
|
47
|
+
return i.addEventListener("keydown", v), () => {
|
|
48
|
+
i.removeEventListener("keydown", v);
|
|
49
|
+
};
|
|
50
|
+
}, [n, o, f]);
|
|
51
|
+
const A = E(
|
|
52
|
+
(i) => /* @__PURE__ */ p("button", { ...i, children: [
|
|
53
|
+
/* @__PURE__ */ t(
|
|
54
|
+
"span",
|
|
55
|
+
{
|
|
56
|
+
className: l(r("select-trigger-content"), e == null ? void 0 : e.content),
|
|
57
|
+
children: g ? /* @__PURE__ */ p("span", { className: r("select-trigger-value-with-prefix"), children: [
|
|
58
|
+
x,
|
|
59
|
+
/* @__PURE__ */ t(
|
|
60
|
+
"span",
|
|
61
|
+
{
|
|
62
|
+
className: l(
|
|
63
|
+
r("select-trigger-value"),
|
|
64
|
+
e == null ? void 0 : e.value
|
|
65
|
+
),
|
|
66
|
+
children: c
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] }) : /* @__PURE__ */ t(
|
|
70
|
+
"span",
|
|
71
|
+
{
|
|
72
|
+
className: l(
|
|
73
|
+
r("select-trigger-placeholder"),
|
|
74
|
+
e == null ? void 0 : e.placeholder
|
|
75
|
+
),
|
|
76
|
+
children: b
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
/* @__PURE__ */ p(
|
|
82
|
+
"span",
|
|
83
|
+
{
|
|
84
|
+
className: l(r("select-trigger-suffix"), e == null ? void 0 : e.suffix),
|
|
85
|
+
children: [
|
|
86
|
+
u && g && /* @__PURE__ */ t(
|
|
87
|
+
"span",
|
|
88
|
+
{
|
|
89
|
+
className: r("select-trigger-clear"),
|
|
90
|
+
unselectable: "on",
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
onClick: R,
|
|
93
|
+
children: m || /* @__PURE__ */ t("span", { className: r("select-trigger-clear-icon"), children: /* @__PURE__ */ t(K, { weight: "fill" }) })
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
(!u || !g) && /* @__PURE__ */ t(
|
|
97
|
+
"span",
|
|
98
|
+
{
|
|
99
|
+
className: r("select-trigger-arrow"),
|
|
100
|
+
unselectable: "on",
|
|
101
|
+
"aria-hidden": "true",
|
|
102
|
+
children: k || /* @__PURE__ */ t("span", { className: r("select-trigger-arrow-icon"), children: /* @__PURE__ */ t(V, { weight: "bold" }) })
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
] }),
|
|
109
|
+
[
|
|
110
|
+
g,
|
|
111
|
+
c,
|
|
112
|
+
x,
|
|
113
|
+
b,
|
|
114
|
+
u,
|
|
115
|
+
k,
|
|
116
|
+
m,
|
|
117
|
+
r,
|
|
118
|
+
e,
|
|
119
|
+
R
|
|
120
|
+
]
|
|
121
|
+
);
|
|
122
|
+
return /* @__PURE__ */ t(
|
|
123
|
+
F,
|
|
124
|
+
{
|
|
125
|
+
as: "button",
|
|
126
|
+
ref: W(T, y),
|
|
127
|
+
state: $,
|
|
128
|
+
className: l(
|
|
129
|
+
r("select-trigger"),
|
|
130
|
+
r(`select-trigger-${h}`),
|
|
131
|
+
n && r("select-trigger-disabled"),
|
|
132
|
+
o && r("select-trigger-open"),
|
|
133
|
+
w && r(`select-trigger-${w}`),
|
|
134
|
+
e == null ? void 0 : e.trigger,
|
|
135
|
+
L
|
|
136
|
+
),
|
|
137
|
+
disabled: n,
|
|
138
|
+
role: j,
|
|
139
|
+
"aria-expanded": o,
|
|
140
|
+
render: S || A,
|
|
141
|
+
...P
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
H.displayName = "SelectTrigger";
|
|
147
|
+
export {
|
|
148
|
+
H as SelectTrigger
|
|
149
|
+
};
|
|
150
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/select-trigger/component.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon, XCircleIcon } from \"@bioturing/assets\";\nimport mergeRefs from \"merge-refs\";\nimport React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { WithRenderProp, WithRenderPropProps } from \"../utils/WithRenderProp\";\nimport { ValidateStatus } from \"antd/es/form/FormItem\";\nimport \"./style.css\";\n\nexport type SelectTriggerState = {\n disabled: boolean;\n open: boolean;\n hasValue: boolean;\n size: \"small\" | \"middle\" | \"large\";\n};\n\nexport interface SelectTriggerProps\n extends Omit<\n WithRenderPropProps<\"button\", SelectTriggerState>,\n \"value\" | \"prefix\"\n > {\n /** Size variant */\n size?: \"small\" | \"middle\" | \"large\";\n /** Whether the component is disabled */\n disabled?: boolean;\n /** Whether the dropdown/popup is open */\n open?: boolean;\n /** Validation status */\n status?: ValidateStatus;\n /** Placeholder text */\n placeholder?: string;\n /** Current value/content to display */\n value?: React.ReactNode;\n /** Prefix content to display before the value (e.g., icon) */\n prefix?: React.ReactNode;\n /** Whether to show clear button when there's a value */\n allowClear?: boolean;\n /** Custom suffix icon (arrow icon) */\n suffixIcon?: React.ReactNode;\n /** Custom clear icon */\n clearIcon?: React.ReactNode;\n /** Clear handler */\n onClear?: () => void;\n /** Open state change handler */\n onOpenChange?: (open: boolean) => void;\n /** Custom class names */\n classNames?: {\n trigger?: string;\n content?: string;\n suffix?: string;\n placeholder?: string;\n value?: string;\n };\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n size = \"middle\",\n disabled = false,\n open = false,\n status,\n placeholder = \"Select...\",\n value,\n prefix,\n allowClear = false,\n suffixIcon,\n clearIcon,\n onClear,\n onOpenChange,\n classNames,\n render,\n role = \"combobox\",\n className,\n ...rest\n },\n ref\n ) => {\n const cls = useCls();\n const hasValue = value !== undefined && value !== null && value !== \"\";\n\n const triggerState: SelectTriggerState = {\n disabled,\n open,\n hasValue,\n size,\n };\n\n const handleClearClick = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onClear?.();\n },\n [onClear]\n );\n\n // Internal ref for the button element\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n // Handle keyboard shortcuts with addEventListener\n useEffect(() => {\n const buttonElement = buttonRef.current;\n if (!buttonElement) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Alt + Down Arrow to open dropdown\n if (e.key === \"ArrowDown\" && !disabled && !open) {\n e.preventDefault();\n onOpenChange?.(true);\n }\n // Escape to close dropdown\n // Comment because Popover would handle it\n // if (e.key === \"Escape\" && open) {\n // e.preventDefault();\n // onOpenChange?.(false);\n // }\n };\n\n buttonElement.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n buttonElement.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [disabled, open, onOpenChange]);\n\n const defaultRender = useCallback(\n (props: React.ComponentPropsWithoutRef<\"button\">) => (\n <button {...props}>\n <span\n className={clsx(cls(\"select-trigger-content\"), classNames?.content)}\n >\n {hasValue ? (\n <span className={cls(\"select-trigger-value-with-prefix\")}>\n {prefix}\n <span\n className={clsx(\n cls(\"select-trigger-value\"),\n classNames?.value\n )}\n >\n {value}\n </span>\n </span>\n ) : (\n <span\n className={clsx(\n cls(\"select-trigger-placeholder\"),\n classNames?.placeholder\n )}\n >\n {placeholder}\n </span>\n )}\n </span>\n <span\n className={clsx(cls(\"select-trigger-suffix\"), classNames?.suffix)}\n >\n {allowClear && hasValue && (\n <span\n className={cls(\"select-trigger-clear\")}\n unselectable=\"on\"\n aria-hidden=\"true\"\n onClick={handleClearClick}\n >\n {clearIcon || (\n <span className={cls(\"select-trigger-clear-icon\")}>\n <XCircleIcon weight=\"fill\" />\n </span>\n )}\n </span>\n )}\n {(!allowClear || !hasValue) && (\n <span\n className={cls(\"select-trigger-arrow\")}\n unselectable=\"on\"\n aria-hidden=\"true\"\n >\n {suffixIcon || (\n <span className={cls(\"select-trigger-arrow-icon\")}>\n <CaretDownIcon weight=\"bold\" />\n </span>\n )}\n </span>\n )}\n </span>\n </button>\n ),\n [\n hasValue,\n value,\n prefix,\n placeholder,\n allowClear,\n suffixIcon,\n clearIcon,\n cls,\n classNames,\n handleClearClick,\n ]\n );\n\n return (\n <WithRenderProp\n as=\"button\"\n ref={mergeRefs(ref, buttonRef)}\n state={triggerState}\n className={clsx(\n cls(\"select-trigger\"),\n cls(`select-trigger-${size}`),\n disabled && cls(\"select-trigger-disabled\"),\n open && cls(\"select-trigger-open\"),\n status && cls(`select-trigger-${status}`),\n classNames?.trigger,\n className\n )}\n disabled={disabled}\n role={role}\n aria-expanded={open}\n render={render || defaultRender}\n {...rest}\n />\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"names":["SelectTrigger","forwardRef","size","disabled","open","status","placeholder","value","prefix","allowClear","suffixIcon","clearIcon","onClear","onOpenChange","classNames","render","role","className","rest","ref","cls","useCls","hasValue","triggerState","handleClearClick","useCallback","e","buttonRef","useRef","useEffect","buttonElement","handleKeyDown","defaultRender","props","jsxs","jsx","clsx","XCircleIcon","CaretDownIcon","WithRenderProp","mergeRefs"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer components{.ds-select-trigger{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:100%;background-color:var(--ds-control-color-bg);border:1px solid var(--ds-control-color-border);border-radius:var(--ds-control-border-radius);transition:var(--ds-control-transition);text-align:left}.ds-select-trigger:focus,.ds-select-trigger:focus-visible{outline:none}.ds-select-trigger:hover:not(.ds-select-trigger-disabled){border-color:var(--ds-control-color-border-hover)}.ds-select-trigger:focus,.ds-select-trigger:focus-visible,.ds-select-trigger-focused{border:var(--ds-control-border-active);box-shadow:var(--ds-control-shadow-active)}.ds-select-trigger-open{border:var(--ds-control-border-active)}.ds-select-trigger-disabled{background-color:var(--ds-control-color-bg-disabled);border:var(--ds-control-color-border);cursor:not-allowed;color:var(--ds-control-color-text-disabled)}.ds-select-trigger-error{border:var(--ds-control-border-error-active)}.ds-select-trigger-error:focus,.ds-select-trigger-error:focus-visible,.ds-select-trigger-error.ds-select-trigger-focused{border:var(--ds-control-border-error-active);box-shadow:var(--ds-control-shadow-error-active)}.ds-select-trigger-warning{border:var(--ds-control-border-warning-active)}.ds-select-trigger-warning:focus,.ds-select-trigger-warning:focus-visible,.ds-select-trigger-warning.ds-select-trigger-focused{border:var(--ds-control-border-warning-active);box-shadow:var(--ds-control-shadow-warning-active)}.ds-select-trigger-content{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.ds-select-trigger-value{flex:1;color:var(--ds-control-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-value-with-prefix{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.ds-select-trigger-placeholder{flex:1;color:var(--ds-control-color-text-placeholder);pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-suffix{display:flex;align-items:center;justify-content:center;width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);position:relative;font-size:var(--ds-control-icon-size);flex-shrink:0}.ds-select-trigger-arrow{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--ds-control-color-icon);width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);pointer-events:none}.ds-select-trigger-arrow-icon{display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.ds-select-trigger-open .ds-select-trigger-arrow-icon{transform:rotate(180deg)}.ds-select-trigger-clear{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--ds-control-color-icon);width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);cursor:pointer;transition:color .2s ease}.ds-select-trigger-clear:hover{color:var(--ds-control-color-icon-hover)}.ds-select-trigger-clear-icon{display:flex;align-items:center;justify-content:center}.ds-select-trigger-small{padding:var(--ds-control-padding-small);min-height:var(--ds-control-min-height-small);line-height:var(--ds-control-line-height)}.ds-select-trigger-middle{padding:var(--ds-control-padding-middle);min-height:var(--ds-control-min-height-middle);line-height:var(--ds-control-line-height)}.ds-select-trigger-large{padding:var(--ds-control-padding-large);min-height:var(--ds-control-min-height-large);line-height:var(--ds-control-line-height)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{
|
|
1
|
+
@layer components{.ds-switch .ds-switch-inner span.ds-switch-inner-checked,.ds-switch .ds-switch-inner span.ds-switch-inner-unchecked{display:flex;justify-items:center;align-items:center}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}
|
|
1
|
+
@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}.ds-table-column-sort-icon svg:hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}.ds-table-column-filter-icon svg:hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}.ds-table-wrapper .ds-spin-container .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}.ds-table-zebra .ds-table{background:transparent}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>td{background:transparent}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-thead>tr>td,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>th,.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>td{border-bottom:0}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell:first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell:last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/theme-provider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as ConfigProvider,\n type ConfigProviderProps,\n} from \"antd/es/config-provider\";\nimport { Children, cloneElement, isValidElement, useLayoutEffect } from \"react\";\nimport { darkTheme, lightTheme } from \"../../tokens/and-theme/tokens\";\nimport { useCls, clsx, useAntdCssVarClassname } from \"../utils\";\nimport { StyleProvider } from \"@ant-design/cssinjs\";\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ThemeProviderProps\n extends Omit<ConfigProviderProps, \"theme\" | \"prefixCls\"> {\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}\n\nconst DSWrapper = ({\n children,\n theme,\n appendClassesTo,\n}: {\n children: React.ReactNode;\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}) => {\n const cls = useCls();\n const cssVars = useAntdCssVarClassname();\n const className = clsx(cls(\"theme-provider\"), theme.toString(), cssVars);\n useLayoutEffect(() => {\n const classes = className.split(\" \");\n const el =\n typeof appendClassesTo === \"string\"\n ? document.querySelector(appendClassesTo)\n : appendClassesTo;\n if (el) {\n el.classList.add(...classes);\n }\n return () => {\n if (el) {\n el.classList.remove(...classes);\n }\n };\n }, [appendClassesTo, className]);\n return appendClassesTo === undefined\n ? Children.map(children, (child) => {\n if (isValidElement(child))\n return cloneElement(child, {\n className: clsx(\n (child.props as { className?: string }).className,\n className
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/theme-provider/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as ConfigProvider,\n type ConfigProviderProps,\n} from \"antd/es/config-provider\";\nimport { Children, cloneElement, isValidElement, useLayoutEffect } from \"react\";\nimport { darkTheme, lightTheme } from \"../../tokens/and-theme/tokens\";\nimport { useCls, clsx, useAntdCssVarClassname } from \"../utils\";\nimport { StyleProvider } from \"@ant-design/cssinjs\";\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface ThemeProviderProps\n extends Omit<ConfigProviderProps, \"theme\" | \"prefixCls\"> {\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}\n\nconst DSWrapper = ({\n children,\n theme,\n appendClassesTo,\n}: {\n children: React.ReactNode;\n theme: \"light\" | \"dark\";\n appendClassesTo?: string | HTMLElement;\n}) => {\n const cls = useCls();\n const cssVars = useAntdCssVarClassname();\n const className = clsx(cls(\"theme-provider\"), theme.toString(), cssVars);\n useLayoutEffect(() => {\n const classes = className.split(\" \");\n const el =\n typeof appendClassesTo === \"string\"\n ? document.querySelector(appendClassesTo)\n : appendClassesTo;\n if (el) {\n el.classList.add(...classes);\n }\n return () => {\n if (el) {\n el.classList.remove(...classes);\n }\n };\n }, [appendClassesTo, className]);\n return appendClassesTo === undefined\n ? Children.map(children, (child) => {\n if (isValidElement(child))\n return cloneElement(child, {\n className: clsx(\n (child.props as { className?: string }).className,\n className,\n ),\n } as { className: string });\n return child;\n })\n : children;\n};\n\nexport const ThemeProvider = ({\n theme,\n appendClassesTo,\n children,\n}: ThemeProviderProps) => {\n return (\n <StyleProvider layer>\n <ConfigProvider\n theme={theme == \"light\" ? lightTheme : darkTheme}\n prefixCls=\"ds\"\n >\n <DSWrapper theme={theme} appendClassesTo={appendClassesTo}>\n {children}\n </DSWrapper>\n </ConfigProvider>\n </StyleProvider>\n );\n};\n"],"names":["DSWrapper","children","theme","appendClassesTo","cls","useCls","cssVars","useAntdCssVarClassname","className","clsx","useLayoutEffect","classes","el","Children","child","isValidElement","cloneElement","ThemeProvider","jsx","StyleProvider","ConfigProvider","lightTheme","darkTheme"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,MAIM;AACJ,QAAMC,IAAMC,EAAO,GACbC,IAAUC,EAAuB,GACjCC,IAAYC,EAAKL,EAAI,gBAAgB,GAAGF,EAAM,YAAYI,CAAO;AACvE,SAAAI,EAAgB,MAAM;AACd,UAAAC,IAAUH,EAAU,MAAM,GAAG,GAC7BI,IACJ,OAAOT,KAAoB,WACvB,SAAS,cAAcA,CAAe,IACtCA;AACN,WAAIS,KACCA,EAAA,UAAU,IAAI,GAAGD,CAAO,GAEtB,MAAM;AACX,MAAIC,KACCA,EAAA,UAAU,OAAO,GAAGD,CAAO;AAAA,IAElC;AAAA,EAAA,GACC,CAACR,GAAiBK,CAAS,CAAC,GACxBL,MAAoB,SACvBU,EAAS,IAAIZ,GAAU,CAACa,MAClBC,EAAeD,CAAK,IACfE,EAAaF,GAAO;AAAA,IACzB,WAAWL;AAAA,MACRK,EAAM,MAAiC;AAAA,MACxCN;AAAA,IAAA;AAAA,EACF,CACwB,IACrBM,CACR,IACDb;AACN,GAEagB,IAAgB,CAAC;AAAA,EAC5B,OAAAf;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAF;AACF,MAEI,gBAAAiB,EAACC,GAAc,EAAA,OAAK,IAClB,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,OAAOlB,KAAS,UAAUmB,IAAaC;AAAA,IACvC,WAAU;AAAA,IAEV,UAAC,gBAAAJ,EAAAlB,GAAA,EAAU,OAAAE,GAAc,iBAAAC,GACtB,UAAAF,EACH,CAAA;AAAA,EAAA;AAAA,GAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-
|
|
1
|
+
@layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-control-border-radius: 6px;--ds-control-transition: all .2s;--ds-control-padding-small: 1px 8px;--ds-control-padding-middle: 5px 12px;--ds-control-padding-large: 9px 12px;--ds-control-min-height-small: 24px;--ds-control-min-height-middle: 32px;--ds-control-min-height-large: 40px;--ds-control-line-height: 20px;--ds-control-color-border-hover: var(--ds-color-primary-hover);--ds-control-color-border-focus: var(--ds-color-primary);--ds-control-color-bg-disabled: var(--ds-color-bg-container-disabled);--ds-control-color-text-disabled: var(--ds-color-text-disabled);--ds-control-icon-size: 12px;--ds-control-color-bg: var(--ds-color-bg-container);--ds-control-color-border: var(--ds-color-border);--ds-control-color-border-active: var(--ds-color-primary);--ds-control-color-border-error-active: var(--ds-color-error);--ds-control-color-border-warning-active: var(--ds-color-warning);--ds-control-color-icon: var(--ds-color-text-quaternary);--ds-control-color-icon-hover: var(--ds-color-icon-hover);--ds-control-border: 1px solid var(--ds-control-color-border);--ds-control-border-active: 1px solid var(--ds-control-color-border-active);--ds-control-border-error-active: 1px solid var(--ds-control-color-border-error-active);--ds-control-border-warning-active: 1px solid var(--ds-control-color-border-warning-active);--ds-control-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-control-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-control-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-control-color-text-placeholder: var(--ds-color-text-placeholder);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite;--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-tour .ds-tour-header{padding-top:1rem;padding-bottom:.75rem}.ds-tour .ds-tour-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-tour .ds-tour-description{font-size:var(--text-ds-md);font-weight:var(--text-ds-md--font-weight);line-height:var(--text-ds-md--line-height)}
|
|
1
|
+
@layer components{.ds-tour .ds-tour-header{padding-top:1rem;padding-bottom:.75rem}.ds-tour .ds-tour-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-tour .ds-tour-description{font-size:var(--text-ds-md);font-weight:var(--text-ds-md--font-weight);line-height:var(--text-ds-md--line-height)}.ds-tour .ds-tour-description p:not(:first-child),.ds-tour .ds-tour-description ul:not(:first-child),.ds-tour .ds-tour-description ol:not(:first-child){margin-top:.875rem}.ds-tour .ds-tour-description strong{font-weight:600}.ds-tour .ds-tour-description ul{list-style:disc;padding-left:1rem}.ds-tour .ds-tour-description ol{list-style:decimal;padding-left:1rem}.ds-tour .ds-tour-description li{padding-left:.5rem}.ds-tour .ds-tour-description li:not(:first-child){margin-top:.5rem}.ds-tour .ds-tour-description li svg{display:inline-block;font-size:1.25rem;margin-bottom:-.25rem}.ds-tour .ds-tour-footer{padding-top:1rem}.ds-tour .ds-tour-indicator-wrapper{display:inline-flex;align-items:center;width:100%;height:100%;gap:.5rem}.ds-tour .ds-tour-indicator-summary-text{font-size:var(--text-ds-sm);font-weight:var(--text-ds-sm--font-weight);line-height:var(--text-ds-sm--line-height);color:var(--ds-color-text-tertiary);display:inline-flex;align-items:center;padding-top:.25rem}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record
|
|
1
|
+
{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n T extends React.ElementType = \"div\",\n State extends Record<string | number | symbol, unknown> = Record<\n string,\n unknown\n >\n> = React.ComponentPropsWithoutRef<T> & {\n render?: useRender.RenderProp<State>;\n as?: T;\n state?: State;\n};\n\nconst WithRenderPropInner = <\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n>(\n props: WithRenderPropProps<T, State>,\n ref: React.ForwardedRef<T>\n) => {\n const { render, as: Tag = \"div\", state, ...etc } = props;\n const renderedElement = useRender({\n render: render || ((props) => <Tag {...props} />),\n props: etc,\n state,\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n });\n return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n T extends React.ElementType = \"div\",\n State extends Record<string, unknown> = Record<string, unknown>\n>(\n props: WithRenderPropProps<T, State> & {\n ref?: React.Ref<ElementTypeToDOMType<T>>;\n }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","state","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAgBA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACG,QAAA,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,OAAAC,GAAO,GAAGC,MAAQL;AAO5C,SANiBM,EAAU;AAAA,IAChC,QAAQJ,MAAW,CAACF,MAAW,gBAAAO,EAAAJ,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOK;AAAA,IACP,OAAAD;AAAA,IACA,KAAAH;AAAA,EAAA,CACD;AAEH,GAEaO,IAAiBC,EAAWV,CAAmB;"}
|