@makeswift/runtime 0.1.4 → 0.1.5

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 (58) hide show
  1. package/dist/Box2.cjs.js +54 -0
  2. package/dist/Box2.cjs.js.map +1 -0
  3. package/dist/Box2.es.js +52 -0
  4. package/dist/Box2.es.js.map +1 -0
  5. package/dist/grid-item.cjs.js +594 -0
  6. package/dist/grid-item.cjs.js.map +1 -0
  7. package/dist/grid-item.es.js +585 -0
  8. package/dist/grid-item.es.js.map +1 -0
  9. package/dist/index.cjs.js +3 -1
  10. package/dist/index.cjs.js.map +1 -1
  11. package/dist/index.es.js +3 -1
  12. package/dist/index.es.js.map +1 -1
  13. package/dist/slot.cjs.js +130 -0
  14. package/dist/slot.cjs.js.map +1 -0
  15. package/dist/slot.es.js +123 -0
  16. package/dist/slot.es.js.map +1 -0
  17. package/dist/types/api/react.d.ts.map +1 -1
  18. package/dist/types/components/builtin/Box/Box2.d.ts +8 -0
  19. package/dist/types/components/builtin/Box/Box2.d.ts.map +1 -0
  20. package/dist/types/components/experimental/box-placeholder.d.ts +2 -0
  21. package/dist/types/components/experimental/box-placeholder.d.ts.map +1 -0
  22. package/dist/types/components/experimental/box.d.ts +9 -0
  23. package/dist/types/components/experimental/box.d.ts.map +1 -0
  24. package/dist/types/components/experimental/index.d.ts +2 -0
  25. package/dist/types/components/experimental/index.d.ts.map +1 -0
  26. package/dist/types/components/hooks/useTable.d.ts +66 -0
  27. package/dist/types/components/hooks/useTable.d.ts.map +1 -0
  28. package/dist/types/components/shared/grid-item.d.ts +17 -0
  29. package/dist/types/components/shared/grid-item.d.ts.map +1 -0
  30. package/dist/types/controls/slot.d.ts +42 -0
  31. package/dist/types/controls/slot.d.ts.map +1 -0
  32. package/dist/types/css/border-radius.d.ts +20 -0
  33. package/dist/types/css/border-radius.d.ts.map +1 -0
  34. package/dist/types/css/border.d.ts +31 -0
  35. package/dist/types/css/border.d.ts.map +1 -0
  36. package/dist/types/css/box-shadow.d.ts +19 -0
  37. package/dist/types/css/box-shadow.d.ts.map +1 -0
  38. package/dist/types/css/color.d.ts +5 -0
  39. package/dist/types/css/color.d.ts.map +1 -0
  40. package/dist/types/css/length-percentage.d.ts +10 -0
  41. package/dist/types/css/length-percentage.d.ts.map +1 -0
  42. package/dist/types/css/length.d.ts +14 -0
  43. package/dist/types/css/length.d.ts.map +1 -0
  44. package/dist/types/css/margin.d.ts +20 -0
  45. package/dist/types/css/margin.d.ts.map +1 -0
  46. package/dist/types/css/padding.d.ts +20 -0
  47. package/dist/types/css/padding.d.ts.map +1 -0
  48. package/dist/types/runtimes/react/controls/slot.d.ts +26 -0
  49. package/dist/types/runtimes/react/controls/slot.d.ts.map +1 -0
  50. package/dist/types/runtimes/react/use-style.d.ts +3 -0
  51. package/dist/types/runtimes/react/use-style.d.ts.map +1 -0
  52. package/dist/types/use-global-style.d.ts +3 -0
  53. package/dist/types/use-global-style.d.ts.map +1 -0
  54. package/dist/types/use-grid-item-style.d.ts +1 -0
  55. package/dist/types/use-grid-item-style.d.ts.map +1 -0
  56. package/dist/types/use-style.d.ts +3 -0
  57. package/dist/types/use-style.d.ts.map +1 -0
  58. package/package.json +1 -1
@@ -0,0 +1,594 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __spreadValues = (a, b) => {
10
+ for (var prop in b || (b = {}))
11
+ if (__hasOwnProp.call(b, prop))
12
+ __defNormalProp(a, prop, b[prop]);
13
+ if (__getOwnPropSymbols)
14
+ for (var prop of __getOwnPropSymbols(b)) {
15
+ if (__propIsEnum.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ }
18
+ return a;
19
+ };
20
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
33
+ var css = require("@emotion/css");
34
+ var framerMotion = require("framer-motion");
35
+ var React = require("react");
36
+ var next = require("./index.cjs.js");
37
+ var NextImage = require("next/image");
38
+ var jsxRuntime = require("react/jsx-runtime");
39
+ var ReactPlayer = require("react-player");
40
+ var styled = require("styled-components");
41
+ function _interopDefaultLegacy(e) {
42
+ return e && typeof e === "object" && "default" in e ? e : { "default": e };
43
+ }
44
+ var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
45
+ var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
46
+ var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
47
+ function useBackgrounds(value) {
48
+ const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
49
+ const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
50
+ if (background.type === "color" && background.payload != null) {
51
+ return [background.payload.swatchId];
52
+ }
53
+ if (background.type === "gradient" && background.payload != null) {
54
+ return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(next.isNonNullable);
55
+ }
56
+ if (background.type === "video" && background.payload != null) {
57
+ return [background.payload.maskColor && background.payload.maskColor.swatchId];
58
+ }
59
+ return null;
60
+ }).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(next.isNonNullable);
61
+ const skip = value == null;
62
+ const filesResult = next.useQuery(next.FILES_BY_ID, {
63
+ skip: skip || fileIds.length === 0,
64
+ variables: { ids: fileIds }
65
+ });
66
+ const swatchesResult = next.useQuery(next.SWATCHES_BY_ID, {
67
+ skip: skip || swatchIds.length === 0,
68
+ variables: { ids: swatchIds }
69
+ });
70
+ return React.useMemo(() => {
71
+ const { data: filesData = {} } = filesResult;
72
+ const { data: swatchesData = {} } = swatchesResult;
73
+ if (value == null || filesResult.error != null || swatchesResult.error != null) {
74
+ return null;
75
+ }
76
+ const { files = [] } = filesData;
77
+ const { swatches = [] } = swatchesData;
78
+ return value.map((_a) => {
79
+ var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
80
+ return __spreadProps(__spreadValues({}, restOfValue), {
81
+ value: backgrounds.map((bg) => {
82
+ if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
83
+ const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
84
+ const file = files.find((f) => f && f.id === imageId);
85
+ return file && {
86
+ id: bg.id,
87
+ type: "image",
88
+ payload: __spreadProps(__spreadValues({}, restOfPayload), {
89
+ publicUrl: file.publicUrl,
90
+ dimensions: file.dimensions
91
+ })
92
+ };
93
+ }
94
+ if (bg.type === "color" && bg.payload != null) {
95
+ const { swatchId, alpha } = bg.payload;
96
+ const swatch = swatches.find((s) => s && s.id === swatchId);
97
+ return { id: bg.id, type: "color", payload: { swatch, alpha } };
98
+ }
99
+ if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
100
+ return {
101
+ id: bg.id,
102
+ type: "gradient",
103
+ payload: {
104
+ angle: bg.payload.angle,
105
+ isRadial: bg.payload.isRadial,
106
+ stops: bg.payload.stops.map((_b2) => {
107
+ var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
108
+ return __spreadProps(__spreadValues({}, restOfStop), {
109
+ color: color && {
110
+ swatch: swatches.find((s) => s && s.id === color.swatchId),
111
+ alpha: color.alpha
112
+ }
113
+ });
114
+ })
115
+ }
116
+ };
117
+ }
118
+ if (bg.type === "video" && bg.payload != null) {
119
+ const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
120
+ const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
121
+ return {
122
+ id: bg.id,
123
+ type: "video",
124
+ payload: __spreadProps(__spreadValues({}, restOfPayload), {
125
+ maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
126
+ })
127
+ };
128
+ }
129
+ return null;
130
+ }).filter(Boolean)
131
+ });
132
+ });
133
+ }, [filesResult, swatchesResult, value]);
134
+ }
135
+ const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
136
+ function isScrollable(element) {
137
+ const {
138
+ overflow,
139
+ overflowY,
140
+ overflowX
141
+ } = element.ownerDocument.defaultView.getComputedStyle(element);
142
+ return /(auto|scroll)/.test(overflow + overflowX + overflowY);
143
+ }
144
+ function getScrollParent(element) {
145
+ const {
146
+ parentElement
147
+ } = element;
148
+ if (!element || !parentElement)
149
+ return element;
150
+ if (isScrollable(element))
151
+ return element;
152
+ return getScrollParent(parentElement);
153
+ }
154
+ function Parallax(_a) {
155
+ var _b = _a, {
156
+ strength,
157
+ children
158
+ } = _b, rest = __objRest(_b, [
159
+ "strength",
160
+ "children"
161
+ ]);
162
+ const container = React.useRef(null);
163
+ const [containerScrollTop, setContainerScrollTop] = React.useState(strength == null ? 0 : strength);
164
+ const lastScrollParentScrollTop = React.useRef(0);
165
+ next.useIsomorphicLayoutEffect(() => {
166
+ if (!container.current || strength == null || strength === 0)
167
+ return void 0;
168
+ const containerDocument = container.current.ownerDocument;
169
+ const scrollParent = getScrollParent(container.current);
170
+ const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
171
+ lastScrollParentScrollTop.current = scrollParent.scrollTop;
172
+ setContainerScrollTop(strength);
173
+ function handleScroll() {
174
+ containerDocument.defaultView.requestAnimationFrame(() => {
175
+ if (!container.current)
176
+ return;
177
+ const {
178
+ top: containerTop,
179
+ bottom: containerBottom
180
+ } = container.current.getBoundingClientRect();
181
+ const {
182
+ top: scrollParentTop,
183
+ bottom: scrollParentBottom
184
+ } = scrollParent === containerDocument.documentElement ? {
185
+ top: 0,
186
+ bottom: containerDocument.defaultView.innerHeight
187
+ } : scrollParent.getBoundingClientRect();
188
+ const {
189
+ scrollTop: scrollParentScrollTop
190
+ } = scrollParent === containerDocument.documentElement ? {
191
+ scrollTop: containerDocument.defaultView.pageYOffset
192
+ } : scrollParent;
193
+ const scrollParentHeight = scrollParentBottom - scrollParentTop;
194
+ const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
195
+ lastScrollParentScrollTop.current = scrollParentScrollTop;
196
+ setContainerScrollTop((scrollTop) => {
197
+ const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
198
+ const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
199
+ const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
200
+ const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
201
+ const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
202
+ return clamp(0, scrollTop + containerScrollDelta, strength * 2);
203
+ });
204
+ });
205
+ }
206
+ eventTarget.addEventListener("scroll", handleScroll);
207
+ return () => eventTarget.removeEventListener("scroll", handleScroll);
208
+ }, [strength]);
209
+ const getProps = React.useCallback((_a2) => {
210
+ var _b2 = _a2, {
211
+ style
212
+ } = _b2, restOfChildrenProps = __objRest(_b2, [
213
+ "style"
214
+ ]);
215
+ return __spreadProps(__spreadValues({}, restOfChildrenProps), {
216
+ style: __spreadValues(__spreadProps(__spreadValues({}, style), {
217
+ position: "absolute",
218
+ left: 0,
219
+ right: 0,
220
+ top: 0,
221
+ bottom: 0
222
+ }), strength == null || strength === 0 ? {} : {
223
+ top: -strength,
224
+ bottom: -strength,
225
+ transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
226
+ })
227
+ });
228
+ }, [strength, containerScrollTop]);
229
+ return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, rest), {
230
+ ref: container,
231
+ style: {
232
+ position: "absolute",
233
+ top: 0,
234
+ left: 0,
235
+ right: 0,
236
+ bottom: 0
237
+ },
238
+ children: children(getProps)
239
+ }));
240
+ }
241
+ const Container = styled__default["default"].div`
242
+ position: absolute;
243
+ top: 0;
244
+ left: 0;
245
+ right: 0;
246
+ bottom: 0;
247
+ pointer-events: none;
248
+ overflow: hidden;
249
+ `;
250
+ const Mask = styled__default["default"].div`
251
+ position: absolute;
252
+ top: 0;
253
+ left: 0;
254
+ right: 0;
255
+ bottom: 0;
256
+ background: ${(props) => props.backgroundColor};
257
+ opacity: ${(props) => props.visible ? 1 : 0};
258
+ transition: opacity 1s;
259
+ `;
260
+ const getScale = (element, aspectRatio, zoom) => {
261
+ const {
262
+ offsetWidth: width,
263
+ offsetHeight: height
264
+ } = element;
265
+ const computedAspectRatio = width / height;
266
+ return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
267
+ };
268
+ function BackgroundVideo({
269
+ url = "",
270
+ aspectRatio = 16 / 9,
271
+ zoom = 1,
272
+ maskColor,
273
+ opacity
274
+ }) {
275
+ var _a;
276
+ const [ready, setReady] = React.useState(false);
277
+ const [scale, setScale] = React.useState(1);
278
+ const container = React.useRef(null);
279
+ next.useIsomorphicLayoutEffect(() => {
280
+ const {
281
+ current: containerEl
282
+ } = container;
283
+ if (!containerEl)
284
+ return void 0;
285
+ const {
286
+ defaultView
287
+ } = containerEl.ownerDocument;
288
+ const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
289
+ handleResize();
290
+ defaultView.addEventListener("resize", handleResize);
291
+ return () => defaultView.removeEventListener("resize", handleResize);
292
+ }, [aspectRatio, zoom]);
293
+ if (!ReactPlayer__default["default"].canPlay(url))
294
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
295
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, {
296
+ ref: container,
297
+ children: [container.current && /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], {
298
+ url,
299
+ config: {
300
+ vimeo: {
301
+ playerOptions: {
302
+ background: true
303
+ }
304
+ },
305
+ youtube: {
306
+ playerVars: {
307
+ origin: (_a = container.current.ownerDocument.defaultView) == null ? void 0 : _a.location.origin
308
+ }
309
+ },
310
+ wistia: {
311
+ options: {
312
+ endVideoBehavior: "loop",
313
+ playbackRateControl: false,
314
+ playbar: false,
315
+ playButton: false,
316
+ volumeControl: false,
317
+ fullscreenButton: false,
318
+ muted: true
319
+ }
320
+ }
321
+ },
322
+ playing: true,
323
+ loop: true,
324
+ muted: true,
325
+ controls: false,
326
+ onReady: () => setReady(true),
327
+ style: {
328
+ transform: `scale3d(${scale}, ${scale}, 1)`,
329
+ opacity
330
+ },
331
+ width: "100%",
332
+ height: "100%"
333
+ }), /* @__PURE__ */ jsxRuntime.jsx(Mask, {
334
+ backgroundColor: maskColor,
335
+ visible: !ready
336
+ })]
337
+ });
338
+ }
339
+ function getColor(color) {
340
+ if (color == null)
341
+ return "black";
342
+ if (color.swatch == null) {
343
+ return next.colorToString(__spreadProps(__spreadValues({}, color), {
344
+ swatch: {
345
+ hue: 0,
346
+ saturation: 0,
347
+ lightness: 0
348
+ }
349
+ }));
350
+ }
351
+ return next.colorToString(color);
352
+ }
353
+ const getStopsStyle = (stops) => stops.map(({
354
+ color,
355
+ location
356
+ }) => `${getColor(color)} ${location}%`).join(",");
357
+ const absoluteFillStyle = {
358
+ position: "absolute",
359
+ top: 0,
360
+ right: 0,
361
+ bottom: 0,
362
+ left: 0
363
+ };
364
+ const containerStyle = __spreadProps(__spreadValues({}, absoluteFillStyle), {
365
+ borderRadius: "inherit"
366
+ });
367
+ function Backgrounds({
368
+ backgrounds
369
+ }) {
370
+ if (backgrounds == null)
371
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
372
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
373
+ children: backgrounds.map(({
374
+ value,
375
+ deviceId
376
+ }) => {
377
+ const visibility = backgrounds.map((v) => ({
378
+ deviceId: v.deviceId,
379
+ value: v.deviceId === deviceId
380
+ }));
381
+ return /* @__PURE__ */ jsxRuntime.jsx(BackgroundDeviceLayer, {
382
+ layer: value,
383
+ visibility
384
+ }, deviceId);
385
+ })
386
+ });
387
+ }
388
+ function BackgroundDeviceLayer({
389
+ layer,
390
+ visibility
391
+ }) {
392
+ const visibilityStyle = next.responsiveStyle([visibility], ([v]) => ({
393
+ display: v === true ? "block" : "none"
394
+ }));
395
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
396
+ className: next.useStyle(__spreadProps(__spreadValues(__spreadValues({}, containerStyle), visibilityStyle), {
397
+ overflow: "hidden"
398
+ })),
399
+ children: [...layer].reverse().map((bg) => {
400
+ if (bg.type === "color") {
401
+ return /* @__PURE__ */ jsxRuntime.jsx(ColorBackground, {
402
+ color: getColor(bg.payload)
403
+ }, bg.id);
404
+ }
405
+ if (bg.type === "image" && bg.payload) {
406
+ return /* @__PURE__ */ React.createElement(ImageBackground, __spreadProps(__spreadValues({}, bg.payload), {
407
+ key: bg.id
408
+ }));
409
+ }
410
+ if (bg.type === "gradient" && bg.payload) {
411
+ return /* @__PURE__ */ React.createElement(GradientBackground, __spreadProps(__spreadValues({}, bg.payload), {
412
+ key: bg.id,
413
+ gradient: getStopsStyle(bg.payload.stops)
414
+ }));
415
+ }
416
+ if (bg.type === "video" && bg.payload) {
417
+ return /* @__PURE__ */ React.createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
418
+ key: bg.id,
419
+ maskColor: getColor(bg.payload.maskColor)
420
+ }));
421
+ }
422
+ return null;
423
+ })
424
+ });
425
+ }
426
+ function ColorBackground({
427
+ color
428
+ }) {
429
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
430
+ className: next.useStyle(__spreadProps(__spreadValues({}, containerStyle), {
431
+ backgroundColor: color
432
+ }))
433
+ });
434
+ }
435
+ const ImageBackgroundRepeat = {
436
+ NoRepeat: "no-repeat",
437
+ RepeatX: "repeat-x",
438
+ RepeatY: "repeat-y",
439
+ Repeat: "repeat"
440
+ };
441
+ const ImageBackgroundSize = {
442
+ Cover: "cover",
443
+ Contain: "contain",
444
+ Auto: "auto"
445
+ };
446
+ function ImageBackground({
447
+ publicUrl,
448
+ position,
449
+ repeat = ImageBackgroundRepeat.NoRepeat,
450
+ size = ImageBackgroundSize.Cover,
451
+ opacity,
452
+ parallax
453
+ }) {
454
+ const backgroundPosition = `${position.x}% ${position.y}%`;
455
+ const containerClassName = next.useStyle(containerStyle);
456
+ if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
457
+ return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
458
+ strength: parallax,
459
+ children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
460
+ style: {
461
+ opacity,
462
+ overflow: "hidden"
463
+ }
464
+ })), {
465
+ children: /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
466
+ src: publicUrl,
467
+ layout: "fill",
468
+ objectPosition: backgroundPosition,
469
+ objectFit: size
470
+ })
471
+ }))
472
+ });
473
+ }
474
+ return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
475
+ strength: parallax,
476
+ children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({
477
+ className: containerClassName
478
+ }, getParallaxProps({
479
+ style: {
480
+ backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
481
+ backgroundPosition,
482
+ backgroundRepeat: repeat,
483
+ backgroundSize: size,
484
+ opacity
485
+ }
486
+ })))
487
+ });
488
+ }
489
+ function GradientBackground({
490
+ gradient,
491
+ isRadial,
492
+ angle
493
+ }) {
494
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
495
+ className: next.useStyle(__spreadProps(__spreadValues({}, containerStyle), {
496
+ background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
497
+ }))
498
+ });
499
+ }
500
+ function getAspectRatio(aspectRatio) {
501
+ switch (aspectRatio) {
502
+ case "wide":
503
+ return 16 / 9;
504
+ case "standard":
505
+ return 4 / 3;
506
+ default:
507
+ return 16 / 9;
508
+ }
509
+ }
510
+ function VideoBackground({
511
+ url,
512
+ aspectRatio,
513
+ maskColor,
514
+ zoom,
515
+ opacity,
516
+ parallax
517
+ }) {
518
+ return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
519
+ strength: parallax,
520
+ children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
521
+ className: next.useStyle(containerStyle)
522
+ })), {
523
+ children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundVideo, {
524
+ url,
525
+ zoom,
526
+ opacity,
527
+ aspectRatio: getAspectRatio(aspectRatio),
528
+ maskColor
529
+ })
530
+ }))
531
+ });
532
+ }
533
+ var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_c, ref) {
534
+ var _d = _c, {
535
+ backgrounds,
536
+ children,
537
+ className
538
+ } = _d, restOfProps = __objRest(_d, [
539
+ "backgrounds",
540
+ "children",
541
+ "className"
542
+ ]);
543
+ const [handle, setHandle] = React.useState(null);
544
+ React.useImperativeHandle(ref, () => handle, [handle]);
545
+ return /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, __spreadProps(__spreadValues({}, restOfProps), {
546
+ ref: setHandle,
547
+ className: css.cx(next.useStyle({
548
+ position: "relative",
549
+ width: "100%",
550
+ margin: "0 auto",
551
+ "> *": {
552
+ borderRadius: "inherit",
553
+ height: "inherit"
554
+ },
555
+ "> :last-child": {
556
+ position: "relative"
557
+ }
558
+ }), className),
559
+ children: [/* @__PURE__ */ jsxRuntime.jsx(Backgrounds, {
560
+ backgrounds: useBackgrounds(backgrounds)
561
+ }), React.Children.only(children)]
562
+ }));
563
+ });
564
+ function GridItem(_e) {
565
+ var _f = _e, {
566
+ as,
567
+ grid,
568
+ index,
569
+ columnGap,
570
+ rowGap,
571
+ className
572
+ } = _f, restOfProps = __objRest(_f, [
573
+ "as",
574
+ "grid",
575
+ "index",
576
+ "columnGap",
577
+ "rowGap",
578
+ "className"
579
+ ]);
580
+ const gridItemClassName = next.useStyle(next.responsiveGridItem({
581
+ grid,
582
+ index,
583
+ columnGap,
584
+ rowGap
585
+ }));
586
+ const Component = as != null ? as : "div";
587
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
588
+ className: css.cx(gridItemClassName, className)
589
+ }));
590
+ }
591
+ exports.BackgroundsContainer = BackgroundsContainer;
592
+ exports.GridItem = GridItem;
593
+ exports.useBackgrounds = useBackgrounds;
594
+ //# sourceMappingURL=grid-item.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid-item.cjs.js","sources":["../src/components/hooks/useBackgrounds.ts","../src/utils/clamp.ts","../src/components/shared/BackgroundsContainer/components/Parallax/index.tsx","../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx","../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx","../src/components/shared/BackgroundsContainer/index.tsx","../src/components/shared/grid-item.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport { FILES_BY_ID, SWATCHES_BY_ID } from '../utils/queries'\nimport { isNonNullable } from '../utils/isNonNullable'\nimport { BackgroundsValue as ResponsiveBackgroundsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype BackgroundColorData = Color\n\ntype BackgroundGradientStopData = {\n id: string\n location: number\n color: Color | null | undefined\n}\n\ntype BackgroundGradientData = {\n angle: number\n isRadial: boolean\n stops: Array<BackgroundGradientStopData>\n}\n\ntype BackgroundImageData = {\n publicUrl?: string\n dimensions: { width: number; height: number } | null\n position: {\n x: number\n y: number\n }\n size: 'cover' | 'contain' | 'auto'\n repeat: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'\n opacity?: number\n parallax?: number\n}\n\ntype BackgroundVideoData = {\n url: string\n maskColor: Color | null | undefined\n aspectRatio: 'wide' | 'standard'\n opacity: number\n zoom: number\n parallax: number\n}\n\ntype BackgroundData =\n | { id: string; type: 'color'; payload: BackgroundColorData | null | undefined }\n | { id: string; type: 'image'; payload: BackgroundImageData | null | undefined }\n | { id: string; type: 'gradient'; payload: BackgroundGradientData | null | undefined }\n | { id: string; type: 'video'; payload: BackgroundVideoData | null | undefined }\n\nexport type BackgroundsData = Array<BackgroundData>\n\nexport type BackgroundsPropControllerData = ResponsiveValue<BackgroundsData>\n\nexport function useBackgrounds(\n value: ResponsiveBackgroundsValue | null | undefined,\n): BackgroundsPropControllerData | null | undefined {\n const fileIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background =>\n background.type === 'image' && background.payload != null\n ? background.payload.imageId\n : null,\n )\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), [] as string[]),\n )\n .reduce((a, b) => a.concat(b), [])\n const swatchIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background => {\n if (background.type === 'color' && background.payload != null) {\n return [background.payload.swatchId]\n }\n\n if (background.type === 'gradient' && background.payload != null) {\n return background.payload.stops\n .map(stop => stop.color && stop.color.swatchId)\n .filter(isNonNullable)\n }\n\n if (background.type === 'video' && background.payload != null) {\n return [background.payload.maskColor && background.payload.maskColor.swatchId]\n }\n\n return null\n })\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), []),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable)\n const skip = value == null\n const filesResult = useQuery(FILES_BY_ID, {\n skip: skip || fileIds.length === 0,\n variables: { ids: fileIds },\n })\n const swatchesResult = useQuery(SWATCHES_BY_ID, {\n skip: skip || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n return useMemo(() => {\n const { data: filesData = {} } = filesResult\n const { data: swatchesData = {} } = swatchesResult\n\n if (value == null || filesResult.error != null || swatchesResult.error != null) {\n return null\n }\n\n const { files = [] } = filesData\n const { swatches = [] } = swatchesData\n\n return value.map(({ value: backgrounds, ...restOfValue }) => ({\n ...restOfValue,\n value: backgrounds\n .map(bg => {\n if (bg.type === 'image' && bg.payload != null && bg.payload.imageId != null) {\n const { imageId, ...restOfPayload } = bg.payload\n const file = files.find((f: any) => f && f.id === imageId)\n\n return (\n file && {\n id: bg.id,\n type: 'image',\n payload: {\n ...restOfPayload,\n publicUrl: file.publicUrl,\n dimensions: file.dimensions,\n },\n }\n )\n }\n\n if (bg.type === 'color' && bg.payload != null) {\n const { swatchId, alpha } = bg.payload\n const swatch = swatches.find((s: any) => s && s.id === swatchId)\n\n return { id: bg.id, type: 'color', payload: { swatch, alpha } }\n }\n\n if (bg.type === 'gradient' && bg.payload != null && bg.payload.stops.length > 0) {\n return {\n id: bg.id,\n type: 'gradient',\n payload: {\n angle: bg.payload.angle,\n isRadial: bg.payload.isRadial,\n stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({\n ...restOfStop,\n color: color && {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n })),\n },\n }\n }\n\n if (bg.type === 'video' && bg.payload != null) {\n const { maskColor, ...restOfPayload } = bg.payload\n const swatch = maskColor && swatches.find((s: any) => s && s.id === maskColor.swatchId)\n\n return {\n id: bg.id,\n type: 'video',\n payload: {\n ...restOfPayload,\n maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha },\n },\n }\n }\n\n return null\n })\n .filter(Boolean),\n }))\n }, [filesResult, swatchesResult, value])\n}\n","const clamp = (min: number, val: number, max: number): number => Math.min(Math.max(min, val), max)\n\nexport default clamp\n","import { useState, useRef, useCallback, ReactNode, CSSProperties } from 'react'\nimport clamp from '../../../../../utils/clamp'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nfunction isScrollable(element: HTMLElement) {\n const { overflow, overflowY, overflowX } =\n element.ownerDocument.defaultView!.getComputedStyle(element)\n\n return /(auto|scroll)/.test(overflow + overflowX + overflowY)\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement {\n const { parentElement } = element\n\n if (!element || !parentElement) return element\n\n if (isScrollable(element)) return element\n\n return getScrollParent(parentElement)\n}\n\ntype Props = {\n strength: number | null | undefined\n children: (\n getParallaxProps: <P extends { style?: CSSProperties; [key: string]: unknown }>(props: P) => P,\n ) => ReactNode\n}\n\nexport default function Parallax({ strength, children, ...rest }: Props): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength)\n const lastScrollParentScrollTop = useRef(0)\n\n useIsomorphicLayoutEffect(() => {\n if (!container.current || strength == null || strength === 0) return undefined\n\n const containerDocument = container.current.ownerDocument\n const scrollParent = getScrollParent(container.current)\n const eventTarget =\n containerDocument.documentElement === scrollParent\n ? containerDocument.defaultView!\n : scrollParent\n\n lastScrollParentScrollTop.current = scrollParent.scrollTop\n setContainerScrollTop(strength)\n\n function handleScroll() {\n containerDocument.defaultView!.requestAnimationFrame(() => {\n if (!container.current) return\n\n const { top: containerTop, bottom: containerBottom } =\n container.current.getBoundingClientRect()\n const { top: scrollParentTop, bottom: scrollParentBottom } =\n scrollParent === containerDocument.documentElement\n ? { top: 0, bottom: containerDocument.defaultView!.innerHeight }\n : scrollParent.getBoundingClientRect()\n const { scrollTop: scrollParentScrollTop } =\n scrollParent === containerDocument.documentElement\n ? { scrollTop: containerDocument.defaultView!.pageYOffset }\n : scrollParent\n const scrollParentHeight = scrollParentBottom - scrollParentTop\n const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current\n\n lastScrollParentScrollTop.current = scrollParentScrollTop\n\n setContainerScrollTop(scrollTop => {\n const isContainerVisible =\n containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop\n const containerScrollRemaining =\n scrollParentScrollDelta > 0 ? 2 * strength! - scrollTop : scrollTop\n const scrollParentScrollRemaining =\n scrollParentScrollDelta > 0\n ? scrollParentTop + containerBottom\n : scrollParentHeight - containerTop\n const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining\n const containerScrollDelta = isContainerVisible\n ? parallaxRatio * scrollParentScrollDelta\n : 0\n\n return clamp(0, scrollTop + containerScrollDelta, strength! * 2)\n })\n })\n }\n\n eventTarget.addEventListener('scroll', handleScroll)\n\n return () => eventTarget.removeEventListener('scroll', handleScroll)\n }, [strength])\n\n const getProps = useCallback(\n ({ style, ...restOfChildrenProps }) => ({\n ...restOfChildrenProps,\n style: {\n ...style,\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n ...(strength == null || strength === 0\n ? {}\n : {\n top: -strength,\n bottom: -strength,\n transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`,\n }),\n },\n }),\n [strength, containerScrollTop],\n )\n\n return (\n <div\n {...rest}\n ref={container}\n style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}\n >\n {children(getProps)}\n </div>\n )\n}\n","import { useState, useRef } from 'react'\nimport ReactPlayer from 'react-player'\nimport styled from 'styled-components'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n`\n\nconst Mask = styled.div<{ backgroundColor: string | undefined; visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: ${props => props.backgroundColor};\n opacity: ${props => (props.visible ? 1 : 0)};\n transition: opacity 1s;\n`\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n const { offsetWidth: width, offsetHeight: height } = element\n const computedAspectRatio = width / height\n\n return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n url?: string\n aspectRatio?: number\n zoom?: number\n opacity?: number\n maskColor?: string\n}\n\nexport default function BackgroundVideo({\n url = '',\n aspectRatio = 16 / 9,\n zoom = 1,\n maskColor,\n opacity,\n}: Props): JSX.Element {\n const [ready, setReady] = useState(false)\n const [scale, setScale] = useState(1)\n const container = useRef<HTMLDivElement>(null)\n\n useIsomorphicLayoutEffect(() => {\n const { current: containerEl } = container\n\n if (!containerEl) return undefined\n\n const { defaultView } = containerEl.ownerDocument\n const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n handleResize()\n\n defaultView!.addEventListener('resize', handleResize)\n\n return () => defaultView!.removeEventListener('resize', handleResize)\n }, [aspectRatio, zoom])\n\n if (!ReactPlayer.canPlay(url)) return <></>\n\n return (\n <Container ref={container}>\n {container.current && (\n <ReactPlayer\n url={url}\n config={{\n vimeo: { playerOptions: { background: true } },\n youtube: {\n playerVars: {\n origin: container.current.ownerDocument.defaultView?.location.origin,\n },\n },\n wistia: {\n options: {\n endVideoBehavior: 'loop',\n playbackRateControl: false,\n playbar: false,\n playButton: false,\n volumeControl: false,\n fullscreenButton: false,\n muted: true,\n },\n },\n }}\n playing\n loop\n muted\n controls={false}\n onReady={() => setReady(true)}\n style={{\n transform: `scale3d(${scale}, ${scale}, 1)`,\n opacity,\n }}\n width=\"100%\"\n height=\"100%\"\n />\n )}\n <Mask backgroundColor={maskColor} visible={!ready} />\n </Container>\n )\n}\n","import NextImage from 'next/image'\n\nimport { BackgroundsPropControllerData, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../use-style'\nimport { responsiveStyle } from '../../../../utils/responsive-style'\n\nfunction getColor(color: Color | null | undefined) {\n if (color == null) return 'black'\n\n if (color.swatch == null) {\n return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n }\n\n return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n}\n\nconst containerStyle: CSSObject = {\n ...absoluteFillStyle,\n borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerData | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n if (backgrounds == null) return <></>\n\n return (\n <>\n {backgrounds.map(({ value, deviceId }) => {\n const visibility = backgrounds.map(v => ({\n deviceId: v.deviceId,\n value: v.deviceId === deviceId,\n }))\n\n return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n })}\n </>\n )\n}\n\ntype BackgroundLayerProps = {\n layer: BackgroundsData\n visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n const visibilityStyle = responsiveStyle([visibility], ([v]) => ({\n display: v === true ? 'block' : 'none',\n }))\n\n return (\n <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n {[...layer].reverse().map(bg => {\n if (bg.type === 'color') {\n return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n }\n\n if (bg.type === 'image' && bg.payload) {\n return <ImageBackground {...bg.payload} key={bg.id} />\n }\n\n if (bg.type === 'gradient' && bg.payload) {\n return (\n <GradientBackground\n {...bg.payload}\n key={bg.id}\n gradient={getStopsStyle(bg.payload.stops)}\n />\n )\n }\n\n if (bg.type === 'video' && bg.payload) {\n return (\n <VideoBackground\n {...bg.payload}\n key={bg.id}\n maskColor={getColor(bg.payload.maskColor)}\n />\n )\n }\n\n return null\n })}\n </div>\n )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n NoRepeat: 'no-repeat',\n RepeatX: 'repeat-x',\n RepeatY: 'repeat-y',\n Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = typeof ImageBackgroundRepeat[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n Cover: 'cover',\n Contain: 'contain',\n Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = typeof ImageBackgroundSize[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n publicUrl?: string\n position: { x: number; y: number }\n repeat: ImageBackgroundRepeat\n size?: ImageBackgroundSize\n opacity?: number\n parallax?: number\n}\n\nfunction ImageBackground({\n publicUrl,\n position,\n repeat = ImageBackgroundRepeat.NoRepeat,\n size = ImageBackgroundSize.Cover,\n opacity,\n parallax,\n}: ImageBackgroundProps) {\n const backgroundPosition = `${position.x}% ${position.y}%`\n const containerClassName = useStyle(containerStyle)\n\n if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n <NextImage\n src={publicUrl}\n layout=\"fill\"\n objectPosition={backgroundPosition}\n objectFit={size}\n />\n </div>\n )}\n </Parallax>\n )\n }\n\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div\n className={containerClassName}\n {...getParallaxProps({\n style: {\n backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n backgroundPosition,\n backgroundRepeat: repeat,\n backgroundSize: size,\n opacity,\n },\n })}\n />\n )}\n </Parallax>\n )\n}\n\ntype GradientBackgroundProps = {\n gradient: string\n angle: number\n isRadial: boolean\n}\n\nfunction GradientBackground({ gradient, isRadial, angle }: GradientBackgroundProps) {\n return (\n <div\n className={useStyle({\n ...containerStyle,\n background: isRadial\n ? `radial-gradient(${gradient})`\n : `linear-gradient(${angle}rad, ${gradient})`,\n })}\n />\n )\n}\n\nconst BackgroundVideoAspectRatio = {\n Wide: 'wide',\n Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n typeof BackgroundVideoAspectRatio[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio): number {\n switch (aspectRatio) {\n case 'wide':\n return 16 / 9\n\n case 'standard':\n return 4 / 3\n\n default:\n return 16 / 9\n }\n}\n\ntype VideoBackgroundProps = {\n url: string\n aspectRatio: BackgroundVideoAspectRatio\n maskColor: string\n zoom: number\n opacity: number\n parallax: number\n}\n\nfunction VideoBackground({\n url,\n aspectRatio,\n maskColor,\n zoom,\n opacity,\n parallax,\n}: VideoBackgroundProps) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n <BackgroundVideo\n url={url}\n zoom={zoom}\n opacity={opacity}\n aspectRatio={getAspectRatio(aspectRatio)}\n maskColor={maskColor}\n />\n </div>\n )}\n </Parallax>\n )\n}\n","import { cx } from '@emotion/css'\nimport { motion } from 'framer-motion'\nimport {\n Children,\n ComponentPropsWithoutRef,\n ElementType,\n forwardRef,\n ReactElement,\n Ref,\n useImperativeHandle,\n useState,\n} from 'react'\nimport { BackgroundsValue as BackgroundsPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\n\ntype BaseProps = {\n backgrounds: BackgroundsPropControllerValue | null | undefined\n children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof motion.div>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n { backgrounds, children, className, ...restOfProps }: Props,\n ref: Ref<HTMLDivElement | null>,\n) {\n const [handle, setHandle] = useState<HTMLDivElement | null>(null)\n\n useImperativeHandle(ref, () => handle, [handle])\n\n return (\n <motion.div\n {...restOfProps}\n ref={setHandle}\n className={cx(\n useStyle({\n position: 'relative',\n width: '100%',\n margin: '0 auto',\n '> *': {\n borderRadius: 'inherit',\n height: 'inherit',\n },\n '> :last-child': {\n position: 'relative',\n },\n }),\n className,\n )}\n >\n <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n {Children.only(children)}\n </motion.div>\n )\n})\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { ResponsiveValue, Length as LengthValue } from '../../prop-controllers'\nimport { useStyle } from '../../use-style'\nimport { responsiveGridItem } from '../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n className?: string\n grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthValue>\n rowGap?: ResponsiveValue<LengthValue>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport function GridItem<T extends ElementType = 'div'>({\n as,\n grid,\n index,\n columnGap,\n rowGap,\n className,\n ...restOfProps\n}: Props<T>) {\n const gridItemClassName = useStyle(responsiveGridItem({ grid, index, columnGap, rowGap }))\n const Component = as ?? 'div'\n\n return <Component {...restOfProps} className={cx(gridItemClassName, className)} />\n}\n"],"names":["isNonNullable","useQuery","FILES_BY_ID","SWATCHES_BY_ID","useMemo","element","overflow","overflowY","overflowX","ownerDocument","defaultView","getComputedStyle","test","parentElement","isScrollable","getScrollParent","strength","children","rest","container","useRef","containerScrollTop","setContainerScrollTop","useState","lastScrollParentScrollTop","useIsomorphicLayoutEffect","current","undefined","containerDocument","scrollParent","eventTarget","documentElement","scrollTop","requestAnimationFrame","top","containerTop","bottom","containerBottom","getBoundingClientRect","scrollParentTop","scrollParentBottom","innerHeight","scrollParentScrollTop","pageYOffset","scrollParentHeight","scrollParentScrollDelta","isContainerVisible","containerScrollRemaining","scrollParentScrollRemaining","parallaxRatio","containerScrollDelta","clamp","addEventListener","handleScroll","removeEventListener","getProps","useCallback","style","restOfChildrenProps","position","left","right","transform","Container","styled","div","Mask","props","backgroundColor","visible","getScale","aspectRatio","zoom","offsetWidth","width","offsetHeight","height","computedAspectRatio","Math","max","url","maskColor","opacity","ready","setReady","scale","setScale","containerEl","handleResize","ReactPlayer","canPlay","_jsx","_Fragment","vimeo","playerOptions","background","youtube","playerVars","origin","location","wistia","options","endVideoBehavior","playbackRateControl","playbar","playButton","volumeControl","fullscreenButton","muted","color","swatch","colorToString","hue","saturation","lightness","getStopsStyle","stops","map","getColor","join","absoluteFillStyle","containerStyle","borderRadius","backgrounds","value","deviceId","visibility","v","layer","visibilityStyle","responsiveStyle","display","useStyle","reverse","bg","type","payload","id","ImageBackgroundRepeat","NoRepeat","RepeatX","RepeatY","Repeat","ImageBackgroundSize","Cover","Contain","Auto","publicUrl","repeat","size","parallax","backgroundPosition","x","y","containerClassName","getParallaxProps","NextImage","backgroundImage","backgroundRepeat","backgroundSize","gradient","isRadial","angle","className","getAspectRatio","forwardRef","ref","restOfProps","handle","setHandle","useImperativeHandle","_jsxs","motion","cx","margin","useBackgrounds","Children","only","as","grid","index","columnGap","rowGap","gridItemClassName","responsiveGridItem","Component"],"mappings":"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"}