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