@hh.ru/magritte-ui-swipe 5.0.5 → 5.1.0

package/Swipe.js

@@ -1,18 +1,22 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect, useId, useContext, Fragment } from 'react';
 import { useSpring, config, animated } from '@react-spring/web';
 import classNames from 'classnames';
 import { useDebounce } from '@hh.ru/magritte-common-func-utils';
-import { useSwipe, MAIN_AXIS_THRESHOLD_PX } from '@hh.ru/magritte-common-use-swipe/useSwipe';
+import { useResize } from '@hh.ru/magritte-common-resize';
+import { MAIN_AXIS_THRESHOLD_PX, useSwipe } from '@hh.ru/magritte-common-use-swipe/useSwipe';
+import { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Layer, LayerName } from '@hh.ru/magritte-ui-layer';
+import { SwipeContext } from './context.js';
 
-var styles = {"text":"magritte-text___gUsfc_5-0-5","text_max-lines":"magritte-text_max-lines___foe9-_5-0-5","textMaxLines":"magritte-text_max-lines___foe9-_5-0-5","text-dynamic":"magritte-text-dynamic___KzitV_5-0-5","textDynamic":"magritte-text-dynamic___KzitV_5-0-5","text-dynamic_stretched":"magritte-text-dynamic_stretched___hv3Th_5-0-5","textDynamicStretched":"magritte-text-dynamic_stretched___hv3Th_5-0-5","text_style-primary":"magritte-text_style-primary___vYlpl_5-0-5","textStylePrimary":"magritte-text_style-primary___vYlpl_5-0-5","text-dynamic-disabled":"magritte-text-dynamic-disabled___M1GFt_5-0-5","textDynamicDisabled":"magritte-text-dynamic-disabled___M1GFt_5-0-5","text_style-secondary":"magritte-text_style-secondary___qb-4O_5-0-5","textStyleSecondary":"magritte-text_style-secondary___qb-4O_5-0-5","text_style-tertiary":"magritte-text_style-tertiary___atZvg_5-0-5","textStyleTertiary":"magritte-text_style-tertiary___atZvg_5-0-5","text_style-accent":"magritte-text_style-accent___JDNe4_5-0-5","textStyleAccent":"magritte-text_style-accent___JDNe4_5-0-5","text_style-accent-secondary":"magritte-text_style-accent-secondary___JM6z5_5-0-5","textStyleAccentSecondary":"magritte-text_style-accent-secondary___JM6z5_5-0-5","text_style-positive":"magritte-text_style-positive___OjJIB_5-0-5","textStylePositive":"magritte-text_style-positive___OjJIB_5-0-5","text_style-positive-secondary":"magritte-text_style-positive-secondary___LkPe1_5-0-5","textStylePositiveSecondary":"magritte-text_style-positive-secondary___LkPe1_5-0-5","text_style-negative":"magritte-text_style-negative___wBLmp_5-0-5","textStyleNegative":"magritte-text_style-negative___wBLmp_5-0-5","text_style-negative-secondary":"magritte-text_style-negative-secondary___CO58y_5-0-5","textStyleNegativeSecondary":"magritte-text_style-negative-secondary___CO58y_5-0-5","text_style-warning":"magritte-text_style-warning___23C3Y_5-0-5","textStyleWarning":"magritte-text_style-warning___23C3Y_5-0-5","text_style-warning-secondary":"magritte-text_style-warning-secondary___ZJ3uf_5-0-5","textStyleWarningSecondary":"magritte-text_style-warning-secondary___ZJ3uf_5-0-5","text_style-special":"magritte-text_style-special___LaqKY_5-0-5","textStyleSpecial":"magritte-text_style-special___LaqKY_5-0-5","text_style-special-secondary":"magritte-text_style-special-secondary___-whB-_5-0-5","textStyleSpecialSecondary":"magritte-text_style-special-secondary___-whB-_5-0-5","text_style-contrast":"magritte-text_style-contrast___Bx24w_5-0-5","textStyleContrast":"magritte-text_style-contrast___Bx24w_5-0-5","text_style-contrast-secondary":"magritte-text_style-contrast-secondary___xMS2f_5-0-5","textStyleContrastSecondary":"magritte-text_style-contrast-secondary___xMS2f_5-0-5","text_typography-title-1-semibold":"magritte-text_typography-title-1-semibold___WDZXM_5-0-5","textTypographyTitle1Semibold":"magritte-text-typography-title-1-semibold___RE-5E_5-0-5","text_typography-title-2-semibold":"magritte-text_typography-title-2-semibold___4PvYn_5-0-5","textTypographyTitle2Semibold":"magritte-text-typography-title-2-semibold___r-gyn_5-0-5","text_typography-title-3-semibold":"magritte-text_typography-title-3-semibold___E7pmd_5-0-5","textTypographyTitle3Semibold":"magritte-text-typography-title-3-semibold___AxOn9_5-0-5","text_typography-title-4-semibold":"magritte-text_typography-title-4-semibold___u-8Kd_5-0-5","textTypographyTitle4Semibold":"magritte-text-typography-title-4-semibold___4FOf2_5-0-5","text_typography-title-5-semibold":"magritte-text_typography-title-5-semibold___PRTQc_5-0-5","textTypographyTitle5Semibold":"magritte-text-typography-title-5-semibold___ayTa0_5-0-5","text_typography-subtitle-1-semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_5-0-5","textTypographySubtitle1Semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_5-0-5","text_typography-subtitle-2-semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_5-0-5","textTypographySubtitle2Semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_5-0-5","text_typography-subtitle-3-semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_5-0-5","textTypographySubtitle3Semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_5-0-5","text_typography-subtitle-4-semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_5-0-5","textTypographySubtitle4Semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_5-0-5","text_typography-label-1-regular":"magritte-text_typography-label-1-regular___JMO56_5-0-5","textTypographyLabel1Regular":"magritte-text_typography-label-1-regular___JMO56_5-0-5","text_typography-label-2-regular":"magritte-text_typography-label-2-regular___7gS1P_5-0-5","textTypographyLabel2Regular":"magritte-text_typography-label-2-regular___7gS1P_5-0-5","text_typography-label-3-regular":"magritte-text_typography-label-3-regular___DogGv_5-0-5","textTypographyLabel3Regular":"magritte-text_typography-label-3-regular___DogGv_5-0-5","text_typography-label-4-regular":"magritte-text_typography-label-4-regular___TIPoS_5-0-5","textTypographyLabel4Regular":"magritte-text_typography-label-4-regular___TIPoS_5-0-5","text_typography-label-5-regular":"magritte-text_typography-label-5-regular___y55-P_5-0-5","textTypographyLabel5Regular":"magritte-text_typography-label-5-regular___y55-P_5-0-5","text_typography-paragraph-1-regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_5-0-5","textTypographyParagraph1Regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_5-0-5","text_typography-paragraph-2-regular":"magritte-text_typography-paragraph-2-regular___ndKyc_5-0-5","textTypographyParagraph2Regular":"magritte-text_typography-paragraph-2-regular___ndKyc_5-0-5","text_typography-paragraph-3-regular":"magritte-text_typography-paragraph-3-regular___g0oZF_5-0-5","textTypographyParagraph3Regular":"magritte-text_typography-paragraph-3-regular___g0oZF_5-0-5","text_typography-paragraph-4-regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_5-0-5","textTypographyParagraph4Regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_5-0-5","text_typography-custom-1-semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_5-0-5","textTypographyCustom1Semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_5-0-5","text_typography-custom-2-semibold":"magritte-text_typography-custom-2-semibold___UP1hj_5-0-5","textTypographyCustom2Semibold":"magritte-text_typography-custom-2-semibold___UP1hj_5-0-5","text_typography-custom-3-semibold":"magritte-text_typography-custom-3-semibold___6yO4m_5-0-5","textTypographyCustom3Semibold":"magritte-text_typography-custom-3-semibold___6yO4m_5-0-5","text_typography-custom-4-semibold":"magritte-text_typography-custom-4-semibold___NEahp_5-0-5","textTypographyCustom4Semibold":"magritte-text_typography-custom-4-semibold___NEahp_5-0-5","text_typography-custom-5-semibold":"magritte-text_typography-custom-5-semibold___-UJfV_5-0-5","textTypographyCustom5Semibold":"magritte-text_typography-custom-5-semibold___-UJfV_5-0-5","text_typography-custom-1-italic":"magritte-text_typography-custom-1-italic___-CpMs_5-0-5","textTypographyCustom1Italic":"magritte-text_typography-custom-1-italic___-CpMs_5-0-5","text_typography-custom-2-italic":"magritte-text_typography-custom-2-italic___SvOG4_5-0-5","textTypographyCustom2Italic":"magritte-text_typography-custom-2-italic___SvOG4_5-0-5","text_typography-custom-3-italic":"magritte-text_typography-custom-3-italic___-g0na_5-0-5","textTypographyCustom3Italic":"magritte-text_typography-custom-3-italic___-g0na_5-0-5","text_typography-custom-4-italic":"magritte-text_typography-custom-4-italic___gOGey_5-0-5","textTypographyCustom4Italic":"magritte-text_typography-custom-4-italic___gOGey_5-0-5","text_typography-custom-5-italic":"magritte-text_typography-custom-5-italic___VR9wy_5-0-5","textTypographyCustom5Italic":"magritte-text_typography-custom-5-italic___VR9wy_5-0-5","text_typography-custom-1-medium":"magritte-text_typography-custom-1-medium___hik0e_5-0-5","textTypographyCustom1Medium":"magritte-text_typography-custom-1-medium___hik0e_5-0-5","text_typography-custom-2-medium":"magritte-text_typography-custom-2-medium___-f6Sh_5-0-5","textTypographyCustom2Medium":"magritte-text_typography-custom-2-medium___-f6Sh_5-0-5","text_typography-custom-3-medium":"magritte-text_typography-custom-3-medium___pLvIb_5-0-5","textTypographyCustom3Medium":"magritte-text_typography-custom-3-medium___pLvIb_5-0-5","text_typography-custom-4-medium":"magritte-text_typography-custom-4-medium___zZteM_5-0-5","textTypographyCustom4Medium":"magritte-text_typography-custom-4-medium___zZteM_5-0-5","text_typography-custom-5-medium":"magritte-text_typography-custom-5-medium___gW1Y8_5-0-5","textTypographyCustom5Medium":"magritte-text_typography-custom-5-medium___gW1Y8_5-0-5","text-typography-title-1-semibold":"magritte-text-typography-title-1-semibold___RE-5E_5-0-5","text-typography-title-2-semibold":"magritte-text-typography-title-2-semibold___r-gyn_5-0-5","text-typography-title-3-semibold":"magritte-text-typography-title-3-semibold___AxOn9_5-0-5","text-typography-title-4-semibold":"magritte-text-typography-title-4-semibold___4FOf2_5-0-5","text-typography-title-5-semibold":"magritte-text-typography-title-5-semibold___ayTa0_5-0-5","root":"magritte-root___gbkM-_5-0-5","swipeble":"magritte-swipeble___EVyAI_5-0-5","childrenWrapper":"magritte-childrenWrapper___1tUbf_5-0-5","buttons":"magritte-buttons___PHNdL_5-0-5","buttons-left":"magritte-buttons-left___WPiN4_5-0-5","buttonsLeft":"magritte-buttons-left___WPiN4_5-0-5","buttons-right":"magritte-buttons-right___G3u6y_5-0-5","buttonsRight":"magritte-buttons-right___G3u6y_5-0-5","button":"magritte-button___jZvyY_5-0-5","button-hide":"magritte-button-hide___5AEdR_5-0-5","buttonHide":"magritte-button-hide___5AEdR_5-0-5","button-grow":"magritte-button-grow___IT4MK_5-0-5","buttonGrow":"magritte-button-grow___IT4MK_5-0-5","button-content":"magritte-button-content___hlzd-_5-0-5","buttonContent":"magritte-button-content___hlzd-_5-0-5","button-content-column":"magritte-button-content-column___48Tzo_5-0-5","buttonContentColumn":"magritte-button-content-column___48Tzo_5-0-5","button-label":"magritte-button-label___l03VO_5-0-5","buttonLabel":"magritte-button-label___l03VO_5-0-5","button_style-neutral":"magritte-button_style-neutral___1yyqh_5-0-5","buttonStyleNeutral":"magritte-button_style-neutral___1yyqh_5-0-5","button_style-accent":"magritte-button_style-accent___L9krS_5-0-5","buttonStyleAccent":"magritte-button_style-accent___L9krS_5-0-5","button_style-positive":"magritte-button_style-positive___2pgae_5-0-5","buttonStylePositive":"magritte-button_style-positive___2pgae_5-0-5","button_style-negative":"magritte-button_style-negative___UClE4_5-0-5","buttonStyleNegative":"magritte-button_style-negative___UClE4_5-0-5","button_style-special":"magritte-button_style-special___sGvAc_5-0-5","buttonStyleSpecial":"magritte-button_style-special___sGvAc_5-0-5","button_style-warning":"magritte-button_style-warning___5bEK0_5-0-5","buttonStyleWarning":"magritte-button_style-warning___5bEK0_5-0-5","icon-wrapper":"magritte-icon-wrapper___0xJZX_5-0-5","iconWrapper":"magritte-icon-wrapper___0xJZX_5-0-5"};
+var styles = {"text":"magritte-text___gUsfc_5-1-0","text_max-lines":"magritte-text_max-lines___foe9-_5-1-0","textMaxLines":"magritte-text_max-lines___foe9-_5-1-0","text-dynamic":"magritte-text-dynamic___KzitV_5-1-0","textDynamic":"magritte-text-dynamic___KzitV_5-1-0","text-dynamic_stretched":"magritte-text-dynamic_stretched___hv3Th_5-1-0","textDynamicStretched":"magritte-text-dynamic_stretched___hv3Th_5-1-0","text_style-primary":"magritte-text_style-primary___vYlpl_5-1-0","textStylePrimary":"magritte-text_style-primary___vYlpl_5-1-0","text-dynamic-disabled":"magritte-text-dynamic-disabled___M1GFt_5-1-0","textDynamicDisabled":"magritte-text-dynamic-disabled___M1GFt_5-1-0","text_style-secondary":"magritte-text_style-secondary___qb-4O_5-1-0","textStyleSecondary":"magritte-text_style-secondary___qb-4O_5-1-0","text_style-tertiary":"magritte-text_style-tertiary___atZvg_5-1-0","textStyleTertiary":"magritte-text_style-tertiary___atZvg_5-1-0","text_style-accent":"magritte-text_style-accent___JDNe4_5-1-0","textStyleAccent":"magritte-text_style-accent___JDNe4_5-1-0","text_style-accent-secondary":"magritte-text_style-accent-secondary___JM6z5_5-1-0","textStyleAccentSecondary":"magritte-text_style-accent-secondary___JM6z5_5-1-0","text_style-positive":"magritte-text_style-positive___OjJIB_5-1-0","textStylePositive":"magritte-text_style-positive___OjJIB_5-1-0","text_style-positive-secondary":"magritte-text_style-positive-secondary___LkPe1_5-1-0","textStylePositiveSecondary":"magritte-text_style-positive-secondary___LkPe1_5-1-0","text_style-negative":"magritte-text_style-negative___wBLmp_5-1-0","textStyleNegative":"magritte-text_style-negative___wBLmp_5-1-0","text_style-negative-secondary":"magritte-text_style-negative-secondary___CO58y_5-1-0","textStyleNegativeSecondary":"magritte-text_style-negative-secondary___CO58y_5-1-0","text_style-warning":"magritte-text_style-warning___23C3Y_5-1-0","textStyleWarning":"magritte-text_style-warning___23C3Y_5-1-0","text_style-warning-secondary":"magritte-text_style-warning-secondary___ZJ3uf_5-1-0","textStyleWarningSecondary":"magritte-text_style-warning-secondary___ZJ3uf_5-1-0","text_style-special":"magritte-text_style-special___LaqKY_5-1-0","textStyleSpecial":"magritte-text_style-special___LaqKY_5-1-0","text_style-special-secondary":"magritte-text_style-special-secondary___-whB-_5-1-0","textStyleSpecialSecondary":"magritte-text_style-special-secondary___-whB-_5-1-0","text_style-contrast":"magritte-text_style-contrast___Bx24w_5-1-0","textStyleContrast":"magritte-text_style-contrast___Bx24w_5-1-0","text_style-contrast-secondary":"magritte-text_style-contrast-secondary___xMS2f_5-1-0","textStyleContrastSecondary":"magritte-text_style-contrast-secondary___xMS2f_5-1-0","text_typography-title-1-semibold":"magritte-text_typography-title-1-semibold___WDZXM_5-1-0","textTypographyTitle1Semibold":"magritte-text-typography-title-1-semibold___RE-5E_5-1-0","text_typography-title-2-semibold":"magritte-text_typography-title-2-semibold___4PvYn_5-1-0","textTypographyTitle2Semibold":"magritte-text-typography-title-2-semibold___r-gyn_5-1-0","text_typography-title-3-semibold":"magritte-text_typography-title-3-semibold___E7pmd_5-1-0","textTypographyTitle3Semibold":"magritte-text-typography-title-3-semibold___AxOn9_5-1-0","text_typography-title-4-semibold":"magritte-text_typography-title-4-semibold___u-8Kd_5-1-0","textTypographyTitle4Semibold":"magritte-text-typography-title-4-semibold___4FOf2_5-1-0","text_typography-title-5-semibold":"magritte-text_typography-title-5-semibold___PRTQc_5-1-0","textTypographyTitle5Semibold":"magritte-text-typography-title-5-semibold___ayTa0_5-1-0","text_typography-subtitle-1-semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_5-1-0","textTypographySubtitle1Semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_5-1-0","text_typography-subtitle-2-semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_5-1-0","textTypographySubtitle2Semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_5-1-0","text_typography-subtitle-3-semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_5-1-0","textTypographySubtitle3Semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_5-1-0","text_typography-subtitle-4-semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_5-1-0","textTypographySubtitle4Semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_5-1-0","text_typography-label-1-regular":"magritte-text_typography-label-1-regular___JMO56_5-1-0","textTypographyLabel1Regular":"magritte-text_typography-label-1-regular___JMO56_5-1-0","text_typography-label-2-regular":"magritte-text_typography-label-2-regular___7gS1P_5-1-0","textTypographyLabel2Regular":"magritte-text_typography-label-2-regular___7gS1P_5-1-0","text_typography-label-3-regular":"magritte-text_typography-label-3-regular___DogGv_5-1-0","textTypographyLabel3Regular":"magritte-text_typography-label-3-regular___DogGv_5-1-0","text_typography-label-4-regular":"magritte-text_typography-label-4-regular___TIPoS_5-1-0","textTypographyLabel4Regular":"magritte-text_typography-label-4-regular___TIPoS_5-1-0","text_typography-label-5-regular":"magritte-text_typography-label-5-regular___y55-P_5-1-0","textTypographyLabel5Regular":"magritte-text_typography-label-5-regular___y55-P_5-1-0","text_typography-paragraph-1-regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_5-1-0","textTypographyParagraph1Regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_5-1-0","text_typography-paragraph-2-regular":"magritte-text_typography-paragraph-2-regular___ndKyc_5-1-0","textTypographyParagraph2Regular":"magritte-text_typography-paragraph-2-regular___ndKyc_5-1-0","text_typography-paragraph-3-regular":"magritte-text_typography-paragraph-3-regular___g0oZF_5-1-0","textTypographyParagraph3Regular":"magritte-text_typography-paragraph-3-regular___g0oZF_5-1-0","text_typography-paragraph-4-regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_5-1-0","textTypographyParagraph4Regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_5-1-0","text_typography-custom-1-semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_5-1-0","textTypographyCustom1Semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_5-1-0","text_typography-custom-2-semibold":"magritte-text_typography-custom-2-semibold___UP1hj_5-1-0","textTypographyCustom2Semibold":"magritte-text_typography-custom-2-semibold___UP1hj_5-1-0","text_typography-custom-3-semibold":"magritte-text_typography-custom-3-semibold___6yO4m_5-1-0","textTypographyCustom3Semibold":"magritte-text_typography-custom-3-semibold___6yO4m_5-1-0","text_typography-custom-4-semibold":"magritte-text_typography-custom-4-semibold___NEahp_5-1-0","textTypographyCustom4Semibold":"magritte-text_typography-custom-4-semibold___NEahp_5-1-0","text_typography-custom-5-semibold":"magritte-text_typography-custom-5-semibold___-UJfV_5-1-0","textTypographyCustom5Semibold":"magritte-text_typography-custom-5-semibold___-UJfV_5-1-0","text_typography-custom-1-italic":"magritte-text_typography-custom-1-italic___-CpMs_5-1-0","textTypographyCustom1Italic":"magritte-text_typography-custom-1-italic___-CpMs_5-1-0","text_typography-custom-2-italic":"magritte-text_typography-custom-2-italic___SvOG4_5-1-0","textTypographyCustom2Italic":"magritte-text_typography-custom-2-italic___SvOG4_5-1-0","text_typography-custom-3-italic":"magritte-text_typography-custom-3-italic___-g0na_5-1-0","textTypographyCustom3Italic":"magritte-text_typography-custom-3-italic___-g0na_5-1-0","text_typography-custom-4-italic":"magritte-text_typography-custom-4-italic___gOGey_5-1-0","textTypographyCustom4Italic":"magritte-text_typography-custom-4-italic___gOGey_5-1-0","text_typography-custom-5-italic":"magritte-text_typography-custom-5-italic___VR9wy_5-1-0","textTypographyCustom5Italic":"magritte-text_typography-custom-5-italic___VR9wy_5-1-0","text_typography-custom-1-medium":"magritte-text_typography-custom-1-medium___hik0e_5-1-0","textTypographyCustom1Medium":"magritte-text_typography-custom-1-medium___hik0e_5-1-0","text_typography-custom-2-medium":"magritte-text_typography-custom-2-medium___-f6Sh_5-1-0","textTypographyCustom2Medium":"magritte-text_typography-custom-2-medium___-f6Sh_5-1-0","text_typography-custom-3-medium":"magritte-text_typography-custom-3-medium___pLvIb_5-1-0","textTypographyCustom3Medium":"magritte-text_typography-custom-3-medium___pLvIb_5-1-0","text_typography-custom-4-medium":"magritte-text_typography-custom-4-medium___zZteM_5-1-0","textTypographyCustom4Medium":"magritte-text_typography-custom-4-medium___zZteM_5-1-0","text_typography-custom-5-medium":"magritte-text_typography-custom-5-medium___gW1Y8_5-1-0","textTypographyCustom5Medium":"magritte-text_typography-custom-5-medium___gW1Y8_5-1-0","text-typography-title-1-semibold":"magritte-text-typography-title-1-semibold___RE-5E_5-1-0","text-typography-title-2-semibold":"magritte-text-typography-title-2-semibold___r-gyn_5-1-0","text-typography-title-3-semibold":"magritte-text-typography-title-3-semibold___AxOn9_5-1-0","text-typography-title-4-semibold":"magritte-text-typography-title-4-semibold___4FOf2_5-1-0","text-typography-title-5-semibold":"magritte-text-typography-title-5-semibold___ayTa0_5-1-0","fixed-container":"magritte-fixed-container___gruvI_5-1-0","fixedContainer":"magritte-fixed-container___gruvI_5-1-0","swipe-container":"magritte-swipe-container___HCz0Y_5-1-0","swipeContainer":"magritte-swipe-container___HCz0Y_5-1-0","content":"magritte-content___oKEcs_5-1-0","buttons":"magritte-buttons___PHNdL_5-1-0","swipe-container_in-progress":"magritte-swipe-container_in-progress___D4pLw_5-1-0","swipeContainerInProgress":"magritte-swipe-container_in-progress___D4pLw_5-1-0","left-buttons-animation":"magritte-left-buttons-animation___KnKbA_5-1-0","leftButtonsAnimation":"magritte-left-buttons-animation___KnKbA_5-1-0","right-buttons-animation":"magritte-right-buttons-animation___Wgsss_5-1-0","rightButtonsAnimation":"magritte-right-buttons-animation___Wgsss_5-1-0","button-wrapper":"magritte-button-wrapper___fp3-5_5-1-0","buttonWrapper":"magritte-button-wrapper___fp3-5_5-1-0","button-wrapper-hide":"magritte-button-wrapper-hide___MN7-s_5-1-0","buttonWrapperHide":"magritte-button-wrapper-hide___MN7-s_5-1-0","button-wrapper-grow":"magritte-button-wrapper-grow___-hbrz_5-1-0","buttonWrapperGrow":"magritte-button-wrapper-grow___-hbrz_5-1-0","button":"magritte-button___jZvyY_5-1-0","button-grow":"magritte-button-grow___IT4MK_5-1-0","buttonGrow":"magritte-button-grow___IT4MK_5-1-0","gap":"magritte-gap___3z9to_5-1-0","button-content":"magritte-button-content___hlzd-_5-1-0","buttonContent":"magritte-button-content___hlzd-_5-1-0","button-content-column":"magritte-button-content-column___48Tzo_5-1-0","buttonContentColumn":"magritte-button-content-column___48Tzo_5-1-0","button-label":"magritte-button-label___l03VO_5-1-0","buttonLabel":"magritte-button-label___l03VO_5-1-0","button_style-neutral":"magritte-button_style-neutral___1yyqh_5-1-0","buttonStyleNeutral":"magritte-button_style-neutral___1yyqh_5-1-0","button_style-accent":"magritte-button_style-accent___L9krS_5-1-0","buttonStyleAccent":"magritte-button_style-accent___L9krS_5-1-0","button_style-positive":"magritte-button_style-positive___2pgae_5-1-0","buttonStylePositive":"magritte-button_style-positive___2pgae_5-1-0","button_style-negative":"magritte-button_style-negative___UClE4_5-1-0","buttonStyleNegative":"magritte-button_style-negative___UClE4_5-1-0","button_style-special":"magritte-button_style-special___sGvAc_5-1-0","buttonStyleSpecial":"magritte-button_style-special___sGvAc_5-1-0","button_style-warning":"magritte-button_style-warning___5bEK0_5-1-0","buttonStyleWarning":"magritte-button_style-warning___5bEK0_5-1-0","icon-wrapper":"magritte-icon-wrapper___0xJZX_5-1-0","iconWrapper":"magritte-icon-wrapper___0xJZX_5-1-0"};
 
 const MIN_BUTTON_WIDTH = 76;
 const OPEN_THRESHOLD = 1 / 3;
 const MIN_SWIPE_DISTANCE = MIN_BUTTON_WIDTH * OPEN_THRESHOLD;
+const GAP_WIDTH = 12;
 var ButtonsState;
 (function (ButtonsState) {
     ButtonsState["Close"] = "close";
@@ -25,11 +29,11 @@ var LongState;
     LongState["Left"] = "left";
     LongState["Right"] = "right";
 })(LongState || (LongState = {}));
-const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLongSwipe = true, 'data-qa': dataQa, demo = false, twoSidedDemoMode = 'right-to-left', demoAppearTime = 200, demoIdleTime = 300, demoDisappearTime = 200, onFinishDemo, onStartDemo, onResetDemo, }) => {
-    const rootRef = useRef(null);
-    const swipeableRef = useRef(null);
-    const childrenWrapperRef = useRef(null);
-    const [swipeableWidth, setSwipeableWidth] = useState(0);
+const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLongSwipe = true, 'data-qa': dataQa, demo = false, twoSidedDemoMode = 'right-to-left', demoAppearTime = 200, demoIdleTime = 300, demoDisappearTime = 200, onFinishDemo, onStartDemo, onResetDemo, gap = false, borderRadius, }) => {
+    const fixedContainerRef = useRef(null);
+    const swipeContainerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [swipeContainerWidth, setSwipeContainerWidth] = useState(0);
     const leftButtonsRef = useRef(null);
     const rightButtonsRef = useRef(null);
     const sumRefs = useRef([]); // ссылки на кнопки, по которым считается реальный размер
@@ -41,12 +45,11 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
     const swipeThresholdRef = useRef({ max: MIN_SWIPE_DISTANCE });
     const swipeLockRef = useRef(false);
     const { isMobile } = useBreakpoint();
-    const [leftBlockStyles, leftBlockApi] = useSpring(() => ({
-        width: 0,
-    }));
-    const [rightBlockStyles, rightBlockApi] = useSpring(() => ({
-        width: 0,
-    }));
+    const [isFontLoaded, setFontLoaded] = useState(false);
+    const visible = isMobile && isFontLoaded;
+    useWhenFontLoaded(() => setFontLoaded(true));
+    const [leftBlockStyles, leftBlockApi] = useSpring(() => ({ width: 0 }));
+    const [rightBlockStyles, rightBlockApi] = useSpring(() => ({ width: 0 }));
     const [longState, setLongState] = useState(LongState.Off);
     const stateRef = useRef({
         candidate: ButtonsState.Close,
@@ -62,30 +65,23 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             rightButtonsRef.current.style.transitionProperty = flag ? 'width' : 'none';
         }
     }, []);
-    const setWidth = useDebounce(useCallback(() => {
-        if (swipeableRef.current && childrenWrapperRef.current && rootRef.current) {
-            const value = rootRef.current.getBoundingClientRect().width;
+    const recalcSwipeContainerWidth = useCallback(() => {
+        if (swipeContainerRef.current && contentRef.current && fixedContainerRef.current) {
+            const width = Math.round(fixedContainerRef.current.getBoundingClientRect().width);
             // устанавливаем размер области равной размеру контента,
             // чтобы она не растягивалась, когда растягиваются кнопки
-            setSwipeableWidth(value);
-            swipeableRef.current.style.width = `${value}px`;
-            childrenWrapperRef.current.style.width = `${value}px`;
-            childrenWrapperRef.current.style.minWidth = `${value}px`;
+            setSwipeContainerWidth(width);
+            swipeContainerRef.current.style.width = `${width}px`;
+            contentRef.current.style.width = `${width}px`;
+            contentRef.current.style.minWidth = `${width}px`;
         }
-    }, [setSwipeableWidth]), 64);
+    }, [setSwipeContainerWidth]);
     useEffect(() => {
-        setWidth();
-    }, [setWidth]);
-    useEffect(() => {
-        if (window && isMobile) {
-            window.addEventListener('resize', setWidth);
+        if (visible) {
+            recalcSwipeContainerWidth();
         }
-        return () => {
-            if (window && isMobile) {
-                window.removeEventListener('resize', setWidth);
-            }
-        };
-    }, [setWidth, isMobile]);
+    }, [visible, recalcSwipeContainerWidth]);
+    useResize(useDebounce(recalcSwipeContainerWidth, 50));
     // обновляет порог срабатывания для useSwipe в зависимости от состояния
     const updateSwipeThreshold = useCallback(() => {
         const { now, candidate } = stateRef.current;
@@ -148,15 +144,27 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             // то для правой стороны нужно поменять знак начальной скорости
             api = toState === ButtonsState.LeftOpen ? leftBlockApi : rightBlockApi;
             const v = toState === ButtonsState.LeftOpen ? velocity : -velocity;
-            animationConfig.width = Math.min(swipeableWidth, (toState === ButtonsState.LeftOpen ? leftButtonsSumSizeRef : rightButtonsSumSizeRef).current);
+            animationConfig.width = Math.min(swipeContainerWidth, (toState === ButtonsState.LeftOpen ? leftButtonsSumSizeRef : rightButtonsSumSizeRef).current);
             animationConfig.config.velocity = v / 1000;
         }
         void api.start(animationConfig)[0].then(({ finished }) => {
             if (finished) {
                 stateRef.current.candidate = ButtonsState.Close;
+                if (swipeContainerRef.current !== null) {
+                    swipeContainerRef.current.classList.remove(styles.swipeContainerInProgress);
+                }
             }
         });
-    }, [leftBlockApi, rightBlockApi, swipeableWidth]);
+    }, [leftBlockApi, rightBlockApi, swipeContainerWidth]);
+    const id = useId();
+    const swipeContext = useContext(SwipeContext);
+    useEffect(() => {
+        if (visible && swipeContext !== null) {
+            swipeContext.register(id, () => {
+                animateToState(ButtonsState.Close, 0);
+            });
+        }
+    }, [visible, swipeContext, id, animateToState]);
     const handleSwipeStart = useCallback(() => {
         if (demoInProgress || swipeLockRef.current) {
             return;
@@ -181,7 +189,7 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         longState,
         setAnimateButtonsWidth,
     ]);
-    const handleChangeButtonsSizeByDistance = useCallback((distance) => {
+    const recalcButtonsSizes = useCallback((distance) => {
         // работаем с изменением дистанции, чтобы добавлять ее к существующей ширине
         const distanceDelta = distance - prevDistance.current;
         if (distanceDelta === 0) {
@@ -212,8 +220,9 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         // если раскрыты слева, то контент должен уходить за пределы области в право, ставим flex-start
         // если раскрыты справа, то контент должен уходить за пределы области в лево, ставим flex-end
         // визуально ничего не меняется, потому что контент в контейнере растянут на всю ширину
-        if (swipeableRef.current) {
-            swipeableRef.current.style.justifyContent =
+        if (swipeContainerRef.current) {
+            swipeContainerRef.current.classList.toggle(styles.swipeContainerInProgress, width > 0);
+            swipeContainerRef.current.style.justifyContent =
                 stateRef.current.candidate === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
         }
         // определяем выполнены ли условия для перевода компонента в состояние длинного свайпа
@@ -226,16 +235,19 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         else {
             setLongState(LongState.Off);
         }
-    }, [leftBlockApi, rightBlockApi, useLongSwipe, updateSwipeThreshold]);
+        if (Math.abs(distance) > MAIN_AXIS_THRESHOLD_PX) {
+            swipeContext?.onShown(id);
+        }
+    }, [leftBlockApi, rightBlockApi, useLongSwipe, updateSwipeThreshold, id, swipeContext]);
     const handleSwipeMove = useCallback((event) => {
         if (demoInProgress || swipeLockRef.current) {
             return;
         }
-        // сдвиг в след за пальцем, можем делать длинный свайп
-        handleChangeButtonsSizeByDistance(event.distanceX);
-    }, [demoInProgress, handleChangeButtonsSizeByDistance]);
+        // сдвиг вслед за пальцем, можем делать длинный свайп
+        recalcButtonsSizes(event.distanceX);
+    }, [demoInProgress, recalcButtonsSizes]);
     const runSwipeAnimation = useCallback(() => {
-        if (!swipeableRef.current) {
+        if (!swipeContainerRef.current) {
             return;
         }
         if (stateRef.current.next === ButtonsState.Close) {
@@ -253,7 +265,7 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         else if (stateRef.current.next === ButtonsState.LeftOpen) {
             // выполнено условие раскрытия слева
             // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
-            const maxLeftSize = Math.min(swipeableWidth, leftButtonsSumSizeRef.current);
+            const maxLeftSize = Math.min(swipeContainerWidth, leftButtonsSumSizeRef.current);
             if (leftButtonsRef.current) {
                 leftButtonsRef.current.style.width = `${maxLeftSize}px`;
             }
@@ -263,7 +275,7 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         else if (stateRef.current.next === ButtonsState.RightOpen) {
             // выполнено условие раскрытия справа
             // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
-            const maxRightSize = Math.min(swipeableWidth, rightButtonsSumSizeRef.current);
+            const maxRightSize = Math.min(swipeContainerWidth, rightButtonsSumSizeRef.current);
             if (rightButtonsRef.current) {
                 rightButtonsRef.current.style.width = `${maxRightSize}px`;
             }
@@ -271,13 +283,13 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             leftButtonsSizeRef.current = 0;
         }
         stateRef.current.now = stateRef.current.next;
-    }, [swipeableWidth]);
-    const handleSwipeFinish = useCallback((event) => {
+    }, [swipeContainerWidth]);
+    const handleSwipeEnd = useCallback((event) => {
         if (demoInProgress) {
             return;
         }
         onFinish?.();
-        // если это длинный свайп, то трггерим клик на соответствующую кнопку, и закрываем блок кнопок
+        // если это длинный свайп, то триггерим клик на соответствующую кнопку, и закрываем блок кнопок
         // если не установлен флаг keepStateAfterLong
         if (longState !== LongState.Off) {
             const buttons = longState === LongState.Left ? leftButtons : rightButtons;
@@ -303,26 +315,22 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         thresholdXRef: swipeThresholdRef,
         onSwipeStart: handleSwipeStart,
         onSwipeMove: handleSwipeMove,
-        onSwipeEnd: handleSwipeFinish,
+        onSwipeEnd: handleSwipeEnd,
         onSwipeCancel: handleSwipeCancel,
     });
-    const preventHorizontalScroll = useCallback((e) => {
-        if (Math.abs(prevDistance.current) > MAIN_AXIS_THRESHOLD_PX) {
-            e.preventDefault();
-        }
-    }, []);
-    const swipebleRefCurrent = swipeableRef.current;
-    // выключаем вертикальный скролл, если у нас был минимальный горизонтальный скролл, чтобы не дергалось
     useEffect(() => {
-        if (swipebleRefCurrent) {
-            swipebleRefCurrent.addEventListener('touchmove', preventHorizontalScroll, { passive: false });
+        const swipeContainer = swipeContainerRef.current;
+        if (!visible || !swipeContainer) {
+            return void 0;
         }
-        return () => {
-            if (swipebleRefCurrent) {
-                swipebleRefCurrent.removeEventListener('touchmove', preventHorizontalScroll);
+        const preventScroll = (event) => {
+            if (Math.abs(prevDistance.current) > MAIN_AXIS_THRESHOLD_PX) {
+                event.preventDefault();
             }
         };
-    }, [preventHorizontalScroll, swipebleRefCurrent]);
+        swipeContainer.addEventListener('touchmove', preventScroll, { passive: false });
+        return () => swipeContainer.removeEventListener('touchmove', preventScroll);
+    }, [visible]);
     const getButtonsFromSide = useCallback((side = stateRef.current.now) => {
         const buttons = side === ButtonsState.RightOpen ? rightButtonsRef.current : leftButtonsRef.current;
         const oppositeButtons = buttons === rightButtonsRef.current ? leftButtonsRef.current : rightButtonsRef.current;
@@ -339,8 +347,8 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             : !!leftButtonsRef.current;
         const buttons = isLeft ? leftButtonsRef.current : rightButtonsRef.current;
         buttons?.removeEventListener('transitionend', unmountDemoEndHandler);
-        rootRef.current?.style.removeProperty('--transition-duration');
-        rootRef.current?.style.removeProperty('--transition-delay');
+        fixedContainerRef.current?.style.removeProperty('--transition-duration');
+        fixedContainerRef.current?.style.removeProperty('--transition-delay');
         onResetDemo?.();
         onFinishDemo?.();
     }, [onFinishDemo, onResetDemo, twoSidedDemoMode]);
@@ -355,9 +363,9 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             ((currentSide === ButtonsState.LeftOpen && twoSidedDemoMode === 'left-to-right') ||
                 (currentSide === ButtonsState.RightOpen && twoSidedDemoMode === 'right-to-left'));
         buttons?.removeEventListener('transitionend', demoSideAppearHandler);
-        if (rootRef.current) {
-            rootRef.current.style.setProperty('--transition-duration', `${appearedIsFirstOfSides ? demoAppearTime : demoDisappearTime}ms`);
-            rootRef.current.style.setProperty('--transition-delay', `${demoIdleTime}ms`);
+        if (fixedContainerRef.current) {
+            fixedContainerRef.current.style.setProperty('--transition-duration', `${appearedIsFirstOfSides ? demoAppearTime : demoDisappearTime}ms`);
+            fixedContainerRef.current.style.setProperty('--transition-delay', `${demoIdleTime}ms`);
         }
         stateRef.current.next = ButtonsState.Close;
         stateRef.current.candidate = stateRef.current.next;
@@ -369,9 +377,9 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
             runSwipeAnimation();
             const twiceSideTransitionHandler = () => {
                 oppositeButtons?.removeEventListener('transitionstart', twiceSideTransitionHandler);
-                if (oppositeButtons && childrenWrapperRef.current) {
+                if (oppositeButtons && contentRef.current) {
                     const isRight = currentSide === ButtonsState.RightOpen;
-                    childrenWrapperRef.current.style.transform = `translateX(${isRight ? leftButtonsSumSizeRef.current : -rightButtonsSumSizeRef.current}px)`;
+                    contentRef.current.style.transform = `translateX(${isRight ? leftButtonsSumSizeRef.current : -rightButtonsSumSizeRef.current}px)`;
                 }
             };
             oppositeButtons?.addEventListener('transitionstart', twiceSideTransitionHandler);
@@ -380,7 +388,7 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         else {
             const startDestroyDemoHandler = () => {
                 buttons?.removeEventListener('transitionstart', startDestroyDemoHandler);
-                childrenWrapperRef.current?.style.removeProperty('transform');
+                contentRef.current?.style.removeProperty('transform');
             };
             buttons?.addEventListener('transitionstart', startDestroyDemoHandler);
             buttons?.addEventListener('transitionend', unmountDemoEndHandler);
@@ -401,11 +409,12 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         stateRef.current.now = ButtonsState.Close;
         stateRef.current.next = side;
         stateRef.current.candidate = side;
-        if (swipeableRef.current) {
-            swipeableRef.current.style.justifyContent = side === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
+        if (swipeContainerRef.current) {
+            swipeContainerRef.current.style.justifyContent =
+                side === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
         }
-        if (rootRef.current) {
-            rootRef.current.style.setProperty('--transition-duration', `${demoAppearTime}ms`);
+        if (fixedContainerRef.current) {
+            fixedContainerRef.current.style.setProperty('--transition-duration', `${demoAppearTime}ms`);
         }
         setLongState(LongState.Off);
         setAnimateButtonsWidth(true);
@@ -425,7 +434,7 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
         if (demo &&
             !demoInProgress &&
             stateRef.current.now === ButtonsState.Close &&
-            swipeableRef.current?.style.width) {
+            swipeContainerRef.current?.style.width) {
             const isTwoSidedSwipe = Boolean(rightButtonsRef.current && leftButtonsRef.current);
             if (isTwoSidedSwipe) {
                 startDemo(twoSidedDemoMode === 'right' || twoSidedDemoMode === 'right-to-left'
@@ -447,69 +456,72 @@ const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLong
     }, [demo, twoSidedDemoMode, startDemo, demoInProgress, isMobile, onResetDemo]);
     // подсчитываем реальный необходимый размер для кнопок
     // и назначаем проперти исходя из положения кнопки (последняя/не последняя)
-    const handleButtonContentRef = useCallback((left, isGrow) => (ref) => {
-        // нужно чтобы посчитать размеры для каждой кнопки один раз (не придумал, как сделать лучше)
+    const handleButtonContentRef = useCallback((side, grow) => (ref) => {
+        // нужно чтобы посчитать размеры для каждой кнопки один раз
         if (sumRefs.current.includes(ref) || !ref) {
             return;
         }
         const width = ref?.offsetWidth ?? 0;
-        if (!isGrow) {
+        if (!grow) {
             ref.style.maxWidth = `${width}px`;
         }
         sumRefs.current.push(ref);
-        if (left) {
-            leftButtonsSumSizeRef.current += width;
+        const widthWithGap = gap && width > 0 ? width + GAP_WIDTH : width;
+        if (side === 'left') {
+            leftButtonsSumSizeRef.current += widthWithGap;
         }
         else {
-            rightButtonsSumSizeRef.current += width;
+            rightButtonsSumSizeRef.current += widthWithGap;
         }
-    }, []);
-    const renderButtons = (buttons, ref, left) => {
+    }, [gap]);
+    const renderButtons = (buttons, ref, side) => {
         const isTwoSidedDemoInProgress = leftButtons && rightButtons && demoInProgress;
-        return (jsx(Layer, { layer: LayerName.Content, children: jsx(animated.div, { className: classNames(styles.buttons, {
-                    [styles.buttonsLeft]: left && twoSidedDemoMode === 'right-to-left' && isTwoSidedDemoInProgress,
-                    [styles.buttonsRight]: !left && twoSidedDemoMode === 'left-to-right' && isTwoSidedDemoInProgress,
+        return (jsx(Layer, { layer: LayerName.Content, children: jsxs(animated.div, { className: classNames(styles.buttons, {
+                    [styles.leftButtonsAnimation]: side === 'left' && twoSidedDemoMode === 'right-to-left' && isTwoSidedDemoInProgress,
+                    [styles.rightButtonsAnimation]: side === 'right' && twoSidedDemoMode === 'left-to-right' && isTwoSidedDemoInProgress,
                 }), 
                 // "длинная" кнопка растягивается максимум на ширину контейнера (buttons)
                 // чтобы не было видно пустоты между ней и контейнером
                 // нужно устанавливать выравнивание в зависимости от стороны
                 style: {
-                    justifyContent: left ? 'flex-start' : 'flex-end',
-                    ...(left ? leftBlockStyles : rightBlockStyles),
-                }, ref: ref, "data-qa": `swipe-buttons-${left ? 'left' : 'right'}`, children: buttons.map((item, index) => {
-                    if (!item) {
-                        return null;
-                    }
-                    const isGrow = left ? index === 0 : index === buttons.length - 1;
-                    const isHide = (left && index !== 0 && longState === LongState.Left) ||
-                        (!left && index !== buttons.length - 1 && longState === LongState.Right);
-                    const Icon = item.icon;
-                    const iconProps = item.showLabel
-                        ? { 'aria-hidden': true, focusable: false }
-                        : { 'aria-label': item.label };
-                    return (jsx("button", { className: classNames(styles.button, {
-                            [styles.buttonGrow]: isGrow,
-                            [styles.buttonHide]: isHide,
-                            [styles[`button_style-${item.style}`]]: item.style,
-                        }), 
-                        // это нужно чтобы анимировался длинный свайп.
-                        // Здесь должно быть значение максимально близкое к тому,
-                        // какой максимум может занимать одна кнопка, если кнопок больше 1
-                        style: isGrow ? { maxWidth: `${swipeableWidth}px` } : {}, onClick: () => {
-                            if (demoInProgress) {
-                                return;
-                            }
-                            if (item.closeOnAction) {
-                                animateToState(ButtonsState.Close, 0);
-                            }
-                            item.onClick();
-                        }, "data-qa": `swipe-button-${left ? 'left' : 'right'}-${index}`, children: jsx("div", { className: styles.buttonContent, ref: handleButtonContentRef(left, isGrow), "data-qa": `swipe-button-content-${left ? 'left' : 'right'}-${index}`, children: jsxs("div", { className: styles.buttonContentColumn, children: [Icon && (jsx("div", { className: styles.iconWrapper, children: jsx(Icon, { ...iconProps }) })), item.showLabel && jsx("span", { className: styles.buttonLabel, children: item.label })] }) }) }, index));
-                }) }) }));
+                    ...(side === 'left' ? { justifyContent: 'flex-start', ...leftBlockStyles } : {}),
+                    ...(side === 'right' ? { justifyContent: 'flex-end', ...rightBlockStyles } : {}),
+                }, ref: ref, "data-qa": `swipe-buttons-${side}`, children: [gap && side === 'right' && longState === LongState.Right && jsx("div", { className: styles.gap }), buttons.map((item, index) => {
+                        if (!item) {
+                            return null;
+                        }
+                        const grow = side === 'left' ? index === 0 : index === buttons.length - 1;
+                        const hide = (side === 'left' && index !== 0 && longState === LongState.Left) ||
+                            (side === 'right' && index !== buttons.length - 1 && longState === LongState.Right);
+                        const Icon = item.icon;
+                        const iconProps = item.showLabel
+                            ? { 'aria-hidden': true, focusable: false }
+                            : { 'aria-label': item.label };
+                        return (jsxs(Fragment, { children: [gap && side === 'right' && longState !== LongState.Right && (jsx("div", { className: styles.gap })), jsx("div", { className: classNames(styles.buttonWrapper, {
+                                        [styles.buttonWrapperGrow]: grow,
+                                        [styles.buttonWrapperHide]: hide,
+                                    }), 
+                                    // это нужно чтобы анимировался длинный свайп.
+                                    // Здесь должно быть значение максимально близкое к тому,
+                                    // какой максимум может занимать одна кнопка, если кнопок больше 1
+                                    style: grow ? { maxWidth: `${swipeContainerWidth}px` } : {}, children: jsx("button", { className: classNames(styles.button, {
+                                            [styles.buttonGrow]: grow,
+                                            [styles[`button_style-${item.style}`]]: item.style,
+                                        }), onClick: () => {
+                                            if (demoInProgress) {
+                                                return;
+                                            }
+                                            if (item.closeOnAction) {
+                                                animateToState(ButtonsState.Close, 0);
+                                            }
+                                            item.onClick();
+                                        }, style: gap ? { borderRadius } : {}, "data-qa": `swipe-button-${side}-${index}`, children: jsx("div", { className: styles.buttonContent, ref: handleButtonContentRef(side, grow), "data-qa": `swipe-button-content-${side}-${index}`, children: jsxs("div", { className: styles.buttonContentColumn, children: [Icon && (jsx("div", { className: styles.iconWrapper, children: jsx(Icon, { ...iconProps }) })), item.showLabel && (jsx("span", { className: styles.buttonLabel, children: item.label }))] }) }) }) }), gap && side === 'left' && jsx("div", { className: styles.gap })] }, index));
+                    })] }) }));
     };
-    if (!isMobile) {
+    if (!visible) {
         return null;
     }
-    return (jsx("div", { className: styles.root, ref: rootRef, "data-qa": dataQa ?? 'swipe-root', children: jsxs("div", { className: classNames(styles.swipeble), ref: swipeableRef, ...swipeHandlers, "data-qa": "swipe-swipeable", children: [!!leftButtons?.length && renderButtons(leftButtons, leftButtonsRef, true), jsx("div", { ref: childrenWrapperRef, className: styles.childrenWrapper, children: children }), !!rightButtons?.length && renderButtons(rightButtons, rightButtonsRef, false)] }) }));
+    return (jsx("div", { className: styles.fixedContainer, ref: fixedContainerRef, "data-qa": dataQa ?? 'swipe-root', children: jsxs("div", { className: classNames(styles.swipeContainer), ref: swipeContainerRef, ...swipeHandlers, "data-qa": "swipe-swipeable", children: [!!leftButtons?.length && renderButtons(leftButtons, leftButtonsRef, 'left'), jsx("div", { ref: contentRef, className: styles.content, children: children }), !!rightButtons?.length && renderButtons(rightButtons, rightButtonsRef, 'right')] }) }));
 };
 
 export { Swipe };