@frak-labs/components 1.0.3-beta.7dfd3480 → 1.0.3-beta.9d4f564a

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.
@@ -1,1700 +0,0 @@
1
- import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
2
- import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
3
- import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
4
- import { n as formatEstimatedReward, t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
5
- import { t as openSharingPage } from "./sharingPage-DFvQbviS.js";
6
- import { c as cssSource$5, l as createElement, o as cssSource$4, r as LogoFrak, s as cssSource$3, t as GiftIcon } from "./GiftIcon-c28NnqJ7.js";
7
- import { trackEvent } from "@frak-labs/core-sdk";
8
- import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
9
- import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
10
- import { jsx, jsxs } from "preact/jsx-runtime";
11
- import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
12
- //#region ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
13
- function r(e) {
14
- var t, f, n = "";
15
- if ("string" == typeof e || "number" == typeof e) n += e;
16
- else if ("object" == typeof e) if (Array.isArray(e)) {
17
- var o = e.length;
18
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
19
- } else for (f in e) e[f] && (n && (n += " "), n += f);
20
- return n;
21
- }
22
- function clsx() {
23
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
24
- return n;
25
- }
26
- //#endregion
27
- //#region ../../packages/design-system/src/reset.css.ts
28
- var base = "reset_base__1831jhd0";
29
- var element = {
30
- ul: "reset_element_ul__1831jhd4",
31
- ol: "reset_element_ol__1831jhd5",
32
- button: "reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1",
33
- a: "reset_element_a__1831jhd7 reset_focusRing__1831jhd1",
34
- input: "reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1",
35
- select: "reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1",
36
- textarea: "reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1",
37
- table: "reset_element_table__1831jhdb",
38
- img: "reset_element_img__1831jhdc"
39
- };
40
- //#endregion
41
- //#region ../../node_modules/.bun/@vanilla-extract+sprinkles@1.6.5+19e937df7e0b57ed/node_modules/@vanilla-extract/sprinkles/dist/createSprinkles-74286718.esm.js
42
- function toPrimitive(t, r) {
43
- if ("object" != typeof t || !t) return t;
44
- var e = t[Symbol.toPrimitive];
45
- if (void 0 !== e) {
46
- var i = e.call(t, r || "default");
47
- if ("object" != typeof i) return i;
48
- throw new TypeError("@@toPrimitive must return a primitive value.");
49
- }
50
- return ("string" === r ? String : Number)(t);
51
- }
52
- function toPropertyKey(t) {
53
- var i = toPrimitive(t, "string");
54
- return "symbol" == typeof i ? i : String(i);
55
- }
56
- function _defineProperty(obj, key, value) {
57
- key = toPropertyKey(key);
58
- if (key in obj) Object.defineProperty(obj, key, {
59
- value,
60
- enumerable: true,
61
- configurable: true,
62
- writable: true
63
- });
64
- else obj[key] = value;
65
- return obj;
66
- }
67
- function ownKeys(e, r) {
68
- var t = Object.keys(e);
69
- if (Object.getOwnPropertySymbols) {
70
- var o = Object.getOwnPropertySymbols(e);
71
- r && (o = o.filter(function(r) {
72
- return Object.getOwnPropertyDescriptor(e, r).enumerable;
73
- })), t.push.apply(t, o);
74
- }
75
- return t;
76
- }
77
- function _objectSpread2(e) {
78
- for (var r = 1; r < arguments.length; r++) {
79
- var t = null != arguments[r] ? arguments[r] : {};
80
- r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
81
- _defineProperty(e, r, t[r]);
82
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
83
- Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
84
- });
85
- }
86
- return e;
87
- }
88
- var createSprinkles$1 = (composeStyles) => function() {
89
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
90
- var sprinklesStyles = Object.assign({}, ...args.map((a) => a.styles));
91
- var sprinklesKeys = Object.keys(sprinklesStyles);
92
- var shorthandNames = sprinklesKeys.filter((property) => "mappings" in sprinklesStyles[property]);
93
- var sprinklesFn = (props) => {
94
- var classNames = [];
95
- var shorthands = {};
96
- var nonShorthands = _objectSpread2({}, props);
97
- var hasShorthands = false;
98
- for (var shorthand of shorthandNames) {
99
- var value = props[shorthand];
100
- if (value != null) {
101
- var sprinkle = sprinklesStyles[shorthand];
102
- hasShorthands = true;
103
- for (var propMapping of sprinkle.mappings) {
104
- shorthands[propMapping] = value;
105
- if (nonShorthands[propMapping] == null) delete nonShorthands[propMapping];
106
- }
107
- }
108
- }
109
- var finalProps = hasShorthands ? _objectSpread2(_objectSpread2({}, shorthands), nonShorthands) : props;
110
- var _loop = function _loop() {
111
- var propValue = finalProps[prop];
112
- var sprinkle = sprinklesStyles[prop];
113
- try {
114
- if (sprinkle.mappings) return 1;
115
- if (typeof propValue === "string" || typeof propValue === "number") {
116
- if (!sprinkle.values[propValue].defaultClass) throw new Error();
117
- classNames.push(sprinkle.values[propValue].defaultClass);
118
- } else if (Array.isArray(propValue)) for (var responsiveIndex = 0; responsiveIndex < propValue.length; responsiveIndex++) {
119
- var responsiveValue = propValue[responsiveIndex];
120
- if (responsiveValue != null) {
121
- var conditionName = sprinkle.responsiveArray[responsiveIndex];
122
- if (!sprinkle.values[responsiveValue].conditions[conditionName]) throw new Error();
123
- classNames.push(sprinkle.values[responsiveValue].conditions[conditionName]);
124
- }
125
- }
126
- else for (var _conditionName in propValue) {
127
- var _value = propValue[_conditionName];
128
- if (_value != null) {
129
- if (!sprinkle.values[_value].conditions[_conditionName]) throw new Error();
130
- classNames.push(sprinkle.values[_value].conditions[_conditionName]);
131
- }
132
- }
133
- } catch (e) {
134
- {
135
- class SprinklesError extends Error {
136
- constructor(message) {
137
- super(message);
138
- this.name = "SprinklesError";
139
- }
140
- }
141
- var format = (v) => typeof v === "string" ? "\"".concat(v, "\"") : v;
142
- var invalidPropValue = (prop, value, possibleValues) => {
143
- throw new SprinklesError("\"".concat(prop, "\" has no value ").concat(format(value), ". Possible values are ").concat(Object.keys(possibleValues).map(format).join(", ")));
144
- };
145
- if (!sprinkle) throw new SprinklesError("\"".concat(prop, "\" is not a valid sprinkle"));
146
- if (typeof propValue === "string" || typeof propValue === "number") {
147
- if (!(propValue in sprinkle.values)) invalidPropValue(prop, propValue, sprinkle.values);
148
- if (!sprinkle.values[propValue].defaultClass) throw new SprinklesError("\"".concat(prop, "\" has no default condition. You must specify which conditions to target explicitly. Possible options are ").concat(Object.keys(sprinkle.values[propValue].conditions).map(format).join(", ")));
149
- }
150
- if (typeof propValue === "object") {
151
- if (!("conditions" in sprinkle.values[Object.keys(sprinkle.values)[0]])) throw new SprinklesError("\"".concat(prop, "\" is not a conditional property"));
152
- if (Array.isArray(propValue)) {
153
- if (!("responsiveArray" in sprinkle)) throw new SprinklesError("\"".concat(prop, "\" does not support responsive arrays"));
154
- var breakpointCount = sprinkle.responsiveArray.length;
155
- if (breakpointCount < propValue.length) throw new SprinklesError("\"".concat(prop, "\" only supports up to ").concat(breakpointCount, " breakpoints. You passed ").concat(propValue.length));
156
- for (var _responsiveValue of propValue) if (!sprinkle.values[_responsiveValue]) invalidPropValue(prop, _responsiveValue, sprinkle.values);
157
- } else for (var _conditionName2 in propValue) {
158
- var _value2 = propValue[_conditionName2];
159
- if (_value2 != null) {
160
- if (!sprinkle.values[_value2]) invalidPropValue(prop, _value2, sprinkle.values);
161
- if (!sprinkle.values[_value2].conditions[_conditionName2]) throw new SprinklesError("\"".concat(prop, "\" has no condition named ").concat(format(_conditionName2), ". Possible values are ").concat(Object.keys(sprinkle.values[_value2].conditions).map(format).join(", ")));
162
- }
163
- }
164
- }
165
- }
166
- throw e;
167
- }
168
- };
169
- for (var prop in finalProps) if (_loop()) continue;
170
- return composeStyles(classNames.join(" "));
171
- };
172
- return Object.assign(sprinklesFn, { properties: new Set(sprinklesKeys) });
173
- };
174
- //#endregion
175
- //#region ../../node_modules/.bun/@vanilla-extract+sprinkles@1.6.5+19e937df7e0b57ed/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js
176
- var composeStyles = (classList) => classList;
177
- //#endregion
178
- //#region ../../packages/design-system/src/sprinkles.css.ts
179
- var sprinkles = function createSprinkles() {
180
- return createSprinkles$1(composeStyles)(...arguments);
181
- }(function() {
182
- var x = {
183
- conditions: {
184
- defaultCondition: "mobile",
185
- conditionNames: [
186
- "mobile",
187
- "tablet",
188
- "desktop"
189
- ],
190
- responsiveArray: [
191
- "mobile",
192
- "tablet",
193
- "desktop"
194
- ]
195
- },
196
- styles: {
197
- padding: { mappings: [
198
- "paddingTop",
199
- "paddingBottom",
200
- "paddingLeft",
201
- "paddingRight"
202
- ] },
203
- paddingX: { mappings: ["paddingLeft", "paddingRight"] },
204
- paddingY: { mappings: ["paddingTop", "paddingBottom"] },
205
- marginX: { mappings: ["marginLeft", "marginRight"] },
206
- marginY: { mappings: ["marginTop", "marginBottom"] },
207
- display: {
208
- values: {
209
- none: {
210
- conditions: {
211
- mobile: "sprinkles_display_none_mobile__1iaw8zx0",
212
- tablet: "sprinkles_display_none_tablet__1iaw8zx1",
213
- desktop: "sprinkles_display_none_desktop__1iaw8zx2"
214
- },
215
- defaultClass: "sprinkles_display_none_mobile__1iaw8zx0"
216
- },
217
- flex: {
218
- conditions: {
219
- mobile: "sprinkles_display_flex_mobile__1iaw8zx3",
220
- tablet: "sprinkles_display_flex_tablet__1iaw8zx4",
221
- desktop: "sprinkles_display_flex_desktop__1iaw8zx5"
222
- },
223
- defaultClass: "sprinkles_display_flex_mobile__1iaw8zx3"
224
- },
225
- block: {
226
- conditions: {
227
- mobile: "sprinkles_display_block_mobile__1iaw8zx6",
228
- tablet: "sprinkles_display_block_tablet__1iaw8zx7",
229
- desktop: "sprinkles_display_block_desktop__1iaw8zx8"
230
- },
231
- defaultClass: "sprinkles_display_block_mobile__1iaw8zx6"
232
- },
233
- grid: {
234
- conditions: {
235
- mobile: "sprinkles_display_grid_mobile__1iaw8zx9",
236
- tablet: "sprinkles_display_grid_tablet__1iaw8zxa",
237
- desktop: "sprinkles_display_grid_desktop__1iaw8zxb"
238
- },
239
- defaultClass: "sprinkles_display_grid_mobile__1iaw8zx9"
240
- },
241
- "inline-flex": {
242
- conditions: {
243
- mobile: "sprinkles_display_inline-flex_mobile__1iaw8zxc",
244
- tablet: "sprinkles_display_inline-flex_tablet__1iaw8zxd",
245
- desktop: "sprinkles_display_inline-flex_desktop__1iaw8zxe"
246
- },
247
- defaultClass: "sprinkles_display_inline-flex_mobile__1iaw8zxc"
248
- }
249
- },
250
- responsiveArray: void 0
251
- },
252
- flexDirection: {
253
- values: {
254
- row: {
255
- conditions: {
256
- mobile: "sprinkles_flexDirection_row_mobile__1iaw8zxf",
257
- tablet: "sprinkles_flexDirection_row_tablet__1iaw8zxg",
258
- desktop: "sprinkles_flexDirection_row_desktop__1iaw8zxh"
259
- },
260
- defaultClass: "sprinkles_flexDirection_row_mobile__1iaw8zxf"
261
- },
262
- column: {
263
- conditions: {
264
- mobile: "sprinkles_flexDirection_column_mobile__1iaw8zxi",
265
- tablet: "sprinkles_flexDirection_column_tablet__1iaw8zxj",
266
- desktop: "sprinkles_flexDirection_column_desktop__1iaw8zxk"
267
- },
268
- defaultClass: "sprinkles_flexDirection_column_mobile__1iaw8zxi"
269
- }
270
- },
271
- responsiveArray: void 0
272
- },
273
- alignItems: {
274
- values: {
275
- stretch: {
276
- conditions: {
277
- mobile: "sprinkles_alignItems_stretch_mobile__1iaw8zxl",
278
- tablet: "sprinkles_alignItems_stretch_tablet__1iaw8zxm",
279
- desktop: "sprinkles_alignItems_stretch_desktop__1iaw8zxn"
280
- },
281
- defaultClass: "sprinkles_alignItems_stretch_mobile__1iaw8zxl"
282
- },
283
- "flex-start": {
284
- conditions: {
285
- mobile: "sprinkles_alignItems_flex-start_mobile__1iaw8zxo",
286
- tablet: "sprinkles_alignItems_flex-start_tablet__1iaw8zxp",
287
- desktop: "sprinkles_alignItems_flex-start_desktop__1iaw8zxq"
288
- },
289
- defaultClass: "sprinkles_alignItems_flex-start_mobile__1iaw8zxo"
290
- },
291
- center: {
292
- conditions: {
293
- mobile: "sprinkles_alignItems_center_mobile__1iaw8zxr",
294
- tablet: "sprinkles_alignItems_center_tablet__1iaw8zxs",
295
- desktop: "sprinkles_alignItems_center_desktop__1iaw8zxt"
296
- },
297
- defaultClass: "sprinkles_alignItems_center_mobile__1iaw8zxr"
298
- },
299
- "flex-end": {
300
- conditions: {
301
- mobile: "sprinkles_alignItems_flex-end_mobile__1iaw8zxu",
302
- tablet: "sprinkles_alignItems_flex-end_tablet__1iaw8zxv",
303
- desktop: "sprinkles_alignItems_flex-end_desktop__1iaw8zxw"
304
- },
305
- defaultClass: "sprinkles_alignItems_flex-end_mobile__1iaw8zxu"
306
- },
307
- baseline: {
308
- conditions: {
309
- mobile: "sprinkles_alignItems_baseline_mobile__1iaw8zxx",
310
- tablet: "sprinkles_alignItems_baseline_tablet__1iaw8zxy",
311
- desktop: "sprinkles_alignItems_baseline_desktop__1iaw8zxz"
312
- },
313
- defaultClass: "sprinkles_alignItems_baseline_mobile__1iaw8zxx"
314
- }
315
- },
316
- responsiveArray: void 0
317
- },
318
- justifyContent: {
319
- values: {
320
- stretch: {
321
- conditions: {
322
- mobile: "sprinkles_justifyContent_stretch_mobile__1iaw8zx10",
323
- tablet: "sprinkles_justifyContent_stretch_tablet__1iaw8zx11",
324
- desktop: "sprinkles_justifyContent_stretch_desktop__1iaw8zx12"
325
- },
326
- defaultClass: "sprinkles_justifyContent_stretch_mobile__1iaw8zx10"
327
- },
328
- "flex-start": {
329
- conditions: {
330
- mobile: "sprinkles_justifyContent_flex-start_mobile__1iaw8zx13",
331
- tablet: "sprinkles_justifyContent_flex-start_tablet__1iaw8zx14",
332
- desktop: "sprinkles_justifyContent_flex-start_desktop__1iaw8zx15"
333
- },
334
- defaultClass: "sprinkles_justifyContent_flex-start_mobile__1iaw8zx13"
335
- },
336
- center: {
337
- conditions: {
338
- mobile: "sprinkles_justifyContent_center_mobile__1iaw8zx16",
339
- tablet: "sprinkles_justifyContent_center_tablet__1iaw8zx17",
340
- desktop: "sprinkles_justifyContent_center_desktop__1iaw8zx18"
341
- },
342
- defaultClass: "sprinkles_justifyContent_center_mobile__1iaw8zx16"
343
- },
344
- "flex-end": {
345
- conditions: {
346
- mobile: "sprinkles_justifyContent_flex-end_mobile__1iaw8zx19",
347
- tablet: "sprinkles_justifyContent_flex-end_tablet__1iaw8zx1a",
348
- desktop: "sprinkles_justifyContent_flex-end_desktop__1iaw8zx1b"
349
- },
350
- defaultClass: "sprinkles_justifyContent_flex-end_mobile__1iaw8zx19"
351
- },
352
- "space-between": {
353
- conditions: {
354
- mobile: "sprinkles_justifyContent_space-between_mobile__1iaw8zx1c",
355
- tablet: "sprinkles_justifyContent_space-between_tablet__1iaw8zx1d",
356
- desktop: "sprinkles_justifyContent_space-between_desktop__1iaw8zx1e"
357
- },
358
- defaultClass: "sprinkles_justifyContent_space-between_mobile__1iaw8zx1c"
359
- },
360
- "space-around": {
361
- conditions: {
362
- mobile: "sprinkles_justifyContent_space-around_mobile__1iaw8zx1f",
363
- tablet: "sprinkles_justifyContent_space-around_tablet__1iaw8zx1g",
364
- desktop: "sprinkles_justifyContent_space-around_desktop__1iaw8zx1h"
365
- },
366
- defaultClass: "sprinkles_justifyContent_space-around_mobile__1iaw8zx1f"
367
- }
368
- },
369
- responsiveArray: void 0
370
- },
371
- flexWrap: {
372
- values: {
373
- nowrap: {
374
- conditions: {
375
- mobile: "sprinkles_flexWrap_nowrap_mobile__1iaw8zx1i",
376
- tablet: "sprinkles_flexWrap_nowrap_tablet__1iaw8zx1j",
377
- desktop: "sprinkles_flexWrap_nowrap_desktop__1iaw8zx1k"
378
- },
379
- defaultClass: "sprinkles_flexWrap_nowrap_mobile__1iaw8zx1i"
380
- },
381
- wrap: {
382
- conditions: {
383
- mobile: "sprinkles_flexWrap_wrap_mobile__1iaw8zx1l",
384
- tablet: "sprinkles_flexWrap_wrap_tablet__1iaw8zx1m",
385
- desktop: "sprinkles_flexWrap_wrap_desktop__1iaw8zx1n"
386
- },
387
- defaultClass: "sprinkles_flexWrap_wrap_mobile__1iaw8zx1l"
388
- },
389
- "wrap-reverse": {
390
- conditions: {
391
- mobile: "sprinkles_flexWrap_wrap-reverse_mobile__1iaw8zx1o",
392
- tablet: "sprinkles_flexWrap_wrap-reverse_tablet__1iaw8zx1p",
393
- desktop: "sprinkles_flexWrap_wrap-reverse_desktop__1iaw8zx1q"
394
- },
395
- defaultClass: "sprinkles_flexWrap_wrap-reverse_mobile__1iaw8zx1o"
396
- }
397
- },
398
- responsiveArray: void 0
399
- },
400
- gap: {
401
- values: {
402
- none: {
403
- conditions: {
404
- mobile: "sprinkles_gap_none_mobile__1iaw8zx1r",
405
- tablet: "sprinkles_gap_none_tablet__1iaw8zx1s",
406
- desktop: "sprinkles_gap_none_desktop__1iaw8zx1t"
407
- },
408
- defaultClass: "sprinkles_gap_none_mobile__1iaw8zx1r"
409
- },
410
- xxs: {
411
- conditions: {
412
- mobile: "sprinkles_gap_xxs_mobile__1iaw8zx1u",
413
- tablet: "sprinkles_gap_xxs_tablet__1iaw8zx1v",
414
- desktop: "sprinkles_gap_xxs_desktop__1iaw8zx1w"
415
- },
416
- defaultClass: "sprinkles_gap_xxs_mobile__1iaw8zx1u"
417
- },
418
- xs: {
419
- conditions: {
420
- mobile: "sprinkles_gap_xs_mobile__1iaw8zx1x",
421
- tablet: "sprinkles_gap_xs_tablet__1iaw8zx1y",
422
- desktop: "sprinkles_gap_xs_desktop__1iaw8zx1z"
423
- },
424
- defaultClass: "sprinkles_gap_xs_mobile__1iaw8zx1x"
425
- },
426
- s: {
427
- conditions: {
428
- mobile: "sprinkles_gap_s_mobile__1iaw8zx20",
429
- tablet: "sprinkles_gap_s_tablet__1iaw8zx21",
430
- desktop: "sprinkles_gap_s_desktop__1iaw8zx22"
431
- },
432
- defaultClass: "sprinkles_gap_s_mobile__1iaw8zx20"
433
- },
434
- m: {
435
- conditions: {
436
- mobile: "sprinkles_gap_m_mobile__1iaw8zx23",
437
- tablet: "sprinkles_gap_m_tablet__1iaw8zx24",
438
- desktop: "sprinkles_gap_m_desktop__1iaw8zx25"
439
- },
440
- defaultClass: "sprinkles_gap_m_mobile__1iaw8zx23"
441
- },
442
- l: {
443
- conditions: {
444
- mobile: "sprinkles_gap_l_mobile__1iaw8zx26",
445
- tablet: "sprinkles_gap_l_tablet__1iaw8zx27",
446
- desktop: "sprinkles_gap_l_desktop__1iaw8zx28"
447
- },
448
- defaultClass: "sprinkles_gap_l_mobile__1iaw8zx26"
449
- },
450
- xl: {
451
- conditions: {
452
- mobile: "sprinkles_gap_xl_mobile__1iaw8zx29",
453
- tablet: "sprinkles_gap_xl_tablet__1iaw8zx2a",
454
- desktop: "sprinkles_gap_xl_desktop__1iaw8zx2b"
455
- },
456
- defaultClass: "sprinkles_gap_xl_mobile__1iaw8zx29"
457
- }
458
- },
459
- responsiveArray: void 0
460
- },
461
- paddingTop: {
462
- values: {
463
- none: {
464
- conditions: {
465
- mobile: "sprinkles_paddingTop_none_mobile__1iaw8zx2c",
466
- tablet: "sprinkles_paddingTop_none_tablet__1iaw8zx2d",
467
- desktop: "sprinkles_paddingTop_none_desktop__1iaw8zx2e"
468
- },
469
- defaultClass: "sprinkles_paddingTop_none_mobile__1iaw8zx2c"
470
- },
471
- xxs: {
472
- conditions: {
473
- mobile: "sprinkles_paddingTop_xxs_mobile__1iaw8zx2f",
474
- tablet: "sprinkles_paddingTop_xxs_tablet__1iaw8zx2g",
475
- desktop: "sprinkles_paddingTop_xxs_desktop__1iaw8zx2h"
476
- },
477
- defaultClass: "sprinkles_paddingTop_xxs_mobile__1iaw8zx2f"
478
- },
479
- xs: {
480
- conditions: {
481
- mobile: "sprinkles_paddingTop_xs_mobile__1iaw8zx2i",
482
- tablet: "sprinkles_paddingTop_xs_tablet__1iaw8zx2j",
483
- desktop: "sprinkles_paddingTop_xs_desktop__1iaw8zx2k"
484
- },
485
- defaultClass: "sprinkles_paddingTop_xs_mobile__1iaw8zx2i"
486
- },
487
- s: {
488
- conditions: {
489
- mobile: "sprinkles_paddingTop_s_mobile__1iaw8zx2l",
490
- tablet: "sprinkles_paddingTop_s_tablet__1iaw8zx2m",
491
- desktop: "sprinkles_paddingTop_s_desktop__1iaw8zx2n"
492
- },
493
- defaultClass: "sprinkles_paddingTop_s_mobile__1iaw8zx2l"
494
- },
495
- m: {
496
- conditions: {
497
- mobile: "sprinkles_paddingTop_m_mobile__1iaw8zx2o",
498
- tablet: "sprinkles_paddingTop_m_tablet__1iaw8zx2p",
499
- desktop: "sprinkles_paddingTop_m_desktop__1iaw8zx2q"
500
- },
501
- defaultClass: "sprinkles_paddingTop_m_mobile__1iaw8zx2o"
502
- },
503
- l: {
504
- conditions: {
505
- mobile: "sprinkles_paddingTop_l_mobile__1iaw8zx2r",
506
- tablet: "sprinkles_paddingTop_l_tablet__1iaw8zx2s",
507
- desktop: "sprinkles_paddingTop_l_desktop__1iaw8zx2t"
508
- },
509
- defaultClass: "sprinkles_paddingTop_l_mobile__1iaw8zx2r"
510
- },
511
- xl: {
512
- conditions: {
513
- mobile: "sprinkles_paddingTop_xl_mobile__1iaw8zx2u",
514
- tablet: "sprinkles_paddingTop_xl_tablet__1iaw8zx2v",
515
- desktop: "sprinkles_paddingTop_xl_desktop__1iaw8zx2w"
516
- },
517
- defaultClass: "sprinkles_paddingTop_xl_mobile__1iaw8zx2u"
518
- }
519
- },
520
- responsiveArray: void 0
521
- },
522
- paddingBottom: {
523
- values: {
524
- none: {
525
- conditions: {
526
- mobile: "sprinkles_paddingBottom_none_mobile__1iaw8zx2x",
527
- tablet: "sprinkles_paddingBottom_none_tablet__1iaw8zx2y",
528
- desktop: "sprinkles_paddingBottom_none_desktop__1iaw8zx2z"
529
- },
530
- defaultClass: "sprinkles_paddingBottom_none_mobile__1iaw8zx2x"
531
- },
532
- xxs: {
533
- conditions: {
534
- mobile: "sprinkles_paddingBottom_xxs_mobile__1iaw8zx30",
535
- tablet: "sprinkles_paddingBottom_xxs_tablet__1iaw8zx31",
536
- desktop: "sprinkles_paddingBottom_xxs_desktop__1iaw8zx32"
537
- },
538
- defaultClass: "sprinkles_paddingBottom_xxs_mobile__1iaw8zx30"
539
- },
540
- xs: {
541
- conditions: {
542
- mobile: "sprinkles_paddingBottom_xs_mobile__1iaw8zx33",
543
- tablet: "sprinkles_paddingBottom_xs_tablet__1iaw8zx34",
544
- desktop: "sprinkles_paddingBottom_xs_desktop__1iaw8zx35"
545
- },
546
- defaultClass: "sprinkles_paddingBottom_xs_mobile__1iaw8zx33"
547
- },
548
- s: {
549
- conditions: {
550
- mobile: "sprinkles_paddingBottom_s_mobile__1iaw8zx36",
551
- tablet: "sprinkles_paddingBottom_s_tablet__1iaw8zx37",
552
- desktop: "sprinkles_paddingBottom_s_desktop__1iaw8zx38"
553
- },
554
- defaultClass: "sprinkles_paddingBottom_s_mobile__1iaw8zx36"
555
- },
556
- m: {
557
- conditions: {
558
- mobile: "sprinkles_paddingBottom_m_mobile__1iaw8zx39",
559
- tablet: "sprinkles_paddingBottom_m_tablet__1iaw8zx3a",
560
- desktop: "sprinkles_paddingBottom_m_desktop__1iaw8zx3b"
561
- },
562
- defaultClass: "sprinkles_paddingBottom_m_mobile__1iaw8zx39"
563
- },
564
- l: {
565
- conditions: {
566
- mobile: "sprinkles_paddingBottom_l_mobile__1iaw8zx3c",
567
- tablet: "sprinkles_paddingBottom_l_tablet__1iaw8zx3d",
568
- desktop: "sprinkles_paddingBottom_l_desktop__1iaw8zx3e"
569
- },
570
- defaultClass: "sprinkles_paddingBottom_l_mobile__1iaw8zx3c"
571
- },
572
- xl: {
573
- conditions: {
574
- mobile: "sprinkles_paddingBottom_xl_mobile__1iaw8zx3f",
575
- tablet: "sprinkles_paddingBottom_xl_tablet__1iaw8zx3g",
576
- desktop: "sprinkles_paddingBottom_xl_desktop__1iaw8zx3h"
577
- },
578
- defaultClass: "sprinkles_paddingBottom_xl_mobile__1iaw8zx3f"
579
- }
580
- },
581
- responsiveArray: void 0
582
- },
583
- paddingLeft: {
584
- values: {
585
- none: {
586
- conditions: {
587
- mobile: "sprinkles_paddingLeft_none_mobile__1iaw8zx3i",
588
- tablet: "sprinkles_paddingLeft_none_tablet__1iaw8zx3j",
589
- desktop: "sprinkles_paddingLeft_none_desktop__1iaw8zx3k"
590
- },
591
- defaultClass: "sprinkles_paddingLeft_none_mobile__1iaw8zx3i"
592
- },
593
- xxs: {
594
- conditions: {
595
- mobile: "sprinkles_paddingLeft_xxs_mobile__1iaw8zx3l",
596
- tablet: "sprinkles_paddingLeft_xxs_tablet__1iaw8zx3m",
597
- desktop: "sprinkles_paddingLeft_xxs_desktop__1iaw8zx3n"
598
- },
599
- defaultClass: "sprinkles_paddingLeft_xxs_mobile__1iaw8zx3l"
600
- },
601
- xs: {
602
- conditions: {
603
- mobile: "sprinkles_paddingLeft_xs_mobile__1iaw8zx3o",
604
- tablet: "sprinkles_paddingLeft_xs_tablet__1iaw8zx3p",
605
- desktop: "sprinkles_paddingLeft_xs_desktop__1iaw8zx3q"
606
- },
607
- defaultClass: "sprinkles_paddingLeft_xs_mobile__1iaw8zx3o"
608
- },
609
- s: {
610
- conditions: {
611
- mobile: "sprinkles_paddingLeft_s_mobile__1iaw8zx3r",
612
- tablet: "sprinkles_paddingLeft_s_tablet__1iaw8zx3s",
613
- desktop: "sprinkles_paddingLeft_s_desktop__1iaw8zx3t"
614
- },
615
- defaultClass: "sprinkles_paddingLeft_s_mobile__1iaw8zx3r"
616
- },
617
- m: {
618
- conditions: {
619
- mobile: "sprinkles_paddingLeft_m_mobile__1iaw8zx3u",
620
- tablet: "sprinkles_paddingLeft_m_tablet__1iaw8zx3v",
621
- desktop: "sprinkles_paddingLeft_m_desktop__1iaw8zx3w"
622
- },
623
- defaultClass: "sprinkles_paddingLeft_m_mobile__1iaw8zx3u"
624
- },
625
- l: {
626
- conditions: {
627
- mobile: "sprinkles_paddingLeft_l_mobile__1iaw8zx3x",
628
- tablet: "sprinkles_paddingLeft_l_tablet__1iaw8zx3y",
629
- desktop: "sprinkles_paddingLeft_l_desktop__1iaw8zx3z"
630
- },
631
- defaultClass: "sprinkles_paddingLeft_l_mobile__1iaw8zx3x"
632
- },
633
- xl: {
634
- conditions: {
635
- mobile: "sprinkles_paddingLeft_xl_mobile__1iaw8zx40",
636
- tablet: "sprinkles_paddingLeft_xl_tablet__1iaw8zx41",
637
- desktop: "sprinkles_paddingLeft_xl_desktop__1iaw8zx42"
638
- },
639
- defaultClass: "sprinkles_paddingLeft_xl_mobile__1iaw8zx40"
640
- }
641
- },
642
- responsiveArray: void 0
643
- },
644
- paddingRight: {
645
- values: {
646
- none: {
647
- conditions: {
648
- mobile: "sprinkles_paddingRight_none_mobile__1iaw8zx43",
649
- tablet: "sprinkles_paddingRight_none_tablet__1iaw8zx44",
650
- desktop: "sprinkles_paddingRight_none_desktop__1iaw8zx45"
651
- },
652
- defaultClass: "sprinkles_paddingRight_none_mobile__1iaw8zx43"
653
- },
654
- xxs: {
655
- conditions: {
656
- mobile: "sprinkles_paddingRight_xxs_mobile__1iaw8zx46",
657
- tablet: "sprinkles_paddingRight_xxs_tablet__1iaw8zx47",
658
- desktop: "sprinkles_paddingRight_xxs_desktop__1iaw8zx48"
659
- },
660
- defaultClass: "sprinkles_paddingRight_xxs_mobile__1iaw8zx46"
661
- },
662
- xs: {
663
- conditions: {
664
- mobile: "sprinkles_paddingRight_xs_mobile__1iaw8zx49",
665
- tablet: "sprinkles_paddingRight_xs_tablet__1iaw8zx4a",
666
- desktop: "sprinkles_paddingRight_xs_desktop__1iaw8zx4b"
667
- },
668
- defaultClass: "sprinkles_paddingRight_xs_mobile__1iaw8zx49"
669
- },
670
- s: {
671
- conditions: {
672
- mobile: "sprinkles_paddingRight_s_mobile__1iaw8zx4c",
673
- tablet: "sprinkles_paddingRight_s_tablet__1iaw8zx4d",
674
- desktop: "sprinkles_paddingRight_s_desktop__1iaw8zx4e"
675
- },
676
- defaultClass: "sprinkles_paddingRight_s_mobile__1iaw8zx4c"
677
- },
678
- m: {
679
- conditions: {
680
- mobile: "sprinkles_paddingRight_m_mobile__1iaw8zx4f",
681
- tablet: "sprinkles_paddingRight_m_tablet__1iaw8zx4g",
682
- desktop: "sprinkles_paddingRight_m_desktop__1iaw8zx4h"
683
- },
684
- defaultClass: "sprinkles_paddingRight_m_mobile__1iaw8zx4f"
685
- },
686
- l: {
687
- conditions: {
688
- mobile: "sprinkles_paddingRight_l_mobile__1iaw8zx4i",
689
- tablet: "sprinkles_paddingRight_l_tablet__1iaw8zx4j",
690
- desktop: "sprinkles_paddingRight_l_desktop__1iaw8zx4k"
691
- },
692
- defaultClass: "sprinkles_paddingRight_l_mobile__1iaw8zx4i"
693
- },
694
- xl: {
695
- conditions: {
696
- mobile: "sprinkles_paddingRight_xl_mobile__1iaw8zx4l",
697
- tablet: "sprinkles_paddingRight_xl_tablet__1iaw8zx4m",
698
- desktop: "sprinkles_paddingRight_xl_desktop__1iaw8zx4n"
699
- },
700
- defaultClass: "sprinkles_paddingRight_xl_mobile__1iaw8zx4l"
701
- }
702
- },
703
- responsiveArray: void 0
704
- },
705
- marginTop: {
706
- values: {
707
- none: {
708
- conditions: {
709
- mobile: "sprinkles_marginTop_none_mobile__1iaw8zx4o",
710
- tablet: "sprinkles_marginTop_none_tablet__1iaw8zx4p",
711
- desktop: "sprinkles_marginTop_none_desktop__1iaw8zx4q"
712
- },
713
- defaultClass: "sprinkles_marginTop_none_mobile__1iaw8zx4o"
714
- },
715
- xxs: {
716
- conditions: {
717
- mobile: "sprinkles_marginTop_xxs_mobile__1iaw8zx4r",
718
- tablet: "sprinkles_marginTop_xxs_tablet__1iaw8zx4s",
719
- desktop: "sprinkles_marginTop_xxs_desktop__1iaw8zx4t"
720
- },
721
- defaultClass: "sprinkles_marginTop_xxs_mobile__1iaw8zx4r"
722
- },
723
- xs: {
724
- conditions: {
725
- mobile: "sprinkles_marginTop_xs_mobile__1iaw8zx4u",
726
- tablet: "sprinkles_marginTop_xs_tablet__1iaw8zx4v",
727
- desktop: "sprinkles_marginTop_xs_desktop__1iaw8zx4w"
728
- },
729
- defaultClass: "sprinkles_marginTop_xs_mobile__1iaw8zx4u"
730
- },
731
- s: {
732
- conditions: {
733
- mobile: "sprinkles_marginTop_s_mobile__1iaw8zx4x",
734
- tablet: "sprinkles_marginTop_s_tablet__1iaw8zx4y",
735
- desktop: "sprinkles_marginTop_s_desktop__1iaw8zx4z"
736
- },
737
- defaultClass: "sprinkles_marginTop_s_mobile__1iaw8zx4x"
738
- },
739
- m: {
740
- conditions: {
741
- mobile: "sprinkles_marginTop_m_mobile__1iaw8zx50",
742
- tablet: "sprinkles_marginTop_m_tablet__1iaw8zx51",
743
- desktop: "sprinkles_marginTop_m_desktop__1iaw8zx52"
744
- },
745
- defaultClass: "sprinkles_marginTop_m_mobile__1iaw8zx50"
746
- },
747
- l: {
748
- conditions: {
749
- mobile: "sprinkles_marginTop_l_mobile__1iaw8zx53",
750
- tablet: "sprinkles_marginTop_l_tablet__1iaw8zx54",
751
- desktop: "sprinkles_marginTop_l_desktop__1iaw8zx55"
752
- },
753
- defaultClass: "sprinkles_marginTop_l_mobile__1iaw8zx53"
754
- },
755
- xl: {
756
- conditions: {
757
- mobile: "sprinkles_marginTop_xl_mobile__1iaw8zx56",
758
- tablet: "sprinkles_marginTop_xl_tablet__1iaw8zx57",
759
- desktop: "sprinkles_marginTop_xl_desktop__1iaw8zx58"
760
- },
761
- defaultClass: "sprinkles_marginTop_xl_mobile__1iaw8zx56"
762
- }
763
- },
764
- responsiveArray: void 0
765
- },
766
- marginBottom: {
767
- values: {
768
- none: {
769
- conditions: {
770
- mobile: "sprinkles_marginBottom_none_mobile__1iaw8zx59",
771
- tablet: "sprinkles_marginBottom_none_tablet__1iaw8zx5a",
772
- desktop: "sprinkles_marginBottom_none_desktop__1iaw8zx5b"
773
- },
774
- defaultClass: "sprinkles_marginBottom_none_mobile__1iaw8zx59"
775
- },
776
- xxs: {
777
- conditions: {
778
- mobile: "sprinkles_marginBottom_xxs_mobile__1iaw8zx5c",
779
- tablet: "sprinkles_marginBottom_xxs_tablet__1iaw8zx5d",
780
- desktop: "sprinkles_marginBottom_xxs_desktop__1iaw8zx5e"
781
- },
782
- defaultClass: "sprinkles_marginBottom_xxs_mobile__1iaw8zx5c"
783
- },
784
- xs: {
785
- conditions: {
786
- mobile: "sprinkles_marginBottom_xs_mobile__1iaw8zx5f",
787
- tablet: "sprinkles_marginBottom_xs_tablet__1iaw8zx5g",
788
- desktop: "sprinkles_marginBottom_xs_desktop__1iaw8zx5h"
789
- },
790
- defaultClass: "sprinkles_marginBottom_xs_mobile__1iaw8zx5f"
791
- },
792
- s: {
793
- conditions: {
794
- mobile: "sprinkles_marginBottom_s_mobile__1iaw8zx5i",
795
- tablet: "sprinkles_marginBottom_s_tablet__1iaw8zx5j",
796
- desktop: "sprinkles_marginBottom_s_desktop__1iaw8zx5k"
797
- },
798
- defaultClass: "sprinkles_marginBottom_s_mobile__1iaw8zx5i"
799
- },
800
- m: {
801
- conditions: {
802
- mobile: "sprinkles_marginBottom_m_mobile__1iaw8zx5l",
803
- tablet: "sprinkles_marginBottom_m_tablet__1iaw8zx5m",
804
- desktop: "sprinkles_marginBottom_m_desktop__1iaw8zx5n"
805
- },
806
- defaultClass: "sprinkles_marginBottom_m_mobile__1iaw8zx5l"
807
- },
808
- l: {
809
- conditions: {
810
- mobile: "sprinkles_marginBottom_l_mobile__1iaw8zx5o",
811
- tablet: "sprinkles_marginBottom_l_tablet__1iaw8zx5p",
812
- desktop: "sprinkles_marginBottom_l_desktop__1iaw8zx5q"
813
- },
814
- defaultClass: "sprinkles_marginBottom_l_mobile__1iaw8zx5o"
815
- },
816
- xl: {
817
- conditions: {
818
- mobile: "sprinkles_marginBottom_xl_mobile__1iaw8zx5r",
819
- tablet: "sprinkles_marginBottom_xl_tablet__1iaw8zx5s",
820
- desktop: "sprinkles_marginBottom_xl_desktop__1iaw8zx5t"
821
- },
822
- defaultClass: "sprinkles_marginBottom_xl_mobile__1iaw8zx5r"
823
- }
824
- },
825
- responsiveArray: void 0
826
- },
827
- marginLeft: {
828
- values: {
829
- none: {
830
- conditions: {
831
- mobile: "sprinkles_marginLeft_none_mobile__1iaw8zx5u",
832
- tablet: "sprinkles_marginLeft_none_tablet__1iaw8zx5v",
833
- desktop: "sprinkles_marginLeft_none_desktop__1iaw8zx5w"
834
- },
835
- defaultClass: "sprinkles_marginLeft_none_mobile__1iaw8zx5u"
836
- },
837
- xxs: {
838
- conditions: {
839
- mobile: "sprinkles_marginLeft_xxs_mobile__1iaw8zx5x",
840
- tablet: "sprinkles_marginLeft_xxs_tablet__1iaw8zx5y",
841
- desktop: "sprinkles_marginLeft_xxs_desktop__1iaw8zx5z"
842
- },
843
- defaultClass: "sprinkles_marginLeft_xxs_mobile__1iaw8zx5x"
844
- },
845
- xs: {
846
- conditions: {
847
- mobile: "sprinkles_marginLeft_xs_mobile__1iaw8zx60",
848
- tablet: "sprinkles_marginLeft_xs_tablet__1iaw8zx61",
849
- desktop: "sprinkles_marginLeft_xs_desktop__1iaw8zx62"
850
- },
851
- defaultClass: "sprinkles_marginLeft_xs_mobile__1iaw8zx60"
852
- },
853
- s: {
854
- conditions: {
855
- mobile: "sprinkles_marginLeft_s_mobile__1iaw8zx63",
856
- tablet: "sprinkles_marginLeft_s_tablet__1iaw8zx64",
857
- desktop: "sprinkles_marginLeft_s_desktop__1iaw8zx65"
858
- },
859
- defaultClass: "sprinkles_marginLeft_s_mobile__1iaw8zx63"
860
- },
861
- m: {
862
- conditions: {
863
- mobile: "sprinkles_marginLeft_m_mobile__1iaw8zx66",
864
- tablet: "sprinkles_marginLeft_m_tablet__1iaw8zx67",
865
- desktop: "sprinkles_marginLeft_m_desktop__1iaw8zx68"
866
- },
867
- defaultClass: "sprinkles_marginLeft_m_mobile__1iaw8zx66"
868
- },
869
- l: {
870
- conditions: {
871
- mobile: "sprinkles_marginLeft_l_mobile__1iaw8zx69",
872
- tablet: "sprinkles_marginLeft_l_tablet__1iaw8zx6a",
873
- desktop: "sprinkles_marginLeft_l_desktop__1iaw8zx6b"
874
- },
875
- defaultClass: "sprinkles_marginLeft_l_mobile__1iaw8zx69"
876
- },
877
- xl: {
878
- conditions: {
879
- mobile: "sprinkles_marginLeft_xl_mobile__1iaw8zx6c",
880
- tablet: "sprinkles_marginLeft_xl_tablet__1iaw8zx6d",
881
- desktop: "sprinkles_marginLeft_xl_desktop__1iaw8zx6e"
882
- },
883
- defaultClass: "sprinkles_marginLeft_xl_mobile__1iaw8zx6c"
884
- }
885
- },
886
- responsiveArray: void 0
887
- },
888
- marginRight: {
889
- values: {
890
- none: {
891
- conditions: {
892
- mobile: "sprinkles_marginRight_none_mobile__1iaw8zx6f",
893
- tablet: "sprinkles_marginRight_none_tablet__1iaw8zx6g",
894
- desktop: "sprinkles_marginRight_none_desktop__1iaw8zx6h"
895
- },
896
- defaultClass: "sprinkles_marginRight_none_mobile__1iaw8zx6f"
897
- },
898
- xxs: {
899
- conditions: {
900
- mobile: "sprinkles_marginRight_xxs_mobile__1iaw8zx6i",
901
- tablet: "sprinkles_marginRight_xxs_tablet__1iaw8zx6j",
902
- desktop: "sprinkles_marginRight_xxs_desktop__1iaw8zx6k"
903
- },
904
- defaultClass: "sprinkles_marginRight_xxs_mobile__1iaw8zx6i"
905
- },
906
- xs: {
907
- conditions: {
908
- mobile: "sprinkles_marginRight_xs_mobile__1iaw8zx6l",
909
- tablet: "sprinkles_marginRight_xs_tablet__1iaw8zx6m",
910
- desktop: "sprinkles_marginRight_xs_desktop__1iaw8zx6n"
911
- },
912
- defaultClass: "sprinkles_marginRight_xs_mobile__1iaw8zx6l"
913
- },
914
- s: {
915
- conditions: {
916
- mobile: "sprinkles_marginRight_s_mobile__1iaw8zx6o",
917
- tablet: "sprinkles_marginRight_s_tablet__1iaw8zx6p",
918
- desktop: "sprinkles_marginRight_s_desktop__1iaw8zx6q"
919
- },
920
- defaultClass: "sprinkles_marginRight_s_mobile__1iaw8zx6o"
921
- },
922
- m: {
923
- conditions: {
924
- mobile: "sprinkles_marginRight_m_mobile__1iaw8zx6r",
925
- tablet: "sprinkles_marginRight_m_tablet__1iaw8zx6s",
926
- desktop: "sprinkles_marginRight_m_desktop__1iaw8zx6t"
927
- },
928
- defaultClass: "sprinkles_marginRight_m_mobile__1iaw8zx6r"
929
- },
930
- l: {
931
- conditions: {
932
- mobile: "sprinkles_marginRight_l_mobile__1iaw8zx6u",
933
- tablet: "sprinkles_marginRight_l_tablet__1iaw8zx6v",
934
- desktop: "sprinkles_marginRight_l_desktop__1iaw8zx6w"
935
- },
936
- defaultClass: "sprinkles_marginRight_l_mobile__1iaw8zx6u"
937
- },
938
- xl: {
939
- conditions: {
940
- mobile: "sprinkles_marginRight_xl_mobile__1iaw8zx6x",
941
- tablet: "sprinkles_marginRight_xl_tablet__1iaw8zx6y",
942
- desktop: "sprinkles_marginRight_xl_desktop__1iaw8zx6z"
943
- },
944
- defaultClass: "sprinkles_marginRight_xl_mobile__1iaw8zx6x"
945
- }
946
- },
947
- responsiveArray: void 0
948
- },
949
- borderRadius: {
950
- values: {
951
- none: {
952
- conditions: {
953
- mobile: "sprinkles_borderRadius_none_mobile__1iaw8zx70",
954
- tablet: "sprinkles_borderRadius_none_tablet__1iaw8zx71",
955
- desktop: "sprinkles_borderRadius_none_desktop__1iaw8zx72"
956
- },
957
- defaultClass: "sprinkles_borderRadius_none_mobile__1iaw8zx70"
958
- },
959
- xs: {
960
- conditions: {
961
- mobile: "sprinkles_borderRadius_xs_mobile__1iaw8zx73",
962
- tablet: "sprinkles_borderRadius_xs_tablet__1iaw8zx74",
963
- desktop: "sprinkles_borderRadius_xs_desktop__1iaw8zx75"
964
- },
965
- defaultClass: "sprinkles_borderRadius_xs_mobile__1iaw8zx73"
966
- },
967
- s: {
968
- conditions: {
969
- mobile: "sprinkles_borderRadius_s_mobile__1iaw8zx76",
970
- tablet: "sprinkles_borderRadius_s_tablet__1iaw8zx77",
971
- desktop: "sprinkles_borderRadius_s_desktop__1iaw8zx78"
972
- },
973
- defaultClass: "sprinkles_borderRadius_s_mobile__1iaw8zx76"
974
- },
975
- m: {
976
- conditions: {
977
- mobile: "sprinkles_borderRadius_m_mobile__1iaw8zx79",
978
- tablet: "sprinkles_borderRadius_m_tablet__1iaw8zx7a",
979
- desktop: "sprinkles_borderRadius_m_desktop__1iaw8zx7b"
980
- },
981
- defaultClass: "sprinkles_borderRadius_m_mobile__1iaw8zx79"
982
- },
983
- l: {
984
- conditions: {
985
- mobile: "sprinkles_borderRadius_l_mobile__1iaw8zx7c",
986
- tablet: "sprinkles_borderRadius_l_tablet__1iaw8zx7d",
987
- desktop: "sprinkles_borderRadius_l_desktop__1iaw8zx7e"
988
- },
989
- defaultClass: "sprinkles_borderRadius_l_mobile__1iaw8zx7c"
990
- },
991
- xl: {
992
- conditions: {
993
- mobile: "sprinkles_borderRadius_xl_mobile__1iaw8zx7f",
994
- tablet: "sprinkles_borderRadius_xl_tablet__1iaw8zx7g",
995
- desktop: "sprinkles_borderRadius_xl_desktop__1iaw8zx7h"
996
- },
997
- defaultClass: "sprinkles_borderRadius_xl_mobile__1iaw8zx7f"
998
- },
999
- xxl: {
1000
- conditions: {
1001
- mobile: "sprinkles_borderRadius_xxl_mobile__1iaw8zx7i",
1002
- tablet: "sprinkles_borderRadius_xxl_tablet__1iaw8zx7j",
1003
- desktop: "sprinkles_borderRadius_xxl_desktop__1iaw8zx7k"
1004
- },
1005
- defaultClass: "sprinkles_borderRadius_xxl_mobile__1iaw8zx7i"
1006
- },
1007
- full: {
1008
- conditions: {
1009
- mobile: "sprinkles_borderRadius_full_mobile__1iaw8zx7l",
1010
- tablet: "sprinkles_borderRadius_full_tablet__1iaw8zx7m",
1011
- desktop: "sprinkles_borderRadius_full_desktop__1iaw8zx7n"
1012
- },
1013
- defaultClass: "sprinkles_borderRadius_full_mobile__1iaw8zx7l"
1014
- }
1015
- },
1016
- responsiveArray: void 0
1017
- }
1018
- }
1019
- };
1020
- x.styles.display.responsiveArray = x.conditions.responsiveArray;
1021
- x.styles.flexDirection.responsiveArray = x.conditions.responsiveArray;
1022
- x.styles.alignItems.responsiveArray = x.conditions.responsiveArray;
1023
- x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
1024
- x.styles.flexWrap.responsiveArray = x.conditions.responsiveArray;
1025
- x.styles.gap.responsiveArray = x.conditions.responsiveArray;
1026
- x.styles.paddingTop.responsiveArray = x.conditions.responsiveArray;
1027
- x.styles.paddingBottom.responsiveArray = x.conditions.responsiveArray;
1028
- x.styles.paddingLeft.responsiveArray = x.conditions.responsiveArray;
1029
- x.styles.paddingRight.responsiveArray = x.conditions.responsiveArray;
1030
- x.styles.marginTop.responsiveArray = x.conditions.responsiveArray;
1031
- x.styles.marginBottom.responsiveArray = x.conditions.responsiveArray;
1032
- x.styles.marginLeft.responsiveArray = x.conditions.responsiveArray;
1033
- x.styles.marginRight.responsiveArray = x.conditions.responsiveArray;
1034
- x.styles.borderRadius.responsiveArray = x.conditions.responsiveArray;
1035
- return x;
1036
- }(), {
1037
- conditions: void 0,
1038
- styles: {
1039
- position: { values: {
1040
- relative: { defaultClass: "sprinkles_position_relative__1iaw8zx7o" },
1041
- absolute: { defaultClass: "sprinkles_position_absolute__1iaw8zx7p" },
1042
- fixed: { defaultClass: "sprinkles_position_fixed__1iaw8zx7q" },
1043
- sticky: { defaultClass: "sprinkles_position_sticky__1iaw8zx7r" }
1044
- } },
1045
- overflow: { values: {
1046
- hidden: { defaultClass: "sprinkles_overflow_hidden__1iaw8zx7s" },
1047
- scroll: { defaultClass: "sprinkles_overflow_scroll__1iaw8zx7t" },
1048
- visible: { defaultClass: "sprinkles_overflow_visible__1iaw8zx7u" },
1049
- auto: { defaultClass: "sprinkles_overflow_auto__1iaw8zx7v" }
1050
- } },
1051
- cursor: { values: {
1052
- "default": { defaultClass: "sprinkles_cursor_default__1iaw8zx7w" },
1053
- pointer: { defaultClass: "sprinkles_cursor_pointer__1iaw8zx7x" }
1054
- } },
1055
- flexShrink: { values: { "0": { defaultClass: "sprinkles_flexShrink_0__1iaw8zx7y" } } },
1056
- flexGrow: { values: {
1057
- "0": { defaultClass: "sprinkles_flexGrow_0__1iaw8zx7z" },
1058
- "1": { defaultClass: "sprinkles_flexGrow_1__1iaw8zx80" }
1059
- } },
1060
- textAlign: { values: {
1061
- left: { defaultClass: "sprinkles_textAlign_left__1iaw8zx81" },
1062
- center: { defaultClass: "sprinkles_textAlign_center__1iaw8zx82" },
1063
- right: { defaultClass: "sprinkles_textAlign_right__1iaw8zx83" }
1064
- } },
1065
- fontSize: { values: {
1066
- xs: { defaultClass: "sprinkles_fontSize_xs__1iaw8zx84" },
1067
- s: { defaultClass: "sprinkles_fontSize_s__1iaw8zx85" },
1068
- m: { defaultClass: "sprinkles_fontSize_m__1iaw8zx86" },
1069
- l: { defaultClass: "sprinkles_fontSize_l__1iaw8zx87" },
1070
- xl: { defaultClass: "sprinkles_fontSize_xl__1iaw8zx88" },
1071
- "2xl": { defaultClass: "sprinkles_fontSize_2xl__1iaw8zx89" },
1072
- "3xl": { defaultClass: "sprinkles_fontSize_3xl__1iaw8zx8a" },
1073
- "4xl": { defaultClass: "sprinkles_fontSize_4xl__1iaw8zx8b" },
1074
- "5xl": { defaultClass: "sprinkles_fontSize_5xl__1iaw8zx8c" },
1075
- "6xl": { defaultClass: "sprinkles_fontSize_6xl__1iaw8zx8d" }
1076
- } },
1077
- fontWeight: { values: {
1078
- regular: { defaultClass: "sprinkles_fontWeight_regular__1iaw8zx8e" },
1079
- medium: { defaultClass: "sprinkles_fontWeight_medium__1iaw8zx8f" },
1080
- semiBold: { defaultClass: "sprinkles_fontWeight_semiBold__1iaw8zx8g" },
1081
- bold: { defaultClass: "sprinkles_fontWeight_bold__1iaw8zx8h" }
1082
- } }
1083
- }
1084
- }, {
1085
- conditions: {
1086
- defaultCondition: "lightMode",
1087
- conditionNames: ["lightMode", "darkMode"],
1088
- responsiveArray: void 0
1089
- },
1090
- styles: {
1091
- color: { values: {
1092
- primary: {
1093
- conditions: {
1094
- lightMode: "sprinkles_color_primary_lightMode__1iaw8zx8i",
1095
- darkMode: "sprinkles_color_primary_darkMode__1iaw8zx8j"
1096
- },
1097
- defaultClass: "sprinkles_color_primary_lightMode__1iaw8zx8i"
1098
- },
1099
- secondary: {
1100
- conditions: {
1101
- lightMode: "sprinkles_color_secondary_lightMode__1iaw8zx8k",
1102
- darkMode: "sprinkles_color_secondary_darkMode__1iaw8zx8l"
1103
- },
1104
- defaultClass: "sprinkles_color_secondary_lightMode__1iaw8zx8k"
1105
- },
1106
- tertiary: {
1107
- conditions: {
1108
- lightMode: "sprinkles_color_tertiary_lightMode__1iaw8zx8m",
1109
- darkMode: "sprinkles_color_tertiary_darkMode__1iaw8zx8n"
1110
- },
1111
- defaultClass: "sprinkles_color_tertiary_lightMode__1iaw8zx8m"
1112
- },
1113
- disabled: {
1114
- conditions: {
1115
- lightMode: "sprinkles_color_disabled_lightMode__1iaw8zx8o",
1116
- darkMode: "sprinkles_color_disabled_darkMode__1iaw8zx8p"
1117
- },
1118
- defaultClass: "sprinkles_color_disabled_lightMode__1iaw8zx8o"
1119
- },
1120
- action: {
1121
- conditions: {
1122
- lightMode: "sprinkles_color_action_lightMode__1iaw8zx8q",
1123
- darkMode: "sprinkles_color_action_darkMode__1iaw8zx8r"
1124
- },
1125
- defaultClass: "sprinkles_color_action_lightMode__1iaw8zx8q"
1126
- },
1127
- onAction: {
1128
- conditions: {
1129
- lightMode: "sprinkles_color_onAction_lightMode__1iaw8zx8s",
1130
- darkMode: "sprinkles_color_onAction_darkMode__1iaw8zx8t"
1131
- },
1132
- defaultClass: "sprinkles_color_onAction_lightMode__1iaw8zx8s"
1133
- },
1134
- error: {
1135
- conditions: {
1136
- lightMode: "sprinkles_color_error_lightMode__1iaw8zx8u",
1137
- darkMode: "sprinkles_color_error_darkMode__1iaw8zx8v"
1138
- },
1139
- defaultClass: "sprinkles_color_error_lightMode__1iaw8zx8u"
1140
- },
1141
- success: {
1142
- conditions: {
1143
- lightMode: "sprinkles_color_success_lightMode__1iaw8zx8w",
1144
- darkMode: "sprinkles_color_success_darkMode__1iaw8zx8x"
1145
- },
1146
- defaultClass: "sprinkles_color_success_lightMode__1iaw8zx8w"
1147
- },
1148
- warning: {
1149
- conditions: {
1150
- lightMode: "sprinkles_color_warning_lightMode__1iaw8zx8y",
1151
- darkMode: "sprinkles_color_warning_darkMode__1iaw8zx8z"
1152
- },
1153
- defaultClass: "sprinkles_color_warning_lightMode__1iaw8zx8y"
1154
- }
1155
- } },
1156
- backgroundColor: { values: {
1157
- primary: {
1158
- conditions: {
1159
- lightMode: "sprinkles_backgroundColor_primary_lightMode__1iaw8zx90",
1160
- darkMode: "sprinkles_backgroundColor_primary_darkMode__1iaw8zx91"
1161
- },
1162
- defaultClass: "sprinkles_backgroundColor_primary_lightMode__1iaw8zx90"
1163
- },
1164
- secondary: {
1165
- conditions: {
1166
- lightMode: "sprinkles_backgroundColor_secondary_lightMode__1iaw8zx92",
1167
- darkMode: "sprinkles_backgroundColor_secondary_darkMode__1iaw8zx93"
1168
- },
1169
- defaultClass: "sprinkles_backgroundColor_secondary_lightMode__1iaw8zx92"
1170
- },
1171
- background: {
1172
- conditions: {
1173
- lightMode: "sprinkles_backgroundColor_background_lightMode__1iaw8zx94",
1174
- darkMode: "sprinkles_backgroundColor_background_darkMode__1iaw8zx95"
1175
- },
1176
- defaultClass: "sprinkles_backgroundColor_background_lightMode__1iaw8zx94"
1177
- },
1178
- elevated: {
1179
- conditions: {
1180
- lightMode: "sprinkles_backgroundColor_elevated_lightMode__1iaw8zx96",
1181
- darkMode: "sprinkles_backgroundColor_elevated_darkMode__1iaw8zx97"
1182
- },
1183
- defaultClass: "sprinkles_backgroundColor_elevated_lightMode__1iaw8zx96"
1184
- },
1185
- muted: {
1186
- conditions: {
1187
- lightMode: "sprinkles_backgroundColor_muted_lightMode__1iaw8zx98",
1188
- darkMode: "sprinkles_backgroundColor_muted_darkMode__1iaw8zx99"
1189
- },
1190
- defaultClass: "sprinkles_backgroundColor_muted_lightMode__1iaw8zx98"
1191
- },
1192
- tertiary: {
1193
- conditions: {
1194
- lightMode: "sprinkles_backgroundColor_tertiary_lightMode__1iaw8zx9a",
1195
- darkMode: "sprinkles_backgroundColor_tertiary_darkMode__1iaw8zx9b"
1196
- },
1197
- defaultClass: "sprinkles_backgroundColor_tertiary_lightMode__1iaw8zx9a"
1198
- },
1199
- disabled: {
1200
- conditions: {
1201
- lightMode: "sprinkles_backgroundColor_disabled_lightMode__1iaw8zx9c",
1202
- darkMode: "sprinkles_backgroundColor_disabled_darkMode__1iaw8zx9d"
1203
- },
1204
- defaultClass: "sprinkles_backgroundColor_disabled_lightMode__1iaw8zx9c"
1205
- },
1206
- error: {
1207
- conditions: {
1208
- lightMode: "sprinkles_backgroundColor_error_lightMode__1iaw8zx9e",
1209
- darkMode: "sprinkles_backgroundColor_error_darkMode__1iaw8zx9f"
1210
- },
1211
- defaultClass: "sprinkles_backgroundColor_error_lightMode__1iaw8zx9e"
1212
- },
1213
- success: {
1214
- conditions: {
1215
- lightMode: "sprinkles_backgroundColor_success_lightMode__1iaw8zx9g",
1216
- darkMode: "sprinkles_backgroundColor_success_darkMode__1iaw8zx9h"
1217
- },
1218
- defaultClass: "sprinkles_backgroundColor_success_lightMode__1iaw8zx9g"
1219
- },
1220
- warning: {
1221
- conditions: {
1222
- lightMode: "sprinkles_backgroundColor_warning_lightMode__1iaw8zx9i",
1223
- darkMode: "sprinkles_backgroundColor_warning_darkMode__1iaw8zx9j"
1224
- },
1225
- defaultClass: "sprinkles_backgroundColor_warning_lightMode__1iaw8zx9i"
1226
- }
1227
- } }
1228
- }
1229
- });
1230
- cssSource$3 + cssSource$4;
1231
- //#endregion
1232
- //#region ../../packages/design-system/src/components/Box/index.tsx
1233
- function Box({ as: Tag = "div", className, ref, children, style, ...rest }) {
1234
- const atomProps = {};
1235
- const nativeProps = {};
1236
- for (const key in rest) if (sprinkles.properties.has(key)) atomProps[key] = rest[key];
1237
- else nativeProps[key] = rest[key];
1238
- const elementReset = element[Tag];
1239
- return createElement(Tag, {
1240
- className: clsx(elementReset ? `${base} ${elementReset}` : base, sprinkles(atomProps), className),
1241
- style,
1242
- ref,
1243
- ...nativeProps
1244
- }, children);
1245
- }
1246
- //#endregion
1247
- //#region ../../packages/design-system/src/components/Column/index.tsx
1248
- /** Maps fraction strings to CSS flex shorthand (grow=0, shrink=0, basis=%) */
1249
- const widthToFlex = {
1250
- "1/2": "0 0 50%",
1251
- "1/3": "0 0 33.333%",
1252
- "2/3": "0 0 66.667%",
1253
- "1/4": "0 0 25%",
1254
- "3/4": "0 0 75%",
1255
- "1/5": "0 0 20%",
1256
- "2/5": "0 0 40%",
1257
- "3/5": "0 0 60%"
1258
- };
1259
- /**
1260
- * Column — child of <Columns />, controls its own width.
1261
- *
1262
- * - `width="content"` → natural width (flexShrink: 0)
1263
- * - `width="1/2"` etc → explicit flex shorthand via style prop
1264
- * - no width → fills remaining space (flexGrow: 1)
1265
- *
1266
- * Fractional widths use inline `style` because `flex: "0 0 50%"` is
1267
- * incompatible with class-based sprinkles. The parent Columns provides
1268
- * gap-based spacing — no negative margin hacks needed.
1269
- */
1270
- function Column({ width, children }) {
1271
- if (width === "content") return /* @__PURE__ */ jsx(Box, {
1272
- flexShrink: 0,
1273
- children
1274
- });
1275
- if (width !== void 0) return /* @__PURE__ */ jsx(Box, {
1276
- style: { flex: widthToFlex[width] },
1277
- children
1278
- });
1279
- return /* @__PURE__ */ jsx(Box, {
1280
- flexGrow: 1,
1281
- children
1282
- });
1283
- }
1284
- //#endregion
1285
- //#region ../../packages/design-system/src/components/Columns/index.tsx
1286
- const alignYToFlexAlign = {
1287
- top: "flex-start",
1288
- center: "center",
1289
- bottom: "flex-end"
1290
- };
1291
- /**
1292
- * Columns — horizontal layout with gap-based spacing.
1293
- *
1294
- * Wraps <Column /> children in a flex row with responsive gap.
1295
- * Uses CSS `gap` (no negative margin hacks). Vertical alignment
1296
- * via `alignY` maps to flexbox `align-items`.
1297
- */
1298
- function Columns({ space, alignY, as = "div", children }) {
1299
- return /* @__PURE__ */ jsx(Box, {
1300
- as,
1301
- display: "flex",
1302
- flexDirection: "row",
1303
- gap: space,
1304
- alignItems: alignY ? alignYToFlexAlign[alignY] : void 0,
1305
- children
1306
- });
1307
- }
1308
- //#endregion
1309
- //#region ../../packages/design-system/src/components/Stack/index.tsx
1310
- const alignToFlexAlign = {
1311
- left: "flex-start",
1312
- center: "center",
1313
- right: "flex-end"
1314
- };
1315
- const alignToTextAlign = {
1316
- left: "left",
1317
- center: "center",
1318
- right: "right"
1319
- };
1320
- const justifyToFlexJustify = {
1321
- start: "flex-start",
1322
- center: "center",
1323
- end: "flex-end",
1324
- "space-between": "space-between"
1325
- };
1326
- function Stack({ space, padding, paddingX, paddingY, align, justify, as = "div", className, children }) {
1327
- return /* @__PURE__ */ jsx(Box, {
1328
- as,
1329
- display: "flex",
1330
- flexDirection: "column",
1331
- gap: space,
1332
- padding,
1333
- paddingX,
1334
- paddingY,
1335
- alignItems: align ? alignToFlexAlign[align] : void 0,
1336
- justifyContent: justify ? justifyToFlexJustify[justify] : void 0,
1337
- textAlign: align ? alignToTextAlign[align] : void 0,
1338
- className,
1339
- children
1340
- });
1341
- }
1342
- //#endregion
1343
- //#region \0ve-inline:src/components/PostPurchase/PostPurchase.css.ts.vanilla.js
1344
- const cssSource$1 = `.PostPurchase_card__5fv5lh0 {
1345
- border-radius: 12px;
1346
- background-color: var(--surface-background__pbq4akc);
1347
- border: 1px solid var(--border-default__pbq4akv);
1348
- }
1349
- .PostPurchase_badge__5fv5lh1 {
1350
- align-self: flex-start;
1351
- background-color: #FFF534;
1352
- border-radius: 4px;
1353
- padding: 4px 8px;
1354
- font-size: 12px;
1355
- font-weight: 600;
1356
- line-height: 12px;
1357
- color: var(--text-primary__pbq4ak0);
1358
- }
1359
- .PostPurchase_message__5fv5lh2 {
1360
- margin: 0;
1361
- font-size: 16px;
1362
- line-height: 22px;
1363
- color: var(--text-primary__pbq4ak0);
1364
- font-weight: 600;
1365
- }
1366
- .PostPurchase_cta__5fv5lh3 {
1367
- display: inline-flex;
1368
- align-items: center;
1369
- justify-content: center;
1370
- gap: 4px;
1371
- padding: 12px 16px;
1372
- border-radius: 9999px;
1373
- background-color: var(--text-primary__pbq4ak0);
1374
- color: var(--text-onAction__pbq4ak6);
1375
- font-size: 12px;
1376
- font-weight: bold;
1377
- text-transform: uppercase;
1378
- cursor: pointer;
1379
- }
1380
- .PostPurchase_cta__5fv5lh3:disabled {
1381
- opacity: 0.7;
1382
- cursor: default;
1383
- }
1384
- .PostPurchase_icon__5fv5lh4 {
1385
- margin: -2px 0;
1386
- }
1387
- .PostPurchase_giftIcon__5fv5lh5 {
1388
- display: block;
1389
- flex-shrink: 0;
1390
- }
1391
- .PostPurchase_frakLogo__5fv5lh6 {
1392
- display: block;
1393
- margin-left: auto;
1394
- color: var(--surface-primary__pbq4aka);
1395
- }`;
1396
- var card = "PostPurchase_card__5fv5lh0";
1397
- var cta = "PostPurchase_cta__5fv5lh3 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
1398
- var frakLogo = "PostPurchase_frakLogo__5fv5lh6";
1399
- var giftIcon = "PostPurchase_giftIcon__5fv5lh5";
1400
- var icon = "PostPurchase_icon__5fv5lh4";
1401
- var message = "PostPurchase_message__5fv5lh2";
1402
- const cssSource = cssSource$5 + cssSource$3 + cssSource$4 + cssSource$1;
1403
- //#endregion
1404
- //#region src/components/PostPurchase/products.ts
1405
- /**
1406
- * Whether `value` is a syntactically valid URL with an `http(s):` scheme.
1407
- *
1408
- * Used to gate `imageUrl` / `link` fields coming from the public `products`
1409
- * prop — the listener-side sharing-page builder calls `new URL(...)` on the
1410
- * incoming product link, and a `javascript:` URL would be a XSS sink in any
1411
- * consumer that binds the value to an `href`.
1412
- */
1413
- function isHttpUrl(value) {
1414
- try {
1415
- const parsed = new URL(value);
1416
- return parsed.protocol === "http:" || parsed.protocol === "https:";
1417
- } catch {
1418
- return false;
1419
- }
1420
- }
1421
- /**
1422
- * Coerce a raw `products` prop value into a candidate array suitable for
1423
- * per-item normalisation, or null when it cannot be reduced to one.
1424
- *
1425
- * Surfaces that set the prop via the JS property (`el.products = [...]`)
1426
- * deliver a real array; surfaces that bind it as an HTML attribute
1427
- * (WP / Magento server-render) deliver a JSON-stringified array. Anything
1428
- * else (truthy non-array non-string, JSON parse failure, JSON that decodes
1429
- * to a non-array) is treated as "no products" so the share still works
1430
- * without the product card section.
1431
- */
1432
- function coerceProductCandidates(products) {
1433
- if (!products) return null;
1434
- if (Array.isArray(products)) return products;
1435
- if (typeof products !== "string") return null;
1436
- try {
1437
- const parsed = JSON.parse(products);
1438
- return Array.isArray(parsed) ? parsed : null;
1439
- } catch {
1440
- return null;
1441
- }
1442
- }
1443
- /**
1444
- * Normalise one untrusted candidate into a {@link SharingPageProduct}, or
1445
- * return null when the candidate has no usable title.
1446
- *
1447
- * The `products` prop is a public API boundary (merchants can set it
1448
- * server-side via WP/Magento or imperatively from arbitrary JS). Each entry
1449
- * is validated structurally so a malformed `link` reaching `new URL(...)`
1450
- * downstream would not crash the sharing-page builder, and so a
1451
- * `javascript:` URL cannot slip through as `imageUrl` / `link`.
1452
- */
1453
- function normalizeProductCandidate(candidate) {
1454
- if (!candidate || typeof candidate !== "object") return null;
1455
- const item = candidate;
1456
- const title = typeof item.title === "string" ? item.title.trim() : "";
1457
- if (title === "") return null;
1458
- const entry = { title };
1459
- if (typeof item.imageUrl === "string" && isHttpUrl(item.imageUrl)) entry.imageUrl = item.imageUrl;
1460
- if (typeof item.link === "string" && isHttpUrl(item.link)) entry.link = item.link;
1461
- if (typeof item.utmContent === "string" && item.utmContent !== "") entry.utmContent = item.utmContent;
1462
- return entry;
1463
- }
1464
- //#endregion
1465
- //#region src/components/PostPurchase/PostPurchase.tsx
1466
- /**
1467
- * Given referral status and merchant info, compute the display variant
1468
- * and pick the appropriate purchase reward.
1469
- */
1470
- function resolvePostPurchaseContext(referralStatus, merchantInfo) {
1471
- const purchaseReward = merchantInfo.rewards.find((r) => r.interactionTypeKey === "purchase" && (r.referrer || r.referee));
1472
- if (!purchaseReward) return null;
1473
- const variant = referralStatus?.isReferred && purchaseReward.referee ? "referee" : "referrer";
1474
- return {
1475
- variant,
1476
- reward: variant === "referee" ? purchaseReward.referee : purchaseReward.referrer,
1477
- merchantDomain: merchantInfo.onChainMetadata.domain
1478
- };
1479
- }
1480
- /**
1481
- * Post-purchase card component.
1482
- *
1483
- * Renders an inline card on the merchant's thank-you / order-status page
1484
- * that either congratulates a referee or invites a referrer to share.
1485
- *
1486
- * Fetches referral status and merchant information via two independent
1487
- * RPC calls, then computes the display variant locally.
1488
- *
1489
- * @group components
1490
- *
1491
- * @example
1492
- * Minimal — just show the card:
1493
- * ```html
1494
- * <frak-post-purchase></frak-post-purchase>
1495
- * ```
1496
- *
1497
- * @example
1498
- * With purchase tracking fallback and custom sharing URL:
1499
- * ```html
1500
- * <frak-post-purchase
1501
- * customer-id="cust_123"
1502
- * order-id="ord_456"
1503
- * token="checkout_abc"
1504
- * sharing-url="https://merchant.com/product/shoes"
1505
- * ></frak-post-purchase>
1506
- * ```
1507
- */
1508
- function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant, products }) {
1509
- const isPreview = !!preview;
1510
- const { shouldRender, isHidden, isClientReady } = useClientReady();
1511
- const placement = usePlacement(placementId);
1512
- useLightDomStyles("frak-post-purchase", placementId, placement?.components?.postPurchase?.css, cssSource);
1513
- const [context, setContext] = useState(null);
1514
- const [hasFetched, setHasFetched] = useState(false);
1515
- useEffect(() => {
1516
- if (isPreview) return;
1517
- if (!isClientReady || !customerId || !orderId || !token) return;
1518
- trackPurchaseStatus({
1519
- customerId,
1520
- orderId,
1521
- token,
1522
- merchantId
1523
- }).catch(() => {});
1524
- }, [
1525
- isPreview,
1526
- isClientReady,
1527
- customerId,
1528
- orderId,
1529
- token,
1530
- merchantId
1531
- ]);
1532
- useEffect(() => {
1533
- if (isPreview) return;
1534
- if (!isClientReady || hasFetched) return;
1535
- const client = window.FrakSetup?.client;
1536
- if (!client) return;
1537
- Promise.all([getUserReferralStatus(client), getMerchantInformation(client)]).then(([referralStatus, merchantInfo]) => {
1538
- setHasFetched(true);
1539
- setContext(resolvePostPurchaseContext(referralStatus, merchantInfo));
1540
- }).catch((e) => {
1541
- if (e instanceof FrakRpcError && e.code === RpcErrorCodes.configError) {
1542
- setHasFetched(true);
1543
- return;
1544
- }
1545
- console.warn("[Frak] Post-purchase context error", e);
1546
- });
1547
- }, [
1548
- isPreview,
1549
- isClientReady,
1550
- hasFetched
1551
- ]);
1552
- const trackedImpressionVariantRef = useRef(null);
1553
- const resolvedVariant = forcedVariant ?? context?.variant ?? (isPreview ? previewVariant ?? "referrer" : void 0);
1554
- const resolvedSharingUrl = sharingUrl ?? context?.merchantDomain;
1555
- const rewardText = useMemo(() => {
1556
- if (!context?.reward) return void 0;
1557
- const currency = window.FrakSetup?.client?.config?.metadata?.currency;
1558
- return formatEstimatedReward(context.reward, currency);
1559
- }, [context?.reward]);
1560
- const globalComponents = useGlobalComponents();
1561
- const postPurchaseConfig = placement?.components?.postPurchase ?? globalComponents?.postPurchase;
1562
- const resolvedBadgeText = propBadgeText ?? postPurchaseConfig?.badgeText;
1563
- const texts = useMemo(() => {
1564
- return {
1565
- message: resolvedVariant === "referee" ? rewardText ? applyRewardPlaceholder(propRefereeText ?? postPurchaseConfig?.refereeText ?? "You just earned {REWARD}! Share with friends to earn even more.", rewardText) : propRefereeText ?? postPurchaseConfig?.refereeNoRewardText ?? "You just earned a reward! Share with friends to earn even more." : rewardText ? applyRewardPlaceholder(propReferrerText ?? postPurchaseConfig?.referrerText ?? "Earn {REWARD} by sharing this with your friends!", rewardText) : propReferrerText ?? postPurchaseConfig?.referrerNoRewardText ?? "Share this with your friends and earn rewards!",
1566
- cta: rewardText ? applyRewardPlaceholder(propCtaText ?? postPurchaseConfig?.ctaText ?? "Share & earn {REWARD}", rewardText) : propCtaText ?? postPurchaseConfig?.ctaNoRewardText ?? "Share & earn"
1567
- };
1568
- }, [
1569
- resolvedVariant,
1570
- rewardText,
1571
- postPurchaseConfig,
1572
- propReferrerText,
1573
- propRefereeText,
1574
- propCtaText
1575
- ]);
1576
- useEffect(() => {
1577
- if (!resolvedVariant) return;
1578
- if (trackedImpressionVariantRef.current === resolvedVariant) return;
1579
- if (!isPreview && (!shouldRender || isHidden || !isClientReady)) return;
1580
- trackEvent(window.FrakSetup?.client, "post_purchase_impression", {
1581
- placement: placementId,
1582
- variant: resolvedVariant,
1583
- has_reward: Boolean(context?.reward)
1584
- });
1585
- trackedImpressionVariantRef.current = resolvedVariant;
1586
- }, [
1587
- resolvedVariant,
1588
- shouldRender,
1589
- isHidden,
1590
- isClientReady,
1591
- isPreview,
1592
- placementId,
1593
- context?.reward
1594
- ]);
1595
- const parsedProducts = useMemo(() => {
1596
- const candidates = coerceProductCandidates(products);
1597
- if (!candidates) return void 0;
1598
- const sanitized = [];
1599
- for (const candidate of candidates) {
1600
- const entry = normalizeProductCandidate(candidate);
1601
- if (entry) sanitized.push(entry);
1602
- }
1603
- return sanitized.length > 0 ? sanitized : void 0;
1604
- }, [products]);
1605
- const handleClick = useCallback(() => {
1606
- if (!resolvedVariant) return;
1607
- trackEvent(window.FrakSetup?.client, "post_purchase_clicked", {
1608
- placement: placementId,
1609
- variant: resolvedVariant
1610
- });
1611
- openSharingPage(void 0, placementId, {
1612
- link: resolvedSharingUrl,
1613
- products: parsedProducts
1614
- });
1615
- }, [
1616
- resolvedVariant,
1617
- placementId,
1618
- resolvedSharingUrl,
1619
- parsedProducts
1620
- ]);
1621
- if (!isPreview && (!shouldRender || isHidden)) return null;
1622
- if (!isPreview && (!context || !resolvedVariant)) return null;
1623
- if (!resolvedVariant) return null;
1624
- return /* @__PURE__ */ jsx(Box, {
1625
- className: [card, classname].filter(Boolean).join(" "),
1626
- padding: "m",
1627
- children: /* @__PURE__ */ jsxs(Columns, {
1628
- space: "xl",
1629
- alignY: "center",
1630
- children: [/* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(Stack, {
1631
- space: "xs",
1632
- children: [
1633
- resolvedBadgeText && /* @__PURE__ */ jsx("span", {
1634
- class: "PostPurchase_badge__5fv5lh1",
1635
- children: resolvedBadgeText
1636
- }),
1637
- /* @__PURE__ */ jsx("p", {
1638
- class: message,
1639
- children: texts.message
1640
- }),
1641
- /* @__PURE__ */ jsxs(Box, {
1642
- as: "button",
1643
- type: "button",
1644
- className: `${cta} button`,
1645
- disabled: !isPreview && !isClientReady,
1646
- onClick: isPreview ? void 0 : handleClick,
1647
- children: [texts.cta, /* @__PURE__ */ jsx("svg", {
1648
- width: "16",
1649
- height: "16",
1650
- viewBox: "0 0 16 16",
1651
- fill: "none",
1652
- "aria-hidden": "true",
1653
- className: `${icon} button`,
1654
- children: /* @__PURE__ */ jsx("path", {
1655
- d: "M13.8984 11.144C13.9864 11.052 14.1543 11.1114 14.1543 11.2388V11.644C14.1543 13.0509 12.6288 14.1918 10.7471 14.1919C8.86523 14.1919 7.33984 13.051 7.33984 11.644V11.2388C7.33984 11.1114 7.50675 11.052 7.59473 11.144C8.3452 11.9295 9.47906 12.4292 10.7471 12.4292C12.0149 12.4291 13.148 11.9293 13.8984 11.144ZM1.8457 9.64795C1.8457 9.51169 2.01094 9.44452 2.10254 9.54053C2.85304 10.3238 3.98586 10.8247 5.25293 10.8247C5.52246 10.8247 5.78608 10.8026 6.04102 10.7593C6.25744 10.7225 6.46582 10.8816 6.46582 11.1011V12.1704C6.46564 12.319 6.36769 12.4507 6.22266 12.4829C5.91535 12.5512 5.58981 12.5874 5.25293 12.5874C3.3711 12.5874 1.8457 11.4469 1.8457 10.0396V9.64795ZM10.7471 6.20654C12.6288 6.20666 14.1543 7.3475 14.1543 8.75439C14.1541 10.1612 12.6287 11.3012 10.7471 11.3013C8.86535 11.3013 7.34004 10.1612 7.33984 8.75439C7.33984 7.34743 8.86523 6.20654 10.7471 6.20654ZM1.8457 6.8501C1.84597 6.71385 2.01208 6.64848 2.10352 6.74365C2.85393 7.52827 3.98602 8.0278 5.25293 8.02783C5.52282 8.02783 5.78667 8.00448 6.04199 7.96143C6.258 7.92499 6.46582 8.08514 6.46582 8.3042V9.37256C6.46582 9.52127 6.36783 9.65378 6.22266 9.68604C5.91537 9.75429 5.58979 9.79053 5.25293 9.79053C3.3711 9.79048 1.8457 8.64863 1.8457 7.24268V6.8501ZM5.25293 1.80811C7.13481 1.80811 8.66016 2.94856 8.66016 4.35596C8.66008 5.76331 7.13476 6.90381 5.25293 6.90381C3.37115 6.90376 1.84578 5.76328 1.8457 4.35596C1.8457 2.94858 3.3711 1.80815 5.25293 1.80811Z",
1656
- fill: "currentColor"
1657
- })
1658
- })]
1659
- })
1660
- ]
1661
- }) }), /* @__PURE__ */ jsx(Column, {
1662
- width: "content",
1663
- children: /* @__PURE__ */ jsxs(Stack, {
1664
- space: "xs",
1665
- align: "right",
1666
- children: [/* @__PURE__ */ jsx(GiftIcon, {
1667
- className: giftIcon,
1668
- width: 80,
1669
- height: 80
1670
- }), /* @__PURE__ */ jsx(LogoFrak, {
1671
- className: frakLogo,
1672
- width: 14,
1673
- height: 14
1674
- })]
1675
- })
1676
- })]
1677
- })
1678
- });
1679
- }
1680
- //#endregion
1681
- //#region src/components/PostPurchase/index.ts
1682
- registerWebComponent(PostPurchase, "frak-post-purchase", [
1683
- "customerId",
1684
- "orderId",
1685
- "token",
1686
- "sharingUrl",
1687
- "merchantId",
1688
- "placement",
1689
- "classname",
1690
- "variant",
1691
- "badgeText",
1692
- "referrerText",
1693
- "refereeText",
1694
- "ctaText",
1695
- "products",
1696
- "preview",
1697
- "previewVariant"
1698
- ], { shadow: false });
1699
- //#endregion
1700
- export { PostPurchase };