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

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

@@ -2,18 +2,38 @@ import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 
+import { config } from './Carousel.config';
 import { Carousel, CarouselItem } from './Carousel';
 
-type StoryCarouselProps = ComponentProps<typeof Carousel>;
+type StoryCarouselProps = ComponentProps<typeof Carousel> & {
+    slides: number;
+    visibleDots: number;
+    paginationCentered: boolean;
+};
+
+const { views, sizes } = getConfigVariations(config);
 
 const meta: Meta<StoryCarouselProps> = {
     title: 'b2c/Navigation/Carousel',
     component: Carousel,
     decorators: [WithTheme],
     argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
         align: {
             options: ['center', 'start', 'end'],
             control: {
@@ -23,55 +43,99 @@ const meta: Meta<StoryCarouselProps> = {
         isDragScrollDisabled: {
             control: 'boolean',
         },
+        slides: {
+            control: 'number',
+        },
+        visibleDots: {
+            control: 'number',
+        },
+        paginationCentered: {
+            control: 'boolean',
+        },
     },
     args: {
+        view: 'default',
+        size: 's',
         align: 'center',
         isDragScrollDisabled: false,
+        visibleDots: 6,
+        slides: 10,
+        paginationCentered: false,
     },
     parameters: {
         controls: {
-            include: ['align', 'isDragScrollDisabled'],
+            include: ['visibleDots', 'slides', 'paginationCentered'],
         },
     },
 };
 
 export default meta;
 
-const items = Array(25)
-    .fill({
-        title: 'Заголовок',
-    })
-    .map(({ title }, i) => ({
-        id: i,
-        title: `${title} ${i}`,
-    }));
-
 const StyledCard = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     border-radius: 8px;
-    width: 350px;
-    height: 50px;
-    padding: 8px;
+    width: 500px;
+    height: 370px;
     background-color: #add8e6;
+    font-size: 30px;
 `;
 
-const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
+const StoryDefault = ({
+    align,
+    visibleDots,
+    slides,
+    paginationCentered,
+    isDragScrollDisabled,
+    ...rest
+}: StoryCarouselProps) => {
     const [index, setIndex] = React.useState(0);
 
+    const items = Array(slides)
+        .fill(1)
+        .map((_, i) => ({
+            id: i,
+            title: i,
+        }));
+
     return (
-        <Carousel
-            index={index}
-            detectActive
-            onIndexChange={setIndex}
-            scrollAlign={align}
-            isDragScrollDisabled={isDragScrollDisabled}
-        >
-            {items.map((item, i) => (
-                <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
-                    <StyledCard>{item.title}</StyledCard>
-                </CarouselItem>
-            ))}
-        </Carousel>
+        <>
+            <button type="button" onClick={() => setIndex((prev) => Math.max(prev - 1, 0))}>
+                prev
+            </button>
+            <button type="button" onClick={() => setIndex((prev) => Math.min(prev + 1, slides - 1))}>
+                next
+            </button>
+            <br />
+            <span>текущий индекс: {index}</span>
+
+            <br />
+            <br />
+
+            <div style={{ width: '800px' }}>
+                <Carousel
+                    index={index}
+                    onIndexChange={setIndex}
+                    detectActive
+                    scrollAlign={align}
+                    isDragScrollDisabled={isDragScrollDisabled}
+                    gap="20px"
+                    paginationOptions={{
+                        visibleDots,
+                        centered: paginationCentered,
+                    }}
+                    {...rest}
+                >
+                    {items.map((item, i) => (
+                        <CarouselItem key={i} scrollSnapAlign={align}>
+                            <StyledCard>{item.title}</StyledCard>
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+            </div>
+        </>
     );
 };
 

package/emotion/es/hooks/index.js

@@ -3,5 +3,6 @@ export { useFocusTrap } from "./useFocusTrap";
 export { usePreviousValue } from "./usePreviousValue";
 export { useForceUpdate } from "./useForceUpdate";
 export { useDidMountEffect } from "./useDidMountEffect";
+export { useDidMountLayoutEffect } from "./useDidMountLayoutEffect";
 export { useOutsideClick } from "./useOutsideClick";
 export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";

package/emotion/es/hooks/useDidMountLayoutEffect.js

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useRef } from 'react';
+export var useDidMountLayoutEffect = function useDidMountLayoutEffect(fn, inputs) {
+  var didMountRef = useRef(false);
+  useLayoutEffect(function () {
+    if (didMountRef.current) {
+      fn();
+    } else {
+      didMountRef.current = true;
+    }
+  }, inputs);
+};

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

@@ -0,0 +1,12 @@
+.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);}
+
+.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;}

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

@@ -0,0 +1,89 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useState, useCallback, Children } from 'react';
+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 { useCarousel } from './hooks/useCarousel.js';
+import { useDragScroll } from './hooks/useDragScroll.js';
+import { Dots } from './ui/Dots/Dots.js';
+
+var _br;
+
+/**
+ * Компонент для создания списков с прокруткой.
+ */
+var carouselNewRoot = function carouselNewRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref,
+  // @ts-ignore
+  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;
+    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({
+    var _useCarousel = useCarousel({
+        index: index,
+        scrollAlign: scrollAlign,
+        detectActive: detectActive,
+        detectThreshold: detectThreshold,
+        onIndexChange: onIndexChange
+      }),
+      scrollRef = _useCarousel.scrollRef;
+
+    // const handleRef = useForkRef(scrollRef, ref);
+
+    useDragScroll(scrollRef, isDragScrollDisabled);
+    var slidesAmount = Children.count(children);
+    return /*#__PURE__*/React.createElement(Root, {
+      size: size,
+      view: view,
+      index: index
+    }, _br || (_br = /*#__PURE__*/React.createElement("br", null)), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React.createElement(Dots, {
+      index: index,
+      onChange: handleChangeIndex,
+      visibleCount: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.visibleDots) || slidesAmount,
+      count: slidesAmount,
+      centered: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.centered) || false
+    }));
+  });
+};
+var carouselNewConfig = {
+  name: 'Carousel',
+  tag: 'div',
+  layout: carouselNewRoot,
+  base: base,
+  variations: {
+    view: {
+      css: base$1
+    },
+    size: {
+      css: base$2
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 's'
+  }
+};
+
+export { carouselNewConfig, carouselNewRoot };
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,7 @@
+import './Carousel.styles_1gx7oht.css';
+import '@linaria/react';
+
+var base = "b13uu57o";
+
+export { base };
+//# sourceMappingURL=Carousel.styles.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,4 @@
+.b13uu57o{position:relative;padding:20px 0;border-top:2px solid #ff000038;}.b13uu57o:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff000038;}
+.c1gygdut{overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);}
+.c76zbfp{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);}.c76zbfp::-webkit-scrollbar{display:none;}.c1gygdut .c76zbfp{-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);}
+.c1cnnvc1{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);}

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

@@ -0,0 +1,18 @@
+var classes = {
+  dot: 'dot',
+  active: 'dot-active',
+  animating: 'dot-animating',
+  animateIn: 'dot-animate-in',
+  animateOut: 'dot-animate-out',
+  temporaryNatural: 'dot-temporary-natural',
+  shrinking: 'dot-shrinking',
+  availableDotsLeft: 'dot-available-dots-left',
+  availableDotsRight: 'dot-available-dots-right'
+};
+var tokens = {
+  paginationDotBackground: '--plasma-carousel-pagination-dot-background',
+  paginationDotActiveBackground: '--plasma-carousel-pagination-dot-active-background'
+};
+
+export { classes, tokens };
+//# sourceMappingURL=Carousel.tokens.js.map

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

@@ -0,0 +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;;;;"}