@frigade/react 2.0.0-alpha.1 → 2.0.0-alpha.11
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/README.md +543 -4
- package/dist/index.cjs +41 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +222 -12
- package/dist/index.js +14 -2
- package/dist/index.js.map +1 -1
- package/package.json +9 -7
- package/dist/index.css +0 -2
- package/dist/index.css.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
2
|
+
import React__default, { MouseEvent } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import { Interpolation } from '@emotion/react';
|
|
4
5
|
import * as Popover from '@radix-ui/react-popover';
|
|
6
|
+
import { Flow, FlowStep } from '@frigade/js';
|
|
5
7
|
|
|
6
8
|
type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
|
|
7
9
|
as?: T;
|
|
@@ -14,7 +16,7 @@ interface ButtonProps extends BoxProps {
|
|
|
14
16
|
title?: string;
|
|
15
17
|
variant?: ButtonVariant;
|
|
16
18
|
}
|
|
17
|
-
declare function BaseButton({ as, children,
|
|
19
|
+
declare function BaseButton({ as, children, title, variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
18
20
|
declare const Button: typeof BaseButton & {
|
|
19
21
|
[k: string]: {
|
|
20
22
|
({ part, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
@@ -27,23 +29,222 @@ declare const Flex: {
|
|
|
27
29
|
Row: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
|
|
28
30
|
};
|
|
29
31
|
|
|
32
|
+
declare const tokens: {
|
|
33
|
+
radii: {
|
|
34
|
+
md: string;
|
|
35
|
+
lg: string;
|
|
36
|
+
round: string;
|
|
37
|
+
};
|
|
38
|
+
shadows: {
|
|
39
|
+
md: string;
|
|
40
|
+
};
|
|
41
|
+
space: {
|
|
42
|
+
0: string;
|
|
43
|
+
4: string;
|
|
44
|
+
20: string;
|
|
45
|
+
[-20]: string;
|
|
46
|
+
19: string;
|
|
47
|
+
[-19]: string;
|
|
48
|
+
18: string;
|
|
49
|
+
[-18]: string;
|
|
50
|
+
17: string;
|
|
51
|
+
[-17]: string;
|
|
52
|
+
16: string;
|
|
53
|
+
[-16]: string;
|
|
54
|
+
15: string;
|
|
55
|
+
[-15]: string;
|
|
56
|
+
14: string;
|
|
57
|
+
[-14]: string;
|
|
58
|
+
13: string;
|
|
59
|
+
[-13]: string;
|
|
60
|
+
12: string;
|
|
61
|
+
[-12]: string;
|
|
62
|
+
11: string;
|
|
63
|
+
[-11]: string;
|
|
64
|
+
10: string;
|
|
65
|
+
[-10]: string;
|
|
66
|
+
9: string;
|
|
67
|
+
[-9]: string;
|
|
68
|
+
8: string;
|
|
69
|
+
[-8]: string;
|
|
70
|
+
7: string;
|
|
71
|
+
[-7]: string;
|
|
72
|
+
6: string;
|
|
73
|
+
[-6]: string;
|
|
74
|
+
5: string;
|
|
75
|
+
[-5]: string;
|
|
76
|
+
[-4]: string;
|
|
77
|
+
3: string;
|
|
78
|
+
[-3]: string;
|
|
79
|
+
2: string;
|
|
80
|
+
[-2]: string;
|
|
81
|
+
1: string;
|
|
82
|
+
[-1]: string;
|
|
83
|
+
0.5: string;
|
|
84
|
+
[-0.5]: string;
|
|
85
|
+
auto: string;
|
|
86
|
+
};
|
|
87
|
+
fontFamilies: {
|
|
88
|
+
default: string;
|
|
89
|
+
};
|
|
90
|
+
fontSizes: {
|
|
91
|
+
xs: string;
|
|
92
|
+
sm: string;
|
|
93
|
+
md: string;
|
|
94
|
+
lg: string;
|
|
95
|
+
xl: string;
|
|
96
|
+
'2xl': string;
|
|
97
|
+
'3xl': string;
|
|
98
|
+
'4xl': string;
|
|
99
|
+
'5xl': string;
|
|
100
|
+
};
|
|
101
|
+
fontWeights: {
|
|
102
|
+
thin: string;
|
|
103
|
+
extralight: string;
|
|
104
|
+
light: string;
|
|
105
|
+
regular: string;
|
|
106
|
+
medium: string;
|
|
107
|
+
demibold: string;
|
|
108
|
+
bold: string;
|
|
109
|
+
extrabold: string;
|
|
110
|
+
black: string;
|
|
111
|
+
};
|
|
112
|
+
letterSpacings: {
|
|
113
|
+
md: string;
|
|
114
|
+
};
|
|
115
|
+
lineHeights: {
|
|
116
|
+
xs: string;
|
|
117
|
+
sm: string;
|
|
118
|
+
md: string;
|
|
119
|
+
lg: string;
|
|
120
|
+
xl: string;
|
|
121
|
+
'2xl': string;
|
|
122
|
+
'3xl': string;
|
|
123
|
+
'4xl': string;
|
|
124
|
+
};
|
|
125
|
+
colors: {
|
|
126
|
+
neutral: {
|
|
127
|
+
background: string;
|
|
128
|
+
border: string;
|
|
129
|
+
foreground: string;
|
|
130
|
+
surface: string;
|
|
131
|
+
active: {
|
|
132
|
+
background: string;
|
|
133
|
+
border: string;
|
|
134
|
+
foreground: string;
|
|
135
|
+
surface: string;
|
|
136
|
+
};
|
|
137
|
+
focus: {
|
|
138
|
+
background: string;
|
|
139
|
+
border: string;
|
|
140
|
+
foreground: string;
|
|
141
|
+
surface: string;
|
|
142
|
+
};
|
|
143
|
+
hover: {
|
|
144
|
+
background: string;
|
|
145
|
+
border: string;
|
|
146
|
+
foreground: string;
|
|
147
|
+
surface: string;
|
|
148
|
+
};
|
|
149
|
+
};
|
|
150
|
+
primary: {
|
|
151
|
+
background: string;
|
|
152
|
+
border: string;
|
|
153
|
+
foreground: string;
|
|
154
|
+
surface: string;
|
|
155
|
+
active: {
|
|
156
|
+
background: string;
|
|
157
|
+
border: string;
|
|
158
|
+
foreground: string;
|
|
159
|
+
surface: string;
|
|
160
|
+
};
|
|
161
|
+
focus: {
|
|
162
|
+
background: string;
|
|
163
|
+
border: string;
|
|
164
|
+
foreground: string;
|
|
165
|
+
surface: string;
|
|
166
|
+
};
|
|
167
|
+
hover: {
|
|
168
|
+
background: string;
|
|
169
|
+
border: string;
|
|
170
|
+
foreground: string;
|
|
171
|
+
surface: string;
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
secondary: {
|
|
175
|
+
background: string;
|
|
176
|
+
border: string;
|
|
177
|
+
foreground: string;
|
|
178
|
+
surface: string;
|
|
179
|
+
active: {
|
|
180
|
+
background: string;
|
|
181
|
+
border: string;
|
|
182
|
+
foreground: string;
|
|
183
|
+
surface: string;
|
|
184
|
+
};
|
|
185
|
+
focus: {
|
|
186
|
+
background: string;
|
|
187
|
+
border: string;
|
|
188
|
+
foreground: string;
|
|
189
|
+
surface: string;
|
|
190
|
+
};
|
|
191
|
+
hover: {
|
|
192
|
+
background: string;
|
|
193
|
+
border: string;
|
|
194
|
+
foreground: string;
|
|
195
|
+
surface: string;
|
|
196
|
+
};
|
|
197
|
+
};
|
|
198
|
+
black: string;
|
|
199
|
+
gray100: string;
|
|
200
|
+
gray200: string;
|
|
201
|
+
gray300: string;
|
|
202
|
+
gray400: string;
|
|
203
|
+
gray500: string;
|
|
204
|
+
gray600: string;
|
|
205
|
+
gray700: string;
|
|
206
|
+
gray800: string;
|
|
207
|
+
gray900: string;
|
|
208
|
+
white: string;
|
|
209
|
+
blue400: string;
|
|
210
|
+
blue500: string;
|
|
211
|
+
blue800: string;
|
|
212
|
+
blue900: string;
|
|
213
|
+
green400: string;
|
|
214
|
+
green500: string;
|
|
215
|
+
green800: string;
|
|
216
|
+
transparent: string;
|
|
217
|
+
inherit: string;
|
|
218
|
+
red500: string;
|
|
219
|
+
};
|
|
220
|
+
borders: {
|
|
221
|
+
md: string;
|
|
222
|
+
};
|
|
223
|
+
borderWidths: {
|
|
224
|
+
0: string;
|
|
225
|
+
md: string;
|
|
226
|
+
};
|
|
227
|
+
};
|
|
228
|
+
type Tokens = typeof tokens;
|
|
229
|
+
|
|
230
|
+
type Theme = Partial<Tokens>;
|
|
231
|
+
|
|
232
|
+
type NavigateHandler = (url: string, target?: string) => void;
|
|
30
233
|
interface ProviderProps {
|
|
31
234
|
apiKey: string;
|
|
32
|
-
children?: React.ReactNode;
|
|
33
|
-
config?: ProviderConfig;
|
|
34
|
-
theme?: Record<any, any>;
|
|
35
|
-
}
|
|
36
|
-
interface ProviderConfig {
|
|
37
235
|
apiUrl?: string;
|
|
236
|
+
children?: React.ReactNode;
|
|
237
|
+
navigate?: NavigateHandler;
|
|
238
|
+
theme?: Theme;
|
|
38
239
|
userId?: string;
|
|
39
240
|
}
|
|
40
|
-
declare function Provider({
|
|
241
|
+
declare function Provider({ children, navigate, theme, ...props }: ProviderProps): react_jsx_runtime.JSX.Element;
|
|
41
242
|
|
|
42
243
|
type TextVariant = 'Display1' | 'Display2' | 'H1' | 'H2' | 'H3' | 'H4' | 'Body1' | 'Body2' | 'Caption';
|
|
43
244
|
interface TextProps extends BoxProps {
|
|
44
245
|
variant?: TextVariant;
|
|
45
246
|
}
|
|
46
|
-
declare function BaseText({ as, children,
|
|
247
|
+
declare function BaseText({ as, children, variant, ...props }: TextProps): react_jsx_runtime.JSX.Element;
|
|
47
248
|
declare const Text: typeof BaseText & {
|
|
48
249
|
[k: string]: {
|
|
49
250
|
(props: TextProps): react_jsx_runtime.JSX.Element;
|
|
@@ -61,12 +262,13 @@ interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpe
|
|
|
61
262
|
interface TooltipProps extends MergedRadixPopoverProps {
|
|
62
263
|
align?: Popover.PopoverContentProps['align'] | 'before' | 'after';
|
|
63
264
|
anchor?: string;
|
|
265
|
+
css?: Interpolation<Record<any, any>>;
|
|
64
266
|
spotlight?: boolean;
|
|
65
267
|
style?: React__default.CSSProperties;
|
|
66
268
|
}
|
|
67
|
-
declare function Tooltip({ anchor, children,
|
|
269
|
+
declare function Tooltip({ anchor, children, className, spotlight, style, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
68
270
|
declare namespace Tooltip {
|
|
69
|
-
var Close: (
|
|
271
|
+
var Close: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
70
272
|
var Media: ({ src, ...props }: MediaProps) => react_jsx_runtime.JSX.Element;
|
|
71
273
|
var Primary: ({ onClick, title, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
72
274
|
var Progress: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -75,9 +277,17 @@ declare namespace Tooltip {
|
|
|
75
277
|
var Title: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
76
278
|
}
|
|
77
279
|
|
|
280
|
+
type FlowHandler = (flow: Flow, event?: MouseEvent<unknown>) => boolean | void;
|
|
281
|
+
|
|
282
|
+
type StepHandler = (step: FlowStep, event?: MouseEvent<unknown>) => boolean | void;
|
|
283
|
+
|
|
78
284
|
interface TourProps extends TooltipProps {
|
|
79
285
|
flowId: string;
|
|
286
|
+
onComplete?: FlowHandler;
|
|
287
|
+
onDismiss?: FlowHandler;
|
|
288
|
+
onPrimary?: StepHandler;
|
|
289
|
+
onSecondary?: StepHandler;
|
|
80
290
|
}
|
|
81
|
-
declare function Tour({ flowId, ...props }: TourProps): react_jsx_runtime.JSX.Element;
|
|
291
|
+
declare function Tour({ flowId, onComplete, ...props }: TourProps): react_jsx_runtime.JSX.Element;
|
|
82
292
|
|
|
83
293
|
export { Box, BoxProps, Button, ButtonProps, Flex, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
var _=Object.defineProperty,Fr=Object.defineProperties;var Wr=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var rr=Object.prototype.hasOwnProperty,er=Object.prototype.propertyIsEnumerable;var Z=(r,e,o)=>e in r?_(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,l=(r,e)=>{for(var o in e||(e={}))rr.call(e,o)&&Z(r,o,e[o]);if(A)for(var o of A(e))er.call(e,o)&&Z(r,o,e[o]);return r},f=(r,e)=>Fr(r,Wr(e));var c=(r,e)=>{var o={};for(var t in r)rr.call(r,t)&&e.indexOf(t)<0&&(o[t]=r[t]);if(r!=null&&A)for(var t of A(r))e.indexOf(t)<0&&er.call(r,t)&&(o[t]=r[t]);return o};var or=(r,e)=>{for(var o in e)_(r,o,{get:e[o],enumerable:!0})};var R=(r,e,o)=>new Promise((t,n)=>{var a=d=>{try{s(o.next(d))}catch(v){n(v)}},i=d=>{try{s(o.throw(d))}catch(v){n(v)}},s=d=>d.done?t(d.value):Promise.resolve(d.value).then(a,i);s((o=o.apply(r,e)).next())});import*as sr from"react";import{clsx as Dr}from"clsx";var p={borders:{md:"var(--fr-borders-md)"},borderWidths:{0:"var(--fr-borderWidths-0)",md:"var(--fr-borderWidths-md)"},colors:{black:"var(--fr-colors-black)",gray100:"var(--fr-colors-gray100)",gray200:"var(--fr-colors-gray200)",gray300:"var(--fr-colors-gray300)",gray400:"var(--fr-colors-gray400)",gray500:"var(--fr-colors-gray500)",gray600:"var(--fr-colors-gray600)",gray700:"var(--fr-colors-gray700)",gray800:"var(--fr-colors-gray800)",gray900:"var(--fr-colors-gray900)",white:"var(--fr-colors-white)",blue400:"var(--fr-colors-blue400)",blue500:"var(--fr-colors-blue500)",blue800:"var(--fr-colors-blue800)",blue900:"var(--fr-colors-blue900)",green400:"var(--fr-colors-green400)",green500:"var(--fr-colors-green500)",green800:"var(--fr-colors-green800)",transparent:"var(--fr-colors-transparent)",red500:"var(--fr-colors-red500)",neutral:{background:"var(--fr-colors-neutral-background)",border:"var(--fr-colors-neutral-border)",foreground:"var(--fr-colors-neutral-foreground)",surface:"var(--fr-colors-neutral-surface)",active:{background:"var(--fr-colors-neutral-active-background)",border:"var(--fr-colors-neutral-active-border)",foreground:"var(--fr-colors-neutral-active-foreground)",surface:"var(--fr-colors-neutral-active-surface)"},focus:{background:"var(--fr-colors-neutral-focus-background)",border:"var(--fr-colors-neutral-focus-border)",foreground:"var(--fr-colors-neutral-focus-foreground)",surface:"var(--fr-colors-neutral-focus-surface)"},hover:{background:"var(--fr-colors-neutral-hover-background)",border:"var(--fr-colors-neutral-hover-border)",foreground:"var(--fr-colors-neutral-hover-foreground)",surface:"var(--fr-colors-neutral-hover-surface)"}},primary:{background:"var(--fr-colors-primary-background)",border:"var(--fr-colors-primary-border)",foreground:"var(--fr-colors-primary-foreground)",surface:"var(--fr-colors-primary-surface)",active:{background:"var(--fr-colors-primary-active-background)",border:"var(--fr-colors-primary-active-border)",foreground:"var(--fr-colors-primary-active-foreground)",surface:"var(--fr-colors-primary-active-surface)"},focus:{background:"var(--fr-colors-primary-focus-background)",border:"var(--fr-colors-primary-focus-border)",foreground:"var(--fr-colors-primary-focus-foreground)",surface:"var(--fr-colors-primary-focus-surface)"},hover:{background:"var(--fr-colors-primary-hover-background)",border:"var(--fr-colors-primary-hover-border)",foreground:"var(--fr-colors-primary-hover-foreground)",surface:"var(--fr-colors-primary-hover-surface)"}},secondary:{background:"var(--fr-colors-secondary-background)",border:"var(--fr-colors-secondary-border)",foreground:"var(--fr-colors-secondary-foreground)",surface:"var(--fr-colors-secondary-surface)",active:{background:"var(--fr-colors-secondary-active-background)",border:"var(--fr-colors-secondary-active-border)",foreground:"var(--fr-colors-secondary-active-foreground)",surface:"var(--fr-colors-secondary-active-surface)"},focus:{background:"var(--fr-colors-secondary-focus-background)",border:"var(--fr-colors-secondary-focus-border)",foreground:"var(--fr-colors-secondary-focus-foreground)",surface:"var(--fr-colors-secondary-focus-surface)"},hover:{background:"var(--fr-colors-secondary-hover-background)",border:"var(--fr-colors-secondary-hover-border)",foreground:"var(--fr-colors-secondary-hover-foreground)",surface:"var(--fr-colors-secondary-hover-surface)"}}},fontFamilies:{default:"var(--fr-fontFamilies-default)"},fontSizes:{xs:"var(--fr-fontSizes-xs)",sm:"var(--fr-fontSizes-sm)",md:"var(--fr-fontSizes-md)",lg:"var(--fr-fontSizes-lg)",xl:"var(--fr-fontSizes-xl)","2xl":"var(--fr-fontSizes-2xl)","3xl":"var(--fr-fontSizes-3xl)","4xl":"var(--fr-fontSizes-4xl)","5xl":"var(--fr-fontSizes-5xl)"},fontWeights:{regular:"var(--fr-fontWeights-regular)",demibold:"var(--fr-fontWeights-demibold)",bold:"var(--fr-fontWeights-bold)"},letterSpacings:{md:"var(--fr-letterSpacings-md)"},lineHeights:{xs:"var(--fr-lineHeights-xs)",sm:"var(--fr-lineHeights-sm)",md:"var(--fr-lineHeights-md)",lg:"var(--fr-lineHeights-lg)",xl:"var(--fr-lineHeights-xl)","2xl":"var(--fr-lineHeights-2xl)","3xl":"var(--fr-lineHeights-3xl)","4xl":"var(--fr-lineHeights-4xl)"},radii:{md:"var(--fr-radii-md)",lg:"var(--fr-radii-lg)",round:"var(--fr-radii-round)"},shadows:{md:"var(--fr-shadows-md)"},space:{0:"var(--fr-space-0)",1:"var(--fr-space-1)",2:"var(--fr-space-2)",3:"var(--fr-space-3)",4:"var(--fr-space-4)",5:"var(--fr-space-5)",6:"var(--fr-space-6)",7:"var(--fr-space-7)",8:"var(--fr-space-8)",9:"var(--fr-space-9)",10:"var(--fr-space-10)",11:"var(--fr-space-11)",12:"var(--fr-space-12)",13:"var(--fr-space-13)",14:"var(--fr-space-14)",15:"var(--fr-space-15)",16:"var(--fr-space-16)",17:"var(--fr-space-17)",18:"var(--fr-space-18)",19:"var(--fr-space-19)",20:"var(--fr-space-20)","-20":"var(--fr-space--20)","-19":"var(--fr-space--19)","-18":"var(--fr-space--18)","-17":"var(--fr-space--17)","-16":"var(--fr-space--16)","-15":"var(--fr-space--15)","-14":"var(--fr-space--14)","-13":"var(--fr-space--13)","-12":"var(--fr-space--12)","-11":"var(--fr-space--11)","-10":"var(--fr-space--10)","-9":"var(--fr-space--9)","-8":"var(--fr-space--8)","-7":"var(--fr-space--7)","-6":"var(--fr-space--6)","-5":"var(--fr-space--5)","-4":"var(--fr-space--4)","-3":"var(--fr-space--3)","-2":"var(--fr-space--2)","-1":"var(--fr-space--1)","-0.5":"var(--fr-space--0-5)","0.5":"var(--fr-space-0-5)",auto:"var(--fr-space-auto)"}};function M(r,e="",o="."){return Object.keys(r).reduce((t,n)=>{let i=`${e.length?`${e}${o}`:""}${n}`,s=r[n];return typeof s=="object"&&s!==null&&!Array.isArray(s)?Object.assign(t,M(s,i,o)):t[i]=s,t},{})}var D=M(p.colors),tr={color:D,backgroundColor:D,borderColor:D,border:p.borders,borderRadius:p.radii,borderWidth:p.borderWidths,fontFamily:p.fontFamilies,fontSize:p.fontSizes,fontWeight:p.fontWeights,gap:p.space,lineHeight:p.lineHeights,margin:p.space,marginTop:p.space,marginRight:p.space,marginBottom:p.space,marginLeft:p.space,padding:p.space,paddingTop:p.space,paddingRight:p.space,paddingBottom:p.space,paddingLeft:p.space,alignContent:["center","start","end","flex-start","flex-end","normal","baseline","first baseline","last baseline","space-between","space-around","space-evenly","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],alignItems:["normal","stretch","center","start","end","flex-start","flex-end","self-start","self-end","baseline","first baseline","last baseline","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],alignSelf:["auto","normal","center","start","end","self-start","self-end","flex-start","flex-end","baseline","first baseline","last baseline","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],flexDirection:["row","row-reverse","column","column-reverse","inherit","initial","revert","revert-layer","unset"],flexWrap:["nowrap","wrap","wrap-reverse","inherit","initial","revert","revert-layer","unset"],justifyContent:["center","start","end","flex-start","flex-end","left","right","normal","space-between","space-around","space-evenly","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],justifyItems:["normal","stretch","center","start","end","flex-start","flex-end","self-start","self-end","left","right","baseline","first baseline","last baseline","safe center","unsafe center","legacy right","legacy left","legacy center","inherit","initial","revert","revert-layer","unset"],boxSizing:["border-box","content-box","inherit","initial","revert","revert-layer","unset"],position:["static","relative","absolute","fixed","sticky","inherit","initial","revert","revert-layer","unset"],display:["block","block flex","block flow","block flow-root","block grid","contents","flex","flow-root","grid","inherit","initial","inline","inline flex","inline flow","inline flow-root","inline grid","inline-block","inline-flex","inline-grid","list-item","none","revert","revert-layer","table","table-row-group","table-header-group","table-footer-group","table-row","table-cell","table-column-group","table-column","table-caption","unset"]},nr={m:["margin"],mt:["marginTop"],mr:["marginRight"],mb:["marginBottom"],ml:["marginLeft"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],p:["padding"],pt:["paddingTop"],pr:["paddingRight"],pb:["paddingBottom"],pl:["paddingLeft"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"]};function Ar(r){if(Array.isArray(r))return new Map(r.map(e=>[e,e]));if(typeof r=="object"&&r!==null)return new Map(Object.entries(r));if(["string","number"].includes(typeof r))return new Map([r,r]);throw new Error("Invalid entry in styleProps")}var Vr=new Map(Object.entries(tr).map(([r,e])=>[r,Ar(e)])),Mr=new Map(Object.entries(nr).map(([r,e])=>[r,new Set(e)]));function ar(r){let e=Object.assign({},r),o={};return Object.entries(e).forEach(([t,n])=>{let a=Mr.get(t);a!=null&&(a.forEach(i=>{e[i]=n}),delete e[t])}),Object.entries(e).forEach(([t,n])=>{let a=Vr.get(t);if(a!=null)if(typeof n=="string"&&n.indexOf(" ")>-1){let i=n.split(" ");o[t]=i.map(s=>{var d;return(d=a.get(s.toString()))!=null?d:s}).join(" "),delete e[t]}else a.has(n.toString())&&(o[t]=a.get(n.toString()),delete e[t])}),{cssFromProps:o,unmatchedProps:e}}import{jsx as zr}from"@emotion/react/jsx-runtime";function ir(r){return r&&`fr-${r}`}function Er(r){return r&&(Array.isArray(r)?r.map(e=>ir(e)).join(" "):ir(r))}function jr(s,i){var d=s,{as:r,children:e,className:o,css:t,part:n}=d,a=c(d,["as","children","className","css","part"]);let v=r!=null?r:"div",{cssFromProps:h,unmatchedProps:b}=ar(a),P=Er(n),B=o||P?Dr(o,P):void 0;return zr(v,f(l({className:B,css:[l(l({boxSizing:"border-box"},h),t)]},b),{ref:i,children:e}))}var u=sr.forwardRef(jr);var E={};or(E,{Body1:()=>Ur,Body2:()=>Xr,Caption:()=>Jr,Display1:()=>Ir,Display2:()=>$r,H1:()=>Lr,H2:()=>Kr,H3:()=>Nr,H4:()=>qr,base:()=>x});var x=({fontFamilies:r})=>({fontFamily:r.default,margin:0}),Ir=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r["5xl"],fontWeight:e.bold,lineHeight:o["4xl"]}],$r=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r["4xl"],fontWeight:e.bold,lineHeight:o["3xl"]}],Lr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r["3xl"],fontWeight:e.bold,lineHeight:o["2xl"]}],Kr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r["2xl"],fontWeight:e.bold,lineHeight:o.xl}],Nr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r.xl,fontWeight:e.bold,lineHeight:o.lg}],qr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r.lg,fontWeight:e.bold,lineHeight:o.md}],Ur=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r.md,fontWeight:e.regular,lineHeight:o.md}],Xr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r.sm,fontWeight:e.regular,lineHeight:o.md}],Jr=({fontSizes:r,fontWeights:e,lineHeights:o})=>[x,{fontSize:r.xs,fontWeight:e.regular,lineHeight:o.sm}];import{jsx as cr}from"@emotion/react/jsx-runtime";function lr(a){var i=a,{as:r="span",children:e,css:o,variant:t="Body1"}=i,n=c(i,["as","children","css","variant"]);return cr(u,f(l({as:r,css:[E[t],o]},n),{children:e}))}var Qr=["Display1","Display2","H1","H2","H3","H4","Body1","Body2","Caption"],Yr=Object.fromEntries(Qr.map(r=>{let e=["H1","H2","H3","H4"].includes(r)?r.toLowerCase():void 0,o=t=>cr(lr,f(l({as:e},t),{variant:r,children:t.children}));return o.displayName=`Text.${r}`,[r,o]})),w=Object.assign(lr,Yr);var j={};or(j,{Link:()=>_r,Plain:()=>re,Primary:()=>Gr,Secondary:()=>Zr,base:()=>k});var k=({radii:r,space:e})=>({borderWidth:0,borderRadius:r.md,padding:`${e[2]} ${e[4]}`}),Gr=({colors:r})=>[k,{backgroundColor:r.primary.surface,color:r.primary.foreground,"&:hover":{backgroundColor:r.primary.hover.surface}}],Zr=({colors:r})=>[k,{backgroundColor:r.secondary.surface,color:r.secondary.foreground,"&:hover":{backgroundColor:r.secondary.hover.surface}}],_r=({colors:r})=>[k,{backgroundColor:r.transparent,color:r.primary.surface,"&:hover":{color:r.primary.hover.surface}}],re=({colors:r})=>[k,{backgroundColor:r.transparent,color:r.neutral.foreground}];import{jsx as pr,jsxs as te}from"@emotion/react/jsx-runtime";function fr(i){var s=i,{as:r,children:e,css:o={},title:t,variant:n="Primary"}=s,a=c(s,["as","children","css","title","variant"]);return te(u,f(l({as:r!=null?r:"button",css:[j[n],o]},a),{children:[e,t&&pr(w.Body2,{fontWeight:"demibold",children:t})]}))}var ee=["Primary","Secondary","Link","Plain"],oe=Object.fromEntries(ee.map(r=>{let e=r.toLocaleLowerCase(),o=a=>{var i=a,{part:t}=i,n=c(i,["part"]);return pr(fr,f(l({part:[`button-${e}`,t]},n),{variant:r,children:n.children}))};return o.displayName=`Text.${r}`,[r,o]})),O=Object.assign(fr,oe);import*as z from"react";import{jsx as dr}from"@emotion/react/jsx-runtime";var ne=z.forwardRef((n,t)=>{var a=n,{children:r,css:e}=a,o=c(a,["children","css"]);return dr(u,f(l({css:[{display:"flex",flexDirection:"row"},e]},o),{ref:t,children:r}))}),ae=z.forwardRef((n,t)=>{var a=n,{children:r,css:e}=a,o=c(a,["children","css"]);return dr(u,f(l({css:[{display:"flex",flexDirection:"column"},e]},o),{ref:t,children:r}))}),S={Column:ae,Row:ne};import{createContext as se}from"react";import{ThemeProvider as le}from"@emotion/react";function ur(r){var e=r.match(/^var\((.*)\)$/);return e?e[1]:r}function gr(r,e){var o=r;for(var t of e){if(!(t in o))throw new Error("Path ".concat(e.join(" -> ")," does not exist in object"));o=o[t]}return o}function I(r,e){var o=arguments.length>2&&arguments[2]!==void 0?arguments[2]:[],t=r.constructor();for(var n in r){var a=r[n],i=[...o,n];typeof a=="string"||typeof a=="number"||a==null?t[n]=e(a,i):typeof a=="object"&&!Array.isArray(a)?t[n]=I(a,e,i):console.warn('Skipping invalid key "'.concat(i.join("."),'". Should be a string, number, null or object. Received: "').concat(Array.isArray(a)?"Array":typeof a,'"'))}return t}function mr(r,e,o){r.style.setProperty(ur(e),o)}function vr(r,e,o){if(typeof o=="object"){var t=e;I(o,(i,s)=>{mr(r,gr(t,s),String(i))})}else{var n=e;for(var a in n)mr(r,a,n[a])}}import{useEffect as ie}from"react";function $(r,e=p){return Object.keys(r).reduce((o,t)=>{let n=r[t];return typeof n=="object"&&n!==null&&!Array.isArray(n)&&t in r?Object.assign(o,$(n,e[t])):o[e[t]]=r[t],o},{})}function br(r={},e=":root"){ie(()=>{let o=$(r),t=document.querySelector(e);vr(t,o)},[r])}import{jsx as xr}from"@emotion/react/jsx-runtime";var L=se({apiKey:"",config:{}});function ce({apiKey:r,children:e,config:o={},theme:t}){return br(t),xr(L.Provider,{value:{apiKey:r,config:o},children:xr(le,{theme:p,children:e})})}import{useEffect as be,useRef as xe,useState as U}from"react";import{XMarkIcon as ye}from"@heroicons/react/24/solid";import*as y from"@radix-ui/react-popover";import{useCallback as fe,useLayoutEffect as pe,useState as yr}from"react";function hr(){let r="DOMRect"in globalThis?new DOMRect:{height:0,width:0,x:0,y:0,bottom:0,top:0,right:0,left:0,toJSON:()=>{}},[e,o]=yr(r),[t,n]=yr(null),a=fe(i=>{n(i)},[]);return pe(()=>{t&&o(t.getBoundingClientRect())},[t]),{node:t,rect:e,ref:a}}var Pr="_16td421";import{jsx as wr,jsxs as de}from"@emotion/react/jsx-runtime";function Tr(t){var n=t,{style:r={},part:e=""}=n,o=c(n,["style","part"]);return de(u,f(l({part:`dot-wrapper ${e}`,style:l({height:"48px",position:"absolute",width:"48px"},r)},o),{children:[wr(u,{backgroundColor:"primary.surface",className:Pr,part:"dot-pulse",style:{borderRadius:"24px",height:"48px",left:0,position:"absolute",top:0,transformOrigin:"center center",width:"48px"}}),wr(u,{backgroundColor:"primary.surface",part:"dot",style:{borderRadius:"12px",height:"24px",left:"12px",position:"absolute",top:"12px",width:"24px"}})]}))}import{jsx as ue}from"@emotion/react/jsx-runtime";function K(t){var n=t,{part:r,src:e}=n,o=c(n,["part","src"]);return ue(u,l({as:"img",part:["image",r],src:e},o))}import{jsx as me}from"@emotion/react/jsx-runtime";function ge(r){var e,o,t;if(r.includes("youtube"))return`https://www.youtube.com/embed/${(e=r.split("v=")[1])==null?void 0:e.split("&")[0]}`;if(r.includes("vimeo"))return`https://player.vimeo.com/video/${(o=r.split("vimeo.com/")[1])==null?void 0:o.split("&")[0]}`;if(r.includes("wistia"))return`https://fast.wistia.net/embed/iframe/${(t=r.split("wistia.com/medias/")[1])==null?void 0:t.split("&")[0]}`;throw new Error("Could not map videoUri to a known provider (Youtube, Vimeo, Wistia).")}function N(t){var n=t,{part:r,src:e}=n,o=c(n,["part","src"]);let a=ge(e);return me(u,l({allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,as:"iframe",backgroundColor:"gray100",borderWidth:0,part:["video",r],src:a},o))}import{jsx as ve}from"@emotion/react/jsx-runtime";function q(t){var n=t,{src:r,type:e}=n,o=c(n,["src","type"]);return ve(e==="video"?N:K,l({src:r},o))}function Br({props:r,alignAttr:e,sideAttr:o}){let t=o!=null?o:"bottom",n={},a=(()=>{if(["after","before"].includes(r.align)){if(e=="start")return"before";if(e=="end")return"after"}return r.align})(),i="-24px",s={top:"bottom",right:"left",bottom:"top",left:"right"};return n[s[t]]=i,["before","end"].includes(a)?["top","bottom"].includes(t)?n.right=i:n.bottom=i:["after","start"].includes(a)?["top","bottom"].includes(t)?n.left=i:n.top=i:["top","bottom"].includes(t)?n.left=`calc(50% + ${i})`:n.top=`calc(50% + ${i})`,n}var Sr={content:["align","alignOffset","arrowPadding","avoidCollisions","collisionBoundary","collisionPadding","forceMount","hideWhenDetached","onCloseAutoFocus","onEscapeKeyDown","onFocusOutside","onInteractOutside","onOpenAutoFocus","onPointerDownOutside","side","sideOffset","sticky"],root:["defaultOpen","modal","onOpenChange","open"]};function Cr(r,e){var n,a,i;let o=Object.fromEntries(Sr.content.map(s=>[s,r[s]]).filter(s=>s[1]!==void 0)),t=Object.fromEntries(Sr.root.map(s=>[s,r[s]]).filter(s=>s[1]!==void 0));if(["before","after"].includes(o.align)){let s={after:"end",before:"start"},d=(H,V)=>["top","bottom"].includes(V)?H=="after"?"marginLeft":"marginRight":H=="after"?"marginTop":"marginBottom",v=(n=o.alignOffset)!=null?n:0,h=(a=o.style)!=null?a:{},b=(i=o.side)!=null?i:"bottom",P=o.align;o.style=f(l({},h),{[d(P,b)]:v});let B=["top","bottom"].includes(b)?e.width:e.height;o.alignOffset=(B+v)*-1,o.align=s[P]}return{contentProps:o,rootProps:t}}import{jsx as m,jsxs as X}from"@emotion/react/jsx-runtime";function g(i){var s=i,{anchor:r,children:e,css:o,spotlight:t=!1,style:n}=s,a=c(s,["anchor","children","css","spotlight","style"]);let{node:d,rect:v,ref:h}=hr(),[b,P]=U(a.align),[B,H]=U(a.side);if(d!==null){let C=d.getAttribute("data-align"),G=d.getAttribute("data-side");b!==C&&P(C),B!==G&&H(G)}let{contentProps:V,rootProps:kr}=Cr(a,v),Q=xe(null),[F,Or]=U(null);if(be(()=>{let C=document.querySelector(r);C!=null&&(Q.current=C,Or(Q))},[r]),F==null)return null;let W=F.current.getBoundingClientRect(),Y="0";typeof window!="undefined"&&(Y=window.getComputedStyle(F.current).borderRadius);let Hr=Br({props:a,alignAttr:b,sideAttr:B});return X(y.Root,f(l({defaultOpen:!0},kr),{children:[m(y.Anchor,{virtualRef:F}),m(y.Portal,{children:X("div",{css:o,children:[t&&m(u,{borderRadius:Y,part:"tooltip-spotlight",position:"absolute",css:{boxShadow:"0 0 0 2000px rgb(0 0 0 / 0.5)",height:W.height,left:W.left,top:W.top,width:W.width}}),m(y.Content,f(l({asChild:!0},V),{ref:h,children:X(S.Column,{backgroundColor:"white",borderRadius:"md",p:5,part:"tooltip-content",position:"relative",css:l({boxShadow:"0px 4px 20px rgba(0, 0, 0, 0.1)",width:"300px"},n),children:[m(Tr,{style:Hr}),e]})}))]})})]}))}g.Close=o=>{var t=o,{css:r}=t,e=c(t,["css"]);return m(y.Close,{"aria-label":"Close",asChild:!0,children:m(O.Plain,f(l({css:[{top:0,right:0},r],part:"tooltip-close",position:"absolute"},e),{children:m(ye,{height:"20",fill:"currentColor"})}))})};g.Media=o=>{var t=o,{src:r}=t,e=c(t,["src"]);return r==null?null:m(q,l({borderRadius:"md md 0 0",borderWidth:"0",css:{aspectRatio:"2"},margin:"-5 -5 5",src:r},e))};g.Primary=t=>{var n=t,{onClick:r,title:e}=n,o=c(n,["onClick","title"]);return e==null?null:m(O.Primary,l({title:e,onClick:r},o))};g.Progress=o=>{var t=o,{children:r}=t,e=c(t,["children"]);return r==null?null:m(w.Body2,f(l({fontWeight:"demibold",part:"progress"},e),{children:r}))};g.Secondary=t=>{var n=t,{onClick:r,title:e}=n,o=c(n,["onClick","title"]);return e==null?null:m(O.Secondary,l({title:e,onClick:r},o))};g.Subtitle=o=>{var t=o,{children:r}=t,e=c(t,["children"]);return r==null?null:m(w.Body2,f(l({part:"subtitle"},e),{children:r}))};g.Title=o=>{var t=o,{children:r}=t,e=c(t,["children"]);return r==null?null:m(w.Body1,f(l({fontWeight:"bold",mb:1,part:"title"},e),{children:r}))};import{Frigade as he}from"@frigade/js";import{useContext as Pe,useState as we}from"react";function Rr(r){let[e,o]=we(null),{apiKey:t,config:n}=Pe(L);function a(){return R(this,null,function*(){let s=yield(yield new he(t,{apiUrl:n.apiUrl,userId:n.userId})).getFlow(r);o(s)})}return e===null&&a(),{flow:e,fetchFlow:a}}import{jsx as T,jsxs as J}from"@emotion/react/jsx-runtime";function Te(o){var t=o,{flowId:r}=t,e=c(t,["flowId"]);var h;let{flow:n,fetchFlow:a}=Rr(r);if(n==null||n!=null&&n.isCompleted||n!=null&&n.isSkipped)return null;n.start();let i=n.getCurrentStep();i==null||i.start();function s(){return R(this,null,function*(){yield n.skip(),a()})}function d(){return R(this,null,function*(){yield i.complete(),a()})}let v=d;return J(g,f(l({align:"after",anchor:i.selector,onOpenAutoFocus:b=>b.preventDefault(),onPointerDownOutside:b=>b.preventDefault()},e),{children:[T(g.Close,{onClick:s}),T(g.Media,{src:(h=i.videoUri)!=null?h:i.imageUri,type:i.videoUri?"video":"image"}),T(g.Title,{children:i.title}),T(g.Subtitle,{children:i.subtitle}),J(S.Row,{pt:4,alignItems:"center",justifyContent:"space-between",children:[T(g.Progress,{children:`${n.getNumberOfCompletedSteps()}/${n.steps.size}`}),J(S.Row,{gap:3,children:[T(g.Secondary,{title:i.secondaryButtonTitle,onClick:v}),T(g.Primary,{title:i.primaryButtonTitle,onClick:d})]})]})]}))}export{u as Box,O as Button,S as Flex,ce as Provider,w as Text,g as Tooltip,Te as Tour};
|
|
1
|
+
'use client';
|
|
2
|
+
import * as _ from 'react';
|
|
3
|
+
import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
6
|
+
import { keyframes, Global, ThemeProvider } from '@emotion/react';
|
|
7
|
+
import { XMarkIcon } from '@heroicons/react/24/solid';
|
|
8
|
+
import * as v from '@radix-ui/react-popover';
|
|
9
|
+
import { Frigade } from '@frigade/js';
|
|
10
|
+
|
|
11
|
+
var Z=Object.defineProperty,Le=Object.defineProperties;var ze=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var Y=(e,t,o)=>t in e?Z(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,s=(e,t)=>{for(var o in t||(t={}))ee.call(t,o)&&Y(e,o,t[o]);if($)for(var o of $(t))te.call(t,o)&&Y(e,o,t[o]);return e},p=(e,t)=>Le(e,ze(t));var f=(e,t)=>{var o={};for(var r in e)ee.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&$)for(var r of $(e))t.indexOf(r)<0&&te.call(e,r)&&(o[r]=e[r]);return o};var oe=(e,t)=>{for(var o in t)Z(e,o,{get:t[o],enumerable:!0});};var C=(e,t,o)=>new Promise((r,n)=>{var i=u=>{try{c(o.next(u));}catch(d){n(d);}},l=u=>{try{c(o.throw(u));}catch(d){n(d);}},c=u=>u.done?r(u.value):Promise.resolve(u.value).then(i,l);c((o=o.apply(e,t)).next());});var re={borders:{md:"1px solid"},borderWidths:{0:"0",md:"1px"}};var ne={black:"#000000",gray100:"#14161A",gray200:"#181B20",gray300:"#1F2329",gray400:"#2E343D",gray500:"#4C5766",gray600:"#5A6472",gray700:"#C5CBD3",gray800:"#E2E5E9",gray900:"#F1F2F4",white:"#ffffff",blue400:"#015AC6",blue500:"#0171F8",blue800:"#DBECFF",blue900:"#F5F9FF",green400:"#009E37",green500:"#00D149",green800:"#DBFFE8",transparent:"#FFFFFF00",inherit:"inherit",red500:"#c00000"};var ie={md:"10px",lg:"20px",round:"50%"};var a=e=>`var(--fr-colors-${e})`,se={neutral:{background:a("white"),border:a("gray500"),foreground:a("black"),surface:a("gray700"),active:{background:a("white"),border:a("gray900"),foreground:a("black"),surface:a("gray700")},focus:{background:a("white"),border:a("gray900"),foreground:a("black"),surface:a("gray700")},hover:{background:a("white"),border:a("gray900"),foreground:a("black"),surface:a("gray700")}},primary:{background:a("blue500"),border:a("blue500"),foreground:a("white"),surface:a("blue500"),active:{background:a("blue400"),border:a("blue400"),foreground:a("white"),surface:a("blue400")},focus:{background:a("blue500"),border:a("blue500"),foreground:a("white"),surface:a("blue500")},hover:{background:a("blue400"),border:a("blue400"),foreground:a("white"),surface:a("blue400")}},secondary:{background:a("gray900"),border:a("gray900"),foreground:a("black"),surface:a("gray900"),active:{background:a("gray800"),border:a("gray800"),foreground:a("black"),surface:a("gray800")},focus:{background:a("gray900"),border:a("gray900"),foreground:a("black"),surface:a("gray900")},hover:{background:a("gray800"),border:a("gray800"),foreground:a("black"),surface:a("gray800")}}};var ae={md:"0px 4px 20px rgba(0, 0, 0, 0.1)"};var Ke="px",Ue=e=>typeof e=="number"?`${4*e}${Ke}`:e,Ne=[-20,-19,-18,-17,-16,-15,-14,-13,-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,-.5,0,.5,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,"auto"],le=Object.fromEntries(Ne.map(e=>[e,Ue(e)]));var pe={fontFamilies:{default:"TT Interphases Pro, sans-serif"},fontSizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px","4xl":"36px","5xl":"48px"},fontWeights:{thin:"100",extralight:"200",light:"300",regular:"400",medium:"500",demibold:"600",bold:"700",extrabold:"800",black:"900"},letterSpacings:{md:"0.02em"},lineHeights:{xs:"18px",sm:"22px",md:"24px",lg:"26px",xl:"30px","2xl":"38px","3xl":"46px","4xl":"60px"}};var L=p(s(p(s({},re),{colors:s(s({},ne),se)}),pe),{radii:ie,shadows:ae,space:le});function F(e,t="",o="."){return Object.keys(e).reduce((r,n)=>{let l=`${t.length?`${t}${o}`:""}${n}`,c=e[n];return typeof c=="object"&&c!==null&&!Array.isArray(c)?Object.assign(r,F(c,l,o)):r[l]=c,r},{})}function z(e){return F(e,"--fr","-")}function ce(e,t="--fr"){let o={};return Object.keys(e).forEach(r=>{let n=e[r];typeof n=="object"&&n!==null&&!Array.isArray(n)?o[r]=ce(n,`${t}-${r}`):o[r]=`var(${t}-${r})`;}),o}var de=z(L),m=ce(L);var K=F(m.colors),fe={color:K,backgroundColor:K,borderColor:K,border:m.borders,borderRadius:m.radii,borderWidth:m.borderWidths,fontFamily:m.fontFamilies,fontSize:m.fontSizes,fontWeight:m.fontWeights,gap:m.space,lineHeight:m.lineHeights,margin:m.space,marginTop:m.space,marginRight:m.space,marginBottom:m.space,marginLeft:m.space,padding:m.space,paddingTop:m.space,paddingRight:m.space,paddingBottom:m.space,paddingLeft:m.space,alignContent:["center","start","end","flex-start","flex-end","normal","baseline","first baseline","last baseline","space-between","space-around","space-evenly","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],alignItems:["normal","stretch","center","start","end","flex-start","flex-end","self-start","self-end","baseline","first baseline","last baseline","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],alignSelf:["auto","normal","center","start","end","self-start","self-end","flex-start","flex-end","baseline","first baseline","last baseline","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],flexDirection:["row","row-reverse","column","column-reverse","inherit","initial","revert","revert-layer","unset"],flexWrap:["nowrap","wrap","wrap-reverse","inherit","initial","revert","revert-layer","unset"],justifyContent:["center","start","end","flex-start","flex-end","left","right","normal","space-between","space-around","space-evenly","stretch","safe center","unsafe center","inherit","initial","revert","revert-layer","unset"],justifyItems:["normal","stretch","center","start","end","flex-start","flex-end","self-start","self-end","left","right","baseline","first baseline","last baseline","safe center","unsafe center","legacy right","legacy left","legacy center","inherit","initial","revert","revert-layer","unset"],boxSizing:["border-box","content-box","inherit","initial","revert","revert-layer","unset"],position:["static","relative","absolute","fixed","sticky","inherit","initial","revert","revert-layer","unset"],display:["block","block flex","block flow","block flow-root","block grid","contents","flex","flow-root","grid","inherit","initial","inline","inline flex","inline flow","inline flow-root","inline grid","inline-block","inline-flex","inline-grid","list-item","none","revert","revert-layer","table","table-row-group","table-header-group","table-footer-group","table-row","table-cell","table-column-group","table-column","table-caption","unset"]},ue={m:["margin"],mt:["marginTop"],mr:["marginRight"],mb:["marginBottom"],ml:["marginLeft"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],p:["padding"],pt:["paddingTop"],pr:["paddingRight"],pb:["paddingBottom"],pl:["paddingLeft"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"]};function _e(e){if(Array.isArray(e))return new Map(e.map(t=>[t,t]));if(typeof e=="object"&&e!==null)return new Map(Object.entries(e));if(["string","number"].includes(typeof e))return new Map([e,e]);throw new Error("Invalid entry in styleProps")}var Xe=new Map(Object.entries(fe).map(([e,t])=>[e,_e(t)])),qe=new Map(Object.entries(ue).map(([e,t])=>[e,new Set(t)]));function me(e){let t=Object.assign({},e),o={};return Object.entries(t).forEach(([r,n])=>{let i=qe.get(r);i!=null&&(i.forEach(l=>{t[l]=n;}),delete t[r]);}),Object.entries(t).forEach(([r,n])=>{let i=Xe.get(r);if(i!=null)if(typeof n=="string"&&n.indexOf(" ")>-1){let l=n.split(" ");o[r]=l.map(c=>{var u;return (u=i.get(c.toString()))!=null?u:c}).join(" "),delete t[r];}else i.has(n.toString())&&(o[r]=i.get(n.toString()),delete t[r]);}),{cssFromProps:o,unmatchedProps:t}}function ge(e){return e&&`fr-${e}`}function Je(e){return e&&(Array.isArray(e)?e.map(t=>ge(t)).join(" "):ge(e))}function Qe(l,i){var c=l,{as:e,children:t,className:o,part:r}=c,n=f(c,["as","children","className","part"]);let u=e!=null?e:"div",{cssFromProps:d,unmatchedProps:h}=me(n),y=Je(r),w=o||y?clsx(o,y):void 0;return jsx(u,p(s({className:w,css:[{boxSizing:"border-box"},d]},h),{ref:i,children:t}))}var g=_.forwardRef(Qe);var U={};oe(U,{Body1:()=>it,Body2:()=>st,Caption:()=>at,Display1:()=>Ze,Display2:()=>et,H1:()=>tt,H2:()=>ot,H3:()=>rt,H4:()=>nt});var T={color:"neutral.foreground",fontFamily:"default",margin:0},Ze=p(s({},T),{fontSize:"5xl",fontWeight:"bold",lineHeight:"4xl"}),et=p(s({},T),{fontSize:"4xl",fontWeight:"bold",lineHeight:"3xl"}),tt=p(s({},T),{fontSize:"3xl",fontWeight:"bold",lineHeight:"2xl"}),ot=p(s({},T),{fontSize:"2xl",fontWeight:"bold",lineHeight:"xl"}),rt=p(s({},T),{fontSize:"xl",fontWeight:"bold",lineHeight:"lg"}),nt=p(s({},T),{fontSize:"lg",fontWeight:"bold",lineHeight:"md"}),it=p(s({},T),{fontSize:"md",fontWeight:"regular",lineHeight:"md"}),st=p(s({},T),{fontSize:"sm",fontWeight:"regular",lineHeight:"md"}),at=p(s({},T),{fontSize:"xs",fontWeight:"regular",lineHeight:"sm"});function be(n){var i=n,{as:e="span",children:t,variant:o="Body1"}=i,r=f(i,["as","children","variant"]);return jsx(g,p(s(s({as:e},U[o]),r),{children:t}))}var lt=["Display1","Display2","H1","H2","H3","H4","Body1","Body2","Caption"],pt=Object.fromEntries(lt.map(e=>{let t=["H1","H2","H3","H4"].includes(e)?e.toLowerCase():void 0,o=r=>jsx(be,p(s({as:t},r),{variant:e,children:r.children}));return o.displayName=`Text.${e}`,[e,o]})),B=Object.assign(be,pt);var N={};oe(N,{Link:()=>ft,Plain:()=>ut,Primary:()=>ct,Secondary:()=>dt,base:()=>O});var O=({radii:e,space:t})=>({borderWidth:0,borderRadius:e.md,padding:`${t[2]} ${t[4]}`}),ct=({colors:e})=>[O,{backgroundColor:e.primary.surface,color:e.primary.foreground,"&:hover":{backgroundColor:e.primary.hover.surface}}],dt=({colors:e})=>[O,{backgroundColor:e.secondary.surface,color:e.secondary.foreground,"&:hover":{backgroundColor:e.secondary.hover.surface}}],ft=({colors:e})=>[O,{backgroundColor:e.transparent,color:e.primary.surface,"&:hover":{color:e.primary.hover.surface}}],ut=({colors:e})=>[O,{backgroundColor:e.transparent,color:e.neutral.foreground}];function he(i){var l=i,{as:e,children:t,title:o,variant:r="Primary"}=l,n=f(l,["as","children","title","variant"]);return jsxs(g,p(s({as:e!=null?e:"button",css:N[r]},n),{children:[t,o&&jsx(B.Body2,{fontWeight:"demibold",color:"inherit",children:o})]}))}var mt=["Primary","Secondary","Link","Plain"],gt=Object.fromEntries(mt.map(e=>{let t=e.toLocaleLowerCase(),o=i=>{var l=i,{part:r}=l,n=f(l,["part"]);return jsx(he,p(s({part:[`button-${t}`,r]},n),{variant:e,children:n.children}))};return o.displayName=`Text.${e}`,[e,o]})),H=Object.assign(he,gt);var bt=_.forwardRef((n,r)=>{var i=n,{children:e,css:t}=i,o=f(i,["children","css"]);return jsx(g,p(s({css:[{display:"flex",flexDirection:"row"},t]},o),{ref:r,children:e}))}),yt=_.forwardRef((n,r)=>{var i=n,{children:e,css:t}=i,o=f(i,["children","css"]);return jsx(g,p(s({css:[{display:"flex",flexDirection:"column"},t]},o),{ref:r,children:e}))}),E={Column:yt,Row:bt};var S=createContext({apiKey:"",modals:[],setModals:()=>{},navigate:()=>{}});function wt(n){var i=n,{children:e,navigate:t,theme:o}=i,r=f(i,["children","navigate","theme"]);let l=o?z(o):{},[c,u]=useState([]),d=t!=null?t:(h,y="_self")=>{window.open(h,y);};return jsxs(S.Provider,{value:s({modals:c,setModals:u,navigate:d},r),children:[jsx(Global,{styles:{":root":s(s({},de),l)}}),jsx(ThemeProvider,{theme:m,children:e})]})}function Ce(){let e="DOMRect"in globalThis?new DOMRect:{height:0,width:0,x:0,y:0,bottom:0,top:0,right:0,left:0,toJSON:()=>{}},[t,o]=useState(e),[r,n]=useState(null),i=useCallback(l=>{n(l);},[]);return useLayoutEffect(()=>{r&&o(r.getBoundingClientRect());},[r]),{node:r,rect:t,ref:i}}var kt=keyframes({"0%":{opacity:.5,transform:"scale(0.5)"},"50%":{opacity:0,transform:"scale(1)"},"100%":{opacity:0,transform:"scale(1)"}});function Se(r){var n=r,{style:e={},part:t=""}=n,o=f(n,["style","part"]);return jsxs(g,p(s({part:`dot-wrapper ${t}`,style:s({height:"48px",position:"absolute",width:"48px"},e)},o),{children:[jsx(g,{backgroundColor:"primary.surface",part:"dot-pulse",css:{animation:`2s ease-out infinite ${kt}`,borderRadius:"24px",height:"48px",left:0,position:"absolute",top:0,transformOrigin:"center center",width:"48px"}}),jsx(g,{backgroundColor:"primary.surface",part:"dot",style:{borderRadius:"12px",height:"24px",left:"12px",position:"absolute",top:"12px",width:"24px"}})]}))}function Re(r){var n=r,{part:e,src:t}=n,o=f(n,["part","src"]);return jsx(g,s({as:"img",part:["image",e],src:t},o))}function Ht(e){var t,o,r;if(e.includes("youtube"))return `https://www.youtube.com/embed/${(t=e.split("v=")[1])==null?void 0:t.split("&")[0]}`;if(e.includes("vimeo"))return `https://player.vimeo.com/video/${(o=e.split("vimeo.com/")[1])==null?void 0:o.split("&")[0]}`;if(e.includes("wistia"))return `https://fast.wistia.net/embed/iframe/${(r=e.split("wistia.com/medias/")[1])==null?void 0:r.split("&")[0]}`;throw new Error("Could not map videoUri to a known provider (Youtube, Vimeo, Wistia).")}function ke(r){var n=r,{part:e,src:t}=n,o=f(n,["part","src"]);let i=Ht(t);return jsx(g,s({allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,as:"iframe",backgroundColor:"gray100",borderWidth:0,part:["video",e],src:i},o))}function X(r){var n=r,{src:e,type:t}=n,o=f(n,["src","type"]);return jsx(t==="video"?ke:Re,s({src:e},o))}function Fe({props:e,alignAttr:t,sideAttr:o}){let r=o!=null?o:"bottom",n={},i=()=>{var d;if(["after","before"].includes(e.align)){if(t=="start")return "before";if(t=="end")return "after"}return (d=e.align)!=null?d:"after"},l="-24px",c={top:"bottom",right:"left",bottom:"top",left:"right"};n[c[r]]=l;let u=i();return ["before","end"].includes(u)?["top","bottom"].includes(r)?n.right=l:n.bottom=l:["after","start"].includes(u)?["top","bottom"].includes(r)?n.left=l:n.top=l:["top","bottom"].includes(r)?n.left=`calc(50% + ${l})`:n.top=`calc(50% + ${l})`,n}var Oe={content:["align","alignOffset","arrowPadding","avoidCollisions","collisionBoundary","collisionPadding","forceMount","hideWhenDetached","onCloseAutoFocus","onEscapeKeyDown","onFocusOutside","onInteractOutside","onOpenAutoFocus","onPointerDownOutside","side","sideOffset","sticky"],root:["defaultOpen","modal","onOpenChange","open"]};function He(e,t){var n,i,l,c,u;let o=Object.fromEntries(Oe.content.map(d=>[d,e[d]]).filter(d=>d[1]!==void 0)),r=Object.fromEntries(Oe.root.map(d=>[d,e[d]]).filter(d=>d[1]!==void 0));if(o.align=(n=o.align)!=null?n:"after",o.side=(i=o.side)!=null?i:"bottom",["before","after"].includes(o.align)){let d={after:"end",before:"start"},h=(A,I)=>["top","bottom"].includes(I)?A=="after"?"marginLeft":"marginRight":A=="after"?"marginTop":"marginBottom",y=(l=o.alignOffset)!=null?l:0,w=(c=o.style)!=null?c:{},P=(u=o.side)!=null?u:"bottom",M=o.align;o.style=p(s({},w),{[h(M,P)]:y});let D=["top","bottom"].includes(P)?t.width:t.height;o.alignOffset=(D+y)*-1,o.align=d[M];}return {contentProps:o,rootProps:r}}function x(l){var c=l,{anchor:e,children:t,className:o,spotlight:r=!1,style:n}=c,i=f(c,["anchor","children","className","spotlight","style"]);let{node:u,rect:d,ref:h}=Ce(),{contentProps:y,rootProps:w}=He(i,d),[P,M]=useState(y.align),[D,A]=useState(y.side);if(u!==null){let k=u.getAttribute("data-align"),Q=u.getAttribute("data-side");P!==k&&M(k),D!==Q&&A(Q);}let I=useRef(null),[V,$e]=useState(null);if(useEffect(()=>{let k=document.querySelector(e);k!=null&&(I.current=k,$e(I));},[e]),V==null)return null;let W=V.current.getBoundingClientRect(),J="0";typeof window!="undefined"&&(J=window.getComputedStyle(V.current).borderRadius);let je=Fe({props:i,alignAttr:P,sideAttr:D});return jsxs(v.Root,p(s({defaultOpen:!0},w),{children:[jsx(v.Anchor,{virtualRef:V}),jsx(v.Portal,{children:jsxs("div",{className:o,css:{bottom:0,left:0,position:"absolute",right:0,top:0,zIndex:9999},children:[r&&jsx(g,{part:"tooltip-spotlight",position:"absolute",css:{borderRadius:J,boxShadow:"0 0 0 2000px rgb(0 0 0 / 0.5)",height:W.height,left:W.left,top:W.top,width:W.width}}),jsx(v.Content,p(s({asChild:!0},y),{ref:h,children:jsxs(E.Column,{backgroundColor:"neutral.background",borderRadius:"md",p:5,part:"tooltip-content",position:"relative",css:s({boxShadow:"0px 4px 20px rgba(0, 0, 0, 0.1)",maxWidth:"360px"},n),children:[jsx(Se,{style:je}),t]})}))]})})]}))}x.Close=e=>jsx(v.Close,{"aria-label":"Close",asChild:!0,children:jsx(H.Plain,p(s({css:{top:"12px",right:"4px"},part:"tooltip-close",position:"absolute"},e),{children:jsx(XMarkIcon,{height:"24",fill:"currentColor"})}))});x.Media=o=>{var r=o,{src:e}=r,t=f(r,["src"]);return e==null?null:jsx(X,s({borderRadius:"md md 0 0",borderWidth:"0",css:{aspectRatio:"2"},margin:"-5 -5 5",src:e},t))};x.Primary=r=>{var n=r,{onClick:e,title:t}=n,o=f(n,["onClick","title"]);return t==null?null:jsx(H.Primary,s({title:t,onClick:e},o))};x.Progress=o=>{var r=o,{children:e}=r,t=f(r,["children"]);return e==null?null:jsx(B.Body2,p(s({fontWeight:"demibold",part:"progress"},t),{children:e}))};x.Secondary=r=>{var n=r,{onClick:e,title:t}=n,o=f(n,["onClick","title"]);return t==null?null:jsx(H.Secondary,s({title:t,onClick:e},o))};x.Subtitle=o=>{var r=o,{children:e}=r,t=f(r,["children"]);return e==null?null:jsx(B.Body2,p(s({part:"subtitle"},t),{children:e}))};x.Title=o=>{var r=o,{children:e}=r,t=f(r,["children"]);return e==null?null:jsx(B.Body1,p(s({fontWeight:"bold",mb:1,part:"title"},t),{children:e}))};function Ee(e){let[t,o]=useState(),{apiKey:r,apiUrl:n,userId:i}=useContext(S),c=useRef(new Frigade(r,{apiUrl:n,userId:i})).current,u=d=>{if(d.id!==e)return;let h=Object.assign(Object.create(Object.getPrototypeOf(d)),d);o(h);};return useEffect(()=>(C(this,null,function*(){let d=yield c.getFlow(e);o(d);}),c.onStateChange(u),()=>{c.removeStateChangeHandler(u);}),[]),{flow:t}}function De(e){let{modals:t,setModals:o}=useContext(S),[r,n]=useState(!1);return useEffect(()=>(o([...t,e]),()=>o(t.filter(i=>i!==e))),[]),useEffect(()=>{let i=t[0]===e;i!==r&&n(i);},[t]),{isCurrentModal:r}}function j(e,{onComplete:t,onDismiss:o}={}){let r=useRef(null);return useEffect(()=>{e!=null&&(e.isCompleted&&r.current===!1&&t(e),r.current=e==null?void 0:e.isCompleted);},[e==null?void 0:e.isCompleted]),{handleDismiss:useCallback(n=>C(this,null,function*(){if((o==null?void 0:o(e,n))===!1)return n.preventDefault(),!1;yield e.skip();}),[e])}}function Ie(e,{onPrimary:t,onSecondary:o}={}){let{navigate:r}=useContext(S);return {handlePrimary:useCallback(n=>C(this,null,function*(){if((t==null?void 0:t(e,n))===!1)return n.preventDefault(),!1;yield e.complete(),e.primaryButtonUri!=null&&r(e.primaryButtonUri,e.primaryButtonUriTarget);}),[e]),handleSecondary:useCallback(n=>C(this,null,function*(){if((o==null?void 0:o(e,n))===!1)return n.preventDefault(),!1;yield e.complete(),e.secondaryButtonUri!=null&&r(e.secondaryButtonUri,e.secondaryButtonUriTarget);}),[e])}}function We(l){var c=l,{step:e,flow:t,onDismiss:o,onPrimary:r,onSecondary:n}=c,i=f(c,["step","flow","onDismiss","onPrimary","onSecondary"]);var w;let{isCurrentModal:u}=De(`${t.id}-${e.id}`),{handleDismiss:d}=j(t,{onDismiss:o}),{handlePrimary:h,handleSecondary:y}=Ie(e,{onPrimary:r,onSecondary:n});return u?jsxs(x,p(s({anchor:e.selector,onOpenAutoFocus:P=>P.preventDefault(),onPointerDownOutside:P=>P.preventDefault()},i),{children:[jsx(x.Close,{onClick:d}),jsx(x.Media,{src:(w=e.videoUri)!=null?w:e.imageUri,type:e.videoUri?"video":"image"}),jsx(x.Title,{children:e.title}),jsx(x.Subtitle,{children:e.subtitle}),jsxs(E.Row,{alignItems:"center",gap:3,justifyContent:"flex-end",part:"tooltip-footer",pt:4,children:[jsx(x.Progress,{children:`${(e==null?void 0:e.order)+1}/${t.steps.size}`}),jsx(x.Secondary,{marginLeft:"auto",title:e.secondaryButtonTitle,onClick:y}),jsx(x.Primary,{title:e.primaryButtonTitle,onClick:h})]})]}),e.id):null}function qt(r){var n=r,{flowId:e,onComplete:t}=n,o=f(n,["flowId","onComplete"]);let{flow:i}=Ee(e);if(j(i,{onComplete:t}),i==null||i.isVisible===!1)return null;i.start();let l=i.getCurrentStep();return l==null||l.start(),jsx(We,s({step:l,flow:i},o))}
|
|
12
|
+
|
|
13
|
+
export { g as Box, H as Button, E as Flex, wt as Provider, B as Text, x as Tooltip, qt as Tour };
|
|
14
|
+
//# sourceMappingURL=out.js.map
|
|
3
15
|
//# sourceMappingURL=index.js.map
|