@astral/ui 4.27.1 → 4.28.0

package/components/BottomDrawer/BottomDrawer.js

@@ -9,5 +9,5 @@ export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT
             onClose(event, 'escapeKeyDown');
         }
     };
-    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "large", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
+    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "medium", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
 };

package/components/CheckableTag/CheckableTag.d.ts

@@ -31,14 +31,14 @@ export type CheckableTagProps = Omit<TagProps, 'onChange' | 'startAddon' | 'endA
  * Тег с возможностью быть checked (по логике Checkbox)
  * @example
  * <CheckableTag
-   * label="tag"
-   * variant="contained"
-   * color="success"
-   * checked
-   * onChange={handleChecked}
-   * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
+ * label="tag"
+ * variant="contained"
+ * color="success"
+ * checked
+ * onChange={handleChecked}
+ * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
  * />
-
+ * @deprecated Используйте компонент Chip
  */
 export declare const CheckableTag: import("react").ForwardRefExoticComponent<Omit<TagProps, "onChange" | "variant" | "startAddon" | "endAddon"> & {
     /**

package/components/CheckableTag/CheckableTag.js

@@ -5,14 +5,14 @@ import { HiddenInput, StyledTag, Wrapper } from './styles';
  * Тег с возможностью быть checked (по логике Checkbox)
  * @example
  * <CheckableTag
-   * label="tag"
-   * variant="contained"
-   * color="success"
-   * checked
-   * onChange={handleChecked}
-   * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
+ * label="tag"
+ * variant="contained"
+ * color="success"
+ * checked
+ * onChange={handleChecked}
+ * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
  * />
-
+ * @deprecated Используйте компонент Chip
  */
 export const CheckableTag = forwardRef(({ checked, variant = 'light', color = 'grey', onChange, disabled, startAddon: StartAddon, endAddon: EndAddon, ...tagProps }, ref) => {
     const checkableStartAddon = StartAddon

package/components/Chip/Chip.d.ts

@@ -0,0 +1,2 @@
+import type { ChipProps } from './types';
+export declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/components/Chip/Chip.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '../Typography';
+import { ChipStatusIcon } from './ChipStatusIcon';
+import { chipClassnames } from './constants';
+import { AdornmentWrapper, Counter, HiddenInput, Label, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+export const Chip = (props) => {
+    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, } = useLogic(props);
+    const renderStartAdornment = () => {
+        if (status) {
+            return _jsx(ChipStatusIcon, { status: status });
+        }
+        if (icon) {
+            return icon;
+        }
+        return null;
+    };
+    const renderEndAdornment = () => {
+        if (counter) {
+            return _jsx(Counter, { children: counter });
+        }
+        if (endAdornment) {
+            return endAdornment;
+        }
+        return null;
+    };
+    return (_jsxs(Label, { children: [_jsx(HiddenInput, { ...inputProps }), _jsxs(Wrapper, { className: classnames, children: [hasStartAdornment && (_jsx(AdornmentWrapper, { component: "span", className: chipClassnames.startAdornment, children: renderStartAdornment() })), _jsx(Typography, { className: chipClassnames.label, component: "span", children: label }), hasEndAdornment && (_jsx(AdornmentWrapper, { component: "span", className: chipClassnames.endAdornment, children: renderEndAdornment() }))] })] }));
+};

package/components/Chip/ChipStatusIcon/ChipStatusIcon.d.ts

@@ -0,0 +1,5 @@
+type ChipStatusIconProps = {
+    status: 'success' | 'warning' | 'error';
+};
+export declare const ChipStatusIcon: ({ status }: ChipStatusIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Chip/ChipStatusIcon/ChipStatusIcon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { classNames } from '../../utils/classNames';
+import { chipStatusIconClassnames } from './constants';
+import { StatusIcon } from './styled';
+export const ChipStatusIcon = ({ status }) => {
+    const classnames = useMemo(() => {
+        return classNames(chipStatusIconClassnames.root, {
+            [chipStatusIconClassnames.success]: status === 'success',
+            [chipStatusIconClassnames.warning]: status === 'warning',
+            [chipStatusIconClassnames.error]: status === 'error',
+        });
+    }, [status]);
+    return (_jsx(StatusIcon, { className: classnames, viewBox: "0 0 20 20", width: "20px", height: "20px", children: _jsx("circle", { cx: "10", cy: "10", r: "3.33333" }) }));
+};

package/components/Chip/ChipStatusIcon/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const chipStatusIconClassnames: {
+    root: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/components/Chip/ChipStatusIcon/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const chipStatusIconClassnames = {
+    root: createUIKitClassname('chip-status-icon'),
+    success: createUIKitClassname('chip-status-icon_success'),
+    warning: createUIKitClassname('chip-status-icon_warning'),
+    error: createUIKitClassname('chip-status-icon_error'),
+};

package/components/Chip/ChipStatusIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipStatusIcon';

package/components/Chip/ChipStatusIcon/index.js

@@ -0,0 +1 @@
+export * from './ChipStatusIcon';

package/components/Chip/ChipStatusIcon/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StatusIcon: import("../../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Chip/ChipStatusIcon/styled.js

@@ -0,0 +1,16 @@
+import { SvgIcon } from '../../SvgIcon';
+import { styled } from '../../styled';
+import { chipStatusIconClassnames } from './constants';
+export const StatusIcon = styled(SvgIcon) `
+  &.${chipStatusIconClassnames.success} {
+    color: ${({ theme }) => theme.palette.success[900]};
+  }
+
+  &.${chipStatusIconClassnames.warning} {
+    color: ${({ theme }) => theme.palette.warning[900]};
+  }
+
+  &.${chipStatusIconClassnames.error} {
+    color: ${({ theme }) => theme.palette.error[900]};
+  }
+`;

package/components/Chip/constants.d.ts

@@ -0,0 +1,29 @@
+export declare const chipClassnames: {
+    root: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
+    disabled: string;
+    selected: string;
+    label: string;
+    hasStatusIcon: string;
+    hasCounter: string;
+    hasEndAdornment: string;
+    hasIcon: string;
+    startAdornment: string;
+    endAdornment: string;
+};
+export declare const chipSize: {
+    small: {
+        desktop: string;
+        mobile: string;
+    };
+    medium: {
+        desktop: string;
+        mobile: string;
+    };
+    large: {
+        desktop: string;
+        mobile: string;
+    };
+};

package/components/Chip/constants.js

@@ -0,0 +1,21 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const chipClassnames = {
+    root: createUIKitClassname('chip'),
+    sizeSmall: createUIKitClassname('chip_size-small'),
+    sizeMedium: createUIKitClassname('chip_size-medium'),
+    sizeLarge: createUIKitClassname('chip_size-large'),
+    disabled: createUIKitClassname('chip_disabled'),
+    selected: createUIKitClassname('chip_selected'),
+    label: createUIKitClassname('chip__label'),
+    hasStatusIcon: createUIKitClassname('chip_has-status-icon'),
+    hasCounter: createUIKitClassname('chip_has-counter'),
+    hasEndAdornment: createUIKitClassname('chip_has-end-adornment'),
+    hasIcon: createUIKitClassname('chip_has-icon'),
+    startAdornment: createUIKitClassname('chip__start-adornment'),
+    endAdornment: createUIKitClassname('chip__end-adornment'),
+};
+export const chipSize = {
+    small: { desktop: '20px', mobile: '24px' },
+    medium: { desktop: '24px', mobile: '32px' },
+    large: { desktop: '32px', mobile: '40px' },
+};

package/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';

package/components/Chip/index.js

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/components/Chip/public.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';

package/components/Chip/public.js

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/components/Chip/styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HiddenInput: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Counter: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AdornmentWrapper: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Label: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/components/Chip/styles.js

@@ -0,0 +1,141 @@
+import { styled } from '../styled';
+import { Typography } from '../Typography';
+import { chipClassnames, chipSize } from './constants';
+export const Wrapper = styled.div `
+  cursor: pointer;
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(0, 2)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
+    duration: theme.transitions.duration.shortest,
+})};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+    border-color: ${({ theme }) => theme.palette.grey[400]};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.grey[800]};
+  }
+
+  &.${chipClassnames.hasIcon}, 
+  &.${chipClassnames.hasEndAdornment}:not(.${chipClassnames.hasStatusIcon}),
+  &.${chipClassnames.hasCounter}:not(.${chipClassnames.hasStatusIcon}) {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
+
+  &.${chipClassnames.hasStatusIcon} {
+    & .${chipClassnames.label} {
+      margin-left: ${({ theme }) => theme.microSpacing(1)};
+    }
+
+    &.${chipClassnames.hasCounter} .${chipClassnames.label},
+    &.${chipClassnames.hasEndAdornment} .${chipClassnames.label} {
+      margin-right: ${({ theme }) => theme.spacing(1)};
+    }
+  }
+
+  &.${chipClassnames.hasStatusIcon} {
+    padding-left: ${({ theme }) => theme.microSpacing(1)};
+  }
+
+  &.${chipClassnames.sizeSmall} {
+    height: ${chipSize.small.desktop};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        height: ${chipSize.small.mobile};
+    }
+  }
+
+  &.${chipClassnames.sizeMedium} {
+    height: ${chipSize.medium.desktop};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        height: ${chipSize.medium.mobile};
+    }
+  }
+
+  &.${chipClassnames.sizeLarge} {
+    height: ${chipSize.large.desktop};
+    padding: ${({ theme }) => theme.spacing(0, 3)};
+
+    &.${chipClassnames.hasStatusIcon} {
+      padding-left: ${({ theme }) => theme.spacing(2)};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      height: ${chipSize.large.mobile};
+    }
+  }
+
+  &.${chipClassnames.selected} {
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.grey[800]};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+      border-color: ${({ theme }) => theme.palette.grey[800]};
+    }
+
+    &:active {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.grey[400]};
+    }
+  }
+
+  &.${chipClassnames.disabled} {
+    cursor: default;
+
+    background-color: ${({ theme }) => theme.palette.components.disabled};
+    border-color: transparent;
+    mix-blend-mode: luminosity;
+
+    & .${chipClassnames.startAdornment},
+    & .${chipClassnames.endAdornment},
+    & .${chipClassnames.label} {
+      opacity: 0.3;
+    }
+  }
+`;
+export const HiddenInput = styled.input `
+  display: none;
+`;
+export const Counter = styled.div `
+  display: flex;
+  align-items: center;
+
+  &::before {
+    content: '';
+
+    display: inline-block;
+
+    width: 2px;
+    height: 2px;
+
+    /* Сдвигаем точку ниже, чтобы визуально выровнять её по центру строчных букв */
+    margin-top: 0.15em;
+    margin-right: ${({ theme }) => theme.spacing(1)};
+
+    background-color: ${({ theme }) => theme.palette.grey[800]};
+    border-radius: 50%;
+  }
+`;
+export const AdornmentWrapper = styled(Typography) `
+  display: flex;
+  align-items: center;
+`;
+export const Label = styled.label `
+  /* Убираем подсветку при нажатии на компонент */
+  -webkit-tap-highlight-color: transparent;
+`;

package/components/Chip/types.d.ts

@@ -0,0 +1,43 @@
+import type { ChangeEvent, ReactElement, ReactNode } from 'react';
+export type ChipProps = {
+    /**
+     * Содержимое компонента
+     */
+    label?: ReactNode;
+    /**
+     * Размер компонента
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Статус компонента. Заменяет параметр `icon`
+     */
+    status?: 'success' | 'warning' | 'error';
+    /**
+     * Иконка слева от `label`
+     */
+    icon?: ReactElement;
+    /**
+     * Название класса, применяется к корневому компоненту.
+     */
+    className?: string;
+    /**
+     * Если `true`, компонент будет недоступен для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если `true`, компонент отображается в выбранном состоянии
+     */
+    isSelected?: boolean;
+    /**
+     * Число счетчика справа от `label`. Заменяет параметр `endAdornment`
+     */
+    counter?: number;
+    /**
+     * Элемент, который добавляется в конец компонента
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Обработчик изменения состояния компонента
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/components/Chip/types.js

@@ -0,0 +1 @@
+export {};

package/components/Chip/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Chip/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Chip/useLogic/useLogic.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type ChipProps } from '../types';
+type UseLogicParams = ChipProps;
+export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, }: UseLogicParams) => {
+    classnames: string;
+    inputProps: {
+        checked: boolean | undefined;
+        onChange: ((event: import("react").ChangeEvent<HTMLInputElement, Element>) => void) | undefined;
+        type: string;
+        disabled: boolean | undefined;
+    };
+    label: import("react").ReactNode;
+    status: "success" | "warning" | "error" | undefined;
+    icon: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    counter: number | undefined;
+    endAdornment: import("react").ReactNode;
+    hasStartAdornment: boolean;
+    hasEndAdornment: boolean;
+};
+export {};

package/components/Chip/useLogic/useLogic.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { classNames } from '../../utils/classNames';
+import { chipClassnames } from '../constants';
+export const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, }) => {
+    const classnames = useMemo(() => classNames(className, chipClassnames.root, {
+        [chipClassnames.disabled]: isDisabled,
+        [chipClassnames.selected]: isSelected,
+        [chipClassnames.sizeSmall]: size === 'small',
+        [chipClassnames.sizeMedium]: size === 'medium',
+        [chipClassnames.sizeLarge]: size === 'large',
+        [chipClassnames.hasStatusIcon]: Boolean(status),
+        [chipClassnames.hasCounter]: Boolean(counter),
+        [chipClassnames.hasEndAdornment]: Boolean(endAdornment) && !counter,
+        [chipClassnames.hasIcon]: Boolean(icon) && !status,
+    }), [isSelected, isDisabled, size, status, counter, endAdornment, icon]);
+    const hasStartAdornment = Boolean(status || icon);
+    const hasEndAdornment = Boolean(endAdornment || counter);
+    return {
+        classnames,
+        inputProps: {
+            checked: isSelected,
+            onChange,
+            type: 'checkbox',
+            disabled: isDisabled,
+        },
+        label,
+        status,
+        icon,
+        counter,
+        endAdornment,
+        hasStartAdornment,
+        hasEndAdornment,
+    };
+};

package/node/components/BottomDrawer/BottomDrawer.js

@@ -12,6 +12,6 @@ const BottomDrawer = ({ title, drawerHeaderHeight = constants_1.DEFAULT_HEADER_H
             onClose(event, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "large", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "medium", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
 };
 exports.BottomDrawer = BottomDrawer;

package/node/components/CheckableTag/CheckableTag.d.ts

@@ -31,14 +31,14 @@ export type CheckableTagProps = Omit<TagProps, 'onChange' | 'startAddon' | 'endA
  * Тег с возможностью быть checked (по логике Checkbox)
  * @example
  * <CheckableTag
-   * label="tag"
-   * variant="contained"
-   * color="success"
-   * checked
-   * onChange={handleChecked}
-   * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
+ * label="tag"
+ * variant="contained"
+ * color="success"
+ * checked
+ * onChange={handleChecked}
+ * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
  * />
-
+ * @deprecated Используйте компонент Chip
  */
 export declare const CheckableTag: import("react").ForwardRefExoticComponent<Omit<TagProps, "onChange" | "variant" | "startAddon" | "endAddon"> & {
     /**

package/node/components/CheckableTag/CheckableTag.js

@@ -8,14 +8,14 @@ const styles_1 = require("./styles");
  * Тег с возможностью быть checked (по логике Checkbox)
  * @example
  * <CheckableTag
-   * label="tag"
-   * variant="contained"
-   * color="success"
-   * checked
-   * onChange={handleChecked}
-   * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
+ * label="tag"
+ * variant="contained"
+ * color="success"
+ * checked
+ * onChange={handleChecked}
+ * endAddon={(props: TagBadgeProps) => (<TagBadge {...props} badgeContent={'12'} />)}
  * />
-
+ * @deprecated Используйте компонент Chip
  */
 exports.CheckableTag = (0, react_1.forwardRef)(({ checked, variant = 'light', color = 'grey', onChange, disabled, startAddon: StartAddon, endAddon: EndAddon, ...tagProps }, ref) => {
     const checkableStartAddon = StartAddon

package/node/components/Chip/Chip.d.ts

@@ -0,0 +1,2 @@
+import type { ChipProps } from './types';
+export declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Chip/Chip.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../Typography");
+const ChipStatusIcon_1 = require("./ChipStatusIcon");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const Chip = (props) => {
+    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, } = (0, useLogic_1.useLogic)(props);
+    const renderStartAdornment = () => {
+        if (status) {
+            return (0, jsx_runtime_1.jsx)(ChipStatusIcon_1.ChipStatusIcon, { status: status });
+        }
+        if (icon) {
+            return icon;
+        }
+        return null;
+    };
+    const renderEndAdornment = () => {
+        if (counter) {
+            return (0, jsx_runtime_1.jsx)(styles_1.Counter, { children: counter });
+        }
+        if (endAdornment) {
+            return endAdornment;
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Label, { children: [(0, jsx_runtime_1.jsx)(styles_1.HiddenInput, { ...inputProps }), (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: classnames, children: [hasStartAdornment && ((0, jsx_runtime_1.jsx)(styles_1.AdornmentWrapper, { component: "span", className: constants_1.chipClassnames.startAdornment, children: renderStartAdornment() })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: constants_1.chipClassnames.label, component: "span", children: label }), hasEndAdornment && ((0, jsx_runtime_1.jsx)(styles_1.AdornmentWrapper, { component: "span", className: constants_1.chipClassnames.endAdornment, children: renderEndAdornment() }))] })] }));
+};
+exports.Chip = Chip;

package/node/components/Chip/ChipStatusIcon/ChipStatusIcon.d.ts

@@ -0,0 +1,5 @@
+type ChipStatusIconProps = {
+    status: 'success' | 'warning' | 'error';
+};
+export declare const ChipStatusIcon: ({ status }: ChipStatusIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/Chip/ChipStatusIcon/ChipStatusIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipStatusIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("./constants");
+const styled_1 = require("./styled");
+const ChipStatusIcon = ({ status }) => {
+    const classnames = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)(constants_1.chipStatusIconClassnames.root, {
+            [constants_1.chipStatusIconClassnames.success]: status === 'success',
+            [constants_1.chipStatusIconClassnames.warning]: status === 'warning',
+            [constants_1.chipStatusIconClassnames.error]: status === 'error',
+        });
+    }, [status]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StatusIcon, { className: classnames, viewBox: "0 0 20 20", width: "20px", height: "20px", children: (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "3.33333" }) }));
+};
+exports.ChipStatusIcon = ChipStatusIcon;

package/node/components/Chip/ChipStatusIcon/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const chipStatusIconClassnames: {
+    root: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/node/components/Chip/ChipStatusIcon/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipStatusIconClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.chipStatusIconClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('chip-status-icon'),
+    success: (0, createUIKitClassname_1.createUIKitClassname)('chip-status-icon_success'),
+    warning: (0, createUIKitClassname_1.createUIKitClassname)('chip-status-icon_warning'),
+    error: (0, createUIKitClassname_1.createUIKitClassname)('chip-status-icon_error'),
+};

package/node/components/Chip/ChipStatusIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipStatusIcon';

package/node/components/Chip/ChipStatusIcon/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChipStatusIcon"), exports);

package/node/components/Chip/ChipStatusIcon/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StatusIcon: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/Chip/ChipStatusIcon/styled.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIcon = void 0;
+const SvgIcon_1 = require("../../SvgIcon");
+const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
+exports.StatusIcon = (0, styled_1.styled)(SvgIcon_1.SvgIcon) `
+  &.${constants_1.chipStatusIconClassnames.success} {
+    color: ${({ theme }) => theme.palette.success[900]};
+  }
+
+  &.${constants_1.chipStatusIconClassnames.warning} {
+    color: ${({ theme }) => theme.palette.warning[900]};
+  }
+
+  &.${constants_1.chipStatusIconClassnames.error} {
+    color: ${({ theme }) => theme.palette.error[900]};
+  }
+`;

package/node/components/Chip/constants.d.ts

@@ -0,0 +1,29 @@
+export declare const chipClassnames: {
+    root: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
+    disabled: string;
+    selected: string;
+    label: string;
+    hasStatusIcon: string;
+    hasCounter: string;
+    hasEndAdornment: string;
+    hasIcon: string;
+    startAdornment: string;
+    endAdornment: string;
+};
+export declare const chipSize: {
+    small: {
+        desktop: string;
+        mobile: string;
+    };
+    medium: {
+        desktop: string;
+        mobile: string;
+    };
+    large: {
+        desktop: string;
+        mobile: string;
+    };
+};

package/node/components/Chip/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipSize = exports.chipClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.chipClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('chip'),
+    sizeSmall: (0, createUIKitClassname_1.createUIKitClassname)('chip_size-small'),
+    sizeMedium: (0, createUIKitClassname_1.createUIKitClassname)('chip_size-medium'),
+    sizeLarge: (0, createUIKitClassname_1.createUIKitClassname)('chip_size-large'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('chip_disabled'),
+    selected: (0, createUIKitClassname_1.createUIKitClassname)('chip_selected'),
+    label: (0, createUIKitClassname_1.createUIKitClassname)('chip__label'),
+    hasStatusIcon: (0, createUIKitClassname_1.createUIKitClassname)('chip_has-status-icon'),
+    hasCounter: (0, createUIKitClassname_1.createUIKitClassname)('chip_has-counter'),
+    hasEndAdornment: (0, createUIKitClassname_1.createUIKitClassname)('chip_has-end-adornment'),
+    hasIcon: (0, createUIKitClassname_1.createUIKitClassname)('chip_has-icon'),
+    startAdornment: (0, createUIKitClassname_1.createUIKitClassname)('chip__start-adornment'),
+    endAdornment: (0, createUIKitClassname_1.createUIKitClassname)('chip__end-adornment'),
+};
+exports.chipSize = {
+    small: { desktop: '20px', mobile: '24px' },
+    medium: { desktop: '24px', mobile: '32px' },
+    large: { desktop: '32px', mobile: '40px' },
+};

package/node/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';

package/node/components/Chip/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });

package/node/components/Chip/public.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';

package/node/components/Chip/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });

package/node/components/Chip/styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HiddenInput: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Counter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AdornmentWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Label: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/node/components/Chip/styles.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.AdornmentWrapper = exports.Counter = exports.HiddenInput = exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
+exports.Wrapper = styled_1.styled.div `
+  cursor: pointer;
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(0, 2)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
+    duration: theme.transitions.duration.shortest,
+})};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+    border-color: ${({ theme }) => theme.palette.grey[400]};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.grey[800]};
+  }
+
+  &.${constants_1.chipClassnames.hasIcon}, 
+  &.${constants_1.chipClassnames.hasEndAdornment}:not(.${constants_1.chipClassnames.hasStatusIcon}),
+  &.${constants_1.chipClassnames.hasCounter}:not(.${constants_1.chipClassnames.hasStatusIcon}) {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
+
+  &.${constants_1.chipClassnames.hasStatusIcon} {
+    & .${constants_1.chipClassnames.label} {
+      margin-left: ${({ theme }) => theme.microSpacing(1)};
+    }
+
+    &.${constants_1.chipClassnames.hasCounter} .${constants_1.chipClassnames.label},
+    &.${constants_1.chipClassnames.hasEndAdornment} .${constants_1.chipClassnames.label} {
+      margin-right: ${({ theme }) => theme.spacing(1)};
+    }
+  }
+
+  &.${constants_1.chipClassnames.hasStatusIcon} {
+    padding-left: ${({ theme }) => theme.microSpacing(1)};
+  }
+
+  &.${constants_1.chipClassnames.sizeSmall} {
+    height: ${constants_1.chipSize.small.desktop};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        height: ${constants_1.chipSize.small.mobile};
+    }
+  }
+
+  &.${constants_1.chipClassnames.sizeMedium} {
+    height: ${constants_1.chipSize.medium.desktop};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        height: ${constants_1.chipSize.medium.mobile};
+    }
+  }
+
+  &.${constants_1.chipClassnames.sizeLarge} {
+    height: ${constants_1.chipSize.large.desktop};
+    padding: ${({ theme }) => theme.spacing(0, 3)};
+
+    &.${constants_1.chipClassnames.hasStatusIcon} {
+      padding-left: ${({ theme }) => theme.spacing(2)};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      height: ${constants_1.chipSize.large.mobile};
+    }
+  }
+
+  &.${constants_1.chipClassnames.selected} {
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    border-color: ${({ theme }) => theme.palette.grey[800]};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+      border-color: ${({ theme }) => theme.palette.grey[800]};
+    }
+
+    &:active {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.grey[400]};
+    }
+  }
+
+  &.${constants_1.chipClassnames.disabled} {
+    cursor: default;
+
+    background-color: ${({ theme }) => theme.palette.components.disabled};
+    border-color: transparent;
+    mix-blend-mode: luminosity;
+
+    & .${constants_1.chipClassnames.startAdornment},
+    & .${constants_1.chipClassnames.endAdornment},
+    & .${constants_1.chipClassnames.label} {
+      opacity: 0.3;
+    }
+  }
+`;
+exports.HiddenInput = styled_1.styled.input `
+  display: none;
+`;
+exports.Counter = styled_1.styled.div `
+  display: flex;
+  align-items: center;
+
+  &::before {
+    content: '';
+
+    display: inline-block;
+
+    width: 2px;
+    height: 2px;
+
+    /* Сдвигаем точку ниже, чтобы визуально выровнять её по центру строчных букв */
+    margin-top: 0.15em;
+    margin-right: ${({ theme }) => theme.spacing(1)};
+
+    background-color: ${({ theme }) => theme.palette.grey[800]};
+    border-radius: 50%;
+  }
+`;
+exports.AdornmentWrapper = (0, styled_1.styled)(Typography_1.Typography) `
+  display: flex;
+  align-items: center;
+`;
+exports.Label = styled_1.styled.label `
+  /* Убираем подсветку при нажатии на компонент */
+  -webkit-tap-highlight-color: transparent;
+`;

package/node/components/Chip/types.d.ts

@@ -0,0 +1,43 @@
+import type { ChangeEvent, ReactElement, ReactNode } from 'react';
+export type ChipProps = {
+    /**
+     * Содержимое компонента
+     */
+    label?: ReactNode;
+    /**
+     * Размер компонента
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Статус компонента. Заменяет параметр `icon`
+     */
+    status?: 'success' | 'warning' | 'error';
+    /**
+     * Иконка слева от `label`
+     */
+    icon?: ReactElement;
+    /**
+     * Название класса, применяется к корневому компоненту.
+     */
+    className?: string;
+    /**
+     * Если `true`, компонент будет недоступен для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если `true`, компонент отображается в выбранном состоянии
+     */
+    isSelected?: boolean;
+    /**
+     * Число счетчика справа от `label`. Заменяет параметр `endAdornment`
+     */
+    counter?: number;
+    /**
+     * Элемент, который добавляется в конец компонента
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Обработчик изменения состояния компонента
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/node/components/Chip/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/Chip/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/Chip/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/Chip/useLogic/useLogic.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type ChipProps } from '../types';
+type UseLogicParams = ChipProps;
+export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, }: UseLogicParams) => {
+    classnames: string;
+    inputProps: {
+        checked: boolean | undefined;
+        onChange: ((event: import("react").ChangeEvent<HTMLInputElement, Element>) => void) | undefined;
+        type: string;
+        disabled: boolean | undefined;
+    };
+    label: import("react").ReactNode;
+    status: "success" | "warning" | "error" | undefined;
+    icon: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    counter: number | undefined;
+    endAdornment: import("react").ReactNode;
+    hasStartAdornment: boolean;
+    hasEndAdornment: boolean;
+};
+export {};

package/node/components/Chip/useLogic/useLogic.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("../constants");
+const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, }) => {
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, constants_1.chipClassnames.root, {
+        [constants_1.chipClassnames.disabled]: isDisabled,
+        [constants_1.chipClassnames.selected]: isSelected,
+        [constants_1.chipClassnames.sizeSmall]: size === 'small',
+        [constants_1.chipClassnames.sizeMedium]: size === 'medium',
+        [constants_1.chipClassnames.sizeLarge]: size === 'large',
+        [constants_1.chipClassnames.hasStatusIcon]: Boolean(status),
+        [constants_1.chipClassnames.hasCounter]: Boolean(counter),
+        [constants_1.chipClassnames.hasEndAdornment]: Boolean(endAdornment) && !counter,
+        [constants_1.chipClassnames.hasIcon]: Boolean(icon) && !status,
+    }), [isSelected, isDisabled, size, status, counter, endAdornment, icon]);
+    const hasStartAdornment = Boolean(status || icon);
+    const hasEndAdornment = Boolean(endAdornment || counter);
+    return {
+        classnames,
+        inputProps: {
+            checked: isSelected,
+            onChange,
+            type: 'checkbox',
+            disabled: isDisabled,
+        },
+        label,
+        status,
+        icon,
+        counter,
+        endAdornment,
+        hasStartAdornment,
+        hasEndAdornment,
+    };
+};
+exports.useLogic = useLogic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.27.1",
+  "version": "4.28.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {