@homecode/ui 5.1.9 → 5.1.10

package/dist/esm/src/components/Select/Select2.js

@@ -1,2 +1,334 @@
-import{useRef,useState,useMemo,useEffect,useCallback,createElement}from"react";import{jsx,jsxs,Fragment}from"react/jsx-runtime";import{mapById,isMultiple,renderLabel}from"./Select.helpers.js";import{INTERACTION_MODE,getInteractionMode}from"../../tools/dom.js";import cn from"classnames";import omit from"lodash.omit";import{AssistiveText}from"../AssistiveText/AssistiveText.js";import{Button}from"../Button/Button.js";import{Chip}from"../Chip/Chip.js";import{Input}from"../Input/Input.js";import{Icon}from"../Icon/Icon.js";import{Label}from"../Label/Label.js";import{Popup}from"../Popup/Popup.js";import{RequiredStar}from"../RequiredStar/RequiredStar.js";import{Scroll}from"../Scroll/Scroll.js";import{useThrottle}from"../../hooks/useThrottle.js";import useEvent from"../../hooks/useEvent.js";import S from"./Select.styl.js";function Select2(t){const{className:L,value:c,onChange:s,onChipClick:q,onSearchChange:D,disableTriggerArrow:F,inputProps:e,popupProps:r,scrollProps:o,size:u="m",round:n,optionClassName:G,selectedChipClassName:H,additionalOptions:l=[],options:i,variant:a,label:p,additionalLabel:U,error:m,blur:V,disabled:_,trigger:$,required:J,hideRequiredStar:K,isSearchable:Q,presets:W=[],selectAllButton:X,clearButton:Y,showSelectedCount:Z,disableLabel:ee,selectedChipRemoveTooltip:te,selectedChipIds:re,onOpen:se,onClose:oe}=t,d=isMultiple(c),ne=t.closeOnSelect??!d,h=useRef(null),le=useRef(null),f=useRef(null),ie=useRef(null),g=useRef(-1),v=useRef(!1),ae=useRef(""),[C,ce]=useState(""),j=e=>{ce(e),ae.current=e.toLowerCase()},[b,x]=useState(!1),[N,ue]=useState(!1),[pe,me]=useState(""),[R,de]=useState(-1),[I,he]=useState([]),k=useMemo(()=>mapById(t.options),[t.options]),[E,T]=useState(d?c:[c]),[Se,fe]=useState(0),P=!b&&!!m,ge=useMemo(()=>({label:p,size:u,round:n,variant:a,...t.triggerProps}),[t.triggerProps,p,u,n,a]),y=e=>d?E.includes(e):E[0]===e,ve=e=>{g.current=e.length-1,he(e),fe(Se+1),R>g.current&&0<=g.current&&(de(g.current),f.current=e[g.current]?.id)},B=e=>{f.current=I[e]?.id,de(e)},[Ce,je]=useState(!1),be=(e,t)=>{j(t),je(!0),D?.(t),ve(i.filter(Ee))},xe=()=>{var e=i.map(({id:e})=>e);T(e),s?.(e)},Ne=()=>{T([]),s?.([])},Re=e=>{var t,r,s;(ie.current=e)&&h.current&&({top:e,bottom:t}=e.getBoundingClientRect(),r=h.current.getBoundingClientRect(),s=le.current,e<r.top?s.scrollTop-=r.top-e:t>r.bottom&&(s.scrollTop+=t-r.bottom))};const Ie=useThrottle(t=>{var e;getInteractionMode()===INTERACTION_MODE.POINTER&&(e=I.findIndex(e=>e.id===t),B(e))},100,{trailing:!0}),O=t=>{var e,r;d?(e=y(t)?E.filter(e=>e!==t):[...E,t],T(e),s?.(e)):(e=y(t)?null:t,r=y(t)?[]:[t],T(r),s?.(e)),j(""),ne&&x(!1)},A=e=>k.items[e]?.label||"",ke=e=>{var t;return ee?null:(t=c?.length,d&&t&&Z?e+` (${t})`:e)},Ee=({label:e})=>e.toLowerCase().includes(ae.current),Te=useMemo(()=>d?c?c.reduce((e,t)=>{t=A(t);return t?[...e,t]:e},[]).join(", "):"":A(c),[d,c,k]),z=useMemo(()=>F||e?.hasClear&&C?null:jsx(Icon,{type:"chevronDown",className:cn(S.triggerArrow,b&&S.isOpen),size:u}),[b,C]);const Pe=()=>(v.current=!1,[...l,...I].map(e=>{{var[e,t=0]=[e];const{id:n,isGroupHeader:l}=e;var r=n===f.current,s=E.includes(n),o=[],t={className:cn(S.option,l&&S.isGroup,r&&S.isFocused,s&&S.isSelected,S["level-"+t],G),onPointerUp:()=>O(n),onPointerEnter:()=>Ie(n)};return r&&(t.ref=Re),s&&!v.current&&(v.current=!0),Ee(e)&&o.unshift(jsx("div",{...t,children:renderLabel(e)},n)),o}}).flat());useEffect(()=>{var e=l?.length?[...l,...i]:i;ve(e)},[i]),useEffect(()=>{x(t.isOpen)},[t.isOpen]),useEffect(()=>{var e=t.searchValue;e&&j(e)},[t.searchValue]);var M,w,ye=useCallback(e=>{var t=R;"ArrowUp"===e.key&&0<t&&B(t-1),"ArrowDown"===e.key&&t<g.current&&B(t+1),-1!==t&&b&&"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),O(I[t].id))},[I,R,b,E]),ye=(useEvent({event:"keydown",isActive:b,callback:ye}),useEvent({event:"click",callback:e=>{(e=e.target)instanceof Element&&(e.closest("."+S.root)||e.closest("."+S.options))||x(!1)}}),useMemo(()=>{return jsxs("div",{ref:h,children:[(e=W.map(({label:e,ids:t})=>({children:e,onClick:()=>T(t),key:e})),X&&e.push({children:"Select all",onClick:xe,key:"select-all-button"}),Y&&e.push({children:"Clear",onClick:Ne,key:"clear-button"}),0===e.length?null:jsx("div",{className:S.presetPanel,children:e.map(e=>jsx(Button,{className:S.presetButton,variant:"clear",...e}))},"preset-panel")),createElement(Scroll,{y:!0,...o,offset:{y:{before:10,after:10}},className:cn(S.options,S["size-"+u],o?.className),onInnerRef:e=>le.current=e,key:"items-scroll"},Pe())]});var e},[I,C,R,E])),Be=cn(S.root,L,S["size-"+u]);return jsxs(Fragment,{children:[jsx(Popup,{className:Be,direction:"bottom",size:u,focusControl:!0,hoverControl:N,blur:V,isOpen:b,disabled:_,...r,onOpen:()=>{x(!0),-1===R&&B(0),r?.onOpen?.(),se?.()},onClose:()=>{x(!1),j(""),je(!1),B(0),r?.onClose?.(),oe?.()},trigger:$||(M=Q?(M=d&&c&&0<c.length,w=d?N&&Ce?C:"":N&&Ce?C:Te,jsx(Input,{...ge,...e,addonRight:z,error:P,value:w,onChange:be,label:ke(p),placeholder:M&&!w?"":e?.placeholder})):(()=>{const{label:e,className:t,...r}=ge;var s=omit(r,["name","inputProps"]),o=(d&&c&&c.length,[Te,U].filter(Boolean)),n=0<o.length,l=n?o:e,o=n&&!d?o:null,i=P,a=cn(S.triggerButton,i&&S.isError,z&&S.hasTriggerArrow,t);return jsxs("div",{children:[jsxs(Button,{className:a,variant:"default",...s,style:{clipPath:pe},title:o?.join?.(", "),children:[jsx("div",{className:cn(S.triggerButtonLabel,n&&S.hasSelected),children:l}),z]}),!d&&jsx(Label,{size:u,isOnTop:n,isError:i,onClipPathChange:me,children:ke(e)})]})})(),w=d&&c&&0<c.length,jsxs("div",{className:S.trigger,children:[w&&jsx(Scroll,{y:!0,className:S.chipsContainer,innerClassName:S.chipContainerInner,size:u,fadeSize:u,autoHide:!0,children:d&&c&&c.length?c.map(e=>{var t=A(e);return t?jsx(Chip,{className:cn(S.chip,re?.includes(e)&&H,k.items[e]?.chipClassName),size:u,selected:re?.includes(e),onRemove:()=>O(e),onClick:()=>q?.(e),removeTooltip:te,children:t},e):null}):null}),M,J&&!K&&jsx(RequiredStar,{size:u})]})),triggerProps:{onFocus:()=>{ue(!0)},onBlur:()=>{ue(!1)}},content:ye}),P&&jsx(AssistiveText,{variant:"danger",size:u,children:m})]})}export{Select2};
-//# sourceMappingURL=Select2.js.map
+import { useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { mapById, isMultiple, renderLabel } from './Select.helpers.js';
+import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
+import cn from 'classnames';
+import omit from 'lodash.omit';
+import { AssistiveText } from '../AssistiveText/AssistiveText.js';
+import { Button } from '../Button/Button.js';
+import { Chip } from '../Chip/Chip.js';
+import { Input } from '../Input/Input.js';
+import { Icon } from '../Icon/Icon.js';
+import { Label } from '../Label/Label.js';
+import { Popup } from '../Popup/Popup.js';
+import { RequiredStar } from '../RequiredStar/RequiredStar.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { useThrottle } from '../../hooks/useThrottle.js';
+import useEvent from '../../hooks/useEvent.js';
+import S from './Select.styl.js';
+
+function Select2(props) {
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, selectedChipClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, } = props;
+    const isMultiple$1 = isMultiple(value);
+    const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
+    const contentRef = useRef(null);
+    const scrollInnerRef = useRef(null);
+    const focusedItemId = useRef(null);
+    const focusedElem = useRef(null);
+    const maxIndex = useRef(-1);
+    const isFirstSelectedMeet = useRef(false);
+    const searchValLower = useRef('');
+    const [searchVal, _setSearchVal] = useState('');
+    const setSearchVal = (val) => {
+        _setSearchVal(val);
+        searchValLower.current = val.toLowerCase();
+    };
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [labelClipPath, setLabelClipPath] = useState('');
+    const [focusedItemIndex, setFocusedItemIndex] = useState(-1);
+    // Add tree-related state from Select.tsx
+    const [items, setItems] = useState([]);
+    const ids = useMemo(() => mapById(props.options), [props.options]);
+    // Add basic selection state
+    const [selected, setSelected] = useState(isMultiple$1 ? value : [value]);
+    const [optionsUpdated, setOptionsUpdated] = useState(0);
+    const isErrorVisible = !isOpen && !!error;
+    const triggerProps = useMemo(() => ({
+        label,
+        size,
+        round,
+        variant,
+        ...props.triggerProps,
+    }), [props.triggerProps, label, size, round, variant]);
+    const isSelected = (id) => isMultiple$1
+        ? selected.includes(id)
+        : selected[0] === id;
+    const isClickedInside = (elem) => !!(elem instanceof Element &&
+        (elem.closest(`.${S.root}`) || elem.closest(`.${S.options}`)));
+    const setNewItems = (newItems) => {
+        maxIndex.current = newItems.length - 1;
+        setItems(newItems);
+        setOptionsUpdated(optionsUpdated + 1);
+        if (focusedItemIndex > maxIndex.current && maxIndex.current >= 0) {
+            setFocusedItemIndex(maxIndex.current);
+            focusedItemId.current = newItems[maxIndex.current]?.id;
+        }
+    };
+    const setItemFocus = index => {
+        focusedItemId.current = items[index]?.id;
+        setFocusedItemIndex(index);
+    };
+    const [isSearchActive, setIsSearchActive] = useState(false);
+    const handleSearchChange = (e, value) => {
+        setSearchVal(value);
+        setIsSearchActive(true);
+        onSearchChange?.(value);
+        setNewItems(options.filter(filterOption));
+    };
+    const selectAll = () => {
+        const newValue = options.map(({ id }) => id);
+        setSelected(newValue);
+        onChange?.(newValue);
+    };
+    const dropSelected = () => {
+        setSelected([]);
+        onChange?.([]);
+    };
+    const onFocusedElemRef = elem => {
+        focusedElem.current = elem;
+        if (elem) {
+            const content = contentRef.current;
+            if (!content)
+                return;
+            const { top, bottom } = elem.getBoundingClientRect();
+            const rect = contentRef.current.getBoundingClientRect();
+            const list = scrollInnerRef.current;
+            if (top < rect.top) {
+                list.scrollTop -= rect.top - top;
+            }
+            else if (bottom > rect.bottom) {
+                list.scrollTop += bottom - rect.bottom;
+            }
+        }
+    };
+    const onPopupOpen = () => {
+        setIsOpen(true);
+        if (focusedItemIndex === -1) {
+            setItemFocus(0);
+        }
+        popupProps?.onOpen?.();
+        onOpen?.();
+    };
+    const onPopupClose = () => {
+        setIsOpen(false);
+        setSearchVal('');
+        setIsSearchActive(false);
+        setItemFocus(0);
+        popupProps?.onClose?.();
+        onClose?.();
+    };
+    const onFocus = () => {
+        setIsFocused(true);
+    };
+    const onBlur = () => {
+        setIsFocused(false);
+    };
+    const onOptionHover = useThrottle(id => {
+        const mode = getInteractionMode();
+        if (mode !== INTERACTION_MODE.POINTER)
+            return;
+        const index = items.findIndex(item => item.id === id);
+        setItemFocus(index);
+    }, 100, { trailing: true });
+    const onItemToggle = (id) => {
+        if (isMultiple$1) {
+            const newValue = isSelected(id)
+                ? selected.filter(i => i !== id)
+                : [...selected, id];
+            setSelected(newValue);
+            onChange?.(newValue);
+        }
+        else {
+            // mono select
+            const newValue = isSelected(id) ? null : id;
+            const newSelected = isSelected(id) ? [] : [id];
+            setSelected(newSelected);
+            onChange?.(newValue);
+        }
+        setSearchVal('');
+        if (closeOnSelect)
+            setIsOpen(false);
+    };
+    const getLabel = (id) => ids.items[id]?.label || '';
+    const getFieldLabel = (label) => {
+        if (disableLabel)
+            return null;
+        // @ts-ignore
+        const length = value?.length;
+        if (isMultiple$1 && length && showSelectedCount)
+            return `${label} (${length})`;
+        return label;
+    };
+    const filterOption = ({ label }) => {
+        return label.toLowerCase().includes(searchValLower.current);
+    };
+    const selectedLabel = useMemo(() => {
+        if (!isMultiple$1)
+            return getLabel(value);
+        if (!value)
+            return '';
+        return (value
+            // @ts-ignore
+            .reduce((acc, id) => {
+            const label = getLabel(id);
+            return label ? [...acc, label] : acc;
+        }, [])
+            .join(', '));
+    }, [isMultiple$1, value, ids]);
+    const renderSelectedChips = () => {
+        if (!isMultiple$1 || !value || !value.length)
+            return null;
+        return value.map(id => {
+            const label = getLabel(id);
+            if (!label)
+                return null;
+            return (jsx(Chip, { className: cn(S.chip, selectedChipIds?.includes(id) && selectedChipClassName, ids.items[id]?.chipClassName), size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
+        });
+    };
+    const triggerArrow = useMemo(() => {
+        if (disableTriggerArrow || (inputProps?.hasClear && searchVal))
+            return null;
+        return (jsx(Icon, { type: "chevronDown", className: cn(S.triggerArrow, isOpen && S.isOpen), size: size }));
+    }, [isOpen, searchVal]);
+    const renderTriggerInput = () => {
+        const hasChips = isMultiple$1 && value && value.length > 0;
+        const inputValue = isMultiple$1
+            ? isFocused && isSearchActive
+                ? searchVal
+                : ''
+            : isFocused && isSearchActive
+                ? searchVal
+                : selectedLabel;
+        return (jsx(Input, { ...triggerProps, ...inputProps, 
+            // TODO: autoComplete
+            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
+    };
+    const renderTriggerButton = () => {
+        const { label, className, ...rest } = triggerProps;
+        const props = omit(rest, ['name', 'inputProps']);
+        isMultiple$1 && value && value.length > 0;
+        const fullSelectedLabel = [selectedLabel, additionalLabel].filter(Boolean);
+        const hasSelected = fullSelectedLabel.length > 0;
+        const displayLabel = hasSelected ? fullSelectedLabel : label;
+        const title = hasSelected && !isMultiple$1 ? fullSelectedLabel : null;
+        const isError = isErrorVisible;
+        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow && S.hasTriggerArrow, className);
+        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), !isMultiple$1 && (jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) }))] }));
+    };
+    const renderTrigger = () => {
+        if (trigger)
+            return trigger;
+        const triggerElem = isSearchable
+            ? renderTriggerInput()
+            : renderTriggerButton();
+        const hasChips = isMultiple$1 && value && value.length > 0;
+        return (jsxs("div", { className: S.trigger, children: [hasChips && (jsx(Scroll, { y: true, className: S.chipsContainer, innerClassName: S.chipContainerInner, size: size, fadeSize: size, autoHide: true, children: renderSelectedChips() })), triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
+    };
+    const renderPresets = () => {
+        const items = presets.map(({ label, ids }) => ({
+            children: label,
+            onClick: () => setSelected(ids),
+            key: label,
+        }));
+        if (selectAllButton) {
+            items.push({
+                children: 'Select all',
+                onClick: selectAll,
+                key: 'select-all-button',
+            });
+        }
+        if (clearButton) {
+            items.push({
+                children: 'Clear',
+                onClick: dropSelected,
+                key: 'clear-button',
+            });
+        }
+        if (items.length === 0)
+            return null;
+        return (jsx("div", { className: S.presetPanel, children: items.map(props => (jsx(Button, { className: S.presetButton, variant: "clear", ...props }))) }, "preset-panel"));
+    };
+    const renderOption = (item, level = 0) => {
+        const { id, isGroupHeader } = item;
+        const isFocused = id === focusedItemId.current;
+        const isSelected = selected.includes(id);
+        const items = [];
+        const className = cn(S.option, isGroupHeader && S.isGroup, isFocused && S.isFocused, isSelected && S.isSelected, S[`level-${level}`], optionClassName);
+        const optionProps = {
+            className,
+            onPointerUp: () => onItemToggle(id),
+            onPointerEnter: () => onOptionHover(id),
+        };
+        // @ts-ignore
+        if (isFocused)
+            optionProps.ref = onFocusedElemRef;
+        if (isSelected && !isFirstSelectedMeet.current) {
+            isFirstSelectedMeet.current = true;
+        }
+        if (filterOption(item)) {
+            items.unshift(jsx("div", { ...optionProps, children: renderLabel(item) }, id));
+        }
+        return items;
+    };
+    const renderOptions = () => {
+        isFirstSelectedMeet.current = false;
+        return [...additionalOptions, ...items]
+            .map(item => renderOption(item))
+            .flat();
+    };
+    useEffect(() => {
+        const items = additionalOptions?.length
+            ? [...additionalOptions, ...options]
+            : options;
+        setNewItems(items);
+    }, [options]);
+    useEffect(() => {
+        setIsOpen(props.isOpen);
+    }, [props.isOpen]);
+    useEffect(() => {
+        const searchVal = props.searchValue;
+        if (searchVal)
+            setSearchVal(searchVal);
+    }, [props.searchValue]);
+    const onKeyDown = useCallback((e) => {
+        const currIndex = focusedItemIndex;
+        if (e.key === 'ArrowUp') {
+            if (currIndex > 0)
+                setItemFocus(currIndex - 1);
+        }
+        if (e.key === 'ArrowDown') {
+            if (currIndex < maxIndex.current)
+                setItemFocus(currIndex + 1);
+        }
+        if (currIndex === -1 || !isOpen)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            onItemToggle(items[currIndex].id);
+        }
+    }, [items, focusedItemIndex, isOpen, selected]);
+    useEvent({
+        event: 'keydown',
+        isActive: isOpen,
+        callback: onKeyDown,
+    });
+    useEvent({
+        event: 'click',
+        // isActive: isMultiple,
+        callback: e => {
+            if (!isClickedInside(e.target)) {
+                setIsOpen(false);
+            }
+        },
+    });
+    const optionsList = useMemo(() => (jsxs("div", { ref: contentRef, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], scrollProps?.className), onInnerRef: elem => (scrollInnerRef.current = elem), key: "items-scroll" }, renderOptions())] })), [items, searchVal, focusedItemIndex, selected]);
+    const classes = cn(S.root, className, S[`size-${size}`]);
+    return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, disabled: disabled, ...popupProps, onOpen: onPopupOpen, onClose: onPopupClose, trigger: renderTrigger(), triggerProps: {
+                    onFocus: onFocus,
+                    onBlur: onBlur,
+                }, content: optionsList }), isErrorVisible && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
+}
+
+export { Select2 };

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

@@ -1,2 +1,7 @@
-import{jsx}from"react/jsx-runtime";import S from"./Shimmer.styl.js";import cn from"classnames";const Shimmer=({className:r,size:m="m",round:s=!1,children:e})=>jsx("div",{className:cn(S.root,r,S["size-"+m],s&&S.round),children:jsx("div",{className:S.inner,children:e})});export{Shimmer};
-//# sourceMappingURL=Shimmer.js.map
+import { jsx } from 'react/jsx-runtime';
+import S from './Shimmer.styl.js';
+import cn from 'classnames';
+
+const Shimmer = ({ className, size = 'm', round = false, children, }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`], round && S.round), children: jsx("div", { className: S.inner, children: children }) }));
+
+export { Shimmer };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Shimmer_root__XaY5r{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.Shimmer_inner__zssMV{animation:Shimmer_shimmer__hGfzF 1.5s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);background:linear-gradient(90deg,transparent 0,var(--shimmer-color,var(--accent-color-alpha-200,hsla(0,0%,100%,.2))) 50%,transparent 100%);inset:0;position:absolute}.Shimmer_size-xs__RAP4h{border-radius:4px}.Shimmer_round__rwhjn.Shimmer_size-xs__RAP4h{border-radius:12px}.Shimmer_size-s__EYKhC{border-radius:4px}.Shimmer_round__rwhjn.Shimmer_size-s__EYKhC{border-radius:16px}.Shimmer_size-m__AYziL{border-radius:6px}.Shimmer_round__rwhjn.Shimmer_size-m__AYziL{border-radius:20px}.Shimmer_size-l__GqE0a{border-radius:8px}.Shimmer_round__rwhjn.Shimmer_size-l__GqE0a{border-radius:24px}.Shimmer_size-xl__VwXMx{border-radius:10px}.Shimmer_round__rwhjn.Shimmer_size-xl__VwXMx{border-radius:28px}@keyframes Shimmer_shimmer__hGfzF{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}to{transform:translateX(100%)}}",S={root:"Shimmer_root__XaY5r",inner:"Shimmer_inner__zssMV",shimmer:"Shimmer_shimmer__hGfzF","size-xs":"Shimmer_size-xs__RAP4h",round:"Shimmer_round__rwhjn","size-s":"Shimmer_size-s__EYKhC","size-m":"Shimmer_size-m__AYziL","size-l":"Shimmer_size-l__GqE0a","size-xl":"Shimmer_size-xl__VwXMx"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Shimmer.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Shimmer_root__XaY5r{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.Shimmer_inner__zssMV{animation:Shimmer_shimmer__hGfzF 1.5s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);background:linear-gradient(90deg,transparent 0,var(--shimmer-color,var(--accent-color-alpha-200,hsla(0,0%,100%,.2))) 50%,transparent 100%);inset:0;position:absolute}.Shimmer_size-xs__RAP4h{border-radius:4px}.Shimmer_round__rwhjn.Shimmer_size-xs__RAP4h{border-radius:12px}.Shimmer_size-s__EYKhC{border-radius:4px}.Shimmer_round__rwhjn.Shimmer_size-s__EYKhC{border-radius:16px}.Shimmer_size-m__AYziL{border-radius:6px}.Shimmer_round__rwhjn.Shimmer_size-m__AYziL{border-radius:20px}.Shimmer_size-l__GqE0a{border-radius:8px}.Shimmer_round__rwhjn.Shimmer_size-l__GqE0a{border-radius:24px}.Shimmer_size-xl__VwXMx{border-radius:10px}.Shimmer_round__rwhjn.Shimmer_size-xl__VwXMx{border-radius:28px}@keyframes Shimmer_shimmer__hGfzF{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}to{transform:translateX(100%)}}";
+var S = {"root":"Shimmer_root__XaY5r","inner":"Shimmer_inner__zssMV","shimmer":"Shimmer_shimmer__hGfzF","size-xs":"Shimmer_size-xs__RAP4h","round":"Shimmer_round__rwhjn","size-s":"Shimmer_size-s__EYKhC","size-m":"Shimmer_size-m__AYziL","size-l":"Shimmer_size-l__GqE0a","size-xl":"Shimmer_size-xl__VwXMx"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,11 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import SvgSpinner from"./spinner.svg.js";import S from"./Spinner.styl.js";const Spinner=({size:r="m",className:n="",...s})=>{r=cn(S.root,S["size-"+r],n);return jsx(SvgSpinner,{className:r,...s})};export{Spinner};
-//# sourceMappingURL=Spinner.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import SvgSpinner from './spinner.svg.js';
+import S from './Spinner.styl.js';
+
+const Spinner = ({ size = 'm', className = '', ...props }) => {
+    const classes = cn(S.root, S[`size-${size}`], className);
+    return jsx(SvgSpinner, { className: classes, ...props });
+};
+
+export { Spinner };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Spinner_root__DsSOz{animation:Spinner_spin__7XKOR .5s linear infinite;color:inherit;display:inline-block}.Spinner_size-xs__rhfme{height:12px;width:12px}.Spinner_size-s__sc9kC{height:16px;width:16px}.Spinner_size-m__MY4q0{height:20px;width:20px}.Spinner_size-l__p16ZU{height:30px;width:30px}.Spinner_size-xl__vqU9I{height:38px;width:38px}@keyframes Spinner_spin__7XKOR{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}",S={root:"Spinner_root__DsSOz",spin:"Spinner_spin__7XKOR","size-xs":"Spinner_size-xs__rhfme","size-s":"Spinner_size-s__sc9kC","size-m":"Spinner_size-m__MY4q0","size-l":"Spinner_size-l__p16ZU","size-xl":"Spinner_size-xl__vqU9I"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Spinner.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Spinner_root__DsSOz{animation:Spinner_spin__7XKOR .5s linear infinite;color:inherit;display:inline-block}.Spinner_size-xs__rhfme{height:12px;width:12px}.Spinner_size-s__sc9kC{height:16px;width:16px}.Spinner_size-m__MY4q0{height:20px;width:20px}.Spinner_size-l__p16ZU{height:30px;width:30px}.Spinner_size-xl__vqU9I{height:38px;width:38px}@keyframes Spinner_spin__7XKOR{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
+var S = {"root":"Spinner_root__DsSOz","spin":"Spinner_spin__7XKOR","size-xs":"Spinner_size-xs__rhfme","size-s":"Spinner_size-s__sc9kC","size-m":"Spinner_size-m__MY4q0","size-l":"Spinner_size-l__p16ZU","size-xl":"Spinner_size-xl__vqU9I"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Spinner/spinner.svg.js

@@ -1,2 +1,24 @@
-import*as React from"react";var _circle;function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t,n=arguments[r];for(t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var SvgSpinner=function(e){return React.createElement("svg",_extends({width:50,height:50,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},e),_circle=_circle||React.createElement("circle",{cx:50,cy:50,fill:"none",stroke:"currentColor",strokeWidth:8,r:45,strokeDasharray:"212.05750411731105 72.68583470577035",transform:"rotate(270 50 50)"}))};export{SvgSpinner as default};
-//# sourceMappingURL=spinner.svg.js.map
+import * as React from 'react';
+
+var _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSpinner = function SvgSpinner(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 50,
+    height: 50,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 50,
+    cy: 50,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 8,
+    r: 45,
+    strokeDasharray: "212.05750411731105 72.68583470577035",
+    transform: "rotate(270 50 50)"
+  })));
+};
+
+export { SvgSpinner as default };

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

@@ -1,2 +1,24 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{Component}from"react";import cn from"classnames";import{Paranja}from"../Paranja/Paranja.js";import{Scroll}from"../Scroll/Scroll.js";import{Spinner}from"../Spinner/Spinner.js";import S from"./Table.styl.js";class Table extends Component{renderHeaderColumn=({id:r,label:e,sticky:a})=>jsx("th",{className:cn(a&&S.sticky),children:e},r);renderRow=e=>{var r=this.props["columns"];return jsx("tr",{className:e.className,children:r.map(r=>this.renderDataCol(r,e))},e.id)};renderDataCol({id:r,dataField:e,render:a,sticky:s},l){return jsx("td",{className:cn(s&&S.sticky),children:a?a(l):l[e||r]},r)}render(){var{className:r,columns:e,isLoading:a=!1,loadingText:s,blur:l,data:n}=this.props;return jsxs("div",{className:cn(S.root,l&&S.blur,r),children:[jsx(Scroll,{x:!0,y:!0,offset:{x:{before:10,after:10}},className:S.scroll,xScrollbarClassName:S.xScrollbar,yScrollbarClassName:S.yScrollbar,children:jsxs("table",{children:[jsx("thead",{children:jsx("tr",{children:e.map(this.renderHeaderColumn)})}),jsx("tbody",{children:n.map(this.renderRow)})]})}),jsx(Paranja,{inline:!0,visible:a,blur:l,children:a&&(s??jsx(Spinner,{}))})]})}}export{Table};
-//# sourceMappingURL=Table.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import cn from 'classnames';
+import { Paranja } from '../Paranja/Paranja.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import S from './Table.styl.js';
+
+class Table extends Component {
+    renderHeaderColumn = ({ id, label, sticky }) => (jsx("th", { className: cn(sticky && S.sticky), children: label }, id));
+    renderRow = (data) => {
+        const { columns } = this.props;
+        return (jsx("tr", { className: data.className, children: columns.map(param => this.renderDataCol(param, data)) }, data.id));
+    };
+    renderDataCol({ id, dataField, render, sticky }, data) {
+        return (jsx("td", { className: cn(sticky && S.sticky), children: render ? render(data) : data[dataField || id] }, id));
+    }
+    render() {
+        const { className, columns, isLoading = false, loadingText, blur, data, } = this.props;
+        return (jsxs("div", { className: cn(S.root, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, className: S.scroll, xScrollbarClassName: S.xScrollbar, yScrollbarClassName: S.yScrollbar, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
+    }
+}
+
+export { Table };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);box-shadow:0 0 0 2px var(--accent-color-alpha-100);max-height:100%;overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--p-3);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{border-bottom-left-radius:var(--brad);border-bottom-right-radius:var(--brad);padding-bottom:var(--p-8)}.Table_scroll__a04XZ{position:static}.Table_xScrollbar__FODoD{transform:translateY(4px)}.Table_yScrollbar__KwMOv{transform:translateX(4px)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}",S={root:"Table_root__PxLR-",scroll:"Table_scroll__a04XZ",xScrollbar:"Table_xScrollbar__FODoD",yScrollbar:"Table_yScrollbar__KwMOv",sticky:"Table_sticky__99lks",blur:"Table_blur__UwMAo"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Table.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);box-shadow:0 0 0 2px var(--accent-color-alpha-100);max-height:100%;overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--p-3);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{border-bottom-left-radius:var(--brad);border-bottom-right-radius:var(--brad);padding-bottom:var(--p-8)}.Table_scroll__a04XZ{position:static}.Table_xScrollbar__FODoD{transform:translateY(4px)}.Table_yScrollbar__KwMOv{transform:translateX(4px)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
+var S = {"root":"Table_root__PxLR-","scroll":"Table_scroll__a04XZ","xScrollbar":"Table_xScrollbar__FODoD","yScrollbar":"Table_yScrollbar__KwMOv","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,48 @@
-import{useState,useEffect,useCallback,createElement}from"react";import{jsx,jsxs,Fragment}from"react/jsx-runtime";import cn from"classnames";import{Scroll}from"../Scroll/Scroll.js";import{Button}from"../Button/Button.js";import{ButtonGroup}from"../ButtonGroup/ButtonGroup.js";import S from"./Tabs.styl.js";const isId=e=>["string","number"].includes(typeof e);function Tabs(e){const{size:i="m",className:t,tabsWrapperClassName:s,tabsClassName:n,contentClassName:m,items:a,hideTabsIfSingle:o=!1,allowEmpty:r=!1,onChange:l,renderAll:u,activeId:c,children:f,...p}=e,[d,b]=useState(isId(c)?c:r?null:a[0].id),j=(useEffect(()=>{isId(c)&&b(c)},[c]),useCallback((e,{id:t,onClick:s}={})=>{s&&!s(e)?e.preventDefault():(s=r&&t===d?null:t,b(s),l?.(s))},[d])),N=[];e=a.map(t=>{const{id:e,label:s,forceRender:n,content:a,contentClassName:o,...r}=t;var l=d===e,c="function"==typeof a?a():a;return(u||n||l)&&N.push(jsx("div",{className:cn(m,o,!l&&S.inactive),children:c},e)),createElement(Button,{...r,className:cn(S.tab,r.className),size:i,key:e,onClick:e=>j(e,t),checked:l},s)}),e=1===e.length&&o?null:jsx(Scroll,{x:!0,offset:{x:{before:10,after:10}},className:s,innerClassName:cn(S.tabsScroll,S["size-"+i]),autoHide:!0,fadeSize:i,size:i,children:jsx(ButtonGroup,{className:n,...p,children:e})});return"function"==typeof f?f({tabs:e,content:N}):jsxs(Fragment,{children:[e,f,N]})}export{Tabs};
-//# sourceMappingURL=Tabs.js.map
+import { useState, useEffect, useCallback, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Scroll } from '../Scroll/Scroll.js';
+import { Button } from '../Button/Button.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import S from './Tabs.styl.js';
+
+const isId = id => ['string', 'number'].includes(typeof id);
+function Tabs(props) {
+    const { size = 'm', className, tabsWrapperClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const [activeId, setActiveId] = useState(isId(initialId) ? initialId : allowEmpty ? null : items[0].id);
+    useEffect(() => {
+        if (isId(initialId)) {
+            setActiveId(initialId);
+        }
+    }, [initialId]);
+    const onTabClick = useCallback((e, { id, onClick } = {}) => {
+        // @ts-ignore
+        if (onClick && !onClick(e)) {
+            e.preventDefault();
+            return;
+        }
+        const newId = allowEmpty && id === activeId ? null : id;
+        setActiveId(newId);
+        onChange?.(newId);
+    }, [activeId]);
+    const tabsContent = [];
+    const tabsButtons = items.map((params) => {
+        const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
+        const isActive = activeId === id;
+        const tabContent = typeof content === 'function' ? content() : content;
+        if (renderAll || forceRender || isActive) {
+            tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
+        }
+        return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+    });
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: tabsClassName, ...rest, children: tabsButtons }) }));
+    if (typeof children === 'function') {
+        return children({
+            tabs,
+            content: tabsContent,
+        });
+    }
+    return (jsxs(Fragment, { children: [tabs, children, tabsContent] }));
+}
+
+export { Tabs };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z="div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}",S={inactive:"Tabs_inactive__H0mPh",tabsScroll:"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-",tab:"Tabs_tab__-oN-g"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Tabs.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}";
+var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,44 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";import cn from"classnames";import{useCallback}from"react";import{Link}from"../Router/Link/Link.js";import{isBrowser}from"../../tools/env.js";import"nanoid";import"../../tools/dom.js";import"timen";import"compareq";import"lodash.pick";import"../../tools/queryParams.js";import S from"./Text.styl.js";const textToAnchorId=o=>o.toLowerCase().split(" ").join("_"),getPath=()=>(isBrowser&&location.pathname)??"/",scrollIntoHeader=o=>document.getElementById(o)?.scrollIntoView();function useAnchor(o){if("string"!=typeof o)return[];const s=textToAnchorId(o);var o=getPath()+"#"+s,r=useCallback(()=>scrollIntoHeader(s),[s]);return[s,jsxs(Fragment,{children:[" ",jsx(Link,{href:o,className:S.anchor,onClick:r,children:"#"})]})]}function H({As:o,className:s,children:r,anchor:t,...e}){var[t,n]=useAnchor(t??r);return jsxs(o,{...e,className:cn(S.heading,s),id:t,children:[r,n]})}const H1=o=>jsx(H,{...o,As:"h1",anchor:!1}),H2=o=>jsx(H,{...o,As:"h2"}),H3=o=>jsx(H,{...o,As:"h3"}),H4=o=>jsx(H,{...o,As:"h4"}),H5=o=>jsx(H,{...o,As:"h5"}),H6=o=>jsx(H,{...o,As:"h6"});isBrowser&&window.addEventListener("load",()=>{scrollIntoHeader(location.hash.slice(1))});export{H1,H2,H3,H4,H5,H6};
-//# sourceMappingURL=Text.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { Link } from '../Router/Link/Link.js';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import S from './Text.styl.js';
+
+const textToAnchorId = text => text.toLowerCase().split(' ').join('_');
+const getPath = () => (isBrowser && location.pathname) ?? '/';
+const scrollIntoHeader = id => document.getElementById(id)?.scrollIntoView();
+function useAnchor(text) {
+    if (typeof text !== 'string')
+        return [];
+    const id = textToAnchorId(text);
+    const href = `${getPath()}#${id}`;
+    const scrollUp = useCallback(() => scrollIntoHeader(id), [id]);
+    return [
+        id,
+        jsxs(Fragment, { children: ["\u00A0", jsx(Link, { href: href, className: S.anchor, onClick: scrollUp, children: "#" })] }),
+    ];
+}
+function H({ As, className, children, anchor, ...rest }) {
+    const [id, anchorEl] = useAnchor(anchor ?? children);
+    return (jsxs(As, { ...rest, className: cn(S.heading, className), id: id, children: [children, anchorEl] }));
+}
+const H1 = props => jsx(H, { ...props, As: "h1", anchor: false });
+const H2 = props => jsx(H, { ...props, As: "h2" });
+const H3 = props => jsx(H, { ...props, As: "h3" });
+const H4 = props => jsx(H, { ...props, As: "h4" });
+const H5 = props => jsx(H, { ...props, As: "h5" });
+const H6 = props => jsx(H, { ...props, As: "h6" });
+if (isBrowser) {
+    window.addEventListener('load', () => {
+        scrollIntoHeader(location.hash.slice(1));
+    });
+}
+
+export { H1, H2, H3, H4, H5, H6 };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Text_heading__DR-MG{position:relative}.Text_anchor__hq6W6{align-items:flex-start;border-radius:50%;height:100%;opacity:0;padding:0 .5em;transform:translateX(-1em);transition:.2s ease-out;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Text_anchor__hq6W6:before{background:none!important;height:100%;position:absolute;width:2em}.Text_heading__DR-MG:hover .Text_anchor__hq6W6{opacity:1;transform:translateX(0)}.Text_heading__DR-MG .Text_anchor__hq6W6:hover{color:var(--active-color)}",S={heading:"Text_heading__DR-MG",anchor:"Text_anchor__hq6W6"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Text.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Text_heading__DR-MG{position:relative}.Text_anchor__hq6W6{align-items:flex-start;border-radius:50%;height:100%;opacity:0;padding:0 .5em;transform:translateX(-1em);transition:.2s ease-out;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Text_anchor__hq6W6:before{background:none!important;height:100%;position:absolute;width:2em}.Text_heading__DR-MG:hover .Text_anchor__hq6W6{opacity:1;transform:translateX(0)}.Text_heading__DR-MG .Text_anchor__hq6W6:hover{color:var(--active-color)}";
+var S = {"heading":"Text_heading__DR-MG","anchor":"Text_anchor__hq6W6"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,29 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import React__default, { useMemo } from 'react';
+import S from './TextShimmer.styl.js';
+
+function TextShimmerComponent({ children, as: Component = 'p', className, duration = 1, spread = 3, inverted = false, active = true, }) {
+    const { backgroundGradient } = useMemo(() => {
+        const raw = Math.min(48, 3.5 + Math.max(0, Math.min(1, spread / 10)) * 100.5);
+        // Wide blend stops “vertical knife” artefacts when the ramp only spans few pixels inside the glyph mask.
+        const ridgeHalf = Math.min(49, Math.max(36, raw + 17));
+        const baseColor = inverted
+            ? 'var(--txt-sh-highlight)'
+            : 'var(--txt-sh-fill)';
+        const bandColor = inverted
+            ? 'var(--txt-sh-fill)'
+            : 'var(--txt-sh-highlight)';
+        const backgroundGradient = `linear-gradient(90deg, ${baseColor} calc(50% - ${ridgeHalf}%), ${bandColor} 50%, ${baseColor} calc(50% + ${ridgeHalf}%))`;
+        return { backgroundGradient };
+    }, [spread, inverted]);
+    if (!active)
+        return jsx(Fragment, { children: children });
+    return (jsx(Component, { className: cn(S.root, className), style: {
+            '--text-shimmer-duration': `${duration}s`,
+            backgroundImage: backgroundGradient,
+        }, children: children }));
+}
+const TextShimmer = React__default.memo(TextShimmerComponent);
+
+export { TextShimmer };