@hh.ru/magritte-ui-swipe 8.2.47 → 8.2.49

package/Swipe.js

@@ -11,517 +11,538 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Layer } from '@hh.ru/magritte-ui-layer';
 import { SwipeContext } from './context.js';
 
-var styles = {"text":"magritte-text___gUsfc_8-2-47","text_max-lines":"magritte-text_max-lines___foe9-_8-2-47","textMaxLines":"magritte-text_max-lines___foe9-_8-2-47","text-ellipsis":"magritte-text-ellipsis___oTw5J_8-2-47","textEllipsis":"magritte-text-ellipsis___oTw5J_8-2-47","text-nowrap":"magritte-text-nowrap___S5GzV_8-2-47","textNowrap":"magritte-text-nowrap___S5GzV_8-2-47","text-dynamic":"magritte-text-dynamic___KzitV_8-2-47","textDynamic":"magritte-text-dynamic___KzitV_8-2-47","text-dynamic_stretched":"magritte-text-dynamic_stretched___hv3Th_8-2-47","textDynamicStretched":"magritte-text-dynamic_stretched___hv3Th_8-2-47","text_style-primary":"magritte-text_style-primary___vYlpl_8-2-47","textStylePrimary":"magritte-text_style-primary___vYlpl_8-2-47","text-dynamic-disabled":"magritte-text-dynamic-disabled___M1GFt_8-2-47","textDynamicDisabled":"magritte-text-dynamic-disabled___M1GFt_8-2-47","text_style-secondary":"magritte-text_style-secondary___qb-4O_8-2-47","textStyleSecondary":"magritte-text_style-secondary___qb-4O_8-2-47","text_style-tertiary":"magritte-text_style-tertiary___atZvg_8-2-47","textStyleTertiary":"magritte-text_style-tertiary___atZvg_8-2-47","text_style-dense":"magritte-text_style-dense___n493a_8-2-47","textStyleDense":"magritte-text_style-dense___n493a_8-2-47","text_style-accent":"magritte-text_style-accent___JDNe4_8-2-47","textStyleAccent":"magritte-text_style-accent___JDNe4_8-2-47","text_style-accent-secondary":"magritte-text_style-accent-secondary___JM6z5_8-2-47","textStyleAccentSecondary":"magritte-text_style-accent-secondary___JM6z5_8-2-47","text_style-positive":"magritte-text_style-positive___OjJIB_8-2-47","textStylePositive":"magritte-text_style-positive___OjJIB_8-2-47","text_style-positive-secondary":"magritte-text_style-positive-secondary___LkPe1_8-2-47","textStylePositiveSecondary":"magritte-text_style-positive-secondary___LkPe1_8-2-47","text_style-negative":"magritte-text_style-negative___wBLmp_8-2-47","textStyleNegative":"magritte-text_style-negative___wBLmp_8-2-47","text_style-negative-secondary":"magritte-text_style-negative-secondary___CO58y_8-2-47","textStyleNegativeSecondary":"magritte-text_style-negative-secondary___CO58y_8-2-47","text_style-warning":"magritte-text_style-warning___23C3Y_8-2-47","textStyleWarning":"magritte-text_style-warning___23C3Y_8-2-47","text_style-warning-secondary":"magritte-text_style-warning-secondary___ZJ3uf_8-2-47","textStyleWarningSecondary":"magritte-text_style-warning-secondary___ZJ3uf_8-2-47","text_style-special":"magritte-text_style-special___LaqKY_8-2-47","textStyleSpecial":"magritte-text_style-special___LaqKY_8-2-47","text_style-special-secondary":"magritte-text_style-special-secondary___-whB-_8-2-47","textStyleSpecialSecondary":"magritte-text_style-special-secondary___-whB-_8-2-47","text_style-constant":"magritte-text_style-constant___tlPqQ_8-2-47","textStyleConstant":"magritte-text_style-constant___tlPqQ_8-2-47","text_style-constant-secondary":"magritte-text_style-constant-secondary___7aNBk_8-2-47","textStyleConstantSecondary":"magritte-text_style-constant-secondary___7aNBk_8-2-47","text_style-inverse":"magritte-text_style-inverse___HYELZ_8-2-47","textStyleInverse":"magritte-text_style-inverse___HYELZ_8-2-47","text_style-inverse-secondary":"magritte-text_style-inverse-secondary___L83fz_8-2-47","textStyleInverseSecondary":"magritte-text_style-inverse-secondary___L83fz_8-2-47","text_style-lovely":"magritte-text_style-lovely___Z46BQ_8-2-47","textStyleLovely":"magritte-text_style-lovely___Z46BQ_8-2-47","text_style-lovely-secondary":"magritte-text_style-lovely-secondary___QL13-_8-2-47","textStyleLovelySecondary":"magritte-text_style-lovely-secondary___QL13-_8-2-47","text_style-dreamy":"magritte-text_style-dreamy___poXej_8-2-47","textStyleDreamy":"magritte-text_style-dreamy___poXej_8-2-47","text_style-dreamy-secondary":"magritte-text_style-dreamy-secondary___PXO7I_8-2-47","textStyleDreamySecondary":"magritte-text_style-dreamy-secondary___PXO7I_8-2-47","text_style-vivid":"magritte-text_style-vivid___dVXNc_8-2-47","textStyleVivid":"magritte-text_style-vivid___dVXNc_8-2-47","text_style-vivid-secondary":"magritte-text_style-vivid-secondary___O1e2o_8-2-47","textStyleVividSecondary":"magritte-text_style-vivid-secondary___O1e2o_8-2-47","text_typography-title-1-semibold":"magritte-text_typography-title-1-semibold___WDZXM_8-2-47","textTypographyTitle1Semibold":"magritte-text-typography-title-1-semibold___RE-5E_8-2-47","text_typography-title-2-semibold":"magritte-text_typography-title-2-semibold___4PvYn_8-2-47","textTypographyTitle2Semibold":"magritte-text-typography-title-2-semibold___r-gyn_8-2-47","text_typography-title-3-semibold":"magritte-text_typography-title-3-semibold___E7pmd_8-2-47","textTypographyTitle3Semibold":"magritte-text-typography-title-3-semibold___AxOn9_8-2-47","text_typography-title-4-semibold":"magritte-text_typography-title-4-semibold___u-8Kd_8-2-47","textTypographyTitle4Semibold":"magritte-text-typography-title-4-semibold___4FOf2_8-2-47","text_typography-title-5-semibold":"magritte-text_typography-title-5-semibold___PRTQc_8-2-47","textTypographyTitle5Semibold":"magritte-text-typography-title-5-semibold___ayTa0_8-2-47","text_typography-subtitle-1-semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_8-2-47","textTypographySubtitle1Semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_8-2-47","text_typography-subtitle-2-semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_8-2-47","textTypographySubtitle2Semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_8-2-47","text_typography-subtitle-3-semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_8-2-47","textTypographySubtitle3Semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_8-2-47","text_typography-subtitle-4-semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_8-2-47","textTypographySubtitle4Semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_8-2-47","text_typography-label-1-regular":"magritte-text_typography-label-1-regular___JMO56_8-2-47","textTypographyLabel1Regular":"magritte-text_typography-label-1-regular___JMO56_8-2-47","text_typography-label-2-regular":"magritte-text_typography-label-2-regular___7gS1P_8-2-47","textTypographyLabel2Regular":"magritte-text_typography-label-2-regular___7gS1P_8-2-47","text_typography-label-3-regular":"magritte-text_typography-label-3-regular___DogGv_8-2-47","textTypographyLabel3Regular":"magritte-text_typography-label-3-regular___DogGv_8-2-47","text_typography-label-4-regular":"magritte-text_typography-label-4-regular___TIPoS_8-2-47","textTypographyLabel4Regular":"magritte-text_typography-label-4-regular___TIPoS_8-2-47","text_typography-label-5-regular":"magritte-text_typography-label-5-regular___y55-P_8-2-47","textTypographyLabel5Regular":"magritte-text_typography-label-5-regular___y55-P_8-2-47","text_typography-paragraph-1-regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_8-2-47","textTypographyParagraph1Regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_8-2-47","text_typography-paragraph-2-regular":"magritte-text_typography-paragraph-2-regular___ndKyc_8-2-47","textTypographyParagraph2Regular":"magritte-text_typography-paragraph-2-regular___ndKyc_8-2-47","text_typography-paragraph-3-regular":"magritte-text_typography-paragraph-3-regular___g0oZF_8-2-47","textTypographyParagraph3Regular":"magritte-text_typography-paragraph-3-regular___g0oZF_8-2-47","text_typography-paragraph-4-regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_8-2-47","textTypographyParagraph4Regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_8-2-47","text_typography-custom-1-semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_8-2-47","textTypographyCustom1Semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_8-2-47","text_typography-custom-2-semibold":"magritte-text_typography-custom-2-semibold___UP1hj_8-2-47","textTypographyCustom2Semibold":"magritte-text_typography-custom-2-semibold___UP1hj_8-2-47","text_typography-custom-3-semibold":"magritte-text_typography-custom-3-semibold___6yO4m_8-2-47","textTypographyCustom3Semibold":"magritte-text_typography-custom-3-semibold___6yO4m_8-2-47","text_typography-custom-4-semibold":"magritte-text_typography-custom-4-semibold___NEahp_8-2-47","textTypographyCustom4Semibold":"magritte-text_typography-custom-4-semibold___NEahp_8-2-47","text_typography-custom-5-semibold":"magritte-text_typography-custom-5-semibold___-UJfV_8-2-47","textTypographyCustom5Semibold":"magritte-text_typography-custom-5-semibold___-UJfV_8-2-47","text_typography-custom-1-italic":"magritte-text_typography-custom-1-italic___-CpMs_8-2-47","textTypographyCustom1Italic":"magritte-text_typography-custom-1-italic___-CpMs_8-2-47","text_typography-custom-2-italic":"magritte-text_typography-custom-2-italic___SvOG4_8-2-47","textTypographyCustom2Italic":"magritte-text_typography-custom-2-italic___SvOG4_8-2-47","text_typography-custom-3-italic":"magritte-text_typography-custom-3-italic___-g0na_8-2-47","textTypographyCustom3Italic":"magritte-text_typography-custom-3-italic___-g0na_8-2-47","text_typography-custom-4-italic":"magritte-text_typography-custom-4-italic___gOGey_8-2-47","textTypographyCustom4Italic":"magritte-text_typography-custom-4-italic___gOGey_8-2-47","text_typography-custom-5-italic":"magritte-text_typography-custom-5-italic___VR9wy_8-2-47","textTypographyCustom5Italic":"magritte-text_typography-custom-5-italic___VR9wy_8-2-47","text_typography-custom-1-medium":"magritte-text_typography-custom-1-medium___hik0e_8-2-47","textTypographyCustom1Medium":"magritte-text_typography-custom-1-medium___hik0e_8-2-47","text_typography-custom-2-medium":"magritte-text_typography-custom-2-medium___-f6Sh_8-2-47","textTypographyCustom2Medium":"magritte-text_typography-custom-2-medium___-f6Sh_8-2-47","text_typography-custom-3-medium":"magritte-text_typography-custom-3-medium___pLvIb_8-2-47","textTypographyCustom3Medium":"magritte-text_typography-custom-3-medium___pLvIb_8-2-47","text_typography-custom-4-medium":"magritte-text_typography-custom-4-medium___zZteM_8-2-47","textTypographyCustom4Medium":"magritte-text_typography-custom-4-medium___zZteM_8-2-47","text_typography-custom-5-medium":"magritte-text_typography-custom-5-medium___gW1Y8_8-2-47","textTypographyCustom5Medium":"magritte-text_typography-custom-5-medium___gW1Y8_8-2-47","text_typography-display-1-display":"magritte-text_typography-display-1-display___74lcX_8-2-47","textTypographyDisplay1Display":"magritte-text_typography-display-1-display___74lcX_8-2-47","text_typography-display-2-display":"magritte-text_typography-display-2-display___naML1_8-2-47","textTypographyDisplay2Display":"magritte-text_typography-display-2-display___naML1_8-2-47","text_typography-display-3-display":"magritte-text_typography-display-3-display___EYcBk_8-2-47","textTypographyDisplay3Display":"magritte-text_typography-display-3-display___EYcBk_8-2-47","text_typography-display-4-display":"magritte-text_typography-display-4-display___2oLzQ_8-2-47","textTypographyDisplay4Display":"magritte-text_typography-display-4-display___2oLzQ_8-2-47","text_typography-display-5-display":"magritte-text_typography-display-5-display___S5wBT_8-2-47","textTypographyDisplay5Display":"magritte-text_typography-display-5-display___S5wBT_8-2-47","text_typography-display-6-display":"magritte-text_typography-display-6-display___mhZQp_8-2-47","textTypographyDisplay6Display":"magritte-text_typography-display-6-display___mhZQp_8-2-47","text_typography-display-7-display":"magritte-text_typography-display-7-display___4O6kW_8-2-47","textTypographyDisplay7Display":"magritte-text_typography-display-7-display___4O6kW_8-2-47","text_typography-display-8-display":"magritte-text_typography-display-8-display___HkNzC_8-2-47","textTypographyDisplay8Display":"magritte-text_typography-display-8-display___HkNzC_8-2-47","text-typography-title-1-semibold":"magritte-text-typography-title-1-semibold___RE-5E_8-2-47","text-typography-title-2-semibold":"magritte-text-typography-title-2-semibold___r-gyn_8-2-47","text-typography-title-3-semibold":"magritte-text-typography-title-3-semibold___AxOn9_8-2-47","text-typography-title-4-semibold":"magritte-text-typography-title-4-semibold___4FOf2_8-2-47","text-typography-title-5-semibold":"magritte-text-typography-title-5-semibold___ayTa0_8-2-47","fixed-container":"magritte-fixed-container___gruvI_8-2-47","fixedContainer":"magritte-fixed-container___gruvI_8-2-47","swipe-container":"magritte-swipe-container___HCz0Y_8-2-47","swipeContainer":"magritte-swipe-container___HCz0Y_8-2-47","content":"magritte-content___oKEcs_8-2-47","buttons":"magritte-buttons___PHNdL_8-2-47","swipe-container_in-progress":"magritte-swipe-container_in-progress___D4pLw_8-2-47","swipeContainerInProgress":"magritte-swipe-container_in-progress___D4pLw_8-2-47","left-buttons-animation":"magritte-left-buttons-animation___KnKbA_8-2-47","leftButtonsAnimation":"magritte-left-buttons-animation___KnKbA_8-2-47","right-buttons-animation":"magritte-right-buttons-animation___Wgsss_8-2-47","rightButtonsAnimation":"magritte-right-buttons-animation___Wgsss_8-2-47","button-wrapper":"magritte-button-wrapper___fp3-5_8-2-47","buttonWrapper":"magritte-button-wrapper___fp3-5_8-2-47","button-wrapper-hide":"magritte-button-wrapper-hide___MN7-s_8-2-47","buttonWrapperHide":"magritte-button-wrapper-hide___MN7-s_8-2-47","button-wrapper-grow":"magritte-button-wrapper-grow___-hbrz_8-2-47","buttonWrapperGrow":"magritte-button-wrapper-grow___-hbrz_8-2-47","button":"magritte-button___jZvyY_8-2-47","button-grow":"magritte-button-grow___IT4MK_8-2-47","buttonGrow":"magritte-button-grow___IT4MK_8-2-47","gap":"magritte-gap___3z9to_8-2-47","button-content":"magritte-button-content___hlzd-_8-2-47","buttonContent":"magritte-button-content___hlzd-_8-2-47","button-content-column":"magritte-button-content-column___48Tzo_8-2-47","buttonContentColumn":"magritte-button-content-column___48Tzo_8-2-47","button-label":"magritte-button-label___l03VO_8-2-47","buttonLabel":"magritte-button-label___l03VO_8-2-47","button_style-neutral":"magritte-button_style-neutral___1yyqh_8-2-47","buttonStyleNeutral":"magritte-button_style-neutral___1yyqh_8-2-47","button_style-accent":"magritte-button_style-accent___L9krS_8-2-47","buttonStyleAccent":"magritte-button_style-accent___L9krS_8-2-47","button_style-positive":"magritte-button_style-positive___2pgae_8-2-47","buttonStylePositive":"magritte-button_style-positive___2pgae_8-2-47","button_style-negative":"magritte-button_style-negative___UClE4_8-2-47","buttonStyleNegative":"magritte-button_style-negative___UClE4_8-2-47","button_style-special":"magritte-button_style-special___sGvAc_8-2-47","buttonStyleSpecial":"magritte-button_style-special___sGvAc_8-2-47","button_style-warning":"magritte-button_style-warning___5bEK0_8-2-47","buttonStyleWarning":"magritte-button_style-warning___5bEK0_8-2-47","icon-wrapper":"magritte-icon-wrapper___0xJZX_8-2-47","iconWrapper":"magritte-icon-wrapper___0xJZX_8-2-47"};
+var styles = {"text":"magritte-text___gUsfc_8-2-49","text_max-lines":"magritte-text_max-lines___foe9-_8-2-49","textMaxLines":"magritte-text_max-lines___foe9-_8-2-49","text-ellipsis":"magritte-text-ellipsis___oTw5J_8-2-49","textEllipsis":"magritte-text-ellipsis___oTw5J_8-2-49","text-nowrap":"magritte-text-nowrap___S5GzV_8-2-49","textNowrap":"magritte-text-nowrap___S5GzV_8-2-49","text-dynamic":"magritte-text-dynamic___KzitV_8-2-49","textDynamic":"magritte-text-dynamic___KzitV_8-2-49","text-dynamic_stretched":"magritte-text-dynamic_stretched___hv3Th_8-2-49","textDynamicStretched":"magritte-text-dynamic_stretched___hv3Th_8-2-49","text_style-primary":"magritte-text_style-primary___vYlpl_8-2-49","textStylePrimary":"magritte-text_style-primary___vYlpl_8-2-49","text-dynamic-disabled":"magritte-text-dynamic-disabled___M1GFt_8-2-49","textDynamicDisabled":"magritte-text-dynamic-disabled___M1GFt_8-2-49","text_style-secondary":"magritte-text_style-secondary___qb-4O_8-2-49","textStyleSecondary":"magritte-text_style-secondary___qb-4O_8-2-49","text_style-tertiary":"magritte-text_style-tertiary___atZvg_8-2-49","textStyleTertiary":"magritte-text_style-tertiary___atZvg_8-2-49","text_style-dense":"magritte-text_style-dense___n493a_8-2-49","textStyleDense":"magritte-text_style-dense___n493a_8-2-49","text_style-accent":"magritte-text_style-accent___JDNe4_8-2-49","textStyleAccent":"magritte-text_style-accent___JDNe4_8-2-49","text_style-accent-secondary":"magritte-text_style-accent-secondary___JM6z5_8-2-49","textStyleAccentSecondary":"magritte-text_style-accent-secondary___JM6z5_8-2-49","text_style-positive":"magritte-text_style-positive___OjJIB_8-2-49","textStylePositive":"magritte-text_style-positive___OjJIB_8-2-49","text_style-positive-secondary":"magritte-text_style-positive-secondary___LkPe1_8-2-49","textStylePositiveSecondary":"magritte-text_style-positive-secondary___LkPe1_8-2-49","text_style-negative":"magritte-text_style-negative___wBLmp_8-2-49","textStyleNegative":"magritte-text_style-negative___wBLmp_8-2-49","text_style-negative-secondary":"magritte-text_style-negative-secondary___CO58y_8-2-49","textStyleNegativeSecondary":"magritte-text_style-negative-secondary___CO58y_8-2-49","text_style-warning":"magritte-text_style-warning___23C3Y_8-2-49","textStyleWarning":"magritte-text_style-warning___23C3Y_8-2-49","text_style-warning-secondary":"magritte-text_style-warning-secondary___ZJ3uf_8-2-49","textStyleWarningSecondary":"magritte-text_style-warning-secondary___ZJ3uf_8-2-49","text_style-special":"magritte-text_style-special___LaqKY_8-2-49","textStyleSpecial":"magritte-text_style-special___LaqKY_8-2-49","text_style-special-secondary":"magritte-text_style-special-secondary___-whB-_8-2-49","textStyleSpecialSecondary":"magritte-text_style-special-secondary___-whB-_8-2-49","text_style-constant":"magritte-text_style-constant___tlPqQ_8-2-49","textStyleConstant":"magritte-text_style-constant___tlPqQ_8-2-49","text_style-constant-secondary":"magritte-text_style-constant-secondary___7aNBk_8-2-49","textStyleConstantSecondary":"magritte-text_style-constant-secondary___7aNBk_8-2-49","text_style-inverse":"magritte-text_style-inverse___HYELZ_8-2-49","textStyleInverse":"magritte-text_style-inverse___HYELZ_8-2-49","text_style-inverse-secondary":"magritte-text_style-inverse-secondary___L83fz_8-2-49","textStyleInverseSecondary":"magritte-text_style-inverse-secondary___L83fz_8-2-49","text_style-lovely":"magritte-text_style-lovely___Z46BQ_8-2-49","textStyleLovely":"magritte-text_style-lovely___Z46BQ_8-2-49","text_style-lovely-secondary":"magritte-text_style-lovely-secondary___QL13-_8-2-49","textStyleLovelySecondary":"magritte-text_style-lovely-secondary___QL13-_8-2-49","text_style-dreamy":"magritte-text_style-dreamy___poXej_8-2-49","textStyleDreamy":"magritte-text_style-dreamy___poXej_8-2-49","text_style-dreamy-secondary":"magritte-text_style-dreamy-secondary___PXO7I_8-2-49","textStyleDreamySecondary":"magritte-text_style-dreamy-secondary___PXO7I_8-2-49","text_style-vivid":"magritte-text_style-vivid___dVXNc_8-2-49","textStyleVivid":"magritte-text_style-vivid___dVXNc_8-2-49","text_style-vivid-secondary":"magritte-text_style-vivid-secondary___O1e2o_8-2-49","textStyleVividSecondary":"magritte-text_style-vivid-secondary___O1e2o_8-2-49","text_typography-title-1-semibold":"magritte-text_typography-title-1-semibold___WDZXM_8-2-49","textTypographyTitle1Semibold":"magritte-text-typography-title-1-semibold___RE-5E_8-2-49","text_typography-title-2-semibold":"magritte-text_typography-title-2-semibold___4PvYn_8-2-49","textTypographyTitle2Semibold":"magritte-text-typography-title-2-semibold___r-gyn_8-2-49","text_typography-title-3-semibold":"magritte-text_typography-title-3-semibold___E7pmd_8-2-49","textTypographyTitle3Semibold":"magritte-text-typography-title-3-semibold___AxOn9_8-2-49","text_typography-title-4-semibold":"magritte-text_typography-title-4-semibold___u-8Kd_8-2-49","textTypographyTitle4Semibold":"magritte-text-typography-title-4-semibold___4FOf2_8-2-49","text_typography-title-5-semibold":"magritte-text_typography-title-5-semibold___PRTQc_8-2-49","textTypographyTitle5Semibold":"magritte-text-typography-title-5-semibold___ayTa0_8-2-49","text_typography-subtitle-1-semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_8-2-49","textTypographySubtitle1Semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_8-2-49","text_typography-subtitle-2-semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_8-2-49","textTypographySubtitle2Semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_8-2-49","text_typography-subtitle-3-semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_8-2-49","textTypographySubtitle3Semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_8-2-49","text_typography-subtitle-4-semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_8-2-49","textTypographySubtitle4Semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_8-2-49","text_typography-label-1-regular":"magritte-text_typography-label-1-regular___JMO56_8-2-49","textTypographyLabel1Regular":"magritte-text_typography-label-1-regular___JMO56_8-2-49","text_typography-label-2-regular":"magritte-text_typography-label-2-regular___7gS1P_8-2-49","textTypographyLabel2Regular":"magritte-text_typography-label-2-regular___7gS1P_8-2-49","text_typography-label-3-regular":"magritte-text_typography-label-3-regular___DogGv_8-2-49","textTypographyLabel3Regular":"magritte-text_typography-label-3-regular___DogGv_8-2-49","text_typography-label-4-regular":"magritte-text_typography-label-4-regular___TIPoS_8-2-49","textTypographyLabel4Regular":"magritte-text_typography-label-4-regular___TIPoS_8-2-49","text_typography-label-5-regular":"magritte-text_typography-label-5-regular___y55-P_8-2-49","textTypographyLabel5Regular":"magritte-text_typography-label-5-regular___y55-P_8-2-49","text_typography-paragraph-1-regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_8-2-49","textTypographyParagraph1Regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_8-2-49","text_typography-paragraph-2-regular":"magritte-text_typography-paragraph-2-regular___ndKyc_8-2-49","textTypographyParagraph2Regular":"magritte-text_typography-paragraph-2-regular___ndKyc_8-2-49","text_typography-paragraph-3-regular":"magritte-text_typography-paragraph-3-regular___g0oZF_8-2-49","textTypographyParagraph3Regular":"magritte-text_typography-paragraph-3-regular___g0oZF_8-2-49","text_typography-paragraph-4-regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_8-2-49","textTypographyParagraph4Regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_8-2-49","text_typography-custom-1-semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_8-2-49","textTypographyCustom1Semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_8-2-49","text_typography-custom-2-semibold":"magritte-text_typography-custom-2-semibold___UP1hj_8-2-49","textTypographyCustom2Semibold":"magritte-text_typography-custom-2-semibold___UP1hj_8-2-49","text_typography-custom-3-semibold":"magritte-text_typography-custom-3-semibold___6yO4m_8-2-49","textTypographyCustom3Semibold":"magritte-text_typography-custom-3-semibold___6yO4m_8-2-49","text_typography-custom-4-semibold":"magritte-text_typography-custom-4-semibold___NEahp_8-2-49","textTypographyCustom4Semibold":"magritte-text_typography-custom-4-semibold___NEahp_8-2-49","text_typography-custom-5-semibold":"magritte-text_typography-custom-5-semibold___-UJfV_8-2-49","textTypographyCustom5Semibold":"magritte-text_typography-custom-5-semibold___-UJfV_8-2-49","text_typography-custom-1-italic":"magritte-text_typography-custom-1-italic___-CpMs_8-2-49","textTypographyCustom1Italic":"magritte-text_typography-custom-1-italic___-CpMs_8-2-49","text_typography-custom-2-italic":"magritte-text_typography-custom-2-italic___SvOG4_8-2-49","textTypographyCustom2Italic":"magritte-text_typography-custom-2-italic___SvOG4_8-2-49","text_typography-custom-3-italic":"magritte-text_typography-custom-3-italic___-g0na_8-2-49","textTypographyCustom3Italic":"magritte-text_typography-custom-3-italic___-g0na_8-2-49","text_typography-custom-4-italic":"magritte-text_typography-custom-4-italic___gOGey_8-2-49","textTypographyCustom4Italic":"magritte-text_typography-custom-4-italic___gOGey_8-2-49","text_typography-custom-5-italic":"magritte-text_typography-custom-5-italic___VR9wy_8-2-49","textTypographyCustom5Italic":"magritte-text_typography-custom-5-italic___VR9wy_8-2-49","text_typography-custom-1-medium":"magritte-text_typography-custom-1-medium___hik0e_8-2-49","textTypographyCustom1Medium":"magritte-text_typography-custom-1-medium___hik0e_8-2-49","text_typography-custom-2-medium":"magritte-text_typography-custom-2-medium___-f6Sh_8-2-49","textTypographyCustom2Medium":"magritte-text_typography-custom-2-medium___-f6Sh_8-2-49","text_typography-custom-3-medium":"magritte-text_typography-custom-3-medium___pLvIb_8-2-49","textTypographyCustom3Medium":"magritte-text_typography-custom-3-medium___pLvIb_8-2-49","text_typography-custom-4-medium":"magritte-text_typography-custom-4-medium___zZteM_8-2-49","textTypographyCustom4Medium":"magritte-text_typography-custom-4-medium___zZteM_8-2-49","text_typography-custom-5-medium":"magritte-text_typography-custom-5-medium___gW1Y8_8-2-49","textTypographyCustom5Medium":"magritte-text_typography-custom-5-medium___gW1Y8_8-2-49","text_typography-display-1-display":"magritte-text_typography-display-1-display___74lcX_8-2-49","textTypographyDisplay1Display":"magritte-text_typography-display-1-display___74lcX_8-2-49","text_typography-display-2-display":"magritte-text_typography-display-2-display___naML1_8-2-49","textTypographyDisplay2Display":"magritte-text_typography-display-2-display___naML1_8-2-49","text_typography-display-3-display":"magritte-text_typography-display-3-display___EYcBk_8-2-49","textTypographyDisplay3Display":"magritte-text_typography-display-3-display___EYcBk_8-2-49","text_typography-display-4-display":"magritte-text_typography-display-4-display___2oLzQ_8-2-49","textTypographyDisplay4Display":"magritte-text_typography-display-4-display___2oLzQ_8-2-49","text_typography-display-5-display":"magritte-text_typography-display-5-display___S5wBT_8-2-49","textTypographyDisplay5Display":"magritte-text_typography-display-5-display___S5wBT_8-2-49","text_typography-display-6-display":"magritte-text_typography-display-6-display___mhZQp_8-2-49","textTypographyDisplay6Display":"magritte-text_typography-display-6-display___mhZQp_8-2-49","text_typography-display-7-display":"magritte-text_typography-display-7-display___4O6kW_8-2-49","textTypographyDisplay7Display":"magritte-text_typography-display-7-display___4O6kW_8-2-49","text_typography-display-8-display":"magritte-text_typography-display-8-display___HkNzC_8-2-49","textTypographyDisplay8Display":"magritte-text_typography-display-8-display___HkNzC_8-2-49","text-typography-title-1-semibold":"magritte-text-typography-title-1-semibold___RE-5E_8-2-49","text-typography-title-2-semibold":"magritte-text-typography-title-2-semibold___r-gyn_8-2-49","text-typography-title-3-semibold":"magritte-text-typography-title-3-semibold___AxOn9_8-2-49","text-typography-title-4-semibold":"magritte-text-typography-title-4-semibold___4FOf2_8-2-49","text-typography-title-5-semibold":"magritte-text-typography-title-5-semibold___ayTa0_8-2-49","fixed-container":"magritte-fixed-container___gruvI_8-2-49","fixedContainer":"magritte-fixed-container___gruvI_8-2-49","swipe-container":"magritte-swipe-container___HCz0Y_8-2-49","swipeContainer":"magritte-swipe-container___HCz0Y_8-2-49","content":"magritte-content___oKEcs_8-2-49","buttons":"magritte-buttons___PHNdL_8-2-49","swipe-container_in-progress":"magritte-swipe-container_in-progress___D4pLw_8-2-49","swipeContainerInProgress":"magritte-swipe-container_in-progress___D4pLw_8-2-49","left-buttons-animation":"magritte-left-buttons-animation___KnKbA_8-2-49","leftButtonsAnimation":"magritte-left-buttons-animation___KnKbA_8-2-49","right-buttons-animation":"magritte-right-buttons-animation___Wgsss_8-2-49","rightButtonsAnimation":"magritte-right-buttons-animation___Wgsss_8-2-49","button-wrapper":"magritte-button-wrapper___fp3-5_8-2-49","buttonWrapper":"magritte-button-wrapper___fp3-5_8-2-49","button-wrapper-hide":"magritte-button-wrapper-hide___MN7-s_8-2-49","buttonWrapperHide":"magritte-button-wrapper-hide___MN7-s_8-2-49","button-wrapper-grow":"magritte-button-wrapper-grow___-hbrz_8-2-49","buttonWrapperGrow":"magritte-button-wrapper-grow___-hbrz_8-2-49","button":"magritte-button___jZvyY_8-2-49","button-grow":"magritte-button-grow___IT4MK_8-2-49","buttonGrow":"magritte-button-grow___IT4MK_8-2-49","gap":"magritte-gap___3z9to_8-2-49","button-content":"magritte-button-content___hlzd-_8-2-49","buttonContent":"magritte-button-content___hlzd-_8-2-49","button-content-column":"magritte-button-content-column___48Tzo_8-2-49","buttonContentColumn":"magritte-button-content-column___48Tzo_8-2-49","button-label":"magritte-button-label___l03VO_8-2-49","buttonLabel":"magritte-button-label___l03VO_8-2-49","button_style-neutral":"magritte-button_style-neutral___1yyqh_8-2-49","buttonStyleNeutral":"magritte-button_style-neutral___1yyqh_8-2-49","button_style-accent":"magritte-button_style-accent___L9krS_8-2-49","buttonStyleAccent":"magritte-button_style-accent___L9krS_8-2-49","button_style-positive":"magritte-button_style-positive___2pgae_8-2-49","buttonStylePositive":"magritte-button_style-positive___2pgae_8-2-49","button_style-negative":"magritte-button_style-negative___UClE4_8-2-49","buttonStyleNegative":"magritte-button_style-negative___UClE4_8-2-49","button_style-special":"magritte-button_style-special___sGvAc_8-2-49","buttonStyleSpecial":"magritte-button_style-special___sGvAc_8-2-49","button_style-warning":"magritte-button_style-warning___5bEK0_8-2-49","buttonStyleWarning":"magritte-button_style-warning___5bEK0_8-2-49","icon-wrapper":"magritte-icon-wrapper___0xJZX_8-2-49","iconWrapper":"magritte-icon-wrapper___0xJZX_8-2-49"};
 
 const MIN_BUTTON_WIDTH = 76;
 const OPEN_THRESHOLD = 1 / 3;
 const MIN_SWIPE_DISTANCE = MIN_BUTTON_WIDTH * OPEN_THRESHOLD;
 const GAP_WIDTH = 16;
-var ButtonsState;
-(function (ButtonsState) {
-    ButtonsState["Close"] = "close";
-    ButtonsState["LeftOpen"] = "leftOpen";
-    ButtonsState["RightOpen"] = "rightOpen";
-})(ButtonsState || (ButtonsState = {}));
-var LongState;
-(function (LongState) {
-    LongState["Off"] = "off";
-    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, 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([]); // ссылки на кнопки, по которым считается реальный размер
-    const leftButtonsSumSizeRef = useRef(0); // реальный размер, требуемый левым кнопкам
-    const rightButtonsSumSizeRef = useRef(0); // реальный размер, требуемый правым кнопкам
-    const leftButtonsSizeRef = useRef(0); // установленный размер левых кнопок
-    const rigthButtonsSizeRef = useRef(0); // установленный размер правых кнопок
-    const prevDistance = useRef(0);
-    const swipeThresholdRef = useRef({ max: MIN_SWIPE_DISTANCE });
-    const swipeLockRef = useRef(false);
-    const { isMobile } = useBreakpoint();
-    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, // предполагаемое состояние, нужно чтобы нельзя было двигать влево-вправо за один раз
-        now: ButtonsState.Close, // текущее состояние
-        next: ButtonsState.Close, // следующее состояние, после завершения свайпа
-    });
-    const [demoInProgress, setDemoInProgress] = useState(false);
-    const setAnimateButtonsWidth = useCallback((flag) => {
-        if (leftButtonsRef.current) {
-            leftButtonsRef.current.style.transitionProperty = flag ? 'width' : 'none';
-        }
-        if (rightButtonsRef.current) {
-            rightButtonsRef.current.style.transitionProperty = flag ? 'width' : 'none';
-        }
-    }, []);
-    const recalcSwipeContainerWidth = useCallback(() => {
-        if (swipeContainerRef.current && contentRef.current && fixedContainerRef.current) {
-            const width = Math.round(fixedContainerRef.current.getBoundingClientRect().width);
-            // устанавливаем размер области равной размеру контента,
-            // чтобы она не растягивалась, когда растягиваются кнопки
-            setSwipeContainerWidth(width);
-            swipeContainerRef.current.style.width = `${width}px`;
-            contentRef.current.style.width = `${width}px`;
-            contentRef.current.style.minWidth = `${width}px`;
-        }
-    }, [setSwipeContainerWidth]);
-    useEffect(() => {
-        if (visible) {
-            recalcSwipeContainerWidth();
-        }
-    }, [visible, recalcSwipeContainerWidth]);
-    useResize(useDebounce(recalcSwipeContainerWidth, 50));
-    // обновляет порог срабатывания для useSwipe в зависимости от состояния
-    const updateSwipeThreshold = useCallback(() => {
-        const { now, candidate } = stateRef.current;
-        // если открыта одна из сторон, то мы можем свайпнуть к закрытию, или к активации длинного свайпа
-        if ([ButtonsState.LeftOpen, ButtonsState.RightOpen].includes(now)) {
-            swipeThresholdRef.current =
-                now === ButtonsState.LeftOpen
-                    ? {
-                        // свайп к закрытию
-                        minDelta: -MIN_SWIPE_DISTANCE,
-                        // свайп к активации длинного свайпа
-                        maxDelta: useLongSwipe ? MIN_SWIPE_DISTANCE : Number.MAX_SAFE_INTEGER,
-                    }
-                    : {
-                        // свайп к закрытию
-                        maxDelta: MIN_SWIPE_DISTANCE,
-                        // свайп к активации длинного свайпа
-                        minDelta: useLongSwipe ? -MIN_SWIPE_DISTANCE : -Number.MAX_SAFE_INTEGER,
-                    };
-        }
-        else if (candidate === ButtonsState.LeftOpen) {
-            // если кандидат на открытие слева, то мы можем свайпнуть к открытию слева
-            swipeThresholdRef.current = { maxDelta: MIN_SWIPE_DISTANCE };
-        }
-        else if (candidate === ButtonsState.RightOpen) {
-            // если кандидат на открытие справа, то мы можем свайпнуть к открытию справа, дельта с отрицательным знаком
-            // потому что свайпаем вправо
-            swipeThresholdRef.current = { minDelta: -MIN_SWIPE_DISTANCE };
-        }
-    }, [useLongSwipe]);
-    // анимирует размер кнопок для перехода в переданное состояние
-    const animateToState = useCallback((toState, velocity) => {
-        leftBlockApi.stop();
-        rightBlockApi.stop();
-        stateRef.current.now = toState;
-        const animationConfig = {
-            width: 0,
-            config: {
-                ...config.gentle,
-                clamp: true,
-                velocity: 0,
-            },
-        };
-        let api;
-        // если нужно закрыть кнопки, то сначала определяем с какой стороны кнопки открыты
-        // получаем апи для акнимации кнопок с нужной стороны
-        // вычисляем начальную скорость, т.к. анимация закрытия кнопок с разных сторон направлена в разные стороны
-        // то для правой стороны нужно поменять знак начальной скорости
-        if (toState === ButtonsState.Close) {
-            const fromLeft = leftBlockApi.current[0].get().width > 0;
-            api = fromLeft ? leftBlockApi : rightBlockApi;
-            const v = fromLeft ? velocity : -velocity;
-            // скорость делим на 1000 т.к. в событии приходит скорость в пикселях в секунду
-            // а нужна в пикселях в миллисекунду
-            animationConfig.config.velocity = v / 1000;
-        }
-        else {
-            // если нужно открыть кнопки, то получаем апи для анимации блока кнопок с нужной стороны
-            // вычисляем начальную скорость, т.к. анимация открытия кнопок с разных сторон направлена в разные стороны
-            // то для правой стороны нужно поменять знак начальной скорости
-            api = toState === ButtonsState.LeftOpen ? leftBlockApi : rightBlockApi;
-            const v = toState === ButtonsState.LeftOpen ? velocity : -velocity;
-            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, 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;
-        }
-        rightBlockApi.stop();
-        leftBlockApi.stop();
-        onStart?.();
-        onResetDemo?.();
+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([]);
+  const leftButtonsSumSizeRef = useRef(0);
+  const rightButtonsSumSizeRef = useRef(0);
+  const leftButtonsSizeRef = useRef(0);
+  const rigthButtonsSizeRef = useRef(0);
+  const prevDistance = useRef(0);
+  const swipeThresholdRef = useRef({ max: MIN_SWIPE_DISTANCE });
+  const swipeLockRef = useRef(false);
+  const { isMobile } = useBreakpoint();
+  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("off" /* Off */);
+  const stateRef = useRef({
+    candidate: "close" /* Close */,
+    // предполагаемое состояние, нужно чтобы нельзя было двигать влево-вправо за один раз
+    now: "close" /* Close */,
+    // текущее состояние
+    next: "close" /* Close */
+    // следующее состояние, после завершения свайпа
+  });
+  const [demoInProgress, setDemoInProgress] = useState(false);
+  const setAnimateButtonsWidth = useCallback((flag) => {
+    if (leftButtonsRef.current) {
+      leftButtonsRef.current.style.transitionProperty = flag ? "width" : "none";
+    }
+    if (rightButtonsRef.current) {
+      rightButtonsRef.current.style.transitionProperty = flag ? "width" : "none";
+    }
+  }, []);
+  const recalcSwipeContainerWidth = useCallback(() => {
+    if (swipeContainerRef.current && contentRef.current && fixedContainerRef.current) {
+      const width = Math.round(fixedContainerRef.current.getBoundingClientRect().width);
+      setSwipeContainerWidth(width);
+      swipeContainerRef.current.style.width = `${width}px`;
+      contentRef.current.style.width = `${width}px`;
+      contentRef.current.style.minWidth = `${width}px`;
+    }
+  }, [setSwipeContainerWidth]);
+  useEffect(() => {
+    if (visible) {
+      recalcSwipeContainerWidth();
+    }
+  }, [visible, recalcSwipeContainerWidth]);
+  useResize(useDebounce(recalcSwipeContainerWidth, 50));
+  const updateSwipeThreshold = useCallback(() => {
+    const { now, candidate } = stateRef.current;
+    if (["leftOpen" /* LeftOpen */, "rightOpen" /* RightOpen */].includes(now)) {
+      swipeThresholdRef.current = now === "leftOpen" /* LeftOpen */ ? {
+        // свайп к закрытию
+        minDelta: -MIN_SWIPE_DISTANCE,
+        // свайп к активации длинного свайпа
+        maxDelta: useLongSwipe ? MIN_SWIPE_DISTANCE : Number.MAX_SAFE_INTEGER
+      } : {
+        // свайп к закрытию
+        maxDelta: MIN_SWIPE_DISTANCE,
+        // свайп к активации длинного свайпа
+        minDelta: useLongSwipe ? -MIN_SWIPE_DISTANCE : -Number.MAX_SAFE_INTEGER
+      };
+    } else if (candidate === "leftOpen" /* LeftOpen */) {
+      swipeThresholdRef.current = { maxDelta: MIN_SWIPE_DISTANCE };
+    } else if (candidate === "rightOpen" /* RightOpen */) {
+      swipeThresholdRef.current = { minDelta: -MIN_SWIPE_DISTANCE };
+    }
+  }, [useLongSwipe]);
+  const animateToState = useCallback(
+    (toState, velocity) => {
+      leftBlockApi.stop();
+      rightBlockApi.stop();
+      stateRef.current.now = toState;
+      const animationConfig = {
+        width: 0,
+        config: {
+          ...config.gentle,
+          clamp: true,
+          velocity: 0
+        }
+      };
+      let api;
+      if (toState === "close" /* Close */) {
+        const fromLeft = leftBlockApi.current[0].get().width > 0;
+        api = fromLeft ? leftBlockApi : rightBlockApi;
+        const v = fromLeft ? velocity : -velocity;
+        animationConfig.config.velocity = v / 1e3;
+      } else {
+        api = toState === "leftOpen" /* LeftOpen */ ? leftBlockApi : rightBlockApi;
+        const v = toState === "leftOpen" /* LeftOpen */ ? velocity : -velocity;
+        animationConfig.width = Math.min(
+          swipeContainerWidth,
+          (toState === "leftOpen" /* LeftOpen */ ? leftButtonsSumSizeRef : rightButtonsSumSizeRef).current
+        );
+        animationConfig.config.velocity = v / 1e3;
+      }
+      void api.start(animationConfig)[0].then(({ finished }) => {
+        if (finished) {
+          stateRef.current.candidate = "close" /* Close */;
+          if (swipeContainerRef.current !== null) {
+            swipeContainerRef.current.classList.remove(styles.swipeContainerInProgress);
+          }
+        }
+      });
+    },
+    [leftBlockApi, rightBlockApi, swipeContainerWidth]
+  );
+  const id = useId();
+  const swipeContext = useContext(SwipeContext);
+  useEffect(() => {
+    if (visible && swipeContext !== null) {
+      swipeContext.register(id, () => {
+        animateToState("close" /* Close */, 0);
+      });
+    }
+  }, [visible, swipeContext, id, animateToState]);
+  const handleSwipeStart = useCallback(() => {
+    if (demoInProgress || swipeLockRef.current) {
+      return;
+    }
+    rightBlockApi.stop();
+    leftBlockApi.stop();
+    onStart?.();
+    onResetDemo?.();
+    updateSwipeThreshold();
+    if (longState !== "off" /* Off */) {
+      setLongState("off" /* Off */);
+    }
+    prevDistance.current = 0;
+    setAnimateButtonsWidth(false);
+  }, [
+    demoInProgress,
+    rightBlockApi,
+    leftBlockApi,
+    onStart,
+    onResetDemo,
+    updateSwipeThreshold,
+    longState,
+    setAnimateButtonsWidth
+  ]);
+  const recalcButtonsSizes = useCallback(
+    (distance) => {
+      const distanceDelta = distance - prevDistance.current;
+      if (distanceDelta === 0) {
+        return;
+      }
+      prevDistance.current = distance;
+      const isLeft = stateRef.current.now === "leftOpen" /* LeftOpen */ || stateRef.current.candidate === "leftOpen" /* LeftOpen */ || stateRef.current.now !== "rightOpen" /* RightOpen */ && stateRef.current.candidate === "close" /* Close */ && distanceDelta > 0;
+      const hasButtons = isLeft ? !!leftButtonsRef.current : !!rightButtonsRef.current;
+      const api = isLeft ? leftBlockApi : rightBlockApi;
+      const currentWidth = api.current[0].get().width;
+      if (!hasButtons) {
+        return;
+      }
+      const width = Math.max(currentWidth + (isLeft ? distanceDelta : -distanceDelta), 0);
+      api.set({ width });
+      if (width > 0) {
+        stateRef.current.candidate = isLeft ? "leftOpen" /* LeftOpen */ : "rightOpen" /* RightOpen */;
         updateSwipeThreshold();
-        if (longState !== LongState.Off) {
-            setLongState(LongState.Off);
-        }
-        prevDistance.current = 0;
-        setAnimateButtonsWidth(false);
-    }, [
-        demoInProgress,
-        rightBlockApi,
-        leftBlockApi,
-        onStart,
-        onResetDemo,
-        updateSwipeThreshold,
-        longState,
-        setAnimateButtonsWidth,
-    ]);
-    const recalcButtonsSizes = useCallback((distance) => {
-        // работаем с изменением дистанции, чтобы добавлять ее к существующей ширине
-        const distanceDelta = distance - prevDistance.current;
-        if (distanceDelta === 0) {
-            return;
-        }
-        prevDistance.current = distance;
-        // определяем сторону свайпа, проверяем есть ли с этой стороны кнопки, если есть меняем ширину блока кнопок
-        const isLeft = stateRef.current.now === ButtonsState.LeftOpen ||
-            stateRef.current.candidate === ButtonsState.LeftOpen ||
-            (stateRef.current.now !== ButtonsState.RightOpen &&
-                stateRef.current.candidate === ButtonsState.Close &&
-                distanceDelta > 0);
-        const hasButtons = isLeft ? !!leftButtonsRef.current : !!rightButtonsRef.current;
-        const api = isLeft ? leftBlockApi : rightBlockApi;
-        const currentWidth = api.current[0].get().width;
-        if (!hasButtons) {
-            return;
-        }
-        const width = Math.max(currentWidth + (isLeft ? distanceDelta : -distanceDelta), 0);
-        api.set({ width });
-        // если ширина блока кнопок > 0 фиксируем сторону-кандидат
-        // чтобы не было возможности двигать влево-вправо за один свайп
-        if (width > 0) {
-            stateRef.current.candidate = isLeft ? ButtonsState.LeftOpen : ButtonsState.RightOpen;
-            updateSwipeThreshold();
-        }
-        // определяем значение justifyContent у контейнера в зависимости от того, с какой стороны сейчас раскрыты кнопки
-        // если раскрыты слева, то контент должен уходить за пределы области в право, ставим flex-start
-        // если раскрыты справа, то контент должен уходить за пределы области в лево, ставим flex-end
-        // визуально ничего не меняется, потому что контент в контейнере растянут на всю ширину
-        if (swipeContainerRef.current) {
-            swipeContainerRef.current.classList.toggle(styles.swipeContainerInProgress, width > 0);
-            swipeContainerRef.current.style.justifyContent =
-                stateRef.current.candidate === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
-        }
-        // определяем выполнены ли условия для перевода компонента в состояние длинного свайпа
-        // длинный свайп может быть отключен вообще или может быть недоступен если это сдвиг на проекцию
-        const sumSize = isLeft ? leftButtonsSumSizeRef.current : rightButtonsSumSizeRef.current;
-        if (useLongSwipe && width > sumSize + MIN_SWIPE_DISTANCE) {
-            setLongState(isLeft ? LongState.Left : LongState.Right);
-            stateRef.current.next = ButtonsState.Close;
-        }
-        else {
-            setLongState(LongState.Off);
-        }
-        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;
-        }
-        // сдвиг вслед за пальцем, можем делать длинный свайп
-        recalcButtonsSizes(event.distanceX);
-    }, [demoInProgress, recalcButtonsSizes]);
-    const runSwipeAnimation = useCallback(() => {
-        if (!swipeContainerRef.current) {
-            return;
-        }
-        if (stateRef.current.next === ButtonsState.Close) {
-            // свайп завершен, кнопки должны закрыться, потому что не выполнен минимальный размер раскрытия
-            // сбрасываем ширину в 0
-            if (leftButtonsRef.current) {
-                leftButtonsRef.current.style.width = '0';
-            }
-            leftButtonsSizeRef.current = 0;
-            if (rightButtonsRef.current) {
-                rightButtonsRef.current.style.width = '0';
-            }
-            rigthButtonsSizeRef.current = 0;
-        }
-        else if (stateRef.current.next === ButtonsState.LeftOpen) {
-            // выполнено условие раскрытия слева
-            // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
-            const maxLeftSize = Math.min(swipeContainerWidth, leftButtonsSumSizeRef.current);
-            if (leftButtonsRef.current) {
-                leftButtonsRef.current.style.width = `${maxLeftSize}px`;
-            }
-            leftButtonsSizeRef.current = maxLeftSize;
-            rigthButtonsSizeRef.current = 0;
-        }
-        else if (stateRef.current.next === ButtonsState.RightOpen) {
-            // выполнено условие раскрытия справа
-            // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
-            const maxRightSize = Math.min(swipeContainerWidth, rightButtonsSumSizeRef.current);
-            if (rightButtonsRef.current) {
-                rightButtonsRef.current.style.width = `${maxRightSize}px`;
-            }
-            rigthButtonsSizeRef.current = maxRightSize;
-            leftButtonsSizeRef.current = 0;
-        }
-        stateRef.current.now = stateRef.current.next;
-    }, [swipeContainerWidth]);
-    const handleSwipeEnd = useCallback((event) => {
-        if (demoInProgress) {
-            return;
-        }
-        onFinish?.();
-        // если это длинный свайп, то триггерим клик на соответствующую кнопку, и закрываем блок кнопок
-        // если не установлен флаг keepStateAfterLong
-        if (longState !== LongState.Off) {
-            const buttons = longState === LongState.Left ? leftButtons : rightButtons;
-            const button = longState === LongState.Left ? buttons?.[0] : buttons?.[buttons.length - 1];
-            button?.onClick();
-            onResetDemo?.();
-            swipeLockRef.current = !!button?.keepStateAfterLong;
-            if (!button?.keepStateAfterLong) {
-                animateToState(ButtonsState.Close, event.velocityX);
-            }
-            return;
-        }
-        // если это не длинный свайп, то анимируем к соответствующему состоянию
-        // если открыт левый или правый блок, то анимируем в закрытое состояние
-        // если закрыты оба блока, то анимируем к открытию стороны-кадидата
-        const { now, candidate } = stateRef.current;
-        animateToState([ButtonsState.LeftOpen, ButtonsState.RightOpen].includes(now) ? ButtonsState.Close : candidate, event.velocityX);
-    }, [demoInProgress, longState, leftButtons, rightButtons, onFinish, onResetDemo, animateToState]);
-    const handleSwipeCancel = useCallback((event) => {
-        animateToState(stateRef.current.now, event.velocityX);
-    }, [animateToState]);
-    const swipeHandlers = useSwipe({
-        thresholdXRef: swipeThresholdRef,
-        onSwipeStart: handleSwipeStart,
-        onSwipeMove: handleSwipeMove,
-        onSwipeEnd: handleSwipeEnd,
-        onSwipeCancel: handleSwipeCancel,
-    });
-    useEffect(() => {
-        const swipeContainer = swipeContainerRef.current;
-        if (!visible || !swipeContainer) {
-            return void 0;
-        }
-        const preventScroll = (event) => {
-            if (Math.abs(prevDistance.current) > MAIN_AXIS_THRESHOLD_PX) {
-                event.preventDefault();
-            }
-        };
-        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;
-        return { buttons, oppositeButtons };
-    }, []);
-    const unmountDemoEndHandler = useCallback((event) => {
-        if (event.propertyName !== 'width') {
-            return;
-        }
-        setDemoInProgress(false);
-        const isTwoSidedSwipe = !!rightButtonsRef.current && !!leftButtonsRef.current;
-        const isLeft = isTwoSidedSwipe
-            ? twoSidedDemoMode === 'right-to-left' || twoSidedDemoMode === 'left'
-            : !!leftButtonsRef.current;
-        const buttons = isLeft ? leftButtonsRef.current : rightButtonsRef.current;
-        buttons?.removeEventListener('transitionend', unmountDemoEndHandler);
-        fixedContainerRef.current?.style.removeProperty('--transition-duration');
-        fixedContainerRef.current?.style.removeProperty('--transition-delay');
+      }
+      if (swipeContainerRef.current) {
+        swipeContainerRef.current.classList.toggle(styles.swipeContainerInProgress, width > 0);
+        swipeContainerRef.current.style.justifyContent = stateRef.current.candidate === "rightOpen" /* RightOpen */ ? "flex-end" : "flex-start";
+      }
+      const sumSize = isLeft ? leftButtonsSumSizeRef.current : rightButtonsSumSizeRef.current;
+      if (useLongSwipe && width > sumSize + MIN_SWIPE_DISTANCE) {
+        setLongState(isLeft ? "left" /* Left */ : "right" /* Right */);
+        stateRef.current.next = "close" /* Close */;
+      } else {
+        setLongState("off" /* Off */);
+      }
+      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;
+      }
+      recalcButtonsSizes(event.distanceX);
+    },
+    [demoInProgress, recalcButtonsSizes]
+  );
+  const runSwipeAnimation = useCallback(() => {
+    if (!swipeContainerRef.current) {
+      return;
+    }
+    if (stateRef.current.next === "close" /* Close */) {
+      if (leftButtonsRef.current) {
+        leftButtonsRef.current.style.width = "0";
+      }
+      leftButtonsSizeRef.current = 0;
+      if (rightButtonsRef.current) {
+        rightButtonsRef.current.style.width = "0";
+      }
+      rigthButtonsSizeRef.current = 0;
+    } else if (stateRef.current.next === "leftOpen" /* LeftOpen */) {
+      const maxLeftSize = Math.min(swipeContainerWidth, leftButtonsSumSizeRef.current);
+      if (leftButtonsRef.current) {
+        leftButtonsRef.current.style.width = `${maxLeftSize}px`;
+      }
+      leftButtonsSizeRef.current = maxLeftSize;
+      rigthButtonsSizeRef.current = 0;
+    } else if (stateRef.current.next === "rightOpen" /* RightOpen */) {
+      const maxRightSize = Math.min(swipeContainerWidth, rightButtonsSumSizeRef.current);
+      if (rightButtonsRef.current) {
+        rightButtonsRef.current.style.width = `${maxRightSize}px`;
+      }
+      rigthButtonsSizeRef.current = maxRightSize;
+      leftButtonsSizeRef.current = 0;
+    }
+    stateRef.current.now = stateRef.current.next;
+  }, [swipeContainerWidth]);
+  const handleSwipeEnd = useCallback(
+    (event) => {
+      if (demoInProgress) {
+        return;
+      }
+      onFinish?.();
+      if (longState !== "off" /* Off */) {
+        const buttons = longState === "left" /* Left */ ? leftButtons : rightButtons;
+        const button = longState === "left" /* Left */ ? buttons?.[0] : buttons?.[buttons.length - 1];
+        button?.onClick();
         onResetDemo?.();
-        onFinishDemo?.();
-    }, [onFinishDemo, onResetDemo, twoSidedDemoMode]);
-    const demoSideAppearHandler = useCallback((event) => {
-        if (event.propertyName !== 'width') {
-            return;
-        }
-        const currentSide = stateRef.current.now;
-        const { buttons, oppositeButtons } = getButtonsFromSide(currentSide);
-        const appearedIsFirstOfSides = !!rightButtonsRef.current &&
-            !!leftButtonsRef.current &&
-            ((currentSide === ButtonsState.LeftOpen && twoSidedDemoMode === 'left-to-right') ||
-                (currentSide === ButtonsState.RightOpen && twoSidedDemoMode === 'right-to-left'));
-        buttons?.removeEventListener('transitionend', demoSideAppearHandler);
-        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;
+        swipeLockRef.current = !!button?.keepStateAfterLong;
+        if (!button?.keepStateAfterLong) {
+          animateToState("close" /* Close */, event.velocityX);
+        }
+        return;
+      }
+      const { now, candidate } = stateRef.current;
+      animateToState(
+        ["leftOpen" /* LeftOpen */, "rightOpen" /* RightOpen */].includes(now) ? "close" /* Close */ : candidate,
+        event.velocityX
+      );
+    },
+    [demoInProgress, longState, leftButtons, rightButtons, onFinish, onResetDemo, animateToState]
+  );
+  const handleSwipeCancel = useCallback(
+    (event) => {
+      animateToState(stateRef.current.now, event.velocityX);
+    },
+    [animateToState]
+  );
+  const swipeHandlers = useSwipe({
+    thresholdXRef: swipeThresholdRef,
+    onSwipeStart: handleSwipeStart,
+    onSwipeMove: handleSwipeMove,
+    onSwipeEnd: handleSwipeEnd,
+    onSwipeCancel: handleSwipeCancel
+  });
+  useEffect(() => {
+    const swipeContainer = swipeContainerRef.current;
+    if (!visible || !swipeContainer) {
+      return void 0;
+    }
+    const preventScroll = (event) => {
+      if (Math.abs(prevDistance.current) > MAIN_AXIS_THRESHOLD_PX) {
+        event.preventDefault();
+      }
+    };
+    swipeContainer.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => swipeContainer.removeEventListener("touchmove", preventScroll);
+  }, [visible]);
+  const getButtonsFromSide = useCallback((side = stateRef.current.now) => {
+    const buttons = side === "rightOpen" /* RightOpen */ ? rightButtonsRef.current : leftButtonsRef.current;
+    const oppositeButtons = buttons === rightButtonsRef.current ? leftButtonsRef.current : rightButtonsRef.current;
+    return { buttons, oppositeButtons };
+  }, []);
+  const unmountDemoEndHandler = useCallback(
+    (event) => {
+      if (event.propertyName !== "width") {
+        return;
+      }
+      setDemoInProgress(false);
+      const isTwoSidedSwipe = !!rightButtonsRef.current && !!leftButtonsRef.current;
+      const isLeft = isTwoSidedSwipe ? twoSidedDemoMode === "right-to-left" || twoSidedDemoMode === "left" : !!leftButtonsRef.current;
+      const buttons = isLeft ? leftButtonsRef.current : rightButtonsRef.current;
+      buttons?.removeEventListener("transitionend", unmountDemoEndHandler);
+      fixedContainerRef.current?.style.removeProperty("--transition-duration");
+      fixedContainerRef.current?.style.removeProperty("--transition-delay");
+      onResetDemo?.();
+      onFinishDemo?.();
+    },
+    [onFinishDemo, onResetDemo, twoSidedDemoMode]
+  );
+  const demoSideAppearHandler = useCallback(
+    (event) => {
+      if (event.propertyName !== "width") {
+        return;
+      }
+      const currentSide = stateRef.current.now;
+      const { buttons, oppositeButtons } = getButtonsFromSide(currentSide);
+      const appearedIsFirstOfSides = !!rightButtonsRef.current && !!leftButtonsRef.current && (currentSide === "leftOpen" /* LeftOpen */ && twoSidedDemoMode === "left-to-right" || currentSide === "rightOpen" /* RightOpen */ && twoSidedDemoMode === "right-to-left");
+      buttons?.removeEventListener("transitionend", demoSideAppearHandler);
+      if (fixedContainerRef.current) {
+        fixedContainerRef.current.style.setProperty(
+          "--transition-duration",
+          `${appearedIsFirstOfSides ? demoAppearTime : demoDisappearTime}ms`
+        );
+        fixedContainerRef.current.style.setProperty("--transition-delay", `${demoIdleTime}ms`);
+      }
+      stateRef.current.next = "close" /* Close */;
+      stateRef.current.candidate = stateRef.current.next;
+      runSwipeAnimation();
+      if (appearedIsFirstOfSides) {
+        stateRef.current.next = currentSide === "leftOpen" /* LeftOpen */ ? "rightOpen" /* RightOpen */ : "leftOpen" /* LeftOpen */;
         stateRef.current.candidate = stateRef.current.next;
         runSwipeAnimation();
-        if (appearedIsFirstOfSides) {
-            stateRef.current.next =
-                currentSide === ButtonsState.LeftOpen ? ButtonsState.RightOpen : ButtonsState.LeftOpen;
-            stateRef.current.candidate = stateRef.current.next;
-            runSwipeAnimation();
-            const twiceSideTransitionHandler = () => {
-                oppositeButtons?.removeEventListener('transitionstart', twiceSideTransitionHandler);
-                if (oppositeButtons && contentRef.current) {
-                    const isRight = currentSide === ButtonsState.RightOpen;
-                    contentRef.current.style.transform = `translateX(${isRight ? leftButtonsSumSizeRef.current : -rightButtonsSumSizeRef.current}px)`;
-                }
-            };
-            oppositeButtons?.addEventListener('transitionstart', twiceSideTransitionHandler);
-            oppositeButtons?.addEventListener('transitionend', demoSideAppearHandler);
-        }
-        else {
-            const startDestroyDemoHandler = () => {
-                buttons?.removeEventListener('transitionstart', startDestroyDemoHandler);
-                contentRef.current?.style.removeProperty('transform');
-            };
-            buttons?.addEventListener('transitionstart', startDestroyDemoHandler);
-            buttons?.addEventListener('transitionend', unmountDemoEndHandler);
-        }
-    }, [
-        getButtonsFromSide,
-        twoSidedDemoMode,
-        runSwipeAnimation,
-        demoAppearTime,
-        demoDisappearTime,
-        demoIdleTime,
-        unmountDemoEndHandler,
-    ]);
-    const startDemo = useCallback((side) => {
-        onResetDemo?.();
-        onStartDemo?.();
-        setDemoInProgress(true);
-        stateRef.current.now = ButtonsState.Close;
-        stateRef.current.next = side;
-        stateRef.current.candidate = side;
-        if (swipeContainerRef.current) {
-            swipeContainerRef.current.style.justifyContent =
-                side === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
-        }
-        if (fixedContainerRef.current) {
-            fixedContainerRef.current.style.setProperty('--transition-duration', `${demoAppearTime}ms`);
-        }
-        setLongState(LongState.Off);
-        setAnimateButtonsWidth(true);
-        runSwipeAnimation();
-        const { buttons } = getButtonsFromSide(side);
-        buttons?.addEventListener('transitionend', demoSideAppearHandler);
-    }, [
-        demoAppearTime,
-        demoSideAppearHandler,
-        getButtonsFromSide,
-        runSwipeAnimation,
-        onResetDemo,
-        onStartDemo,
-        setAnimateButtonsWidth,
-    ]);
-    useEffect(() => {
-        if (demo &&
-            !demoInProgress &&
-            stateRef.current.now === ButtonsState.Close &&
-            swipeContainerRef.current?.style.width) {
-            const isTwoSidedSwipe = Boolean(rightButtonsRef.current && leftButtonsRef.current);
-            if (isTwoSidedSwipe) {
-                startDemo(twoSidedDemoMode === 'right' || twoSidedDemoMode === 'right-to-left'
-                    ? ButtonsState.RightOpen
-                    : ButtonsState.LeftOpen);
-            }
-            else {
-                startDemo(rightButtonsRef.current ? ButtonsState.RightOpen : ButtonsState.LeftOpen);
+        const twiceSideTransitionHandler = () => {
+          oppositeButtons?.removeEventListener("transitionstart", twiceSideTransitionHandler);
+          if (oppositeButtons && contentRef.current) {
+            const isRight = currentSide === "rightOpen" /* RightOpen */;
+            contentRef.current.style.transform = `translateX(${isRight ? leftButtonsSumSizeRef.current : -rightButtonsSumSizeRef.current}px)`;
+          }
+        };
+        oppositeButtons?.addEventListener("transitionstart", twiceSideTransitionHandler);
+        oppositeButtons?.addEventListener("transitionend", demoSideAppearHandler);
+      } else {
+        const startDestroyDemoHandler = () => {
+          buttons?.removeEventListener("transitionstart", startDestroyDemoHandler);
+          contentRef.current?.style.removeProperty("transform");
+        };
+        buttons?.addEventListener("transitionstart", startDestroyDemoHandler);
+        buttons?.addEventListener("transitionend", unmountDemoEndHandler);
+      }
+    },
+    [
+      getButtonsFromSide,
+      twoSidedDemoMode,
+      runSwipeAnimation,
+      demoAppearTime,
+      demoDisappearTime,
+      demoIdleTime,
+      unmountDemoEndHandler
+    ]
+  );
+  const startDemo = useCallback(
+    (side) => {
+      onResetDemo?.();
+      onStartDemo?.();
+      setDemoInProgress(true);
+      stateRef.current.now = "close" /* Close */;
+      stateRef.current.next = side;
+      stateRef.current.candidate = side;
+      if (swipeContainerRef.current) {
+        swipeContainerRef.current.style.justifyContent = side === "rightOpen" /* RightOpen */ ? "flex-end" : "flex-start";
+      }
+      if (fixedContainerRef.current) {
+        fixedContainerRef.current.style.setProperty("--transition-duration", `${demoAppearTime}ms`);
+      }
+      setLongState("off" /* Off */);
+      setAnimateButtonsWidth(true);
+      runSwipeAnimation();
+      const { buttons } = getButtonsFromSide(side);
+      buttons?.addEventListener("transitionend", demoSideAppearHandler);
+    },
+    [
+      demoAppearTime,
+      demoSideAppearHandler,
+      getButtonsFromSide,
+      runSwipeAnimation,
+      onResetDemo,
+      onStartDemo,
+      setAnimateButtonsWidth
+    ]
+  );
+  useEffect(() => {
+    if (demo && !demoInProgress && stateRef.current.now === "close" /* Close */ && swipeContainerRef.current?.style.width) {
+      const isTwoSidedSwipe = Boolean(rightButtonsRef.current && leftButtonsRef.current);
+      if (isTwoSidedSwipe) {
+        startDemo(
+          twoSidedDemoMode === "right" || twoSidedDemoMode === "right-to-left" ? "rightOpen" /* RightOpen */ : "leftOpen" /* LeftOpen */
+        );
+      } else {
+        startDemo(rightButtonsRef.current ? "rightOpen" /* RightOpen */ : "leftOpen" /* LeftOpen */);
+      }
+    }
+    if (!isMobile && demoInProgress) {
+      setDemoInProgress(false);
+      stateRef.current = {
+        candidate: "close" /* Close */,
+        now: "close" /* Close */,
+        next: "close" /* Close */
+      };
+    }
+  }, [demo, twoSidedDemoMode, startDemo, demoInProgress, isMobile, onResetDemo]);
+  const handleButtonContentRef = useCallback(
+    (side, grow) => (ref) => {
+      if (sumRefs.current.includes(ref) || !ref) {
+        return;
+      }
+      const width = ref?.offsetWidth ?? 0;
+      if (!grow) {
+        ref.style.maxWidth = `${width}px`;
+      }
+      sumRefs.current.push(ref);
+      const widthWithGap = gap && width > 0 ? width + GAP_WIDTH : width;
+      if (side === "left") {
+        leftButtonsSumSizeRef.current += widthWithGap;
+      } else {
+        rightButtonsSumSizeRef.current += widthWithGap;
+      }
+    },
+    [gap]
+  );
+  const renderButtons = (buttons, ref, side) => {
+    const isTwoSidedDemoInProgress = leftButtons && rightButtons && demoInProgress;
+    return /* @__PURE__ */ jsx(Layer, { layer: "content", children: /* @__PURE__ */ 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
+        }),
+        style: {
+          ...side === "left" ? { justifyContent: "flex-start", ...leftBlockStyles } : {},
+          ...side === "right" ? { justifyContent: "flex-end", ...rightBlockStyles } : {}
+        },
+        ref,
+        "data-qa": `swipe-buttons-${side}`,
+        children: [
+          gap && side === "right" && longState === "right" /* Right */ && /* @__PURE__ */ jsx("div", { className: styles.gap }),
+          buttons.map((item, index) => {
+            if (!item) {
+              return null;
             }
-        }
-        if (!isMobile && demoInProgress) {
-            setDemoInProgress(false);
-            stateRef.current = {
-                candidate: ButtonsState.Close,
-                now: ButtonsState.Close,
-                next: ButtonsState.Close,
-            };
-        }
-    }, [demo, twoSidedDemoMode, startDemo, demoInProgress, isMobile, onResetDemo]);
-    // подсчитываем реальный необходимый размер для кнопок
-    // и назначаем проперти исходя из положения кнопки (последняя/не последняя)
-    const handleButtonContentRef = useCallback((side, grow) => (ref) => {
-        // нужно чтобы посчитать размеры для каждой кнопки один раз
-        if (sumRefs.current.includes(ref) || !ref) {
-            return;
-        }
-        const width = ref?.offsetWidth ?? 0;
-        if (!grow) {
-            ref.style.maxWidth = `${width}px`;
-        }
-        sumRefs.current.push(ref);
-        const widthWithGap = gap && width > 0 ? width + GAP_WIDTH : width;
-        if (side === 'left') {
-            leftButtonsSumSizeRef.current += widthWithGap;
-        }
-        else {
-            rightButtonsSumSizeRef.current += widthWithGap;
-        }
-    }, [gap]);
-    const renderButtons = (buttons, ref, side) => {
-        const isTwoSidedDemoInProgress = leftButtons && rightButtons && demoInProgress;
-        return (jsx(Layer, { layer: "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: {
-                    ...(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 === "left" /* Left */ || side === "right" && index !== buttons.length - 1 && longState === "right" /* Right */;
+            const Icon = item.icon;
+            const iconProps = item.showLabel ? { "aria-hidden": true, focusable: false } : { "aria-label": item.label };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              gap && side === "right" && longState !== "right" /* Right */ && /* @__PURE__ */ jsx("div", { className: styles.gap }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(styles.buttonWrapper, {
+                    [styles.buttonWrapperGrow]: grow,
+                    [styles.buttonWrapperHide]: hide
+                  }),
+                  style: grow ? { maxWidth: `${swipeContainerWidth}px` } : {},
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: classNames(styles.button, {
+                        [styles.buttonGrow]: grow,
+                        [styles[`button_style-${item.style}`]]: item.style
+                      }),
+                      onClick: () => {
+                        if (demoInProgress) {
+                          return;
                         }
-                        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 (!visible) {
-        return null;
+                        if (item.closeOnAction) {
+                          animateToState("close" /* Close */, 0);
+                        }
+                        item.onClick();
+                      },
+                      style: gap ? { borderRadius } : {},
+                      "data-qa": `swipe-button-${side}-${index}`,
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles.buttonContent,
+                          ref: handleButtonContentRef(side, grow),
+                          "data-qa": `swipe-button-content-${side}-${index}`,
+                          children: /* @__PURE__ */ jsxs("div", { className: styles.buttonContentColumn, children: [
+                            Icon && /* @__PURE__ */ jsx("div", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { ...iconProps }) }),
+                            item.showLabel && /* @__PURE__ */ jsx("span", { className: styles.buttonLabel, children: item.label })
+                          ] })
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              gap && side === "left" && /* @__PURE__ */ jsx("div", { className: styles.gap })
+            ] }, index);
+          })
+        ]
+      }
+    ) });
+  };
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles.fixedContainer, ref: fixedContainerRef, "data-qa": dataQa ?? "swipe-root", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(styles.swipeContainer),
+      ref: swipeContainerRef,
+      ...swipeHandlers,
+      "data-qa": "swipe-swipeable",
+      children: [
+        !!leftButtons?.length && renderButtons(leftButtons, leftButtonsRef, "left"),
+        /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }),
+        !!rightButtons?.length && renderButtons(rightButtons, rightButtonsRef, "right")
+      ]
     }
-    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 };