etudes 5.2.0 → 5.3.1

package/components/BurgerButton.js

@@ -1,112 +1,59 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BurgerButtonBar = exports.BurgerButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var Repeat_1 = require("../operators/Repeat");
-var utils_1 = require("../utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { Repeat } from '../operators/Repeat.js';
+import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 /**
  * Three-striped burger button component that transforms into an "X" when
  * selected.
  *
  * @exports BurgerButtonBar Component for each line on the burger button.
  */
-exports.BurgerButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.usesDefaultStyles, usesDefaultStyles = _h === void 0 ? false : _h, _j = _a.width, width = _j === void 0 ? 20 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "usesDefaultStyles", "width", "onActivate", "onDeactivate"]);
-    var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
-    (0, react_1.useEffect)(function () {
+export const BurgerButton = forwardRef(({ children, className, style, height = 20, isActive: externalIsActive = false, isDoubleJointed = false, isLastBarHalfWidth = false, thickness = 2, transitionDuration = 200, usesDefaultStyles = false, width = 20, onActivate, onDeactivate, ...props }, ref) => {
+    const [isActive, setIsActive] = useState(externalIsActive);
+    useEffect(() => {
         if (isActive === externalIsActive)
             return;
         setIsActive(externalIsActive);
     }, [externalIsActive]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isActive) {
-            onActivate === null || onActivate === void 0 ? void 0 : onActivate();
+            onActivate?.();
         }
         else {
-            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
+            onDeactivate?.();
         }
     }, [isActive]);
-    var components = (0, utils_1.asComponentDict)(children, {
-        bar: exports.BurgerButtonBar,
+    const components = asComponentDict(children, {
+        bar: BurgerButtonBar,
     });
-    var fixedClassNames = (0, utils_1.asClassNameDict)({
-        root: (0, clsx_1.default)({
+    const fixedClassNames = asClassNameDict({
+        root: clsx({
             active: isActive,
         }),
-        bar: (0, clsx_1.default)({
+        bar: clsx({
             active: isActive,
         }),
     });
-    var fixedStyles = getFixedStyles({ height: height, width: width, isDoubleJointed: isDoubleJointed, thickness: thickness, isActive: isActive, isLastBarHalfWidth: isLastBarHalfWidth });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
-    return ((0, jsx_runtime_1.jsx)("button", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'burger-button', style: (0, utils_1.styles)(style, fixedStyles.root), onClick: function () { return setIsActive(!isActive); }, children: (0, jsx_runtime_1.jsx)(Repeat_1.Repeat, { count: isDoubleJointed ? 2 : 1, children: function (j) { return ((0, jsx_runtime_1.jsx)("div", { "data-child": 'joint', style: (0, utils_1.styles)(fixedStyles.joint, fixedStyles["joint".concat(j)]), children: (0, jsx_runtime_1.jsx)(Repeat_1.Repeat, { count: 3, children: function (i) {
-                        var _a;
-                        return (0, utils_1.cloneStyledElement)((_a = components.bar) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(exports.BurgerButtonBar, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.bar }), {
-                            'className': (0, clsx_1.default)(fixedClassNames.bar),
-                            'style': (0, utils_1.styles)(fixedStyles.bar, fixedStyles["bar".concat(j).concat(i)]),
-                            'data-index': i,
-                        });
-                    } }) })); } }) })));
+    const fixedStyles = getFixedStyles({ height, width, isDoubleJointed, thickness, isActive, isLastBarHalfWidth });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
+    return (_jsx("button", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'burger-button', style: styles(style, fixedStyles.root), onClick: () => setIsActive(!isActive), children: _jsx(Repeat, { count: isDoubleJointed ? 2 : 1, children: j => (_jsx("div", { "data-child": 'joint', style: styles(fixedStyles.joint, fixedStyles[`joint${j}`]), children: _jsx(Repeat, { count: 3, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerButtonBar, { style: defaultStyles?.bar }), {
+                        'className': clsx(fixedClassNames.bar),
+                        'style': styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
+                        'data-index': i,
+                    }) }) })) }) }));
 });
-Object.defineProperty(exports.BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
-var BurgerButtonBar = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("span", __assign({}, props, { "data-child": 'bar' }));
-};
-exports.BurgerButtonBar = BurgerButtonBar;
-function getFixedStyles(_a) {
-    var _b = _a.height, height = _b === void 0 ? 0 : _b, _c = _a.width, width = _c === void 0 ? 0 : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.thickness, thickness = _e === void 0 ? 0 : _e, _f = _a.isActive, isActive = _f === void 0 ? false : _f, _g = _a.isLastBarHalfWidth, isLastBarHalfWidth = _g === void 0 ? false : _g;
-    return (0, utils_1.asStyleDict)({
+Object.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
+export const BurgerButtonBar = ({ ...props }) => _jsx("span", { ...props, "data-child": 'bar' });
+function getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickness = 0, isActive = false, isLastBarHalfWidth = false }) {
+    return asStyleDict({
         root: {
             background: 'transparent',
             border: 'none',
             display: 'block',
-            height: "".concat(height, "px"),
+            height: `${height}px`,
             outline: 'none',
-            width: "".concat(width, "px"),
+            width: `${width}px`,
         },
         joint: {
             height: '100%',
@@ -122,7 +69,7 @@ function getFixedStyles(_a) {
             top: '0',
         },
         bar: {
-            height: "".concat(thickness, "px"),
+            height: `${thickness}px`,
             margin: '0',
             padding: '0',
             position: 'absolute',
@@ -131,45 +78,45 @@ function getFixedStyles(_a) {
         bar00: {
             left: '0',
             top: '0',
-            transform: isActive ? "translate3d(0, ".concat(height * 0.5 - thickness * 0.5, "px, 0) rotate(45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
             transformOrigin: isDoubleJointed ? 'right center' : 'center',
         },
         bar01: {
             left: '0',
-            top: "".concat(height * 0.5 - thickness * 0.5, "px"),
+            top: `${height * 0.5 - thickness * 0.5}px`,
             transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
             transformOrigin: isDoubleJointed ? 'right center' : 'center',
         },
         bar02: {
             left: '0',
-            top: "".concat(height - thickness, "px"),
-            transform: isActive ? "translate3d(0, ".concat(thickness * 0.5 - height * 0.5, "px, 0) rotate(-45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            top: `${height - thickness}px`,
+            transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
             transformOrigin: isDoubleJointed ? 'right center' : 'center',
-            width: isActive || isDoubleJointed ? '100%' : "".concat(isLastBarHalfWidth ? '50%' : '100%'),
+            width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,
         },
         bar10: {
             left: '0',
             top: '0',
-            transform: isActive ? "translate3d(0, ".concat(height * 0.5 - thickness * 0.5, "px, 0) rotate(-45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
             transformOrigin: 'left center',
         },
         bar11: {
             left: '0',
-            top: "".concat(height * 0.5 - thickness * 0.5, "px"),
+            top: `${height * 0.5 - thickness * 0.5}px`,
             transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',
             transformOrigin: 'left center',
         },
         bar12: {
             left: '0',
-            top: "".concat(height - thickness, "px"),
-            transform: isActive ? "translate3d(0, ".concat(thickness * 0.5 - height * 0.5, "px, 0) rotate(45deg)") : 'translate3d(0, 0, 0) rotate(0deg)',
+            top: `${height - thickness}px`,
+            transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',
             transformOrigin: 'left center',
             width: isLastBarHalfWidth && !isActive ? '0' : '100%',
         },
     });
 }
 function getDefaultStyles() {
-    return (0, utils_1.asStyleDict)({
+    return asStyleDict({
         bar: {
             background: '#fff',
             transitionDuration: '100ms',
@@ -178,4 +125,3 @@ function getDefaultStyles() {
         },
     });
 }
-//# sourceMappingURL=BurgerButton.js.map

package/components/Carousel.js

@@ -1,69 +1,27 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Carousel = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useDragEffect_1 = require("../hooks/useDragEffect");
-var useTimeout_1 = require("../hooks/useTimeout");
-var Each_1 = require("../operators/Each");
-var utils_1 = require("../utils");
-exports.Carousel = (0, react_1.forwardRef)(function (_a, ref) {
-    var style = _a.style, _b = _a.autoAdvanceInterval, autoAdvanceInterval = _b === void 0 ? 0 : _b, _c = _a.index, index = _c === void 0 ? 0 : _c, _d = _a.isDragEnabled, isDragEnabled = _d === void 0 ? true : _d, _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.orientation, orientation = _f === void 0 ? 'horizontal' : _f, _g = _a.tracksItemExposure, tracksItemExposure = _g === void 0 ? false : _g, onAutoAdvancePause = _a.onAutoAdvancePause, onAutoAdvanceResume = _a.onAutoAdvanceResume, onIndexChange = _a.onIndexChange, ItemComponent = _a.ItemComponent, props = __rest(_a, ["style", "autoAdvanceInterval", "index", "isDragEnabled", "items", "orientation", "tracksItemExposure", "onAutoAdvancePause", "onAutoAdvanceResume", "onIndexChange", "ItemComponent"]);
-    var getItemExposures = function () {
-        var viewportElement = viewportRef.current;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Point, Rect } from 'spase';
+import { useDragEffect } from '../hooks/useDragEffect.js';
+import { useTimeout } from '../hooks/useTimeout.js';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, styles } from '../utils/index.js';
+export const Carousel = forwardRef(({ style, autoAdvanceInterval = 0, index = 0, isDragEnabled = true, items = [], orientation = 'horizontal', tracksItemExposure = false, onAutoAdvancePause, onAutoAdvanceResume, onIndexChange, ItemComponent, ...props }, ref) => {
+    const getItemExposures = () => {
+        const viewportElement = viewportRef.current;
         if (!viewportElement)
             return undefined;
-        var exposures = [];
-        for (var i = 0; i < viewportElement.children.length; i++) {
+        const exposures = [];
+        for (let i = 0; i < viewportElement.children.length; i++) {
             exposures.push(getItemExposureAt(i));
         }
         return exposures;
     };
-    var getItemExposureAt = function (idx) {
-        var viewportElement = viewportRef.current;
-        var child = viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.children[idx];
+    const getItemExposureAt = (idx) => {
+        const viewportElement = viewportRef.current;
+        const child = viewportElement?.children[idx];
         if (!child)
             return 0;
-        var intersection = spase_1.Rect.intersecting(child, viewportElement);
+        const intersection = Rect.intersecting(child, viewportElement);
         if (!intersection)
             return 0;
         switch (orientation) {
@@ -72,68 +30,68 @@ exports.Carousel = (0, react_1.forwardRef)(function (_a, ref) {
             case 'vertical':
                 return Math.max(0, Math.min(1, Math.round((intersection.height / viewportElement.clientHeight + Number.EPSILON) * 1000) / 1000));
             default:
-                throw new Error("Unsupported orientation '".concat(orientation, "'"));
+                throw new Error(`Unsupported orientation '${orientation}'`);
         }
     };
-    var handleIndexChange = function (newValue) {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newValue);
+    const handleIndexChange = (newValue) => {
+        onIndexChange?.(newValue);
     };
-    var handlePointerDown = function (event) {
-        pointerDownPositionRef.current = new spase_1.Point([event.clientX, event.clientY]);
+    const handlePointerDown = (event) => {
+        pointerDownPositionRef.current = new Point([event.clientX, event.clientY]);
         setIsPointerDown(true);
     };
-    var handlePointerUp = function (event) {
-        pointerUpPositionRef.current = new spase_1.Point([event.clientX, event.clientY]);
+    const handlePointerUp = (event) => {
+        pointerUpPositionRef.current = new Point([event.clientX, event.clientY]);
         setIsPointerDown(false);
     };
-    var handleClick = function (event) {
-        var downPosition = pointerDownPositionRef.current;
-        var upPosition = pointerUpPositionRef.current;
+    const handleClick = (event) => {
+        const downPosition = pointerDownPositionRef.current;
+        const upPosition = pointerUpPositionRef.current;
         if (!downPosition || !upPosition)
             return;
-        var threshold = 5;
-        var delta = downPosition.subtract(upPosition);
+        const threshold = 5;
+        const delta = downPosition.subtract(upPosition);
         if (Math.abs(delta.x) > threshold || Math.abs(delta.y) > threshold) {
             event.stopPropagation();
         }
         pointerDownPositionRef.current = undefined;
         pointerUpPositionRef.current = undefined;
     };
-    var autoScrollToCurrentIndex = function () {
-        var viewportElement = viewportRef.current;
+    const autoScrollToCurrentIndex = () => {
+        const viewportElement = viewportRef.current;
         if (!viewportElement)
             return;
-        var top = orientation === 'horizontal' ? 0 : viewportElement.clientHeight * index;
-        var left = orientation === 'horizontal' ? viewportElement.clientWidth * index : 0;
-        viewportElement.scrollTo({ top: top, left: left, behavior: 'smooth' });
+        const top = orientation === 'horizontal' ? 0 : viewportElement.clientHeight * index;
+        const left = orientation === 'horizontal' ? viewportElement.clientWidth * index : 0;
+        viewportElement.scrollTo({ top, left, behavior: 'smooth' });
         clearTimeout(autoScrollTimeoutRef.current);
-        autoScrollTimeoutRef.current = setTimeout(function () {
+        autoScrollTimeoutRef.current = setTimeout(() => {
             clearTimeout(autoScrollTimeoutRef.current);
             autoScrollTimeoutRef.current = undefined;
         }, autoScrollTimeoutMs);
     };
-    var prevIndexRef = (0, react_1.useRef)();
-    var viewportRef = (0, react_1.useRef)(null);
-    var pointerDownPositionRef = (0, react_1.useRef)();
-    var pointerUpPositionRef = (0, react_1.useRef)();
-    var _h = __read((0, react_1.useState)(getItemExposures()), 2), exposures = _h[0], setExposures = _h[1];
-    var autoScrollTimeoutRef = (0, react_1.useRef)();
-    var autoScrollTimeoutMs = 1000;
-    var _j = __read((0, react_1.useState)(false), 2), isPointerDown = _j[0], setIsPointerDown = _j[1];
-    (0, react_1.useEffect)(function () {
-        var viewportElement = viewportRef.current;
+    const prevIndexRef = useRef();
+    const viewportRef = useRef(null);
+    const pointerDownPositionRef = useRef();
+    const pointerUpPositionRef = useRef();
+    const [exposures, setExposures] = useState(getItemExposures());
+    const autoScrollTimeoutRef = useRef();
+    const autoScrollTimeoutMs = 1000;
+    const [isPointerDown, setIsPointerDown] = useState(false);
+    useEffect(() => {
+        const viewportElement = viewportRef.current;
         if (!viewportElement)
             return;
-        var scrollHandler = function () {
+        const scrollHandler = () => {
             if (tracksItemExposure) {
                 setExposures(getItemExposures());
             }
             if (autoScrollTimeoutRef.current !== undefined)
                 return;
-            var newIndex = orientation === 'horizontal'
+            const newIndex = orientation === 'horizontal'
                 ? Math.round(viewportElement.scrollLeft / viewportElement.clientWidth)
                 : Math.round(viewportElement.scrollTop / viewportElement.clientHeight);
-            var clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));
+            const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));
             if (clampedIndex === index)
                 return;
             // Set previous index ref here to avoid the side-effect of handling index
@@ -142,13 +100,13 @@ exports.Carousel = (0, react_1.forwardRef)(function (_a, ref) {
             handleIndexChange(clampedIndex);
         };
         viewportElement.addEventListener('scroll', scrollHandler);
-        return function () {
+        return () => {
             viewportElement.removeEventListener('scroll', scrollHandler);
         };
     }, [index, orientation]);
-    (0, react_1.useEffect)(function () {
-        var isInitialRender = prevIndexRef.current === undefined;
-        var isIndexModifiedFromManualScrolling = prevIndexRef.current === index;
+    useEffect(() => {
+        const isInitialRender = prevIndexRef.current === undefined;
+        const isIndexModifiedFromManualScrolling = prevIndexRef.current === index;
         if (isIndexModifiedFromManualScrolling)
             return;
         prevIndexRef.current = index;
@@ -157,62 +115,69 @@ exports.Carousel = (0, react_1.forwardRef)(function (_a, ref) {
         handleIndexChange(index);
         autoScrollToCurrentIndex();
     }, [index, orientation]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (autoAdvanceInterval <= 0)
             return;
         if (isPointerDown) {
-            onAutoAdvancePause === null || onAutoAdvancePause === void 0 ? void 0 : onAutoAdvancePause();
+            onAutoAdvancePause?.();
         }
         else {
-            onAutoAdvanceResume === null || onAutoAdvanceResume === void 0 ? void 0 : onAutoAdvanceResume();
+            onAutoAdvanceResume?.();
         }
     }, [isPointerDown]);
-    (0, useDragEffect_1.useDragEffect)(viewportRef, {
+    useDragEffect(viewportRef, {
         isEnabled: isDragEnabled && items.length > 1,
-        onDragMove: function (displacement) {
+        onDragMove: (displacement) => {
             switch (orientation) {
                 case 'horizontal':
-                    requestAnimationFrame(function () {
+                    requestAnimationFrame(() => {
                         if (!viewportRef.current)
                             return;
                         viewportRef.current.scrollLeft += displacement.x * 1.5;
                     });
                     break;
                 case 'vertical':
-                    requestAnimationFrame(function () {
+                    requestAnimationFrame(() => {
                         if (!viewportRef.current)
                             return;
                         viewportRef.current.scrollTop += displacement.y * 1.5;
                     });
                     break;
                 default:
-                    throw Error("Unsupported orientation '".concat(orientation, "'"));
+                    throw Error(`Unsupported orientation '${orientation}'`);
             }
         },
     });
-    (0, useTimeout_1.useTimeout)(function () { return handleIndexChange((index + items.length + 1) % items.length); }, (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval, [isPointerDown, index, items.length]);
-    var fixedStyles = getFixedStyles({ isPointerDown: isPointerDown, orientation: orientation });
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-component": 'carousel', style: (0, utils_1.styles)(style, fixedStyles.root), onClick: function (event) { return handleClick(event); }, onPointerDown: function (event) { return handlePointerDown(event); }, onPointerLeave: function (event) { return handlePointerUp(event); }, onPointerUp: function (event) { return handlePointerUp(event); }, children: (0, jsx_runtime_1.jsx)("div", { ref: viewportRef, "data-child": 'viewport', style: (0, utils_1.styles)(fixedStyles.viewport), children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: items, children: function (_a, idx) {
-                    var itemStyle = _a.style, itemProps = __rest(_a, ["style"]);
-                    return ((0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.styles)(fixedStyles.itemContainer), children: (0, jsx_runtime_1.jsx)(ItemComponent, __assign({ "data-child": 'item', exposure: tracksItemExposure ? exposures === null || exposures === void 0 ? void 0 : exposures[idx] : undefined, style: (0, utils_1.styles)(itemStyle, fixedStyles.item) }, itemProps)) }));
-                } }) }) })));
+    useTimeout(() => handleIndexChange((index + items.length + 1) % items.length), (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval, [isPointerDown, index, items.length]);
+    const fixedStyles = getFixedStyles({ isPointerDown, orientation });
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'carousel', style: styles(style, fixedStyles.root), onClick: event => handleClick(event), onPointerDown: event => handlePointerDown(event), onPointerLeave: event => handlePointerUp(event), onPointerUp: event => handlePointerUp(event), children: _jsx("div", { ref: viewportRef, "data-child": 'viewport', style: styles(fixedStyles.viewport), children: _jsx(Each, { in: items, children: ({ style: itemStyle, ...itemProps }, idx) => (_jsx("div", { style: styles(fixedStyles.itemContainer), children: _jsx(ItemComponent, { "data-child": 'item', exposure: tracksItemExposure ? exposures?.[idx] : undefined, style: styles(itemStyle, fixedStyles.item), ...itemProps }) })) }) }) }));
 });
-Object.defineProperty(exports.Carousel, 'displayName', { value: 'Carousel', writable: false });
-function getFixedStyles(_a) {
-    var _b = _a.isPointerDown, isPointerDown = _b === void 0 ? false : _b, _c = _a.orientation, orientation = _c === void 0 ? 'horizontal' : _c;
-    return (0, utils_1.asStyleDict)({
+Object.defineProperty(Carousel, 'displayName', { value: 'Carousel', writable: false });
+function getFixedStyles({ isPointerDown = false, orientation = 'horizontal' }) {
+    return asStyleDict({
         root: {},
-        viewport: __assign({ alignItems: 'center', display: 'flex', height: '100%', userSelect: isPointerDown ? 'none' : 'auto', justifyContent: 'flex-start', scrollBehavior: isPointerDown ? 'auto' : 'smooth', scrollSnapStop: isPointerDown ? 'unset' : 'always', WebkitOverflowScrolling: 'touch', width: '100%' }, orientation === 'horizontal' ? {
-            flexDirection: 'row',
-            overflowX: 'scroll',
-            overflowY: 'hidden',
-            scrollSnapType: isPointerDown ? 'none' : 'x mandatory',
-        } : {
-            flexDirection: 'column',
-            overflowX: 'hidden',
-            overflowY: 'scroll',
-            scrollSnapType: isPointerDown ? 'none' : 'y mandatory',
-        }),
+        viewport: {
+            alignItems: 'center',
+            display: 'flex',
+            height: '100%',
+            userSelect: isPointerDown ? 'none' : 'auto',
+            justifyContent: 'flex-start',
+            scrollBehavior: isPointerDown ? 'auto' : 'smooth',
+            scrollSnapStop: isPointerDown ? 'unset' : 'always',
+            WebkitOverflowScrolling: 'touch',
+            width: '100%',
+            ...orientation === 'horizontal' ? {
+                flexDirection: 'row',
+                overflowX: 'scroll',
+                overflowY: 'hidden',
+                scrollSnapType: isPointerDown ? 'none' : 'x mandatory',
+            } : {
+                flexDirection: 'column',
+                overflowX: 'hidden',
+                overflowY: 'scroll',
+                scrollSnapType: isPointerDown ? 'none' : 'y mandatory',
+            },
+        },
         itemContainer: {
             height: '100%',
             overflow: 'hidden',
@@ -227,4 +192,3 @@ function getFixedStyles(_a) {
         },
     });
 }
-//# sourceMappingURL=Carousel.js.map