@homecode/ui 5.4.0 → 5.5.0

package/dist/esm/src/components/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,348 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Popup } from '../Popup/Popup.js';
+import { ProgressCircular } from '../ProgressCircular/ProgressCircular.js';
+import { Slider } from '../Slider/Slider.js';
+import useEvent from '../../hooks/useEvent.js';
+import debounce from '../../tools/debounce.js';
+import S from './VideoPlayer.styl.js';
+import { TIME_PERSIST_DEBOUNCE_MS, saveStorage, formatTime, VOLUME_POPUP_HIDE_MS, clamp, leadingDebounce, isEditableTarget, loadStorage, getBufferedPercent, DOUBLE_TAP_MS, getStorageKey, timeToProgressPct, KEYBOARD_DEBOUNCE_MS, getSeekDelta, VOLUME_STEP } from './VideoPlayer.helpers.js';
+
+let activePlayerId = null;
+function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, muted = false, loop = false, className, onPlayChange, onTimeUpdate, }) {
+    const rootRef = useRef(null);
+    const videoRef = useRef(null);
+    const barRef = useRef(null);
+    const progressInputRef = useRef(null);
+    const currentTimeLabelRef = useRef(null);
+    const isSeekingRef = useRef(false);
+    const durationRef = useRef(0);
+    const rafRef = useRef(0);
+    const volumeKeepOpenRef = useRef(false);
+    const volumeHideTimerRef = useRef(0);
+    const lastTapRef = useRef(0);
+    const singleClickTimerRef = useRef(0);
+    const playerId = useMemo(() => storageKey ?? src ?? Math.random().toString(36).slice(2), [storageKey, src]);
+    const lsKey = getStorageKey(src, storageKey);
+    const [isReady, setIsReady] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [loadProgress, setLoadProgress] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isVolumePopupOpen, setIsVolumePopupOpen] = useState(false);
+    const showControlsBar = !isPlaying || isHovered || isVolumePopupOpen;
+    const persistTime = useMemo(() => debounce((time) => {
+        saveStorage(lsKey, { currentTime: time });
+    }, TIME_PERSIST_DEBOUNCE_MS), [lsKey]);
+    const persistVolume = useCallback((nextVolume) => {
+        saveStorage(lsKey, { volume: nextVolume });
+    }, [lsKey]);
+    const syncProgressDom = useCallback((time) => {
+        const duration = durationRef.current;
+        const input = progressInputRef.current;
+        const label = currentTimeLabelRef.current;
+        const pct = timeToProgressPct(time, duration);
+        if (input) {
+            if (input.valueAsNumber !== time)
+                input.value = String(time);
+            input.style.setProperty('--progress', pct);
+        }
+        if (label)
+            label.textContent = formatTime(time);
+    }, []);
+    const claimKeyboard = useCallback(() => {
+        activePlayerId = playerId;
+    }, [playerId]);
+    const clearVolumeHideTimer = useCallback(() => {
+        window.clearTimeout(volumeHideTimerRef.current);
+    }, []);
+    const openVolumePopup = useCallback(() => {
+        volumeKeepOpenRef.current = true;
+        clearVolumeHideTimer();
+        setIsVolumePopupOpen(true);
+    }, [clearVolumeHideTimer]);
+    const releaseVolumePopup = useCallback((delay = 0) => {
+        volumeKeepOpenRef.current = false;
+        clearVolumeHideTimer();
+        volumeHideTimerRef.current = window.setTimeout(() => {
+            if (!volumeKeepOpenRef.current)
+                setIsVolumePopupOpen(false);
+        }, delay);
+    }, [clearVolumeHideTimer]);
+    const flashVolumePopup = useCallback(() => {
+        setIsVolumePopupOpen(true);
+        clearVolumeHideTimer();
+        volumeHideTimerRef.current = window.setTimeout(() => {
+            if (!volumeKeepOpenRef.current)
+                setIsVolumePopupOpen(false);
+        }, VOLUME_POPUP_HIDE_MS);
+    }, [clearVolumeHideTimer]);
+    const applyVolume = useCallback((next, { flashPopup = false } = {}) => {
+        const video = videoRef.current;
+        const clamped = clamp(next, 0, 1);
+        setVolume(clamped);
+        if (video)
+            video.volume = clamped;
+        persistVolume(clamped);
+        if (flashPopup)
+            flashVolumePopup();
+    }, [persistVolume, flashVolumePopup]);
+    const seekBy = useCallback((delta) => {
+        const video = videoRef.current;
+        if (!video || !Number.isFinite(video.duration))
+            return;
+        const next = clamp(video.currentTime + delta, 0, video.duration);
+        video.currentTime = next;
+        syncProgressDom(next);
+        persistTime(next);
+        onTimeUpdate?.(next, video.duration || 0);
+    }, [syncProgressDom, persistTime, onTimeUpdate]);
+    const seekTo = useCallback((time) => {
+        const video = videoRef.current;
+        if (!video || !Number.isFinite(video.duration))
+            return;
+        const next = clamp(time, 0, video.duration);
+        video.currentTime = next;
+        syncProgressDom(next);
+    }, [syncProgressDom]);
+    const togglePlay = useCallback(async () => {
+        const video = videoRef.current;
+        if (!video || !isReady)
+            return;
+        claimKeyboard();
+        if (video.paused) {
+            try {
+                await video.play();
+            }
+            catch {
+                // Autoplay / play() can reject; ignore.
+            }
+        }
+        else {
+            video.pause();
+        }
+    }, [claimKeyboard, isReady]);
+    const toggleFullscreen = useCallback(async () => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        claimKeyboard();
+        try {
+            if (document.fullscreenElement === root) {
+                await document.exitFullscreen();
+            }
+            else {
+                await root.requestFullscreen();
+            }
+        }
+        catch {
+            // Fullscreen may be blocked by the browser.
+        }
+    }, [claimKeyboard]);
+    const debouncedSeekLeft = useMemo(() => leadingDebounce(() => {
+        const duration = videoRef.current?.duration ?? 0;
+        seekBy(-getSeekDelta(duration));
+    }, KEYBOARD_DEBOUNCE_MS), [seekBy]);
+    const debouncedSeekRight = useMemo(() => leadingDebounce(() => {
+        const duration = videoRef.current?.duration ?? 0;
+        seekBy(getSeekDelta(duration));
+    }, KEYBOARD_DEBOUNCE_MS), [seekBy]);
+    const volumeRef = useRef(volume);
+    volumeRef.current = volume;
+    const debouncedVolumeUp = useMemo(() => leadingDebounce(() => applyVolume(volumeRef.current + VOLUME_STEP, { flashPopup: true }), KEYBOARD_DEBOUNCE_MS), [applyVolume]);
+    const debouncedVolumeDown = useMemo(() => leadingDebounce(() => applyVolume(volumeRef.current - VOLUME_STEP, { flashPopup: true }), KEYBOARD_DEBOUNCE_MS), [applyVolume]);
+    const onKeyDown = useCallback((e) => {
+        if (activePlayerId !== playerId)
+            return;
+        if (isEditableTarget(e.target))
+            return;
+        switch (e.code) {
+            case 'Space':
+                e.preventDefault();
+                togglePlay();
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                debouncedSeekLeft();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                debouncedSeekRight();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                debouncedVolumeUp();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                debouncedVolumeDown();
+                break;
+        }
+    }, [
+        playerId,
+        togglePlay,
+        debouncedSeekLeft,
+        debouncedSeekRight,
+        debouncedVolumeUp,
+        debouncedVolumeDown,
+    ]);
+    useEvent({
+        event: 'keydown',
+        callback: onKeyDown,
+        isActive: true,
+    });
+    useEffect(() => {
+        const onFullscreenChange = () => {
+            setIsFullscreen(document.fullscreenElement === rootRef.current);
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+            if (activePlayerId === playerId)
+                activePlayerId = null;
+            clearVolumeHideTimer();
+            window.clearTimeout(singleClickTimerRef.current);
+        };
+    }, [playerId, clearVolumeHideTimer]);
+    // Sync DOM progress after controls mount / duration known.
+    useEffect(() => {
+        if (!isReady)
+            return;
+        const video = videoRef.current;
+        if (video)
+            syncProgressDom(video.currentTime);
+    }, [isReady, duration, syncProgressDom]);
+    // Realtime progress via rAF — no React state for currentTime.
+    useEffect(() => {
+        if (!isPlaying) {
+            cancelAnimationFrame(rafRef.current);
+            return;
+        }
+        const tick = () => {
+            const video = videoRef.current;
+            if (video && !isSeekingRef.current) {
+                const time = video.currentTime;
+                syncProgressDom(time);
+                onTimeUpdate?.(time, video.duration || 0);
+                persistTime(time);
+            }
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [isPlaying, syncProgressDom, onTimeUpdate, persistTime]);
+    useEffect(() => {
+        setIsReady(false);
+        setIsPlaying(false);
+        setLoadProgress(0);
+        setDuration(0);
+        durationRef.current = 0;
+        activePlayerId = playerId;
+        syncProgressDom(0);
+        const stored = loadStorage(lsKey);
+        if (typeof stored.volume === 'number') {
+            setVolume(clamp(stored.volume, 0, 1));
+        }
+    }, [src, lsKey, playerId, syncProgressDom]);
+    const onLoadedMetadata = useCallback(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const stored = loadStorage(lsKey);
+        const nextVolume = typeof stored.volume === 'number'
+            ? clamp(stored.volume, 0, 1)
+            : video.volume;
+        video.volume = nextVolume;
+        setVolume(nextVolume);
+        const nextDuration = video.duration || 0;
+        durationRef.current = nextDuration;
+        setDuration(nextDuration);
+        let time = 0;
+        if (typeof stored.currentTime === 'number' &&
+            stored.currentTime > 0 &&
+            Number.isFinite(nextDuration)) {
+            time = clamp(stored.currentTime, 0, nextDuration);
+            video.currentTime = time;
+        }
+        syncProgressDom(time);
+        setLoadProgress(getBufferedPercent(video));
+    }, [lsKey, syncProgressDom]);
+    const onProgress = useCallback(() => {
+        setLoadProgress(getBufferedPercent(videoRef.current));
+    }, []);
+    const onCanPlay = useCallback(() => {
+        setIsReady(true);
+        setLoadProgress(100);
+    }, []);
+    const onPlay = useCallback(() => {
+        setIsPlaying(true);
+        onPlayChange?.(true);
+    }, [onPlayChange]);
+    const onPause = useCallback(() => {
+        setIsPlaying(false);
+        onPlayChange?.(false);
+        const video = videoRef.current;
+        if (video) {
+            syncProgressDom(video.currentTime);
+            persistTime(video.currentTime);
+        }
+    }, [onPlayChange, persistTime, syncProgressDom]);
+    const onEnded = useCallback(() => {
+        setIsPlaying(false);
+        onPlayChange?.(false);
+        const video = videoRef.current;
+        if (video)
+            syncProgressDom(video.currentTime);
+    }, [onPlayChange, syncProgressDom]);
+    const onRootKeyDown = useCallback((e) => {
+        if (e.code === 'Space' || e.code.startsWith('Arrow')) {
+            claimKeyboard();
+        }
+    }, [claimKeyboard]);
+    const onSeekPointerDown = useCallback(() => {
+        isSeekingRef.current = true;
+    }, []);
+    const onSeekPointerUp = useCallback(() => {
+        isSeekingRef.current = false;
+        const video = videoRef.current;
+        if (!video)
+            return;
+        syncProgressDom(video.currentTime);
+        persistTime(video.currentTime);
+        onTimeUpdate?.(video.currentTime, video.duration || 0);
+    }, [syncProgressDom, persistTime, onTimeUpdate]);
+    const onSeekChange = useCallback((value) => {
+        seekTo(value);
+        if (currentTimeLabelRef.current) {
+            currentTimeLabelRef.current.textContent = formatTime(value);
+        }
+    }, [seekTo]);
+    // Single tap/click → play/pause (delayed). Double → fullscreen.
+    const onVideoSurfaceActivate = useCallback(() => {
+        const now = Date.now();
+        if (now - lastTapRef.current < DOUBLE_TAP_MS) {
+            window.clearTimeout(singleClickTimerRef.current);
+            lastTapRef.current = 0;
+            toggleFullscreen();
+            return;
+        }
+        lastTapRef.current = now;
+        window.clearTimeout(singleClickTimerRef.current);
+        singleClickTimerRef.current = window.setTimeout(() => {
+            lastTapRef.current = 0;
+            togglePlay();
+        }, DOUBLE_TAP_MS);
+    }, [toggleFullscreen, togglePlay]);
+    const volumeIcon = volume <= 0 ? 'volumeOff' : 'volume';
+    return (jsx("div", { ref: rootRef, className: cn(S.root, isFullscreen && S.fullscreen, S[`size-${size}`], className), tabIndex: 0, onPointerDown: claimKeyboard, onFocus: claimKeyboard, onKeyDown: onRootKeyDown, onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), children: jsxs("div", { className: S.videoWrap, onClick: onVideoSurfaceActivate, children: [jsx("video", { ref: videoRef, className: S.video, src: src, poster: poster, muted: muted, loop: loop, autoPlay: autoPlay, playsInline: true, preload: "auto", onLoadedMetadata: onLoadedMetadata, onProgress: onProgress, onCanPlay: onCanPlay, onPlay: onPlay, onPause: onPause, onEnded: onEnded }), !isReady && (jsx("div", { className: S.loading, children: jsx(ProgressCircular, { value: loadProgress, size: "l", showPercentage: true }) })), isReady && (jsxs("div", { className: cn(S.controls, !showControlsBar && S.controlsCompact), onClick: e => e.stopPropagation(), children: [jsx("div", { className: S.progressRow, children: jsx(Slider, { className: S.progress, inputRef: progressInputRef, min: 0, max: duration || 1, step: 0.01, defaultValue: 0, size: size, showGhost: true, "aria-label": "Playback progress", disabled: !duration, onPointerDown: onSeekPointerDown, onPointerUp: onSeekPointerUp, onChange: onSeekChange }) }), jsxs("div", { ref: barRef, className: S.bar, children: [jsx(Button, { variant: "text", size: size, square: true, "aria-label": isPlaying ? 'Pause' : 'Play', onClick: togglePlay, children: jsx(Icon, { type: isPlaying ? 'pause' : 'play', size: size }) }), jsxs("span", { className: S.time, children: [jsx("span", { ref: currentTimeLabelRef, children: "0:00" }), ' / ', formatTime(duration)] }), jsx(Popup, { className: S.volumeControl, isOpen: isVolumePopupOpen, direction: "top", size: "s", blur: true, round: true, elevation: 1, animated: true, trigger: jsx(Button, { variant: "text", size: size, square: true, "aria-label": "Volume", "aria-valuenow": Math.round(volume * 100), onFocus: openVolumePopup, onBlur: () => releaseVolumePopup(VOLUME_POPUP_HIDE_MS), children: jsx(Icon, { type: volumeIcon, size: size }) }), triggerProps: {
+                                        onPointerEnter: openVolumePopup,
+                                        onPointerLeave: () => releaseVolumePopup(VOLUME_POPUP_HIDE_MS),
+                                    }, content: jsx("div", { className: S.volumePopup, onPointerEnter: openVolumePopup, onPointerLeave: () => releaseVolumePopup(VOLUME_POPUP_HIDE_MS), children: jsx("div", { className: S.volumeSliderWrap, children: jsx(Slider, { className: S.volumeSlider, vertical: true, min: 0, max: 1, step: 0.01, value: volume, size: size, "aria-label": "Volume level", onChange: value => applyVolume(value) }) }) }) }), jsx(Button, { variant: "text", size: size, square: true, "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', onClick: toggleFullscreen, children: jsx(Icon, { type: isFullscreen ? 'fullscreenExit' : 'fullscreen', size: size }) })] })] }))] }) }));
+}
+
+export { VideoPlayer };

package/dist/esm/src/components/VideoPlayer/VideoPlayer.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".VideoPlayer_root__LGBzl{border-radius:var(--p-3);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);flex-direction:column}.VideoPlayer_root__LGBzl,.VideoPlayer_videoWrap__sglO6{display:flex;overflow:hidden;position:relative;width:100%}.VideoPlayer_videoWrap__sglO6{align-items:center;aspect-ratio:16/9;border-radius:inherit}.VideoPlayer_video__fYIXE{display:block;height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.VideoPlayer_loading__PpSPh{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-200);border-radius:var(--p-3);display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.VideoPlayer_controls__ZtlUH{background:var(--decent-color-alpha-700);border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3);bottom:0;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;height:auto;left:0;pointer-events:none;position:absolute;right:0;top:auto;transform:translateY(0);transition:transform .25s ease;width:100%;z-index:2}.VideoPlayer_size-xs__gE1DT .VideoPlayer_controlsCompact__j25Ad{transform:translateY(calc(100% - 1px))}.VideoPlayer_size-s__7gpUI .VideoPlayer_controlsCompact__j25Ad{transform:translateY(calc(100% - 2px))}.VideoPlayer_size-m__oNx3V .VideoPlayer_controlsCompact__j25Ad{transform:translateY(calc(100% - 4px))}.VideoPlayer_size-l__BrHtn .VideoPlayer_controlsCompact__j25Ad{transform:translateY(calc(100% - 6px))}.VideoPlayer_size-xl__u0nqW .VideoPlayer_controlsCompact__j25Ad{transform:translateY(calc(100% - 10px))}.VideoPlayer_progressRow__u53xA{pointer-events:auto;width:100%}.VideoPlayer_progressRow__u53xA input{--track-radius:0}.VideoPlayer_progress__qRC1a{min-width:0;width:100%}.VideoPlayer_size-xs__gE1DT .VideoPlayer_progress__qRC1a{top:-5px}.VideoPlayer_size-s__7gpUI .VideoPlayer_progress__qRC1a{top:-6px}.VideoPlayer_size-m__oNx3V .VideoPlayer_progress__qRC1a{top:-4px}.VideoPlayer_size-l__BrHtn .VideoPlayer_progress__qRC1a,.VideoPlayer_size-xl__u0nqW .VideoPlayer_progress__qRC1a{top:-5px}.VideoPlayer_bar__myWn1{align-items:center;display:flex;gap:var(--p-2);padding:0 var(--p-3) var(--p-2);pointer-events:auto}.VideoPlayer_time__-icL3{font-feature-settings:\"tnum\";flex:1;font-size:13px;font-variant-numeric:tabular-nums;min-width:0;opacity:.85;white-space:nowrap}.VideoPlayer_volumeControl__XUc1I{align-items:center;display:inline-flex;flex-shrink:0}.VideoPlayer_volumePopup__eXzsE{align-items:center;box-sizing:border-box;display:flex;height:120px;justify-content:center;padding:var(--p-3) var(--p-2)}.VideoPlayer_volumeSliderWrap__ANQ55{align-items:stretch;display:flex;height:100%;justify-content:center;width:16px;width:var(--thumb-size,16px)}.VideoPlayer_volumeSlider__TWOG5{height:100%}.VideoPlayer_fullscreen__aue41,.VideoPlayer_fullscreen__aue41 .VideoPlayer_videoWrap__sglO6{border-radius:0}.VideoPlayer_fullscreen__aue41 video{-o-object-fit:contain;object-fit:contain}";
+var S = {"root":"VideoPlayer_root__LGBzl","videoWrap":"VideoPlayer_videoWrap__sglO6","video":"VideoPlayer_video__fYIXE","loading":"VideoPlayer_loading__PpSPh","controls":"VideoPlayer_controls__ZtlUH","size-xs":"VideoPlayer_size-xs__gE1DT","controlsCompact":"VideoPlayer_controlsCompact__j25Ad","size-s":"VideoPlayer_size-s__7gpUI","size-m":"VideoPlayer_size-m__oNx3V","size-l":"VideoPlayer_size-l__BrHtn","size-xl":"VideoPlayer_size-xl__u0nqW","progressRow":"VideoPlayer_progressRow__u53xA","progress":"VideoPlayer_progress__qRC1a","bar":"VideoPlayer_bar__myWn1","time":"VideoPlayer_time__-icL3","volumeControl":"VideoPlayer_volumeControl__XUc1I","volumePopup":"VideoPlayer_volumePopup__eXzsE","volumeSliderWrap":"VideoPlayer_volumeSliderWrap__ANQ55","volumeSlider":"VideoPlayer_volumeSlider__TWOG5","fullscreen":"VideoPlayer_fullscreen__aue41"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/types/src/components/AssistiveText/AssistiveText.d.ts

@@ -1,2 +1,2 @@
 import * as T from './AssistiveText.types';
-export declare function AssistiveText(props: T.Props): JSX.Element;
+export declare function AssistiveText(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Autocomplete/Autocomplete.d.ts

@@ -1,2 +1,2 @@
 import * as T from './Autocomplete.types';
-export declare function Autocomplete(props: T.Props): JSX.Element;
+export declare function Autocomplete(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import * as T from './Button.types';
 export type ButtonProps = T.Props;
-export declare function Button(props: T.Props): JSX.Element;
+export declare function Button(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,2 +1,2 @@
 import * as T from './ButtonGroup.types';
-export declare function ButtonGroup(props: T.Props): JSX.Element;
+export declare function ButtonGroup(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Calendar/Calendar.d.ts

@@ -1,2 +1,2 @@
 import * as T from './Calendar.types';
-export declare function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, hideOtherMonthDays, isDayDisabled, size, }: T.Props): JSX.Element;
+export declare function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, hideOtherMonthDays, isDayDisabled, size, }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Card/Card.d.ts

@@ -3,11 +3,11 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
     paddingSize?: "s" | "xs" | "m" | "l" | "xl";
     blur?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;
-declare function LinkCard({ className, ...props }: LinkCardProps): JSX.Element;
-declare function CardHeader({ className, icon, iconWithBackground, textsClassName, title, titleClassName, titleId, description, descriptionClassName, descriptionId, children, ...props }: CardHeaderProps): JSX.Element;
-declare function CardTitle({ className, ...props }: CardTitleProps): JSX.Element;
-declare function CardDescription({ className, ...props }: CardDescriptionProps): JSX.Element;
-declare function CardAction({ className, ...props }: CardActionProps): JSX.Element;
-declare function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, ...props }: CardContentProps): JSX.Element;
-declare function CardFooter({ className, ...props }: CardFooterProps): JSX.Element;
+declare function LinkCard({ className, ...props }: LinkCardProps): import("react").JSX.Element;
+declare function CardHeader({ className, icon, iconWithBackground, textsClassName, title, titleClassName, titleId, description, descriptionClassName, descriptionId, children, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, ...props }: CardContentProps): import("react").JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
 export { Card, LinkCard, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/esm/types/src/components/Chip/Chip.d.ts

@@ -9,5 +9,5 @@ type Props = {
     removeTooltip?: ReactNode;
     size?: Size;
 };
-export declare function Chip({ children, className, selected, onRemove, onClick, removeTooltip, size, }: Props): JSX.Element;
+export declare function Chip({ children, className, selected, onRemove, onClick, removeTooltip, size, }: Props): import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import * as T from './DatePicker.types';
-export declare function DatePicker(props: T.Props): JSX.Element;
+export declare function DatePicker(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,2 +1,2 @@
 import * as T from './DatePickerInput.types';
-export declare function DatePickerInput(props: T.Props): JSX.Element;
+export declare function DatePickerInput(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/DateTime/DateTime.d.ts

@@ -4,4 +4,4 @@ export declare function formatDate({ value, format, locale }: {
     format: any;
     locale?: string;
 }): any;
-export declare function DateTime({ value, format, locale }: T.Props): JSX.Element;
+export declare function DateTime({ value, format, locale }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Dialogue/Dialogue.d.ts

@@ -1,3 +1,3 @@
 import type { Props as DialogueProps } from './Dialogue.types';
-export declare function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon, content, contentClassName, footer, footerAlignment, size, className, noScroll, maxHeight, autoScrollBottom, width, }: DialogueProps): JSX.Element;
+export declare function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon, content, contentClassName, footer, footerAlignment, size, className, noScroll, maxHeight, autoScrollBottom, width, }: DialogueProps): import("react").JSX.Element;
 export { default as DialogueStyles } from './Dialogue.styl';

package/dist/esm/types/src/components/Draggable/Draggable.d.ts

@@ -22,5 +22,5 @@ export declare class Draggable extends Component<T.Props> {
     selectInner: (elem: any) => any;
     transformInner(elem: any, str?: any): void;
     dropUnder(): void;
-    render(): JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/dist/esm/types/src/components/DropZone/DropZone.d.ts

@@ -1,3 +1,3 @@
 import type * as T from './DropZone.types';
 export type DropZoneProps = T.Props;
-export declare function DropZone(props: T.Props): JSX.Element;
+export declare function DropZone(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Expand/Expand.d.ts

@@ -1,2 +1,2 @@
 import * as T from './Expand.types';
-export declare function Expand(props: T.Props): JSX.Element;
+export declare function Expand(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Flex/Flex.d.ts

@@ -2,5 +2,5 @@ import { CSSProperties, HTMLAttributes } from 'react';
 type FlexProps = HTMLAttributes<HTMLDivElement> & Pick<CSSProperties, 'justifyContent' | 'alignItems' | 'flexDirection' | 'flexWrap' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'flex' | 'order' | 'alignSelf' | 'flexFlow' | 'width' | 'height'> & {
     children: React.ReactNode;
 };
-export declare const Flex: ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, width, height, ...props }: FlexProps) => JSX.Element;
+export declare const Flex: ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, width, height, ...props }: FlexProps) => import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/Form/Form.d.ts

@@ -1,5 +1,5 @@
 import * as T from './Form.types';
 export * from './Form.types';
-export declare function Form(props: T.Props): JSX.Element;
+export declare function Form(props: T.Props): import("react").JSX.Element;
 export * from './SubmitButtons/SubmitButtons';
 export * as FormTypes from './Form.types';

package/dist/esm/types/src/components/Form/SubmitButtons/SubmitButtons.d.ts

@@ -9,5 +9,5 @@ type Props = {
     buttons: ButtonConfig[];
     children?: ReactNode;
 };
-export declare const SubmitButtons: ({ buttons, className, ...props }: Props) => JSX.Element;
+export declare const SubmitButtons: ({ buttons, className, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/Gallery/Dots/Dots.d.ts

@@ -1,4 +1,4 @@
 export default function Dots({ index, count }: {
     index: any;
     count: any;
-}): JSX.Element;
+}): import("react").JSX.Element;

package/dist/esm/types/src/components/Gallery/Gallery.d.ts

@@ -38,5 +38,5 @@ export declare class Gallery extends Component<T.Props> {
     removeTransformDelta: () => void;
     move: (direction: Direction) => void;
     switch(direction: Direction): void;
-    render(): JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import * as T from './Icon.types';
 export type { IconType } from './Icon.types';
-export declare function Icon(props: T.Props): JSX.Element;
+export declare function Icon(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Icon/Icon.example.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => JSX.Element;
+declare const _default: () => import("react").JSX.Element;
 export default _default;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -88,6 +88,8 @@ export { default as star } from './star.svg';
 export { default as stop } from './stop.svg';
 export { default as stopInCircle } from './stopInCircle.svg';
 export { default as syncArrows } from './syncArrows.svg';
+export { default as volume } from './volume.svg';
+export { default as volumeOff } from './volumeOff.svg';
 export { default as table } from './table.svg';
 export { default as telegram } from './telegram.svg';
 export { default as tool } from './tool.svg';

package/dist/esm/types/src/components/InputFile/InputFile.d.ts

@@ -41,8 +41,8 @@ export declare class InputFile extends Component<T.Props> {
     upload(file: any, index: any): Promise<void>;
     demandedUploader: (upload: any) => Promise<any>;
     remove: (e: any, value: any) => Promise<void>;
-    renderPlusButton(): JSX.Element;
-    renderItem: (i: any, props?: {}) => JSX.Element;
+    renderPlusButton(): import("react").JSX.Element;
+    renderItem: (i: any, props?: {}) => import("react").JSX.Element;
     renderItems(): any;
-    render(): JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/dist/esm/types/src/components/InputFile/Item/Item.d.ts

@@ -12,5 +12,5 @@ type Props = {
     waitingForUpload?: boolean;
     isDragging?: boolean;
 };
-export default function Item(props: Props): JSX.Element;
+export default function Item(props: Props): import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/Label/Label.d.ts

@@ -15,5 +15,5 @@ export declare class Label extends Component<T.Props> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: any): void;
     updateClipPath: () => void;
-    render(): JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/dist/esm/types/src/components/LangSelector/LangSelector.d.ts

@@ -1,2 +1,2 @@
 import { LangSelectorProps } from './LangSelector.types';
-export declare function LangSelector(props: LangSelectorProps): JSX.Element;
+export declare function LangSelector(props: LangSelectorProps): import("react").JSX.Element;

package/dist/esm/types/src/components/Lazy/Lazy.d.ts

@@ -1,3 +1,3 @@
 import * as T from './Lazy.types';
 export type LazyProps = T.Props;
-export declare function Lazy(props: T.Props): JSX.Element;
+export declare function Lazy(props: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/LightBox/LightBox.d.ts

@@ -1,2 +1,2 @@
 import * as T from './LightBox.types';
-export declare function LightBox({ children, className, onClose, blur, ...props }: T.Props): JSX.Element;
+export declare function LightBox({ children, className, onClose, blur, ...props }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Notifications/Notifications.d.ts

@@ -13,5 +13,5 @@ export declare const NotificationsStore: {
     close(id: any): void;
     remove(id: any): void;
 };
-export declare const Notifications: (props: Props) => JSX.Element;
+export declare const Notifications: (props: Props) => import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/Paranja/Paranja.d.ts

@@ -1,2 +1,2 @@
 import * as T from './Paranja.types';
-export declare const Paranja: ({ className, children, visible, inline, blur, }: T.Props) => JSX.Element;
+export declare const Paranja: ({ className, children, visible, inline, blur, }: T.Props) => import("react").JSX.Element;

package/dist/esm/types/src/components/Popup/Popup.d.ts

@@ -67,7 +67,7 @@ export declare class Popup extends Component<T.Props, T.State> {
     afterOpen: () => void;
     afterClose: () => void;
     toggle: any;
-    renderTrigger(): JSX.Element;
-    renderContent(): JSX.Element;
-    render(): JSX.Element;
+    renderTrigger(): import("react").JSX.Element;
+    renderContent(): import("react").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/dist/esm/types/src/components/PopupMenu/PopupMenu.d.ts

@@ -1,2 +1,2 @@
 import * as T from './PopupMenu.types';
-export declare function PopupMenu({ items, onClose, ...props }: T.Props): JSX.Element;
+export declare function PopupMenu({ items, onClose, ...props }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Portal/Portal.d.ts

@@ -1,6 +1,7 @@
+import { type ReactElement } from 'react';
 type Props = {
     selector?: string;
     children: React.ReactNode;
 };
-export declare function Portal(props: Props): import("react").ReactPortal;
+export declare function Portal(props: Props): ReactElement | null;
 export {};

package/dist/esm/types/src/components/Progress/Progress.d.ts

@@ -1,2 +1,2 @@
 import { ProgressProps } from './Progress.types';
-export declare function Progress({ value, showPercentage, size, alignText, className, }: ProgressProps): JSX.Element;
+export declare function Progress({ value, showPercentage, size, alignText, className, }: ProgressProps): import("react").JSX.Element;

package/dist/esm/types/src/components/ProgressCircular/ProgressCircular.d.ts

@@ -1,3 +1,3 @@
 import { ProgressCircularProps } from './ProgressCircular.types';
 export type { ProgressCircularProps } from './ProgressCircular.types';
-export declare function ProgressCircular({ value, showPercentage, size, strokeWidth, className, }: ProgressCircularProps): JSX.Element;
+export declare function ProgressCircular({ value, showPercentage, size, strokeWidth, className, }: ProgressCircularProps): import("react").JSX.Element;

package/dist/esm/types/src/components/RequiredStar/RequiredStar.d.ts

@@ -1,2 +1,2 @@
 import * as T from './RequiredStar.types';
-export declare function RequiredStar(props: T.Props): JSX.Element;
+export declare function RequiredStar(props: T.Props): import("react").JSX.Element;