@frigade/react 2.0.0-alpha.2 → 2.0.0-alpha.20
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 +52 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +264 -13
- package/dist/index.js +15 -2
- package/dist/index.js.map +1 -1
- package/package.json +8 -6
- package/dist/index.css +0 -2
- package/dist/index.css.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
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 * as _frigade_js from '@frigade/js';
|
|
7
|
+
import { Flow, FlowStep } from '@frigade/js';
|
|
5
8
|
|
|
6
9
|
type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
|
|
7
10
|
as?: T;
|
|
@@ -9,12 +12,14 @@ type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
|
|
|
9
12
|
} & React$1.ComponentPropsWithRef<T>;
|
|
10
13
|
declare const Box: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<React$1.ElementType<any>>>;
|
|
11
14
|
|
|
15
|
+
declare const Card: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
|
|
16
|
+
|
|
12
17
|
type ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
|
|
13
18
|
interface ButtonProps extends BoxProps {
|
|
14
19
|
title?: string;
|
|
15
20
|
variant?: ButtonVariant;
|
|
16
21
|
}
|
|
17
|
-
declare function BaseButton({ as, children,
|
|
22
|
+
declare function BaseButton({ as, children, title, variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
18
23
|
declare const Button: typeof BaseButton & {
|
|
19
24
|
[k: string]: {
|
|
20
25
|
({ part, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
@@ -27,23 +32,223 @@ declare const Flex: {
|
|
|
27
32
|
Row: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
|
|
28
33
|
};
|
|
29
34
|
|
|
35
|
+
declare const tokens: {
|
|
36
|
+
radii: {
|
|
37
|
+
md: string;
|
|
38
|
+
lg: string;
|
|
39
|
+
round: string;
|
|
40
|
+
};
|
|
41
|
+
shadows: {
|
|
42
|
+
md: string;
|
|
43
|
+
};
|
|
44
|
+
space: {
|
|
45
|
+
0: string;
|
|
46
|
+
4: string;
|
|
47
|
+
20: string;
|
|
48
|
+
[-20]: string;
|
|
49
|
+
19: string;
|
|
50
|
+
[-19]: string;
|
|
51
|
+
18: string;
|
|
52
|
+
[-18]: string;
|
|
53
|
+
17: string;
|
|
54
|
+
[-17]: string;
|
|
55
|
+
16: string;
|
|
56
|
+
[-16]: string;
|
|
57
|
+
15: string;
|
|
58
|
+
[-15]: string;
|
|
59
|
+
14: string;
|
|
60
|
+
[-14]: string;
|
|
61
|
+
13: string;
|
|
62
|
+
[-13]: string;
|
|
63
|
+
12: string;
|
|
64
|
+
[-12]: string;
|
|
65
|
+
11: string;
|
|
66
|
+
[-11]: string;
|
|
67
|
+
10: string;
|
|
68
|
+
[-10]: string;
|
|
69
|
+
9: string;
|
|
70
|
+
[-9]: string;
|
|
71
|
+
8: string;
|
|
72
|
+
[-8]: string;
|
|
73
|
+
7: string;
|
|
74
|
+
[-7]: string;
|
|
75
|
+
6: string;
|
|
76
|
+
[-6]: string;
|
|
77
|
+
5: string;
|
|
78
|
+
[-5]: string;
|
|
79
|
+
[-4]: string;
|
|
80
|
+
3: string;
|
|
81
|
+
[-3]: string;
|
|
82
|
+
2: string;
|
|
83
|
+
[-2]: string;
|
|
84
|
+
1: string;
|
|
85
|
+
[-1]: string;
|
|
86
|
+
0.5: string;
|
|
87
|
+
[-0.5]: string;
|
|
88
|
+
auto: string;
|
|
89
|
+
};
|
|
90
|
+
fontFamilies: {
|
|
91
|
+
default: string;
|
|
92
|
+
};
|
|
93
|
+
fontSizes: {
|
|
94
|
+
xs: string;
|
|
95
|
+
sm: string;
|
|
96
|
+
md: string;
|
|
97
|
+
lg: string;
|
|
98
|
+
xl: string;
|
|
99
|
+
'2xl': string;
|
|
100
|
+
'3xl': string;
|
|
101
|
+
'4xl': string;
|
|
102
|
+
'5xl': string;
|
|
103
|
+
};
|
|
104
|
+
fontWeights: {
|
|
105
|
+
thin: string;
|
|
106
|
+
extralight: string;
|
|
107
|
+
light: string;
|
|
108
|
+
regular: string;
|
|
109
|
+
medium: string;
|
|
110
|
+
demibold: string;
|
|
111
|
+
bold: string;
|
|
112
|
+
extrabold: string;
|
|
113
|
+
black: string;
|
|
114
|
+
};
|
|
115
|
+
letterSpacings: {
|
|
116
|
+
md: string;
|
|
117
|
+
};
|
|
118
|
+
lineHeights: {
|
|
119
|
+
xs: string;
|
|
120
|
+
sm: string;
|
|
121
|
+
md: string;
|
|
122
|
+
lg: string;
|
|
123
|
+
xl: string;
|
|
124
|
+
'2xl': string;
|
|
125
|
+
'3xl': string;
|
|
126
|
+
'4xl': string;
|
|
127
|
+
};
|
|
128
|
+
colors: {
|
|
129
|
+
neutral: {
|
|
130
|
+
background: string;
|
|
131
|
+
border: string;
|
|
132
|
+
foreground: string;
|
|
133
|
+
surface: string;
|
|
134
|
+
active: {
|
|
135
|
+
background: string;
|
|
136
|
+
border: string;
|
|
137
|
+
foreground: string;
|
|
138
|
+
surface: string;
|
|
139
|
+
};
|
|
140
|
+
focus: {
|
|
141
|
+
background: string;
|
|
142
|
+
border: string;
|
|
143
|
+
foreground: string;
|
|
144
|
+
surface: string;
|
|
145
|
+
};
|
|
146
|
+
hover: {
|
|
147
|
+
background: string;
|
|
148
|
+
border: string;
|
|
149
|
+
foreground: string;
|
|
150
|
+
surface: string;
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
primary: {
|
|
154
|
+
background: string;
|
|
155
|
+
border: string;
|
|
156
|
+
foreground: string;
|
|
157
|
+
surface: string;
|
|
158
|
+
active: {
|
|
159
|
+
background: string;
|
|
160
|
+
border: string;
|
|
161
|
+
foreground: string;
|
|
162
|
+
surface: string;
|
|
163
|
+
};
|
|
164
|
+
focus: {
|
|
165
|
+
background: string;
|
|
166
|
+
border: string;
|
|
167
|
+
foreground: string;
|
|
168
|
+
surface: string;
|
|
169
|
+
};
|
|
170
|
+
hover: {
|
|
171
|
+
background: string;
|
|
172
|
+
border: string;
|
|
173
|
+
foreground: string;
|
|
174
|
+
surface: string;
|
|
175
|
+
};
|
|
176
|
+
};
|
|
177
|
+
secondary: {
|
|
178
|
+
background: string;
|
|
179
|
+
border: string;
|
|
180
|
+
foreground: string;
|
|
181
|
+
surface: string;
|
|
182
|
+
active: {
|
|
183
|
+
background: string;
|
|
184
|
+
border: string;
|
|
185
|
+
foreground: string;
|
|
186
|
+
surface: string;
|
|
187
|
+
};
|
|
188
|
+
focus: {
|
|
189
|
+
background: string;
|
|
190
|
+
border: string;
|
|
191
|
+
foreground: string;
|
|
192
|
+
surface: string;
|
|
193
|
+
};
|
|
194
|
+
hover: {
|
|
195
|
+
background: string;
|
|
196
|
+
border: string;
|
|
197
|
+
foreground: string;
|
|
198
|
+
surface: string;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
black: string;
|
|
202
|
+
gray100: string;
|
|
203
|
+
gray200: string;
|
|
204
|
+
gray300: string;
|
|
205
|
+
gray400: string;
|
|
206
|
+
gray500: string;
|
|
207
|
+
gray600: string;
|
|
208
|
+
gray700: string;
|
|
209
|
+
gray800: string;
|
|
210
|
+
gray900: string;
|
|
211
|
+
white: string;
|
|
212
|
+
blue400: string;
|
|
213
|
+
blue500: string;
|
|
214
|
+
blue800: string;
|
|
215
|
+
blue900: string;
|
|
216
|
+
green400: string;
|
|
217
|
+
green500: string;
|
|
218
|
+
green800: string;
|
|
219
|
+
transparent: string;
|
|
220
|
+
inherit: string;
|
|
221
|
+
red500: string;
|
|
222
|
+
};
|
|
223
|
+
borders: {
|
|
224
|
+
md: string;
|
|
225
|
+
};
|
|
226
|
+
borderWidths: {
|
|
227
|
+
0: string;
|
|
228
|
+
md: string;
|
|
229
|
+
};
|
|
230
|
+
};
|
|
231
|
+
type Tokens = typeof tokens;
|
|
232
|
+
|
|
233
|
+
type Theme = Partial<Tokens>;
|
|
234
|
+
|
|
235
|
+
type NavigateHandler = (url: string, target?: string) => void;
|
|
30
236
|
interface ProviderProps {
|
|
31
237
|
apiKey: string;
|
|
32
|
-
children?: React.ReactNode;
|
|
33
|
-
config?: ProviderConfig;
|
|
34
|
-
theme?: Record<any, any>;
|
|
35
|
-
}
|
|
36
|
-
interface ProviderConfig {
|
|
37
238
|
apiUrl?: string;
|
|
239
|
+
children?: React.ReactNode;
|
|
240
|
+
navigate?: NavigateHandler;
|
|
241
|
+
theme?: Theme;
|
|
38
242
|
userId?: string;
|
|
243
|
+
groupId?: string;
|
|
39
244
|
}
|
|
40
|
-
declare function Provider({
|
|
245
|
+
declare function Provider({ children, navigate, theme, ...props }: ProviderProps): react_jsx_runtime.JSX.Element;
|
|
41
246
|
|
|
42
247
|
type TextVariant = 'Display1' | 'Display2' | 'H1' | 'H2' | 'H3' | 'H4' | 'Body1' | 'Body2' | 'Caption';
|
|
43
248
|
interface TextProps extends BoxProps {
|
|
44
249
|
variant?: TextVariant;
|
|
45
250
|
}
|
|
46
|
-
declare function BaseText({ as, children,
|
|
251
|
+
declare function BaseText({ as, children, variant, ...props }: TextProps): react_jsx_runtime.JSX.Element;
|
|
47
252
|
declare const Text: typeof BaseText & {
|
|
48
253
|
[k: string]: {
|
|
49
254
|
(props: TextProps): react_jsx_runtime.JSX.Element;
|
|
@@ -61,12 +266,13 @@ interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpe
|
|
|
61
266
|
interface TooltipProps extends MergedRadixPopoverProps {
|
|
62
267
|
align?: Popover.PopoverContentProps['align'] | 'before' | 'after';
|
|
63
268
|
anchor?: string;
|
|
269
|
+
css?: Interpolation<Record<any, any>>;
|
|
64
270
|
spotlight?: boolean;
|
|
65
271
|
style?: React__default.CSSProperties;
|
|
66
272
|
}
|
|
67
|
-
declare function Tooltip({ anchor, children,
|
|
273
|
+
declare function Tooltip({ anchor, children, className, spotlight, style, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
68
274
|
declare namespace Tooltip {
|
|
69
|
-
var Close: (
|
|
275
|
+
var Close: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
70
276
|
var Media: ({ src, ...props }: MediaProps) => react_jsx_runtime.JSX.Element;
|
|
71
277
|
var Primary: ({ onClick, title, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
72
278
|
var Progress: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -75,9 +281,54 @@ declare namespace Tooltip {
|
|
|
75
281
|
var Title: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
76
282
|
}
|
|
77
283
|
|
|
284
|
+
type FlowHandler = (flow: Flow, event?: MouseEvent<unknown>) => boolean | void;
|
|
285
|
+
interface StepHandlers$1 {
|
|
286
|
+
onComplete?: FlowHandler;
|
|
287
|
+
onDismiss?: FlowHandler;
|
|
288
|
+
}
|
|
289
|
+
declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: StepHandlers$1): {
|
|
290
|
+
handleDismiss: (e: MouseEvent<unknown>) => Promise<boolean>;
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
type StepHandler = (step: FlowStep, event?: MouseEvent<unknown>) => boolean | void;
|
|
294
|
+
interface StepHandlers {
|
|
295
|
+
onPrimary?: StepHandler;
|
|
296
|
+
onSecondary?: StepHandler;
|
|
297
|
+
}
|
|
298
|
+
declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlers): {
|
|
299
|
+
handlePrimary: (e: MouseEvent<unknown>) => Promise<boolean>;
|
|
300
|
+
handleSecondary: (e: MouseEvent<unknown>) => Promise<boolean>;
|
|
301
|
+
};
|
|
302
|
+
|
|
78
303
|
interface TourProps extends TooltipProps {
|
|
79
304
|
flowId: string;
|
|
305
|
+
onComplete?: FlowHandler;
|
|
306
|
+
onDismiss?: FlowHandler;
|
|
307
|
+
onPrimary?: StepHandler;
|
|
308
|
+
onSecondary?: StepHandler;
|
|
309
|
+
variables?: Record<string, any>;
|
|
310
|
+
}
|
|
311
|
+
declare function Tour({ flowId, onComplete, variables, ...props }: TourProps): react_jsx_runtime.JSX.Element;
|
|
312
|
+
|
|
313
|
+
declare function useBoundingClientRect(): {
|
|
314
|
+
node: any;
|
|
315
|
+
rect: DOMRect;
|
|
316
|
+
ref: (node: HTMLElement) => void;
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
interface FlowConfig {
|
|
320
|
+
variables?: Record<string, any>;
|
|
80
321
|
}
|
|
81
|
-
declare function
|
|
322
|
+
declare function useFlow(flowId: string, config?: FlowConfig): {
|
|
323
|
+
flow: Flow;
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
declare function useModal(flowId: string): {
|
|
327
|
+
isCurrentModal: boolean;
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
declare function useFrigade(): {
|
|
331
|
+
frigade: _frigade_js.Frigade;
|
|
332
|
+
};
|
|
82
333
|
|
|
83
|
-
export { Box, BoxProps, Button, ButtonProps, Flex, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps };
|
|
334
|
+
export { Box, BoxProps, Button, ButtonProps, Card, Flex, FlowConfig, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useModal, useStepHandlers };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
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, useCallback, useLayoutEffect, useEffect, useContext } from 'react';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
import et from 'dompurify';
|
|
6
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
7
|
+
import { keyframes, Global, ThemeProvider } from '@emotion/react';
|
|
8
|
+
import { Frigade } from '@frigade/js';
|
|
9
|
+
import { XMarkIcon } from '@heroicons/react/24/solid';
|
|
10
|
+
import * as T from '@radix-ui/react-popover';
|
|
11
|
+
|
|
12
|
+
var ne=Object.defineProperty,Ne=Object.defineProperties;var Ge=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var oe=(e,t,r)=>t in e?ne(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,i=(e,t)=>{for(var r in t||(t={}))ie.call(t,r)&&oe(e,r,t[r]);if(L)for(var r of L(t))se.call(t,r)&&oe(e,r,t[r]);return e},p=(e,t)=>Ne(e,Ge(t));var f=(e,t)=>{var r={};for(var o in e)ie.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&L)for(var o of L(e))t.indexOf(o)<0&&se.call(e,o)&&(r[o]=e[o]);return r};var ae=(e,t)=>{for(var r in t)ne(e,r,{get:t[r],enumerable:!0});};var S=(e,t,r)=>new Promise((o,n)=>{var s=d=>{try{c(r.next(d));}catch(u){n(u);}},l=d=>{try{c(r.throw(d));}catch(u){n(u);}},c=d=>d.done?o(d.value):Promise.resolve(d.value).then(s,l);c((r=r.apply(e,t)).next());});var le={borders:{md:"1px solid"},borderWidths:{0:"0",md:"1px"}};var pe={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 ce={md:"10px",lg:"20px",round:"50%"};var a=e=>`var(--fr-colors-${e})`,de={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 fe={md:"0px 4px 20px rgba(0, 0, 0, 0.1)"};var Xe="px",qe=e=>typeof e=="number"?`${4*e}${Xe}`:e,Je=[-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"],ue=Object.fromEntries(Je.map(e=>[e,qe(e)]));var me={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 z=p(i(p(i({},le),{colors:i(i({},pe),de)}),me),{radii:ce,shadows:fe,space:ue});function k(e,t="",r="."){return Object.keys(e).reduce((o,n)=>{let l=`${t.length?`${t}${r}`:""}${n}`,c=e[n];return typeof c=="object"&&c!==null&&!Array.isArray(c)?Object.assign(o,k(c,l,r)):o[l]=c,o},{})}function j(e){return k(e,"--fr","-")}function ge(e,t="--fr"){let r={};return Object.keys(e).forEach(o=>{let n=e[o];typeof n=="object"&&n!==null&&!Array.isArray(n)?r[o]=ge(n,`${t}-${o}`):r[o]=`var(${t}-${o})`;}),r}var xe=j(z),m=ge(z);var K=k(m.colors),be={color:K,backgroundColor:K,borderColor:K,border:m.borders,borderRadius:m.radii,borderWidth:m.borderWidths,boxShadow:m.shadows,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"]},ye={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 Qe(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 Ye=new Map(Object.entries(be).map(([e,t])=>[e,Qe(t)])),Ze=new Map(Object.entries(ye).map(([e,t])=>[e,new Set(t)]));function he(e){let t=Object.assign({},e),r={};return Object.entries(t).forEach(([o,n])=>{let s=Ze.get(o);s!=null&&(s.forEach(l=>{t[l]=n;}),delete t[o]);}),Object.entries(t).forEach(([o,n])=>{let s=Ye.get(o);if(s!=null)if(typeof n=="string"&&n.indexOf(" ")>-1){let l=n.split(" ");r[o]=l.map(c=>{var d;return (d=s.get(c.toString()))!=null?d:c}).join(" "),delete t[o];}else s.has(n.toString())&&(r[o]=s.get(n.toString()),delete t[o]);}),{cssFromProps:r,unmatchedProps:t}}function Pe(e){return e?{__html:et.sanitize(e,{ALLOWED_TAGS:["b","i","a","span","div","p","pre","u","br","img","code","li","ul","table","tbody","thead","tr","td","th","h1","h2","h3","h4","video"],ALLOWED_ATTR:["style","class","target","id","href","alt","src","controls","autoplay","loop","muted"]})}:{__html:""}}function ve(e){return e&&`fr-${e}`}function rt(e){return e&&(Array.isArray(e)?e.map(t=>ve(t)).join(" "):ve(e))}function ot(l,s){var c=l,{as:e,children:t,className:r,part:o}=c,n=f(c,["as","children","className","part"]);let d=e!=null?e:"div",{cssFromProps:u,unmatchedProps:v}=he(n),y=rt(o),P=r||y?clsx(r,y):void 0,h=[{boxSizing:"border-box"},u];return typeof t=="string"?jsx(d,p(i({className:P,css:h},v),{ref:s,dangerouslySetInnerHTML:Pe(t)})):jsx(d,p(i({className:P,css:h},v),{ref:s,children:t}))}var g=_.forwardRef(ot);var nt=_.forwardRef((n,o)=>{var s=n,{children:e,css:t}=s,r=f(s,["children","css"]);return jsx(g,p(i({css:[{display:"flex",flexDirection:"row"},t]},r),{ref:o,children:e}))}),it=_.forwardRef((n,o)=>{var s=n,{children:e,css:t}=s,r=f(s,["children","css"]);return jsx(g,p(i({css:[{display:"flex",flexDirection:"column"},t]},r),{ref:o,children:e}))}),H={Column:it,Row:nt};var U=_.forwardRef((n,o)=>{var s=n,{as:e,children:t}=s,r=f(s,["as","children"]);let l=e!=null?e:H.Column;return jsx(l,p(i({backgroundColor:"neutral.background",borderRadius:"md",boxShadow:"md",p:5},r),{ref:o,children:t}))});var N={};ae(N,{Body1:()=>ut,Body2:()=>mt,Caption:()=>gt,Display1:()=>at,Display2:()=>lt,H1:()=>pt,H2:()=>ct,H3:()=>dt,H4:()=>ft});var w={color:"neutral.foreground",fontFamily:"default",margin:0},at=p(i({},w),{fontSize:"5xl",fontWeight:"bold",lineHeight:"4xl"}),lt=p(i({},w),{fontSize:"4xl",fontWeight:"bold",lineHeight:"3xl"}),pt=p(i({},w),{fontSize:"3xl",fontWeight:"bold",lineHeight:"2xl"}),ct=p(i({},w),{fontSize:"2xl",fontWeight:"bold",lineHeight:"xl"}),dt=p(i({},w),{fontSize:"xl",fontWeight:"bold",lineHeight:"lg"}),ft=p(i({},w),{fontSize:"lg",fontWeight:"bold",lineHeight:"md"}),ut=p(i({},w),{fontSize:"md",fontWeight:"regular",lineHeight:"md"}),mt=p(i({},w),{fontSize:"sm",fontWeight:"regular",lineHeight:"md"}),gt=p(i({},w),{fontSize:"xs",fontWeight:"regular",lineHeight:"sm"});function Be(n){var s=n,{as:e="span",children:t,variant:r="Body1"}=s,o=f(s,["as","children","variant"]);return jsx(g,p(i(i({as:e},N[r]),o),{children:t}))}var xt=["Display1","Display2","H1","H2","H3","H4","Body1","Body2","Caption"],bt=Object.fromEntries(xt.map(e=>{let t=["H1","H2","H3","H4"].includes(e)?e.toLowerCase():void 0,r=o=>jsx(Be,p(i({as:t},o),{variant:e,children:o.children}));return r.displayName=`Text.${e}`,[e,r]})),B=Object.assign(Be,bt);var G={};ae(G,{Link:()=>Pt,Plain:()=>vt,Primary:()=>yt,Secondary:()=>ht,base:()=>O});var O=({radii:e,space:t})=>({borderWidth:0,borderRadius:e.md,padding:`${t[2]} ${t[4]}`}),yt=({colors:e})=>[O,{backgroundColor:e.primary.surface,color:e.primary.foreground,"&:hover":{backgroundColor:e.primary.hover.surface}}],ht=({colors:e})=>[O,{backgroundColor:e.secondary.surface,color:e.secondary.foreground,"&:hover":{backgroundColor:e.secondary.hover.surface}}],Pt=({colors:e})=>[O,{backgroundColor:e.transparent,color:e.primary.surface,"&:hover":{color:e.primary.hover.surface}}],vt=({colors:e})=>[O,{backgroundColor:e.transparent,color:e.neutral.foreground}];function Re(s){var l=s,{as:e,children:t,title:r,variant:o="Primary"}=l,n=f(l,["as","children","title","variant"]);return jsxs(g,p(i({as:e!=null?e:"button",css:G[o]},n),{children:[t,r&&jsx(B.Body2,{fontWeight:"demibold",color:"inherit",children:r})]}))}var Tt=["Primary","Secondary","Link","Plain"],wt=Object.fromEntries(Tt.map(e=>{let t=e.toLocaleLowerCase(),r=s=>{var l=s,{part:o}=l,n=f(l,["part"]);return jsx(Re,p(i({part:[`button-${t}`,o]},n),{variant:e,children:n.children}))};return r.displayName=`Text.${e}`,[e,r]})),E=Object.assign(Re,wt);var C=createContext({apiKey:"",modals:[],setModals:()=>{},navigate:()=>{}});function Ot(n){var s=n,{children:e,navigate:t,theme:r}=s,o=f(s,["children","navigate","theme"]);let l=r?j(r):{},[c,d]=useState([]),u=useRef(new Frigade(o.apiKey,{apiKey:o.apiKey,apiUrl:o.apiUrl,userId:o.userId,groupId:o.groupId})),v=t!=null?t:(y,P="_self")=>{window.open(y,P);};return jsxs(C.Provider,{value:p(i({modals:c,setModals:d,navigate:v},o),{frigade:u.current}),children:[jsx(Global,{styles:{":root":i(i({},xe),l)}}),jsx(ThemeProvider,{theme:m,children:e})]})}function X(){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,r]=useState(e),[o,n]=useState(null),s=useCallback(l=>{n(l);},[]);return useLayoutEffect(()=>{o&&r(o.getBoundingClientRect());},[o]),{node:o,rect:t,ref:s}}var It=keyframes({"0%":{opacity:.5,transform:"scale(0.5)"},"50%":{opacity:0,transform:"scale(1)"},"100%":{opacity:0,transform:"scale(1)"}});function Me(o){var n=o,{style:e={},part:t=""}=n,r=f(n,["style","part"]);return jsxs(g,p(i({part:`dot-wrapper ${t}`,style:i({height:"48px",position:"absolute",width:"48px"},e)},r),{children:[jsx(g,{backgroundColor:"primary.surface",part:"dot-pulse",css:{animation:`2s ease-out infinite ${It}`,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 De(o){var n=o,{part:e,src:t}=n,r=f(n,["part","src"]);return jsx(g,i({as:"img",part:["image",e],src:t},r))}function $t(e){var t,r,o;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/${(r=e.split("vimeo.com/")[1])==null?void 0:r.split("&")[0]}`;if(e.includes("wistia"))return `https://fast.wistia.net/embed/iframe/${(o=e.split("wistia.com/medias/")[1])==null?void 0:o.split("&")[0]}`;throw new Error("Could not map videoUri to a known provider (Youtube, Vimeo, Wistia).")}function Ae(o){var n=o,{part:e,src:t}=n,r=f(n,["part","src"]);let s=$t(t);return jsx(g,i({allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,as:"iframe",backgroundColor:"gray100",borderWidth:0,part:["video",e],src:s},r))}function q(o){var n=o,{src:e,type:t}=n,r=f(n,["src","type"]);return jsx(t==="video"?Ae:De,i({src:e},r))}function Ie({props:e,alignAttr:t,sideAttr:r}){let o=r!=null?r:"bottom",n={},s=()=>{var u;if(["after","before"].includes(e.align)){if(t=="start")return "before";if(t=="end")return "after"}return (u=e.align)!=null?u:"after"},l="-24px",c={top:"bottom",right:"left",bottom:"top",left:"right"};n[c[o]]=l;let d=s();return ["before","end"].includes(d)?["top","bottom"].includes(o)?n.right=l:n.bottom=l:["after","start"].includes(d)?["top","bottom"].includes(o)?n.left=l:n.top=l:["top","bottom"].includes(o)?n.left=`calc(50% + ${l})`:n.top=`calc(50% + ${l})`,n}var Ve={content:["align","alignOffset","arrowPadding","avoidCollisions","collisionBoundary","collisionPadding","forceMount","hideWhenDetached","onCloseAutoFocus","onEscapeKeyDown","onFocusOutside","onInteractOutside","onOpenAutoFocus","onPointerDownOutside","side","sideOffset","sticky"],root:["defaultOpen","modal","onOpenChange","open"]};function We(e,t){var n,s,l,c,d;let r=Object.fromEntries(Ve.content.map(u=>[u,e[u]]).filter(u=>u[1]!==void 0)),o=Object.fromEntries(Ve.root.map(u=>[u,e[u]]).filter(u=>u[1]!==void 0));if(r.align=(n=r.align)!=null?n:"after",r.side=(s=r.side)!=null?s:"bottom",["before","after"].includes(r.align)){let u={after:"end",before:"start"},v=(I,V)=>["top","bottom"].includes(V)?I=="after"?"marginLeft":"marginRight":I=="after"?"marginTop":"marginBottom",y=(l=r.alignOffset)!=null?l:0,P=(c=r.style)!=null?c:{},h=(d=r.side)!=null?d:"bottom",D=r.align;r.style=p(i({},P),{[v(D,h)]:y});let A=["top","bottom"].includes(h)?t.width:t.height;r.alignOffset=(A+y)*-1,r.align=u[D];}return {contentProps:r,rootProps:o}}function x(l){var c=l,{anchor:e,children:t,className:r,spotlight:o=!1,style:n}=c,s=f(c,["anchor","children","className","spotlight","style"]);let{node:d,rect:u,ref:v}=X(),{contentProps:y,rootProps:P}=We(s,u),[h,D]=useState(y.align),[A,I]=useState(y.side);if(d!==null){let R=d.getAttribute("data-align"),re=d.getAttribute("data-side");h!==R&&D(R),A!==re&&I(re);}let V=useRef(null),[W,_e]=useState(null);if(useEffect(()=>{let R=document.querySelector(e);R!=null&&(V.current=R,_e(V));},[e]),W==null)return null;let $=W.current.getBoundingClientRect(),te="0";typeof window!="undefined"&&(te=window.getComputedStyle(W.current).borderRadius);let Ue=Ie({props:s,alignAttr:h,sideAttr:A});return jsxs(T.Root,p(i({defaultOpen:!0},P),{children:[jsx(T.Anchor,{virtualRef:W}),jsx(T.Portal,{children:jsxs("div",{className:r,css:{bottom:0,left:0,position:"absolute",right:0,top:0,zIndex:9999},children:[o&&jsx(g,{part:"tooltip-spotlight",position:"absolute",css:{borderRadius:te,boxShadow:"0 0 0 2000px rgb(0 0 0 / 0.5)",height:$.height,left:$.left,top:$.top,width:$.width}}),jsx(T.Content,p(i({asChild:!0},y),{ref:v,children:jsxs(U,{part:"tooltip-content",position:"relative",css:i({maxWidth:"360px"},n),children:[jsx(Me,{style:Ue}),t]})}))]})})]}))}x.Close=e=>jsx(T.Close,{"aria-label":"Close",asChild:!0,children:jsx(E.Plain,p(i({css:{top:"12px",right:"4px"},part:"tooltip-close",position:"absolute"},e),{children:jsx(XMarkIcon,{height:"24",fill:"currentColor"})}))});x.Media=r=>{var o=r,{src:e}=o,t=f(o,["src"]);return e==null?null:jsx(q,i({borderRadius:"md md 0 0",borderWidth:"0",css:{aspectRatio:"2"},margin:"-5 -5 5",src:e},t))};x.Primary=o=>{var n=o,{onClick:e,title:t}=n,r=f(n,["onClick","title"]);return t==null?null:jsx(E.Primary,i({title:t,onClick:e},r))};x.Progress=r=>{var o=r,{children:e}=o,t=f(o,["children"]);return e==null?null:jsx(B.Body2,p(i({fontWeight:"demibold",part:"progress"},t),{children:e}))};x.Secondary=o=>{var n=o,{onClick:e,title:t}=n,r=f(n,["onClick","title"]);return t==null?null:jsx(E.Secondary,i({title:t,onClick:e},r))};x.Subtitle=r=>{var o=r,{children:e}=o,t=f(o,["children"]);return e==null?null:jsx(B.Body2,p(i({part:"subtitle"},t),{children:e}))};x.Title=r=>{var o=r,{children:e}=o,t=f(o,["children"]);return e==null?null:jsx(B.Body1,p(i({fontWeight:"bold",mb:1,part:"title"},t),{children:e}))};function Y(e,t){let[r,o]=useState(),[n,s]=useState(""),{frigade:l}=useContext(C),c=d=>{d.id===e&&(t!=null&&t.variables&&d.applyVariables(t.variables),o(d),s(Math.random().toString()));};return useEffect(()=>(S(this,null,function*(){let d=yield l.getFlow(e);t!=null&&t.variables&&d.applyVariables(t.variables),o(d);}),l.onStateChange(c),()=>{l.removeStateChangeHandler(c);}),[]),{flow:r}}function Z(e){let{modals:t,setModals:r}=useContext(C),[o,n]=useState(!1);return useEffect(()=>(r([...t,e]),()=>r(t.filter(s=>s!==e))),[]),useEffect(()=>{let s=t[0]===e;s!==o&&n(s);},[t]),{isCurrentModal:o}}function M(e,{onComplete:t,onDismiss:r}={}){let o=useRef(null);return useEffect(()=>{e!=null&&(e.isCompleted&&o.current===!1&&t&&t(e),o.current=e==null?void 0:e.isCompleted);},[e==null?void 0:e.isCompleted]),{handleDismiss:useCallback(n=>S(this,null,function*(){if((r==null?void 0:r(e,n))===!1)return n.preventDefault(),!1;yield e.skip();}),[e])}}function ee(e,{onPrimary:t,onSecondary:r}={}){let{navigate:o}=useContext(C);return {handlePrimary:useCallback(n=>S(this,null,function*(){if((t==null?void 0:t(e,n))===!1)return n.preventDefault(),!1;yield e.complete(),e.primaryButtonUri!=null&&o(e.primaryButtonUri,e.primaryButtonUriTarget);}),[e]),handleSecondary:useCallback(n=>S(this,null,function*(){if((r==null?void 0:r(e,n))===!1)return n.preventDefault(),!1;yield e.complete(),e.secondaryButtonUri!=null&&o(e.secondaryButtonUri,e.secondaryButtonUriTarget);}),[e])}}function Ke(l){var c=l,{step:e,flow:t,onDismiss:r,onPrimary:o,onSecondary:n}=c,s=f(c,["step","flow","onDismiss","onPrimary","onSecondary"]);var P;let{isCurrentModal:d}=Z(`${t.id}-${e.id}`),{handleDismiss:u}=M(t,{onDismiss:r}),{handlePrimary:v,handleSecondary:y}=ee(e,{onPrimary:o,onSecondary:n});return d?jsxs(x,p(i({anchor:e.selector,onOpenAutoFocus:h=>h.preventDefault(),onPointerDownOutside:h=>h.preventDefault()},s),{children:[jsx(x.Close,{onClick:u}),jsx(x.Media,{src:(P=e.videoUri)!=null?P:e.imageUri,type:e.videoUri?"video":"image"}),jsx(x.Title,{children:e.title}),jsx(x.Subtitle,{children:e.subtitle}),jsxs(H.Row,{alignItems:"center",gap:3,justifyContent:"flex-end",part:"tooltip-footer",pt:4,children:[jsx(x.Progress,{children:`${t.getNumberOfCompletedSteps()+1}/${t.getNumberOfAvailableSteps()}`}),jsx(x.Secondary,{marginLeft:"auto",title:e.secondaryButtonTitle,onClick:y}),jsx(x.Primary,{title:e.primaryButtonTitle,onClick:v})]})]}),e.id):null}function Zt(n){var s=n,{flowId:e,onComplete:t,variables:r}=s,o=f(s,["flowId","onComplete","variables"]);let{flow:l}=Y(e,{variables:r});if(M(l,{onComplete:t}),l==null||l.isVisible===!1)return null;l.start();let c=l.getCurrentStep();return c==null||c.start(),jsx(Ke,i({step:c,flow:l},o))}function rr(){let{frigade:e}=useContext(C);return {frigade:e}}
|
|
13
|
+
|
|
14
|
+
export { g as Box, E as Button, U as Card, H as Flex, Ot as Provider, B as Text, x as Tooltip, Zt as Tour, X as useBoundingClientRect, Y as useFlow, M as useFlowHandlers, rr as useFrigade, Z as useModal, ee as useStepHandlers };
|
|
15
|
+
//# sourceMappingURL=out.js.map
|
|
3
16
|
//# sourceMappingURL=index.js.map
|