@atom-learning/components 1.12.0 → 1.14.2

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/CHANGELOG.md CHANGED
@@ -1,11 +1,11 @@
1
- # [1.12.0](https://github.com/Atom-Learning/components/compare/v1.11.0...v1.12.0) (2022-05-23)
1
+ ## [1.14.2](https://github.com/Atom-Learning/components/compare/v1.14.1...v1.14.2) (2022-06-09)
2
2
 
3
3
 
4
- ### Features
4
+ ### Bug Fixes
5
5
 
6
- * **form:** added form submission documentation ([30fa597](https://github.com/Atom-Learning/components/commit/30fa5970de14c91f8e3df01834adf061960eaa03))
7
- * **form:** added optional onError callback to handleSubmit ([4f4cbf4](https://github.com/Atom-Learning/components/commit/4f4cbf4f028c15a7b3a4ecafa5b26ad2a7a08a5c))
8
- * **form:** fixed wording in form submission doc and test case title ([569307f](https://github.com/Atom-Learning/components/commit/569307fe3a493ee8de303d6cc80deed2da514a3b))
6
+ * add Portal to AlertDialog.Content ([012690f](https://github.com/Atom-Learning/components/commit/012690fe4521cb9bd21d0f97f492c13e407eb100))
7
+ * alertdialog z-index ([4e0d1c4](https://github.com/Atom-Learning/components/commit/4e0d1c422e7f82a35a1a7622a985a770bcb61684))
8
+ * alertdialog z-index ([60a6d91](https://github.com/Atom-Learning/components/commit/60a6d91bee7b12a8ffb9f74f2aee808cb3ee1628))
9
9
 
10
10
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
11
11
 
@@ -1 +1 @@
1
- import{Overlay as s,Content as l}from"@radix-ui/react-alert-dialog";import{createElement as t,Fragment as m}from"react";import{keyframes as e,styled as n}from"../../stitches.js";import{fadeIn as d,fadeOut as c}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",a="translate3d(-50%, 50vh, 0)",f=e({"0%":{transform:a},"100%":{transform:o}}),p=e({"0%":{transform:o},"100%":{transform:a}}),u=n(s,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${d} 250ms ease-out`},'&[data-state="closed"]':{animation:`${c} 550ms ease-out`}}}),b=n(l,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${f} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${p} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),x=({size:i="sm",...r})=>t(m,null,t(u,null),t(b,{size:i,...r}));export{x as AlertDialogContent};
1
+ import{Overlay as l,Content as d,Portal as m}from"@radix-ui/react-alert-dialog";import{createElement as t}from"react";import{DIALOG_Z_INDEX as e}from"../../constants/dialog.js";import{keyframes as n,styled as a}from"../../stitches.js";import{fadeIn as c,fadeOut as f}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",p=n({"0%":{transform:i},"100%":{transform:o}}),u=n({"0%":{transform:o},"100%":{transform:i}}),x=a(l,{backgroundColor:"$alpha600",inset:0,position:"fixed",zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${c} 250ms ease-out`},'&[data-state="closed"]':{animation:`${f} 550ms ease-out`}}}),b=a(d,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${p} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${u} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),h=({size:r="sm",...s})=>t(m,null,t(x,null),t(b,{size:r,...s}));export{h as AlertDialogContent};
@@ -0,0 +1,536 @@
1
+ import * as React from 'react';
2
+ declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ xl: string;
7
+ reducedMotion: string;
8
+ allowMotion: string;
9
+ hover: string;
10
+ }, import("@stitches/react/types/css-util").CSS<{
11
+ sm: string;
12
+ md: string;
13
+ lg: string;
14
+ xl: string;
15
+ reducedMotion: string;
16
+ allowMotion: string;
17
+ hover: string;
18
+ }, {
19
+ colors: {
20
+ textForeground: any;
21
+ textSubtle: any;
22
+ textPlaceholder: any;
23
+ background: any;
24
+ backgroundAccent: any;
25
+ tonal50: any;
26
+ tonal100: any;
27
+ tonal200: any;
28
+ tonal300: any;
29
+ tonal400: any;
30
+ tonal500: any;
31
+ tonal600: any;
32
+ alpha100: any;
33
+ alpha150: any;
34
+ alpha200: any;
35
+ alpha250: any;
36
+ alpha600: any;
37
+ primaryLight: any;
38
+ primary: any;
39
+ primaryMid: any;
40
+ primaryDark: any;
41
+ secondary: any;
42
+ brandRed: any;
43
+ brandRedAccent: any;
44
+ brandGreen: any;
45
+ brandGreenAccent: any;
46
+ brandPurple: any;
47
+ brandPurpleAccent: any;
48
+ brandYellow: any;
49
+ brandYellowAccent: any;
50
+ successLight: any;
51
+ success: any;
52
+ successMid: any;
53
+ successDark: any;
54
+ dangerLight: any;
55
+ danger: any;
56
+ dangerMid: any;
57
+ dangerDark: any;
58
+ warningLight: any;
59
+ warning: any;
60
+ warningMid: any;
61
+ warningDark: any;
62
+ subjectEnglish: any;
63
+ subjectMaths: any;
64
+ subjectScience: any;
65
+ subjectVerbalReasoning: any;
66
+ subjectNonVerbalReasoning: any;
67
+ subjectCreativeWriting: any;
68
+ subjectExamSkills: any;
69
+ };
70
+ space: {
71
+ "0": any;
72
+ "1": any;
73
+ "2": any;
74
+ "3": any;
75
+ "4": any;
76
+ "5": any;
77
+ "6": any;
78
+ "7": any;
79
+ "8": any;
80
+ "9": any;
81
+ };
82
+ fontSizes: {
83
+ xs: any;
84
+ sm: any;
85
+ md: any;
86
+ lg: any;
87
+ xl: any;
88
+ "2xl": any;
89
+ "3xl": any;
90
+ "4xl": any;
91
+ };
92
+ fonts: {
93
+ sans: any;
94
+ mono: any;
95
+ display: any;
96
+ body: any;
97
+ };
98
+ sizes: {
99
+ "0": any;
100
+ "1": any;
101
+ "2": any;
102
+ "3": any;
103
+ "4": any;
104
+ "5": any;
105
+ "6": any;
106
+ "7": any;
107
+ "8": any;
108
+ };
109
+ radii: {
110
+ "0": any;
111
+ "1": any;
112
+ "2": any;
113
+ "3": any;
114
+ round: any;
115
+ };
116
+ shadows: {
117
+ "0": any;
118
+ "1": any;
119
+ "2": any;
120
+ "3": any;
121
+ };
122
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
123
+ bg: (value: {
124
+ readonly [$$PropertyValue]: "background";
125
+ }) => {
126
+ background: {
127
+ readonly [$$PropertyValue]: "background";
128
+ };
129
+ };
130
+ inset: (value: string | number | {
131
+ readonly [$$ScaleValue]: "space";
132
+ }) => {
133
+ top: string | number | {
134
+ readonly [$$ScaleValue]: "space";
135
+ };
136
+ right: string | number | {
137
+ readonly [$$ScaleValue]: "space";
138
+ };
139
+ bottom: string | number | {
140
+ readonly [$$ScaleValue]: "space";
141
+ };
142
+ left: string | number | {
143
+ readonly [$$ScaleValue]: "space";
144
+ };
145
+ };
146
+ size: (value: string | number | {
147
+ readonly [$$ScaleValue]: "size";
148
+ }) => {
149
+ height: string | number | {
150
+ readonly [$$ScaleValue]: "size";
151
+ };
152
+ width: string | number | {
153
+ readonly [$$ScaleValue]: "size";
154
+ };
155
+ };
156
+ p: (value: string | number | {
157
+ readonly [$$ScaleValue]: "space";
158
+ }) => {
159
+ padding: string | number | {
160
+ readonly [$$ScaleValue]: "space";
161
+ };
162
+ };
163
+ pt: (value: string | number | {
164
+ readonly [$$ScaleValue]: "space";
165
+ }) => {
166
+ paddingTop: string | number | {
167
+ readonly [$$ScaleValue]: "space";
168
+ };
169
+ };
170
+ pr: (value: string | number | {
171
+ readonly [$$ScaleValue]: "space";
172
+ }) => {
173
+ paddingRight: string | number | {
174
+ readonly [$$ScaleValue]: "space";
175
+ };
176
+ };
177
+ pb: (value: string | number | {
178
+ readonly [$$ScaleValue]: "space";
179
+ }) => {
180
+ paddingBottom: string | number | {
181
+ readonly [$$ScaleValue]: "space";
182
+ };
183
+ };
184
+ pl: (value: string | number | {
185
+ readonly [$$ScaleValue]: "space";
186
+ }) => {
187
+ paddingLeft: string | number | {
188
+ readonly [$$ScaleValue]: "space";
189
+ };
190
+ };
191
+ px: (value: string | number | {
192
+ readonly [$$ScaleValue]: "space";
193
+ }) => {
194
+ paddingLeft: string | number | {
195
+ readonly [$$ScaleValue]: "space";
196
+ };
197
+ paddingRight: string | number | {
198
+ readonly [$$ScaleValue]: "space";
199
+ };
200
+ };
201
+ py: (value: string | number | {
202
+ readonly [$$ScaleValue]: "space";
203
+ }) => {
204
+ paddingTop: string | number | {
205
+ readonly [$$ScaleValue]: "space";
206
+ };
207
+ paddingBottom: string | number | {
208
+ readonly [$$ScaleValue]: "space";
209
+ };
210
+ };
211
+ m: (value: string | number | {
212
+ readonly [$$ScaleValue]: "space";
213
+ }) => {
214
+ margin: string | number | {
215
+ readonly [$$ScaleValue]: "space";
216
+ };
217
+ };
218
+ mt: (value: string | number | {
219
+ readonly [$$ScaleValue]: "space";
220
+ }) => {
221
+ marginTop: string | number | {
222
+ readonly [$$ScaleValue]: "space";
223
+ };
224
+ };
225
+ mr: (value: string | number | {
226
+ readonly [$$ScaleValue]: "space";
227
+ }) => {
228
+ marginRight: string | number | {
229
+ readonly [$$ScaleValue]: "space";
230
+ };
231
+ };
232
+ mb: (value: string | number | {
233
+ readonly [$$ScaleValue]: "space";
234
+ }) => {
235
+ marginBottom: string | number | {
236
+ readonly [$$ScaleValue]: "space";
237
+ };
238
+ };
239
+ ml: (value: string | number | {
240
+ readonly [$$ScaleValue]: "space";
241
+ }) => {
242
+ marginLeft: string | number | {
243
+ readonly [$$ScaleValue]: "space";
244
+ };
245
+ };
246
+ mx: (value: string | number | {
247
+ readonly [$$ScaleValue]: "space";
248
+ }) => {
249
+ marginLeft: string | number | {
250
+ readonly [$$ScaleValue]: "space";
251
+ };
252
+ marginRight: string | number | {
253
+ readonly [$$ScaleValue]: "space";
254
+ };
255
+ };
256
+ my: (value: string | number | {
257
+ readonly [$$ScaleValue]: "space";
258
+ }) => {
259
+ marginTop: string | number | {
260
+ readonly [$$ScaleValue]: "space";
261
+ };
262
+ marginBottom: string | number | {
263
+ readonly [$$ScaleValue]: "space";
264
+ };
265
+ };
266
+ }>>, {
267
+ theme?: "success" | "danger" | "warning" | "neutral" | "info" | undefined;
268
+ size?: "sm" | "md" | "xs" | undefined;
269
+ }, {
270
+ sm: string;
271
+ md: string;
272
+ lg: string;
273
+ xl: string;
274
+ reducedMotion: string;
275
+ allowMotion: string;
276
+ hover: string;
277
+ }, import("@stitches/react/types/css-util").CSS<{
278
+ sm: string;
279
+ md: string;
280
+ lg: string;
281
+ xl: string;
282
+ reducedMotion: string;
283
+ allowMotion: string;
284
+ hover: string;
285
+ }, {
286
+ colors: {
287
+ textForeground: any;
288
+ textSubtle: any;
289
+ textPlaceholder: any;
290
+ background: any;
291
+ backgroundAccent: any;
292
+ tonal50: any;
293
+ tonal100: any;
294
+ tonal200: any;
295
+ tonal300: any;
296
+ tonal400: any;
297
+ tonal500: any;
298
+ tonal600: any;
299
+ alpha100: any;
300
+ alpha150: any;
301
+ alpha200: any;
302
+ alpha250: any;
303
+ alpha600: any;
304
+ primaryLight: any;
305
+ primary: any;
306
+ primaryMid: any;
307
+ primaryDark: any;
308
+ secondary: any;
309
+ brandRed: any;
310
+ brandRedAccent: any;
311
+ brandGreen: any;
312
+ brandGreenAccent: any;
313
+ brandPurple: any;
314
+ brandPurpleAccent: any;
315
+ brandYellow: any;
316
+ brandYellowAccent: any;
317
+ successLight: any;
318
+ success: any;
319
+ successMid: any;
320
+ successDark: any;
321
+ dangerLight: any;
322
+ danger: any;
323
+ dangerMid: any;
324
+ dangerDark: any;
325
+ warningLight: any;
326
+ warning: any;
327
+ warningMid: any;
328
+ warningDark: any;
329
+ subjectEnglish: any;
330
+ subjectMaths: any;
331
+ subjectScience: any;
332
+ subjectVerbalReasoning: any;
333
+ subjectNonVerbalReasoning: any;
334
+ subjectCreativeWriting: any;
335
+ subjectExamSkills: any;
336
+ };
337
+ space: {
338
+ "0": any;
339
+ "1": any;
340
+ "2": any;
341
+ "3": any;
342
+ "4": any;
343
+ "5": any;
344
+ "6": any;
345
+ "7": any;
346
+ "8": any;
347
+ "9": any;
348
+ };
349
+ fontSizes: {
350
+ xs: any;
351
+ sm: any;
352
+ md: any;
353
+ lg: any;
354
+ xl: any;
355
+ "2xl": any;
356
+ "3xl": any;
357
+ "4xl": any;
358
+ };
359
+ fonts: {
360
+ sans: any;
361
+ mono: any;
362
+ display: any;
363
+ body: any;
364
+ };
365
+ sizes: {
366
+ "0": any;
367
+ "1": any;
368
+ "2": any;
369
+ "3": any;
370
+ "4": any;
371
+ "5": any;
372
+ "6": any;
373
+ "7": any;
374
+ "8": any;
375
+ };
376
+ radii: {
377
+ "0": any;
378
+ "1": any;
379
+ "2": any;
380
+ "3": any;
381
+ round: any;
382
+ };
383
+ shadows: {
384
+ "0": any;
385
+ "1": any;
386
+ "2": any;
387
+ "3": any;
388
+ };
389
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
390
+ bg: (value: {
391
+ readonly [$$PropertyValue]: "background";
392
+ }) => {
393
+ background: {
394
+ readonly [$$PropertyValue]: "background";
395
+ };
396
+ };
397
+ inset: (value: string | number | {
398
+ readonly [$$ScaleValue]: "space";
399
+ }) => {
400
+ top: string | number | {
401
+ readonly [$$ScaleValue]: "space";
402
+ };
403
+ right: string | number | {
404
+ readonly [$$ScaleValue]: "space";
405
+ };
406
+ bottom: string | number | {
407
+ readonly [$$ScaleValue]: "space";
408
+ };
409
+ left: string | number | {
410
+ readonly [$$ScaleValue]: "space";
411
+ };
412
+ };
413
+ size: (value: string | number | {
414
+ readonly [$$ScaleValue]: "size";
415
+ }) => {
416
+ height: string | number | {
417
+ readonly [$$ScaleValue]: "size";
418
+ };
419
+ width: string | number | {
420
+ readonly [$$ScaleValue]: "size";
421
+ };
422
+ };
423
+ p: (value: string | number | {
424
+ readonly [$$ScaleValue]: "space";
425
+ }) => {
426
+ padding: string | number | {
427
+ readonly [$$ScaleValue]: "space";
428
+ };
429
+ };
430
+ pt: (value: string | number | {
431
+ readonly [$$ScaleValue]: "space";
432
+ }) => {
433
+ paddingTop: string | number | {
434
+ readonly [$$ScaleValue]: "space";
435
+ };
436
+ };
437
+ pr: (value: string | number | {
438
+ readonly [$$ScaleValue]: "space";
439
+ }) => {
440
+ paddingRight: string | number | {
441
+ readonly [$$ScaleValue]: "space";
442
+ };
443
+ };
444
+ pb: (value: string | number | {
445
+ readonly [$$ScaleValue]: "space";
446
+ }) => {
447
+ paddingBottom: string | number | {
448
+ readonly [$$ScaleValue]: "space";
449
+ };
450
+ };
451
+ pl: (value: string | number | {
452
+ readonly [$$ScaleValue]: "space";
453
+ }) => {
454
+ paddingLeft: string | number | {
455
+ readonly [$$ScaleValue]: "space";
456
+ };
457
+ };
458
+ px: (value: string | number | {
459
+ readonly [$$ScaleValue]: "space";
460
+ }) => {
461
+ paddingLeft: string | number | {
462
+ readonly [$$ScaleValue]: "space";
463
+ };
464
+ paddingRight: string | number | {
465
+ readonly [$$ScaleValue]: "space";
466
+ };
467
+ };
468
+ py: (value: string | number | {
469
+ readonly [$$ScaleValue]: "space";
470
+ }) => {
471
+ paddingTop: string | number | {
472
+ readonly [$$ScaleValue]: "space";
473
+ };
474
+ paddingBottom: string | number | {
475
+ readonly [$$ScaleValue]: "space";
476
+ };
477
+ };
478
+ m: (value: string | number | {
479
+ readonly [$$ScaleValue]: "space";
480
+ }) => {
481
+ margin: string | number | {
482
+ readonly [$$ScaleValue]: "space";
483
+ };
484
+ };
485
+ mt: (value: string | number | {
486
+ readonly [$$ScaleValue]: "space";
487
+ }) => {
488
+ marginTop: string | number | {
489
+ readonly [$$ScaleValue]: "space";
490
+ };
491
+ };
492
+ mr: (value: string | number | {
493
+ readonly [$$ScaleValue]: "space";
494
+ }) => {
495
+ marginRight: string | number | {
496
+ readonly [$$ScaleValue]: "space";
497
+ };
498
+ };
499
+ mb: (value: string | number | {
500
+ readonly [$$ScaleValue]: "space";
501
+ }) => {
502
+ marginBottom: string | number | {
503
+ readonly [$$ScaleValue]: "space";
504
+ };
505
+ };
506
+ ml: (value: string | number | {
507
+ readonly [$$ScaleValue]: "space";
508
+ }) => {
509
+ marginLeft: string | number | {
510
+ readonly [$$ScaleValue]: "space";
511
+ };
512
+ };
513
+ mx: (value: string | number | {
514
+ readonly [$$ScaleValue]: "space";
515
+ }) => {
516
+ marginLeft: string | number | {
517
+ readonly [$$ScaleValue]: "space";
518
+ };
519
+ marginRight: string | number | {
520
+ readonly [$$ScaleValue]: "space";
521
+ };
522
+ };
523
+ my: (value: string | number | {
524
+ readonly [$$ScaleValue]: "space";
525
+ }) => {
526
+ marginTop: string | number | {
527
+ readonly [$$ScaleValue]: "space";
528
+ };
529
+ marginBottom: string | number | {
530
+ readonly [$$ScaleValue]: "space";
531
+ };
532
+ };
533
+ }>>;
534
+ declare type BadgeProps = React.ComponentProps<typeof StyledBadge>;
535
+ export declare const Badge: React.FC<BadgeProps>;
536
+ export {};
@@ -0,0 +1 @@
1
+ import{createElement as e}from"react";import{styled as s}from"../../stitches.js";import{Box as n}from"../box/Box.js";import{Flex as c}from"../flex/Flex.js";const l=s(c,{justifyContent:"center",alignItems:"center",borderRadius:"$0",border:"1px solid #FFFFFF",fontFamily:"$body",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$tonal600"},danger:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$tonal50",color:"$tonal400"},info:{bg:"$primaryLight",color:"$primaryMid"}},size:{xs:{fontSize:"$sm",px:"$3",height:"calc(24px - $space$1)"},sm:{fontSize:"$md",px:"$4",height:"calc(32px - $space$1)"},md:{fontSize:"$md",px:"$4",height:"calc(48px - $space$1)"}}}}),o=({theme:r="info",size:t="sm",children:a,...i})=>e(l,{role:"status",theme:r,size:t,...i},e(n,{as:"div",css:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis",py:"$0"}},a));o.displayName="Badge";export{o as Badge};
@@ -0,0 +1 @@
1
+ export { Badge } from './Badge';
@@ -1,4 +1,4 @@
1
- import { Trigger } from '@radix-ui/react-dialog';
1
+ import { Description, Title, Trigger } from '@radix-ui/react-dialog';
2
2
  import * as React from 'react';
3
3
  import { DialogClose } from './DialogClose';
4
4
  import { DialogContent } from './DialogContent';
@@ -271,6 +271,8 @@ declare type DialogProps = React.ComponentProps<typeof StyledDialog>;
271
271
  export declare const Dialog: React.FC<DialogProps> & {
272
272
  Close: typeof DialogClose;
273
273
  Content: typeof DialogContent;
274
+ Description: typeof Description;
275
+ Title: typeof Title;
274
276
  Trigger: typeof Trigger;
275
277
  };
276
278
  export {};
@@ -1 +1 @@
1
- import{Root as r,Trigger as e}from"@radix-ui/react-dialog";import{createElement as i}from"react";import{styled as m}from"../../stitches.js";import{DialogClose as l}from"./DialogClose.js";import{DialogContent as g}from"./DialogContent.js";const a=m(r,{}),o=t=>i(a,{...t});o.Close=l,o.Content=g,o.Trigger=e,o.displayName="Dialog";export{o as Dialog};
1
+ import{Root as i,Description as e,Title as r,Trigger as l}from"@radix-ui/react-dialog";import{createElement as m}from"react";import{styled as g}from"../../stitches.js";import{DialogClose as n}from"./DialogClose.js";import{DialogContent as p}from"./DialogContent.js";const a=g(i,{}),o=t=>m(a,{...t});o.Close=n,o.Content=p,o.Description=e,o.Title=r,o.Trigger=l,o.displayName="Dialog";export{o as Dialog};
@@ -1 +1 @@
1
- import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as h,Close as g}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{keyframes as n,styled as i}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{fadeIn as $,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",r="modal_overlay",l=2147483646,O=n({"0%":{transform:s},"100%":{transform:t}}),y=n({"0%":{transform:t},"100%":{transform:s}}),C=i(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:l,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=i(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:t,zIndex:l,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),z=({size:d="sm",children:m,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(h,null,o(C,{id:r},o(D,{size:d,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...p},f&&o(w,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o(v,{is:u})),m)));export{z as DialogContent};
1
+ import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as h,Close as g}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{DIALOG_Z_INDEX as n}from"../../constants/dialog.js";import{keyframes as i,styled as r}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{fadeIn as $,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",l="modal_overlay",O=i({"0%":{transform:s},"100%":{transform:t}}),y=i({"0%":{transform:t},"100%":{transform:s}}),C=r(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:n,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=r(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:t,zIndex:n,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),z=({size:m="sm",children:d,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(h,null,o(C,{id:l},o(D,{size:m,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==l&&e.preventDefault()},...p},f&&o(w,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o(v,{is:u})),d)));export{z as DialogContent};
@@ -3,6 +3,7 @@ export { Accordion } from './accordion';
3
3
  export { EmptyState } from './empty-state';
4
4
  export { ActionIcon } from './action-icon';
5
5
  export { AlertDialog, useAlert, AlertProvider } from './alert-dialog';
6
+ export { Badge } from './badge';
6
7
  export { Box } from './box';
7
8
  export { Button, StyledButton } from './button';
8
9
  export { Carousel, useCarousel } from './carousel';
@@ -1 +1 @@
1
- import{Root as s,Indicator as n}from"@radix-ui/react-progress";import{createElement as r}from"react";import{styled as o}from"../../stitches.js";const d=o(s,{borderRadius:"$round",background:"$tonal100",height:"$0",position:"relative",overflow:"hidden",width:"100%",variants:{theme:{primary:{color:"$primary"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"}}}}),c=o(n,{backgroundColor:"currentcolor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),e=({value:t,theme:i="primary",...a})=>r(d,{theme:i,...a},r(c,{style:{width:`${t}%`}}));e.displayName="ProgressBar";export{e as ProgressBar};
1
+ import{Root as n,Indicator as d}from"@radix-ui/react-progress";import{createElement as t}from"react";import{styled as e}from"../../stitches.js";const c=e(n,{borderRadius:"$round",background:"$tonal100",height:"$0",position:"relative",overflow:"hidden",width:"100%",variants:{theme:{primary:{color:"$primary"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"}}}}),l=e(d,{backgroundColor:"currentcolor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),s=({value:r,max:o=100,theme:a="primary",...i})=>t(c,{value:r,max:o,theme:a,...i},t(l,{style:{width:"100%",transform:`translateX(-${100-(r||0)/o*100}%)`}}));s.displayName="ProgressBar";export{s as ProgressBar};
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLDivElement>>, {
2
+ declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
3
3
  theme?: "dark" | "light" | undefined;
4
4
  }, {
5
5
  sm: string;
@@ -1 +1 @@
1
- import{Trigger as d}from"@radix-ui/react-tabs";import{opacify as a}from"color2k";import{createElement as n}from"react";import{styled as s,theme as e}from"../../stitches.js";const c=s(d,{cursor:"pointer",flexShrink:0,fontFamily:"$body",p:"$4",height:"$5",userSelect:"none",transition:"0.3s",variants:{theme:{light:{'&[data-state="active"]':{color:"$primary",fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},'&[data-state="inactive"]':{color:"$tonal500"},"&:not([data-disabled]):hover":{color:"$primary",bg:a(e.colors.primary.value,-.9)},"&:not([data-disabled]):active":{color:"$primary",bg:a(e.colors.primary.value,-.8),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}},dark:{color:"white",'&[data-state="active"]':{fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},"&:not([data-disabled]):hover":{bg:a("white",-.8)},"&:not([data-disabled]):active":{bg:a("white",-.7),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}}}}}),o=({children:t,theme:r,disabled:i=!1,...l})=>n(c,{disabled:i,theme:r,...l},t);o.displayName="TabTrigger";export{o as TabTrigger};
1
+ import{Trigger as l}from"@radix-ui/react-tabs";import{opacify as o}from"color2k";import{createElement as n}from"react";import{styled as c,theme as e}from"../../stitches.js";const s=c(l,{background:"none",border:"none",cursor:"pointer",flexShrink:0,fontFamily:"$body",p:"$4",height:"$5",userSelect:"none",transition:"0.3s",variants:{theme:{light:{'&[data-state="active"]':{color:"$primary",fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},'&[data-state="inactive"]':{color:"$tonal500"},"&:not([data-disabled]):hover":{color:"$primary",bg:o(e.colors.primary.value,-.9)},"&:not([data-disabled]):active":{color:"$primary",bg:o(e.colors.primary.value,-.8),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}},dark:{color:"white",'&[data-state="active"]':{fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},"&:not([data-disabled]):hover":{bg:o("white",-.8)},"&:not([data-disabled]):active":{bg:o("white",-.7),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}}}}}),a=({children:t,theme:r,disabled:i=!1,...d})=>n(s,{disabled:i,theme:r,...d},t);a.displayName="TabTrigger";export{a as TabTrigger};
@@ -1,9 +1,10 @@
1
- import { Root, Trigger } from '@radix-ui/react-tooltip';
1
+ import { Provider, Root, Trigger } from '@radix-ui/react-tooltip';
2
2
  import * as React from 'react';
3
3
  import { TooltipContent } from './TooltipContent';
4
4
  declare type TooltipProps = React.ComponentProps<typeof Root>;
5
5
  export declare const Tooltip: React.FC<TooltipProps> & {
6
6
  Content: typeof TooltipContent;
7
7
  Trigger: typeof Trigger;
8
+ Provider: typeof Provider;
8
9
  };
9
10
  export {};
@@ -1 +1 @@
1
- import{Root as i,Trigger as m}from"@radix-ui/react-tooltip";import{createElement as p}from"react";import{styled as l}from"../../stitches.js";import{TooltipContent as n}from"./TooltipContent.js";const o=({children:t,delayDuration:r=350,...e})=>p(i,{delayDuration:r,...e},t);o.Content=n,o.Trigger=l(m,{}),o.displayName="Tooltip";export{o as Tooltip};
1
+ import{Root as i,Trigger as m,Provider as p}from"@radix-ui/react-tooltip";import{createElement as l}from"react";import{styled as n}from"../../stitches.js";import{TooltipContent as T}from"./TooltipContent.js";const o=({children:r,delayDuration:t=350,...e})=>l(i,{delayDuration:t,...e},r);o.Content=T,o.Trigger=n(m,{}),o.Provider=p,o.displayName="Tooltip";export{o as Tooltip};
@@ -0,0 +1 @@
1
+ export declare const DIALOG_Z_INDEX = 2147483646;
@@ -0,0 +1 @@
1
+ const o=2147483646;export{o as DIALOG_Z_INDEX};