@telefonica/mistica 16.30.1 → 16.32.0

package/dist/carousel.css-mistica.js

@@ -9,99 +9,154 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    LARGE_BULLET_FULL_SIZE: function() {
+        return l;
+    },
+    SMALL_BULLET_FULL_SIZE: function() {
+        return n;
+    },
+    VISIBLE_BULLETS: function() {
+        return e;
+    },
     bullet: function() {
-        return f;
+        return r;
     },
     bulletActive: function() {
-        return y;
+        return i;
     },
     bulletActiveInverse: function() {
         return u;
     },
+    bulletActiveSizing: function() {
+        return b;
+    },
     bulletButton: function() {
-        return c;
+        return t;
     },
-    bulletButtonDesktop: function() {
-        return l;
+    bulletInactiveMediumSizing: function() {
+        return c;
     },
-    bulletButtonMobile: function() {
-        return e;
+    bulletInactiveSizing: function() {
+        return o;
     },
-    bulletButtonTablet: function() {
-        return b;
+    bulletInactiveSmallSizing: function() {
+        return y;
     },
     bulletInverse: function() {
-        return r;
+        return f;
+    },
+    bulletVisibility: function() {
+        return s;
+    },
+    bulletVisibilityDesktop: function() {
+        return C;
+    },
+    bulletVisibilityMobile: function() {
+        return m;
+    },
+    bulletVisibilityTablet: function() {
+        return k;
+    },
+    bulletsScrollableContainer: function() {
+        return L;
+    },
+    bulletsScrollableContainerBase: function() {
+        return p;
     },
     carousel: function() {
-        return t;
+        return B;
+    },
+    carouselAutoplayControlContainer: function() {
+        return S;
     },
     carouselBullets: function() {
-        return o;
+        return d;
     },
-    carouselContainer: function() {
-        return i;
+    carouselComponentContainer: function() {
+        return h;
     },
-    carouselItem: function() {
-        return s;
+    carouselContainer: function() {
+        return g;
     },
-    carouselNextArrowButton: function() {
+    carouselControlsContainer: function() {
         return j;
     },
-    carouselPrevArrowButton: function() {
-        return k;
+    carouselControlsVisibility: function() {
+        return I;
+    },
+    carouselControlsVisibilityDesktop: function() {
+        return P;
+    },
+    carouselControlsVisibilityMobile: function() {
+        return w;
+    },
+    carouselControlsVisibilityTablet: function() {
+        return V;
+    },
+    carouselItem: function() {
+        return T;
+    },
+    carouselPagesControlsContainer: function() {
+        return A;
     },
     carouselWithScrollMobile: function() {
-        return m;
+        return E;
     },
     carouselWithScrollTablet: function() {
-        return B;
+        return M;
     },
     centeredCarousel: function() {
-        return h;
+        return z;
     },
     noCarouselBulletsDesktop: function() {
-        return w;
+        return U;
     },
     noCarouselBulletsMobile: function() {
-        return p;
+        return D;
     },
     noCarouselBulletsTablet: function() {
-        return d;
+        return W;
+    },
+    scrollableBullet: function() {
+        return x;
     },
     slideshow: function() {
-        return P;
+        return F;
     },
-    slideshowBullets: function() {
-        return g;
+    slideshowAutoplayControlContainer: function() {
+        return Z;
+    },
+    slideshowBulletsContainer: function() {
+        return q;
     },
     slideshowContainer: function() {
-        return A;
+        return G;
     },
-    slideshowItem: function() {
-        return C;
+    slideshowControlsContainer: function() {
+        return O;
     },
-    slideshowNextArrowButton: function() {
-        return q;
+    slideshowControlsContainerSingleItem: function() {
+        return R;
     },
-    slideshowPrevArrowButton: function() {
-        return x;
+    slideshowItem: function() {
+        return H;
     },
     slideshowWithBullets: function() {
-        return I;
+        return J;
     },
     vars: function() {
-        return M;
+        return K;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-require("./grid-layout.css.ts.vanilla.css-mistica.js");
 require("./carousel.css.ts.vanilla.css-mistica.js");
-var f = "v16_30_1_1abcu71 v16_30_1_1y2v1nfjk v16_30_1_1y2v1nfk0 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf5m", y = "v16_30_1_1abcu72 v16_30_1_1abcu71 v16_30_1_1y2v1nfjk v16_30_1_1y2v1nfk0 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf5n", u = "v16_30_1_1abcu72 v16_30_1_1abcu71 v16_30_1_1y2v1nfjk v16_30_1_1y2v1nfk0 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf6a", c = "v16_30_1_1abcu74 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcc v16_30_1_1y2v1nfiu v16_30_1_1y2v1nfla v16_30_1_1y2v1nf8k", l = "v16_30_1_1abcu78 v16_30_1_1abcu75 v16_30_1_1abcu74 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcc v16_30_1_1y2v1nfiu v16_30_1_1y2v1nfla v16_30_1_1y2v1nf8k", e = "v16_30_1_1abcu76 v16_30_1_1abcu75 v16_30_1_1abcu74 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcc v16_30_1_1y2v1nfiu v16_30_1_1y2v1nfla v16_30_1_1y2v1nf8k", b = "v16_30_1_1abcu77 v16_30_1_1abcu75 v16_30_1_1abcu74 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_1y2v1nfbi v16_30_1_1y2v1nfcc v16_30_1_1y2v1nfiu v16_30_1_1y2v1nfla v16_30_1_1y2v1nf8k", r = "v16_30_1_1abcu7b v16_30_1_1abcu71 v16_30_1_1y2v1nfjk v16_30_1_1y2v1nfk0 v16_30_1_1y2v1nflc", t = "v16_30_1_1abcu7u v16_30_1_1abcu7j v16_30_1_1y2v1nfis v16_30_1_1y2v1nfkc", o = "v16_30_1_1abcu714 v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nf96", i = "v16_30_1_1y2v1nfil v16_30_1_1y2v1nfkp v16_30_1_1y2v1nfim", s = "v16_30_1_1abcu7y", j = "v16_30_1_1abcu712 v16_30_1_1abcu710 v16_30_1_1abcu7l v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf4c v16_30_1_1y2v1nfjq v16_30_1_1y2v1nfk6 v16_30_1_1y2v1nfl9 v16_30_1_1y2v1nfin", k = "v16_30_1_1abcu711 v16_30_1_1abcu710 v16_30_1_1abcu7l v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf4c v16_30_1_1y2v1nfjq v16_30_1_1y2v1nfk6 v16_30_1_1y2v1nfl9 v16_30_1_1y2v1nfin", m = "v16_30_1_1abcu7v", B = "v16_30_1_1abcu7w", h = "v16_30_1_1abcu7x", w = "v16_30_1_1abcu715", p = "v16_30_1_1abcu717", d = "v16_30_1_1abcu716", P = "v16_30_1_1abcu719 v16_30_1_1abcu7j v16_30_1_1y2v1nfis v16_30_1_1y2v1nfkc", g = "v16_30_1_1abcu71h v16_30_1_1y2v1nfin v16_30_1_1y2v1nfng v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nfjf", A = "v16_30_1_1abcu7h v16_30_1_1y2v1nfim", C = "v16_30_1_1abcu71b v16_30_1_1y2v1nfjf v16_30_1_1y2v1nfja", q = "v16_30_1_1abcu71f v16_30_1_1abcu710 v16_30_1_1abcu7l v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf4c v16_30_1_1y2v1nfjq v16_30_1_1y2v1nfk6 v16_30_1_1y2v1nfl9 v16_30_1_1y2v1nfin v16_30_1_1y2v1nfn1", x = "v16_30_1_1abcu71d v16_30_1_1abcu710 v16_30_1_1abcu7l v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nflc v16_30_1_1y2v1nf4c v16_30_1_1y2v1nfjq v16_30_1_1y2v1nfk6 v16_30_1_1y2v1nfl9 v16_30_1_1y2v1nfin v16_30_1_1y2v1nfmm", I = "v16_30_1_1abcu7i", M = {
-    itemsPerPageMobile: "var(--v16_30_1_1abcu7o)",
-    itemsPerPageTablet: "var(--v16_30_1_1abcu7p)",
-    itemsPerPageDesktop: "var(--v16_30_1_1abcu7q)",
-    gap: "var(--v16_30_1_1abcu7r)",
-    mobilePageOffset: "var(--v16_30_1_1abcu7s)"
+var l = 14, n = 12, e = 5, r = "v16_32_1abcu7j v16_32_1y2v1nflc v16_32_1y2v1nf5m", i = "v16_32_1abcu7j v16_32_1y2v1nflc v16_32_1y2v1nf5n", u = "v16_32_1abcu7j v16_32_1y2v1nflc v16_32_1y2v1nf6a", b = "v16_32_1abcu7s v16_32_1abcu7r", t = "v16_32_1abcu7b v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfb9 v16_32_1y2v1nfci v16_32_1y2v1nfiu v16_32_1y2v1nfla v16_32_1y2v1nf8k", c = "v16_32_1abcu7t v16_32_1abcu7r", o = "v16_32_1abcu7r", y = "v16_32_1abcu7u v16_32_1abcu7r", f = "v16_32_1abcu7m v16_32_1abcu7j v16_32_1y2v1nflc", s = "v16_32_1abcu7c v16_32_1abcu7b v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfb9 v16_32_1y2v1nfci v16_32_1y2v1nfiu v16_32_1y2v1nfla v16_32_1y2v1nf8k", C = "v16_32_1abcu7f v16_32_1abcu7b v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfb9 v16_32_1y2v1nfci v16_32_1y2v1nfiu v16_32_1y2v1nfla v16_32_1y2v1nf8k", m = "v16_32_1abcu7d v16_32_1abcu7b v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfb9 v16_32_1y2v1nfci v16_32_1y2v1nfiu v16_32_1y2v1nfla v16_32_1y2v1nf8k", k = "v16_32_1abcu7e v16_32_1abcu7b v16_32_1y2v1nf8r v16_32_1y2v1nfa0 v16_32_1y2v1nfb9 v16_32_1y2v1nfci v16_32_1y2v1nfiu v16_32_1y2v1nfla v16_32_1y2v1nf8k", L = "v16_32_1abcu7x", p = "v16_32_1abcu7w v16_32_1y2v1nfis v16_32_1y2v1nfj7 v16_32_1y2v1nfim v16_32_1y2v1nfk5", B = "v16_32_1abcu71d v16_32_1abcu711 v16_32_1y2v1nfis v16_32_1y2v1nfkc", S = "v16_32_1abcu71a v16_32_1y2v1nfkp", d = "v16_32_1abcu71j v16_32_1y2v1nfis v16_32_1y2v1nfj1", h = "v16_32_1y2v1nfis v16_32_1y2v1nfiy", g = "v16_32_1y2v1nfil v16_32_1y2v1nfkp v16_32_1y2v1nfim", j = "v16_32_1y2v1nf8u", I = "v16_32_1abcu715", P = "v16_32_1abcu718", w = "v16_32_1abcu716", V = "v16_32_1abcu717", T = "v16_32_1abcu71h", A = "v16_32_1abcu71b", E = "v16_32_1abcu71e", M = "v16_32_1abcu71f", z = "v16_32_1abcu71g", U = "v16_32_1abcu71k", D = "v16_32_1abcu71m", W = "v16_32_1abcu71l", x = "v16_32_1abcu7h v16_32_1y2v1nfin", F = "v16_32_1abcu71o v16_32_1abcu711 v16_32_1y2v1nfis v16_32_1y2v1nfkc", Z = "v16_32_1y2v1nfkr", q = "v16_32_1y2v1nfis v16_32_1y2v1nfj1 v16_32_1y2v1nf8l v16_32_1y2v1nfbc v16_32_1y2v1nfcl", G = "v16_32_1abcu7z v16_32_1y2v1nfim", O = "v16_32_1abcu71s v16_32_1y2v1nfin v16_32_1y2v1nfnd v16_32_1y2v1nfmf v16_32_1y2v1nfmu v16_32_1y2v1nfis v16_32_1y2v1nfjf v16_32_1y2v1nfk5", R = "v16_32_1y2v1nfj2", H = "v16_32_1abcu71q v16_32_1y2v1nfjf v16_32_1y2v1nfja", J = "v16_32_1abcu710", K = {
+    itemsPerPageMobile: "var(--v16_32_1abcu71)",
+    itemsPerPageTablet: "var(--v16_32_1abcu72)",
+    itemsPerPageDesktop: "var(--v16_32_1abcu73)",
+    gap: "var(--v16_32_1abcu74)",
+    mobilePageOffset: "var(--v16_32_1abcu75)",
+    mobileBulletLeftPosition: "var(--v16_32_1abcu76)",
+    desktopBulletLeftPosition: "var(--v16_32_1abcu77)"
 };

package/dist/carousel.css.d.ts

@@ -1,36 +1,55 @@
+export declare const SMALL_BULLET_FULL_SIZE: number;
+export declare const LARGE_BULLET_FULL_SIZE: number;
+export declare const vars: {
+    itemsPerPageMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    itemsPerPageTablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    itemsPerPageDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    mobilePageOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    mobileBulletLeftPosition: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    desktopBulletLeftPosition: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const carouselComponentContainer: string;
 export declare const bulletButton: string;
-export declare const bulletButtonMobile: string;
-export declare const bulletButtonTablet: string;
-export declare const bulletButtonDesktop: string;
+export declare const bulletVisibility: string;
+export declare const bulletVisibilityMobile: string;
+export declare const bulletVisibilityTablet: string;
+export declare const bulletVisibilityDesktop: string;
+export declare const scrollableBullet: string;
 export declare const bullet: string;
 export declare const bulletInverse: string;
 export declare const bulletActive: string;
 export declare const bulletActiveInverse: string;
+export declare const bulletInactiveSizing: string;
+export declare const VISIBLE_BULLETS = 5;
+export declare const bulletActiveSizing: string;
+export declare const bulletInactiveMediumSizing: string;
+export declare const bulletInactiveSmallSizing: string;
+export declare const bulletsScrollableContainerBase: string;
+export declare const bulletsScrollableContainer: string;
 export declare const slideshowContainer: string;
 export declare const slideshowWithBullets: string;
 export declare const carouselContainer: string;
-export declare const vars: {
-    itemsPerPageMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    itemsPerPageTablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    itemsPerPageDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    mobilePageOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-};
+export declare const carouselControlsContainer: string;
+export declare const carouselControlsVisibility: string;
+export declare const carouselControlsVisibilityMobile: string;
+export declare const carouselControlsVisibilityTablet: string;
+export declare const carouselControlsVisibilityDesktop: string;
+export declare const carouselAutoplayControlContainer: string;
+export declare const carouselPagesControlsContainer: string;
 export declare const DEFAULT_DESKTOP_GAP = 16;
 export declare const carousel: string;
 export declare const carouselWithScrollMobile: string;
 export declare const carouselWithScrollTablet: string;
 export declare const centeredCarousel: string;
 export declare const carouselItem: string;
-export declare const carouselArrowButton: string;
-export declare const carouselPrevArrowButton: string;
-export declare const carouselNextArrowButton: string;
 export declare const carouselBullets: string;
 export declare const noCarouselBulletsDesktop: string;
 export declare const noCarouselBulletsTablet: string;
 export declare const noCarouselBulletsMobile: string;
 export declare const slideshow: string;
 export declare const slideshowItem: string;
-export declare const slideshowPrevArrowButton: string;
-export declare const slideshowNextArrowButton: string;
-export declare const slideshowBullets: string;
+export declare const slideshowControlsContainer: string;
+export declare const slideshowControlsContainerSingleItem: string;
+export declare const slideshowAutoplayControlContainer: string;
+export declare const slideshowBulletsContainer: string;

package/dist/carousel.d.ts

@@ -1,16 +1,26 @@
 import * as React from 'react';
 import type { ByBreakpoint, DataAttributes } from './utils/types';
+type GoToPage = (pageIndex: number, animate?: boolean) => void;
 type PageBulletsProps = {
     currentIndex: number;
     numPages: number | ByBreakpoint<number>;
-    onPress?: (index: number) => void;
 };
-export declare const PageBullets: ({ currentIndex, numPages, onPress }: PageBulletsProps) => JSX.Element;
-type GoToPage = (pageIndex: number, animate?: boolean) => void;
+type AutoplayControlProps = {
+    isAutoplayEnabled: boolean;
+    isAtLastPage: boolean;
+    onAutoplayChanged: (autoplay: boolean) => void;
+};
+type PageControlsProps = {
+    setShouldAutoplay: (autoplay: boolean) => void;
+    prevArrowEnabled: boolean;
+    nextArrowEnabled: boolean;
+};
 type CarouselControls = {
     goPrev: () => void;
     goNext: () => void;
     goToPage: GoToPage;
+    autoplayControlProps: AutoplayControlProps;
+    pageControlsProps: PageControlsProps;
     bulletsProps: PageBulletsProps;
 };
 export declare const CarouselContextProvider: ({ children }: {
@@ -18,6 +28,19 @@ export declare const CarouselContextProvider: ({ children }: {
 }) => JSX.Element;
 export declare const useCarouselContext: () => CarouselControls;
 export declare const CarouselContextConsumer: React.Consumer<CarouselControls>;
+export declare const PageBullets: ({ currentIndex, numPages }: PageBulletsProps) => JSX.Element;
+type CarouselPageControlsProps = PageControlsProps & {
+    bleedLeft?: boolean;
+    bleedRight?: boolean;
+    goPrev: () => void;
+    goNext: () => void;
+};
+export declare const CarouselPageControls: ({ bleedLeft, bleedRight, goPrev, goNext, setShouldAutoplay, prevArrowEnabled, nextArrowEnabled, }: CarouselPageControlsProps) => JSX.Element;
+type CarouselAutoplayControlProps = AutoplayControlProps & {
+    bleedLeft?: boolean;
+    bleedRight?: boolean;
+};
+export declare const CarouselAutoplayControl: ({ isAutoplayEnabled, isAtLastPage, onAutoplayChanged, bleedLeft, bleedRight, }: CarouselAutoplayControlProps) => JSX.Element;
 type DesktopItemsPerPage = {
     small?: number;
     medium?: number;
@@ -33,6 +56,10 @@ type CarouselProps = {
     itemStyle?: React.CSSProperties;
     itemClassName?: string;
     withBullets?: boolean;
+    /**
+     * @deprecated use CarouselContextProvider and CarouselContextConsumer to provide bullets props to custom bullets component.
+     * See an example here: https://mistica-web.vercel.app/?path=/story/components-carousels-carousel--with-carousel-context
+     */
     renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
     initialActiveItem?: number;
     itemsPerPage?: ItemsPerPageProp;
@@ -45,11 +72,14 @@ type CarouselProps = {
         time: number;
         loop?: boolean;
     };
+    withControls?: boolean;
     onPageChange?: (newPageInfo: {
         pageIndex: number;
         shownItemIndexes: Array<number>;
     }) => void;
     dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     children?: void;
 };
 export declare const Carousel: (props: CarouselProps) => JSX.Element;
@@ -58,6 +88,11 @@ type CenteredCarouselProps = {
     itemStyle?: React.CSSProperties;
     itemClassName?: string;
     withBullets?: boolean;
+    withControls?: boolean;
+    /**
+     * @deprecated use CarouselContextProvider and CarouselContextConsumer to provide bullets props to custom bullets component.
+     * See an example here: https://mistica-web.vercel.app/?path=/story/components-carousels-carousel--with-carousel-context
+     */
     renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
     initialActiveItem?: number;
     onPageChange?: (newPageInfo: {
@@ -65,9 +100,11 @@ type CenteredCarouselProps = {
         shownItemIndexes: Array<number>;
     }) => void;
     dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     children?: void;
 };
-export declare const CenteredCarousel: ({ items, itemStyle, itemClassName, withBullets, renderBullets, initialActiveItem, onPageChange, dataAttributes, }: CenteredCarouselProps) => JSX.Element;
+export declare const CenteredCarousel: ({ items, itemStyle, itemClassName, withBullets, renderBullets, withControls, initialActiveItem, onPageChange, dataAttributes, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledByProp, }: CenteredCarouselProps) => JSX.Element;
 type SlideshowProps = {
     items: ReadonlyArray<React.ReactNode>;
     withBullets?: boolean;
@@ -76,6 +113,7 @@ type SlideshowProps = {
         loop?: boolean;
     };
     initialPageIndex?: number;
+    withControls?: boolean;
     onPageChange?: (newPageIndex: number) => void;
     dataAttributes?: DataAttributes;
     inverseBullets?: boolean;
@@ -84,5 +122,5 @@ type SlideshowProps = {
 export declare const useSlideshowContext: () => {
     withBullets: boolean;
 } | undefined;
-export declare const Slideshow: ({ items, withBullets, autoplay, initialPageIndex, onPageChange, dataAttributes, inverseBullets, }: SlideshowProps) => JSX.Element;
+export declare const Slideshow: ({ items, withBullets, withControls, autoplay, initialPageIndex, onPageChange, dataAttributes, inverseBullets, }: SlideshowProps) => JSX.Element;
 export {};