@itcase/ui 1.9.57 → 1.9.59

package/dist/primitives_es_BNlMaZfZ.js

@@ -0,0 +1,2672 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo, createContext, useState, useCallback, useEffect, useContext, memo, useRef, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
+import upperFirst from 'lodash/upperFirst';
+import { v4 } from 'uuid';
+import { axiosInstanceITCase, formatURL } from '@itcase/common';
+import { useMediaQuery } from 'react-responsive';
+import maxBy from 'lodash/maxBy';
+import SVG from 'react-inlinesvg';
+
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = useMemo(() => {
+        if (appearance) {
+            const appearanceProps = appearance.split(' ').reduce((resultConfig, appearanceKey) => ({
+                ...resultConfig,
+                ...componentConfig.appearance?.[appearanceKey],
+            }), {});
+            if (isDisabled &&
+                (componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary)) {
+                Object.assign(appearanceProps, componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary);
+            }
+            return appearanceProps;
+        }
+        if (isDisabled) {
+            return (componentConfig?.appearance?.disabled ||
+                componentConfig?.appearance?.disabledPrimary);
+        }
+        return {};
+    }, [appearance, componentConfig?.appearance, isDisabled]);
+    return appearanceConfig;
+};
+
+const STATUSES = {
+    error: 'error',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+};
+const NotificationsContext = createContext([]);
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const NotificationsAPIContext = createContext({
+    hideNotifications: (targetId) => { },
+    showNotification: (notification, onClose) => { },
+    notificationStatuses: STATUSES,
+});
+/* eslint-enable @typescript-eslint/no-unused-vars */
+function NotificationsProvider(props) {
+    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
+    const [notificationsList, setNotificationsList] = useState(() => {
+        // We need to set id to every notification item and original list also be have new id's
+        return (initialNotificationsList || []).map((notificationItem) => {
+            return createNotification(notificationItem, notificationItem.onClose);
+        });
+    });
+    const hideNotifications = useCallback((targetId) => {
+        // If not target, then nothing to hide
+        if (!targetId) {
+            return;
+        }
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.filter((notificationItem) => {
+                // Check on need to hide, if current notification is target for hide
+                const isNeedToHide = String(notificationItem.id) === String(targetId);
+                // Callback for close if exists
+                if (isNeedToHide) {
+                    clearTimeout(notificationItem._closeTimeout);
+                    // @typescript-eslint/no-unused-expressions
+                    notificationItem.onClose && notificationItem.onClose();
+                }
+                // Save in state if no need to hide
+                return !isNeedToHide;
+            });
+            // Set new notifications list without target item to state
+            return newState;
+        });
+    }, []);
+    const showNotification = useCallback((notification, onClose) => {
+        const newNotificationItem = createNotification(notification, onClose);
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.slice();
+            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
+            // Add new notification
+            if (existsNotificationIndex === -1) {
+                return [...newState, newNotificationItem];
+            }
+            // Or update exists notification
+            const updatedNotificationItem = newState[existsNotificationIndex];
+            // Clear timeout to avoid close event for updated notification
+            clearTimeout(updatedNotificationItem._closeTimeout);
+            updatedNotificationItem._closeTimeout = undefined;
+            // Replace exists notification by new one
+            newState[existsNotificationIndex] = newNotificationItem;
+            return newState;
+        });
+        if (newNotificationItem.closeByTime) {
+            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
+        }
+        return newNotificationItem;
+    }, 
+    // "hideNotifications" is never changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const notificationsAPI = useMemo(() => ({
+        hideNotifications: hideNotifications,
+        notificationStatuses: STATUSES,
+        showNotification: showNotification,
+    }), 
+    // Functions is never changes, no sense to set as dependencies
+    // eslint-disable-next-line
+    []);
+    useEffect(() => {
+        // Set timeout for initial notifications list one time on first render
+        notificationsList.forEach((notificationItem) => {
+            if (notificationItem.closeByTime) {
+                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+            }
+        });
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: (responseError) => {
+                    if (responseError.message) {
+                        // prevent from showing many network errors
+                        const errorListToDedupe = ['network'];
+                        const id = errorListToDedupe.includes(responseError.key)
+                            ? responseError.key
+                            : undefined;
+                        showNotification({
+                            id: id,
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+}
+function useNotifications() {
+    return useContext(NotificationsContext);
+}
+function useNotificationsAPI() {
+    return useContext(NotificationsAPIContext);
+}
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
+function createNotification(notification, onClose) {
+    // Default notification item properties
+    let id = v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let type = 'float';
+    let buttonLabel = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let appearance = statusToAppearanceList[status];
+    let after = null;
+    let isLoading = false;
+    let closeIconAppearance = '';
+    let onClickButton = () => { };
+    if (typeof notification === 'string') {
+        text = notification;
+    }
+    else if (typeof notification === 'object') {
+        id = String(notification.id ?? id);
+        title = notification.title ?? title;
+        text = notification.text ?? text;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        type = notification.type ?? type;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
+        status = notification.status ?? status;
+        closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
+        after = notification.after ?? after;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
+    }
+    return {
+        id: id,
+        appearance: appearance,
+        type: type,
+        title: title,
+        status: status,
+        text: text,
+        buttonLabel: buttonLabel,
+        after: after,
+        closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
+        onClickButton: onClickButton,
+        onClose: onClose,
+    };
+}
+
+var tablet = "48em";
+var mediaQueries = {
+	"mobile-tiny": "15em",
+	"mobile-super-extra-large": "40em",
+	tablet: tablet,
+	"desktop-small": "60em",
+	"desktop-huge": "160em"
+};
+
+const isSSR = typeof window === 'undefined';
+function useMediaQueries(userDevice = {}) {
+  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
+  // prettier-ignore
+  const isMobile = useMediaQuery({
+    minWidth: mediaQueries['mobile-tiny'],
+    maxWidth: mediaQueries['tablet']
+  }) || isSSR && Boolean(userDevice.isMobile);
+  // const isMobileTiny = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-tiny'],
+  //   maxWidth: mediaQueries['mobile-small'],
+  // })
+  // const isMobileSmall = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-small'],
+  //   maxWidth: mediaQueries['mobile-medium'],
+  // })
+  // const isMobileMedium = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-medium'],
+  //   maxWidth: mediaQueries['mobile-normal'],
+  // })
+  // const isMobileNormal = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-normal'],
+  //   maxWidth: mediaQueries['mobile-large'],
+  // })
+  // const isMobileStandart = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-large'],
+  //   maxWidth: mediaQueries['mobile-extra-large'],
+  // })
+  // const isMobileLarge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-extra-large'],
+  //   maxWidth: mediaQueries['mobile-super-extra-large'],
+  // })
+  useMediaQuery({
+    minWidth: mediaQueries['mobile-super-extra-large'],
+    maxWidth: mediaQueries['tablet']
+  });
+  // prettier-ignore
+  const isTablet = useMediaQuery({
+    minWidth: mediaQueries['tablet'],
+    maxWidth: mediaQueries['desktop-small']
+  }) || isSSR && Boolean(userDevice.isTablet);
+  // const isTabletSmall = useMediaQuery({
+  //   minWidth: mediaQueries['tablet-small'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // const isTabletLarge = useMediaQuery({
+  //   minWidth: mediaQueries['tablet'],
+  //   maxWidth: mediaQueries['tablet-large'],
+  // })
+  // prettier-ignore
+  const isDesktop = useMediaQuery({
+    minWidth: mediaQueries['desktop-small'],
+    maxWidth: mediaQueries['desktop-super-huge']
+  }) || isSSR && Boolean(userDevice.isDesktop);
+  // const isDesktopSmall = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-small'],
+  //   maxWidth: mediaQueries['desktop-medium'],
+  // })
+  // const isDesktopMedium = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-medium'],
+  //   maxWidth: mediaQueries['desktop-normal'],
+  // })
+  // const isDesktopNormal = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-normal'],
+  //   maxWidth: mediaQueries['desktop-large'],
+  // })
+  // const isDesktopStandart = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-large'],
+  //   maxWidth: mediaQueries['desktop-extra-large'],
+  // })
+  // const isDesktopLarge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-extra-large'],
+  //   maxWidth: mediaQueries['desktop-super-extra-large'],
+  // })
+  // const isDesktopHuge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-super-extra-large'],
+  //   maxWidth: mediaQueries['desktop-huge'],
+  // })
+  const isDesktopMega = useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  const deviceTypes = useMemo(() => ({
+    // isWarning,
+    isMobile: isMobile,
+    // isMobileTiny,
+    // isMobileSmall,
+    // isMobileMedium,
+    // isMobileNormal,
+    // isMobileStandart,
+    // isMobileLarge,
+    isMobileHuge: isMobile,
+    isTablet: isTablet,
+    // isTabletSmall,
+    // isTabletLarge,
+    isDesktop: isDesktop,
+    // isDesktopSmall,
+    // isDesktopMedium,
+    // isDesktopNormal,
+    // isDesktopStandart,
+    // isDesktopLarge,
+    // isDesktopHuge,
+    isDesktopMega: isDesktopMega
+  }), [isMobile, isTablet, isDesktop, isDesktopMega]);
+  return deviceTypes;
+}
+
+/**
+ * @example
+ * mergeAppearanceKeys(' ', '1', undefined, '2', '1') === '1 2'
+ */
+const mergeAppearanceKeys = (...appearances) => {
+    const trimmedAppearances = appearances
+        .map((appearance) => appearance?.trim())
+        .filter(Boolean);
+    if (trimmedAppearances.length < 2) {
+        return trimmedAppearances[0] ?? '';
+    }
+    const uniqueAppearances = Array.from(new Set(trimmedAppearances));
+    return uniqueAppearances.join(' ');
+};
+
+const setViewportProperty = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+};
+
+const UserDeviceContext = createContext({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: '',
+    deviceCurrentType: '',
+    deviceTypesList: [],
+});
+const UIProvider = memo(function UIProvider(props) {
+    const { userDeviceState = {}, children } = props;
+    /** NOTE:
+     * Remember that the "useMediaQueries" hook works by next scenario:
+     * when changing the device type(browser width), the hook will first "enable"
+     * the new type(set true), and then "disable" the previous one(set false),
+     * what provoke to double rendering, and in moment we have two different types as "true".
+     * We will need to look at how to change this behavior.
+     */
+    const allDevicesTypes = useMediaQueries(userDeviceState);
+    const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
+    const deviceCurrentMainType = (isMobile && 'mobile') ||
+        (isTablet && 'tablet') ||
+        (isDesktop && 'desktop') ||
+        '';
+    const [deviceCurrentType, deviceTypesList] = useMemo(() => {
+        const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
+        // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
+        let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
+        // If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
+        (key) => fullNamedDeviceTypes[key]);
+        // Or set main type (e.g. "isMobile")
+        if (!deviceCurrentType) {
+            deviceCurrentType = deviceCurrentMainType;
+        }
+        deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
+        // On server side render we doesn't known user device and we need to set special word
+        return [deviceCurrentType || '_none_', deviceTypesList];
+    }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
+    const deviceContextState = useMemo(() => {
+        return {
+            ...allDevicesTypes,
+            deviceCurrentMainType: deviceCurrentMainType,
+            deviceCurrentType: deviceCurrentType,
+            deviceTypesList: deviceTypesList,
+        };
+    }, [
+        allDevicesTypes,
+        deviceCurrentMainType,
+        deviceCurrentType,
+        deviceTypesList,
+    ]);
+    useEffect(() => {
+        setViewportProperty();
+        window.addEventListener('resize', setViewportProperty);
+    }, []);
+    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
+});
+function useUserDeviceContext() {
+    const context = useContext(UserDeviceContext);
+    if (!context) {
+        throw new Error('useUserDeviceContext is not defined');
+    }
+    return context;
+}
+
+const getStyleAttributeKey = (targetStyleAttribute) => {
+    return Array.isArray(targetStyleAttribute)
+        ? targetStyleAttribute[0]
+        : targetStyleAttribute;
+};
+
+var styleAttributes = [
+    /**
+     * Layout
+     */
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'aspectRatio',
+    'border',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderTopWidth',
+    'borderWidth',
+    'bottom',
+    'display',
+    'flex',
+    'flexBasis',
+    'flexDirection',
+    'flexGrow',
+    'flexShrink',
+    'flexWrap',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'columnWidth',
+    'height',
+    'justifyContent',
+    'left',
+    'margin',
+    'marginBottom',
+    'marginHorizontal',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginVertical',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'overflow',
+    'overflowY',
+    'overflowX',
+    'padding',
+    'paddingBottom',
+    'paddingEnd',
+    'paddingHorizontal',
+    'paddingLeft',
+    'paddingRight',
+    'paddingStart',
+    'paddingTop',
+    'paddingVertical',
+    'position',
+    'right',
+    'top',
+    [
+        'width',
+        {
+            validate: (value) => {
+                // Pass only number value for "width" style.
+                // If width have custom value, like "fill", we must set class by this value.
+                // "\d" - digit; "+" - 1 or more
+                return /\d+/.test(value);
+            },
+        },
+    ],
+    'zIndex',
+    'order',
+    /**
+     * Shadow
+     */
+    'shadowColor',
+    'shadowOffset',
+    'shadowOpacity',
+    'shadowRadius',
+    /**
+     * Transform
+     */
+    'transform',
+    /**
+     * View
+     */
+    'background',
+    'backgroundColor',
+    'borderBottomColor',
+    'borderBottomEndRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderBottomStartRadius',
+    'borderColor',
+    'borderCurve',
+    'borderEndColor',
+    'borderLeftColor',
+    'borderRadius',
+    'borderRightColor',
+    'borderStartColor',
+    'borderStyle',
+    'borderTopColor',
+    'borderTopEndRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderTopStartRadius',
+    'opacity',
+    'cursor',
+    /**
+     * Text
+     */
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecorationColor',
+    'textDecorationLine',
+    'textDecorationStyle',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+    'verticalAlign',
+    'writingMode',
+    'whiteSpace',
+    /**
+     * Image
+     */
+    'overlayColor',
+    'resizeMode',
+    'tintColor',
+    'objectFit',
+    'objectPosition',
+    /**
+     * Grid
+     */
+    'gridTemplateColumns',
+    'gridArea',
+    'gridAutoColumns',
+    'gridAutoFlow',
+    'gridAutoRows',
+    'gridTemplate',
+    'gridTemplateAreas',
+    'gridTemplateRows',
+    'gridColumn',
+    'gridColumnStart',
+    'gridColumnEnd',
+    'gridColumnGap',
+    'gridRow',
+    'gridRowStart',
+    'gridRowEnd',
+    'gridRowGap',
+    /**
+     * Filter
+     */
+    'backdropFilter',
+    /**
+     * transition
+     */
+    'transition',
+    'transitionBehavior',
+    'transitionDelay',
+    'transitionDuration',
+    'transitionProperty',
+    'transitionTimingFunction',
+];
+
+function useDevicePropsGenerator(componentProps, appearanceConfig) {
+    /** Get or generate(classname) a prop depending on the user's device.
+     * Props:
+     *   - "componentProps" - original "props" from component
+     *   - "appearanceConfig" - special appearance dictionary with styles presets
+     *
+     * Usage for create class value:
+     *   const appearanceConfig = (
+     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
+     *   )
+     *   const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+     *   ---------
+     *   const fillClass = propsGenerator.getClassName('fill')
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const fillClass = propsGenerator.getClassName('fill', { prefix: 'fill_' })
+     *   "fillClass" - is "fill_surface-secondary"
+     *   ---------
+     *   const fillClass = propsGenerator.fillClass
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const { fillClass } = propsGenerator
+     *   "fillClass" - is "surface-secondary"
+     *
+     * Usage for props value for device:
+     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize
+     *
+     *   "titleTextSize" - contain some value from props:
+     *     - titleTextSize
+     *     - titleTextSizeMobile
+     *     - titleTextSizeTablet
+     *     - titleTextSizeDesktop
+     *   ---------
+     **/
+    const { deviceCurrentMainType } = useUserDeviceContext();
+    const devicePropsGenerator = useMemo(() => {
+        const propsGenerator = {
+            getProp(propKey) {
+                const propsForDeviceKey = `${propKey}${upperFirst(deviceCurrentMainType)}`;
+                const valueForDevice = componentProps[propsForDeviceKey];
+                const valueDefault = componentProps[propKey];
+                const appearanceForDevice = appearanceConfig?.[propsForDeviceKey];
+                const appearanceDefault = appearanceConfig?.[propKey];
+                // prettier-ignore
+                const targetPropsValue = (
+                // Value for device from props is first priority
+                valueForDevice ||
+                    // Value without device from props is second priority
+                    valueDefault ||
+                    // Value for device from appearance config is third priority
+                    appearanceForDevice ||
+                    // Value without device from appearance config is last priority
+                    appearanceDefault);
+                return targetPropsValue;
+            },
+            // eslint-disable-next-line perfectionist/sort-objects
+            getClassName(propKey, params) {
+                const { prefix = '', replace = [/([A-Z])/g, '-$1'] } = params || {};
+                const targetClassValue = this.getProp(String(propKey));
+                const styleAttributeKeys = styleAttributes.map((attr) => getStyleAttributeKey(attr));
+                if (styleAttributeKeys.includes(String(propKey)) &&
+                    (typeof targetClassValue === 'number' ||
+                        (typeof targetClassValue === 'string' &&
+                            !isNaN(parseFloat(targetClassValue))))) {
+                    return '';
+                }
+                if (targetClassValue) {
+                    let cleanClassValue = String(targetClassValue);
+                    if (!cleanClassValue.includes('.')) {
+                        cleanClassValue = camelCase(cleanClassValue);
+                    }
+                    if (replace) {
+                        const replaceList = castArray(replace);
+                        cleanClassValue = cleanClassValue.replace(replaceList[0], 
+                        // @ts-expect-error
+                        replaceList[1] || '');
+                    }
+                    // prettier-ignore
+                    return `${prefix}${cleanClassValue}`.toLowerCase();
+                }
+                // If target key not exists in props and appearance config - return empty class
+                return '';
+            },
+        };
+        const generatorProxyHandler = {
+            get(target, propKey, receiver, ...args) {
+                if (typeof propKey === 'string') {
+                    // If object does not have the property being retrieved
+                    if (!Reflect.has(target, propKey)) {
+                        // And property ended on "Class" keyword
+                        if (propKey.endsWith('Class')) {
+                            // prettier-ignore
+                            const shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
+                            // Return prop from props for device as formatted class name
+                            return target.getClassName(shortProp);
+                        }
+                        // Return prop from props for device
+                        return target.getProp(propKey);
+                    }
+                    // Return object property. Original "get".
+                    // @ts-expect-error
+                    return Reflect.get(target, propKey, receiver, ...args);
+                }
+                // In some cases, like in Chrome browser, sometime "prop" is not string.
+                // We return this object as is.
+                return propKey;
+            },
+        };
+        return new Proxy(propsGenerator, generatorProxyHandler);
+        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
+    }, [componentProps, appearanceConfig, deviceCurrentMainType]);
+    return devicePropsGenerator;
+}
+
+/*
+ * rule of prop key:
+ *
+ * first is style     second is div target  third is device
+ * paddingHorizontal  GridInnerWrapper      MobileNormal
+ *
+ * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+ */
+function useStyles(props) {
+    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = useUserDeviceContext();
+    const propsStyleAttributes = useMemo(() => {
+        const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            if (styleAttributeKey) {
+                result[propKey] = propValue;
+            }
+            return result;
+        }, {});
+        return styles;
+        // "props" object maybe big and frequently changing
+    }, [props]);
+    const collectedStyles = useMemo(() => {
+        const resultStylesGroups = {};
+        for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
+            let value = null;
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            const isStyleForCurrentDevice = propKey
+                .toLowerCase()
+                .endsWith(deviceCurrentType.toLowerCase());
+            // e.g. "GridWrapperInner"
+            const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
+            const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
+            if (!resultStylesGroups[targetElementGroupKey]) {
+                resultStylesGroups[targetElementGroupKey] = {};
+            }
+            if (isStyleForCurrentDevice) {
+                value = propValue;
+            }
+            else {
+                const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
+                const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
+                const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+                let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
+                if (propKeyWithOutDeviceType.includes('Horizontal')) {
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyLeft];
+                }
+                else if (propKeyWithOutDeviceType.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyTop];
+                }
+                if (!currentValue) {
+                    value = defaultValue;
+                }
+            }
+            if (value) {
+                // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
+                const isValueHasUnit = /\D/.test(value);
+                // If value has some unit
+                if (isValueHasUnit) {
+                    // Check value on our custom "m"(module) unit
+                    /** Pattern for:
+                     * 1m
+                     * 1.5m
+                     * 1m 1m 1.5m
+                     * 0 0 1m 1m
+                     */
+                    const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
+                    // If value has module unit
+                    if (isValueHasModuleUnit) {
+                        /** Order for shorthand properties:
+                         *   top
+                         *   right
+                         *   bottom
+                         *   left
+                         * or:
+                         *   top
+                         *   right and left
+                         *   bottom
+                         * or:
+                         *   top and bottom
+                         *   right and left
+                         */
+                        const valuePxPartsList = value
+                            .split(' ')
+                            .map((valuePart) => {
+                            const valueModule = valuePart.replace(/[a-z]/gi, '');
+                            const valuePx = parseFloat(valueModule) * 8;
+                            return `${valuePx}px`;
+                        }, []);
+                        value = valuePxPartsList.join(' ');
+                    }
+                }
+                else {
+                    // Some properties doesn't have any units
+                    const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+                    if (!ignorePX) {
+                        // Add px to non-unit value
+                        value = `${value}px`;
+                    }
+                }
+                if (styleAttributeKey.includes('Horizontal')) {
+                    const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    const valuePartsList = value.split(' ');
+                    const valueRight = valuePartsList[0];
+                    const valueLeft = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
+                    resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
+                }
+                else if (styleAttributeKey.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
+                    const valuePartsList = value.split(' ');
+                    const valueTop = valuePartsList[0];
+                    const valueBottom = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
+                    resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
+                }
+                else {
+                    resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
+                }
+            }
+        }
+        return resultStylesGroups;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        deviceCurrentMainType,
+        deviceCurrentType,
+        ...Object.values(propsStyleAttributes),
+    ]);
+    return collectedStyles;
+}
+const removeDeviceType = (originalKey, deviceTypesList) => {
+    // Remove "mobile"/"tablet"/"desktop"
+    const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
+        if (cleanKey.endsWith(upperFirst(deviceType))) {
+            return cleanKey.replace(upperFirst(deviceType), '');
+        }
+        return cleanKey;
+    }, originalKey);
+    return withOutDeviceType;
+};
+const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
+    // Collect list of possible styles for propKey. e.g:
+    // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+    const possibleStyleAttributesList = styleAttributes.filter((styleAttribute) => {
+        // Attribute can be array with key on first position and params on second
+        if (Array.isArray(styleAttribute)) {
+            // First item always attribute key (e.g. border, width, etc)
+            const styleAttributeKey = styleAttribute[0];
+            // Second item always params with some settings or methods
+            const styleAttributeParams = styleAttribute[1] || {};
+            // If is target attribute key
+            if (styleKey.startsWith(styleAttributeKey)) {
+                // If target attribute params has validate method
+                if (styleAttributeParams.validate) {
+                    // Return validation result for target attribute
+                    return styleAttributeParams.validate(styleValue);
+                }
+                else {
+                    // Or always add to list
+                    return true;
+                }
+            }
+            else {
+                // Else ignore
+                return false;
+            }
+        }
+        else {
+            // If is target attribute
+            return styleKey.startsWith(String(styleAttribute));
+        }
+    });
+    // Get longest style key (e.g. "borderLeftWidth")
+    const targetStyleAttribute = maxBy(possibleStyleAttributesList, (styleAttribute) => {
+        const key = getStyleAttributeKey(styleAttribute);
+        return key.length;
+    });
+    const styleAttributeKey = getStyleAttributeKey(targetStyleAttribute);
+    return styleAttributeKey;
+};
+
+const badgeAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        dotFill: 'accentItemPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentQuaternary: {
+        fill: 'accentQuaternary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        dotFill: 'accentItemPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextQuaternary',
+        dotFill: 'accentItemQuaternary',
+        iconFill: 'accentItemQuaternary',
+    },
+    accentTertiary: {
+        fill: 'accentTertiary',
+        borderColor: 'accentBorderSecondary',
+        textColor: 'accentTextSecondary',
+        dotFill: 'accentItemSecondary',
+        iconFill: 'accentItemSecondary',
+    },
+};
+
+const badgeAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        borderColor: 'dangerBorderPrimary',
+        textColor: 'dangerTextPrimary',
+        dotFill: 'dangerItemPrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+
+const badgeAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+
+const badgeAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+
+const badgeAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        borderColor: 'extraBorderSecondary',
+        textColor: 'extraTextPrimary',
+        dotFill: 'extraItemPrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+
+const badgeAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextPrimary',
+        dotFill: 'infoItemPrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'infoSecondary',
+        borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextSecondary',
+        dotFill: 'infoItemSecondary',
+    },
+};
+
+const badgeAppearanceShape = {
+    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',
+    },
+};
+
+const badgeAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'xl',
+        iconSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        textSize: 'l',
+        iconSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        textSize: 'l',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        textSize: 'm',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+        iconSize: '24',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 'xs',
+        iconSize: '24',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 'xs',
+        iconSize: '24',
+    },
+};
+
+const badgeAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        borderColor: 'specialBorderSecondary',
+        textColor: 'specialTextPrimary',
+        dotFill: 'specialItemPrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+
+const badgeAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const badgeAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        borderColor: 'successBorderPrimary',
+        textColor: 'successTextPrimary',
+        dotFill: 'successItemPrimary',
+        iconFill: 'successItemPrimary',
+    },
+};
+
+const badgeAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
+        dotFill: 'surfaceItemPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'accentPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderSecondary',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+const badgeAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        borderColor: 'warningBorderPrimary',
+        textColor: 'warningTextPrimary',
+        dotFill: 'warningItemPrimary',
+        iconFill: 'warningItemPrimary',
+    },
+};
+
+const badgeAppearance = {
+    ...badgeAppearanceSize,
+    ...badgeAppearanceShape,
+    ...badgeAppearanceStyle,
+    ...badgeAppearanceAccent,
+    ...badgeAppearanceDanger,
+    ...badgeAppearanceError,
+    ...badgeAppearanceInfo,
+    ...badgeAppearanceSpecial,
+    ...badgeAppearanceExtra,
+    ...badgeAppearanceSuccess,
+    ...badgeAppearanceDisabled,
+    ...badgeAppearanceSurface,
+    ...badgeAppearanceWarning,
+};
+
+const textAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+    },
+    sizeXL: {
+        size: 'xl',
+    },
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+    },
+    sizeXXS: {
+        size: 'xxs',
+    },
+};
+
+const textAppearance = {
+    ...textAppearanceSize,
+};
+
+const textConfig = {
+    appearance: textAppearance,
+    setAppearance: (appearanceConfig) => {
+        textConfig.appearance = appearanceConfig;
+    },
+};
+function Text(props) {
+    const { appearance, className, dataTestId, dataTour, cursor, style, tag: Tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, onDoubleClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, textConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: textStyles } = useStyles(props);
+    return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
+            textColorDisabledClass &&
+            `text-color_${textColorDisabledClass}`, !isActive &&
+            !isDisabled &&
+            textColorClass &&
+            `text-color_${textColorClass}`, !isActive &&
+            !isDisabled &&
+            textColorHoverClass &&
+            `text-color_hover_${textColorHoverClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveHoverClass &&
+            `text-color_active_hover_${textColorActiveHoverClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveClass &&
+            `text-color_active_${textColorActiveClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWrapClass && `word-wrap_${textWrapClass}`, textTruncateClass && `text-truncate_${textTruncateClass}`, isSkeleton && 'text_skeleton', widthClass && `width_${widthClass}`, cursorClass && `cursor_${cursorClass}`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, textStyles, style), onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
+}
+
+const badgeConfig = {
+    appearance: badgeAppearance,
+    setAppearance: (appearanceConfig) => {
+        badgeConfig.appearance = appearanceConfig;
+    },
+};
+function Badge(props) {
+    const { appearance, className, dataTestId, dataTour, dot, icon, iconSrc, value, isSkeleton, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, badgeConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColor, textSize, dotFillClass, iconFill, iconShape, iconSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { styles: badgeStyles } = useStyles(props);
+    const badgeTypeClass = value
+        ? icon
+            ? dot
+                ? 'badge_type_dot-icon-counter'
+                : 'badge_type_icon-counter'
+            : 'badge_type_counter'
+        : icon
+            ? 'badge_type_icon'
+            : dot
+                ? 'badge_type_dot'
+                : 'badge_type_fill';
+    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+                (value && (jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
+}
+
+const linkAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+    },
+};
+
+const linkAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+    },
+};
+
+const linkAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        borderColor: 'errorBorderQuaternary',
+        textColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+    },
+};
+
+const linkAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+    },
+};
+
+const linkAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        labelTextColor: 'extraTextPrimary',
+    },
+};
+
+const linkAppearanceInfo = {
+    infoPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
+    },
+};
+
+const linkAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+    },
+};
+
+const linkAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xxl',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '14',
+        iconAfterSize: '14',
+        iconBeforeFillSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+const linkAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        labelTextColor: 'specialTextPrimary',
+    },
+};
+
+const linkAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const linkAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextSecondary',
+    },
+};
+
+const linkAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+const linkAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+    },
+};
+
+const linkAppearance = {
+    ...linkAppearanceSize,
+    ...linkAppearanceDisabled,
+    ...linkAppearanceRequire,
+    ...linkAppearanceStyle,
+    ...linkAppearanceAccent,
+    ...linkAppearanceDanger,
+    ...linkAppearanceError,
+    ...linkAppearanceInfo,
+    ...linkAppearanceSpecial,
+    ...linkAppearanceExtra,
+    ...linkAppearanceSuccess,
+    ...linkAppearanceSurface,
+    ...linkAppearanceWarning,
+};
+
+const linkConfig = {
+    appearance: linkAppearance,
+    LinkComponent: 'a',
+    setAppearance: (appearanceConfig) => {
+        linkConfig.appearance = appearanceConfig;
+    },
+    setLinkComponent: (newComponent) => {
+        linkConfig.LinkComponent = newComponent;
+    },
+};
+function Link(props) {
+    const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, linkConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, directionClass && `link_direction_${directionClass}`, sizeClass && `text_size_${sizeClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, underline && `link_underline_${underline}`, 'text', (textColorClass ||
+            textColorHoverClass ||
+            textGradientClass ||
+            textStyleClass ||
+            textWeightClass) &&
+            'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerLeave: onPointerLeave, onPointerUp: onPointerUp, children: [before, children || text, after] }));
+}
+function LinkWrapper(props) {
+    const { href, LinkComponent, rel, target, children, ...otherProps } = props;
+    if (href) {
+        const Component = LinkComponent || linkConfig.LinkComponent;
+        if (Component) {
+            return (jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
+        }
+    }
+    else if (LinkComponent) {
+        return jsx(LinkComponent, { ...otherProps, children: children });
+    }
+    return React.Children.toArray(children)
+        .filter(Boolean)
+        .map((child) => {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, otherProps)
+            : child;
+    });
+}
+
+const titleAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+};
+
+const titleAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+    },
+};
+
+const titleAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderHoverQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderHoverQuaternary',
+        iconBeforeFill: 'surfaceQuaternary',
+    },
+};
+
+const titleAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
+        textColorHover: 'errorTextPrimary',
+    },
+};
+
+const titleAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        textColor: 'extraTextPrimary',
+    },
+};
+
+const titleAppearanceInfo = {
+    infoPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+};
+
+const titleAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceQuaternary',
+    },
+};
+
+const titleAppearanceSize = {
+    h1: {
+        size: 'h1',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h2: {
+        size: 'h2',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h3: {
+        size: 'h3',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h4: {
+        size: 'h4',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h5: {
+        size: 'h5',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    h6: {
+        size: 'h6',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+};
+
+const titleAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+    },
+};
+
+const titleAppearanceStyle = {
+    solid: {},
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+    },
+};
+
+const titleAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+    },
+};
+
+const titleAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+    },
+};
+
+const titleAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        textColor: 'warningTextSecondary',
+        textColorHover: 'warningTextSecondary',
+    },
+};
+
+const titleAppearance = {
+    ...titleAppearanceSize,
+    ...titleAppearanceDisabled,
+    ...titleAppearanceStyle,
+    ...titleAppearanceAccent,
+    ...titleAppearanceDanger,
+    ...titleAppearanceError,
+    ...titleAppearanceInfo,
+    ...titleAppearanceSpecial,
+    ...titleAppearanceExtra,
+    ...titleAppearanceSuccess,
+    ...titleAppearanceSurface,
+    ...titleAppearanceWarning,
+    ...titleAppearanceRequire,
+};
+
+const titleConfig = {
+    appearance: titleAppearance,
+    setAppearance: (appearanceConfig) => {
+        titleConfig.appearance = appearanceConfig;
+    },
+};
+function Title(props) {
+    const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, style, tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, titleConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, widthClass, wrapperDirectionClass, onClickIconAfter, onClickIconBefore, } = propsGenerator;
+    const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles(props);
+    const Tag = useMemo(() => {
+        if (tag) {
+            return tag;
+        }
+        return size ? size : 'span';
+    }, [tag, size]);
+    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
+            textColorDisabledClass &&
+            `text-color_${textColorDisabledClass}`, !isActive &&
+            !isDisabled &&
+            textColorClass &&
+            `text text-color_${textColorClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveClass &&
+            `text-color_active_${textColorActiveClass}`, !isActive &&
+            !isDisabled &&
+            textColorHoverClass &&
+            `text-color_hover_${textColorHoverClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveHoverClass &&
+            `text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, onClick: onClickIconAfter }))] }), after] }));
+}
+
+const tooltipAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        titleColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+const tooltipAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'disabledPrimary',
+        fillHover: 'disabledHoverPrimary',
+        titleColor: 'surfaceTextPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+const tooltipAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        borderColor: 'errorBorderPrimary',
+        titleColor: 'errorTextPrimary',
+        textColor: 'errorTextPrimary',
+    },
+};
+
+const tooltipAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        borderColor: 'warningBorderPrimary',
+        titleColor: 'warningTextPrimary',
+        textColor: 'warningTextPrimary',
+    },
+};
+
+const tooltipAppearanceShape = {
+    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',
+    },
+};
+
+const tooltipAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+    sizeM: {
+        size: 'm',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+    sizeS: {
+        size: 's',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+};
+
+const tooltipAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const tooltipAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
+        titleColor: 'successTextPrimary',
+        textColor: 'successTextPrimary',
+    },
+};
+
+const tooltipAppearance = {
+    ...tooltipAppearanceDefault,
+    ...tooltipAppearanceSize,
+    ...tooltipAppearanceDisabled,
+    ...tooltipAppearanceRequire,
+    ...tooltipAppearanceShape,
+    ...tooltipAppearanceStyle,
+    ...tooltipAppearanceError,
+    ...tooltipAppearanceSuccess,
+};
+
+const tooltipConfig = {
+    appearance: tooltipAppearance,
+    setAppearance: (appearanceConfig) => {
+        tooltipConfig.appearance = appearanceConfig;
+    },
+};
+const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+    const { appearance, className, dataTestId, dataTour, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
+    const tooltipElementRef = useRef(null);
+    const tooltipTimeoutHideRef = useRef(null);
+    const tooltipTimeoutShowRef = useRef(null);
+    const isTooltipCloseAnimationInProgressRef = useRef(false);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(initialIsVisible);
+    const openTooltip = useCallback(() => {
+        if (!isTooltipCloseAnimationInProgressRef.current) {
+            if (tooltipTimeoutHideRef.current) {
+                clearTimeout(tooltipTimeoutHideRef.current);
+            }
+            tooltipTimeoutShowRef.current = setTimeout(() => {
+                setIsTooltipVisible(true);
+            }, openTimeoutDelay);
+        }
+    }, [openTimeoutDelay]);
+    const closeTooltip = useCallback(() => {
+        if (tooltipTimeoutShowRef.current) {
+            clearTimeout(tooltipTimeoutShowRef.current);
+        }
+        tooltipTimeoutHideRef.current = setTimeout(() => {
+            setIsTooltipVisible((prevState) => {
+                const newState = false;
+                if (prevState === true) {
+                    isTooltipCloseAnimationInProgressRef.current = true;
+                }
+                return newState;
+            });
+        }, closeTimeoutDelay);
+    }, [closeTimeoutDelay]);
+    const onAnimationEnd = useCallback(() => {
+        isTooltipCloseAnimationInProgressRef.current = false;
+    }, []);
+    useImperativeHandle(ref, () => ({
+        get tooltipElement() {
+            return tooltipElementRef.current;
+        },
+        openTooltip: openTooltip,
+        closeTooltip: closeTooltip,
+        isTooltipVisible: isTooltipVisible,
+    }), [isTooltipVisible, openTooltip, closeTooltip]);
+    const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: tooltipStyles } = useStyles(props);
+    return (jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
+            ? isTooltipVisible
+                ? 'tooltip_state_open'
+                : 'tooltip_state_close'
+            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+});
+
+const UrlAssetPrefixContext = createContext({
+    assetPrefix: undefined,
+    ignorePathsList: undefined,
+});
+function UrlAssetPrefixProvider(props) {
+    const { assetPrefix, ignorePathsList, children } = props;
+    const value = useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
+    return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
+}
+
+const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
+/**
+ * HOC, который добавляет assetPrefix к URL-пропсам.
+ *
+ * @template P - Тип пропсов оборачиваемого компонента.
+ * @template T - Тип ref (если используется forwardRef).
+ * @template Check - Проверка на наличие хотя бы одного URL-пропа.
+ *
+ * @param WrappedComponent - Компонент, который оборачиваем.
+ * @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
+ *
+ * @example
+ * const A = (props: { src?: string }) => <div />;
+ * urlWithAssetPrefix(A); // ✅ OK
+ *
+ * const B = (props: { id: string }) => <div />;
+ * urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
+ */
+const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
+    const HOC = React.forwardRef(function HOC(props, ref) {
+        const { assetPrefix, ignorePathsList } = useContext(UrlAssetPrefixContext);
+        const overrideProps = urlPropsList.reduce((resultProps, propKey) => {
+            let url = props[propKey];
+            if (url && typeof url === 'string') {
+                if (assetPrefix) {
+                    const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
+                    if (isNeedAssetPrefix) {
+                        const prefixPath = formatURL(assetPrefix).slice(0, -1);
+                        url = `${prefixPath}${url}`;
+                    }
+                }
+                resultProps[propKey] = url;
+            }
+            return resultProps;
+        }, {});
+        return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
+    });
+    return HOC;
+};
+const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
+    // Ignore prefix if:
+    const isPrefixIgnore = 
+    // Url is absolute
+    url.startsWith('http:') ||
+        url.startsWith('https:') ||
+        // Url is data string
+        url.startsWith('data:') ||
+        // Url already have prefix
+        url.startsWith(assetPrefix);
+    if (isPrefixIgnore) {
+        return false;
+    }
+    // And check special paths for ignore prefix
+    for (const urlPath of ignorePathsList) {
+        if (urlPath instanceof RegExp) {
+            if (urlPath.test(url)) {
+                return false;
+            }
+        }
+        else {
+            if (formatURL(url).startsWith(formatURL(urlPath))) {
+                return false;
+            }
+        }
+    }
+    // Need to add prefix to url
+    return true;
+};
+
+const iconAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+};
+
+const iconAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+        borderColor: 'dangerBorderSecondary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+
+const iconAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'surfaceItemQuaternary',
+    },
+};
+
+const iconAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        borderColor: 'errorBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+
+const iconAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        borderColor: 'extraBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+
+const iconAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        borderColor: 'infoBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconFill: 'infoItemSecondary',
+    },
+};
+
+const iconAppearanceShape = {
+    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',
+    },
+};
+
+const iconAppearanceSize = {
+    size12_12: {
+        fillSize: '12',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size14_12: {
+        fillSize: '14',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size14_14: {
+        fillSize: '14',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size16_12: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size16_14: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size16_16: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size20_12: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size20_14: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size20_16: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size20_20: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size24_12: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size24_14: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size24_16: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size24_20: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size24_24: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size32_12: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size32_14: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size32_16: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size32_20: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size32_24: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size32_32: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '32',
+    },
+    size40_12: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size40_14: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size40_16: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size40_20: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size40_24: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size40_32: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '32',
+    },
+    size40_40: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '40',
+    },
+};
+
+const iconAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        borderColor: 'specialBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+
+const iconAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const iconAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'successItemPrimary',
+    },
+};
+
+const iconAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        badgeAppearance: 'accentPrimary solid rounded',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+
+const iconAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        borderColor: 'warningBorderSecondary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'warningItemPrimary',
+    },
+};
+
+const iconAppearance = {
+    ...iconAppearanceDisabled,
+    ...iconAppearanceSize,
+    ...iconAppearanceStyle,
+    ...iconAppearanceAccent,
+    ...iconAppearanceShape,
+    ...iconAppearanceDanger,
+    ...iconAppearanceError,
+    ...iconAppearanceInfo,
+    ...iconAppearanceSpecial,
+    ...iconAppearanceExtra,
+    ...iconAppearanceSuccess,
+    ...iconAppearanceSurface,
+    ...iconAppearanceWarning,
+};
+
+const iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: (appearanceConfig) => {
+        iconConfig.appearance = appearanceConfig;
+    },
+};
+const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
+    const ImageComponent = useMemo(() => {
+        if (SvgImage) {
+            const SvgComponent = SvgImage;
+            const sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsx(SvgComponent, { ...sizes });
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                if (saveFillStroke) {
+                    return jsx(SVG, { src: imageSrc });
+                }
+                return jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
+            }
+            return jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
+    const appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
+    const { styles: iconStyles } = useStyles(props);
+    return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass &&
+                `fill_active_hover_${fillActiveHoverClass}`, fillSizeClass && `icon_fill_size_${fillSizeClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, !isActive
+            ? iconFillClass && `icon_fill_${iconFillClass}`
+            : iconFillActiveClass && `icon_fill_active_${iconFillActiveClass}`, !isActive
+            ? iconFillHoverClass && `icon_fill_hover_${iconFillHoverClass}`
+            : iconFillActiveHoverClass &&
+                `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
+            iconFillDisabledClass &&
+            `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
+const removeFillStroke = (code) => {
+    return code
+        .replace(/fill=".*?"/g, 'fill=""')
+        .replace(/stroke=".*?"/g, 'stroke=""');
+};
+
+const dividerAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+    },
+};
+
+const dividerAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+    },
+};
+
+const dividerAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+    },
+};
+
+const dividerAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
+const dividerAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+    },
+};
+
+const dividerAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+    },
+};
+
+const dividerAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+    },
+};
+
+const dividerAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+    },
+};
+
+const dividerAppearance = {
+    ...dividerAppearanceSize,
+    ...dividerAppearanceAccent,
+    ...dividerAppearanceError,
+    ...dividerAppearanceSpecial,
+    ...dividerAppearanceExtra,
+    ...dividerAppearanceSuccess,
+    ...dividerAppearanceSurface,
+    ...dividerAppearanceWarning,
+};
+
+const dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: (appearanceConfig) => {
+        dividerConfig.appearance = appearanceConfig;
+    },
+};
+function Divider(props) {
+    const { appearance, className, dataTestId, dataTour, print, isActive, isDisabled, isSkeleton, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dividerConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: hrStyles } = useStyles(props);
+    return (jsx("hr", { className: clsx(className, 'divider', widthClass && `width_${widthClass}`, directionClass && `divider_direction_${directionClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `divider_size_${sizeClass}`, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, isDisabled && fillDisabledClass && `fill_disabled_${fillDisabledClass}`, isSkeleton && `divider_skeleton`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: hrStyles }));
+}
+
+const dropdownAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+    },
+};
+
+const dropdownAppearanceShape = {
+    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',
+    },
+};
+
+const dropdownAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'xs',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+};
+
+const dropdownAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const dropdownAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+const dropdownAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownConfig = {
+    appearance: dropdownAppearance};
+function Dropdown(props) {
+    const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
+    const dropdownRef = useRef(null);
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
+    const [animationState, setAnimationState] = useState({
+        className: '',
+    });
+    const onAnimationEnd = useCallback(() => {
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    useEffect(() => {
+        if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    useEffect(() => {
+        function onClickWindow(event) {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                const isContainsTarget = dropdownElement.contains(event.target);
+                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    setIsOpen(false);
+                }
+            }
+        }
+        window.addEventListener('click', onClickWindow);
+        return () => {
+            window.removeEventListener('click', onClickWindow);
+        };
+    }, [animationOpen, setIsOpen]);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+}
+
+const dropdownItemAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    const { appearance, className, dataTestId, dataTour, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: dropdownItem } = useStyles(props);
+    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+
+export { tooltipConfig as A, Badge as B, UrlAssetPrefixContext as C, Divider as D, UrlAssetPrefixProvider as E, iconAppearance as F, iconConfig as G, dividerAppearance as H, Icon as I, dividerConfig as J, dropdownItemAppearance as K, LinkWrapper as L, dropdownItemConfig as M, NotificationsProvider as N, Title as T, UIProvider as U, useDevicePropsGenerator as a, Text as b, urlWithAssetPrefix as c, useAppearanceConfig as d, useUserDeviceContext as e, Dropdown as f, DropdownItem as g, Link as h, Tooltip as i, useNotifications as j, useNotificationsAPI as k, useMediaQueries as l, mergeAppearanceKeys as m, getStyleAttributeKey as n, styleAttributes as o, textConfig as p, badgeAppearance as q, badgeConfig as r, setViewportProperty as s, textAppearance as t, useStyles as u, linkAppearance as v, linkConfig as w, titleAppearance as x, titleConfig as y, tooltipAppearance as z };