@atom-learning/components 2.66.2 → 2.66.4
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 +3 -2
- package/dist/components/badge/Badge.d.ts +0 -2
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/stitches.badge.colorscheme.config.d.ts +116 -6
- package/dist/components/badge/stitches.badge.colorscheme.config.js +1 -1
- package/dist/components/badge/stitches.badge.colorscheme.config.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +4 -0
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dialog/DialogFooter.d.ts +3 -0
- package/dist/components/dialog/DialogFooter.js +2 -0
- package/dist/components/dialog/DialogFooter.js.map +1 -0
- package/dist/components/dialog/DialogHeading.d.ts +3 -0
- package/dist/components/dialog/DialogHeading.js +2 -0
- package/dist/components/dialog/DialogHeading.js.map +1 -0
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
## [2.66.
|
|
1
|
+
## [2.66.4](https://github.com/Atom-Learning/components/compare/v2.66.3...v2.66.4) (2023-08-24)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add missing Heading and Footer ([06b3048](https://github.com/Atom-Learning/components/commit/06b3048ff47fb13e93634a7e95d8707cefd23044))
|
|
7
|
+
* snapshots ([c27bceb](https://github.com/Atom-Learning/components/commit/c27bcebb38abc91998629d37e6a85dc57e1dc7fd))
|
|
7
8
|
|
|
8
9
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
10
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { TcolorScheme } from '../../experiments/color-scheme';
|
|
3
2
|
import { BadgeIcon } from './BadgeIcon';
|
|
4
3
|
import { BadgeText } from './BadgeText';
|
|
5
4
|
import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config';
|
|
@@ -652,7 +651,6 @@ declare const StyledBadge: import("@stitches/react/types/styled-component").Styl
|
|
|
652
651
|
export declare type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
|
|
653
652
|
theme?: keyof typeof badgeColorSchemes;
|
|
654
653
|
overflow?: React.ComponentProps<typeof BadgeText>['overflow'];
|
|
655
|
-
colorScheme?: TcolorScheme;
|
|
656
654
|
};
|
|
657
655
|
declare type TBadge = React.ForwardRefExoticComponent<TBadgeProps> & {
|
|
658
656
|
Icon: typeof BadgeIcon;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Flex as
|
|
1
|
+
import*as e from"react";import{Flex as g}from"../flex/Flex.js";import{Icon as x}from"../icon/Icon.js";import{styled as $}from"../../stitches.js";import{useCallbackRefState as h}from"../../utilities/hooks/useCallbackRef.js";import{BadgeContext as y,BadgeProvider as B}from"./Badge.context.js";import{BadgeIcon as s}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{colorSchemes as v}from"./stitches.badge.colorscheme.config.js";import{OptionalTooltipWrapper as w}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const F=$(g,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{emphasis:{subtle:{color:"$textSubtle",background:"$backgroundSubtle"},bold:{color:"$textBold",background:"$backgroundBold"}},size:{xs:{px:"$1"},sm:{px:"$1",py:"$0"},md:{px:"$2",py:"$1"}}}}),C=e.forwardRef(({theme:r="info",emphasis:l="subtle",children:a,...i},p)=>{const{size:d,overflow:c,isOverflowing:f}=e.useContext(y),[m,u]=h();e.useImperativeHandle(p,()=>m);const b=m==null?void 0:m.textContent;return e.createElement(w,{hasTooltip:c==="ellipsis"&&f,label:b},e.createElement(F,{role:"status",emphasis:l,size:d,...i,className:v[r],ref:u},e.Children.map(a,t=>typeof t=="string"||typeof t=="number"?e.createElement(n,null,t):e.isValidElement(t)&&t.type===x?e.createElement(s,{...t.props}):t)))}),o=e.forwardRef(({size:r="sm",overflow:l="wrap",...a},i)=>e.createElement(B,{size:r,overflow:l},e.createElement(C,{...a,ref:i})));o.displayName="Badge",o.Icon=s,o.Text=n;export{o as Badge};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport {
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\nimport { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config'\n\nconst StyledBadge = styled(Flex, {\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$0',\n minWidth: 0,\n border: '1px solid #FFFFFF',\n fontFamily: '$body',\n '& > *:not(:last-child)': {\n mr: '$1'\n },\n variants: {\n emphasis: {\n subtle: {\n color: '$textSubtle',\n background: '$backgroundSubtle'\n },\n bold: {\n color: '$textBold',\n background: '$backgroundBold'\n }\n },\n size: {\n xs: {\n px: '$1'\n },\n sm: {\n px: '$1',\n py: '$0'\n },\n md: {\n px: '$2',\n py: '$1'\n }\n }\n }\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadge = React.ForwardRefExoticComponent<TBadgeProps> & {\n Icon: typeof BadgeIcon\n Text: typeof BadgeText\n}\n\ntype TBadgeInnerProps = Omit<Omit<TBadgeProps, 'size'>, 'overflow'>\n\nconst BadgeInner = React.forwardRef<HTMLDivElement, TBadgeInnerProps>(\n ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n {...rest}\n className={badgeColorSchemes[theme]}\n ref={setBadgeElRef}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </OptionalTooltipWrapper>\n )\n }\n)\n\nexport const Badge = React.forwardRef<HTMLDivElement, TBadgeProps>(\n ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n }\n) as TBadge\n\nBadge.displayName = 'Badge'\nBadge.Icon = BadgeIcon\nBadge.Text = BadgeText\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","Badge","BadgeProvider"],"mappings":"4iBAaA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,SAAU,EACV,OAAQ,oBACR,WAAY,QACZ,yBAA0B,CACxB,GAAI,IACN,EACA,SAAU,CACR,SAAU,CACR,OAAQ,CACN,MAAO,cACP,WAAY,mBACd,EACA,KAAM,CACJ,MAAO,YACP,WAAY,iBACd,CACF,EACA,KAAM,CACJ,GAAI,CACF,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAcKC,EAAaC,EAAM,WACvB,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,KAAA,OAAAA,EAAY,YAE1B,OACEV,EAAA,cAACc,EAAA,CACC,WAAYP,IAAa,YAAcC,EACvC,MAAOK,CAAAA,EAEPb,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,UAAWW,EAAkBd,GAC7B,IAAKU,CAEJX,EAAAA,EAAM,SAAS,IAAIG,EAAWa,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzChB,EAAA,cAACiB,EAAA,KAAWD,CAAM,EAEvBhB,EAAM,eAAegB,CAAK,GAAKA,EAAM,OAASE,EACzClB,EAAA,cAACmB,EAAA,CAAW,GAAGH,EAAM,KAAO,CAAA,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEaI,EAAQpB,EAAM,WACzB,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,UAAWH,CAAK,EAAGC,IAE1CL,EAAA,cAACqB,EAAA,CAAc,KAAMf,EAAM,SAAUC,CAAAA,EACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAK,CAAA,CAClC,CAGN,EAEAe,EAAM,YAAc,QACpBA,EAAM,KAAOD,EACbC,EAAM,KAAOH"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const colorSchemes: {
|
|
2
|
-
|
|
2
|
+
info: string & {
|
|
3
3
|
className: string;
|
|
4
4
|
selector: string;
|
|
5
5
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -10,7 +10,7 @@ export declare const colorSchemes: {
|
|
|
10
10
|
backgroundBold: string;
|
|
11
11
|
};
|
|
12
12
|
}, "">;
|
|
13
|
-
|
|
13
|
+
neutral: string & {
|
|
14
14
|
className: string;
|
|
15
15
|
selector: string;
|
|
16
16
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -21,7 +21,7 @@ export declare const colorSchemes: {
|
|
|
21
21
|
backgroundBold: string;
|
|
22
22
|
};
|
|
23
23
|
}, "">;
|
|
24
|
-
|
|
24
|
+
success: string & {
|
|
25
25
|
className: string;
|
|
26
26
|
selector: string;
|
|
27
27
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -32,7 +32,7 @@ export declare const colorSchemes: {
|
|
|
32
32
|
backgroundBold: string;
|
|
33
33
|
};
|
|
34
34
|
}, "">;
|
|
35
|
-
|
|
35
|
+
danger: string & {
|
|
36
36
|
className: string;
|
|
37
37
|
selector: string;
|
|
38
38
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -43,7 +43,7 @@ export declare const colorSchemes: {
|
|
|
43
43
|
backgroundBold: string;
|
|
44
44
|
};
|
|
45
45
|
}, "">;
|
|
46
|
-
|
|
46
|
+
warning: string & {
|
|
47
47
|
className: string;
|
|
48
48
|
selector: string;
|
|
49
49
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -54,7 +54,117 @@ export declare const colorSchemes: {
|
|
|
54
54
|
backgroundBold: string;
|
|
55
55
|
};
|
|
56
56
|
}, "">;
|
|
57
|
-
|
|
57
|
+
grey: string & {
|
|
58
|
+
className: string;
|
|
59
|
+
selector: string;
|
|
60
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
61
|
+
colors: {
|
|
62
|
+
textSubtle: string;
|
|
63
|
+
backgroundSubtle: string;
|
|
64
|
+
textBold: string;
|
|
65
|
+
backgroundBold: string;
|
|
66
|
+
};
|
|
67
|
+
}, "">;
|
|
68
|
+
blue: string & {
|
|
69
|
+
className: string;
|
|
70
|
+
selector: string;
|
|
71
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
72
|
+
colors: {
|
|
73
|
+
textSubtle: string;
|
|
74
|
+
backgroundSubtle: string;
|
|
75
|
+
textBold: string;
|
|
76
|
+
backgroundBold: string;
|
|
77
|
+
};
|
|
78
|
+
}, "">;
|
|
79
|
+
purple: string & {
|
|
80
|
+
className: string;
|
|
81
|
+
selector: string;
|
|
82
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
83
|
+
colors: {
|
|
84
|
+
textSubtle: string;
|
|
85
|
+
backgroundSubtle: string;
|
|
86
|
+
textBold: string;
|
|
87
|
+
backgroundBold: string;
|
|
88
|
+
};
|
|
89
|
+
}, "">;
|
|
90
|
+
cyan: string & {
|
|
91
|
+
className: string;
|
|
92
|
+
selector: string;
|
|
93
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
94
|
+
colors: {
|
|
95
|
+
textSubtle: string;
|
|
96
|
+
backgroundSubtle: string;
|
|
97
|
+
textBold: string;
|
|
98
|
+
backgroundBold: string;
|
|
99
|
+
};
|
|
100
|
+
}, "">;
|
|
101
|
+
green: string & {
|
|
102
|
+
className: string;
|
|
103
|
+
selector: string;
|
|
104
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
105
|
+
colors: {
|
|
106
|
+
textSubtle: string;
|
|
107
|
+
backgroundSubtle: string;
|
|
108
|
+
textBold: string;
|
|
109
|
+
backgroundBold: string;
|
|
110
|
+
};
|
|
111
|
+
}, "">;
|
|
112
|
+
magenta: string & {
|
|
113
|
+
className: string;
|
|
114
|
+
selector: string;
|
|
115
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
116
|
+
colors: {
|
|
117
|
+
textSubtle: string;
|
|
118
|
+
backgroundSubtle: string;
|
|
119
|
+
textBold: string;
|
|
120
|
+
backgroundBold: string;
|
|
121
|
+
};
|
|
122
|
+
}, "">;
|
|
123
|
+
red: string & {
|
|
124
|
+
className: string;
|
|
125
|
+
selector: string;
|
|
126
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
127
|
+
colors: {
|
|
128
|
+
textSubtle: string;
|
|
129
|
+
backgroundSubtle: string;
|
|
130
|
+
textBold: string;
|
|
131
|
+
backgroundBold: string;
|
|
132
|
+
};
|
|
133
|
+
}, "">;
|
|
134
|
+
teal: string & {
|
|
135
|
+
className: string;
|
|
136
|
+
selector: string;
|
|
137
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
138
|
+
colors: {
|
|
139
|
+
textSubtle: string;
|
|
140
|
+
backgroundSubtle: string;
|
|
141
|
+
textBold: string;
|
|
142
|
+
backgroundBold: string;
|
|
143
|
+
};
|
|
144
|
+
}, "">;
|
|
145
|
+
orange: string & {
|
|
146
|
+
className: string;
|
|
147
|
+
selector: string;
|
|
148
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
149
|
+
colors: {
|
|
150
|
+
textSubtle: string;
|
|
151
|
+
backgroundSubtle: string;
|
|
152
|
+
textBold: string;
|
|
153
|
+
backgroundBold: string;
|
|
154
|
+
};
|
|
155
|
+
}, "">;
|
|
156
|
+
yellow: string & {
|
|
157
|
+
className: string;
|
|
158
|
+
selector: string;
|
|
159
|
+
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
160
|
+
colors: {
|
|
161
|
+
textSubtle: string;
|
|
162
|
+
backgroundSubtle: string;
|
|
163
|
+
textBold: string;
|
|
164
|
+
backgroundBold: string;
|
|
165
|
+
};
|
|
166
|
+
}, "">;
|
|
167
|
+
lime: string & {
|
|
58
168
|
className: string;
|
|
59
169
|
selector: string;
|
|
60
170
|
} & import("@stitches/react/types/stitches").ThemeTokens<{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createTheme as e}from"../../stitches.js";const t=e("
|
|
1
|
+
import{createTheme as e}from"../../stitches.js";const t=e("info",{colors:{textSubtle:"$blue900",backgroundSubtle:"$blue100",textBold:"#FFF",backgroundBold:"$blue800"}}),l=e("neutral",{colors:{textSubtle:"$grey900",backgroundSubtle:"$grey100",textBold:"#FFF",backgroundBold:"$grey800"}}),o=e("success",{colors:{textSubtle:"$successMid",backgroundSubtle:"$successLight",textBold:"#FFF",backgroundBold:"$success"}}),r=e("danger",{colors:{textSubtle:"$dangerMid",backgroundSubtle:"$dangerLight",textBold:"#FFF",backgroundBold:"$danger"}}),u=e("warning",{colors:{textSubtle:"$warningText",backgroundSubtle:"$warningLight",textBold:"$grey1000",backgroundBold:"$warning"}}),d=e("grey",{colors:{textSubtle:"$grey1000",backgroundSubtle:"$grey200",textBold:"#FFF",backgroundBold:"$grey800"}}),n=e("blue",{colors:{textSubtle:"$blue1000",backgroundSubtle:"$blue200",textBold:"#FFF",backgroundBold:"$blue800"}}),b=e("purple",{colors:{textSubtle:"$purple1000",backgroundSubtle:"$purple200",textBold:"#FFF",backgroundBold:"$purple800"}}),g=e("cyan",{colors:{textSubtle:"$cyan1000",backgroundSubtle:"$cyan200",textBold:"#FFF",backgroundBold:"$cyan800"}}),a=e("green",{colors:{textSubtle:"$green1000",backgroundSubtle:"$green200",textBold:"#FFF",backgroundBold:"$green800"}}),c=e("magenta",{colors:{textSubtle:"$magenta1000",backgroundSubtle:"$magenta200",textBold:"#FFF",backgroundBold:"$magenta800"}}),$=e("red",{colors:{textSubtle:"$red1000",backgroundSubtle:"$red200",textBold:"#FFF",backgroundBold:"$red800"}}),F=e("teal",{colors:{textSubtle:"$teal1000",backgroundSubtle:"$teal200",textBold:"#FFF",backgroundBold:"$teal800"}}),s=e("orange",{colors:{textSubtle:"$orange1000",backgroundSubtle:"$orange200",textBold:"$grey1200",backgroundBold:"$orange600"}}),x=e("yellow",{colors:{textSubtle:"$yellow1000",backgroundSubtle:"$yellow200",textBold:"$grey1200",backgroundBold:"$yellow500"}}),S=e("lime",{colors:{textSubtle:"$lime1000",backgroundSubtle:"$lime200",textBold:"$grey1200",backgroundBold:"$lime600"}}),k={info:t,neutral:l,success:o,danger:r,warning:u,grey:d,blue:n,purple:b,cyan:g,green:a,magenta:c,red:$,teal:F,orange:s,yellow:x,lime:S};export{k as colorSchemes};
|
|
2
2
|
//# sourceMappingURL=stitches.badge.colorscheme.config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nconst
|
|
1
|
+
{"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\n/*\n * Semantic themes\n */\n\nconst info = createTheme('info', {\n colors: {\n textSubtle: '$blue900',\n backgroundSubtle: '$blue100',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst neutral = createTheme('neutral', {\n colors: {\n textSubtle: '$grey900',\n backgroundSubtle: '$grey100',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst success = createTheme('success', {\n colors: {\n textSubtle: '$successMid',\n backgroundSubtle: '$successLight',\n textBold: '#FFF',\n backgroundBold: '$success'\n }\n})\n\nconst danger = createTheme('danger', {\n colors: {\n textSubtle: '$dangerMid',\n backgroundSubtle: '$dangerLight',\n textBold: '#FFF',\n backgroundBold: '$danger'\n }\n})\n\nconst warning = createTheme('warning', {\n colors: {\n textSubtle: '$warningText',\n backgroundSubtle: '$warningLight',\n textBold: '$grey1000',\n backgroundBold: '$warning'\n }\n})\n\n/*\n * Non-semantic themes\n */\n\nconst grey = createTheme('grey', {\n colors: {\n textSubtle: '$grey1000',\n backgroundSubtle: '$grey200',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst blue = createTheme('blue', {\n colors: {\n textSubtle: '$blue1000',\n backgroundSubtle: '$blue200',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst purple = createTheme('purple', {\n colors: {\n textSubtle: '$purple1000',\n backgroundSubtle: '$purple200',\n textBold: '#FFF',\n backgroundBold: '$purple800'\n }\n})\n\nconst cyan = createTheme('cyan', {\n colors: {\n textSubtle: '$cyan1000',\n backgroundSubtle: '$cyan200',\n textBold: '#FFF',\n backgroundBold: '$cyan800'\n }\n})\n\nconst green = createTheme('green', {\n colors: {\n textSubtle: '$green1000',\n backgroundSubtle: '$green200',\n textBold: '#FFF',\n backgroundBold: '$green800'\n }\n})\n\nconst magenta = createTheme('magenta', {\n colors: {\n textSubtle: '$magenta1000',\n backgroundSubtle: '$magenta200',\n textBold: '#FFF',\n backgroundBold: '$magenta800'\n }\n})\n\nconst red = createTheme('red', {\n colors: {\n textSubtle: '$red1000',\n backgroundSubtle: '$red200',\n textBold: '#FFF',\n backgroundBold: '$red800'\n }\n})\n\nconst teal = createTheme('teal', {\n colors: {\n textSubtle: '$teal1000',\n backgroundSubtle: '$teal200',\n textBold: '#FFF',\n backgroundBold: '$teal800'\n }\n})\n\nconst orange = createTheme('orange', {\n colors: {\n textSubtle: '$orange1000',\n backgroundSubtle: '$orange200',\n textBold: '$grey1200',\n backgroundBold: '$orange600'\n }\n})\n\nconst yellow = createTheme('yellow', {\n colors: {\n textSubtle: '$yellow1000',\n backgroundSubtle: '$yellow200',\n textBold: '$grey1200',\n backgroundBold: '$yellow500'\n }\n})\n\nconst lime = createTheme('lime', {\n colors: {\n textSubtle: '$lime1000',\n backgroundSubtle: '$lime200',\n textBold: '$grey1200',\n backgroundBold: '$lime600'\n }\n})\n\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n grey,\n blue,\n purple,\n cyan,\n green,\n magenta,\n red,\n teal,\n orange,\n yellow,\n lime\n}\n"],"names":["info","createTheme","neutral","success","danger","warning","grey","blue","purple","cyan","green","magenta","red","teal","orange","yellow","lime","colorSchemes"],"mappings":"gDAMA,MAAMA,EAAOC,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKC,EAAUD,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKE,EAAUF,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,cACZ,iBAAkB,gBAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKG,EAASH,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,aACZ,iBAAkB,eAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKI,EAAUJ,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,eACZ,iBAAkB,gBAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAMKK,EAAOL,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKM,EAAON,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKO,EAASP,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,OACV,eAAgB,YAClB,CACF,CAAC,EAEKQ,EAAOR,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKS,EAAQT,EAAY,QAAS,CACjC,OAAQ,CACN,WAAY,aACZ,iBAAkB,YAClB,SAAU,OACV,eAAgB,WAClB,CACF,CAAC,EAEKU,EAAUV,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,eACZ,iBAAkB,cAClB,SAAU,OACV,eAAgB,aAClB,CACF,CAAC,EAEKW,EAAMX,EAAY,MAAO,CAC7B,OAAQ,CACN,WAAY,WACZ,iBAAkB,UAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKY,EAAOZ,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKa,EAASb,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKc,EAASd,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKe,EAAOf,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAEYgB,EAAe,CAC1B,KAAAjB,EACA,QAAAE,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAC,CACF"}
|
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { DialogBackground } from './DialogBackground';
|
|
4
4
|
import { DialogClose } from './DialogClose';
|
|
5
5
|
import { DialogContent } from './DialogContent';
|
|
6
|
+
import { DialogFooter } from './DialogFooter';
|
|
7
|
+
import { DialogHeading } from './DialogHeading';
|
|
6
8
|
declare const StyledDialog: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("@radix-ui/react-dialog").DialogProps>, {}, {
|
|
7
9
|
sm: string;
|
|
8
10
|
md: string;
|
|
@@ -327,6 +329,8 @@ export declare const Dialog: React.FC<DialogProps> & {
|
|
|
327
329
|
Background: typeof DialogBackground;
|
|
328
330
|
Close: typeof DialogClose;
|
|
329
331
|
Content: typeof DialogContent;
|
|
332
|
+
Heading: typeof DialogHeading;
|
|
333
|
+
Footer: typeof DialogFooter;
|
|
330
334
|
Description: typeof Description;
|
|
331
335
|
Title: typeof Title;
|
|
332
336
|
Trigger: typeof Trigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Root as
|
|
1
|
+
import{Root as i,Description as t,Title as e,Trigger as m}from"@radix-ui/react-dialog";import*as a from"react";import{styled as g}from"../../stitches.js";import{DialogBackground as l}from"./DialogBackground.js";import{DialogClose as n}from"./DialogClose.js";import{DialogContent as p}from"./DialogContent.js";import{DialogFooter as f}from"./DialogFooter.js";import{DialogHeading as s}from"./DialogHeading.js";const D=g(i,{}),o=r=>a.createElement(D,{...r});o.Background=l,o.Close=n,o.Content=p,o.Heading=s,o.Footer=f,o.Description=t,o.Title=e,o.Trigger=m,o.displayName="Dialog";export{o as Dialog};
|
|
2
2
|
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\n\nconst StyledDialog = styled(Root, {})\n\ntype DialogProps = React.ComponentProps<typeof StyledDialog>\n\nexport const Dialog: React.FC<DialogProps> & {\n Background: typeof DialogBackground\n Close: typeof DialogClose\n Content: typeof DialogContent\n Description: typeof Description\n Title: typeof Title\n Trigger: typeof Trigger\n} = (props) => <StyledDialog {...props} />\n\nDialog.Background = DialogBackground\nDialog.Close = DialogClose\nDialog.Content = DialogContent\nDialog.Description = Description\nDialog.Title = Title\nDialog.Trigger = Trigger\n\nDialog.displayName = 'Dialog'\n"],"names":["StyledDialog","styled","Root","Dialog","props","React","DialogBackground","DialogClose","DialogContent","Description","Title","Trigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nconst StyledDialog = styled(Root, {})\n\ntype DialogProps = React.ComponentProps<typeof StyledDialog>\n\nexport const Dialog: React.FC<DialogProps> & {\n Background: typeof DialogBackground\n Close: typeof DialogClose\n Content: typeof DialogContent\n Heading: typeof DialogHeading\n Footer: typeof DialogFooter\n Description: typeof Description\n Title: typeof Title\n Trigger: typeof Trigger\n} = (props) => <StyledDialog {...props} />\n\nDialog.Background = DialogBackground\nDialog.Close = DialogClose\nDialog.Content = DialogContent\nDialog.Heading = DialogHeading\nDialog.Footer = DialogFooter\n\nDialog.Description = Description\nDialog.Title = Title\nDialog.Trigger = Trigger\n\nDialog.displayName = 'Dialog'\n"],"names":["StyledDialog","styled","Root","Dialog","props","React","DialogBackground","DialogClose","DialogContent","DialogHeading","DialogFooter","Description","Title","Trigger"],"mappings":"yZAWA,MAAMA,EAAeC,EAAOC,EAAM,CAAE,CAAA,EAIvBC,EASRC,GAAUC,EAAA,cAACL,EAAA,CAAc,GAAGI,EAAO,EAExCD,EAAO,WAAaG,EACpBH,EAAO,MAAQI,EACfJ,EAAO,QAAUK,EACjBL,EAAO,QAAUM,EACjBN,EAAO,OAASO,EAEhBP,EAAO,YAAcQ,EACrBR,EAAO,MAAQS,EACfT,EAAO,QAAUU,EAEjBV,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as
|
|
1
|
+
import{Close as h}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as $,fadeOut as v}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${v} 550ms ease-out`}}}),E=l(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:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 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"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...u})=>o.createElement(g,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...u},c&&o.createElement(z,{as:w,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},o.createElement(C,{is:h})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};
|
|
2
2
|
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$4', top: '$4' }}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ioBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,
|
|
1
|
+
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ioBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,GACtBkB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAEV,CAAA,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import { Close } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\n\nexport const DialogFooter = ({\n css,\n ...props\n}: React.ComponentProps<typeof Flex>) => (\n <Flex justify=\"end\" css={{ pt: '$4', ...css }} {...props} />\n)\n"],"names":["DialogFooter","css","props","React","Flex"],"mappings":"+DAKa,MAAAA,EAAe,CAAC,CAC3B,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,QAAQ,MAAM,IAAK,CAAE,GAAI,KAAM,GAAGH,CAAI,EAAI,GAAGC,CAAO,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as e from"react";import{Heading as i}from"../heading/Heading.js";const m=({css:o,...t})=>e.createElement(i,{size:"sm",css:{borderBottom:"1px solid $tonal100",fontFamily:"$body",p:"0 $5 $5 $5",mb:"$5",mx:"-$5",boxSizing:"content-box",...o},...t});export{m as DialogHeading};
|
|
2
|
+
//# sourceMappingURL=DialogHeading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogHeading.js","sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Heading } from '../heading'\n\nexport const DialogHeading = ({\n css,\n ...props\n}: React.ComponentProps<typeof Heading>) => (\n <Heading\n size=\"sm\"\n css={{\n borderBottom: '1px solid $tonal100',\n fontFamily: '$body',\n p: `0 $5 $5 $5`,\n mb: '$5',\n mx: '-$5',\n boxSizing: 'content-box',\n ...css\n }}\n {...props}\n />\n)\n"],"names":["DialogHeading","css","props","React","Heading"],"mappings":"wEAIa,MAAAA,EAAgB,CAAC,CAC5B,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,IAAK,CACH,aAAc,sBACd,WAAY,QACZ,EAAG,aACH,GAAI,KACJ,GAAI,MACJ,UAAW,cACX,GAAGH,CACL,EACC,GAAGC,CACN,CAAA"}
|