@makeswift/runtime 0.4.2 → 0.5.1

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