@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Response/Response.constant.js

@@ -0,0 +1,68 @@
+import { responseIcon } from './index';
+const RESPONSE_MESSAGES = {
+    error: {
+        appearance: 'error ghost',
+        title: 'Ошибка',
+        desc: 'Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com',
+        // code: '500',
+        primaryButtonAppearance: 'errorPrimary sizeXXL solid rounded',
+        primaryButtonLabel: 'ОК',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
+    errorAccessDenied: {
+        appearance: 'unableLoadData ghost',
+        title: 'Доступ ограничен',
+        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
+        code: '401/403',
+        imageSrc: responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
+    errorNetwork: {
+        appearance: 'unableLoadData ghost',
+        title: 'Ошибка соединения',
+        desc: 'Не удалось подключиться. Проверьте интернет-соединение и повторите попытку',
+        // code: null,
+        imageSrc: responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Обновить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
+    fail: {
+        appearance: 'fail ghost',
+        // code: '500',
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'ОК',
+    },
+    nothingFound: {
+        appearance: 'nothingFound ghost',
+        title: 'Ничего не найдено',
+        desc: 'Нет данных по заданным параметрам',
+        // code: '500',
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Сбросить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
+    empty: {
+        appearance: 'empty ghost',
+        title: 'Список пуст',
+        desc: 'Нет данных по заданным параметрам',
+        code: '200',
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'ОК',
+    },
+    warning: {
+        appearance: 'warning ghost',
+        title: 'Внимание',
+        primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
+};
+export { RESPONSE_MESSAGES };

package/dist/components/Response/Response.interface.js

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

package/dist/components/Response/Response.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import clsx from 'clsx';
+import { urlWithAssetPrefix } from 'src/hoc/urlWithAssetPrefix';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Button } from 'src/components/Button';
+import { Group } from 'src/components/Group';
+import { Text } from 'src/components/Text';
+import { responseAppearance } from './Response.appearance';
+const responseConfig = {
+    appearance: responseAppearance,
+    setAppearance: (appearanceConfig) => {
+        responseConfig.appearance = appearanceConfig;
+    },
+};
+const Response = urlWithAssetPrefix(forwardRef(function Response(props, ref) {
+    const { appearance, className, dataTestId, dataTour, width, height, title, desc, primaryButton, secondaryButton, showPrimaryButton = true, showSecondaryButton = true, before, after, isSkeleton, isBottomButton, onClickPrimaryButton, onClickSecondaryButton, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, responseConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, descTextWeight, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, heightClass, imageSrc, primaryButtonAfter, primaryButtonAppearance, primaryButtonBefore, primaryButtonFill, primaryButtonFillHover, primaryButtonLabel, primaryButtonLabelTextColor, primaryButtonLabelTextSize, primaryButtonShape, primaryButtonSize, primaryButtonWidth, secondaryButtonAfter, secondaryButtonAppearance, secondaryButtonBefore, secondaryButtonFill, secondaryButtonFillHover, secondaryButtonLabel, secondaryButtonLabelTextColor, secondaryButtonLabelTextSize, secondaryButtonShape, secondaryButtonSize, secondaryButtonWidth, shapeClass, shapeStrengthClass, svgFillClass, SvgImage, svgPathFillClass, svgSrc, widthClass, } = propsGenerator;
+    const ImageComponent = useMemo(() => {
+        const src = imageSrc || svgSrc;
+        const Image = SvgImage;
+        if (Image) {
+            const sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return _jsx(Image, { ...sizes });
+        }
+        if (src) {
+            return _jsx("img", { src: src });
+        }
+        return null;
+    }, [imageSrc, svgSrc, SvgImage, width, height]);
+    const { styles: responseStyles, wrapper: wrapperStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'response', isBottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, isSkeleton && `response_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, _jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (_jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), _jsxs("div", { className: "response__wrapper-inner", children: [title && (_jsx(Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (_jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
+                primaryButton ||
+                secondaryButtonLabel ||
+                secondaryButton ||
+                appearanceConfig) && (_jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel && showPrimaryButton ? (_jsx(Button, { appearance: primaryButtonAppearance, className: "response__button-item", width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel && showSecondaryButton ? (_jsx(Button, { appearance: secondaryButtonAppearance, className: "response__button-item", width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
+}));
+export { Response, responseConfig };

package/dist/components/Response/appearance/responseConfirm.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceConfirm = {
+    confirm: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Confirm),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceConfirm };

package/dist/components/Response/appearance/responseDanger.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceDanger = {
+    danger: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Danger),
+        primaryButtonAppearance: 'dangerPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'dangerPrimary',
+        svgPathFill: 'dangerPrimary',
+    },
+};
+export { responseAppearanceDanger };

package/dist/components/Response/appearance/responseEmpty.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceEmpty = {
+    empty: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Empty),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceEmpty };

package/dist/components/Response/appearance/responseError.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceError = {
+    error: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Error),
+        primaryButtonAppearance: 'errorPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'errorPrimary',
+        svgPathFill: 'errorPrimary',
+    },
+};
+export { responseAppearanceError };

package/dist/components/Response/appearance/responseFail.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceFail = {
+    fail: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Fail),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceFail };

package/dist/components/Response/appearance/responseNothingFound.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceNothingFound = {
+    nothingFound: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.NothingFound),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceNothingFound };

package/dist/components/Response/appearance/responseRefresh.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceRefresh = {
+    refresh: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Refresh),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceRefresh };

package/dist/components/Response/appearance/responseStyle.js

@@ -0,0 +1,14 @@
+const responseAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { responseAppearanceStyle };

package/dist/components/Response/appearance/responseSuccess.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceSuccess = {
+    success: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Success),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'accentPrimary',
+        svgPathFill: 'accentPrimary',
+    },
+};
+export { responseAppearanceSuccess };

package/dist/components/Response/appearance/responseUnableLoadData.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceUnableLoadData = {
+    unableLoadData: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.UnableLoadData),
+        primaryButtonAppearance: 'accentPrimary sizeXXL solid',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceQuaternary',
+    },
+};
+export { responseAppearanceUnableLoadData };

package/dist/components/Response/appearance/responseWarning.js

@@ -0,0 +1,15 @@
+import { responseIcon } from '../img';
+const responseAppearanceWarning = {
+    warning: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        imageSrc: String(responseIcon.Warning),
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid',
+        svgFill: 'warningPrimary',
+        svgPathFill: 'warningPrimary',
+    },
+};
+export { responseAppearanceWarning };

package/dist/components/Response/img/index.js

@@ -0,0 +1,25 @@
+import Confirm from './Confirm.svg';
+import Danger from './Danger.svg';
+import Empty from './Empty.svg';
+import Error from './Error.svg';
+import Fail from './Fail.svg';
+import NothingFound from './NothingFound.svg';
+import Refresh from './Refresh.svg';
+import Search from './Search.svg';
+import Success from './Success.svg';
+import UnableLoadData from './UnableLoadData.svg';
+import Warning from './Warning.svg';
+const responseIcon = {
+    Confirm: Confirm,
+    Danger: Danger,
+    Empty: Empty,
+    Error: Error,
+    Fail: Fail,
+    NothingFound: NothingFound,
+    Refresh: Refresh,
+    Search: Search,
+    Success: Success,
+    UnableLoadData: UnableLoadData,
+    Warning: Warning,
+};
+export { responseIcon };

package/dist/components/Response/index.js

@@ -0,0 +1,5 @@
+import { responseIcon } from './img';
+import { Response, responseConfig } from './Response';
+import { responseAppearance } from './Response.appearance';
+import { RESPONSE_MESSAGES } from './Response.constant';
+export { Response, RESPONSE_MESSAGES, responseAppearance, responseConfig, responseIcon, };

package/dist/components/SVGContent/SVGContent.interface.js

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

package/dist/components/SVGContent/SVGContent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import SVG from 'react-inlinesvg';
+import { urlWithAssetPrefix } from 'src/hoc/urlWithAssetPrefix';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+const SVGContent = urlWithAssetPrefix(forwardRef(function SVGContent(props, ref) {
+    const { className, dataTestId, dataTour, src, SvgImage } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { svgFillClass, svgFillHoverClass } = propsGenerator;
+    const { styles: svgContentStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: svgContentStyles, children: [src && _jsx(SVG, { src: src }), SvgImage && _jsx(SvgImage, {})] }));
+}));
+export { SVGContent };

package/dist/components/SVGContent/index.js

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

package/dist/components/ScrollOnDrag/ScrollOnDrag.interface.js

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

package/dist/components/ScrollOnDrag/ScrollOnDrag.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import ScrollContainer, { useScrollContainer } from 'react-indiana-drag-scroll';
+import SimpleBar from 'simplebar-react';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function ScrollOnDrag(props) {
+    const { className, dataTestId, dataTour, scrollContainerProps, isScrollbar, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { ref } = useScrollContainer();
+    const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, heightClass, widthClass = 'fill', } = propsGenerator;
+    const { scrollContainer: scrollContainerStyles, styles: styles } = useStyles(props);
+    const ScrollOnDragWrapper = isScrollbar ? SimpleBar : React.Fragment;
+    const fixedProps = isScrollbar ? { scrollableNodeProps: { ref } } : {};
+    return (_jsx(ScrollOnDragWrapper, { ...fixedProps, children: _jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: _jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
+}
+export { ScrollOnDrag };

package/dist/components/ScrollOnDrag/index.js

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

package/dist/components/ScrollToView/ScrollToView.interface.js

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

package/dist/components/ScrollToView/ScrollToView.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ScrollLink } from 'react-scroll';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+const ScrollToView = ScrollLink(function ScrollToView(props) {
+    const { id, className, dataTestId, dataTour, styles, tag: Tag = 'div', onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, alignItemsClass, alignSelfClass, textColorActiveClass, textColorClass, textColorHoverClass, heightClass, widthClass, } = propsGenerator;
+    const { styles: scrollToViewStyles } = useStyles(props);
+    return (_jsx(Tag, { id: id, className: clsx(className, 'scroll-to-view', alignItemsClass && `align-items_${alignItemsClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, textColorClass && `scroll-to-view_text-color_${textColorClass}`, textColorActiveClass &&
+            `scroll-to-view_text-color_active_${textColorActiveClass}`, textColorHoverClass &&
+            `scroll-to-view_text-color_hover_${textColorHoverClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, directionClass && `direction_${directionClass}`, alignSelfClass && `align-self_${alignSelfClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, scrollToViewStyles, styles), onClick: onClick, children: children }));
+});
+export { ScrollToView };

package/dist/components/ScrollToView/index.js

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

package/dist/components/Scrollbar/Scrollbar.interface.js

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

package/dist/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Scrollbar as ScrollbarJS } from 'react-scrollbars-custom';
+function Scrollbar(props) {
+    const { className, dataTestId, dataTour, noDefaultStyles, scrollbarWidth, scrollHeight = '200', onScroll, children, } = props;
+    return (_jsx(ScrollbarJS, { className: clsx('scrollbar', className), contentProps: {
+            className: 'scrollbar__scroll-content',
+        }, "data-testid": dataTestId, "data-tour": dataTour, noDefaultStyles: noDefaultStyles, scrollbarWidth: scrollbarWidth, scrollerProps: {
+            className: 'scrollbar__scroll',
+        }, style: { height: scrollHeight + 'px' }, thumbXProps: {
+            className: 'scrollbar__track-x-item',
+        }, thumbYProps: {
+            className: 'scrollbar__track-y-item',
+        }, trackXProps: {
+            className: 'scrollbar__track-x',
+        }, trackYProps: {
+            className: 'scrollbar__track-y',
+        }, wrapperProps: {
+            className: 'scrollbar__wrapper',
+        }, onScroll: onScroll, children: children }));
+}
+export { Scrollbar };

package/dist/components/Scrollbar/index.js

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

package/dist/components/Search/Search.appearance.js

@@ -0,0 +1,19 @@
+import { searchAppearanceDefault } from './appearance/searchDefault';
+import { searchAppearanceDisabled } from './appearance/searchDisabled';
+import { searchAppearanceError } from './appearance/searchError';
+import { searchAppearanceRequire } from './appearance/searchRequire';
+import { searchAppearanceShape } from './appearance/searchShape';
+import { searchAppearanceSize } from './appearance/searchSize';
+import { searchAppearanceStyle } from './appearance/searchStyle';
+import { searchAppearanceSuccess } from './appearance/searchSuccess';
+const searchAppearance = {
+    ...searchAppearanceSize,
+    ...searchAppearanceStyle,
+    ...searchAppearanceDefault,
+    ...searchAppearanceError,
+    ...searchAppearanceSuccess,
+    ...searchAppearanceRequire,
+    ...searchAppearanceDisabled,
+    ...searchAppearanceShape,
+};
+export { searchAppearance };

package/dist/components/Search/Search.interface.js

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

package/dist/components/Search/SearchInput.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { searchAppearance } from './Search.appearance';
+const searchInputConfig = {
+    appearance: searchAppearance,
+    setAppearance: (appearanceConfig) => {
+        searchInputConfig.appearance = appearanceConfig;
+    },
+};
+const SearchInput = React.forwardRef(function SearchInput(props, ref) {
+    const { appearance, className, dataTestId, dataTour, placeholder, value, before, after, isActive, isDisabled, isSkeleton, onClickClean, onChange, onFocus, onKeyDown, } = props;
+    const onChangeSearchInput = useCallback((event) => {
+        onChange && onChange(event.target.value);
+    }, [onChange]);
+    const onClickClearIcon = useCallback((event) => {
+        event?.stopPropagation();
+        onChange && onChange('');
+        if (onClickClean) {
+            onClickClean();
+        }
+    }, [onChange, onClickClean]);
+    const appearanceConfig = useAppearanceConfig(appearance, searchInputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { size, fillClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, iconAfter, iconAfterFill, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeSize, iconBeforeSrc, iconClear, iconClearFill, iconClearSize, iconClearSrc, inputFillClass, inputTextColorClass, inputTextSizeClass, inputTextStyleClass, inputTextWeightClass, placeholderTextColor, placeholderTextSize, placeholderTextStyle, placeholderTextWeight, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    const { styles: searchInputStyles } = useStyles(props);
+    return (_jsxs("label", { className: clsx(className, 'search-input', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, size && `search-input_size_${size}`, isSkeleton && `search-input_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), _jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [_jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+                            inputTextWeightClass ||
+                            inputTextColorClass ||
+                            inputTextStyleClass) &&
+                            'text', inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextStyleClass && `text-style_${inputTextStyleClass}`), type: "text", ref: ref, required: true, value: value || '', onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx("div", { className: "search-input__placeholder", children: _jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (_jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
+});
+// @ts-expect-error
+SearchInput.DEFAULT_REF_STATE = {
+    input: null,
+};
+export { SearchInput, searchInputConfig };

package/dist/components/Search/SearchResult.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Scrollbar } from 'src/components/Scrollbar';
+const SearchResult = React.forwardRef(function SearchResult(props) {
+    const { className, dataTestId, dataTour, scrollHeight, before, after, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
+    return (_jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: _jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (_jsx(Scrollbar, { scrollHeight: scrollHeight || 300, children: children })), after] }) }));
+});
+export { SearchResult };

package/dist/components/Search/appearance/searchDefault.js

@@ -0,0 +1,23 @@
+const searchAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderQuaternary',
+        borderColorHover: 'surfaceBorderHoverQuaternary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    defaultSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderSecondary',
+        borderColorHover: 'surfaceBorderHoverSecondary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { searchAppearanceDefault };

package/dist/components/Search/appearance/searchDisabled.js

@@ -0,0 +1,13 @@
+const searchAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderHoverQuaternary',
+        iconAfterFill: 'surfaceItemPrimary',
+        iconBeforeFill: 'surfaceItemPrimary',
+        iconClearFill: 'surfaceItemPrimary',
+        inputTextColor: 'surfaceTextDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+    },
+};
+export { searchAppearanceDisabled };

package/dist/components/Search/appearance/searchError.js

@@ -0,0 +1,13 @@
+const searchAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        borderColorHover: 'errorBorderHoverQuaternary',
+        iconAfterFill: 'errorItemSecondary',
+        iconBeforeFill: 'errorItemSecondary',
+        iconClearFill: 'errorItemSecondary',
+        inputTextColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { searchAppearanceError };

package/dist/components/Search/appearance/searchRequire.js

@@ -0,0 +1,13 @@
+const searchAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderSecondary',
+        borderColorHover: 'warningBorderHoverSecondary',
+        iconAfterFill: 'warningItemSecondary',
+        iconBeforeFill: 'warningItemSecondary',
+        iconClearFill: 'warningItemSecondary',
+        inputTextColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { searchAppearanceRequire };

package/dist/components/Search/appearance/searchShape.js

@@ -0,0 +1,25 @@
+const searchAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { searchAppearanceShape };