etudes 5.2.0 → 5.3.0

package/components/TextField.js

@@ -1,57 +1,20 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var usePrevious_1 = require("../hooks/usePrevious");
-exports.TextField = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.emptyValue, emptyValue = _b === void 0 ? '' : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, placeholder = _a.placeholder, externalValue = _a.value, formatter = _a.formatter, onFocus = _a.onFocus, onUnfocus = _a.onUnfocus, onValueChange = _a.onValueChange, props = __rest(_a, ["emptyValue", "isDisabled", "placeholder", "value", "formatter", "onFocus", "onUnfocus", "onValueChange"]);
-    var handleValueChange = function (newValue) {
-        var _a;
-        var formatted = (newValue !== emptyValue) ? ((_a = formatter === null || formatter === void 0 ? void 0 : formatter(value, newValue)) !== null && _a !== void 0 ? _a : newValue) : emptyValue;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { usePrevious } from '../hooks/usePrevious.js';
+export const TextField = forwardRef(({ emptyValue = '', isDisabled = false, placeholder, value: externalValue, formatter, onFocus, onUnfocus, onValueChange, ...props }, ref) => {
+    const handleValueChange = (newValue) => {
+        const formatted = (newValue !== emptyValue) ? (formatter?.(value, newValue) ?? newValue) : emptyValue;
         if (formatted === value)
             return;
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatted);
+        onValueChange?.(formatted);
     };
-    var value = externalValue !== null && externalValue !== void 0 ? externalValue : emptyValue;
-    var prevValue = (0, usePrevious_1.usePrevious)(value);
-    (0, react_1.useEffect)(function () {
+    const value = externalValue ?? emptyValue;
+    const prevValue = usePrevious(value);
+    useEffect(() => {
         if (prevValue === undefined)
             return;
         handleValueChange(value);
     }, [value]);
-    return ((0, jsx_runtime_1.jsx)("input", __assign({}, props, { ref: ref, "data-component": 'text-field', disabled: isDisabled, placeholder: placeholder, type: 'text', value: value, onBlur: function (_a) {
-            var target = _a.target;
-            return onUnfocus === null || onUnfocus === void 0 ? void 0 : onUnfocus(target.value);
-        }, onChange: function (_a) {
-            var target = _a.target;
-            return handleValueChange(target.value);
-        }, onFocus: function (_a) {
-            var target = _a.target;
-            return onFocus === null || onFocus === void 0 ? void 0 : onFocus(target.value);
-        } })));
+    return (_jsx("input", { ...props, ref: ref, "data-component": 'text-field', disabled: isDisabled, placeholder: placeholder, type: 'text', value: value, onBlur: ({ target }) => onUnfocus?.(target.value), onChange: ({ target }) => handleValueChange(target.value), onFocus: ({ target }) => onFocus?.(target.value) }));
 });
-Object.defineProperty(exports.TextField, 'displayName', { value: 'TextField', writable: false });
-//# sourceMappingURL=TextField.js.map
+Object.defineProperty(TextField, 'displayName', { value: 'TextField', writable: false });

package/components/Video.js

@@ -1,44 +1,17 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Video = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useVideoSize_1 = require("../hooks/useVideoSize");
-exports.Video = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var _c = _a.autoLoop, autoLoop = _c === void 0 ? true : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, _e = _a.hasControls, hasControls = _e === void 0 ? false : _e, _f = _a.isMuted, isMuted = _f === void 0 ? true : _f, _g = _a.playsInline, playsInline = _g === void 0 ? true : _g, posterSrc = _a.posterSrc, src = _a.src, onCanPlay = _a.onCanPlay, onEnd = _a.onEnd, onFullscreenChange = _a.onFullscreenChange, onLoadMetadata = _a.onLoadMetadata, onLoadMetadataComplete = _a.onLoadMetadataComplete, onLoadMetadataError = _a.onLoadMetadataError, onPause = _a.onPause, onPlay = _a.onPlay, onSizeChange = _a.onSizeChange, props = __rest(_a, ["autoLoop", "autoPlay", "hasControls", "isMuted", "playsInline", "posterSrc", "src", "onCanPlay", "onEnd", "onFullscreenChange", "onLoadMetadata", "onLoadMetadataComplete", "onLoadMetadataError", "onPause", "onPlay", "onSizeChange"]);
-    var localRef = (0, react_1.useRef)(null);
-    var videoRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
-    var size = (0, useVideoSize_1.useVideoSize)({
-        src: src,
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { useVideoSize } from '../hooks/useVideoSize.js';
+export const Video = forwardRef(({ autoLoop = true, autoPlay = true, hasControls = false, isMuted = true, playsInline = true, posterSrc, src, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }, ref) => {
+    const localRef = useRef(null);
+    const videoRef = ref ?? localRef;
+    const size = useVideoSize({
+        src,
     }, {
         onLoadStart: onLoadMetadata,
         onLoadComplete: onLoadMetadataComplete,
         onLoadError: onLoadMetadataError,
     });
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (!videoRef.current)
             return;
         videoRef.current.muted = isMuted;
@@ -46,50 +19,47 @@ exports.Video = (0, react_1.forwardRef)(function (_a, ref) {
         videoRef.current.addEventListener('webkitfullscreenchange', fullscreenChangeHandler);
         videoRef.current.addEventListener('mozfullscreenchange', fullscreenChangeHandler);
         videoRef.current.addEventListener('fullscreenchange', fullscreenChangeHandler);
-        return function () {
-            var _a, _b, _c;
+        return () => {
             pause();
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mozfullscreenchange', fullscreenChangeHandler);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('fullscreenchange', fullscreenChangeHandler);
+            videoRef.current?.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler);
+            videoRef.current?.removeEventListener('mozfullscreenchange', fullscreenChangeHandler);
+            videoRef.current?.removeEventListener('fullscreenchange', fullscreenChangeHandler);
         };
     }, [src]);
-    (0, react_1.useEffect)(function () {
-        onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(size);
+    useEffect(() => {
+        onSizeChange?.(size);
     }, [size]);
-    var fullscreenChangeHandler = function (event) {
-        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+    const fullscreenChangeHandler = (event) => {
+        const isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
         if (isFullscreen === undefined)
             return;
-        onFullscreenChange === null || onFullscreenChange === void 0 ? void 0 : onFullscreenChange(isFullscreen);
+        onFullscreenChange?.(isFullscreen);
     };
-    var canPlayHandler = function (event) {
-        var _a, _b;
-        if (autoPlay && ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused) !== null && _b !== void 0 ? _b : false)) {
+    const canPlayHandler = event => {
+        if (autoPlay && (videoRef.current?.paused ?? false)) {
             play();
         }
-        onCanPlay === null || onCanPlay === void 0 ? void 0 : onCanPlay();
+        onCanPlay?.();
     };
-    var playHandler = function (event) {
-        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+    const playHandler = event => {
+        onPlay?.();
     };
-    var pauseHandler = function (event) {
-        onPause === null || onPause === void 0 ? void 0 : onPause();
+    const pauseHandler = event => {
+        onPause?.();
     };
-    var endHandler = function (event) {
-        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+    const endHandler = event => {
+        onEnd?.();
     };
-    var play = function () {
+    const play = () => {
         if (!videoRef.current)
             return;
         videoRef.current.play();
     };
-    var pause = function () {
+    const pause = () => {
         if (!videoRef.current)
             return;
         videoRef.current.pause();
     };
-    return ((0, jsx_runtime_1.jsx)("video", __assign({}, props, { ref: ref, autoPlay: autoPlay, controls: hasControls, "data-component": 'video', loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, children: (0, jsx_runtime_1.jsx)("source", { src: src }) })));
+    return (_jsx("video", { ...props, ref: ref, autoPlay: autoPlay, controls: hasControls, "data-component": 'video', loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler, children: _jsx("source", { src: src }) }));
 });
-Object.defineProperty(exports.Video, 'displayName', { value: 'Video', writable: false });
-//# sourceMappingURL=Video.js.map
+Object.defineProperty(Video, 'displayName', { value: 'Video', writable: false });

package/components/WithTooltip.js

@@ -1,55 +1,37 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithTooltip = WithTooltip;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useRect_1 = require("../hooks/useRect");
-var useViewportSize_1 = require("../hooks/useViewportSize");
-var ExtractChild_1 = require("../operators/ExtractChild");
-var utils_1 = require("../utils");
-function WithTooltip(_a) {
-    var children = _a.children, className = _a.className, style = _a.style, _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, _d = _a.gap, gap = _d === void 0 ? 5 : _d, hint = _a.hint, _e = _a.maxTextWidth, maxTextWidth = _e === void 0 ? 200 : _e, _f = _a.threshold, threshold = _f === void 0 ? 100 : _f;
-    var createDialog = function () {
-        var dialog = document.createElement('div');
-        var dialogStyle = (0, utils_1.styles)(style, fixedStyles.dialog);
-        dialog.className = (0, clsx_1.default)(className);
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+import { Rect, Size } from 'spase';
+import { useRect } from '../hooks/useRect.js';
+import { useViewportSize } from '../hooks/useViewportSize.js';
+import { ExtractChild } from '../operators/ExtractChild.js';
+import { asStyleDict, styles } from '../utils/index.js';
+export function WithTooltip({ children, className, style, arrowHeight = 8, backgroundColor = '#000', gap = 5, hint, maxTextWidth = 200, threshold = 100, }) {
+    const createDialog = () => {
+        const dialog = document.createElement('div');
+        const dialogStyle = styles(style, fixedStyles.dialog);
+        dialog.className = clsx(className);
         dialog.setAttribute('data-component', 'tool-tip');
-        Object.keys(dialogStyle).forEach(function (rule) { return dialog.style[rule] = dialogStyle[rule]; });
-        var arrow = document.createElement('div');
-        Object.keys(fixedStyles.arrow).forEach(function (rule) { return arrow.style[rule] = fixedStyles.arrow[rule]; });
-        var content = document.createElement('div');
+        Object.keys(dialogStyle).forEach(rule => dialog.style[rule] = dialogStyle[rule]);
+        const arrow = document.createElement('div');
+        Object.keys(fixedStyles.arrow).forEach(rule => arrow.style[rule] = fixedStyles.arrow[rule]);
+        const content = document.createElement('div');
         content.innerText = hint;
-        Object.keys(fixedStyles.content).forEach(function (rule) { return content.style[rule] = fixedStyles.content[rule]; });
+        Object.keys(fixedStyles.content).forEach(rule => content.style[rule] = fixedStyles.content[rule]);
         dialog.appendChild(arrow);
         dialog.appendChild(content);
         return dialog;
     };
-    var computeAlignment = function () {
+    const computeAlignment = () => {
         if (!rootRef.current)
             return 'bc';
-        var vrect = spase_1.Rect.fromViewport();
-        var irect = spase_1.Rect.intersecting(rootRef.current);
+        const vrect = Rect.fromViewport();
+        const irect = Rect.intersecting(rootRef.current);
         if (irect) {
-            var leftBound = irect.left - vrect.left < threshold;
-            var rightBound = vrect.right - irect.right < threshold;
-            var topBound = irect.top - vrect.top < threshold;
-            var bottomBound = vrect.bottom - irect.bottom < threshold;
+            const leftBound = irect.left - vrect.left < threshold;
+            const rightBound = vrect.right - irect.right < threshold;
+            const topBound = irect.top - vrect.top < threshold;
+            const bottomBound = vrect.bottom - irect.bottom < threshold;
             if (leftBound && topBound)
                 return 'br';
             if (leftBound && bottomBound)
@@ -67,11 +49,11 @@ function WithTooltip(_a) {
         }
         return 'bc';
     };
-    var computeTextSize = function () {
+    const computeTextSize = () => {
         if (!dialogRef.current)
-            return new spase_1.Size();
-        var computedStyle = window.getComputedStyle(dialogRef.current);
-        var div = document.createElement('div');
+            return new Size();
+        const computedStyle = window.getComputedStyle(dialogRef.current);
+        const div = document.createElement('div');
         div.innerText = hint;
         div.style.fontFamily = computedStyle.getPropertyValue('font-family');
         div.style.fontSize = computedStyle.getPropertyValue('font-size');
@@ -85,73 +67,71 @@ function WithTooltip(_a) {
         div.style.whiteSpace = 'pre';
         document.body.appendChild(div);
         // Add 1px as buffer to mitigate precision discrepancies.
-        var width = div.clientWidth + 1;
-        var height = div.clientHeight + 1;
+        const width = div.clientWidth + 1;
+        const height = div.clientHeight + 1;
         document.body.removeChild(div);
-        return new spase_1.Size([width, height]);
+        return new Size([width, height]);
     };
-    var mouseEnterHandler = function (event) {
+    const mouseEnterHandler = (event) => {
         if (!dialogRef.current)
             return;
         dialogRef.current.style.opacity = '1';
     };
-    var mouseLeaveHandler = function (event) {
+    const mouseLeaveHandler = (event) => {
         if (!dialogRef.current)
             return;
         dialogRef.current.style.opacity = '0';
     };
-    var rootRef = (0, react_1.useRef)(null);
-    var dialogRef = (0, react_1.useRef)();
-    var rect = (0, useRect_1.useRect)(rootRef);
-    var viewportSize = (0, useViewportSize_1.useViewportSize)();
-    var alignment = computeAlignment();
-    var textSize = computeTextSize();
-    var fixedStyles = getFixedStyles({ rect: rect, arrowHeight: arrowHeight, alignment: alignment, backgroundColor: backgroundColor, maxTextWidth: maxTextWidth, textSize: textSize, gap: gap });
-    (0, react_1.useEffect)(function () {
-        var _a;
-        var dialogNode = createDialog();
-        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dialogNode);
+    const rootRef = useRef(null);
+    const dialogRef = useRef();
+    const rect = useRect(rootRef);
+    const viewportSize = useViewportSize();
+    const alignment = computeAlignment();
+    const textSize = computeTextSize();
+    const fixedStyles = getFixedStyles({ rect, arrowHeight, alignment, backgroundColor, maxTextWidth, textSize, gap });
+    useEffect(() => {
+        const dialogNode = createDialog();
+        rootRef.current?.appendChild(dialogNode);
         dialogRef.current = dialogNode;
-        return function () {
-            var _a;
-            (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.removeChild(dialogNode);
+        return () => {
+            rootRef.current?.removeChild(dialogNode);
         };
     }, [rect, viewportSize]);
-    return ((0, jsx_runtime_1.jsx)(ExtractChild_1.ExtractChild, { ref: rootRef, onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler, children: children }));
+    return (_jsx(ExtractChild, { ref: rootRef, onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler, children: children }));
 }
 function makeDisplacementStyle(alignment, arrowHeight, gap) {
     switch (alignment) {
         case 'tl': return {
-            top: "".concat(-arrowHeight, "px"),
-            left: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+            top: `${-arrowHeight}px`,
+            left: `calc(50% + ${arrowHeight * 2.5}px)`,
         };
         case 'tc': return {
-            top: "".concat(-arrowHeight, "px"),
+            top: `${-arrowHeight}px`,
             left: '50%',
         };
         case 'tr': return {
-            top: "".concat(-arrowHeight, "px"),
-            right: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+            top: `${-arrowHeight}px`,
+            right: `calc(50% + ${arrowHeight * 2.5}px)`,
         };
         case 'cl': return {
             top: '50%',
-            left: "".concat(-arrowHeight, "px"),
+            left: `${-arrowHeight}px`,
         };
         case 'cr': return {
             top: '50%',
-            right: "".concat(-arrowHeight, "px"),
+            right: `${-arrowHeight}px`,
         };
         case 'bl': return {
-            bottom: "".concat(-arrowHeight, "px"),
-            left: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+            bottom: `${-arrowHeight}px`,
+            left: `calc(50% + ${arrowHeight * 2.5}px)`,
         };
         case 'bc': return {
-            bottom: "".concat(-arrowHeight, "px"),
+            bottom: `${-arrowHeight}px`,
             left: '50%',
         };
         case 'br': return {
-            bottom: "".concat(-arrowHeight, "px"),
-            right: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+            bottom: `${-arrowHeight}px`,
+            right: `calc(50% + ${arrowHeight * 2.5}px)`,
         };
         default: return {};
     }
@@ -159,28 +139,28 @@ function makeDisplacementStyle(alignment, arrowHeight, gap) {
 function makeContentPositionStyle(alignment, arrowHeight, gap) {
     switch (alignment) {
         case 'tl': return {
-            transform: "translate3d(calc(-100% - ".concat(gap, "px), calc(-100% - ").concat(gap, "px), 0)"),
+            transform: `translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0)`,
         };
         case 'tc': return {
-            transform: "translate3d(-50%, calc(-100% - ".concat(gap, "px), 0)"),
+            transform: `translate3d(-50%, calc(-100% - ${gap}px), 0)`,
         };
         case 'tr': return {
-            transform: "translate3d(calc(100% + ".concat(gap, "px), calc(-100% - ").concat(gap, "px), 0)"),
+            transform: `translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0)`,
         };
         case 'cl': return {
-            transform: "translate3d(calc(-100% - ".concat(gap, "px), -50%, 0)"),
+            transform: `translate3d(calc(-100% - ${gap}px), -50%, 0)`,
         };
         case 'cr': return {
-            transform: "translate3d(calc(100% + ".concat(gap, "px), -50%, 0)"),
+            transform: `translate3d(calc(100% + ${gap}px), -50%, 0)`,
         };
         case 'bl': return {
-            transform: "translate3d(calc(-100% - ".concat(gap, "px), calc(100% + ").concat(gap, "px), 0)"),
+            transform: `translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0)`,
         };
         case 'bc': return {
-            transform: "translate3d(-50%, calc(100% + ".concat(gap, "px), 0)"),
+            transform: `translate3d(-50%, calc(100% + ${gap}px), 0)`,
         };
         case 'br': return {
-            transform: "translate3d(calc(100% + ".concat(gap, "px), calc(100% + ").concat(gap, "px), 0)"),
+            transform: `translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0)`,
         };
         default: return {};
     }
@@ -188,57 +168,83 @@ function makeContentPositionStyle(alignment, arrowHeight, gap) {
 function makeArrowPositionStyle(alignment, arrowHeight, gap, color) {
     switch (alignment) {
         case 'tl': return {
-            borderColor: "".concat(color, " transparent transparent transparent"),
-            transform: "translate3d(calc(0% - ".concat(gap, "px - ").concat(arrowHeight * 3, "px), calc(0% - ").concat(gap, "px), 0)"),
+            borderColor: `${color} transparent transparent transparent`,
+            transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% - ${gap}px), 0)`,
         };
         case 'tc': return {
-            borderColor: "".concat(color, " transparent transparent transparent"),
-            transform: "translate3d(-50%, calc(0% - ".concat(gap, "px), 0)"),
+            borderColor: `${color} transparent transparent transparent`,
+            transform: `translate3d(-50%, calc(0% - ${gap}px), 0)`,
         };
         case 'tr': return {
-            borderColor: "".concat(color, " transparent transparent transparent"),
-            transform: "translate3d(calc(100% + ".concat(gap, "px + ").concat(arrowHeight, "px), calc(0% - ").concat(gap, "px), 0)"),
+            borderColor: `${color} transparent transparent transparent`,
+            transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0)`,
         };
         case 'cl': return {
-            borderColor: "transparent transparent transparent ".concat(color),
-            transform: "translate3d(calc(0% - ".concat(gap, "px), -50%, 0)"),
+            borderColor: `transparent transparent transparent ${color}`,
+            transform: `translate3d(calc(0% - ${gap}px), -50%, 0)`,
         };
         case 'cr': return {
-            borderColor: "transparent ".concat(color, " transparent transparent"),
-            transform: "translate3d(calc(0% + ".concat(gap, "px), -50%, 0)"),
+            borderColor: `transparent ${color} transparent transparent`,
+            transform: `translate3d(calc(0% + ${gap}px), -50%, 0)`,
         };
         case 'bl': return {
-            borderColor: "transparent transparent ".concat(color, " transparent"),
-            transform: "translate3d(calc(0% - ".concat(gap, "px - ").concat(arrowHeight * 3, "px), calc(0% + ").concat(gap, "px), 0)"),
+            borderColor: `transparent transparent ${color} transparent`,
+            transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% + ${gap}px), 0)`,
         };
         case 'bc': return {
-            borderColor: "transparent transparent ".concat(color, " transparent"),
-            transform: "translate3d(-50%, calc(0% + ".concat(gap, "px), 0)"),
+            borderColor: `transparent transparent ${color} transparent`,
+            transform: `translate3d(-50%, calc(0% + ${gap}px), 0)`,
         };
         case 'br': return {
-            borderColor: "transparent transparent ".concat(color, " transparent"),
-            transform: "translate3d(calc(100% + ".concat(gap, "px + ").concat(arrowHeight, "px), calc(0% + ").concat(gap, "px), 0)"),
+            borderColor: `transparent transparent ${color} transparent`,
+            transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0)`,
         };
         default: return {};
     }
 }
-function getFixedStyles(_a) {
-    var _b = _a.rect, rect = _b === void 0 ? new spase_1.Rect() : _b, _c = _a.arrowHeight, arrowHeight = _c === void 0 ? 0 : _c, _d = _a.alignment, alignment = _d === void 0 ? 'tl' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? '' : _e, _f = _a.maxTextWidth, maxTextWidth = _f === void 0 ? 0 : _f, _g = _a.textSize, textSize = _g === void 0 ? new spase_1.Size() : _g, _h = _a.gap, gap = _h === void 0 ? 0 : _h;
-    return (0, utils_1.asStyleDict)({
+function getFixedStyles({ rect = new Rect(), arrowHeight = 0, alignment = 'tl', backgroundColor = '', maxTextWidth = 0, textSize = new Size(), gap = 0 }) {
+    return asStyleDict({
         dialog: {
             background: 'none',
             boxSizing: 'border-box',
-            height: "".concat(rect.size.height, "px"),
+            height: `${rect.size.height}px`,
             left: '0',
             margin: '0',
             opacity: '0',
             position: 'absolute',
             top: '0',
-            width: "".concat(rect.size.width, "px"),
+            width: `${rect.size.width}px`,
             zIndex: '10000',
         },
-        arrow: __assign(__assign({ borderStyle: 'solid', borderWidth: "".concat(arrowHeight, "px"), height: '0', pointerEvents: 'none', position: 'absolute', width: '0' }, makeDisplacementStyle(alignment, arrowHeight, gap)), makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor)),
-        content: __assign(__assign({ background: backgroundColor, boxSizing: 'content-box', color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', letterSpacing: 'inherit', lineHeight: 'inherit', maxWidth: "".concat(maxTextWidth, "px"), overflow: 'hidden', padding: 'inherit', pointerEvents: 'none', position: 'absolute', textAlign: 'inherit', transition: 'inherit', width: textSize.width > 0 ? "".concat(textSize.width, "px") : 'auto' }, makeDisplacementStyle(alignment, arrowHeight, gap)), makeContentPositionStyle(alignment, arrowHeight, gap)),
+        arrow: {
+            borderStyle: 'solid',
+            borderWidth: `${arrowHeight}px`,
+            height: '0',
+            pointerEvents: 'none',
+            position: 'absolute',
+            width: '0',
+            ...makeDisplacementStyle(alignment, arrowHeight, gap),
+            ...makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor),
+        },
+        content: {
+            background: backgroundColor,
+            boxSizing: 'content-box',
+            color: 'inherit',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+            maxWidth: `${maxTextWidth}px`,
+            overflow: 'hidden',
+            padding: 'inherit',
+            pointerEvents: 'none',
+            position: 'absolute',
+            textAlign: 'inherit',
+            transition: 'inherit',
+            width: textSize.width > 0 ? `${textSize.width}px` : 'auto',
+            ...makeDisplacementStyle(alignment, arrowHeight, gap),
+            ...makeContentPositionStyle(alignment, arrowHeight, gap),
+        },
     });
 }
-//# sourceMappingURL=WithTooltip.js.map

package/components/index.js

@@ -0,0 +1,24 @@
+export * from './Accordion.js';
+export * from './BurgerButton.js';
+export * from './Carousel.js';
+export * from './Collection.js';
+export * from './Counter.js';
+export * from './CoverImage.js';
+export * from './CoverVideo.js';
+export * from './DebugConsole.js';
+export * from './Dial.js';
+export * from './Dropdown.js';
+export * from './FlatSVG.js';
+export * from './Image.js';
+export * from './MasonryGrid.js';
+export * from './Panorama.js';
+export * from './PanoramaSlider.js';
+export * from './RangeSlider.js';
+export * from './RotatingGallery.js';
+export * from './SelectableButton.js';
+export * from './Slider.js';
+export * from './StepwiseSlider.js';
+export * from './SwipeContainer.js';
+export * from './TextField.js';
+export * from './Video.js';
+export * from './WithTooltip.js';

package/hooks/index.js

@@ -0,0 +1,17 @@
+export * from './useClickOutsideEffect.js';
+export * from './useDragEffect.js';
+export * from './useDragValueEffect.js';
+export * from './useImageSize.js';
+export * from './useInterval.js';
+export * from './useLoadImageEffect.js';
+export * from './useLoadVideoMetadataEffect.js';
+export * from './useMounted.js';
+export * from './usePrevious.js';
+export * from './useRect.js';
+export * from './useResizeEffect.js';
+export * from './useScrollPositionEffect.js';
+export * from './useSearchParamState.js';
+export * from './useSize.js';
+export * from './useTimeout.js';
+export * from './useVideoSize.js';
+export * from './useViewportSize.js';