@toptal/picasso-list 3.0.2 → 4.0.0

package/dist-package/src/List/List.d.ts

@@ -1,16 +1,6 @@
-import type { ReactNode } from 'react';
-import type { BaseProps } from '@toptal/picasso-shared';
+/// <reference types="react" />
 import type { Props as ListItemProps } from '../ListItem';
-import type { ListItemType } from './context';
-export declare type Props = BaseProps & {
-    children: ReactNode;
-    /** The variant to use */
-    variant: 'ordered' | 'unordered';
-    /** Specifies the start value of the first list item in an ordered list */
-    start?: number;
-    /** Style for items bullet/ordinal, can be overridden on a item level */
-    styleType?: ListItemType;
-};
+import type { Props } from './types';
 export declare const List: {
     (props: Props): JSX.Element;
     defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,aAAa,CAAA;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,oBAAY,KAAK,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,yBAAyB;IACzB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB,CAAA;AAoCD,eAAO,MAAM,IAAI;YAAW,KAAK;;;;;;;;;;CA+ChC,CAAA;AAWD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/List/List.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,aAAa,CAAA;AAIzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAkCpC,eAAO,MAAM,IAAI;YAAW,KAAK;;;;;;;;;;CAiDhC,CAAA;AAWD,eAAe,IAAI,CAAA"}

package/dist-package/src/List/List.js

@@ -1,10 +1,8 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
+import React, { useMemo } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { ListItem } from '../ListItem';
-import styles from './styles';
 import { ListContextProvider, useListContext } from './context';
-const useStyles = makeStyles(styles, { name: 'PicassoList' });
+import { listStyleTypeClass, getPaddingClasses } from './styles';
 const Tags = {
     unordered: 'ul',
     ordered: 'ol',
@@ -31,8 +29,6 @@ const getDefaultType = (variant, level) => {
     }
 };
 export const List = (props) => {
-    var _a;
-    const classes = useStyles();
     const { variant, children, start = 1, className, styleType, 'data-testid': testId, } = props;
     const { level } = useListContext();
     const totalChildElements = React.Children.count(children);
@@ -47,9 +43,11 @@ export const List = (props) => {
         });
     });
     const ListTag = Tags[variant];
-    return (React.createElement(ListTag, { start: start !== 1 ? start : undefined, className: cx(classes.root, classes[variant], classes[(_a = styleType !== null && styleType !== void 0 ? styleType : getDefaultType(variant, level)) !== null && _a !== void 0 ? _a : ''], {
-            [classes.firstLevel]: level === 0,
-        }, className), "data-testid": testId },
+    const classes = useMemo(() => {
+        var _a;
+        return twMerge('text-[0.875rem] text-black mt-1', listStyleTypeClass[(_a = styleType !== null && styleType !== void 0 ? styleType : getDefaultType(variant, level)) !== null && _a !== void 0 ? _a : ''], getPaddingClasses({ variant, level }), className);
+    }, [variant, styleType, level, className]);
+    return (React.createElement(ListTag, { start: start !== 1 ? start : undefined, className: classes, "data-testid": testId },
         React.createElement(ListContextProvider, { styleType: styleType }, listItems)));
 };
 List.defaultProps = {

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

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

package/dist-package/src/List/index.d.ts

@@ -1,5 +1,5 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './List';
+import type { Props } from './types';
 export { default as List } from './List';
 export declare type ListProps = OmitInternalProps<Props>;
 export { useListContext } from './context';

package/dist-package/src/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAEnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

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

@@ -1,4 +1,8 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "circle" | "disc" | "checkmark" | "arrow" | "numeral" | "alpha" | "roman" | "root" | "unordered" | "firstLevel">;
-export default _default;
+import type { ListItemType } from './context';
+import type { Variant } from './types';
+export declare const listStyleTypeClass: Record<ListItemType, string>;
+export declare const getPaddingClasses: ({ variant, level, }: {
+    variant: Variant;
+    level: number;
+}) => "pl-4" | "pl-6";
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;yCAOrB,KAAK;AAArC,wBAeI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAQ3D,CAAA;AAED,eAAO,MAAM,iBAAiB;aAInB,OAAO;WACT,MAAM;qBACiD,CAAA"}

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

@@ -1,15 +1,11 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-import { palette } from '@toptal/picasso-utils';
-import { listStyleTypes } from '../ListItem/styles';
-export default ({ typography }) => createStyles(Object.assign({ root: {
-        fontSize: typography.fontSizes.medium,
-        color: palette.common.black,
-        marginTop: rem(4),
-        paddingLeft: rem(16),
-    }, unordered: {
-        paddingLeft: rem(24),
-    }, firstLevel: {
-        paddingLeft: rem(16),
-    } }, listStyleTypes));
+export const listStyleTypeClass = {
+    circle: 'list-[circle]',
+    disc: 'list-disc',
+    checkmark: 'list-none',
+    arrow: 'list-none',
+    numeral: 'list-decimal',
+    alpha: 'list-[lower-alpha]',
+    roman: 'list-[lower-roman]',
+};
+export const getPaddingClasses = ({ variant, level, }) => (level === 0 || variant !== 'unordered' ? 'pl-4' : 'pl-6');
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/List/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,eAAe,CAAC,EAAE,UAAU,EAAS,EAAE,EAAE,CACvC,YAAY,iBACV,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,MAAM;QACrC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAC3B,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;QACjB,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;KACrB,EACD,SAAS,EAAE;QACT,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;KACrB,EACD,UAAU,EAAE;QACV,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;KACrB,IACE,cAAc,EACjB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/List/styles.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAiC;IAC9D,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,oBAAoB;IAC3B,KAAK,EAAE,oBAAoB;CAC5B,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,OAAO,EACP,KAAK,GAIN,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,IAAI,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA"}

package/dist-package/src/List/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from '@toptal/picasso-shared';
+import type { ListItemType } from './context';
+export declare type Variant = 'ordered' | 'unordered';
+export declare type Props = BaseProps & {
+    children: ReactNode;
+    /** The variant to use */
+    variant: Variant;
+    /** Specifies the start value of the first list item in an ordered list */
+    start?: number;
+    /** Style for items bullet/ordinal, can be overridden on a item level */
+    styleType?: ListItemType;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist-package/src/List/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,oBAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;AAE7C,oBAAY,KAAK,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB,CAAA"}

package/dist-package/src/List/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist-package/src/List/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/List/types.ts"],"names":[],"mappings":""}

package/dist-package/src/ListItem/ListItem.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
 import type { BaseProps } from '@toptal/picasso-shared';
 import type { ListItemType } from '../List';
+import type { Variant } from '../List/types';
 export declare type Props = BaseProps & {
     children: ReactNode;
-    variant?: 'ordered' | 'unordered';
     index?: number;
+    variant?: Variant;
     /**
      * @deprecated [FX-4717] if you need a custom icon that is not available on the prop `type`, please contact the BASE team to add it to the theme
      **/

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAUvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,oBAAY,KAAK,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;QAEI;IACJ,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kCAAkC;IAClC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAeD,eAAO,MAAM,QAAQ;YAAW,KAAK;;CAsCpC,CAAA;AAID,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAa5C,oBAAY,KAAK,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;QAEI;IACJ,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kCAAkC;IAClC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,QAAQ;YAAW,KAAK;;CAoCpC,CAAA;AAID,eAAe,QAAQ,CAAA"}

package/dist-package/src/ListItem/ListItem.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { usePropDeprecationWarning } from '@toptal/picasso-utils';
 import { ArrowLongRight16, Check16 } from '@toptal/picasso-icons';
-import styles from './styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import { useListContext } from '../List';
-const useStyles = makeStyles(styles, { name: 'PicassoListItem' });
+import { listStyleTypeClass } from '../List/styles';
 const resolveIcon = (type) => {
     switch (type) {
         case 'checkmark':
@@ -19,20 +17,16 @@ const resolveIcon = (type) => {
     }
 };
 export const ListItem = (props) => {
-    const classes = useStyles();
     const { styleType: parentType } = useListContext();
-    const { children, variant = 'unordered', type, icon = resolveIcon(type !== null && type !== void 0 ? type : parentType), 'data-testid': testId, } = props;
+    const { children, type, icon = resolveIcon(type !== null && type !== void 0 ? type : parentType), 'data-testid': testId, } = props;
     // TODO: [FX-4717]
     usePropDeprecationWarning({
         props,
         componentName: ListItem.name,
         name: 'icon',
     });
-    return (React.createElement("li", { className: cx(classes.root, classes[variant], {
-            [classes.hasIcon]: icon != null,
-            [classes[type !== null && type !== void 0 ? type : '']]: type != null,
-        }), "data-testid": testId },
-        React.createElement(Container, { flex: true, direction: 'row', className: cx(classes.listContainer) },
+    return (React.createElement("li", { className: twJoin(icon && 'list-none -ml-[1.375rem]', type && listStyleTypeClass[type]), "data-testid": testId },
+        React.createElement(Container, { flex: true, direction: 'row', className: 'mt-1' },
             icon && (React.createElement(Container, { inline: true, justifyContent: 'flex-end' }, icon)),
             React.createElement(Typography, { as: 'div', size: 'medium', className: 'pl-2' }, children))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAexC,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,WAAW,GAAG,CAAC,IAA8B,EAAE,EAAE;IACrD,QAAQ,IAAI,EAAE;QACZ,KAAK,WAAW;YACd,OAAO,oBAAC,OAAO,OAAG,CAAA;QACpB,KAAK,OAAO;YACV,OAAO,oBAAC,gBAAgB,OAAG,CAAA;QAC7B;YACE,OAAO,SAAS,CAAA;KACnB;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAA;IAClD,MAAM,EACJ,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,EACJ,IAAI,GAAG,WAAW,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC,EACtC,aAAa,EAAE,MAAM,GACtB,GAAG,KAAK,CAAA;IAET,kBAAkB;IAClB,yBAAyB,CAAC;QACxB,KAAK;QACL,aAAa,EAAE,QAAQ,CAAC,IAAI;QAC5B,IAAI,EAAE,MAAM;KACb,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE;YAC5C,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,IAAI,IAAI,IAAI;YAC/B,CAAC,OAAO,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAC,EAAE,IAAI,IAAI,IAAI;SACpC,CAAC,iBACW,MAAM;QAEnB,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;YACjE,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,MAAM,QAAC,cAAc,EAAC,UAAU,IACxC,IAAI,CACK,CACb;YACD,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,IAChD,QAAQ,CACE,CACH,CACT,CACN,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAGnD,MAAM,WAAW,GAAG,CAAC,IAA8B,EAAE,EAAE;IACrD,QAAQ,IAAI,EAAE;QACZ,KAAK,WAAW;YACd,OAAO,oBAAC,OAAO,OAAG,CAAA;QACpB,KAAK,OAAO;YACV,OAAO,oBAAC,gBAAgB,OAAG,CAAA;QAC7B;YACE,OAAO,SAAS,CAAA;KACnB;AACH,CAAC,CAAA;AAeD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAA;IAClD,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,WAAW,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC,EACtC,aAAa,EAAE,MAAM,GACtB,GAAG,KAAK,CAAA;IAET,kBAAkB;IAClB,yBAAyB,CAAC;QACxB,KAAK;QACL,aAAa,EAAE,QAAQ,CAAC,IAAI;QAC5B,IAAI,EAAE,MAAM;KACb,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,SAAS,EAAE,MAAM,CACf,IAAI,IAAI,0BAA0B,EAClC,IAAI,IAAI,kBAAkB,CAAC,IAAI,CAAC,CACjC,iBACY,MAAM;QAEnB,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM;YAC7C,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,MAAM,QAAC,cAAc,EAAC,UAAU,IACxC,IAAI,CACK,CACb;YACD,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,IAChD,QAAQ,CACE,CACH,CACT,CACN,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-list",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "Toptal UI components library - List",
   "publishConfig": {
     "access": "public"
@@ -34,9 +34,9 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
@@ -44,7 +44,8 @@
   },
   "devDependencies": {
     "@toptal/picasso-provider": "5.0.0",
-    "@toptal/picasso-test-utils": "1.1.1"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0"
   },
   "files": [
     "dist-package/**",

package/src/List/List.tsx

@@ -1,27 +1,12 @@
-import type { ReactNode } from 'react'
-import React from 'react'
-import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
+import React, { useMemo } from 'react'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { ListItem } from '../ListItem'
 import type { Props as ListItemProps } from '../ListItem'
-import styles from './styles'
-import type { ListItemType } from './context'
 import { ListContextProvider, useListContext } from './context'
-
-export type Props = BaseProps & {
-  children: ReactNode
-  /** The variant to use */
-  variant: 'ordered' | 'unordered'
-  /** Specifies the start value of the first list item in an ordered list */
-  start?: number
-  /** Style for items bullet/ordinal, can be overridden on a item level */
-  styleType?: ListItemType
-}
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoList' })
+import { listStyleTypeClass, getPaddingClasses } from './styles'
+import type { ListItemType } from './context'
+import type { Props } from './types'
 
 const Tags = {
   unordered: 'ul',
@@ -56,7 +41,6 @@ const getDefaultType = (
 }
 
 export const List = (props: Props) => {
-  const classes = useStyles()
   const {
     variant,
     children,
@@ -83,18 +67,21 @@ export const List = (props: Props) => {
 
   const ListTag = Tags[variant]
 
+  const classes = useMemo(
+    () =>
+      twMerge(
+        'text-[0.875rem] text-black mt-1',
+        listStyleTypeClass[styleType ?? getDefaultType(variant, level) ?? ''],
+        getPaddingClasses({ variant, level }),
+        className
+      ),
+    [variant, styleType, level, className]
+  )
+
   return (
     <ListTag
       start={start !== 1 ? start : undefined}
-      className={cx(
-        classes.root,
-        classes[variant],
-        classes[styleType ?? getDefaultType(variant, level) ?? ''],
-        {
-          [classes.firstLevel]: level === 0,
-        },
-        className
-      )}
+      className={classes}
       data-testid={testId}
     >
       <ListContextProvider styleType={styleType}>

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

@@ -6,14 +6,14 @@ exports[`List renders ordered list 1`] = `
     class="Picasso-root"
   >
     <ol
-      class="PicassoList-root PicassoList-numeral PicassoList-firstLevel"
+      class="text-[0.875rem] text-black mt-1 list-decimal pl-4"
       data-testid="ordered-list"
     >
       <li
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -26,7 +26,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -39,7 +39,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -52,7 +52,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -65,7 +65,7 @@ exports[`List renders ordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -85,14 +85,14 @@ exports[`List renders unordered list 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="PicassoList-root PicassoList-unordered PicassoList-disc PicassoList-firstLevel"
+      class="text-[0.875rem] text-black mt-1 list-disc pl-4"
       data-testid="unordered-list"
     >
       <li
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -105,7 +105,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -118,7 +118,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -131,7 +131,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"
@@ -144,7 +144,7 @@ exports[`List renders unordered list 1`] = `
         class=""
       >
         <div
-          class="flex PicassoListItem-listContainer"
+          class="flex mt-1"
         >
           <div
             class="m-0 text-md text-graphite font-regular pl-2"

package/src/List/index.ts

@@ -1,6 +1,6 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props } from './List'
+import type { Props } from './types'
 
 export { default as List } from './List'
 export type ListProps = OmitInternalProps<Props>

package/src/List/styles.ts

@@ -1,23 +1,20 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-import { palette } from '@toptal/picasso-utils'
+import type { ListItemType } from './context'
+import type { Variant } from './types'
 
-import { listStyleTypes } from '../ListItem/styles'
+export const listStyleTypeClass: Record<ListItemType, string> = {
+  circle: 'list-[circle]',
+  disc: 'list-disc',
+  checkmark: 'list-none',
+  arrow: 'list-none',
+  numeral: 'list-decimal',
+  alpha: 'list-[lower-alpha]',
+  roman: 'list-[lower-roman]',
+}
 
-export default ({ typography }: Theme) =>
-  createStyles({
-    root: {
-      fontSize: typography.fontSizes.medium,
-      color: palette.common.black,
-      marginTop: rem(4),
-      paddingLeft: rem(16),
-    },
-    unordered: {
-      paddingLeft: rem(24),
-    },
-    firstLevel: {
-      paddingLeft: rem(16),
-    },
-    ...listStyleTypes,
-  })
+export const getPaddingClasses = ({
+  variant,
+  level,
+}: {
+  variant: Variant
+  level: number
+}) => (level === 0 || variant !== 'unordered' ? 'pl-4' : 'pl-6')

package/src/List/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+
+import type { ListItemType } from './context'
+
+export type Variant = 'ordered' | 'unordered'
+
+export type Props = BaseProps & {
+  children: ReactNode
+  /** The variant to use */
+  variant: Variant
+  /** Specifies the start value of the first list item in an ordered list */
+  start?: number
+  /** Style for items bullet/ordinal, can be overridden on a item level */
+  styleType?: ListItemType
+}

package/src/ListItem/ListItem.tsx

@@ -1,22 +1,32 @@
-import type { ReactNode } from 'react'
 import React from 'react'
+import type { ReactNode } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import { usePropDeprecationWarning } from '@toptal/picasso-utils'
 import { ArrowLongRight16, Check16 } from '@toptal/picasso-icons'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import type { ListItemType } from '../List'
 import { useListContext } from '../List'
+import { listStyleTypeClass } from '../List/styles'
+import type { Variant } from '../List/types'
+
+const resolveIcon = (type: ListItemType | undefined) => {
+  switch (type) {
+    case 'checkmark':
+      return <Check16 />
+    case 'arrow':
+      return <ArrowLongRight16 />
+    default:
+      return undefined
+  }
+}
 
 export type Props = BaseProps & {
   children: ReactNode
-  variant?: 'ordered' | 'unordered'
   index?: number
+  variant?: Variant
   /**
    * @deprecated [FX-4717] if you need a custom icon that is not available on the prop `type`, please contact the BASE team to add it to the theme
    **/
@@ -26,25 +36,10 @@ export type Props = BaseProps & {
   isLastElement?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoListItem' })
-
-const resolveIcon = (type: ListItemType | undefined) => {
-  switch (type) {
-    case 'checkmark':
-      return <Check16 />
-    case 'arrow':
-      return <ArrowLongRight16 />
-    default:
-      return undefined
-  }
-}
-
 export const ListItem = (props: Props) => {
-  const classes = useStyles()
   const { styleType: parentType } = useListContext()
   const {
     children,
-    variant = 'unordered',
     type,
     icon = resolveIcon(type ?? parentType),
     'data-testid': testId,
@@ -59,13 +54,13 @@ export const ListItem = (props: Props) => {
 
   return (
     <li
-      className={cx(classes.root, classes[variant], {
-        [classes.hasIcon]: icon != null,
-        [classes[type ?? '']]: type != null,
-      })}
+      className={twJoin(
+        icon && 'list-none -ml-[1.375rem]',
+        type && listStyleTypeClass[type]
+      )}
       data-testid={testId}
     >
-      <Container flex direction='row' className={cx(classes.listContainer)}>
+      <Container flex direction='row' className='mt-1'>
         {icon && (
           <Container inline justifyContent='flex-end'>
             {icon}

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

@@ -1,6 +0,0 @@
-import type { StyleRules } from '@material-ui/core/styles';
-import type { ListItemType } from '../List/context';
-export declare const listStyleTypes: StyleRules<ListItemType>;
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "circle" | "disc" | "checkmark" | "arrow" | "numeral" | "alpha" | "roman" | "listContainer" | "hasIcon">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ListItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAK1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAYnD,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAsBnD,CAAA;;AAED,wBAUI"}

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

@@ -1,42 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-import { rem } from '@toptal/picasso-shared';
-PicassoProvider.override(() => ({
-    MuiListItem: {
-        root: {
-            '&$focusVisible': {
-                backgroundColor: 'unset !important',
-            },
-        },
-    },
-}));
-export const listStyleTypes = {
-    circle: {
-        listStyleType: 'circle',
-    },
-    disc: {
-        listStyleType: 'disc',
-    },
-    checkmark: {
-        listStyleType: 'none',
-    },
-    arrow: {
-        listStyleType: 'none',
-    },
-    numeral: {
-        listStyleType: 'decimal',
-    },
-    alpha: {
-        listStyleType: 'lower-alpha',
-    },
-    roman: {
-        listStyleType: 'lower-roman',
-    },
-};
-export default () => createStyles(Object.assign({ listContainer: {
-        marginTop: rem(4),
-    }, hasIcon: {
-        listStyleType: 'none',
-        marginLeft: rem(-22),
-    } }, listStyleTypes));
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ListItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAI5C,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,WAAW,EAAE;QACX,IAAI,EAAE;YACJ,gBAAgB,EAAE;gBAChB,eAAe,EAAE,kBAAkB;aACpC;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,cAAc,GAA6B;IACtD,MAAM,EAAE;QACN,aAAa,EAAE,QAAQ;KACxB;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM;KACtB;IACD,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;KACtB;IACD,KAAK,EAAE;QACL,aAAa,EAAE,MAAM;KACtB;IACD,OAAO,EAAE;QACP,aAAa,EAAE,SAAS;KACzB;IACD,KAAK,EAAE;QACL,aAAa,EAAE,aAAa;KAC7B;IACD,KAAK,EAAE;QACL,aAAa,EAAE,aAAa;KAC7B;CACF,CAAA;AAED,eAAe,GAAG,EAAE,CAClB,YAAY,iBACV,aAAa,EAAE;QACb,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;KAClB,EACD,OAAO,EAAE;QACP,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;KACrB,IACE,cAAc,EACjB,CAAA"}

package/src/ListItem/styles.ts

@@ -1,52 +0,0 @@
-import type { StyleRules } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-import { rem } from '@toptal/picasso-shared'
-
-import type { ListItemType } from '../List/context'
-
-PicassoProvider.override(() => ({
-  MuiListItem: {
-    root: {
-      '&$focusVisible': {
-        backgroundColor: 'unset !important',
-      },
-    },
-  },
-}))
-
-export const listStyleTypes: StyleRules<ListItemType> = {
-  circle: {
-    listStyleType: 'circle',
-  },
-  disc: {
-    listStyleType: 'disc',
-  },
-  checkmark: {
-    listStyleType: 'none',
-  },
-  arrow: {
-    listStyleType: 'none',
-  },
-  numeral: {
-    listStyleType: 'decimal',
-  },
-  alpha: {
-    listStyleType: 'lower-alpha',
-  },
-  roman: {
-    listStyleType: 'lower-roman',
-  },
-}
-
-export default () =>
-  createStyles({
-    listContainer: {
-      marginTop: rem(4),
-    },
-    hasIcon: {
-      listStyleType: 'none',
-      marginLeft: rem(-22),
-    },
-    ...listStyleTypes,
-  })