@itcase/ui 1.9.57 → 1.9.59

package/dist/primitives_cjs_DX--6Yn5.js

@@ -0,0 +1,2715 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var camelCase = require('lodash/camelCase');
+var castArray = require('lodash/castArray');
+var upperFirst = require('lodash/upperFirst');
+var uuid = require('uuid');
+var common = require('@itcase/common');
+var reactResponsive = require('react-responsive');
+var maxBy = require('lodash/maxBy');
+var SVG = require('react-inlinesvg');
+
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = React.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 = React.createContext([]);
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const NotificationsAPIContext = React.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] = React.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 = React.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 = React.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 = React.useMemo(() => ({
+        hideNotifications: hideNotifications,
+        notificationStatuses: STATUSES,
+        showNotification: showNotification,
+    }), 
+    // Functions is never changes, no sense to set as dependencies
+    // eslint-disable-next-line
+    []);
+    React.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) {
+            common.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 (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+}
+function useNotifications() {
+    return React.useContext(NotificationsContext);
+}
+function useNotificationsAPI() {
+    return React.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 = uuid.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 = reactResponsive.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'],
+  // })
+  reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-super-extra-large'],
+    maxWidth: mediaQueries['tablet']
+  });
+  // prettier-ignore
+  const isTablet = reactResponsive.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 = reactResponsive.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 = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  const deviceTypes = React.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 = React.createContext({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: '',
+    deviceCurrentType: '',
+    deviceTypesList: [],
+});
+const UIProvider = React.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] = React.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 = React.useMemo(() => {
+        return {
+            ...allDevicesTypes,
+            deviceCurrentMainType: deviceCurrentMainType,
+            deviceCurrentType: deviceCurrentType,
+            deviceTypesList: deviceTypesList,
+        };
+    }, [
+        allDevicesTypes,
+        deviceCurrentMainType,
+        deviceCurrentType,
+        deviceTypesList,
+    ]);
+    React.useEffect(() => {
+        setViewportProperty();
+        window.addEventListener('resize', setViewportProperty);
+    }, []);
+    return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
+});
+function useUserDeviceContext() {
+    const context = React.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 = React.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 = React.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 = React.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 (jsxRuntime.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 (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+                (value && (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
+        }
+    }
+    else if (LinkComponent) {
+        return jsxRuntime.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 = React.useMemo(() => {
+        if (tag) {
+            return tag;
+        }
+        return size ? size : 'span';
+    }, [tag, size]);
+    return (jsxRuntime.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, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.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) && (jsxRuntime.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 = React.useRef(null);
+    const tooltipTimeoutHideRef = React.useRef(null);
+    const tooltipTimeoutShowRef = React.useRef(null);
+    const isTooltipCloseAnimationInProgressRef = React.useRef(false);
+    const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
+    const openTooltip = React.useCallback(() => {
+        if (!isTooltipCloseAnimationInProgressRef.current) {
+            if (tooltipTimeoutHideRef.current) {
+                clearTimeout(tooltipTimeoutHideRef.current);
+            }
+            tooltipTimeoutShowRef.current = setTimeout(() => {
+                setIsTooltipVisible(true);
+            }, openTimeoutDelay);
+        }
+    }, [openTimeoutDelay]);
+    const closeTooltip = React.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 = React.useCallback(() => {
+        isTooltipCloseAnimationInProgressRef.current = false;
+    }, []);
+    React.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 (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntime.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 && (jsxRuntime.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntime.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+});
+
+const UrlAssetPrefixContext = React.createContext({
+    assetPrefix: undefined,
+    ignorePathsList: undefined,
+});
+function UrlAssetPrefixProvider(props) {
+    const { assetPrefix, ignorePathsList, children } = props;
+    const value = React.useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
+    return (jsxRuntime.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 } = React.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 = common.formatURL(assetPrefix).slice(0, -1);
+                        url = `${prefixPath}${url}`;
+                    }
+                }
+                resultProps[propKey] = url;
+            }
+            return resultProps;
+        }, {});
+        return jsxRuntime.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 (common.formatURL(url).startsWith(common.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 = React.useMemo(() => {
+        if (SvgImage) {
+            const SvgComponent = SvgImage;
+            const sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsxRuntime.jsx(SvgComponent, { ...sizes });
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                if (saveFillStroke) {
+                    return jsxRuntime.jsx(SVG, { src: imageSrc });
+                }
+                return jsxRuntime.jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
+            }
+            return jsxRuntime.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 (jsxRuntime.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, jsxRuntime.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) && (jsxRuntime.jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.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 (jsxRuntime.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 = React.useRef(null);
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
+    const [animationState, setAnimationState] = React.useState({
+        className: '',
+    });
+    const onAnimationEnd = React.useCallback(() => {
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    React.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 (jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.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 || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.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 && (jsxRuntime.jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.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 && (jsxRuntime.jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.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 && (jsxRuntime.jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+
+exports.Badge = Badge;
+exports.Divider = Divider;
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.Icon = Icon;
+exports.Link = Link;
+exports.LinkWrapper = LinkWrapper;
+exports.NotificationsProvider = NotificationsProvider;
+exports.Text = Text;
+exports.Title = Title;
+exports.Tooltip = Tooltip;
+exports.UIProvider = UIProvider;
+exports.UrlAssetPrefixContext = UrlAssetPrefixContext;
+exports.UrlAssetPrefixProvider = UrlAssetPrefixProvider;
+exports.badgeAppearance = badgeAppearance;
+exports.badgeConfig = badgeConfig;
+exports.dividerAppearance = dividerAppearance;
+exports.dividerConfig = dividerConfig;
+exports.dropdownItemAppearance = dropdownItemAppearance;
+exports.dropdownItemConfig = dropdownItemConfig;
+exports.getStyleAttributeKey = getStyleAttributeKey;
+exports.iconAppearance = iconAppearance;
+exports.iconConfig = iconConfig;
+exports.linkAppearance = linkAppearance;
+exports.linkConfig = linkConfig;
+exports.mergeAppearanceKeys = mergeAppearanceKeys;
+exports.setViewportProperty = setViewportProperty;
+exports.styleAttributes = styleAttributes;
+exports.textAppearance = textAppearance;
+exports.textConfig = textConfig;
+exports.titleAppearance = titleAppearance;
+exports.titleConfig = titleConfig;
+exports.tooltipAppearance = tooltipAppearance;
+exports.tooltipConfig = tooltipConfig;
+exports.urlWithAssetPrefix = urlWithAssetPrefix;
+exports.useAppearanceConfig = useAppearanceConfig;
+exports.useDevicePropsGenerator = useDevicePropsGenerator;
+exports.useMediaQueries = useMediaQueries;
+exports.useNotifications = useNotifications;
+exports.useNotificationsAPI = useNotificationsAPI;
+exports.useStyles = useStyles;
+exports.useUserDeviceContext = useUserDeviceContext;