@toptal/picasso-pagination 1.0.13 → 2.0.1

package/dist-package/src/Pagination/Pagination.js

@@ -36,12 +36,12 @@ export const Pagination = forwardRef(function Pagination(props, ref) {
             return (React.createElement(Container, { key: index, className: classes.ellipsis },
                 React.createElement(Typography, { size: 'xsmall', weight: 'semibold', color: 'black' }, ELLIPSIS)));
         }
-        return (React.createElement(PaginationButton, { key: index, className: classes.button, page: Number(page), activePage: activePage, disabled: disabled, onClick: onPageChange }));
+        return (React.createElement(PaginationButton, { key: index, className: '[&+&]:ml-2', page: Number(page), activePage: activePage, disabled: disabled, onClick: onPageChange }));
     });
     return (React.createElement(Container, Object.assign({}, rest, { ref: ref, flex: true, inline: true, alignItems: 'center' }),
-        React.createElement(Button, { className: classes.button, disabled: isFirstActive || disabled, onClick: handlePrevClick, variant: 'secondary', size: 'small' }, "Prev"),
+        React.createElement(Button, { className: '[&+&]:ml-2', disabled: isFirstActive || disabled, onClick: handlePrevClick, variant: 'secondary', size: 'small' }, "Prev"),
         variant === 'compact' ? null : pageButtons,
-        React.createElement(Button, { className: classes.button, disabled: isLastActive || disabled, onClick: handleNextClick, variant: 'secondary', size: 'small' }, "Next")));
+        React.createElement(Button, { className: '[&+&]:ml-2', disabled: isLastActive || disabled, onClick: handleNextClick, variant: 'secondary', size: 'small' }, "Next")));
 });
 Pagination.defaultProps = {
     disabled: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -1,10 +1,5 @@
 import { createStyles } from '@material-ui/core/styles';
 export default () => createStyles({
-    button: {
-        '&+&': {
-            marginLeft: '0.5em',
-        },
-    },
     ellipsis: {
         padding: '0 0.5em',
         cursor: 'default',

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Pagination/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,MAAM,EAAE;QACN,KAAK,EAAE;YACL,UAAU,EAAE,OAAO;SACpB;KACF;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Pagination/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,QAAQ,EAAE;QACR,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationButton.d.ts","sourceRoot":"","sources":["../../../src/PaginationButton/PaginationButton.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAY3D,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,QAAA,MAAM,gBAAgB,UAAW,KAAK,gBAkBrC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"PaginationButton.d.ts","sourceRoot":"","sources":["../../../src/PaginationButton/PaginationButton.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAI3D,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,QAAA,MAAM,gBAAgB,UAAW,KAAK,gBA0BrC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist-package/src/PaginationButton/PaginationButton.js

@@ -1,16 +1,11 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
-import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { Button } from '@toptal/picasso-button';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPaginationButton',
-});
 const PaginationButton = (props) => {
     const { page, activePage, disabled, onClick, className } = props;
-    const classes = useStyles();
     const isActive = page === activePage;
-    return (React.createElement(Button, { className: cx(classes.root, { [classes.active]: isActive }, className), "aria-current": isActive, active: isActive, disabled: disabled, onClick: () => onClick(page), variant: 'secondary', size: 'small' }, page));
+    const finalClassName = twMerge('min-w-[1.5em] px-[0.3em] ', 'active:bg-graphite-700 active:border-graphite-700 active:text-white', isActive && 'bg-graphite-700 border-graphite-700 text-white', 'disabled:text-gray-500', disabled && 'text-gray-500', className);
+    return (React.createElement(Button, { className: finalClassName, "aria-current": isActive, active: isActive, disabled: disabled, onClick: () => onClick(page), variant: 'secondary', size: 'small' }, page));
 };
 export default PaginationButton;
 //# sourceMappingURL=PaginationButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationButton.js","sourceRoot":"","sources":["../../../src/PaginationButton/PaginationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,yBAAyB;CAChC,CAAC,CAAA;AASF,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAChE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,IAAI,KAAK,UAAU,CAAA;IAEpC,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,kBACxD,QAAQ,EACtB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,IAEX,IAAI,CACE,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"PaginationButton.js","sourceRoot":"","sources":["../../../src/PaginationButton/PaginationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAS/C,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAChE,MAAM,QAAQ,GAAG,IAAI,KAAK,UAAU,CAAA;IAEpC,MAAM,cAAc,GAAG,OAAO,CAC5B,2BAA2B,EAC3B,qEAAqE,EACrE,QAAQ,IAAI,gDAAgD,EAC5D,wBAAwB,EACxB,QAAQ,IAAI,eAAe,EAC3B,SAAS,CACV,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE,cAAc,kBACX,QAAQ,EACtB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,IAEX,IAAI,CACE,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-pagination",
-  "version": "1.0.13",
+  "version": "2.0.1",
   "description": "Toptal UI components library - Pagination",
   "publishConfig": {
     "access": "public"
@@ -22,11 +22,12 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "1.0.13",
-    "@toptal/picasso-container": "1.0.2",
-    "@toptal/picasso-typography": "2.0.0",
-    "@toptal/picasso-utils": "1.0.2",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-button": "2.0.1",
+    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-typography": "2.0.1",
+    "@toptal/picasso-utils": "1.0.3",
+    "classnames": "^2.5.1",
+    "tailwind-merge": "^2.2.2"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -34,13 +35,14 @@
   ],
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0 < 19.0.0",
+    "@toptal/picasso-tailwind": "^2.5.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.0"
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",

package/src/Pagination/Pagination.tsx

@@ -75,7 +75,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
     return (
       <PaginationButton
         key={index}
-        className={classes.button}
+        className='[&+&]:ml-2'
         page={Number(page)}
         activePage={activePage}
         disabled={disabled}
@@ -87,7 +87,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
   return (
     <Container {...rest} ref={ref} flex inline alignItems='center'>
       <Button
-        className={classes.button}
+        className='[&+&]:ml-2'
         disabled={isFirstActive || disabled}
         onClick={handlePrevClick}
         variant='secondary'
@@ -99,7 +99,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
       {variant === 'compact' ? null : pageButtons}
 
       <Button
-        className={classes.button}
+        className='[&+&]:ml-2'
         disabled={isLastActive || disabled}
         onClick={handleNextClick}
         variant='secondary'

package/src/Pagination/__snapshots__/test.tsx.snap

@@ -9,26 +9,30 @@ exports[`Pagination renders 1`] = `
       class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
     >
       <button
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3 [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           Prev
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           1
         </span>
@@ -44,65 +48,75 @@ exports[`Pagination renders 1`] = `
       </div>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           3
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           4
         </span>
       </button>
       <button
         aria-current="true"
-        class="MuiButtonBase-root PicassoButton-active PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPaginationButton-active PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] shadow-none border border-solid hover:border-black visited:text-black h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           5
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           6
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           7
         </span>
@@ -118,25 +132,29 @@ exports[`Pagination renders 1`] = `
       </div>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           20
         </span>
       </button>
       <button
-        class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPagination-button"
+        aria-disabled="false"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3 [&+&]:ml-2"
         data-component-type="button"
+        role="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           Next
         </span>
@@ -155,28 +173,32 @@ exports[`Pagination renders disabled 1`] = `
       class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
     >
       <button
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           Prev
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           1
         </span>
@@ -192,70 +214,80 @@ exports[`Pagination renders disabled 1`] = `
       </div>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           3
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           4
         </span>
       </button>
       <button
         aria-current="true"
-        class="MuiButtonBase-root PicassoButton-active PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPaginationButton-active PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           5
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           6
         </span>
       </button>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           7
         </span>
@@ -271,27 +303,31 @@ exports[`Pagination renders disabled 1`] = `
       </div>
       <button
         aria-current="false"
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           20
         </span>
       </button>
       <button
-        class="MuiButtonBase-root PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPagination-button Mui-disabled"
+        aria-disabled="true"
+        class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none cursor-default pointer-events no-underline rounded-sm shadow-none border border-solid text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:ml-2"
         data-component-type="button"
         disabled=""
+        role="button"
         tabindex="-1"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
         >
           Next
         </span>

package/src/Pagination/styles.ts

@@ -2,11 +2,6 @@ import { createStyles } from '@material-ui/core/styles'
 
 export default () =>
   createStyles({
-    button: {
-      '&+&': {
-        marginLeft: '0.5em',
-      },
-    },
     ellipsis: {
       padding: '0 0.5em',
       cursor: 'default',

package/src/PaginationButton/PaginationButton.tsx

@@ -1,16 +1,8 @@
 import React from 'react'
 import type { StandardProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 import { Button } from '@toptal/picasso-button'
 
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPaginationButton',
-})
-
 export interface Props extends StandardProps {
   activePage: number
   disabled?: boolean
@@ -20,12 +12,20 @@ export interface Props extends StandardProps {
 
 const PaginationButton = (props: Props) => {
   const { page, activePage, disabled, onClick, className } = props
-  const classes = useStyles()
   const isActive = page === activePage
 
+  const finalClassName = twMerge(
+    'min-w-[1.5em] px-[0.3em] ',
+    'active:bg-graphite-700 active:border-graphite-700 active:text-white',
+    isActive && 'bg-graphite-700 border-graphite-700 text-white',
+    'disabled:text-gray-500',
+    disabled && 'text-gray-500',
+    className
+  )
+
   return (
     <Button
-      className={cx(classes.root, { [classes.active]: isActive }, className)}
+      className={finalClassName}
       aria-current={isActive}
       active={isActive}
       disabled={disabled}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PaginationButton/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;gCAQ9B,KAAK;AAA5B,wBAaI"}

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

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { createOutlineCommons, activeGroup, disabledGroup, } from '@toptal/picasso-button';
-export default (theme) => createStyles({
-    root: Object.assign(Object.assign({ minWidth: '1.5em', padding: '0 0.3em' }, createOutlineCommons(theme)), { '&:active, &$active': activeGroup(theme), '&:disabled, &$disabled': disabledGroup(theme) }),
-    active: {},
-    hovered: {},
-    disabled: {},
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PaginationButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,aAAa,GACd,MAAM,wBAAwB,CAAA;AAE/B,eAAe,CAAC,KAAY,EAAE,EAAE,CAC9B,YAAY,CAAC;IACX,IAAI,gCACF,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,SAAS,IAEf,oBAAoB,CAAC,KAAK,CAAC,KAC9B,oBAAoB,EAAE,WAAW,CAAC,KAAK,CAAC,EACxC,wBAAwB,EAAE,aAAa,CAAC,KAAK,CAAC,GAC/C;IACD,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}

package/src/PaginationButton/styles.ts

@@ -1,22 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import {
-  createOutlineCommons,
-  activeGroup,
-  disabledGroup,
-} from '@toptal/picasso-button'
-
-export default (theme: Theme) =>
-  createStyles({
-    root: {
-      minWidth: '1.5em',
-      padding: '0 0.3em',
-
-      ...createOutlineCommons(theme),
-      '&:active, &$active': activeGroup(theme),
-      '&:disabled, &$disabled': disabledGroup(theme),
-    },
-    active: {},
-    hovered: {},
-    disabled: {},
-  })