@toptal/picasso-carousel 2.0.1 → 3.0.0

package/dist-package/src/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAID,eAAO,MAAM,QAAQ;oIAYlB,KAAK;;;;;;;;;;;CAiDP,CAAA;AAcD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAQvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAID,eAAO,MAAM,QAAQ;oIAYlB,KAAK;;;;;;;;;;;CA+CP,CAAA;AAcD,eAAe,QAAQ,CAAA"}

package/dist-package/src/Carousel/Carousel.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import 'glider-js/glider.css';
 import { Container } from '@toptal/picasso-container';
-import styles from './styles';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { CarouselGradient } from '../CarouselGradient';
 import useCarousel from './hooks/useCarousel';
 import { CarouselNavigation } from '../CarouselNavigation';
-const useStyles = makeStyles(styles, { name: 'Carousel' });
 const testIdsDefault = {};
 export const Carousel = ({ autoplay = false, autoplayDelay = 3000, className, children, hasArrows = false, hasDots = false, onSlide, rewind = false, slidesToScroll = 1, slidesToShow = 1, testIds = testIdsDefault, }) => {
     const { isLastPage, getContainerProps, getCarouselProps, getDotsProps, getNextProps, getPrevProps, } = useCarousel({
@@ -20,9 +17,8 @@ export const Carousel = ({ autoplay = false, autoplayDelay = 3000, className, ch
         slidesCount: React.Children.count(children),
         hasDots,
     });
-    const classes = useStyles();
-    return (React.createElement(Container, Object.assign({ className: cx(classes.root, className), "data-testid": testIds.root }, getContainerProps()),
-        React.createElement(Container, { className: classes.container },
+    return (React.createElement(Container, Object.assign({ className: twMerge('[&_.glider-slide]:min-w-[100px]', className), "data-testid": testIds.root }, getContainerProps()),
+        React.createElement(Container, { className: 'relative' },
             React.createElement(Container, Object.assign({}, getCarouselProps(), { "data-testid": testIds.carousel }), children),
             !Number.isInteger(slidesToShow) && (React.createElement(CarouselGradient, { slidesToShow: slidesToShow, isLastPage: isLastPage }))),
         React.createElement(CarouselNavigation, { hasArrows: hasArrows, hasDots: hasDots, getDotsProps: getDotsProps, getPrevProps: getPrevProps, getNextProps: getNextProps, testIds: testIds })));

package/dist-package/src/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAA;AAwDjE,MAAM,cAAc,GAAG,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,CAAC,EAClB,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,cAAc,GAClB,EAAE,EAAE;IACV,MAAM,EACJ,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,GAAG,WAAW,CAAC;QACd,QAAQ;QACR,aAAa;QACb,OAAO;QACP,MAAM;QACN,cAAc;QACd,YAAY;QACZ,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC3C,OAAO;KACR,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,iBACzB,OAAO,CAAC,IAAI,IACrB,iBAAiB,EAAE;QAEvB,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS;YACrC,oBAAC,SAAS,oBAAK,gBAAgB,EAAE,mBAAe,OAAO,CAAC,QAAQ,KAC7D,QAAQ,CACC;YACX,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAClC,oBAAC,gBAAgB,IACf,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,CACS;QAEZ,oBAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,GAChB,CACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACtB,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAwD1D,MAAM,cAAc,GAAG,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,CAAC,EAClB,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,cAAc,GAClB,EAAE,EAAE;IACV,MAAM,EACJ,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,GAAG,WAAW,CAAC;QACd,QAAQ;QACR,aAAa;QACb,OAAO;QACP,MAAM;QACN,cAAc;QACd,YAAY;QACZ,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC3C,OAAO;KACR,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,CAAC,iCAAiC,EAAE,SAAS,CAAC,iBACnD,OAAO,CAAC,IAAI,IACrB,iBAAiB,EAAE;QAEvB,oBAAC,SAAS,IAAC,SAAS,EAAC,UAAU;YAC7B,oBAAC,SAAS,oBAAK,gBAAgB,EAAE,mBAAe,OAAO,CAAC,QAAQ,KAC7D,QAAQ,CACC;YACX,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAClC,oBAAC,gBAAgB,IACf,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,CACS;QAEZ,oBAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,GAChB,CACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACtB,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}

package/dist-package/src/CarouselGradient/CarouselGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselGradient.d.ts","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAUtC,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;;AA0BD,wBAA2C"}
+{"version":3,"file":"CarouselGradient.d.ts","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;;AA0BD,wBAA2C"}

package/dist-package/src/CarouselGradient/CarouselGradient.js

@@ -1,11 +1,7 @@
 import React, { useMemo } from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import gradientWidth from './utils/gradient-width';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'CarouselGradient' });
 const CarouselGradient = ({ isLastPage, slidesToShow }) => {
-    const classes = useStyles();
     const showNextGradient = !isLastPage;
     const showPrevGradient = isLastPage;
     const gradientStyle = useMemo(() => {
@@ -13,11 +9,9 @@ const CarouselGradient = ({ isLastPage, slidesToShow }) => {
             width: gradientWidth(slidesToShow),
         };
     }, [slidesToShow]);
-    return (React.createElement("div", { style: gradientStyle, className: cx({
-            [classes.gradient]: showNextGradient || showPrevGradient,
-            [classes.nextGradient]: showNextGradient,
-            [classes.prevGradient]: showPrevGradient,
-        }) }));
+    return (React.createElement("div", { style: gradientStyle, className: twMerge((showNextGradient || showPrevGradient) && 'absolute h-full top-0', showNextGradient &&
+            'right-0 bg-gradient-to-r from-white/20 to-white to-95%', showPrevGradient &&
+            'left-0 bg-gradient-to-r from-white from-5% to-white/20') }));
 };
 export default React.memo(CarouselGradient);
 //# sourceMappingURL=CarouselGradient.js.map

package/dist-package/src/CarouselGradient/CarouselGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselGradient.js","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,aAAa,MAAM,wBAAwB,CAAA;AAClD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAOzE,MAAM,gBAAgB,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAS,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,gBAAgB,GAAG,CAAC,UAAU,CAAA;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAA;IAEnC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC;SACnC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BACE,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,gBAAgB,IAAI,gBAAgB;YACxD,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,gBAAgB;YACxC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,gBAAgB;SACzC,CAAC,GACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA"}
+{"version":3,"file":"CarouselGradient.js","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,aAAa,MAAM,wBAAwB,CAAA;AAOlD,MAAM,gBAAgB,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAS,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,CAAC,UAAU,CAAA;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAA;IAEnC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC;SACnC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BACE,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,OAAO,CAChB,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,uBAAuB,EACjE,gBAAgB;YACd,wDAAwD,EAC1D,gBAAgB;YACd,wDAAwD,CAC3D,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA"}

package/dist-package/src/CarouselNavigation/CarouselNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselNavigation.d.ts","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AAyBnC,aAAK,KAAK,GAAG;IACX,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,OAAO,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;;AAsDD,wBAAuC"}
+{"version":3,"file":"CarouselNavigation.d.ts","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AAmBnC,aAAK,KAAK,GAAG;IACX,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,OAAO,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;;AAiED,wBAAuC"}

package/dist-package/src/CarouselNavigation/CarouselNavigation.js

@@ -1,9 +1,7 @@
 import React, { memo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Container } from '@toptal/picasso-container';
 import { ChevronRight24 } from '@toptal/picasso-icons';
-import styles from './styles';
 const getJustifyContent = (hasArrows, hasDots) => {
     if (hasArrows && hasDots) {
         return 'space-between';
@@ -15,10 +13,8 @@ const getJustifyContent = (hasArrows, hasDots) => {
         return 'center';
     }
 };
-const useStyles = makeStyles(styles, { name: 'CarouselNavigation' });
 const CarouselNavigation = ({ getDotsProps, getNextProps, getPrevProps, hasArrows, hasDots, testIds, }) => {
-    const classes = useStyles();
-    return (React.createElement(Container, { className: classes.navigation, flex: true, justifyContent: getJustifyContent(hasArrows, hasDots), "data-testid": testIds.navigation },
+    return (React.createElement(Container, { className: 'pt-[14px] px-6 pb-0', flex: true, justifyContent: getJustifyContent(hasArrows, hasDots), "data-testid": testIds.navigation },
         hasDots && (
         /*
          default slider css ads margin: 0 auto; to the dots container
@@ -26,9 +22,22 @@ const CarouselNavigation = ({ getDotsProps, getNextProps, getPrevProps, hasArrow
          Could be removed when we migrate all styles to TailwindCSS
         */
         React.createElement("div", null,
-            React.createElement("div", Object.assign({}, getDotsProps(), { "data-testid": testIds.dots, className: classes.dots })))),
+            React.createElement("div", Object.assign({}, getDotsProps(), { "data-testid": testIds.dots, className: `
+              [&_.glider-dot]:w-[10px]
+              [&_.glider-dot]:h-[10px]
+              [&_.glider-dot]:bg-blue-500
+              [&_.glider-dot]:opacity-20
+
+              [&_.glider-dot.active]:bg-blue-500 [&_.glider-dot.active]:opacity-100
+
+              [&_.glider-dot:not(.active):hover]:opacity-100
+              [&_.glider-dot:not(.active):hover]:shadow-[0_0_0_2px_rgba(32,78,207,0.2)]
+              [&_.glider-dot:not(.active):hover]:transition-[box-shadow,opacity]
+              [&_.glider-dot:not(.active):hover]:duration-300
+              [&_.glider-dot:not(.active):hover]:ease-out
+            ` })))),
         hasArrows && (React.createElement(Container, { "data-testid": testIds.arrows },
-            React.createElement(ButtonCircular, Object.assign({ className: classes.arrowPrev, "data-testid": testIds.prev, icon: React.createElement(ChevronRight24, null), variant: 'flat' }, getPrevProps())),
+            React.createElement(ButtonCircular, Object.assign({ className: 'rotate-180', "data-testid": testIds.prev, icon: React.createElement(ChevronRight24, null), variant: 'flat' }, getPrevProps())),
             React.createElement(ButtonCircular, Object.assign({ "data-testid": testIds.next, icon: React.createElement(ChevronRight24, null), variant: 'flat' }, getNextProps()))))));
 };
 export default memo(CarouselNavigation);

package/dist-package/src/CarouselNavigation/CarouselNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselNavigation.js","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,iBAAiB,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE;IACjE,IAAI,SAAS,IAAI,OAAO,EAAE;QACxB,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,SAAS,EAAE;QACb,OAAO,UAAU,CAAA;KAClB;IAED,IAAI,OAAO,EAAE;QACX,OAAO,QAAQ,CAAA;KAChB;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,CAAA;AAiB3E,MAAM,kBAAkB,GAAG,CAAC,EAC1B,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,GACD,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,IAAI,QACJ,cAAc,EAAE,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,iBACxC,OAAO,CAAC,UAAU;QAE9B,OAAO,IAAI;QACV;;;;UAIE;QACF;YACE,6CACM,YAAY,EAAE,mBACL,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,OAAO,CAAC,IAAI,IACvB,CACE,CACP;QACA,SAAS,IAAI,CACZ,oBAAC,SAAS,mBAAc,OAAO,CAAC,MAAM;YACpC,oBAAC,cAAc,kBACb,SAAS,EAAE,OAAO,CAAC,SAAS,iBACf,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB;YACF,oBAAC,cAAc,iCACA,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB,CACQ,CACb,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,kBAAkB,CAAC,CAAA"}
+{"version":3,"file":"CarouselNavigation.js","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,iBAAiB,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE;IACjE,IAAI,SAAS,IAAI,OAAO,EAAE;QACxB,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,SAAS,EAAE;QACb,OAAO,UAAU,CAAA;KAClB;IAED,IAAI,OAAO,EAAE;QACX,OAAO,QAAQ,CAAA;KAChB;AACH,CAAC,CAAA;AAiBD,MAAM,kBAAkB,GAAG,CAAC,EAC1B,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,GACD,EAAE,EAAE;IACV,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAC,qBAAqB,EAC/B,IAAI,QACJ,cAAc,EAAE,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,iBACxC,OAAO,CAAC,UAAU;QAE9B,OAAO,IAAI;QACV;;;;UAIE;QACF;YACE,6CACM,YAAY,EAAE,mBACL,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE;;;;;;;;;;;;;aAaV,IACD,CACE,CACP;QACA,SAAS,IAAI,CACZ,oBAAC,SAAS,mBAAc,OAAO,CAAC,MAAM;YACpC,oBAAC,cAAc,kBACb,SAAS,EAAC,YAAY,iBACT,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB;YACF,oBAAC,cAAc,iCACA,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB,CACQ,CACb,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,kBAAkB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-carousel",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Toptal UI components library - Carousel",
   "publishConfig": {
     "access": "public"
@@ -27,16 +27,18 @@
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1",
     "glider-js": "^1.7.8"
   },
+  "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0"
+  },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.2.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

package/src/Carousel/Carousel.tsx

@@ -1,19 +1,14 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import 'glider-js/glider.css'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { CarouselGradient } from '../CarouselGradient'
 import useCarousel from './hooks/useCarousel'
 import { CarouselNavigation } from '../CarouselNavigation'
 
-const useStyles = makeStyles<Theme>(styles, { name: 'Carousel' })
-
 export interface Props extends BaseProps {
   /**
    * Slide automatically to next slides
@@ -101,15 +96,13 @@ export const Carousel = ({
     hasDots,
   })
 
-  const classes = useStyles()
-
   return (
     <Container
-      className={cx(classes.root, className)}
+      className={twMerge('[&_.glider-slide]:min-w-[100px]', className)}
       data-testid={testIds.root}
       {...getContainerProps()}
     >
-      <Container className={classes.container}>
+      <Container className='relative'>
         <Container {...getCarouselProps()} data-testid={testIds.carousel}>
           {children}
         </Container>

package/src/CarouselGradient/CarouselGradient.tsx

@@ -1,12 +1,7 @@
 import React, { useMemo } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import gradientWidth from './utils/gradient-width'
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, { name: 'CarouselGradient' })
 
 type Props = {
   slidesToShow: number
@@ -14,8 +9,6 @@ type Props = {
 }
 
 const CarouselGradient = ({ isLastPage, slidesToShow }: Props) => {
-  const classes = useStyles()
-
   const showNextGradient = !isLastPage
   const showPrevGradient = isLastPage
 
@@ -28,11 +21,13 @@ const CarouselGradient = ({ isLastPage, slidesToShow }: Props) => {
   return (
     <div
       style={gradientStyle}
-      className={cx({
-        [classes.gradient]: showNextGradient || showPrevGradient,
-        [classes.nextGradient]: showNextGradient,
-        [classes.prevGradient]: showPrevGradient,
-      })}
+      className={twMerge(
+        (showNextGradient || showPrevGradient) && 'absolute h-full top-0',
+        showNextGradient &&
+          'right-0 bg-gradient-to-r from-white/20 to-white to-95%',
+        showPrevGradient &&
+          'left-0 bg-gradient-to-r from-white from-5% to-white/20'
+      )}
     />
   )
 }

package/src/CarouselNavigation/CarouselNavigation.tsx

@@ -1,12 +1,8 @@
 import React, { memo } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
 import { ChevronRight24 } from '@toptal/picasso-icons'
 
-import styles from './styles'
-
 const getJustifyContent = (hasArrows: boolean, hasDots: boolean) => {
   if (hasArrows && hasDots) {
     return 'space-between'
@@ -21,8 +17,6 @@ const getJustifyContent = (hasArrows: boolean, hasDots: boolean) => {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'CarouselNavigation' })
-
 type Props = {
   hasArrows: boolean
   hasDots: boolean
@@ -46,11 +40,9 @@ const CarouselNavigation = ({
   hasDots,
   testIds,
 }: Props) => {
-  const classes = useStyles()
-
   return (
     <Container
-      className={classes.navigation}
+      className='pt-[14px] px-6 pb-0'
       flex
       justifyContent={getJustifyContent(hasArrows, hasDots)}
       data-testid={testIds.navigation}
@@ -65,14 +57,27 @@ const CarouselNavigation = ({
           <div
             {...getDotsProps()}
             data-testid={testIds.dots}
-            className={classes.dots}
+            className={`
+              [&_.glider-dot]:w-[10px]
+              [&_.glider-dot]:h-[10px]
+              [&_.glider-dot]:bg-blue-500
+              [&_.glider-dot]:opacity-20
+
+              [&_.glider-dot.active]:bg-blue-500 [&_.glider-dot.active]:opacity-100
+
+              [&_.glider-dot:not(.active):hover]:opacity-100
+              [&_.glider-dot:not(.active):hover]:shadow-[0_0_0_2px_rgba(32,78,207,0.2)]
+              [&_.glider-dot:not(.active):hover]:transition-[box-shadow,opacity]
+              [&_.glider-dot:not(.active):hover]:duration-300
+              [&_.glider-dot:not(.active):hover]:ease-out
+            `}
           />
         </div>
       )}
       {hasArrows && (
         <Container data-testid={testIds.arrows}>
           <ButtonCircular
-            className={classes.arrowPrev}
+            className='rotate-180'
             data-testid={testIds.prev}
             icon={<ChevronRight24 />}
             variant='flat'

package/dist-package/src/Carousel/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "container">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Carousel/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Carousel/styles.ts"],"names":[],"mappings":";AAEA,wBASI"}

package/dist-package/src/Carousel/styles.js

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        '& .glider-slide': {
-            minWidth: '100px',
-        },
-    },
-    // important for gradient component to be on top of carousel
-    container: { position: 'relative' },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Carousel/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Carousel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,iBAAiB,EAAE;YACjB,QAAQ,EAAE,OAAO;SAClB;KACF;IACD,4DAA4D;IAC5D,SAAS,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;CACpC,CAAC,CAAA"}

package/dist-package/src/CarouselGradient/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "gradient" | "nextGradient" | "prevGradient">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/CarouselGradient/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CarouselGradient/styles.ts"],"names":[],"mappings":";AAEA,wBAiBI"}

package/dist-package/src/CarouselGradient/styles.js

@@ -1,17 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    gradient: {
-        position: 'absolute',
-        height: '100%',
-        top: 0,
-    },
-    nextGradient: {
-        right: 0,
-        background: 'linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, white 95%)',
-    },
-    prevGradient: {
-        left: 0,
-        background: 'linear-gradient(90deg, white 5%, rgba(255, 255, 255, 0.2) 100%)',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/CarouselGradient/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/CarouselGradient/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,QAAQ,EAAE;QACR,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,CAAC;KACP;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,UAAU,EACR,gEAAgE;KACnE;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,CAAC;QACP,UAAU,EACR,iEAAiE;KACpE;CACF,CAAC,CAAA"}

package/dist-package/src/CarouselNavigation/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "dots" | "arrowPrev" | "navigation">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/CarouselNavigation/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CarouselNavigation/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;mDAGX,KAAK;AAA/C,wBAyBI"}

package/dist-package/src/CarouselNavigation/styles.js

@@ -1,28 +0,0 @@
-import { rem } from '@toptal/picasso-shared';
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, transitions }) => createStyles({
-    arrowPrev: {
-        transform: 'rotate(180deg)',
-    },
-    dots: {
-        '& .glider-dot': {
-            width: 10,
-            height: 10,
-            backgroundColor: palette.blue.main,
-            opacity: 0.2,
-            '&.active': {
-                backgroundColor: palette.blue.main,
-                opacity: 1,
-            },
-            '&:hover:not(.active)': {
-                transition: `box-shadow, opacity ${transitions.duration.standard}ms ${transitions.easing.easeOut}`,
-                opacity: 1,
-                boxShadow: '0 0 0 2px rgba(32, 78, 207, 0.2)',
-            },
-        },
-    },
-    navigation: {
-        padding: `${rem('14px')} 1.5rem 0`,
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/CarouselNavigation/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/CarouselNavigation/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjD,YAAY,CAAC;IACX,SAAS,EAAE;QACT,SAAS,EAAE,gBAAgB;KAC5B;IACD,IAAI,EAAE;QACJ,eAAe,EAAE;YACf,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,OAAO,EAAE,GAAG;YACZ,UAAU,EAAE;gBACV,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBAClC,OAAO,EAAE,CAAC;aACX;YACD,sBAAsB,EAAE;gBACtB,UAAU,EAAE,uBAAuB,WAAW,CAAC,QAAQ,CAAC,QAAQ,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClG,OAAO,EAAE,CAAC;gBACV,SAAS,EAAE,kCAAkC;aAC9C;SACF;KACF;IACD,UAAU,EAAE;QACV,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW;KACnC;CACF,CAAC,CAAA"}

package/src/Carousel/styles.ts

@@ -1,12 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      '& .glider-slide': {
-        minWidth: '100px',
-      },
-    },
-    // important for gradient component to be on top of carousel
-    container: { position: 'relative' },
-  })

package/src/CarouselGradient/styles.ts

@@ -1,20 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    gradient: {
-      position: 'absolute',
-      height: '100%',
-      top: 0,
-    },
-    nextGradient: {
-      right: 0,
-      background:
-        'linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, white 95%)',
-    },
-    prevGradient: {
-      left: 0,
-      background:
-        'linear-gradient(90deg, white 5%, rgba(255, 255, 255, 0.2) 100%)',
-    },
-  })

package/src/CarouselNavigation/styles.ts

@@ -1,30 +0,0 @@
-import { rem } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette, transitions }: Theme) =>
-  createStyles({
-    arrowPrev: {
-      transform: 'rotate(180deg)',
-    },
-    dots: {
-      '& .glider-dot': {
-        width: 10,
-        height: 10,
-        backgroundColor: palette.blue.main,
-        opacity: 0.2,
-        '&.active': {
-          backgroundColor: palette.blue.main,
-          opacity: 1,
-        },
-        '&:hover:not(.active)': {
-          transition: `box-shadow, opacity ${transitions.duration.standard}ms ${transitions.easing.easeOut}`,
-          opacity: 1,
-          boxShadow: '0 0 0 2px rgba(32, 78, 207, 0.2)',
-        },
-      },
-    },
-    navigation: {
-      padding: `${rem('14px')} 1.5rem 0`,
-    },
-  })