@dotss/ui 1.4.0 → 1.6.0
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/ChainPicker/ChainPicker.cjs +6 -6
- package/ChainPicker/ChainPicker.d.ts +2 -0
- package/ChainPicker/ChainPicker.es.js +149 -130
- package/Tab/Tab.cjs +7 -7
- package/Tab/Tab.es.js +145 -96
- package/Tab/TabBlock/TabBlock.cjs +6 -6
- package/Tab/TabBlock/TabBlock.es.js +72 -55
- package/Tooltip/Tooltip.cjs +11 -6
- package/Tooltip/Tooltip.d.ts +2 -1
- package/Tooltip/Tooltip.es.js +177 -160
- package/Tooltip/Tooltip.stories.d.ts +6 -0
- package/package.json +1 -1
package/Tooltip/Tooltip.es.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as V, useId as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
const
|
|
1
|
+
import { jsxs as R, jsx as $ } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef as V, useId as w, useRef as L, useState as G, useEffect as I, Children as J, isValidElement as Q, cloneElement as U } from "react";
|
|
3
|
+
import g from "../Flexbox/Flexbox.es.js";
|
|
4
|
+
import z from "../Icon/Icon.es.js";
|
|
5
|
+
import Z from "../Typography/Typography.es.js";
|
|
6
|
+
import _ from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
|
|
7
|
+
import D from "@emotion/styled";
|
|
8
|
+
const A = D.div`
|
|
9
9
|
position: relative;
|
|
10
10
|
display: inline-block;
|
|
11
11
|
&[open] > [role='dialog'] {
|
|
12
12
|
display: flex;
|
|
13
13
|
}
|
|
14
|
-
`,
|
|
14
|
+
`, O = D.div`
|
|
15
15
|
position: absolute;
|
|
16
16
|
display: none;
|
|
17
17
|
flex-direction: column;
|
|
18
|
-
gap: ${({ theme: { spacing:
|
|
19
|
-
padding: ${({ theme: { spacing:
|
|
18
|
+
gap: ${({ theme: { spacing: e } }) => `${e.content(1)}px`};
|
|
19
|
+
padding: ${({ theme: { spacing: e } }) => `${e.content(3)}px`};
|
|
20
20
|
border-radius: 8px;
|
|
21
21
|
width: auto;
|
|
22
22
|
height: auto;
|
|
@@ -26,56 +26,71 @@ const _ = z.div`
|
|
|
26
26
|
white-space: nowrap;
|
|
27
27
|
word-break: break-all;
|
|
28
28
|
|
|
29
|
+
& svg:not(.tooltip-closer) {
|
|
30
|
+
width: 24,
|
|
31
|
+
height: 24
|
|
32
|
+
}
|
|
33
|
+
|
|
29
34
|
${({
|
|
30
35
|
theme: {
|
|
31
|
-
palette: { brand:
|
|
36
|
+
palette: { brand: e, grey: t }
|
|
32
37
|
},
|
|
33
|
-
color:
|
|
38
|
+
color: c
|
|
34
39
|
}) => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
if (c === "primary")
|
|
41
|
+
return {
|
|
42
|
+
backgroundColor: e.primary.tooltip,
|
|
43
|
+
color: t[100]
|
|
44
|
+
};
|
|
45
|
+
if (c === "secondary")
|
|
46
|
+
return {
|
|
47
|
+
backgroundColor: t[80],
|
|
48
|
+
color: t.white
|
|
49
|
+
};
|
|
43
50
|
}}
|
|
44
51
|
|
|
45
|
-
${({ theme: { typography: t } }) =>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
${({ size: e, theme: { typography: t, spacing: c } }) => {
|
|
53
|
+
if (e === "small")
|
|
54
|
+
return {
|
|
55
|
+
fontSize: t.c3R.size,
|
|
56
|
+
fontWeight: t.c3R.weight,
|
|
57
|
+
lineHeight: t.c3R.lineHeight,
|
|
58
|
+
letterSpacing: t.c3R.letterSpacing,
|
|
59
|
+
padding: c.content(2)
|
|
60
|
+
};
|
|
61
|
+
if (e === "medium")
|
|
62
|
+
return {
|
|
63
|
+
fontSize: t.b4R.size,
|
|
64
|
+
fontWeight: t.b4R.weight,
|
|
65
|
+
lineHeight: t.b4R.lineHeight,
|
|
66
|
+
letterSpacing: t.b4R.letterSpacing,
|
|
67
|
+
padding: c.content(3)
|
|
68
|
+
};
|
|
69
|
+
}};
|
|
55
70
|
|
|
56
71
|
${({
|
|
57
72
|
theme: {
|
|
58
|
-
palette: { brand:
|
|
73
|
+
palette: { brand: e, grey: t }
|
|
59
74
|
},
|
|
60
|
-
placement:
|
|
61
|
-
color:
|
|
62
|
-
offset:
|
|
63
|
-
arrowOffset:
|
|
75
|
+
placement: c,
|
|
76
|
+
color: r,
|
|
77
|
+
offset: d,
|
|
78
|
+
arrowOffset: p
|
|
64
79
|
}) => {
|
|
65
80
|
let o = {};
|
|
66
|
-
const
|
|
67
|
-
switch (
|
|
81
|
+
const a = (d == null ? void 0 : d.x) || 0, n = (d == null ? void 0 : d.y) || 0, m = (p == null ? void 0 : p.x) || 0, l = (p == null ? void 0 : p.y) || 0;
|
|
82
|
+
switch (c) {
|
|
68
83
|
case "bottom-left":
|
|
69
84
|
o = {
|
|
70
|
-
top: `calc(-12px + ${
|
|
71
|
-
left: `calc(-6px + ${
|
|
85
|
+
top: `calc(-12px + ${n}px)`,
|
|
86
|
+
left: `calc(-6px + ${a}px)`,
|
|
72
87
|
transform: "translateY(-100%)",
|
|
73
88
|
"&:after": {
|
|
74
89
|
content: '""',
|
|
75
90
|
position: "absolute",
|
|
76
91
|
top: "100%",
|
|
77
|
-
left: `calc(12px + ${
|
|
78
|
-
borderTop: `8px solid ${
|
|
92
|
+
left: `calc(12px + ${m}px)`,
|
|
93
|
+
borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
79
94
|
borderRight: "6px solid transparent",
|
|
80
95
|
borderBottom: "8px solid transparent",
|
|
81
96
|
borderLeft: "6px solid transparent"
|
|
@@ -84,16 +99,16 @@ const _ = z.div`
|
|
|
84
99
|
break;
|
|
85
100
|
case "bottom-center":
|
|
86
101
|
o = {
|
|
87
|
-
top: `calc(-12px + ${
|
|
102
|
+
top: `calc(-12px + ${n}px)`,
|
|
88
103
|
left: "50%",
|
|
89
|
-
transform: `translate(calc(-50% + ${
|
|
104
|
+
transform: `translate(calc(-50% + ${a}px), -100%)`,
|
|
90
105
|
"&:after": {
|
|
91
106
|
content: '""',
|
|
92
107
|
position: "absolute",
|
|
93
108
|
top: "100%",
|
|
94
|
-
left: `calc(50% + ${
|
|
109
|
+
left: `calc(50% + ${m}px)`,
|
|
95
110
|
transform: "translateX(-50%)",
|
|
96
|
-
borderTop: `8px solid ${
|
|
111
|
+
borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
97
112
|
borderRight: "6px solid transparent",
|
|
98
113
|
borderBottom: "8px solid transparent",
|
|
99
114
|
borderLeft: "6px solid transparent"
|
|
@@ -102,15 +117,15 @@ const _ = z.div`
|
|
|
102
117
|
break;
|
|
103
118
|
case "bottom-right":
|
|
104
119
|
o = {
|
|
105
|
-
top: `calc(-12px + ${
|
|
106
|
-
right: `calc(-6px - ${
|
|
120
|
+
top: `calc(-12px + ${n}px)`,
|
|
121
|
+
right: `calc(-6px - ${a}px)`,
|
|
107
122
|
transform: "translateY(-100%)",
|
|
108
123
|
"&:after": {
|
|
109
124
|
content: '""',
|
|
110
125
|
position: "absolute",
|
|
111
126
|
top: "100%",
|
|
112
|
-
right: `calc(12px - ${
|
|
113
|
-
borderTop: `8px solid ${
|
|
127
|
+
right: `calc(12px - ${m}px)`,
|
|
128
|
+
borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
114
129
|
borderRight: "6px solid transparent",
|
|
115
130
|
borderBottom: "8px solid transparent",
|
|
116
131
|
borderLeft: "6px solid transparent"
|
|
@@ -119,15 +134,15 @@ const _ = z.div`
|
|
|
119
134
|
break;
|
|
120
135
|
case "left-top":
|
|
121
136
|
o = {
|
|
122
|
-
top: `calc(-6px + ${
|
|
123
|
-
left: `calc(100% + 12px + ${
|
|
137
|
+
top: `calc(-6px + ${n}px)`,
|
|
138
|
+
left: `calc(100% + 12px + ${a}px)`,
|
|
124
139
|
"&:after": {
|
|
125
140
|
content: '""',
|
|
126
141
|
position: "absolute",
|
|
127
|
-
top: `calc(12px + ${
|
|
142
|
+
top: `calc(12px + ${l}px)`,
|
|
128
143
|
right: "100%",
|
|
129
144
|
borderTop: "6px solid transparent",
|
|
130
|
-
borderRight: `8px solid ${
|
|
145
|
+
borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
131
146
|
borderBottom: "6px solid transparent",
|
|
132
147
|
borderLeft: "8px solid transparent"
|
|
133
148
|
}
|
|
@@ -136,16 +151,16 @@ const _ = z.div`
|
|
|
136
151
|
case "left-middle":
|
|
137
152
|
o = {
|
|
138
153
|
top: "50%",
|
|
139
|
-
left: `calc(100% + 12px + ${
|
|
140
|
-
transform: `translateY(calc(-50% + ${
|
|
154
|
+
left: `calc(100% + 12px + ${a}px)`,
|
|
155
|
+
transform: `translateY(calc(-50% + ${n}px))`,
|
|
141
156
|
"&:after": {
|
|
142
157
|
content: '""',
|
|
143
158
|
position: "absolute",
|
|
144
|
-
top: `calc(50% + ${
|
|
159
|
+
top: `calc(50% + ${l}px)`,
|
|
145
160
|
right: "100%",
|
|
146
161
|
transform: "translateY(-50%)",
|
|
147
162
|
borderTop: "6px solid transparent",
|
|
148
|
-
borderRight: `8px solid ${
|
|
163
|
+
borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
149
164
|
borderBottom: "6px solid transparent",
|
|
150
165
|
borderLeft: "8px solid transparent"
|
|
151
166
|
}
|
|
@@ -153,15 +168,15 @@ const _ = z.div`
|
|
|
153
168
|
break;
|
|
154
169
|
case "left-bottom":
|
|
155
170
|
o = {
|
|
156
|
-
bottom: `calc(-6px - ${
|
|
157
|
-
left: `calc(100% + 12px + ${
|
|
171
|
+
bottom: `calc(-6px - ${n}px)`,
|
|
172
|
+
left: `calc(100% + 12px + ${a}px)`,
|
|
158
173
|
"&:after": {
|
|
159
174
|
content: '""',
|
|
160
175
|
position: "absolute",
|
|
161
|
-
bottom: `calc(12px - ${
|
|
176
|
+
bottom: `calc(12px - ${l}px)`,
|
|
162
177
|
right: "100%",
|
|
163
178
|
borderTop: "6px solid transparent",
|
|
164
|
-
borderRight: `8px solid ${
|
|
179
|
+
borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
165
180
|
borderBottom: "6px solid transparent",
|
|
166
181
|
borderLeft: "8px solid transparent"
|
|
167
182
|
}
|
|
@@ -169,16 +184,16 @@ const _ = z.div`
|
|
|
169
184
|
break;
|
|
170
185
|
case "top-left":
|
|
171
186
|
o = {
|
|
172
|
-
left: `calc(-6px + ${
|
|
173
|
-
transform: `translate(0, calc(12px + ${
|
|
187
|
+
left: `calc(-6px + ${a}px)`,
|
|
188
|
+
transform: `translate(0, calc(12px + ${n}px))`,
|
|
174
189
|
"&:after": {
|
|
175
190
|
content: '""',
|
|
176
191
|
position: "absolute",
|
|
177
192
|
bottom: "100%",
|
|
178
|
-
left: `calc(12px + ${
|
|
193
|
+
left: `calc(12px + ${m}px)`,
|
|
179
194
|
borderTop: "8px solid transparent",
|
|
180
195
|
borderRight: "6px solid transparent",
|
|
181
|
-
borderBottom: `8px solid ${
|
|
196
|
+
borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
182
197
|
borderLeft: "6px solid transparent"
|
|
183
198
|
}
|
|
184
199
|
};
|
|
@@ -186,149 +201,150 @@ const _ = z.div`
|
|
|
186
201
|
case "top-center":
|
|
187
202
|
o = {
|
|
188
203
|
right: "50%",
|
|
189
|
-
transform: `translate(calc(50% + ${
|
|
204
|
+
transform: `translate(calc(50% + ${a}px), calc(12px + ${n}px))`,
|
|
190
205
|
"&:after": {
|
|
191
206
|
content: '""',
|
|
192
207
|
position: "absolute",
|
|
193
208
|
bottom: "100%",
|
|
194
|
-
left: `calc(50% + ${
|
|
209
|
+
left: `calc(50% + ${m}px)`,
|
|
195
210
|
transform: "translateX(-50%)",
|
|
196
211
|
borderTop: "8px solid transparent",
|
|
197
212
|
borderRight: "6px solid transparent",
|
|
198
|
-
borderBottom: `8px solid ${
|
|
213
|
+
borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
199
214
|
borderLeft: "6px solid transparent"
|
|
200
215
|
}
|
|
201
216
|
};
|
|
202
217
|
break;
|
|
203
218
|
case "top-right":
|
|
204
219
|
o = {
|
|
205
|
-
right: `calc(-6px - ${
|
|
206
|
-
transform: `translate(0, calc(12px + ${
|
|
220
|
+
right: `calc(-6px - ${a}px)`,
|
|
221
|
+
transform: `translate(0, calc(12px + ${n}px))`,
|
|
207
222
|
"&:after": {
|
|
208
223
|
content: '""',
|
|
209
224
|
position: "absolute",
|
|
210
225
|
bottom: "100%",
|
|
211
|
-
right: `calc(12px - ${
|
|
226
|
+
right: `calc(12px - ${m}px)`,
|
|
212
227
|
borderTop: "8px solid transparent",
|
|
213
228
|
borderRight: "6px solid transparent",
|
|
214
|
-
borderBottom: `8px solid ${
|
|
229
|
+
borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
|
|
215
230
|
borderLeft: "6px solid transparent"
|
|
216
231
|
}
|
|
217
232
|
};
|
|
218
233
|
break;
|
|
219
234
|
case "right-top":
|
|
220
235
|
o = {
|
|
221
|
-
top: `calc(-6px + ${
|
|
222
|
-
right: `calc(100% + 12px + ${
|
|
236
|
+
top: `calc(-6px + ${n}px)`,
|
|
237
|
+
right: `calc(100% + 12px + ${a}px)`,
|
|
223
238
|
"&:after": {
|
|
224
239
|
content: '""',
|
|
225
240
|
position: "absolute",
|
|
226
|
-
top: `calc(12px + ${
|
|
241
|
+
top: `calc(12px + ${l}px)`,
|
|
227
242
|
left: "100%",
|
|
228
243
|
borderTop: "6px solid transparent",
|
|
229
244
|
borderRight: "8px solid transparent",
|
|
230
245
|
borderBottom: "6px solid transparent",
|
|
231
|
-
borderLeft: `8px solid ${
|
|
246
|
+
borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
|
|
232
247
|
}
|
|
233
248
|
};
|
|
234
249
|
break;
|
|
235
250
|
case "right-middle":
|
|
236
251
|
o = {
|
|
237
252
|
top: "50%",
|
|
238
|
-
right: `calc(100% + 12px + ${
|
|
239
|
-
transform: `translateY(calc(-50% + ${
|
|
253
|
+
right: `calc(100% + 12px + ${a}px)`,
|
|
254
|
+
transform: `translateY(calc(-50% + ${n}px))`,
|
|
240
255
|
"&:after": {
|
|
241
256
|
content: '""',
|
|
242
257
|
position: "absolute",
|
|
243
|
-
top: `calc(50% + ${
|
|
258
|
+
top: `calc(50% + ${l}px)`,
|
|
244
259
|
left: "100%",
|
|
245
260
|
transform: "translateY(-50%)",
|
|
246
261
|
borderTop: "6px solid transparent",
|
|
247
262
|
borderRight: "8px solid transparent",
|
|
248
263
|
borderBottom: "6px solid transparent",
|
|
249
|
-
borderLeft: `8px solid ${
|
|
264
|
+
borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
|
|
250
265
|
}
|
|
251
266
|
};
|
|
252
267
|
break;
|
|
253
268
|
case "right-bottom":
|
|
254
269
|
o = {
|
|
255
|
-
bottom: `calc(-6px - ${
|
|
256
|
-
right: `calc(100% + 12px + ${
|
|
270
|
+
bottom: `calc(-6px - ${n}px)`,
|
|
271
|
+
right: `calc(100% + 12px + ${a}px)`,
|
|
257
272
|
"&:after": {
|
|
258
273
|
content: '""',
|
|
259
274
|
position: "absolute",
|
|
260
|
-
bottom: `calc(12px - ${
|
|
275
|
+
bottom: `calc(12px - ${l}px)`,
|
|
261
276
|
left: "100%",
|
|
262
277
|
borderTop: "6px solid transparent",
|
|
263
278
|
borderRight: "8px solid transparent",
|
|
264
279
|
borderBottom: "6px solid transparent",
|
|
265
|
-
borderLeft: `8px solid ${
|
|
280
|
+
borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
|
|
266
281
|
}
|
|
267
282
|
};
|
|
268
283
|
break;
|
|
269
284
|
}
|
|
270
285
|
return o;
|
|
271
286
|
}};
|
|
272
|
-
`,
|
|
273
|
-
children:
|
|
274
|
-
placement:
|
|
275
|
-
color:
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
287
|
+
`, nt = V(function({
|
|
288
|
+
children: t,
|
|
289
|
+
placement: c = "bottom-center",
|
|
290
|
+
color: r = "primary",
|
|
291
|
+
size: d = "medium",
|
|
292
|
+
title: p,
|
|
293
|
+
body: o,
|
|
294
|
+
closer: a,
|
|
279
295
|
endAdornment: n,
|
|
280
|
-
inlineCSS:
|
|
296
|
+
inlineCSS: m,
|
|
281
297
|
open: l = !1,
|
|
282
|
-
onClose:
|
|
298
|
+
onClose: x,
|
|
283
299
|
wrapperProps: y,
|
|
284
|
-
offset:
|
|
285
|
-
arrowOffset:
|
|
286
|
-
...
|
|
300
|
+
offset: j,
|
|
301
|
+
arrowOffset: H,
|
|
302
|
+
...s
|
|
287
303
|
}, X) {
|
|
288
|
-
const q =
|
|
289
|
-
(i.key === "Enter" || i.key === " ") && (
|
|
304
|
+
const q = w(), N = w(), F = w(), { isKeyboardMode: k } = _(), S = L(null), B = L(null), v = L(!0), [M, W] = G(!1), E = (s == null ? void 0 : s.id) || q, K = (s == null ? void 0 : s.titleId) || N, T = (s == null ? void 0 : s.bodyId) || F, Y = (i) => {
|
|
305
|
+
(i.key === "Enter" || i.key === " ") && (x == null || x(i));
|
|
290
306
|
};
|
|
291
|
-
return
|
|
292
|
-
|
|
293
|
-
}, [l]),
|
|
294
|
-
const i = (
|
|
295
|
-
|
|
307
|
+
return I(() => {
|
|
308
|
+
B.current && B.current.getBoundingClientRect().width >= 276 && W(!0);
|
|
309
|
+
}, [l]), I(() => {
|
|
310
|
+
const i = (b) => {
|
|
311
|
+
b.key === "Escape" && l && (b.stopPropagation(), x == null || x(b));
|
|
296
312
|
};
|
|
297
313
|
return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
|
|
298
|
-
}, [l,
|
|
299
|
-
var
|
|
300
|
-
if (
|
|
301
|
-
|
|
314
|
+
}, [l, x]), I(() => {
|
|
315
|
+
var b, u, f;
|
|
316
|
+
if (v.current) {
|
|
317
|
+
v.current = !1;
|
|
302
318
|
return;
|
|
303
319
|
}
|
|
304
320
|
if (l) {
|
|
305
|
-
const
|
|
321
|
+
const h = (b = S.current) == null ? void 0 : b.querySelector(
|
|
306
322
|
'.tooltip-closer[role="button"]'
|
|
307
323
|
);
|
|
308
|
-
if (
|
|
309
|
-
const
|
|
310
|
-
|
|
324
|
+
if (h && k && h.focus(), !h) {
|
|
325
|
+
const C = (u = S.current) == null ? void 0 : u.querySelector('[role="button"]');
|
|
326
|
+
C && k && C.focus();
|
|
311
327
|
}
|
|
312
328
|
return;
|
|
313
329
|
}
|
|
314
|
-
const i = (
|
|
315
|
-
i &&
|
|
316
|
-
}, [l,
|
|
317
|
-
|
|
330
|
+
const i = (f = S.current) == null ? void 0 : f.querySelector('[role="button"]');
|
|
331
|
+
i && k && i.focus();
|
|
332
|
+
}, [l, k]), /* @__PURE__ */ R(
|
|
333
|
+
A,
|
|
318
334
|
{
|
|
319
|
-
ref:
|
|
335
|
+
ref: S,
|
|
320
336
|
open: l,
|
|
321
337
|
...y,
|
|
322
338
|
css: y == null ? void 0 : y.inlineCSS,
|
|
323
339
|
children: [
|
|
324
|
-
|
|
325
|
-
if (!
|
|
340
|
+
J.map(t, (i) => {
|
|
341
|
+
if (!Q(i))
|
|
326
342
|
return i;
|
|
327
|
-
const
|
|
328
|
-
var
|
|
329
|
-
(
|
|
343
|
+
const b = (u) => {
|
|
344
|
+
var f, h;
|
|
345
|
+
(u.key === "Enter" || u.key === " ") && ((h = (f = i.props) == null ? void 0 : f.onClick) == null || h.call(f, u));
|
|
330
346
|
};
|
|
331
|
-
return
|
|
347
|
+
return U(i, {
|
|
332
348
|
inlineCSS: {
|
|
333
349
|
cursor: "pointer",
|
|
334
350
|
"&:active": {
|
|
@@ -341,52 +357,53 @@ const _ = z.div`
|
|
|
341
357
|
"aria-hidden": !1,
|
|
342
358
|
"aria-expanded": l,
|
|
343
359
|
"aria-haspopup": "dialog",
|
|
344
|
-
"aria-controls":
|
|
360
|
+
"aria-controls": E,
|
|
345
361
|
focusable: !0,
|
|
346
|
-
onKeyDown:
|
|
362
|
+
onKeyDown: b,
|
|
347
363
|
...i.props
|
|
348
364
|
});
|
|
349
365
|
}),
|
|
350
|
-
/* @__PURE__ */
|
|
351
|
-
|
|
366
|
+
/* @__PURE__ */ R(
|
|
367
|
+
O,
|
|
352
368
|
{
|
|
353
|
-
id:
|
|
369
|
+
id: E,
|
|
354
370
|
className: "tooltip",
|
|
355
371
|
role: "dialog",
|
|
356
372
|
"aria-modal": "true",
|
|
357
|
-
"aria-labelledby":
|
|
358
|
-
"aria-describedby":
|
|
373
|
+
"aria-labelledby": p ? K : T,
|
|
374
|
+
"aria-describedby": o ? T : void 0,
|
|
375
|
+
size: d,
|
|
359
376
|
ref: X,
|
|
360
|
-
placement:
|
|
361
|
-
color:
|
|
362
|
-
offset:
|
|
363
|
-
arrowOffset:
|
|
364
|
-
...
|
|
365
|
-
css:
|
|
377
|
+
placement: c,
|
|
378
|
+
color: r,
|
|
379
|
+
offset: j,
|
|
380
|
+
arrowOffset: H,
|
|
381
|
+
...s,
|
|
382
|
+
css: m,
|
|
366
383
|
children: [
|
|
367
|
-
|
|
368
|
-
/* @__PURE__ */
|
|
369
|
-
|
|
384
|
+
p && /* @__PURE__ */ R(g, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
|
|
385
|
+
/* @__PURE__ */ $(
|
|
386
|
+
Z,
|
|
370
387
|
{
|
|
371
|
-
id:
|
|
372
|
-
variant: "h5B",
|
|
373
|
-
color:
|
|
374
|
-
children:
|
|
388
|
+
id: K,
|
|
389
|
+
variant: d === "medium" ? "h5B" : "c3B",
|
|
390
|
+
color: r === "primary" ? "grey.100" : "grey.white",
|
|
391
|
+
children: p
|
|
375
392
|
}
|
|
376
393
|
),
|
|
377
|
-
|
|
378
|
-
|
|
394
|
+
a && /* @__PURE__ */ $(g, { flexShrink: 0, children: /* @__PURE__ */ $(
|
|
395
|
+
z,
|
|
379
396
|
{
|
|
380
397
|
className: "tooltip-closer",
|
|
381
398
|
name: "CloseLine",
|
|
382
399
|
size: "xSmall",
|
|
383
|
-
color:
|
|
400
|
+
color: r === "primary" ? "grey.100" : "grey.white",
|
|
384
401
|
role: "button",
|
|
385
402
|
"aria-hidden": "false",
|
|
386
403
|
focusable: "true",
|
|
387
404
|
tabIndex: 0,
|
|
388
|
-
onClick:
|
|
389
|
-
onKeyDown:
|
|
405
|
+
onClick: x,
|
|
406
|
+
onKeyDown: Y,
|
|
390
407
|
"aria-label": "닫기",
|
|
391
408
|
inlineCSS: {
|
|
392
409
|
marginLeft: "2px",
|
|
@@ -396,30 +413,30 @@ const _ = z.div`
|
|
|
396
413
|
}
|
|
397
414
|
) })
|
|
398
415
|
] }),
|
|
399
|
-
|
|
400
|
-
|
|
416
|
+
o && /* @__PURE__ */ R(
|
|
417
|
+
g,
|
|
401
418
|
{
|
|
402
419
|
id: T,
|
|
403
420
|
alignItems: "center",
|
|
404
421
|
gap: 2,
|
|
405
|
-
ref:
|
|
406
|
-
style:
|
|
422
|
+
ref: B,
|
|
423
|
+
style: M ? { width: "276px", whiteSpace: "wrap" } : {},
|
|
407
424
|
children: [
|
|
408
|
-
|
|
409
|
-
n && /* @__PURE__ */
|
|
410
|
-
!
|
|
411
|
-
|
|
425
|
+
o,
|
|
426
|
+
n && /* @__PURE__ */ $(g, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: n }),
|
|
427
|
+
!p && a && /* @__PURE__ */ $(g, { flexShrink: 0, children: /* @__PURE__ */ $(
|
|
428
|
+
z,
|
|
412
429
|
{
|
|
413
430
|
className: "tooltip-closer",
|
|
414
431
|
name: "CloseLine",
|
|
415
432
|
size: "xSmall",
|
|
416
|
-
color:
|
|
433
|
+
color: r === "primary" ? "grey.100" : "grey.white",
|
|
417
434
|
role: "button",
|
|
418
435
|
"aria-hidden": "false",
|
|
419
436
|
focusable: "true",
|
|
420
437
|
tabIndex: 0,
|
|
421
|
-
onClick:
|
|
422
|
-
onKeyDown:
|
|
438
|
+
onClick: x,
|
|
439
|
+
onKeyDown: Y,
|
|
423
440
|
"aria-label": "닫기",
|
|
424
441
|
inlineCSS: {
|
|
425
442
|
marginLeft: "2px",
|
|
@@ -439,5 +456,5 @@ const _ = z.div`
|
|
|
439
456
|
);
|
|
440
457
|
});
|
|
441
458
|
export {
|
|
442
|
-
|
|
459
|
+
nt as default
|
|
443
460
|
};
|