@salutejs/plasma-new-hope 0.326.0-canary.2013.15518408913.0 → 0.326.0-canary.2013.15538813402.0

package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -14,6 +14,7 @@ const onChangeValue = action('onChangeValue');
 const onCommitDate = action('onCommitDate');
 const onBlur = action('onBlur');
 const onFocus = action('onFocus');
+const onToggle = action('onToggle');
 
 const onChangeFirstValue = action('onChangeFirstValue');
 const onChangeSecondValue = action('onChangeSecondValue');
@@ -118,7 +119,10 @@ const StoryDefault = ({
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onBlur={onBlur}
             onFocus={onFocus}
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeValue={onChangeValue}
             onCommitDate={onCommitDate}
             lang={lang}
@@ -162,6 +166,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: true,
         required: false,
         requiredPlacement: 'right',
@@ -262,7 +267,10 @@ const StoryRange = ({
             secondTextfieldTextBefore={
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeFirstValue={onChangeFirstValue}
             onChangeSecondValue={onChangeSecondValue}
             lang={lang}
@@ -304,11 +312,11 @@ export const Range: StoryObj<StoryPropsRange> = {
         calendarContainerHeight: 0,
         stretched: false,
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         renderFromDate: new Date(2024, 4, 14),
         maskWithFormat: false,
         required: false,
@@ -410,6 +418,7 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',

package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -118,7 +118,10 @@ const StoryDefault = ({
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onBlur={onBlur}
             onFocus={onFocus}
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeValue={onChangeValue}
             onCommitDate={onCommitDate}
             lang={lang}
@@ -162,6 +165,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',
@@ -262,7 +266,10 @@ const StoryRange = ({
             secondTextfieldTextBefore={
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeFirstValue={onChangeFirstValue}
             onChangeSecondValue={onChangeSecondValue}
             lang={lang}
@@ -304,11 +311,11 @@ export const Range: StoryObj<StoryPropsRange> = {
         calendarContainerHeight: 0,
         stretched: false,
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         renderFromDate: new Date(2024, 4, 14),
         maskWithFormat: false,
         required: false,
@@ -410,6 +417,7 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',

package/es/components/Carousel/CarouselNew/Carousel.css

@@ -1,12 +1,43 @@
-.Carousel_styles_1gx7oht_b13uu57o__b465f250{position:relative;padding:20px 0;border-top:2px solid #ff000038;}.Carousel_styles_1gx7oht_b13uu57o__b465f250:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff000038;}
-.Carousel_styles_1gx7oht_c1gygdut__b465f250{overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);}
-.Carousel_styles_1gx7oht_c76zbfp__b465f250{position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:var(--c76zbfp-0);-moz-scroll-snap-type:var(--c76zbfp-0);-ms-scroll-snap-type:var(--c76zbfp-0);scroll-snap-type:var(--c76zbfp-0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}.Carousel_styles_1gx7oht_c76zbfp__b465f250::-webkit-scrollbar{display:none;}.Carousel_styles_1gx7oht_c1gygdut__b465f250 .Carousel_styles_1gx7oht_c76zbfp__b465f250{-webkit-scroll-padding:0 var(--plasma-grid-margin);-moz-scroll-padding:0 var(--plasma-grid-margin);-ms-scroll-padding:0 var(--plasma-grid-margin);scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}
-.Carousel_styles_1gx7oht_c1cnnvc1__b465f250{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--c1cnnvc1-0);}
+.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
+
+.base_1gusher_b1chvyq8__76b641f5{color:var(--plasma-spinner-color);}
+
+.base_ova69f_bw56nfh__55225c7f{width:var(--plasma-spinner-size);height:var(--plasma-spinner-size);}
+
+.Spinner_styles_13q7ndk_b1hp2dsz__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
+.Spinner_styles_13q7ndk_s122r4cn__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--s122r4cn-0);height:var(--s122r4cn-1);-webkit-animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;}@-webkit-keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+
+.Button_styles_8cvmld_bzw1898__4694a0fa{min-width:4ch;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_8cvmld_bzw1898__4694a0fa.Button_styles_8cvmld_buttonContentRelaxed__4694a0fa{text-align:start;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}
+.Button_styles_8cvmld_bdfuqwe__4694a0fa{color:var(--plasma-button-value-color);margin:var(--plasma-button-value-margin);min-width:4ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.Button_styles_8cvmld_l9ypozh__4694a0fa{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:var(--l9ypozh-1);-webkit-justify-content:var(--l9ypozh-1);-ms-flex-pack:var(--l9ypozh-1);justify-content:var(--l9ypozh-1);height:100%;width:100%;}
+.Button_styles_8cvmld_l4dfhbg__4694a0fa{position:absolute;}
+.Button_styles_8cvmld_srdlazt__4694a0fa{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
+.Button_styles_8cvmld_s7rggv0__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-left-content-align-self);-ms-flex-item-align:var(--plasma-button-left-content-align);align-self:var(--plasma-button-left-content-align-self);margin:var(--s7rggv0-0);}
+.Button_styles_8cvmld_s1rjh7ra__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);margin:var(--s1rjh7ra-0);}
+.Button_styles_8cvmld_b9ga1dj__4694a0fa{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_8cvmld_b9ga1dj__4694a0fa{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_buttonSquare__4694a0fa{width:var(--plasma-button-height);padding:0;}
+
+.base_jfbpjg_b1ty39ru__57cb1989{color:var(--plasma-button-color);background:var(--plasma-button-background-color);}.base_jfbpjg_b1ty39ru__57cb1989.base_jfbpjg_buttonLoading__57cb1989{background:var(--plasma-button-loading-background-color);}.base_jfbpjg_b1ty39ru__57cb1989:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_jfbpjg_b1ty39ru__57cb1989:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
+
+.base_1alzrso_be0ha5g__cdc67255{height:var(--plasma-button-height);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);}
+
+.base_do83p2_b169l30m__044ccc85[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.base_do83p2_b169l30m__044ccc85[disabled]:hover,.base_do83p2_b169l30m__044ccc85[disabled]:active{scale:none;color:var(--plasma-button-color);background:var(--plasma-button-background-color);}
+
+.base_1kq737e_b187cmzt__d829f64a{position:relative;}.base_1kq737e_b187cmzt__d829f64a:focus{outline:none;}.base_1kq737e_b187cmzt__d829f64a::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1kq737e_b187cmzt__d829f64a.base_1kq737e_focusVisible__d829f64a:focus::before,.base_1kq737e_b187cmzt__d829f64a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}
+
+.base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingFixed__bd4ad37e{width:var(--plasma-button-width);}.base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingFilled__bd4ad37e{width:100%;}.base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingAuto__bd4ad37e{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+
+.IconButton_styles_403on7_b1ua728l__d34a8ea7{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-loading-background-color:var(--plasma-icon-button-loading-background-color);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_403on7_b1ua728l__d34a8ea7{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonSquare__d34a8ea7{width:var(--plasma-button-height);padding:0;}.IconButton_styles_403on7_b1ua728l__d34a8ea7:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:focus{outline:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_focusVisible__d34a8ea7:focus::before,.IconButton_styles_403on7_b1ua728l__d34a8ea7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:hover,.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:active{scale:none;color:var(--plasma-button-color);background:var(--plasma-button-background-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFixed__d34a8ea7{width:var(--plasma-button-width);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFilled__d34a8ea7{width:100%;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingAuto__d34a8ea7{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+
+.Carousel_styles_1fs4wwn_b13uu57o__74b57fdf{position:relative;}
+.Carousel_styles_1fs4wwn_c1gygdut__74b57fdf{position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}.Carousel_styles_1fs4wwn_c1gygdut__74b57fdf::-webkit-scrollbar{display:none;}
+.Carousel_styles_1fs4wwn_c76zbfp__74b57fdf{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--c76zbfp-0);}
+.Carousel_styles_1fs4wwn_i1cnnvc1__74b57fdf{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:0.75rem;z-index:10;--plasma-icon-button-color:var(--text-primary);--plasma-icon-button-background-color:var(--surface-transparent-secondary);--plasma-icon-button-loading-background-color:var(--plasma-icon-button-background-color);--plasma-icon-button-background-color-hover:var(--surface-transparent-secondary-hover);--plasma-icon-button-background-color-active:var(--surface-transparent-secondary-active);--plasma-icon-button-height:2.5rem;--plasma-icon-button-width:2.5rem;--plasma-icon-button-padding:1rem;--plasma-icon-button-radius:0.625rem;}.Carousel_styles_1fs4wwn_i1cnnvc1__74b57fdf.Carousel_styles_1fs4wwn_carouselRightControlButton__74b57fdf{left:auto;right:0.75rem;}
+.Carousel_styles_1fs4wwn_c1ff2k98__74b57fdf{position:relative;}
 
 .Item_1qz9bfn_sfwcury__aad46e58{-webkit-scroll-snap-align:var(--sfwcury-0);-moz-scroll-snap-align:var(--sfwcury-0);-ms-scroll-snap-align:var(--sfwcury-0);scroll-snap-align:var(--sfwcury-0);-webkit-scroll-snap-stop:var(--sfwcury-1);-moz-scroll-snap-stop:var(--sfwcury-1);-ms-scroll-snap-stop:var(--sfwcury-1);scroll-snap-stop:var(--sfwcury-1);}
 
-.Dots_styles_1i4srxq_wn5xio__92126c77{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;--duration:0.3s;--half-duration:0.15s;}
-.Dots_styles_1i4srxq_tnn1xpa__92126c77{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition:-webkit-transform 0s ease;-webkit-transition:transform 0s ease;transition:transform 0s ease;}.Dots_styles_1i4srxq_tnn1xpa__92126c77.Dots_styles_1i4srxq_dotAnimating__92126c77{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}.Dots_styles_1i4srxq_tnn1xpa__92126c77 .Dots_styles_1i4srxq_dot__92126c77{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(--plasma-carousel-pagination-dot-background);border-radius:100%;}.Dots_styles_1i4srxq_tnn1xpa__92126c77 .Dots_styles_1i4srxq_dot__92126c77.Dots_styles_1i4srxq_dotActive__92126c77{background-color:var(--plasma-carousel-pagination-dot-active-background);}@-webkit-keyframes Dots_styles_1i4srxq_fadeOutTnn1xpa__92126c77{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}@keyframes Dots_styles_1i4srxq_fadeOutTnn1xpa__92126c77{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}.Dots_styles_1i4srxq_tnn1xpa__92126c77 .Dots_styles_1i4srxq_dot__92126c77.Dots_styles_1i4srxq_dotAnimateOut__92126c77{-webkit-animation:Dots_styles_1i4srxq_fadeOutTnn1xpa__92126c77 var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_fadeOutTnn1xpa__92126c77 var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_1i4srxq_shrinkingTnn1xpa__92126c77{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}@keyframes Dots_styles_1i4srxq_shrinkingTnn1xpa__92126c77{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}.Dots_styles_1i4srxq_tnn1xpa__92126c77 .Dots_styles_1i4srxq_dot__92126c77.Dots_styles_1i4srxq_dotShrinking__92126c77{-webkit-animation:Dots_styles_1i4srxq_shrinkingTnn1xpa__92126c77 var(--half-duration) var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_shrinkingTnn1xpa__92126c77 var(--half-duration) var(--half-duration) ease forwards;}
-.Dots_styles_1i4srxq_d1k0jsbc__92126c77{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_1i4srxq_d1k0jsbc__92126c77.Dots_styles_1i4srxq_dotAvailableDotsLeft__92126c77 .Dots_styles_1i4srxq_dot__92126c77:not(.Dots_styles_1i4srxq_dotTemporaryNatural__92126c77):first-child{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}.Dots_styles_1i4srxq_d1k0jsbc__92126c77.Dots_styles_1i4srxq_dotAvailableDotsRight__92126c77 .Dots_styles_1i4srxq_dot__92126c77:not(.Dots_styles_1i4srxq_dotTemporaryNatural__92126c77):last-child{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}.Dots_styles_1i4srxq_d1k0jsbc__92126c77.Dots_styles_1i4srxq_dotAnimating__92126c77 .Dots_styles_1i4srxq_dot__92126c77{-webkit-transition:background-color var(--duration) ease;transition:background-color var(--duration) ease;}
-.Dots_styles_1i4srxq_laqzsgq__92126c77{position:absolute;top:0;right:100%;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_1i4srxq_laqzsgq__92126c77 .Dots_styles_1i4srxq_dot__92126c77{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}@-webkit-keyframes Dots_styles_1i4srxq_fadeInLaqzsgq__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}@keyframes Dots_styles_1i4srxq_fadeInLaqzsgq__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}.Dots_styles_1i4srxq_laqzsgq__92126c77 .Dots_styles_1i4srxq_dot__92126c77.Dots_styles_1i4srxq_dotAnimateIn__92126c77{-webkit-animation:Dots_styles_1i4srxq_fadeInLaqzsgq__92126c77 var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_fadeInLaqzsgq__92126c77 var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_1i4srxq_fadeInFirstLaqzsgq__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}@keyframes Dots_styles_1i4srxq_fadeInFirstLaqzsgq__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}.Dots_styles_1i4srxq_laqzsgq__92126c77 .Dots_styles_1i4srxq_dot__92126c77:first-child.Dots_styles_1i4srxq_dotAnimateIn__92126c77{-webkit-animation:Dots_styles_1i4srxq_fadeInFirstLaqzsgq__92126c77 var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_fadeInFirstLaqzsgq__92126c77 var(--half-duration) ease forwards;}
-.Dots_styles_1i4srxq_rp088ba__92126c77{position:absolute;top:0;left:100%;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_1i4srxq_rp088ba__92126c77 .Dots_styles_1i4srxq_dot__92126c77{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}@-webkit-keyframes Dots_styles_1i4srxq_fadeInRp088ba__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}@keyframes Dots_styles_1i4srxq_fadeInRp088ba__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}.Dots_styles_1i4srxq_rp088ba__92126c77 .Dots_styles_1i4srxq_dot__92126c77.Dots_styles_1i4srxq_dotAnimateIn__92126c77{-webkit-animation:Dots_styles_1i4srxq_fadeInRp088ba__92126c77 var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_fadeInRp088ba__92126c77 var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_1i4srxq_fadeInLastRp088ba__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}@keyframes Dots_styles_1i4srxq_fadeInLastRp088ba__92126c77{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}.Dots_styles_1i4srxq_rp088ba__92126c77 .Dots_styles_1i4srxq_dot__92126c77:last-child.Dots_styles_1i4srxq_dotAnimateIn__92126c77{-webkit-animation:Dots_styles_1i4srxq_fadeInLastRp088ba__92126c77 var(--half-duration) ease forwards;animation:Dots_styles_1i4srxq_fadeInLastRp088ba__92126c77 var(--half-duration) ease forwards;}
+.Dots_styles_ea836d_wn5xio__3fa33efc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-top:0.75rem;--duration:0.3s;--half-duration:0.15s;}
+.Dots_styles_ea836d_tnn1xpa__3fa33efc{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition:-webkit-transform 0s ease;-webkit-transition:transform 0s ease;transition:transform 0s ease;}.Dots_styles_ea836d_tnn1xpa__3fa33efc.Dots_styles_ea836d_dotAnimating__3fa33efc{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(--plasma-carousel-pagination-dot-background);border-radius:100%;}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotActive__3fa33efc{background-color:var(--plasma-carousel-pagination-dot-active-background);}@-webkit-keyframes Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}@keyframes Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotAnimateOut__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}@keyframes Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotShrinking__3fa33efc{-webkit-animation:Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc var(--half-duration) var(--half-duration) ease forwards;animation:Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc var(--half-duration) var(--half-duration) ease forwards;}
+.Dots_styles_ea836d_d1k0jsbc__3fa33efc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_ea836d_d1k0jsbc__3fa33efc.Dots_styles_ea836d_dotAvailableDotsLeft__3fa33efc .Dots_styles_ea836d_dot__3fa33efc:not(.Dots_styles_ea836d_dotTemporaryNatural__3fa33efc):first-child{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}.Dots_styles_ea836d_d1k0jsbc__3fa33efc.Dots_styles_ea836d_dotAvailableDotsRight__3fa33efc .Dots_styles_ea836d_dot__3fa33efc:not(.Dots_styles_ea836d_dotTemporaryNatural__3fa33efc):last-child{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}.Dots_styles_ea836d_d1k0jsbc__3fa33efc.Dots_styles_ea836d_dotAnimating__3fa33efc .Dots_styles_ea836d_dot__3fa33efc{-webkit-transition:background-color var(--duration) ease;transition:background-color var(--duration) ease;}
+.Dots_styles_ea836d_laqzsgq__3fa33efc{position:absolute;top:0;right:100%;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_ea836d_laqzsgq__3fa33efc .Dots_styles_ea836d_dot__3fa33efc{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}@-webkit-keyframes Dots_styles_ea836d_fadeInLaqzsgq__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}@keyframes Dots_styles_ea836d_fadeInLaqzsgq__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}.Dots_styles_ea836d_laqzsgq__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotAnimateIn__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeInLaqzsgq__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeInLaqzsgq__3fa33efc var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_ea836d_fadeInFirstLaqzsgq__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}@keyframes Dots_styles_ea836d_fadeInFirstLaqzsgq__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}.Dots_styles_ea836d_laqzsgq__3fa33efc .Dots_styles_ea836d_dot__3fa33efc:first-child.Dots_styles_ea836d_dotAnimateIn__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeInFirstLaqzsgq__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeInFirstLaqzsgq__3fa33efc var(--half-duration) ease forwards;}
+.Dots_styles_ea836d_rp088ba__3fa33efc{position:absolute;top:0;left:100%;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Dots_styles_ea836d_rp088ba__3fa33efc .Dots_styles_ea836d_dot__3fa33efc{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}@-webkit-keyframes Dots_styles_ea836d_fadeInRp088ba__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}@keyframes Dots_styles_ea836d_fadeInRp088ba__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}.Dots_styles_ea836d_rp088ba__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotAnimateIn__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeInRp088ba__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeInRp088ba__3fa33efc var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_ea836d_fadeInLastRp088ba__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}@keyframes Dots_styles_ea836d_fadeInLastRp088ba__3fa33efc{from{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}}.Dots_styles_ea836d_rp088ba__3fa33efc .Dots_styles_ea836d_dot__3fa33efc:last-child.Dots_styles_ea836d_dotAnimateIn__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeInLastRp088ba__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeInLastRp088ba__3fa33efc var(--half-duration) ease forwards;}

package/es/components/Carousel/CarouselNew/Carousel.js

@@ -1,65 +1,80 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useState, useCallback, Children } from 'react';
+import React, { forwardRef, useState, Children } from 'react';
+import { classes } from './Carousel.tokens.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
-import { base } from './Carousel.styles.js';
+import { ControlsWrapper, IconButton, CarouselWrapper, CarouselTrack, base } from './Carousel.styles.js';
 import { useCarousel } from './hooks/useCarousel.js';
 import { useDragScroll } from './hooks/useDragScroll.js';
+import { IconDisclosureLeft } from '../../_Icon/Icons/IconDisclosureLeft.js';
+import { IconDisclosureRight } from '../../_Icon/Icons/IconDisclosureRight.js';
 import { Dots } from './ui/Dots/Dots.js';
 
-var _br;
+var _IconDisclosureLeft, _IconDisclosureRight;
 
 /**
  * Компонент для создания списков с прокруткой.
  */
 var carouselNewRoot = function carouselNewRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (_ref,
-  // @ts-ignore
-  ref) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var view = _ref.view,
       size = _ref.size,
-      outerIndex = _ref.index,
       scrollAlign = _ref.scrollAlign,
-      detectActive = _ref.detectActive,
-      detectThreshold = _ref.detectThreshold,
-      onIndexChange = _ref.onIndexChange,
       children = _ref.children,
       _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
       isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
-      paginationOptions = _ref.paginationOptions;
+      gap = _ref.gap,
+      paginationOptions = _ref.paginationOptions,
+      className = _ref.className,
+      style = _ref.style;
     var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      internalIndex = _useState2[0],
-      setInternalIndex = _useState2[1];
-    var index = outerIndex !== null && outerIndex !== void 0 ? outerIndex : internalIndex;
-    var handleChangeIndex = useCallback(function (index) {
-      if (onIndexChange) {
-        onIndexChange(index);
-      }
-      setInternalIndex(index);
-    }, [onIndexChange]);
-
-    // const { scrollRef, trackRef } = useCarousel({
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var slidesAmount = Children.count(children);
+    var handleClickLeft = function handleClickLeft() {
+      setIndex(Math.max(0, index - 1));
+    };
+    var handleClickRight = function handleClickRight() {
+      setIndex(Math.min(slidesAmount - 1, index + 1));
+    };
     var _useCarousel = useCarousel({
         index: index,
         scrollAlign: scrollAlign,
-        detectActive: detectActive,
-        detectThreshold: detectThreshold,
-        onIndexChange: onIndexChange
+        onIndexChange: setIndex
       }),
-      scrollRef = _useCarousel.scrollRef;
-
-    // const handleRef = useForkRef(scrollRef, ref);
-
+      scrollRef = _useCarousel.scrollRef,
+      trackRef = _useCarousel.trackRef;
     useDragScroll(scrollRef, isDragScrollDisabled);
-    var slidesAmount = Children.count(children);
     return /*#__PURE__*/React.createElement(Root, {
+      className: className,
+      style: style,
       size: size,
       view: view,
-      index: index
-    }, _br || (_br = /*#__PURE__*/React.createElement("br", null)), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React.createElement(Dots, {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && /*#__PURE__*/React.createElement(IconButton, {
+      pin: "circle-circle",
+      onClick: handleClickLeft
+    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+      size: "m",
+      color: "inherit"
+    }))), /*#__PURE__*/React.createElement(CarouselWrapper, {
+      ref: scrollRef
+    }, /*#__PURE__*/React.createElement(CarouselTrack, {
+      ref: trackRef
+      // aria-live={ariaLive}
+      ,
+      gap: gap
+    }, children)), index !== slidesAmount - 1 && /*#__PURE__*/React.createElement(IconButton, {
+      className: classes.rightControlButton,
+      pin: "circle-circle",
+      onClick: handleClickRight
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      size: "m",
+      color: "inherit"
+    })))), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React.createElement(Dots, {
       index: index,
-      onChange: handleChangeIndex,
+      onChange: setIndex,
       visibleCount: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.visibleDots) || slidesAmount,
       count: slidesAmount,
       centered: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.centered) || false

package/es/components/Carousel/CarouselNew/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"sourcesContent":["import { RootProps } from 'src/engines';\nimport React, { forwardRef, useState, useCallback, Children } from 'react';\n// import { useForkRef } from '@salutejs/plasma-core';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base } from './Carousel.styles';\n// import { base, CarouselWrapper, CarouselTrack } from './Carousel.styles';\nimport { CarouselNewProps } from './Carousel.types';\nimport { useCarousel } from './hooks/useCarousel';\nimport { useDragScroll } from './hooks/useDragScroll';\nimport { Dots } from './ui';\n\n/**\n * Компонент для создания списков с прокруткой.\n */\nexport const carouselNewRoot = (Root: RootProps<HTMLDivElement, CarouselNewProps>) =>\n    forwardRef<HTMLDivElement, CarouselNewProps>(\n        (\n            {\n                view,\n                size,\n                index: outerIndex,\n                // scrollSnapType = 'mandatory',\n                scrollAlign,\n                detectActive,\n                detectThreshold,\n                onIndexChange,\n                children,\n                // ariaLive = 'off',\n                isDragScrollDisabled = false,\n                // gap,\n                paginationOptions,\n                // ...rest\n            },\n            // @ts-ignore\n            ref,\n        ) => {\n            const [internalIndex, setInternalIndex] = useState(0);\n\n            const index = outerIndex ?? internalIndex;\n\n            const handleChangeIndex = useCallback(\n                (index: number) => {\n                    if (onIndexChange) {\n                        onIndexChange(index);\n                    }\n\n                    setInternalIndex(index);\n                },\n                [onIndexChange],\n            );\n\n            // const { scrollRef, trackRef } = useCarousel({\n            const { scrollRef } = useCarousel({\n                index,\n                scrollAlign,\n                detectActive,\n                detectThreshold,\n                onIndexChange,\n            });\n\n            // const handleRef = useForkRef(scrollRef, ref);\n\n            useDragScroll(scrollRef, isDragScrollDisabled);\n\n            const slidesAmount = Children.count(children);\n\n            return (\n                <Root size={size} view={view} index={index}>\n                    {/* <CarouselWrapper ref={handleRef} scrollSnapType={scrollSnapType} {...rest}> */}\n                    {/*     <CarouselTrack */}\n                    {/*         ref={trackRef as React.MutableRefObject<HTMLDivElement | null>} */}\n                    {/*         aria-live={ariaLive} */}\n                    {/*         gap={gap} */}\n                    {/*     > */}\n                    {/*         {children} */}\n                    {/*     </CarouselTrack> */}\n                    {/* </CarouselWrapper> */}\n                    <br />\n\n                    {!paginationOptions?.disabled && (\n                        <Dots\n                            index={index}\n                            onChange={handleChangeIndex}\n                            visibleCount={paginationOptions?.visibleDots || slidesAmount}\n                            count={slidesAmount}\n                            centered={paginationOptions?.centered || false}\n                        />\n                    )}\n                </Root>\n            );\n        },\n    );\n\nexport const carouselNewConfig = {\n    name: 'Carousel',\n    tag: 'div',\n    layout: carouselNewRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 's',\n    },\n};\n"],"names":["carouselNewRoot","Root","forwardRef","_ref","ref","view","size","outerIndex","index","scrollAlign","detectActive","detectThreshold","onIndexChange","children","_ref$isDragScrollDisa","isDragScrollDisabled","paginationOptions","_useState","useState","_useState2","_slicedToArray","internalIndex","setInternalIndex","handleChangeIndex","useCallback","_useCarousel","useCarousel","scrollRef","useDragScroll","slidesAmount","Children","count","React","createElement","_br","disabled","Dots","onChange","visibleCount","visibleDots","centered","carouselNewConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"sourcesContent":["import { RootProps } from 'src/engines';\nimport React, { forwardRef, useState, Children } from 'react';\nimport { IconDisclosureLeft, IconDisclosureRight } from 'src/components/_Icon';\n\nimport { classes } from './Carousel.tokens';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from './Carousel.styles';\nimport { CarouselNewProps } from './Carousel.types';\nimport { useCarousel } from './hooks/useCarousel';\nimport { useDragScroll } from './hooks/useDragScroll';\nimport { Dots } from './ui';\n\n/**\n * Компонент для создания списков с прокруткой.\n */\nexport const carouselNewRoot = (Root: RootProps<HTMLDivElement, CarouselNewProps>) =>\n    forwardRef<HTMLDivElement, CarouselNewProps>(\n        (\n            {\n                view,\n                size,\n                scrollAlign,\n                children,\n                isDragScrollDisabled = false,\n                gap,\n                paginationOptions,\n                className,\n                style,\n            },\n            ref,\n        ) => {\n            const [index, setIndex] = useState(0);\n\n            const slidesAmount = Children.count(children);\n\n            const handleClickLeft = () => {\n                setIndex(Math.max(0, index - 1));\n            };\n\n            const handleClickRight = () => {\n                setIndex(Math.min(slidesAmount - 1, index + 1));\n            };\n\n            const { scrollRef, trackRef } = useCarousel({\n                index,\n                scrollAlign,\n                onIndexChange: setIndex,\n            });\n\n            useDragScroll(scrollRef, isDragScrollDisabled);\n\n            return (\n                <Root className={className} style={style} size={size} view={view} ref={ref}>\n                    <ControlsWrapper>\n                        {index !== 0 && (\n                            <IconButton pin=\"circle-circle\" onClick={handleClickLeft}>\n                                <IconDisclosureLeft size=\"m\" color=\"inherit\" />\n                            </IconButton>\n                        )}\n\n                        <CarouselWrapper ref={scrollRef}>\n                            <CarouselTrack\n                                ref={trackRef}\n                                // aria-live={ariaLive}\n                                gap={gap}\n                            >\n                                {children}\n                            </CarouselTrack>\n                        </CarouselWrapper>\n\n                        {index !== slidesAmount - 1 && (\n                            <IconButton\n                                className={classes.rightControlButton}\n                                pin=\"circle-circle\"\n                                onClick={handleClickRight}\n                            >\n                                <IconDisclosureRight size=\"m\" color=\"inherit\" />\n                            </IconButton>\n                        )}\n                    </ControlsWrapper>\n\n                    {!paginationOptions?.disabled && (\n                        <Dots\n                            index={index}\n                            onChange={setIndex}\n                            visibleCount={paginationOptions?.visibleDots || slidesAmount}\n                            count={slidesAmount}\n                            centered={paginationOptions?.centered || false}\n                        />\n                    )}\n                </Root>\n            );\n        },\n    );\n\nexport const carouselNewConfig = {\n    name: 'Carousel',\n    tag: 'div',\n    layout: carouselNewRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 's',\n    },\n};\n"],"names":["carouselNewRoot","Root","forwardRef","_ref","ref","view","size","scrollAlign","children","_ref$isDragScrollDisa","isDragScrollDisabled","gap","paginationOptions","className","style","_useState","useState","_useState2","_slicedToArray","index","setIndex","slidesAmount","Children","count","handleClickLeft","Math","max","handleClickRight","min","_useCarousel","useCarousel","onIndexChange","scrollRef","trackRef","useDragScroll","React","createElement","ControlsWrapper","IconButton","pin","onClick","_IconDisclosureLeft","IconDisclosureLeft","color","CarouselWrapper","CarouselTrack","classes","rightControlButton","_IconDisclosureRight","IconDisclosureRight","disabled","Dots","onChange","visibleCount","visibleDots","centered","carouselNewConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}

package/es/components/Carousel/CarouselNew/Carousel.styles.js

@@ -1,7 +1,43 @@
-import './Carousel.styles_1gx7oht.css';
-import '@linaria/react';
+import './Carousel.styles_1fs4wwn.css';
+import { styled } from '@linaria/react';
+import { component, mergeConfig } from '../../../engines/common.js';
+import { iconButtonConfig } from '../../IconButton/IconButton.js';
 
+var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
+var IconButtonComponent = /*#__PURE__*/component(mergedConfig);
 var base = "b13uu57o";
+var CarouselWrapper = /*#__PURE__*/styled('div')({
+  name: "CarouselWrapper",
+  "class": "c1gygdut",
+  propsAsIs: false
+});
+var _exp = function _exp() {
+  return function (_ref) {
+    var gap = _ref.gap;
+    return gap || 0;
+  };
+};
+var CarouselTrack = /*#__PURE__*/styled('div')({
+  name: "CarouselTrack",
+  "class": "c76zbfp",
+  propsAsIs: false,
+  vars: {
+    "c76zbfp-0": [/*#__PURE__*/_exp()]
+  }
+});
+var _exp2 = function _exp2() {
+  return IconButtonComponent;
+};
+var IconButton = /*#__PURE__*/styled(_exp2())({
+  name: "IconButton",
+  "class": "i1cnnvc1",
+  propsAsIs: true
+});
+var ControlsWrapper = /*#__PURE__*/styled('div')({
+  name: "ControlsWrapper",
+  "class": "c1ff2k98",
+  propsAsIs: false
+});
 
-export { base };
+export { CarouselTrack, CarouselWrapper, ControlsWrapper, IconButton, IconButtonComponent, base };
 //# sourceMappingURL=Carousel.styles.js.map

package/es/components/Carousel/CarouselNew/Carousel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\nimport { CSSProperties } from 'react';\n\nexport const base = css`\n    position: relative;\n    padding: 20px 0;\n    border-top: 2px solid #ff000038;\n\n    &:before {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 0;\n        bottom: 0;\n        width: 2px;\n        margin-left: -1px;\n        background: #ff000038;\n    }\n`;\n\n/**\n * Компонент применяется, если требуется компенсировать отступы контейнера в сетке.\n * При обертывании вокруг ``Carousel``, добавляет карусели и ее прокрутке дополнительные отступы.\n * Стилизованный компонент, обладающий всеми свойствами ``div``.\n */\nexport const CarouselGridWrapper = styled.div`\n    overflow: hidden;\n    margin-left: calc(var(--plasma-grid-margin) * -1);\n    margin-right: calc(var(--plasma-grid-margin) * -1);\n`;\n\nexport const CarouselWrapper = styled.div<{ scrollSnapType?: 'mandatory' | 'proximity' | 'none' }>`\n    position: relative;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    overflow-x: auto;\n    overflow-y: hidden;\n\n    scroll-behavior: smooth;\n    scroll-snap-type: ${({ scrollSnapType }) => `x ${scrollSnapType}`};\n\n    ${CarouselGridWrapper} & {\n        scroll-padding: 0 var(--plasma-grid-margin);\n        padding-left: var(--plasma-grid-margin);\n    }\n\n    user-select: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n`;\n\nexport const CarouselTrack = styled.div<{ gap?: CSSProperties['gap'] }>`\n    display: inline-flex;\n    flex-direction: row;\n    gap: ${({ gap }) => gap || 0};\n`;\n"],"names":["base"],"mappings":";;AAIO,IAAMA,IAAI,GAehB;;;;"}
+{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\nimport { CSSProperties } from 'react';\nimport { component, mergeConfig } from 'src/engines';\nimport { iconButtonConfig, iconButtonTokens } from 'src/components/IconButton';\n\nimport { classes } from './Carousel.tokens';\n\nconst mergedConfig = mergeConfig(iconButtonConfig);\nexport const IconButtonComponent = component(mergedConfig);\n\nexport const base = css`\n    position: relative;\n`;\n\nexport const CarouselWrapper = styled.div`\n    position: relative;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    overflow-x: auto;\n    overflow-y: hidden;\n\n    scroll-behavior: smooth;\n    scroll-snap-type: x mandatory;\n\n    user-select: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n`;\n\nexport const CarouselTrack = styled.div<{ gap?: CSSProperties['gap'] }>`\n    display: inline-flex;\n    flex-direction: row;\n    gap: ${({ gap }) => gap || 0};\n`;\n\nexport const IconButton = styled(IconButtonComponent)`\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0.75rem;\n    z-index: 10;\n\n    ${iconButtonTokens.iconButtonColor}: var(--text-primary);\n    ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);\n    ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});\n    ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n    ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n\n    ${iconButtonTokens.iconButtonHeight}: 2.5rem;\n    ${iconButtonTokens.iconButtonWidth}: 2.5rem;\n    ${iconButtonTokens.iconButtonPadding}: 1rem;\n    ${iconButtonTokens.iconButtonRadius}: 0.625rem;\n\n    &.${classes.rightControlButton} {\n        left: auto;\n        right: 0.75rem;\n    }\n`;\n\nexport const ControlsWrapper = styled.div`\n    position: relative;\n`;\n"],"names":["mergedConfig","mergeConfig","iconButtonConfig","IconButtonComponent","component","base","CarouselWrapper","styled","name","class","propsAsIs","_exp","_ref","gap","CarouselTrack","vars","_exp2","IconButton","ControlsWrapper"],"mappings":";;;;AAQA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,gBAAgB,CAAC,CAAA;IACrCC,mBAAmB,gBAAGC,SAAS,CAACJ,YAAY,EAAC;AAEnD,IAAMK,IAAI,GAEhB,WAAA;AAEM,IAAMC,eAAe,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAoBpC,EAAA;AAAC,IAAAC,IAAA,GAlCgBA,SAkChBA,IAAAA,GAAA;AAAA,EAAA,OAKS,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,GAAAA,GAAAA,IAAAA,CAAAA,GAAAA,CAAAA;IAAAA,OAAUA,GAAG,IAAI,CAAC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAHzB,IAAMC,aAAa,gBAAGP,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAK,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAGxBJ,IAAqB,EAAA,CAAA;AAAA,GAAA;AAAA,CAC/B,EAAA;AAAC,IAAAK,KAAA,GAxCgBA,SAwChBA,KAAAA,GAAA;AAAA,EAAA,OAE+Bb,mBAAmB,CAAA;AAAA,CAAA,CAAA;AAA7C,IAAMc,UAAU,gBAAGV,MAAM,CAAAS,KAAA,EAAA,CAAA,CAAA;AAAAR,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAsB/B,EAAA;AAEM,IAAMQ,eAAe,gBAAGX,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEpC;;;;"}

package/es/components/Carousel/CarouselNew/Carousel.styles_1fs4wwn.css

@@ -0,0 +1,5 @@
+.b13uu57o{position:relative;}
+.c1gygdut{position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}.c1gygdut::-webkit-scrollbar{display:none;}
+.c76zbfp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--c76zbfp-0);}
+.i1cnnvc1{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:0.75rem;z-index:10;--plasma-icon-button-color:var(--text-primary);--plasma-icon-button-background-color:var(--surface-transparent-secondary);--plasma-icon-button-loading-background-color:var(--plasma-icon-button-background-color);--plasma-icon-button-background-color-hover:var(--surface-transparent-secondary-hover);--plasma-icon-button-background-color-active:var(--surface-transparent-secondary-active);--plasma-icon-button-height:2.5rem;--plasma-icon-button-width:2.5rem;--plasma-icon-button-padding:1rem;--plasma-icon-button-radius:0.625rem;}.i1cnnvc1.carousel-right-control-button{left:auto;right:0.75rem;}
+.c1ff2k98{position:relative;}

package/es/components/Carousel/CarouselNew/Carousel.tokens.js

@@ -7,7 +7,8 @@ var classes = {
   temporaryNatural: 'dot-temporary-natural',
   shrinking: 'dot-shrinking',
   availableDotsLeft: 'dot-available-dots-left',
-  availableDotsRight: 'dot-available-dots-right'
+  availableDotsRight: 'dot-available-dots-right',
+  rightControlButton: 'carousel-right-control-button'
 };
 var tokens = {
   paginationDotBackground: '--plasma-carousel-pagination-dot-background',

package/es/components/Carousel/CarouselNew/Carousel.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.tokens.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tokens.ts"],"sourcesContent":["export const classes = {\n    dot: 'dot',\n    active: 'dot-active',\n    animating: 'dot-animating',\n    animateIn: 'dot-animate-in',\n    animateOut: 'dot-animate-out',\n    temporaryNatural: 'dot-temporary-natural',\n    shrinking: 'dot-shrinking',\n    availableDotsLeft: 'dot-available-dots-left',\n    availableDotsRight: 'dot-available-dots-right',\n};\n\nexport const tokens = {\n    paginationDotBackground: '--plasma-carousel-pagination-dot-background',\n    paginationDotActiveBackground: '--plasma-carousel-pagination-dot-active-background',\n};\n"],"names":["classes","dot","active","animating","animateIn","animateOut","temporaryNatural","shrinking","availableDotsLeft","availableDotsRight","tokens","paginationDotBackground","paginationDotActiveBackground"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE,YAAY;AACpBC,EAAAA,SAAS,EAAE,eAAe;AAC1BC,EAAAA,SAAS,EAAE,gBAAgB;AAC3BC,EAAAA,UAAU,EAAE,iBAAiB;AAC7BC,EAAAA,gBAAgB,EAAE,uBAAuB;AACzCC,EAAAA,SAAS,EAAE,eAAe;AAC1BC,EAAAA,iBAAiB,EAAE,yBAAyB;AAC5CC,EAAAA,kBAAkB,EAAE,0BAAA;AACxB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,uBAAuB,EAAE,6CAA6C;AACtEC,EAAAA,6BAA6B,EAAE,oDAAA;AACnC;;;;"}
+{"version":3,"file":"Carousel.tokens.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tokens.ts"],"sourcesContent":["export const classes = {\n    dot: 'dot',\n    active: 'dot-active',\n    animating: 'dot-animating',\n    animateIn: 'dot-animate-in',\n    animateOut: 'dot-animate-out',\n    temporaryNatural: 'dot-temporary-natural',\n    shrinking: 'dot-shrinking',\n    availableDotsLeft: 'dot-available-dots-left',\n    availableDotsRight: 'dot-available-dots-right',\n    rightControlButton: 'carousel-right-control-button',\n};\n\nexport const tokens = {\n    paginationDotBackground: '--plasma-carousel-pagination-dot-background',\n    paginationDotActiveBackground: '--plasma-carousel-pagination-dot-active-background',\n};\n"],"names":["classes","dot","active","animating","animateIn","animateOut","temporaryNatural","shrinking","availableDotsLeft","availableDotsRight","rightControlButton","tokens","paginationDotBackground","paginationDotActiveBackground"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE,YAAY;AACpBC,EAAAA,SAAS,EAAE,eAAe;AAC1BC,EAAAA,SAAS,EAAE,gBAAgB;AAC3BC,EAAAA,UAAU,EAAE,iBAAiB;AAC7BC,EAAAA,gBAAgB,EAAE,uBAAuB;AACzCC,EAAAA,SAAS,EAAE,eAAe;AAC1BC,EAAAA,iBAAiB,EAAE,yBAAyB;AAC5CC,EAAAA,kBAAkB,EAAE,0BAA0B;AAC9CC,EAAAA,kBAAkB,EAAE,+BAAA;AACxB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,uBAAuB,EAAE,6CAA6C;AACtEC,EAAAA,6BAA6B,EAAE,oDAAA;AACnC;;;;"}

package/es/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -227,13 +227,13 @@ var THROTTLE_DEFAULT_MS = 100;
 var DEBOUNCE_DEFAULT_MS = 150;
 var useCarousel = function useCarousel(_ref4) {
   var index = _ref4.index,
+    onIndexChange = _ref4.onIndexChange,
     _ref4$detectActive = _ref4.detectActive,
     detectActive = _ref4$detectActive === void 0 ? false : _ref4$detectActive,
     _ref4$detectThreshold = _ref4.detectThreshold,
     detectThreshold = _ref4$detectThreshold === void 0 ? 0.5 : _ref4$detectThreshold,
     _ref4$scrollAlign = _ref4.scrollAlign,
     scrollAlign = _ref4$scrollAlign === void 0 ? 'center' : _ref4$scrollAlign,
-    onIndexChange = _ref4.onIndexChange,
     _ref4$throttleMs = _ref4.throttleMs,
     throttleMs = _ref4$throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _ref4$throttleMs,
     _ref4$debounceMs = _ref4.debounceMs,