@toptal/picasso-rich-text-editor 13.0.16 → 14.0.1

package/dist-package/src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.d.ts

@@ -1,4 +1,4 @@
-import type { TypographyOptions } from '@toptal/picasso-typography';
+import type { TypographyOptions } from '../../../utils';
 declare const useTypographyClasses: (options: TypographyOptions) => string;
 export default useTypographyClasses;
 //# sourceMappingURL=use-typography-classes.d.ts.map

package/dist-package/src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-typography-classes.d.ts","sourceRoot":"","sources":["../../../../../src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAMnE,QAAA,MAAM,oBAAoB,YAAa,iBAAiB,KAAG,MAI1D,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"use-typography-classes.d.ts","sourceRoot":"","sources":["../../../../../src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAOvD,QAAA,MAAM,oBAAoB,YAAa,iBAAiB,KAAG,MAI1D,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist-package/src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
-import { typographyStyles, getTypographyClassName, } from '@toptal/picasso-typography';
+import { typographyStyles, getTypographyClassName } from '../../../utils';
 const useCreateTypographyClasses = makeStyles(typographyStyles, {
     name: 'TextEditorTypography',
 });

package/dist-package/src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-typography-classes.js","sourceRoot":"","sources":["../../../../../src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,4BAA4B,CAAA;AAGnC,MAAM,0BAA0B,GAAG,UAAU,CAAQ,gBAAgB,EAAE;IACrE,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAAU,EAAE;IAClE,MAAM,OAAO,GAAG,0BAA0B,EAAE,CAAA;IAE5C,OAAO,sBAAsB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACjD,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"use-typography-classes.js","sourceRoot":"","sources":["../../../../../src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAEzE,MAAM,0BAA0B,GAAG,UAAU,CAAQ,gBAAgB,EAAE;IACrE,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAAU,EAAE;IAClE,MAAM,OAAO,GAAG,0BAA0B,EAAE,CAAA;IAE5C,OAAO,sBAAsB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACjD,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist-package/src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.d.ts

@@ -1,4 +1,4 @@
-import type { TypographyOptions } from '@toptal/picasso-typography';
+import type { TypographyOptions } from '../../../utils';
 declare const useTypographyClasses: (options: TypographyOptions) => string;
 export default useTypographyClasses;
 //# sourceMappingURL=use-typography-classes.d.ts.map

package/dist-package/src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-typography-classes.d.ts","sourceRoot":"","sources":["../../../../../src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAMnE,QAAA,MAAM,oBAAoB,YAAa,iBAAiB,KAAG,MAI1D,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"use-typography-classes.d.ts","sourceRoot":"","sources":["../../../../../src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAOvD,QAAA,MAAM,oBAAoB,YAAa,iBAAiB,KAAG,MAI1D,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist-package/src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core';
-import { typographyStyles, getTypographyClassName, } from '@toptal/picasso-typography';
+import { typographyStyles, getTypographyClassName } from '../../../utils';
 const useCreateTypographyClasses = makeStyles(typographyStyles, {
     name: 'TextEditorTypography',
 });

package/dist-package/src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-typography-classes.js","sourceRoot":"","sources":["../../../../../src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EACL,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,4BAA4B,CAAA;AAGnC,MAAM,0BAA0B,GAAG,UAAU,CAAQ,gBAAgB,EAAE;IACrE,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAAU,EAAE;IAClE,MAAM,OAAO,GAAG,0BAA0B,EAAE,CAAA;IAE5C,OAAO,sBAAsB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACjD,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"use-typography-classes.js","sourceRoot":"","sources":["../../../../../src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAEzE,MAAM,0BAA0B,GAAG,UAAU,CAAQ,gBAAgB,EAAE;IACrE,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAAU,EAAE;IAClE,MAAM,OAAO,GAAG,0BAA0B,EAAE,CAAA;IAE5C,OAAO,sBAAsB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACjD,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist-package/src/RichTextEditorButton/RichTextEditorButton.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { ButtonCircular } from '@toptal/picasso-button';
 const RichTextEditorButton = (props) => {
     const { icon, onClick, active, className, style, disabled } = props, rest = __rest(props, ["icon", "onClick", "active", "className", "style", "disabled"]);

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorButton.js","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAtE,+DAA8D,CAAQ,CAAA;IAE5E,OAAO,CACL,oBAAC,cAAc,kBACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,MAAM,IAAI,gDAAgD,EAC1D,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,oBAAoB,CAAC,YAAY,GAAG;IAClC,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"RichTextEditorButton.js","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAtE,+DAA8D,CAAQ,CAAA;IAE5E,OAAO,CACL,oBAAC,cAAc,kBACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,MAAM,IAAI,gDAAgD,EAC1D,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,oBAAoB,CAAC,YAAY,GAAG;IAClC,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditorToolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBA8BI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditorToolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBA+BI"}

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

@@ -21,7 +21,8 @@ export default ({ palette }) => createStyles({
         },
     },
     select: {
-        width: '7.125em',
+        // XXX: Using important to override Tailwind styles, remove when migrating RTE to Tailwind
+        width: '7.125em !important',
     },
     groupDisabled: {
         pointerEvents: 'none',

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RichTextEditorToolbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAChD,aAAa,EAAE,OAAO;KACvB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,OAAO;QAEtB,uCAAuC,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,OAAO;YACnB,WAAW,EAAE,OAAO;YACpB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;SACvC;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IAED,aAAa,EAAE;QACb,aAAa,EAAE,MAAM;KACtB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RichTextEditorToolbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAChD,aAAa,EAAE,OAAO;KACvB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,OAAO;QAEtB,uCAAuC,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,OAAO;YACnB,WAAW,EAAE,OAAO;YACpB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;SACvC;KACF;IACD,MAAM,EAAE;QACN,0FAA0F;QAC1F,KAAK,EAAE,oBAAoB;KAC5B;IAED,aAAa,EAAE;QACb,aAAa,EAAE,MAAM;KACtB;CACF,CAAC,CAAA"}

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

@@ -1,3 +1,5 @@
 export { default as htmlToHast, hastSanitizeSchema } from './html-to-hast';
 export { default as isCustomEmoji } from './is-custom-emoji';
+export * from './typography/typographyStyles';
+export * from './typography/get-typography-classnames';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAE5D,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wCAAwC,CAAA"}

package/dist-package/src/utils/index.js

@@ -1,3 +1,5 @@
 export { default as htmlToHast, hastSanitizeSchema } from './html-to-hast';
 export { default as isCustomEmoji } from './is-custom-emoji';
+export * from './typography/typographyStyles';
+export * from './typography/get-typography-classnames';
 //# sourceMappingURL=index.js.map

package/dist-package/src/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAE5D,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wCAAwC,CAAA"}

package/dist-package/src/utils/typography/get-typography-classnames.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { SizeType, ColorType } from '@toptal/picasso-shared';
+export declare type TypographyOptions = {
+    variant: 'heading' | 'body';
+    size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'> | 'inherit';
+    color?: ColorType;
+    weight?: 'regular' | 'semibold' | 'inherit';
+    underline?: 'solid' | 'dashed';
+    invert?: boolean;
+    lineThrough?: boolean;
+    as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+};
+export declare const getTypographyClassName: (classes: Record<string, string>, { variant, size, color, weight, underline, invert, lineThrough, as, }: TypographyOptions) => string;
+//# sourceMappingURL=get-typography-classnames.d.ts.map

package/dist-package/src/utils/typography/get-typography-classnames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-typography-classnames.d.ts","sourceRoot":"","sources":["../../../../src/utils/typography/get-typography-classnames.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGjE,oBAAY,iBAAiB,GAAG;IAC9B,OAAO,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,IAAI,EACA,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GACxE,SAAS,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,sBAAsB,YACxB,OAAO,MAAM,EAAE,MAAM,CAAC,yEAU5B,iBAAiB,WAuBrB,CAAA"}

package/dist-package/src/utils/typography/get-typography-classnames.js

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import { kebabToCamelCase } from '@toptal/picasso-utils';
+export const getTypographyClassName = (classes, { variant, size, color, weight, underline, invert, lineThrough, as, }) => {
+    const variantClassName = kebabToCamelCase(`${variant}-${size}`);
+    const colorClassName = kebabToCamelCase(`${color}`);
+    const weightVariantClass = weight ? classes[weight] : undefined;
+    const weightClass = weight === 'inherit' || as === 'em'
+        ? classes.inheritWeight
+        : weightVariantClass;
+    const underlineClass = underline ? classes[underline] : undefined;
+    return cx(classes[variantClassName], classes[colorClassName], weightClass, underlineClass, {
+        [classes.invert]: invert,
+        [classes.lineThrough]: lineThrough,
+    });
+};
+//# sourceMappingURL=get-typography-classnames.js.map

package/dist-package/src/utils/typography/get-typography-classnames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-typography-classnames.js","sourceRoot":"","sources":["../../../../src/utils/typography/get-typography-classnames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAexD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,OAA+B,EAC/B,EACE,OAAO,EACP,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,WAAW,EACX,EAAE,GACgB,EACpB,EAAE;IACF,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,OAAO,IAAI,IAAI,EAAE,CAAC,CAAA;IAC/D,MAAM,cAAc,GAAG,gBAAgB,CAAC,GAAG,KAAK,EAAE,CAAC,CAAA;IAEnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/D,MAAM,WAAW,GACf,MAAM,KAAK,SAAS,IAAI,EAAE,KAAK,IAAI;QACjC,CAAC,CAAC,OAAO,CAAC,aAAa;QACvB,CAAC,CAAC,kBAAkB,CAAA;IAExB,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEjE,OAAO,EAAE,CACP,OAAO,CAAC,gBAAgB,CAAC,EACzB,OAAO,CAAC,cAAc,CAAC,EACvB,WAAW,EACX,cAAc,EACd;QACE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;QACxB,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,WAAW;KACnC,CACF,CAAA;AACH,CAAC,CAAA"}

package/dist-package/src/utils/typography/typographyStyles.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from '@material-ui/core/styles';
+export declare const typographyStyles: (theme: Theme) => import("@material-ui/styles").StyleRules<{}, "inherit" | "black" | "blue" | "green" | "grey" | "red" | "yellow" | "dashed" | "solid" | "invert" | "bodyXxsmall" | "bodyXsmall" | "bodySmall" | "bodyMedium" | "bodyLarge" | "bodyInherit" | "headingMedium" | "regular" | "semibold" | "inheritWeight" | "lightGrey" | "greyMain-2" | "darkGrey" | "lightBlue" | "lineThrough">;
+//# sourceMappingURL=typographyStyles.d.ts.map

package/dist-package/src/utils/typography/typographyStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/typography/typographyStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAUrD,eAAO,MAAM,gBAAgB,UAAW,KAAK,oXAuG5C,CAAA"}

package/dist-package/src/utils/typography/typographyStyles.js

@@ -0,0 +1,107 @@
+import { createStyles } from '@material-ui/core/styles';
+const getHeadingMedium = (theme) => ({
+    color: theme.palette.common.black,
+    fontWeight: theme.typography.fontWeights.semibold,
+    fontSize: '16px',
+    lineHeight: '24px',
+});
+export const typographyStyles = (theme) => {
+    const { palette, typography } = theme;
+    // All the body variants are mapped to the same MUI variant (body1) -> declaring styles via custom class names
+    return createStyles({
+        bodyXxsmall: {
+            color: palette.text.primary,
+            fontWeight: typography.fontWeights.regular,
+            fontSize: typography.fontSizes.xxsmall,
+            lineHeight: '16px',
+        },
+        bodyXsmall: {
+            color: palette.text.primary,
+            fontWeight: typography.fontWeights.regular,
+            fontSize: typography.fontSizes.xsmall,
+            lineHeight: '18px',
+        },
+        bodySmall: {
+            color: palette.text.primary,
+            fontWeight: typography.fontWeights.regular,
+            fontSize: typography.fontSizes.small,
+            lineHeight: '20px',
+        },
+        bodyMedium: {
+            color: palette.text.primary,
+            fontWeight: typography.fontWeights.regular,
+            fontSize: typography.fontSizes.medium,
+            lineHeight: '22px',
+        },
+        bodyLarge: {
+            color: palette.common.black,
+            fontWeight: typography.fontWeights.regular,
+            fontSize: typography.fontSizes.large,
+            lineHeight: '24px',
+        },
+        bodyInherit: {
+            fontSize: '1em',
+            lineHeight: '1.5em',
+            fontWeight: typography.fontWeights.regular,
+            color: palette.text.primary,
+        },
+        headingMedium: getHeadingMedium(theme),
+        regular: {
+            fontWeight: typography.fontWeights.regular,
+        },
+        semibold: {
+            fontWeight: typography.fontWeights.semibold,
+        },
+        inheritWeight: {
+            fontWeight: 'inherit',
+        },
+        green: {
+            color: palette.green.dark,
+        },
+        red: {
+            color: palette.red.main,
+        },
+        yellow: {
+            color: palette.yellow.main,
+        },
+        lightGrey: {
+            color: palette.grey.light2,
+        },
+        grey: {
+            color: palette.grey.main,
+        },
+        'greyMain-2': {
+            color: palette.grey.main2,
+        },
+        darkGrey: {
+            color: palette.text.primary,
+        },
+        black: {
+            color: palette.common.black,
+        },
+        lightBlue: {
+            color: palette.blue.light,
+        },
+        invert: {
+            color: palette.common.white,
+        },
+        inherit: {
+            color: 'inherit',
+        },
+        blue: {
+            color: palette.blue.main,
+        },
+        solid: {
+            textDecoration: 'underline',
+            textDecorationStyle: 'solid',
+        },
+        dashed: {
+            textDecoration: 'underline',
+            textDecorationStyle: 'dashed',
+        },
+        lineThrough: {
+            textDecoration: 'line-through',
+        },
+    });
+};
+//# sourceMappingURL=typographyStyles.js.map

package/dist-package/src/utils/typography/typographyStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyStyles.js","sourceRoot":"","sources":["../../../../src/utils/typography/typographyStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;IACjC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,QAAQ;IACjD,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC/C,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAErC,8GAA8G;IAC9G,OAAO,YAAY,CAAC;QAClB,WAAW,EAAE;YACX,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC3B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,OAAO;YACtC,UAAU,EAAE,MAAM;SACnB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC3B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,MAAM;YACrC,UAAU,EAAE,MAAM;SACnB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC3B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK;YACpC,UAAU,EAAE,MAAM;SACnB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC3B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,MAAM;YACrC,UAAU,EAAE,MAAM;SACnB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK;YACpC,UAAU,EAAE,MAAM;SACnB;QACD,WAAW,EAAE;YACX,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,OAAO;YACnB,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;SAC5B;QAED,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC;QAEtC,OAAO,EAAE;YACP,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;SAC3C;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,QAAQ;SAC5C;QACD,aAAa,EAAE;YACb,UAAU,EAAE,SAAS;SACtB;QAED,KAAK,EAAE;YACL,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;SAC1B;QACD,GAAG,EAAE;YACH,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;SACxB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;SAC3B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;SAC3B;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SACzB;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;SAC1B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;SAC5B;QACD,KAAK,EAAE;YACL,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;SAC1B;QACD,MAAM,EAAE;YACN,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,OAAO,EAAE;YACP,KAAK,EAAE,SAAS;SACjB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SACzB;QAED,KAAK,EAAE;YACL,cAAc,EAAE,WAAW;YAC3B,mBAAmB,EAAE,OAAO;SAC7B;QACD,MAAM,EAAE;YACN,cAAc,EAAE,WAAW;YAC3B,mBAAmB,EAAE,QAAQ;SAC9B;QACD,WAAW,EAAE;YACX,cAAc,EAAE,cAAc;SAC/B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-rich-text-editor",
-  "version": "13.0.16",
+  "version": "14.0.1",
   "description": "Picasso rich text editor",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-rich-text-editor#readme",
@@ -33,27 +33,28 @@
     "react": ">=16.12.0 < 19.0.0",
     "react-dom": ">=16.12.0 < 19.0.0",
     "typescript": "~4.7.0",
-    "@toptal/picasso-tailwind": ">=2.5.0"
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
+    "@toptal/picasso-tailwind": ">=2.7"
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@lexical/html": "0.11.2",
     "@lexical/react": "0.11.2",
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-button": "2.1.1",
-    "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-file-input": "1.0.26",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-button": "3.0.1",
+    "@toptal/picasso-icons": "1.6.0",
+    "@toptal/picasso-file-input": "2.0.1",
     "@toptal/picasso-image": "1.0.3",
-    "@toptal/picasso-outlined-input": "1.1.5",
-    "@toptal/picasso-list": "2.0.7",
-    "@toptal/picasso-link": "1.0.3",
-    "@toptal/picasso-select": "1.0.30",
-    "@toptal/picasso-input-adornment": "1.0.8",
-    "@toptal/picasso-typography": "2.0.2",
-    "@toptal/picasso-modal": "2.0.10",
-    "@toptal/picasso-form": "3.0.7",
-    "@toptal/picasso-input": "2.0.8",
+    "@toptal/picasso-outlined-input": "2.0.1",
+    "@toptal/picasso-list": "3.0.1",
+    "@toptal/picasso-link": "2.0.0",
+    "@toptal/picasso-select": "2.0.1",
+    "@toptal/picasso-input-adornment": "2.0.1",
+    "@toptal/picasso-typography": "3.0.0",
+    "@toptal/picasso-modal": "3.0.1",
+    "@toptal/picasso-form": "4.0.1",
+    "@toptal/picasso-input": "3.0.1",
     "@toptal/picasso-utils": "1.0.3",
     "classnames": "^2.5.1",
     "emoji-mart": "^5.5.2",
@@ -62,15 +63,14 @@
     "hast-util-sanitize": "^3.0.2",
     "hast-util-to-dom": "^3.1.1",
     "hast-util-to-html": "^7.1.3",
-    "lexical": "0.11.2",
-    "tailwind-merge": "^2.2.2"
+    "lexical": "0.11.2"
   },
   "devDependencies": {
     "@material-ui/core": "4.12.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@toptal/picasso-test-utils": "1.1.1",
-    "@types/classnames": "^2.3.1",
-    "storybook-readme": "^5.0.9"
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@types/classnames": "^2.3.1"
   },
   "sideEffects": false,
   "exports": {

package/src/LexicalEditor/hooks/useTypographyClasses/test.ts

@@ -1,14 +1,14 @@
 import { renderHook } from '@testing-library/react-hooks'
-import { getTypographyClassName } from '@toptal/picasso-typography'
-import type { TypographyOptions } from '@toptal/picasso-typography'
 
+import type { TypographyOptions } from '../../../utils'
+import { getTypographyClassName } from '../../../utils'
 import useTypographyClasses from './use-typography-classes'
 
 jest.mock('@material-ui/core/styles', () => ({
   makeStyles: jest.fn(() => () => ({ root: 'TEST_CLASS_NAME+1' })),
 }))
 
-jest.mock('@toptal/picasso-typography', () => ({
+jest.mock('../../../utils', () => ({
   __esModule: true,
   typographyStyles: { root: 'TEST_CLASS_NAME' },
   getTypographyClassName: jest.fn(() => 'TEST_CLASS_NAME'),

package/src/LexicalEditor/hooks/useTypographyClasses/use-typography-classes.ts

@@ -1,10 +1,8 @@
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
-import {
-  typographyStyles,
-  getTypographyClassName,
-} from '@toptal/picasso-typography'
-import type { TypographyOptions } from '@toptal/picasso-typography'
+
+import type { TypographyOptions } from '../../../utils'
+import { typographyStyles, getTypographyClassName } from '../../../utils'
 
 const useCreateTypographyClasses = makeStyles<Theme>(typographyStyles, {
   name: 'TextEditorTypography',

package/src/RichTextEditor/hooks/useTypographyClasses/use-typography-classes.ts

@@ -1,10 +1,8 @@
 import type { Theme } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core'
-import {
-  typographyStyles,
-  getTypographyClassName,
-} from '@toptal/picasso-typography'
-import type { TypographyOptions } from '@toptal/picasso-typography'
+
+import type { TypographyOptions } from '../../../utils'
+import { typographyStyles, getTypographyClassName } from '../../../utils'
 
 const useCreateTypographyClasses = makeStyles<Theme>(typographyStyles, {
   name: 'TextEditorTypography',

package/src/RichTextEditorButton/RichTextEditorButton.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react'
 import React from 'react'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { ButtonCircular } from '@toptal/picasso-button'
 

package/src/RichTextEditorToolbar/styles.ts

@@ -25,7 +25,8 @@ export default ({ palette }: Theme) =>
       },
     },
     select: {
-      width: '7.125em',
+      // XXX: Using important to override Tailwind styles, remove when migrating RTE to Tailwind
+      width: '7.125em !important',
     },
 
     groupDisabled: {

package/src/utils/index.ts

@@ -1,2 +1,5 @@
 export { default as htmlToHast, hastSanitizeSchema } from './html-to-hast'
 export { default as isCustomEmoji } from './is-custom-emoji'
+
+export * from './typography/typographyStyles'
+export * from './typography/get-typography-classnames'

package/src/utils/typography/get-typography-classnames.ts

@@ -0,0 +1,52 @@
+import cx from 'classnames'
+import type { SizeType, ColorType } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+export type TypographyOptions = {
+  variant: 'heading' | 'body'
+  size:
+    | SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>
+    | 'inherit'
+  color?: ColorType
+  weight?: 'regular' | 'semibold' | 'inherit'
+  underline?: 'solid' | 'dashed'
+  invert?: boolean
+  lineThrough?: boolean
+  as?: React.ElementType<React.HTMLAttributes<HTMLElement>>
+}
+
+export const getTypographyClassName = (
+  classes: Record<string, string>,
+  {
+    variant,
+    size,
+    color,
+    weight,
+    underline,
+    invert,
+    lineThrough,
+    as,
+  }: TypographyOptions
+) => {
+  const variantClassName = kebabToCamelCase(`${variant}-${size}`)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  const weightVariantClass = weight ? classes[weight] : undefined
+  const weightClass =
+    weight === 'inherit' || as === 'em'
+      ? classes.inheritWeight
+      : weightVariantClass
+
+  const underlineClass = underline ? classes[underline] : undefined
+
+  return cx(
+    classes[variantClassName],
+    classes[colorClassName],
+    weightClass,
+    underlineClass,
+    {
+      [classes.invert]: invert,
+      [classes.lineThrough]: lineThrough,
+    }
+  )
+}

package/src/utils/typography/typographyStyles.ts

@@ -0,0 +1,114 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+
+const getHeadingMedium = (theme: Theme) => ({
+  color: theme.palette.common.black,
+  fontWeight: theme.typography.fontWeights.semibold,
+  fontSize: '16px',
+  lineHeight: '24px',
+})
+
+export const typographyStyles = (theme: Theme) => {
+  const { palette, typography } = theme
+
+  // All the body variants are mapped to the same MUI variant (body1) -> declaring styles via custom class names
+  return createStyles({
+    bodyXxsmall: {
+      color: palette.text.primary,
+      fontWeight: typography.fontWeights.regular,
+      fontSize: typography.fontSizes.xxsmall,
+      lineHeight: '16px',
+    },
+    bodyXsmall: {
+      color: palette.text.primary,
+      fontWeight: typography.fontWeights.regular,
+      fontSize: typography.fontSizes.xsmall,
+      lineHeight: '18px',
+    },
+    bodySmall: {
+      color: palette.text.primary,
+      fontWeight: typography.fontWeights.regular,
+      fontSize: typography.fontSizes.small,
+      lineHeight: '20px',
+    },
+    bodyMedium: {
+      color: palette.text.primary,
+      fontWeight: typography.fontWeights.regular,
+      fontSize: typography.fontSizes.medium,
+      lineHeight: '22px',
+    },
+    bodyLarge: {
+      color: palette.common.black,
+      fontWeight: typography.fontWeights.regular,
+      fontSize: typography.fontSizes.large,
+      lineHeight: '24px',
+    },
+    bodyInherit: {
+      fontSize: '1em',
+      lineHeight: '1.5em',
+      fontWeight: typography.fontWeights.regular,
+      color: palette.text.primary,
+    },
+
+    headingMedium: getHeadingMedium(theme),
+
+    regular: {
+      fontWeight: typography.fontWeights.regular,
+    },
+    semibold: {
+      fontWeight: typography.fontWeights.semibold,
+    },
+    inheritWeight: {
+      fontWeight: 'inherit',
+    },
+
+    green: {
+      color: palette.green.dark,
+    },
+    red: {
+      color: palette.red.main,
+    },
+    yellow: {
+      color: palette.yellow.main,
+    },
+    lightGrey: {
+      color: palette.grey.light2,
+    },
+    grey: {
+      color: palette.grey.main,
+    },
+    'greyMain-2': {
+      color: palette.grey.main2,
+    },
+    darkGrey: {
+      color: palette.text.primary,
+    },
+    black: {
+      color: palette.common.black,
+    },
+    lightBlue: {
+      color: palette.blue.light,
+    },
+    invert: {
+      color: palette.common.white,
+    },
+    inherit: {
+      color: 'inherit',
+    },
+    blue: {
+      color: palette.blue.main,
+    },
+
+    solid: {
+      textDecoration: 'underline',
+      textDecorationStyle: 'solid',
+    },
+    dashed: {
+      textDecoration: 'underline',
+      textDecorationStyle: 'dashed',
+    },
+    lineThrough: {
+      textDecoration: 'line-through',
+    },
+  })
+}