@smg-automotive/components 25.11.0-dgajin-vsst-4352-migrate-carousel.2 → 25.11.0-dgajin-vsst-4352-migrate-carousel.3

package/dist/cjs/components/carousel/DotsPagination.d.ts

@@ -3,6 +3,6 @@ interface Props {
     currentSlideIndex: number;
     numberOfSlides: number;
 }
-export declare const NumbersDotsPagination: FC<Props>;
+export declare const DotsPagination: FC<Props>;
 export {};
 //# sourceMappingURL=DotsPagination.d.ts.map

package/dist/cjs/components/carousel/DotsPagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotsPagination.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/DotsPagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,UAAU,KAAK;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,KAAK,CAoB3C,CAAC"}
+{"version":3,"file":"DotsPagination.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/DotsPagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,UAAU,KAAK;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAoBpC,CAAC"}

package/dist/cjs/components/carousel/DotsPaginationIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotsPaginationIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/DotsPaginationIndicator.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,eAAe,CAavD,CAAC"}
+{"version":3,"file":"DotsPaginationIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/DotsPaginationIndicator.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,eAAe,CAUvD,CAAC"}

package/dist/cjs/components/carousel/NumbersPaginationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumbersPaginationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/NumbersPaginationButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,KAAK,CAuB7C,CAAC"}
+{"version":3,"file":"NumbersPaginationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/carousel/NumbersPaginationButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,KAAK,CAmB7C,CAAC"}

package/dist/cjs/index.js

@@ -2535,9 +2535,7 @@ var slots = [
     'paginationIconContainer',
     'dotsPaginationContainer',
     'dotsPaginationIndicator',
-    'dotsPaginationIndicatorActive',
     'numbersPaginationButton',
-    'numbersPaginationButtonActive',
 ];
 var baseContainer = react$1.defineStyle({
     height: 'full',
@@ -2608,10 +2606,14 @@ var numbersPaginationButton = react$1.defineStyle({
     _hover: {
         backgroundColor: 'gray.100',
     },
-});
-var numbersPaginationButtonActive = react$1.defineStyle(__assign(__assign({}, numbersPaginationButton), { color: 'white', backgroundColor: 'gray.900', _hover: {
+    '&[aria-current="true"]': {
+        color: 'white',
         backgroundColor: 'gray.900',
-    } }));
+        _hover: {
+            backgroundColor: 'gray.900',
+        },
+    },
+});
 var dotsPaginationIndicator = react$1.defineStyle({
     backgroundColor: 'transparent',
     touchAction: 'pan-x',
@@ -2639,23 +2641,28 @@ var dotsPaginationIndicator = react$1.defineStyle({
         height: 'var(--carousel-dot-size)',
         content: '""',
     },
-});
-var dotsPaginationIndicatorActive = react$1.defineStyle(__assign(__assign({}, dotsPaginationIndicator), { width: 'var(--carousel-dot-size-active)', height: 'var(--carousel-dot-size-active)', _last: {
+    '&[aria-current="true"]': {
         width: 'var(--carousel-dot-size-active)',
         height: 'var(--carousel-dot-size-active)',
+        _last: {
+            width: 'var(--carousel-dot-size-active)',
+            height: 'var(--carousel-dot-size-active)',
+            _after: {
+                width: 'full',
+                height: 'var(--carousel-dot-size-active)',
+                content: '""',
+            },
+        },
         _after: {
+            backgroundColor: 'white',
+            borderRadius: 'full',
+            opacity: '100',
             width: 'full',
             height: 'var(--carousel-dot-size-active)',
             content: '""',
         },
-    }, _after: {
-        backgroundColor: 'white',
-        borderRadius: 'full',
-        opacity: '100',
-        width: 'full',
-        height: 'var(--carousel-dot-size-active)',
-        content: '""',
-    } }));
+    },
+});
 var fullScreenVariant = {
     container: react$1.defineStyle({
         backgroundColor: 'black',
@@ -2727,7 +2734,6 @@ var carouselRecipe = react$1.defineSlotRecipe({
         button: baseButton,
         icon: baseIcon,
         numbersPaginationButton: numbersPaginationButton,
-        numbersPaginationButtonActive: numbersPaginationButtonActive,
         dotsPaginationContainer: react$1.defineStyle({
             position: 'absolute',
             width: 'full',
@@ -2737,7 +2743,6 @@ var carouselRecipe = react$1.defineSlotRecipe({
             alignItems: 'center',
         }),
         dotsPaginationIndicator: dotsPaginationIndicator,
-        dotsPaginationIndicatorActive: dotsPaginationIndicatorActive,
     },
     variants: {
         variant: {
@@ -11279,9 +11284,7 @@ var NumbersPaginationButton = function (_a) {
     var onClick = _a.onClick, isCurrent = _a.isCurrent, currentPageNumber = _a.currentPageNumber, totalNumbers = _a.totalNumbers;
     var recipe = react$1.useSlotRecipe({ key: 'carousel' });
     var styles = recipe();
-    return (React.createElement(react$1.chakra.button, { css: isCurrent
-            ? styles.numbersPaginationButtonActive
-            : styles.numbersPaginationButton, onClick: onClick, "aria-current": isCurrent, "aria-label": "numbers pagination ".concat(currentPageNumber, " of ").concat(totalNumbers) }, currentPageNumber));
+    return (React.createElement(react$1.chakra.button, { css: styles.numbersPaginationButton, onClick: onClick, "aria-current": isCurrent, "aria-label": "numbers pagination ".concat(currentPageNumber, " of ").concat(totalNumbers) }, currentPageNumber));
 };
 
 var NumbersPagination = function (_a) {
@@ -11313,12 +11316,10 @@ var DotsPaginationIndicator = function (_a) {
     var isCurrent = _a.isCurrent;
     var recipe = react$1.useSlotRecipe({ key: 'carousel' });
     var styles = recipe();
-    return (React.createElement(react$1.chakra.span, { css: isCurrent
-            ? styles.dotsPaginationIndicatorActive
-            : styles.dotsPaginationIndicator }));
+    return (React.createElement(react$1.chakra.span, { "aria-current": isCurrent, css: styles.dotsPaginationIndicator }));
 };
 
-var NumbersDotsPagination = function (_a) {
+var DotsPagination = function (_a) {
     var currentSlideIndex = _a.currentSlideIndex, numberOfSlides = _a.numberOfSlides;
     var pagination = Array.from({ length: numberOfSlides }, function (_, i) { return i; });
     var recipe = react$1.useSlotRecipe({ key: 'carousel' });
@@ -11455,7 +11456,7 @@ var Carousel = function (props) {
             React.createElement(Flex, { css: styles.slideContainer, marginLeft: slidesPerView === 1 ? '0' : { base: '-md', md: '-2xl' } }, props.children.map(function (slide, index) { return (React.createElement(Slide, { key: "slide-".concat(index), slideIndex: index, onClick: function () { return onClick(index); }, totalSlides: numberOfSlides, isCurrent: index === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView }, isFullScreenSlide(slide) ? slide.slide : slide)); })),
             canScrollPrevious ? (React.createElement(NavigationButton, { onClick: scrollPrev, direction: "previous", fullScreen: !!fullScreen, isHovered: isHovered || (!!fullScreen && !isSmallLandscapeViewport) })) : null,
             canScrollNext ? (React.createElement(NavigationButton, { onClick: scrollNext, direction: "next", fullScreen: !!fullScreen, isHovered: isHovered || (!!fullScreen && !isSmallLandscapeViewport) })) : null,
-            paginationType === exports.PaginationType.Dot ? (React.createElement(NumbersDotsPagination, { currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null)),
+            paginationType === exports.PaginationType.Dot ? (React.createElement(DotsPagination, { currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null)),
         hasThumbnailPagination ? (React.createElement(ThumbnailPagination, { currentSlideIndex: selectedIndex, thumbnails: props.children.map(function (slide) { return slide.thumbnail; }), mainCarousel: mainCarousel, paginationCarousel: paginationCarousel, paginationCarouselRef: paginationCarouselRef })) : null,
         paginationType === exports.PaginationType.Number ? (React.createElement(NumbersPagination, { mainCarousel: mainCarousel, currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null));
 };