@tangle-network/sandbox-ui 0.113.7 → 0.115.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/README.md +40 -0
  2. package/dist/WorkflowGraph-B-NsdYz_.js +1961 -0
  3. package/dist/assets.d.ts +214 -206
  4. package/dist/assets.js +1057 -908
  5. package/dist/auth-CWe17Hly.js +37 -0
  6. package/dist/auth.d.ts +2 -30
  7. package/dist/auth.js +2 -15
  8. package/dist/chat-BOvFAe6p.js +903 -0
  9. package/dist/chat.d.ts +2 -230
  10. package/dist/chat.js +2 -34
  11. package/dist/connectors.d.ts +52 -49
  12. package/dist/connectors.js +595 -643
  13. package/dist/dashboard-CZ3VgNPR.js +4969 -0
  14. package/dist/dashboard.d.ts +4 -1297
  15. package/dist/dashboard.js +4 -152
  16. package/dist/editor.d.ts +2 -1
  17. package/dist/editor.js +2 -31
  18. package/dist/files.d.ts +2 -6
  19. package/dist/files.js +2 -33
  20. package/dist/globals.css +75 -3
  21. package/dist/hooks.d.ts +146 -148
  22. package/dist/hooks.js +222 -55
  23. package/dist/index-CKRaj1pM.d.ts +776 -0
  24. package/dist/index-CXX5IpH2.d.ts +2 -0
  25. package/dist/index-CesPlOyx.d.ts +367 -0
  26. package/dist/index-DPePq7c8.d.ts +1340 -0
  27. package/dist/index-DiyLLZuJ.d.ts +230 -0
  28. package/dist/index-DvmZLMT1.d.ts +30 -0
  29. package/dist/index-PRM636Ex.d.ts +86 -0
  30. package/dist/index.d.ts +21 -33
  31. package/dist/index.js +21 -701
  32. package/dist/info-panel-C9cqDzOL.js +594 -0
  33. package/dist/integrations.d.ts +133 -141
  34. package/dist/integrations.js +491 -673
  35. package/dist/markdown.d.ts +2 -1
  36. package/dist/markdown.js +2 -13
  37. package/dist/model-I-NIxeM-.js +1250 -0
  38. package/dist/model-brand-B9A4H9pJ.d.ts +98 -0
  39. package/dist/model-brand-hMyDTUqB.js +624 -0
  40. package/dist/motion-DkyBRJb9.js +37 -0
  41. package/dist/openui.d.ts +2 -1
  42. package/dist/openui.js +2 -7
  43. package/dist/pages.d.ts +307 -300
  44. package/dist/pages.js +4404 -4181
  45. package/dist/primitives-Dh1vG6J3.js +113 -0
  46. package/dist/primitives.d.ts +2 -74
  47. package/dist/primitives.js +2 -204
  48. package/dist/provider-logo-DjqmConF.js +311 -0
  49. package/dist/run.d.ts +2 -1
  50. package/dist/run.js +2 -23
  51. package/dist/sdk-hooks.d.ts +3 -4
  52. package/dist/sdk-hooks.js +3 -31
  53. package/dist/sidecar-DgH_vQ6m.d.ts +9 -0
  54. package/dist/stores.d.ts +14 -15
  55. package/dist/stores.js +13 -81
  56. package/dist/styles.css +75 -3
  57. package/dist/template-card-L-4gmjx2.d.ts +90 -0
  58. package/dist/terminal-CN9ZgHRt.js +197 -0
  59. package/dist/terminal.d.ts +60 -60
  60. package/dist/terminal.js +2 -10
  61. package/dist/tokens.css +51 -0
  62. package/dist/types.d.ts +4 -11
  63. package/dist/types.js +0 -1
  64. package/dist/use-pty-session-C8cE0adT.js +669 -0
  65. package/dist/use-sidecar-auth-CCTJcrq7.d.ts +145 -0
  66. package/dist/use-sidecar-auth-DkdcufOz.js +742 -0
  67. package/dist/utils-DzWbktWG.js +2 -0
  68. package/dist/utils.d.ts +2 -1
  69. package/dist/utils.js +2 -37
  70. package/dist/workbench-ztU44Jt2.js +8455 -0
  71. package/dist/workbench.d.ts +2 -310
  72. package/dist/workbench.js +2 -44
  73. package/dist/workflows.d.ts +341 -339
  74. package/dist/workflows.js +74 -109
  75. package/dist/workspace-B6AtI6ld.js +2510 -0
  76. package/dist/workspace.d.ts +2 -761
  77. package/dist/workspace.js +2 -51
  78. package/package.json +46 -40
  79. package/dist/WorkflowGraph-2QOORYIR.js +0 -1722
  80. package/dist/chunk-2BUPSB7O.js +0 -0
  81. package/dist/chunk-3KBNPQQF.js +0 -2697
  82. package/dist/chunk-3LIXVEEE.js +0 -279
  83. package/dist/chunk-72UF2H5H.js +0 -707
  84. package/dist/chunk-AI25G5MX.js +0 -944
  85. package/dist/chunk-ANSC5AFC.js +0 -314
  86. package/dist/chunk-AZ3AWMTM.js +0 -8
  87. package/dist/chunk-BGVEHENC.js +0 -10
  88. package/dist/chunk-CZ7CSFO4.js +0 -39
  89. package/dist/chunk-DYXXYGS4.js +0 -4700
  90. package/dist/chunk-EI44GEQ5.js +0 -6
  91. package/dist/chunk-IACRDXER.js +0 -219
  92. package/dist/chunk-IOB2PW5Z.js +0 -55
  93. package/dist/chunk-M4K7ZGR2.js +0 -24
  94. package/dist/chunk-MYZAW4RX.js +0 -665
  95. package/dist/chunk-OMUIPJQZ.js +0 -555
  96. package/dist/chunk-RQZRXKMR.js +0 -398
  97. package/dist/chunk-SOKKTB7W.js +0 -230
  98. package/dist/chunk-TADGS4Q7.js +0 -1010
  99. package/dist/chunk-UCQNOUN3.js +0 -7964
  100. package/dist/chunk-ULPLRBMF.js +0 -34
  101. package/dist/chunk-WID73FPH.js +0 -89
  102. package/dist/chunk-X3YXP7FG.js +0 -38
  103. package/dist/logo-DiAjq759.d.ts +0 -15
  104. package/dist/model-brand-BNnaUKKZ.d.ts +0 -99
  105. package/dist/ports-list-CDIvTNnX.d.ts +0 -17
  106. package/dist/sdk-hooks-Djkjq4cp.d.ts +0 -145
  107. package/dist/template-card-Bn-Bw5xC.d.ts +0 -87
package/dist/assets.d.ts CHANGED
@@ -1,275 +1,283 @@
1
- import * as React from 'react';
2
-
1
+ import * as React$1 from "react";
2
+ //#region src/assets/types.d.ts
3
3
  interface BrandTokens {
4
- primaryColor: string;
5
- accentColor: string;
6
- textColor: string;
7
- fontFamily: string;
8
- logoUrl?: string;
9
- businessName: string;
10
- voice: string;
4
+ primaryColor: string;
5
+ accentColor: string;
6
+ textColor: string;
7
+ fontFamily: string;
8
+ logoUrl?: string;
9
+ businessName: string;
10
+ voice: string;
11
11
  }
12
12
  type AssetFormat = "email" | "image:feed" | "image:story" | "image:carousel" | "video:reel" | "video:feed" | "copy:caption" | "copy:headline" | "copy:sms";
13
13
  type AssetStatus = "draft" | "pending_review" | "approved" | "rejected" | "scheduled" | "published";
14
14
  interface EmailHeroSection {
15
- type: "hero";
16
- headline: string;
17
- subheadline?: string;
18
- imageUrl?: string;
19
- ctaLabel?: string;
20
- ctaUrl?: string;
15
+ type: "hero";
16
+ headline: string;
17
+ subheadline?: string;
18
+ imageUrl?: string;
19
+ ctaLabel?: string;
20
+ ctaUrl?: string;
21
21
  }
22
22
  interface EmailBodySection {
23
- type: "body";
24
- text: string;
23
+ type: "body";
24
+ text: string;
25
25
  }
26
26
  interface EmailFeatureSection {
27
- type: "feature";
28
- headline: string;
29
- description: string;
30
- imageUrl?: string;
27
+ type: "feature";
28
+ headline: string;
29
+ description: string;
30
+ imageUrl?: string;
31
31
  }
32
32
  interface EmailTestimonialSection {
33
- type: "testimonial";
34
- quote: string;
35
- author: string;
36
- role?: string;
37
- avatarUrl?: string;
33
+ type: "testimonial";
34
+ quote: string;
35
+ author: string;
36
+ role?: string;
37
+ avatarUrl?: string;
38
38
  }
39
39
  interface EmailCtaSection {
40
- type: "cta";
41
- label: string;
42
- url: string;
43
- subtext?: string;
40
+ type: "cta";
41
+ label: string;
42
+ url: string;
43
+ subtext?: string;
44
44
  }
45
45
  interface EmailDividerSection {
46
- type: "divider";
46
+ type: "divider";
47
47
  }
48
48
  type EmailSection = EmailHeroSection | EmailBodySection | EmailFeatureSection | EmailTestimonialSection | EmailCtaSection | EmailDividerSection;
49
49
  interface EmailContent {
50
- subject: string;
51
- preheader?: string;
52
- sections: EmailSection[];
50
+ subject: string;
51
+ preheader?: string;
52
+ sections: EmailSection[];
53
53
  }
54
54
  interface ImageTextLayer {
55
- type: "text";
56
- text: string;
57
- fontSize?: number;
58
- fontWeight?: "normal" | "bold";
59
- color?: string;
60
- x: number;
61
- y: number;
62
- width?: number;
63
- align?: "left" | "center" | "right";
55
+ type: "text";
56
+ text: string;
57
+ fontSize?: number;
58
+ fontWeight?: "normal" | "bold";
59
+ color?: string;
60
+ x: number;
61
+ y: number;
62
+ width?: number;
63
+ align?: "left" | "center" | "right";
64
64
  }
65
65
  interface ImageImageLayer {
66
- type: "image";
67
- url: string;
68
- x: number;
69
- y: number;
70
- width: number;
71
- height: number;
72
- opacity?: number;
66
+ type: "image";
67
+ url: string;
68
+ x: number;
69
+ y: number;
70
+ width: number;
71
+ height: number;
72
+ opacity?: number;
73
73
  }
74
74
  interface ImageShapeLayer {
75
- type: "shape";
76
- shape: "rect" | "circle" | "rounded-rect";
77
- x: number;
78
- y: number;
79
- width: number;
80
- height: number;
81
- fill?: string;
82
- opacity?: number;
75
+ type: "shape";
76
+ shape: "rect" | "circle" | "rounded-rect";
77
+ x: number;
78
+ y: number;
79
+ width: number;
80
+ height: number;
81
+ fill?: string;
82
+ opacity?: number;
83
83
  }
84
84
  interface ImageLogoLayer {
85
- type: "logo";
86
- x: number;
87
- y: number;
88
- width?: number;
85
+ type: "logo";
86
+ x: number;
87
+ y: number;
88
+ width?: number;
89
89
  }
90
90
  type ImageLayer = ImageTextLayer | ImageImageLayer | ImageShapeLayer | ImageLogoLayer;
91
91
  type ImageBackground = {
92
- type: "color";
93
- value: string;
92
+ type: "color";
93
+ value: string;
94
94
  } | {
95
- type: "gradient";
96
- from: string;
97
- to: string;
98
- direction?: string;
95
+ type: "gradient";
96
+ from: string;
97
+ to: string;
98
+ direction?: string;
99
99
  } | {
100
- type: "image";
101
- url: string;
102
- overlay?: string;
103
- overlayOpacity?: number;
100
+ type: "image";
101
+ url: string;
102
+ overlay?: string;
103
+ overlayOpacity?: number;
104
104
  };
105
105
  interface ImageSlide {
106
- background: ImageBackground;
107
- layers: ImageLayer[];
106
+ background: ImageBackground;
107
+ layers: ImageLayer[];
108
108
  }
109
109
  interface ImageContent {
110
- slides: ImageSlide[];
110
+ slides: ImageSlide[];
111
111
  }
112
112
  interface VideoTextAnimationScene {
113
- type: "text-animation";
114
- durationSeconds: number;
115
- headline: string;
116
- subtext?: string;
117
- animation?: "fade" | "slide-up" | "typewriter";
118
- background?: ImageBackground;
113
+ type: "text-animation";
114
+ durationSeconds: number;
115
+ headline: string;
116
+ subtext?: string;
117
+ animation?: "fade" | "slide-up" | "typewriter";
118
+ background?: ImageBackground;
119
119
  }
120
120
  interface VideoImageRevealScene {
121
- type: "image-reveal";
122
- durationSeconds: number;
123
- imageUrl: string;
124
- caption?: string;
121
+ type: "image-reveal";
122
+ durationSeconds: number;
123
+ imageUrl: string;
124
+ caption?: string;
125
125
  }
126
126
  interface VideoSlideScene {
127
- type: "slide";
128
- durationSeconds: number;
129
- slide: ImageSlide;
127
+ type: "slide";
128
+ durationSeconds: number;
129
+ slide: ImageSlide;
130
130
  }
131
131
  interface VideoCountdownScene {
132
- type: "countdown";
133
- durationSeconds: number;
134
- from: number;
135
- label?: string;
132
+ type: "countdown";
133
+ durationSeconds: number;
134
+ from: number;
135
+ label?: string;
136
136
  }
137
137
  type VideoScene = VideoTextAnimationScene | VideoImageRevealScene | VideoSlideScene | VideoCountdownScene;
138
138
  interface VideoCaption {
139
- startSeconds: number;
140
- endSeconds: number;
141
- text: string;
139
+ startSeconds: number;
140
+ endSeconds: number;
141
+ text: string;
142
142
  }
143
143
  interface VideoContent {
144
- durationSeconds: number;
145
- scenes: VideoScene[];
146
- audioUrl?: string;
147
- captions?: VideoCaption[];
148
- renderedUrl?: string;
144
+ durationSeconds: number;
145
+ scenes: VideoScene[];
146
+ audioUrl?: string;
147
+ captions?: VideoCaption[];
148
+ renderedUrl?: string;
149
149
  }
150
150
  type CopyPlatform = "instagram" | "tiktok" | "x" | "linkedin" | "sms" | "email-subject";
151
151
  interface CopyContent {
152
- headline: string;
153
- body: string;
154
- hashtags?: string[];
155
- platform: CopyPlatform;
156
- characterCount?: number;
152
+ headline: string;
153
+ body: string;
154
+ hashtags?: string[];
155
+ platform: CopyPlatform;
156
+ characterCount?: number;
157
157
  }
158
158
  type AssetContentMap = {
159
- email: EmailContent;
160
- "image:feed": ImageContent;
161
- "image:story": ImageContent;
162
- "image:carousel": ImageContent;
163
- "video:reel": VideoContent;
164
- "video:feed": VideoContent;
165
- "copy:caption": CopyContent;
166
- "copy:headline": CopyContent;
167
- "copy:sms": CopyContent;
159
+ email: EmailContent;
160
+ "image:feed": ImageContent;
161
+ "image:story": ImageContent;
162
+ "image:carousel": ImageContent;
163
+ "video:reel": VideoContent;
164
+ "video:feed": VideoContent;
165
+ "copy:caption": CopyContent;
166
+ "copy:headline": CopyContent;
167
+ "copy:sms": CopyContent;
168
168
  };
169
169
  interface AssetSpec<F extends AssetFormat = AssetFormat> {
170
- id: string;
171
- workspaceId: string;
172
- campaignId?: string;
173
- format: F;
174
- brand: BrandTokens;
175
- content: AssetContentMap[F];
176
- status: AssetStatus;
177
- scheduledAt?: string;
178
- createdAt: string;
179
- updatedAt: string;
170
+ id: string;
171
+ workspaceId: string;
172
+ campaignId?: string;
173
+ format: F;
174
+ brand: BrandTokens;
175
+ content: AssetContentMap[F];
176
+ status: AssetStatus;
177
+ scheduledAt?: string;
178
+ createdAt: string;
179
+ updatedAt: string;
180
180
  }
181
181
  interface ApprovalEvent {
182
- assetId: string;
183
- variantId?: string;
184
- action: "approved" | "rejected" | "edited" | "scheduled";
185
- editedFields?: string[];
186
- userId: string;
187
- timestamp: string;
182
+ assetId: string;
183
+ variantId?: string;
184
+ action: "approved" | "rejected" | "edited" | "scheduled";
185
+ editedFields?: string[];
186
+ userId: string;
187
+ timestamp: string;
188
188
  }
189
189
  interface AssetVariant {
190
- id: string;
191
- parentId: string;
192
- label: string;
193
- spec: AssetSpec;
194
- approvedAt?: string;
195
- rejectedAt?: string;
196
- editLog: ApprovalEvent[];
197
- }
198
-
190
+ id: string;
191
+ parentId: string;
192
+ label: string;
193
+ spec: AssetSpec;
194
+ approvedAt?: string;
195
+ rejectedAt?: string;
196
+ editLog: ApprovalEvent[];
197
+ }
198
+ //#endregion
199
+ //#region src/assets/approval-queue.d.ts
199
200
  interface ApprovalQueueProps {
200
- assets: AssetSpec[];
201
- variantCounts?: Record<string, number>;
202
- onApprove?: (id: string, scheduledAt?: string) => void;
203
- onReject?: (id: string) => void;
204
- onEdit?: (id: string) => void;
205
- onSave?: (spec: AssetSpec) => void;
206
- onRevisionRequest?: (id: string, instruction: string) => void;
207
- onRenderRequest?: (id: string) => void;
208
- renderingIds?: Set<string>;
209
- previewUrls?: Record<string, string>;
210
- className?: string;
211
- }
212
- declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds, previewUrls, className }: ApprovalQueueProps): React.JSX.Element;
213
-
201
+ assets: AssetSpec[];
202
+ variantCounts?: Record<string, number>;
203
+ onApprove?: (id: string, scheduledAt?: string) => void;
204
+ onReject?: (id: string) => void;
205
+ onEdit?: (id: string) => void;
206
+ onSave?: (spec: AssetSpec) => void;
207
+ onRevisionRequest?: (id: string, instruction: string) => void;
208
+ onRenderRequest?: (id: string) => void;
209
+ renderingIds?: Set<string>;
210
+ previewUrls?: Record<string, string>;
211
+ className?: string;
212
+ }
213
+ export declare function ApprovalQueue({ assets, variantCounts, onApprove, onReject, onEdit, onSave, onRevisionRequest, onRenderRequest, renderingIds, previewUrls, className }: ApprovalQueueProps): React$1.JSX.Element;
214
+ //#endregion
215
+ //#region src/assets/asset-card.d.ts
214
216
  interface AssetCardProps {
215
- spec: AssetSpec;
216
- variantCount?: number;
217
- onApprove?: (id: string) => void;
218
- onReject?: (id: string) => void;
219
- onEdit?: (id: string) => void;
220
- className?: string;
221
- }
222
- declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }: AssetCardProps): React.JSX.Element;
223
-
217
+ spec: AssetSpec;
218
+ variantCount?: number;
219
+ onApprove?: (id: string) => void;
220
+ onReject?: (id: string) => void;
221
+ onEdit?: (id: string) => void;
222
+ className?: string;
223
+ }
224
+ export declare function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }: AssetCardProps): import("react").JSX.Element;
225
+ //#endregion
226
+ //#region src/assets/asset-editor.d.ts
224
227
  interface AssetEditorProps {
225
- spec: AssetSpec;
226
- previewUrl?: string;
227
- isRendering?: boolean;
228
- onSave?: (spec: AssetSpec) => void;
229
- onRenderRequest?: () => void;
230
- onRevisionRequest?: (instruction: string) => void;
231
- className?: string;
232
- }
233
- declare function AssetEditor({ spec, previewUrl, isRendering, onSave, onRenderRequest, onRevisionRequest, className }: AssetEditorProps): React.JSX.Element;
234
-
228
+ spec: AssetSpec;
229
+ previewUrl?: string;
230
+ isRendering?: boolean;
231
+ onSave?: (spec: AssetSpec) => void;
232
+ onRenderRequest?: () => void;
233
+ onRevisionRequest?: (instruction: string) => void;
234
+ className?: string;
235
+ }
236
+ export declare function AssetEditor({ spec, previewUrl, isRendering, onSave, onRenderRequest, onRevisionRequest, className }: AssetEditorProps): React$1.JSX.Element;
237
+ //#endregion
238
+ //#region src/assets/preview/copy-preview.d.ts
235
239
  interface CopyPreviewProps {
236
- content: CopyContent;
237
- className?: string;
240
+ content: CopyContent;
241
+ className?: string;
238
242
  }
239
- declare function CopyPreview({ content, className }: CopyPreviewProps): React.JSX.Element;
240
-
243
+ export declare function CopyPreview({ content, className }: CopyPreviewProps): import("react").JSX.Element;
244
+ //#endregion
245
+ //#region src/assets/preview/email-preview.d.ts
241
246
  interface EmailPreviewProps {
242
- content: EmailContent;
243
- brand: BrandTokens;
244
- previewUrl?: string;
245
- className?: string;
246
- }
247
- declare function EmailPreview({ content, brand, previewUrl, className }: EmailPreviewProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
248
-
247
+ content: EmailContent;
248
+ brand: BrandTokens;
249
+ previewUrl?: string;
250
+ className?: string;
251
+ }
252
+ export declare function EmailPreview({ content, brand, previewUrl, className }: EmailPreviewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
253
+ //#endregion
254
+ //#region src/assets/preview/image-preview.d.ts
249
255
  type ImageFormat = "feed" | "story" | "carousel";
250
256
  interface ImagePreviewProps {
251
- content: ImageContent;
252
- brand: BrandTokens;
253
- format?: ImageFormat;
254
- className?: string;
255
- }
256
- declare function ImagePreview({ content, brand, format, className }: ImagePreviewProps): React.JSX.Element;
257
-
257
+ content: ImageContent;
258
+ brand: BrandTokens;
259
+ format?: ImageFormat;
260
+ className?: string;
261
+ }
262
+ export declare function ImagePreview({ content, brand, format, className }: ImagePreviewProps): React$1.JSX.Element;
263
+ //#endregion
264
+ //#region src/assets/variant-compare.d.ts
258
265
  interface VariantCompareProps {
259
- variants: AssetVariant[];
260
- onPromote?: (variantId: string) => void;
261
- onSave?: (variant: AssetVariant) => void;
262
- className?: string;
263
- }
264
- declare function VariantCompare({ variants, onPromote, onSave, className }: VariantCompareProps): React.JSX.Element;
265
-
266
+ variants: AssetVariant[];
267
+ onPromote?: (variantId: string) => void;
268
+ onSave?: (variant: AssetVariant) => void;
269
+ className?: string;
270
+ }
271
+ export declare function VariantCompare({ variants, onPromote, onSave, className }: VariantCompareProps): import("react").JSX.Element;
272
+ //#endregion
273
+ //#region src/assets/preview/video-preview.d.ts
266
274
  interface VideoPreviewProps {
267
- content: VideoContent;
268
- brand: BrandTokens;
269
- onRenderRequest?: () => void;
270
- isRendering?: boolean;
271
- className?: string;
272
- }
273
- declare function VideoPreview({ content, brand, onRenderRequest, isRendering, className }: VideoPreviewProps): React.JSX.Element;
274
-
275
- export { ApprovalQueue, type ApprovalQueueProps, AssetCard, type AssetCardProps, AssetEditor, type AssetEditorProps, CopyPreview, type CopyPreviewProps, EmailPreview, type EmailPreviewProps, type ImageFormat, ImagePreview, type ImagePreviewProps, VariantCompare, type VariantCompareProps, VideoPreview, type VideoPreviewProps };
275
+ content: VideoContent;
276
+ brand: BrandTokens;
277
+ onRenderRequest?: () => void;
278
+ isRendering?: boolean;
279
+ className?: string;
280
+ }
281
+ export declare function VideoPreview({ content, brand, onRenderRequest, isRendering, className }: VideoPreviewProps): import("react").JSX.Element;
282
+ //#endregion
283
+ export type { ApprovalQueueProps, AssetCardProps, AssetEditorProps, CopyPreviewProps, EmailPreviewProps, ImageFormat, ImagePreviewProps, VariantCompareProps, VideoPreviewProps };