etudes 32.2.0 → 32.4.0

package/build/components/Burger.d.ts

@@ -4,7 +4,7 @@ import { HTMLAttributes, Ref } from 'react';
  *
  * @exports Burger.Bar Component for each bar in the burger.
  */
-export declare function Burger({ className, ref, children, numberOfBars, isActive, isSplit, isTailHidden, ...props }: Burger.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Burger({ className, ref, children, numberOfBars, isActive, isSplit, isTailHidden, ...props }: Burger.Props): import("react").JSX.Element;
 export declare namespace Burger {
     var displayName: string;
 }
@@ -39,7 +39,7 @@ export declare namespace Burger {
      * Component for each bar in a {@link Burger}.
      */
     const Bar: {
-        ({ ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
         displayName: string;
     };
 }

package/build/components/BurgerButton.d.ts

@@ -6,7 +6,7 @@ import { Burger } from './Burger.js';
  *
  * @exports BurgerButton.Bar Component for each bar in the burger button.
  */
-export declare function BurgerButton({ className, ref, style, children, numberOfBars, isActive, isSplit, isTailHidden, onActivate, onDeactivate, onToggle, ...props }: BurgerButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare function BurgerButton({ className, ref, style, children, numberOfBars, isActive, isSplit, isTailHidden, onActivate, onDeactivate, onToggle, ...props }: BurgerButton.Props): import("react").JSX.Element;
 export declare namespace BurgerButton {
     var displayName: string;
 }
@@ -38,7 +38,7 @@ export declare namespace BurgerButton {
      * Component for each bar in a {@link BurgerButton}.
      */
     const Bar: {
-        ({ ...props }: import("react").HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: import("react").HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
         displayName: string;
     };
 }

package/build/components/CoverImage.d.ts

@@ -7,7 +7,7 @@ import { Picture } from '../primitives/Picture.js';
  * @exports CoverImage.Content Component for optional content inside the image.
  * @exports CoverImage.Viewport Component for the viewport.
  */
-export declare function CoverImage({ ref, style, alt, aspectRatio: externalAspectRatio, children, loadingMode, source, onError, onLoad, onLoadStart, ...props }: Readonly<CoverImage.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function CoverImage({ ref, style, alt, aspectRatio: externalAspectRatio, children, loadingMode, source, onError, onLoad, onLoadStart, ...props }: Readonly<CoverImage.Props>): import("react").JSX.Element;
 export declare namespace CoverImage {
     var displayName: string;
 }
@@ -30,14 +30,14 @@ export declare namespace CoverImage {
      * Component for optional content inside a {@link CoverImage}.
      */
     const Content: {
-        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the viewport of a {@link CoverImage}.
      */
     const Viewport: {
-        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
 }

package/build/components/CoverVideo.d.ts

@@ -7,7 +7,7 @@ import { Video } from '../primitives/Video.js';
  * @exports CoverVideo.Content Component for optional content inside the video.
  * @exports CoverVideo.Viewport Component for the viewport.
  */
-export declare function CoverVideo({ className, ref, style, aspectRatio: externalAspectRatio, autoLoop, autoPlay, children, playsInline, poster, source, hasControls, isMuted, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }: Readonly<CoverVideo.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function CoverVideo({ className, ref, style, aspectRatio: externalAspectRatio, autoLoop, autoPlay, children, playsInline, poster, source, hasControls, isMuted, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }: Readonly<CoverVideo.Props>): import("react").JSX.Element;
 export declare namespace CoverVideo {
     var displayName: string;
 }
@@ -30,14 +30,14 @@ export declare namespace CoverVideo {
      * Component for optional content inside a {@link CoverVideo}.
      */
     const Content: {
-        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the viewport of a {@link CoverVideo}.
      */
     const Viewport: {
-        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
 }

package/build/components/OptionButton.d.ts

@@ -35,7 +35,7 @@ export declare namespace OptionButton {
 /**
  * A button component that cycles through a list of options when clicked.
  */
-export declare function OptionButton({ ref, index, options, isDisabled, onChange, ...props }: OptionButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare function OptionButton({ ref, index, options, isDisabled, onChange, ...props }: OptionButton.Props): import("react").JSX.Element;
 export declare namespace OptionButton {
     var displayName: string;
 }

package/build/components/PanoramaSlider.d.ts

@@ -10,7 +10,7 @@ import { Panorama } from '../primitives/Panorama.js';
  *                                 FOV of the backing {@link Panorama}.
  * @exports Panorama.SliderTrack Component for the slide track.
  */
-export declare function PanoramaSlider({ className, ref, style, angle, autoDimension, children, fov, speed, src, viewportSize, zeroAnchor, onAngleChange, onDragEnd, onDragStart, onImageSizeChange, onLoadImageComplete, onLoadImageError, onLoadImageStart, onPositionChange, ...props }: Readonly<PanoramaSlider.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function PanoramaSlider({ className, ref, style, angle, autoDimension, children, fov, speed, src, viewportSize, zeroAnchor, onAngleChange, onDragEnd, onDragStart, onImageSizeChange, onLoadImageComplete, onLoadImageError, onLoadImageStart, onPositionChange, ...props }: Readonly<PanoramaSlider.Props>): import("react").JSX.Element;
 export declare namespace PanoramaSlider {
     var displayName: string;
 }
@@ -49,21 +49,21 @@ export declare namespace PanoramaSlider {
      * Component for the active indicator of a {@link PanoramaSlider}.
      */
     const Indicator: {
-        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the active reticle of a {@link PanoramaSlider}.
      */
     const Reticle: {
-        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the slide track of a {@link PanoramaSlider}.
      */
     const Track: {
-        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
         displayName: string;
     };
 }

package/build/components/SelectableButton.d.ts

@@ -43,7 +43,7 @@ export declare namespace SelectableButton {
 /**
  * A button component that can be selected or deselected.
  */
-export declare function SelectableButton({ className, ref, children, label, isDeselectable, isDisabled, isSelected, onDeselect, onSelect, onToggle, ...props }: SelectableButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare function SelectableButton({ className, ref, children, label, isDeselectable, isDisabled, isSelected, onDeselect, onSelect, onToggle, ...props }: SelectableButton.Props): import("react").JSX.Element;
 export declare namespace SelectableButton {
     var displayName: string;
 }

package/build/etudes.js

@@ -994,46 +994,42 @@ var Qe;
 })(Qe ||= {});
 //#endregion
 //#region src/hooks/useImageLoader.ts
-function $e({ sizes: e, src: t, srcSet: n }, { onError: r, onLoad: i, onLoadStart: a } = {}) {
-	let o = f(void 0), s = Z(a), c = Z(i), l = Z(r);
+function $e(e, { onError: t, onLoad: n, onLoadStart: r } = {}) {
+	let i = typeof e == "string" ? e : e[0], a = typeof e == "string" ? void 0 : e[1], o = a ? Qe.asProps(a) : void 0, s = f(void 0), c = Z(r), l = Z(n), d = Z(t);
 	u(() => {
-		let r = !1, i = (e) => {
-			if (r) return;
-			let t = e.currentTarget;
-			c.current?.(t);
-		}, a = (e) => {
-			if (r) return;
-			let t = e.currentTarget;
-			l.current?.(t);
-		}, u = new Image();
-		return u.addEventListener("load", i), u.addEventListener("error", a), s.current?.(u), n && (u.srcset = n), e && (u.sizes = e), u.src = t, o.current = u, () => {
-			r = !0, u.removeEventListener("load", i), u.removeEventListener("error", a), o.current = void 0;
+		let e = !1, t = (t) => {
+			if (e) return;
+			let n = t.currentTarget;
+			l.current?.(n);
+		}, n = (t) => {
+			if (e) return;
+			let n = t.currentTarget;
+			d.current?.(n);
+		}, r = new Image();
+		return r.addEventListener("load", t), r.addEventListener("error", n), c.current?.(r), o?.srcSet && (r.srcset = o.srcSet), o?.sizes && (r.sizes = o.sizes), r.src = i, s.current = r, () => {
+			e = !0, r.removeEventListener("load", t), r.removeEventListener("error", n), s.current = void 0;
 		};
 	}, [
-		t,
-		n,
-		e
+		i,
+		o?.srcSet,
+		o?.sizes
 	]);
 }
 //#endregion
 //#region src/hooks/useImageSize.ts
-function et({ sizes: e, src: t, srcSet: n }, { preservesSizeBetweenLoads: r = !0, onError: i, onLoad: a, onLoadStart: o } = {}) {
-	let [s, l] = p(), u = Z(o), d = Z(a), f = Z(i), m = c((e) => {
-		r || l(void 0), u.current?.(e);
-	}, [r]), h = c((e) => {
-		l(tt(e)), d.current?.(e);
-	}, []), g = c((e) => {
-		r || l(void 0), f.current?.(e);
-	}, [r]);
-	return $e({
-		sizes: e,
-		src: t,
-		srcSet: n
-	}, {
-		onError: g,
-		onLoad: h,
-		onLoadStart: m
-	}), s;
+function et(e, { preservesSizeBetweenLoads: t = !0, onError: n, onLoad: r, onLoadStart: i } = {}) {
+	let [a, o] = p(), s = Z(i), l = Z(r), u = Z(n), d = c((e) => {
+		t || o(void 0), s.current?.(e);
+	}, [t]), f = c((e) => {
+		o(tt(e)), l.current?.(e);
+	}, []);
+	return $e(e, {
+		onError: c((e) => {
+			t || o(void 0), u.current?.(e);
+		}, [t]),
+		onLoad: f,
+		onLoadStart: d
+	}), a;
 }
 function tt(e) {
 	if (e && typeof e.width == "number" && typeof e.height == "number") return q.make(e.width, e.height);
@@ -1041,11 +1037,7 @@ function tt(e) {
 //#endregion
 //#region src/primitives/Image.tsx
 function nt({ ref: e, alt: t, loadingMode: n, source: r, onError: i, onLoad: a, onLoadStart: o, onSizeChange: s, ...c }) {
-	let u = typeof r == "string" ? r : r[0], d = typeof r == "string" ? void 0 : r[1], f = d ? Qe.asProps(d) : void 0, p = et({
-		sizes: f?.sizes,
-		src: u,
-		srcSet: f?.srcSet
-	}, {
+	let u = typeof r == "string" ? r : r[0], d = typeof r == "string" ? void 0 : r[1], f = d ? Qe.asProps(d) : void 0, p = et(r, {
 		onError: i,
 		onLoad: a,
 		onLoadStart: o
@@ -5545,7 +5537,7 @@ function yt(e) {
 //#endregion
 //#region src/primitives/Panorama.tsx
 function bt({ ref: e, angle: t = 0, speed: n = 1, src: r, zeroAnchor: i = 0, onAngleChange: a, onDragEnd: o, onDragStart: s, onImageSizeChange: d, onLoadImageComplete: p, onLoadImageError: m, onLoadImageStart: h, onPositionChange: g, ..._ }) {
-	let v = f(null), y = yt(v), b = et({ src: r }, {
+	let v = f(null), y = yt(v), b = et(r, {
 		onError: m,
 		onLoad: p,
 		onLoadStart: h
@@ -8906,16 +8898,16 @@ var ci = {
 	progress: K.zero,
 	start: K.zero
 }, li = a(ci), ui = a(!0), di = a(!1);
-function fi({ children: e, target: t }) {
-	let [n, r] = p(!0), [i, a] = p(!1), [o, s] = p(ci);
-	return fn(t, (e) => {
-		s(e), r(e.current.y <= e.start.y), a(e.current.y >= e.end.y);
+function fi({ children: e, scrollBottomOffset: t = 0, scrollTopOffset: n = 0, target: r }) {
+	let [i, a] = p(!0), [o, s] = p(!1), [c, l] = p(ci);
+	return fn(r, (e) => {
+		l(e), a(e.current.y <= e.start.y + n), s(e.current.y >= e.end.y - t);
 	}), /* @__PURE__ */ (0, O.jsx)(ui.Provider, {
-		value: n,
+		value: i,
 		children: /* @__PURE__ */ (0, O.jsx)(di.Provider, {
-			value: i,
+			value: o,
 			children: /* @__PURE__ */ (0, O.jsx)(li.Provider, {
-				value: o,
+				value: c,
 				children: e
 			})
 		})
@@ -8938,6 +8930,7 @@ function hi() {
 		start: K.zero
 	};
 }
+process.env.NODE_ENV === "development" && (fi.displayName = "ScrollPositionProvider", li.displayName = "ScrollPositionContext", ui.displayName = "ScrollTopContext", di.displayName = "ScrollBottomContext");
 //#endregion
 //#region src/utils/createKeyDeep.ts
 function gi(e) {