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