@homecode/ui 4.11.1

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

@@ -0,0 +1,286 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { createStore } from 'justorm/react';
+import cn from 'classnames';
+import compare from 'compareq';
+import pick from 'lodash.pick';
+import omit from 'lodash.omit';
+import { Input } from '../Input/Input.js';
+import S from './Form.styl.js';
+import { cloneValues, getNotEmpty, getInitialTouched, patchWithCustomMessages, dropFocusFromSubmit, getVal } from './Form.helpers.js';
+import { Validator } from './Validator.js';
+import '../Spinner/Spinner.styl.js';
+import '../Button/Button.styl.js';
+import './SubmitButtons/SubmitButtons.styl.js';
+
+const STORE_FIELDS_EXPOSED = [
+    'isDirty',
+    'isEmpty',
+    'isValid',
+    'isLoading',
+    'values',
+    'errors',
+    'touched',
+    'changed',
+    'disabled',
+];
+function Field(props) {
+    const { value, error, markEdited, isChanged, isTouched, clearMargins, component: Control = Input, className, onChange, onBlur, handleChange, handleBlur, children, ...controlProps } = props;
+    const { name, isHidden } = controlProps;
+    const valField = typeof value === 'boolean' ? 'checked' : 'value';
+    const classes = cn(className, S.field, isHidden && S.hidden, clearMargins && S.clearMargins, markEdited && isChanged && S.changed);
+    function handleFieldChange(e, val) {
+        const v = getVal(e, val, valField);
+        if (onChange && onChange(e, v) === false)
+            return;
+        handleChange(name, v);
+    }
+    function handleFieldBlur(e) {
+        if (onBlur && onBlur(e) === false)
+            return;
+        handleBlur(name);
+    }
+    Object.assign(controlProps, {
+        name,
+        [valField]: value,
+        onChange: handleFieldChange,
+        onBlur: handleFieldBlur,
+        error: isTouched && error?.message,
+    });
+    return (jsxs("div", { className: classes, children: [jsx(Control, { ...controlProps }), children] }));
+}
+class Form extends Component {
+    store;
+    validationSchema;
+    defaultValues = {};
+    constructor(props) {
+        super(props);
+        const { initialValues, validationSchema, defaultDisabled } = props;
+        this.updateDefaultValues();
+        this.validationSchema = validationSchema;
+        const values = cloneValues(initialValues);
+        const notEmpty = getNotEmpty(this.defaultValues, initialValues);
+        const disabled = Object(defaultDisabled);
+        this.store = createStore(this, {
+            values,
+            touched: getInitialTouched(initialValues),
+            changed: {},
+            notEmpty,
+            disabled,
+            isLoading: false,
+            isDirty: false,
+            // TODO: do not validate here (only when Field is mounted)
+            ...this.getValidationState({ values, disabled }),
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    componentDidMount() {
+        this.calcChangedAll();
+        this.validate();
+        this.onInit();
+    }
+    shouldComponentUpdate({ defaultValues, initialValues, validationSchema, }) {
+        const validationChanged = !compare(validationSchema, this.props.validationSchema);
+        const initialValsChanged = !compare(initialValues, this.props.initialValues);
+        const defaultValsChanged = !compare(defaultValues, this.props.defaultValues);
+        this.validationSchema = validationSchema;
+        if (initialValsChanged) {
+            this.setInitialVals(initialValues);
+        }
+        if (defaultValsChanged)
+            this.updateDefaultValues();
+        if (initialValsChanged || defaultValsChanged) {
+            this.calcChangedAll(initialValues);
+        }
+        if (initialValsChanged || validationChanged) {
+            this.validate();
+        }
+        return true;
+    }
+    updateDefaultValues(props = this.props) {
+        const { defaultValues, initialValues } = props;
+        return defaultValues || cloneValues(initialValues);
+    }
+    setInitialVals(initialValues = {}) {
+        this.store.values = cloneValues(initialValues);
+        this.validate();
+        this.onInit();
+    }
+    setValue = (field, val) => {
+        const { values } = this.store;
+        values[field] = val;
+        this.calcChanged(field, val);
+        this.validate();
+    };
+    setValues = vals => {
+        const { values } = this.store;
+        Object.assign(values, vals);
+        this.calcChangedAll();
+        this.validate();
+        return values;
+    };
+    setDisabled = (name, isDisabled) => {
+        const { disabled } = this.store;
+        if (typeof name === 'object') {
+            Object.assign(disabled, name);
+            return;
+        }
+        if (isDisabled) {
+            disabled[name] = true;
+        }
+        else {
+            delete disabled[name];
+        }
+    };
+    reset = () => {
+        const { initialValues } = this.props;
+        this.setValues(initialValues);
+        this.store.touched = getInitialTouched(initialValues);
+    };
+    field = (props) => jsx(Field, { ...this.getFieldProps(props) });
+    getFieldProps(props) {
+        const { markEdited } = this.props;
+        const { name } = props;
+        const { values, changed, touched, errors } = this.store.originalObject;
+        const fieldProps = {
+            ...props,
+            value: values[name],
+            markEdited,
+            isChanged: changed[name],
+            isTouched: touched[name],
+            error: errors?.[name],
+            handleChange: this.onChange,
+            handleBlur: this.onBlur,
+        };
+        if (this.validationSchema?.[name].empty === false)
+            fieldProps.required = true;
+        return fieldProps;
+    }
+    getFormAPI() {
+        return {
+            ...pick(this.store.originalObject, STORE_FIELDS_EXPOSED),
+            Field: this.field,
+            setValue: this.setValue,
+            setValues: this.setValues,
+            setDisabled: this.setDisabled,
+            reset: this.reset,
+            submit: this.onSubmit,
+        };
+    }
+    getValidationState(store) {
+        const errors = this.getValidationErrors(store);
+        const isValid = Object.keys(errors).length === 0;
+        return { isValid, errors };
+    }
+    getValidationErrors(store = this.store.originalObject) {
+        const { values, disabled } = store;
+        if (!this.validationSchema)
+            return {};
+        // @ts-ignore
+        const schema = Object.entries(this.validationSchema).reduce((acc, [field, { ...rule }]) => {
+            const { type, check } = rule;
+            if (disabled[field])
+                return acc;
+            if (type === 'custom') {
+                // NOTE: pass all `values` to custom checker function
+                // to allow create validator for dependent fields
+                // @ts-ignore
+                rule.check = function checkWrap(...args) {
+                    // @ts-ignore
+                    return check.call(this, ...args, values);
+                };
+            }
+            return { ...acc, [field]: rule };
+        }, {});
+        const res = Validator.validate(values, schema);
+        if (typeof res === 'object')
+            return patchWithCustomMessages(res, schema);
+        return {};
+    }
+    calcChanged(field, val) {
+        const { initialValues } = this.props;
+        const { changed, notEmpty } = this.store;
+        if (compare(val, initialValues[field])) {
+            delete changed[field];
+        }
+        else {
+            changed[field] = true;
+        }
+        if (compare(val, this.defaultValues[field])) {
+            delete notEmpty[field];
+        }
+        else {
+            notEmpty[field] = true;
+        }
+        Object.assign(this.store, {
+            isDirty: Object.keys(changed).length > 0,
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    calcChangedAll(initialValues = this.props.initialValues) {
+        const { values } = this.store.originalObject;
+        const notEmpty = getNotEmpty(this.defaultValues, values);
+        const changed = Object.entries(values).reduce((acc, [field, val]) => compare(initialValues[field], val) ? acc : { ...acc, [field]: true }, {});
+        Object.assign(this.store, {
+            changed,
+            isDirty: Object.keys(changed).length > 0,
+            isEmpty: Object.keys(notEmpty).length === 0,
+        });
+    }
+    validate() {
+        Object.assign(this.store, this.getValidationState());
+    }
+    onInit() {
+        const { onInit } = this.props;
+        if (onInit)
+            onInit(this.getFormAPI());
+    }
+    onSubmit = async (e) => {
+        const { onSubmit } = this.props;
+        const { values } = this.store.originalObject;
+        e?.preventDefault();
+        dropFocusFromSubmit();
+        if (!onSubmit)
+            return;
+        this.store.isLoading = true;
+        await onSubmit({ ...values });
+        this.store.isLoading = false;
+    };
+    onChange = (field, val) => {
+        const { onChange } = this.props;
+        const { values, touched } = this.store;
+        if (values[field] === val)
+            return;
+        const newValues = { ...values.originalObject, [field]: val };
+        // @ts-ignore
+        if (onChange && onChange(newValues) === false)
+            return;
+        values[field] = val;
+        touched[field] = true;
+        this.handleChange(field, val);
+    };
+    onBlur = (name) => {
+        this.store.touched[name] = true;
+    };
+    handleChange(field, val) {
+        this.calcChanged(field, val);
+        this.validate();
+    }
+    render() {
+        const { className, children, ...rest } = this.props;
+        const { isLoading } = this.store;
+        const classes = cn(S.root, className, isLoading && S.isLoading);
+        const formProps = omit(rest, [
+            'defaultValues',
+            'defaultDisabled',
+            'initialValues',
+            'validationSchema',
+            'onInit',
+            'onChange',
+            'onSubmit',
+        ]);
+        return (jsx("form", { className: classes, ...formProps, onSubmit: this.onSubmit, children: children(this.getFormAPI()) }));
+    }
+}
+
+export { Form };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Form_root__EzxOr{margin:0 auto;max-width:100%;width:100%}.Form_isLoading__D1sPp{opacity:.8;pointer-events:none;transition:opacity .2s ease-out}.Form_field__S50yT{position:relative}.Form_field__S50yT+.Form_field__S50yT{margin-top:10px}.Form_field__S50yT+.Form_field__S50yT.Form_clearMargins__-KvTS{margin-top:0}.Form_field__S50yT.Form_changed__j-elu:after{background-color:$primaryColor;border-radius:50%;box-shadow:0 0 0 1px hsla(0,0%,100%,.8);content:\"\";height:6px;pointer-events:none;position:absolute;right:-2px;top:-2px;width:6px;z-index:1}.Form_hidden__MId3H{display:none}.Form_error__J7BaB{color:#e91b20;font-size:80%;margin:5px}";
+var S = {"root":"Form_root__EzxOr","isLoading":"Form_isLoading__D1sPp","field":"Form_field__S50yT","clearMargins":"Form_clearMargins__-KvTS","changed":"Form_changed__j-elu","hidden":"Form_hidden__MId3H","error":"Form_error__J7BaB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Form/Form.types.js

@@ -0,0 +1 @@
+

package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../../Button/Button.js';
+import S from './SubmitButtons.styl.js';
+
+const SubmitButtons = ({ buttons, className, ...props }) => (jsx("div", { className: cn(S.root, className), ...props, children: buttons.map(buttonProps => (jsx(Button, { className: cn(S.item, buttonProps.className), ...buttonProps }))) }));
+
+export { SubmitButtons };

package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SubmitButtons_root__sXP-n{display:flex;justify-content:flex-end;margin-top:15px}.SubmitButtons_item__f0l6w+.SubmitButtons_item__f0l6w{margin-left:10px}";
+var S = {"root":"SubmitButtons_root__sXP-n","item":"SubmitButtons_item__f0l6w"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Form/Validator.js

@@ -0,0 +1,36 @@
+import FastestValidator from 'fastest-validator';
+
+const Validator = new FastestValidator({
+    messages: {
+        momentDate: 'Invalid date',
+        momentRange: 'Invalid dates range',
+    },
+});
+Validator.add('momentDate', function momentDate({ messages }) {
+    return {
+        source: `
+      if (!value.isValid())
+        // @ts-ignore
+        ${this.makeError({ type: 'momentDate', actual: 'value', messages })}
+
+      return value;
+    `,
+    };
+});
+Validator.add('momentRange', function momentRange({ messages }) {
+    return {
+        source: `
+      const isValid =
+        value.startDate && value.startDate.isValid() &&
+        value.endDate && value.endDate.isValid();
+
+      if (!isValid)
+        // @ts-ignore
+        ${this.makeError({ type: 'momentRange', actual: 'value', messages })}
+
+      return value;
+    `,
+    };
+});
+
+export { Validator };

package/dist/esm/src/components/Gallery/Dots/Dots.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Dots.styl.js';
+
+function Dots({ index, count }) {
+    return (jsx("div", { className: S.root, children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => (jsx("div", { className: cn(S.item, i === index && S.active) }, i))) }) }));
+}
+
+export { Dots as default };

package/dist/esm/src/components/Gallery/Dots/Dots.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}";
+var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,180 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import compare from 'compareq';
+import cn from 'classnames';
+import omit from 'lodash.omit';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import throttle from '../../tools/throttle.js';
+import { circularSlice } from '../../tools/array.js';
+import S from './Gallery.styl.js';
+import { Lazy } from '../Lazy/Lazy.js';
+
+const THRESHOLD = 50;
+const DURATION = 200;
+const DIR_NAME = {
+    '1': 'left',
+    '-1': 'right',
+};
+function getInitialState(items, startIndex) {
+    return circularSlice(items, startIndex, 3);
+}
+function Arr({ className, size, icon, ...rest }) {
+    return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
+}
+function Item({ src, size, isLoaded, isError, onLoad, onError }) {
+    const style = {};
+    if (isLoaded)
+        style.backgroundImage = `url(${src})`;
+    return (jsx("div", { className: S.item, style: style, children: !isLoaded &&
+            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { src: src, onLoad: onLoad, onError: onError }), jsx(Spinner, { size: size })] }))) }));
+}
+class Gallery extends Component {
+    store;
+    items;
+    index = 0;
+    timers = Time.create();
+    startX = null;
+    innerRef = createRef();
+    static defaultProps = {
+        size: 'm',
+        animation: true,
+        startIndex: 0,
+    };
+    constructor(props) {
+        super(props);
+        const { startIndex, items } = props;
+        this.recenter();
+        this.index = startIndex;
+        this.store = createStore(this, {
+            items: this.getStateItems(),
+            movingDirection: 0,
+            loading: {},
+            errors: {},
+            isDragging: false,
+        });
+    }
+    componentDidMount() {
+        this.init();
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+    }
+    componentDidUpdate(prevProps) {
+        const { items, startIndex } = this.props;
+        if (prevProps.startIndex !== startIndex ||
+            !compare(prevProps.items, items)) {
+            this.index = startIndex;
+            this.recenter();
+            this.store.items = this.getStateItems();
+        }
+    }
+    getStateItems() {
+        return this.isSingle()
+            ? [this.props.items[0]]
+            : getInitialState(this.items, this.index);
+    }
+    recenter() {
+        const [...items] = this.props.items;
+        this.items = [items.pop(), ...items];
+    }
+    init() {
+        const { items } = this.store;
+        if (items.length > 1)
+            this.subscribe();
+    }
+    subscribe() {
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+    isSingle = () => this.props.items.length < 2;
+    onKeyDown = e => {
+        if (this.isSingle())
+            return;
+        if (e.key === 'ArrowRight') {
+            e.stopPropagation();
+            return this.move(-1);
+        }
+        if (e.key === 'ArrowLeft') {
+            e.stopPropagation();
+            return this.move(1);
+        }
+    };
+    onPointerDown = e => {
+        this.startX = e.pageX;
+    };
+    onPointerMove = e => {
+        if (this.startX === null)
+            return;
+        const delta = this.getDelta(e);
+        if (Math.abs(delta) < THRESHOLD)
+            return;
+        this.store.isDragging = true;
+        this.setTransformDelta(delta);
+    };
+    onPointerUp = e => {
+        if (!this.startX)
+            return;
+        const delta = this.getDelta(e);
+        this.startX = null;
+        if (!this.store.isDragging || !delta)
+            return;
+        this.store.isDragging = false;
+        const dir = delta / Math.abs(delta);
+        this.move(dir);
+    };
+    getDelta = e => e.pageX - this.startX;
+    setTransformDelta = (delta) => {
+        this.innerRef.current.style.transform = `translateX(calc(-100% / 3 + ${delta}px))`;
+    };
+    removeTransformDelta = () => {
+        this.innerRef.current.style.transform = '';
+    };
+    move = throttle(function (direction) {
+        const { animation } = this.props;
+        this.store.isDragging = false;
+        this.startX = null;
+        if (!animation)
+            return this.switch(direction);
+        this.store.movingDirection = direction;
+        this.timers.clear();
+        this.timers.after(DURATION, () => this.switch(direction));
+    }, DURATION);
+    switch(direction) {
+        this.index += direction * -1;
+        this.store.items = circularSlice(this.items, this.index, 3);
+        this.store.movingDirection = 0;
+        this.removeTransformDelta();
+        const { onChange } = this.props;
+        const { items, loading } = this.store;
+        onChange?.(this.index, this.items[this.index]);
+        items.forEach(src => {
+            if (typeof loading[src] !== 'boolean')
+                loading[src] = false;
+        });
+    }
+    render() {
+        const { className, size, showArrows, showDots, initialBounce, cover, ...rest } = this.props;
+        const { items, movingDirection, loading, errors, isDragging } = this.store;
+        const dirName = DIR_NAME[movingDirection];
+        const isSingle = this.isSingle();
+        const props = omit(rest, ['items', 'onChange', 'animation', 'startIndex']);
+        const classes = cn(S.root, isSingle && S.single, cover && S.cover, className);
+        const innerClasses = cn(S.inner, initialBounce && S.initialBounce, S[dirName]);
+        if (!isSingle) {
+            props.onPointerDown = this.onPointerDown;
+            props.onPointerMove = this.onPointerMove;
+            if (isDragging) {
+                props.onPointerUp = this.onPointerUp;
+                props.onPointerLeave = this.onPointerUp;
+            }
+        }
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, 
+                    // @ts-ignore
+                    loader: () => import('./Dots/Dots.js'), index: this.index % items.length, count: items.length }))] }));
+    }
+}
+
+export { Gallery };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","arr":"Gallery_arr__knicI"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useEffect } from 'react';
+import { scrollIntoView } from '../../tools/scroll.js';
+import S from './Heading.styl.js';
+
+let subscribersCount = 0;
+function onClick(e) {
+    const href = e.target?.getAttribute('href');
+    if (!href || !/#/.test(href))
+        return;
+    const [path, hash] = href.split('#');
+    const heading = document.getElementById(hash);
+    if (heading) {
+        scrollIntoView(heading);
+        e.stopPropagation();
+    }
+}
+function subscribe() {
+    if (subscribersCount === 0) {
+        window.addEventListener('click', onClick, true);
+    }
+    subscribersCount++;
+}
+function unsubscribe() {
+    if (--subscribersCount === 0) {
+        window.removeEventListener('click', onClick, true);
+    }
+}
+const Heading = memo(function Heading({ id, text }) {
+    useEffect(() => {
+        subscribe();
+        return unsubscribe;
+    });
+    return (jsxs("h2", { className: S.root, id: id, children: [jsx("a", { href: `${location.pathname}#${id}`, className: S.link, children: "#" }), text] }));
+});
+
+export { Heading };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Heading_root__Y4E8o{margin:1em 0;position:relative}.Heading_root__Y4E8o,.Heading_root__Y4E8o>a{color:var(--accent-color)!important}.Heading_root__Y4E8o .Heading_link__JTd0P{bottom:0;display:block;left:-1.7em;min-height:100%;opacity:0;padding:.8em 1em 0!important;pointer-events:all!important;position:absolute;right:1.7em;text-decoration:none;transition:all .2s ease-out}.Heading_root__Y4E8o:hover .Heading_link__JTd0P{opacity:1;transform:translateX(-5px)}";
+var S = {"root":"Heading_root__Y4E8o","link":"Heading_link__JTd0P"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Lazy } from '../Lazy/Lazy.js';
+import S from './Icon.styl.js';
+import ICONS from './icons/index.js';
+
+const icons = ICONS;
+function Icon(props) {
+    const { className, type, size, ...rest } = props;
+    const iconProps = {
+        className: cn(S.root, S[`size-${size}`], className),
+        role: 'img',
+        ...rest,
+    };
+    const localIcon = ICONS[type];
+    if (!localIcon) {
+        console.warn(`Icon: type="${type}" is unknown`);
+        return null;
+    }
+    // @ts-ignore
+    return jsx(Lazy, { loader: localIcon, hideSpinner: true, ...iconProps });
+}
+Icon.defaultProps = {
+    size: 'm',
+};
+
+export { Icon, icons };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Icon_root__Uzney{color:inherit;display:inline-block;pointer-events:none}.Icon_size-xs__T-Npk{height:8px;width:8px}.Icon_size-s__qftZG{height:12px;width:12px}.Icon_size-m__7xCDX{height:16px;width:16px}.Icon_size-l__Eq1Fb{height:20px;width:20px}.Icon_size-xl__ChZL5{height:26px;width:26px}";
+var S = {"root":"Icon_root__Uzney","size-xs":"Icon_size-xs__T-Npk","size-s":"Icon_size-s__qftZG","size-m":"Icon_size-m__7xCDX","size-l":"Icon_size-l__Eq1Fb","size-xl":"Icon_size-xl__ChZL5"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Icon/icons/avatar.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+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 SvgAvatar = function SvgAvatar(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 1.5c2 0 3.6 1.6 3.6 3.6S14 10.8 12 10.8 8.4 9.1 8.4 7.1 10 3.5 12 3.5zm0 17.2c-3 0-5.7-1.5-7.3-3.9.9-2.9 4.8-3.7 7.3-3.7 2.4 0 6 .8 7.3 3.7-1.6 2.3-4.3 3.9-7.3 3.9z"
+  })));
+};
+
+export { SvgAvatar as default };