@toptal/picasso-modal 2.0.10 → 3.0.0

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

@@ -9,106 +9,101 @@ exports[`Modal renders 1`] = `
     class="Picasso-root"
   />
   <div
-    class="MuiDialog-root PicassoModal-root"
+    class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
     role="presentation"
-    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
     <div
       aria-hidden="true"
-      class="MuiBackdrop-root"
-      style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+      style="transition-duration: 300ms; opacity: 1;"
     />
     <div
-      data-test="sentinelStart"
+      data-testid="sentinelStart"
       tabindex="0"
     />
     <div
-      class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-      role="none presentation"
-      style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+      role="dialog"
+      style="transition-duration: 300ms; opacity: 1;"
       tabindex="-1"
     >
       <div
-        class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-        role="dialog"
+        class="pr-6 mt-8 mx-8 mb-0"
       >
-        <div
-          class="PicassoModalTitle-root"
+        <h2
+          class="m-0 text-xl text-black font-semibold"
         >
-          <h2
-            class="m-0 text-xl text-black font-semibold"
-          >
-            Title
-          </h2>
-        </div>
+          Title
+        </h2>
+      </div>
+      <div
+        class="flex relative flex-auto overflow-y"
+      >
         <div
-          class="PicassoModalContent-wrapper"
+          class="pt-6 px-8 pb-8 overflow-auto flex-auto"
         >
-          <div
-            class="PicassoModalContent-modalContent"
-          >
-            Modal test content
-          </div>
+          Modal test content
         </div>
-        <div
-          class="PicassoModalAction-root"
+      </div>
+      <div
+        class="mt-0 mx-8 mb-8 text-right"
+      >
+        <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 [&+&]:ml-4 cursor-pointer no-underline hover: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-8 py-0 px-4"
+          data-component-type="button"
+          role="button"
+          tabindex="0"
+          type="button"
         >
-          <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 [&+&]:ml-4 cursor-pointer no-underline hover: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-8 py-0 px-4"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-            >
-              Cancel
-            </span>
-          </button>
-          <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 [&+&]:ml-4 cursor-pointer no-underline hover: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-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
+          <span
+            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-            >
-              Update
-            </span>
-          </button>
-        </div>
+            Cancel
+          </span>
+        </button>
         <button
           aria-disabled="false"
-          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute right-[2em] top-[2em]"
+          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 [&+&]:ml-4 cursor-pointer no-underline hover: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-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
           data-component-type="button"
-          data-testid="close-modal"
           role="button"
           tabindex="0"
           type="button"
         >
           <span
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
-            <svg
-              class="PicassoSvgCloseMinor16-root"
-              style="min-width: 16px; min-height: 16px;"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
-              />
-            </svg>
+            Update
           </span>
         </button>
       </div>
+      <button
+        aria-disabled="false"
+        aria-label="Close"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute top-8 right-8"
+        data-component-type="button"
+        data-testid="close-modal"
+        role="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+        >
+          <svg
+            class="PicassoSvgCloseMinor16-root"
+            style="min-width: 16px; min-height: 16px;"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
     <div
-      data-test="sentinelEnd"
+      data-testid="sentinelEnd"
       tabindex="0"
     />
   </div>
@@ -131,56 +126,50 @@ exports[`Modal useModal opens and closes modal 1`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>
       </button>
       <div
-        class="MuiDialog-root PicassoModal-root"
+        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
         role="presentation"
-        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
       >
         <div
           aria-hidden="true"
-          class="MuiBackdrop-root"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          style="transition-duration: 300ms; opacity: 1;"
         />
         <div
-          data-test="sentinelStart"
+          data-testid="sentinelStart"
           tabindex="0"
         />
         <div
-          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-          role="none presentation"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          role="dialog"
+          style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
         >
-          <div
-            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-            role="dialog"
+          <p>
+            Modal content
+          </p>
+          <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 [&+&]:ml-4 cursor-pointer no-underline hover: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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
+            data-component-type="button"
+            role="button"
+            tabindex="0"
+            type="button"
           >
-            <p>
-              Modal content
-            </p>
-            <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 [&+&]:ml-4 cursor-pointer no-underline hover: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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
-              data-component-type="button"
-              role="button"
-              tabindex="0"
-              type="button"
+            <span
+              class="items-center inline-flex font-semibold whitespace-nowrap text-button"
             >
-              <span
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-              >
-                Hide
-              </span>
-            </button>
-          </div>
+              Hide
+            </span>
+          </button>
         </div>
         <div
-          data-test="sentinelEnd"
+          data-testid="sentinelEnd"
           tabindex="0"
         />
       </div>
@@ -204,7 +193,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>
@@ -230,7 +219,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show first
         </span>
@@ -245,77 +234,65 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show second
         </span>
       </button>
       <div
         aria-hidden="true"
-        class="MuiDialog-root PicassoModal-root"
+        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
         role="presentation"
-        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
       >
         <div
           aria-hidden="true"
-          class="MuiBackdrop-root"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          style="transition-duration: 300ms; opacity: 1;"
         />
         <div
-          data-test="sentinelStart"
+          data-testid="sentinelStart"
           tabindex="0"
         />
         <div
-          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-          role="none presentation"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          role="dialog"
+          style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
         >
-          <div
-            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-            role="dialog"
-          >
-            <p>
-              First modal content
-            </p>
-          </div>
+          <p>
+            First modal content
+          </p>
         </div>
         <div
-          data-test="sentinelEnd"
+          data-testid="sentinelEnd"
           tabindex="0"
         />
       </div>
       <div
-        class="MuiDialog-root PicassoModal-root"
+        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
         role="presentation"
-        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
       >
         <div
           aria-hidden="true"
-          class="MuiBackdrop-root"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          style="transition-duration: 300ms; opacity: 1;"
         />
         <div
-          data-test="sentinelStart"
+          data-testid="sentinelStart"
           tabindex="0"
         />
         <div
-          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-          role="none presentation"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          role="dialog"
+          style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
         >
-          <div
-            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-            role="dialog"
-          >
-            <p>
-              Second modal content
-            </p>
-          </div>
+          <p>
+            Second modal content
+          </p>
         </div>
         <div
-          data-test="sentinelEnd"
+          data-testid="sentinelEnd"
           tabindex="0"
         />
       </div>

package/src/ModalActions/ModalActions.tsx

@@ -1,31 +1,22 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 
-import styles from './styles'
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Action content (e.g. Buttons) */
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoModalAction',
-})
-
 export const ModalActions = forwardRef<HTMLDivElement, Props>(
   function ModalActions(props, ref) {
     const { children, className, style, ...rest } = props
-    const classes = useStyles()
 
     return (
       <div
         {...rest}
         ref={ref}
-        className={cx(classes.root, className)}
+        className={cx('mt-0 mx-8 mb-8 text-right', className)}
         style={style}
       >
         {children}

package/src/ModalContent/ModalContent.tsx

@@ -1,23 +1,15 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { useCombinedRefs } from '@toptal/picasso-utils'
 
-import styles from './styles'
 import useScrollableShades from './hooks/use-scrollable-shades'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Content of Modal */
   children: ReactNode
 }
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoModalContent',
-})
-
 export const ModalContent = forwardRef<HTMLDivElement, Props>(
   function ModalContent(props, ref) {
     const { children, className, style, ...rest } = props
@@ -30,17 +22,36 @@ export const ModalContent = forwardRef<HTMLDivElement, Props>(
 
     const { top, bottom } = useScrollableShades(modalContentRef)
 
-    const classes = useStyles()
+    const shadeClasses =
+      'z-[1] absolute pointer-events-none right-8 left-8 h-[112px]'
+    const gradientClasses =
+      'from-white to-transparent to-100% from-0% via-[2rem] via-white'
 
     return (
-      <div className={cx(classes.wrapper)}>
-        {top && <div className={cx(classes.topShade)} />}
-        {bottom && <div className={cx(classes.bottomShade)} />}
+      <div className='flex relative flex-auto overflow-y-hidden'>
+        {top && (
+          <div
+            className={cx(
+              shadeClasses,
+              gradientClasses,
+              'top-0 bg-gradient-to-b'
+            )}
+          />
+        )}
+        {bottom && (
+          <div
+            className={cx(
+              shadeClasses,
+              gradientClasses,
+              'bottom-0 bg-gradient-to-t'
+            )}
+          />
+        )}
         <div
           {...rest}
           style={style}
           ref={modalContentRef}
-          className={cx(classes.modalContent, className)}
+          className={cx('pt-6 px-8 pb-8 overflow-auto flex-auto', className)}
         >
           {children}
         </div>

package/src/ModalPaper/ModalPaper.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import cx from 'classnames'
+import type { SizeType } from '@toptal/picasso-shared'
+import { Paper } from '@toptal/picasso-paper'
+
+type PaperSize =
+  | SizeType<'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>
+  | 'full-screen'
+type Alignment = 'top' | 'centered'
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  align: Alignment
+  children: React.ReactNode
+  /** Width of modal */
+  size: PaperSize
+}
+
+const fullscreenClasses = `h-full w-full max-h-full max-w-full`
+const defaultClasses = `m-4 sm:h-auto sm:m-8 max-w-[calc(100%_-_2rem)] sm:max-w-[calc(100%_-_6rem)] rounded-md`
+
+const sizeBasedClasses = {
+  xsmall: `${defaultClasses} w-[20.5rem]`,
+  small: `${defaultClasses} w-[32.5rem]`,
+  medium: `${defaultClasses} w-[40.625rem]`,
+  large: `${defaultClasses} w-[50rem]`,
+  xlarge: `${defaultClasses} w-[75rem]`,
+  'full-screen': fullscreenClasses,
+}
+
+const alignBasedClasses = {
+  centered: 'relative',
+  top: 'absolute top-0',
+}
+
+const getMaxHeightClass = (size: PaperSize, align: Alignment) => {
+  if (size === 'full-screen') {
+    return 'max-h-full'
+  }
+
+  if (align === 'top') {
+    return `max-h-[calc(100%_-_2rem)] sm:max-h-[calc(100%_-_4rem)]`
+  }
+
+  return `max-h-[calc(100%_-_2rem)] sm:max-h-[calc(100%_-_6rem)]`
+}
+
+export const ModalPaper = React.forwardRef<HTMLDivElement, Props>(
+  function ModalPaper({ children, size, align, className, ...props }, ref) {
+    return (
+      <Paper
+        ref={ref}
+        role='dialog'
+        elevation={2}
+        className={cx(
+          className,
+          'outline-none overflow-y-auto',
+          'flex flex-col',
+          sizeBasedClasses[size],
+          alignBasedClasses[align],
+          getMaxHeightClass(size, align)
+        )}
+        {...props}
+      >
+        {children}
+      </Paper>
+    )
+  }
+)
+
+export default ModalPaper

package/src/ModalPaper/index.ts

@@ -0,0 +1 @@
+export { ModalPaper } from './ModalPaper'

package/src/ModalTitle/ModalTitle.tsx

@@ -1,33 +1,25 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Typography } from '@toptal/picasso-typography'
 
-import styles from './styles'
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Title content */
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoModalTitle' })
-
 export const ModalTitle = forwardRef<HTMLDivElement, Props>(function ModalTitle(
   props,
   ref
 ) {
   const { children, className, style, ...rest } = props
 
-  const classes = useStyles()
-
   return (
     <div
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
+      className={cx('pr-6 mt-8 mx-8 mb-0', className)}
       style={style}
     >
       <Typography variant='heading' size='large'>

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ screens, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "medium" | "large" | "small" | "container" | "paper" | "xsmall" | "xlarge" | "full-screen" | "topAlignedDialog">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;6CAmBjB,KAAK;AAAzC,wBAuDI"}

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

@@ -1,67 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-const maxHeight = 'calc(100% - 6rem)';
-const maxWidth = 'calc(100% - 6rem)';
-const maxHeightForTopAligned = 'calc(100% - 4rem)';
-const maxHeightForExtraSmall = 'calc(100% - 2rem)';
-const maxWidthForExtraSmall = 'calc(100% - 2rem)';
-PicassoProvider.override(() => ({
-    MuiPaper: {
-        root: {
-            color: 'unset',
-        },
-    },
-}));
-export default ({ screens, sizes }) => createStyles({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        // do not remove, should be covered with test
-        // https://toptal-core.atlassian.net/browse/FX-1543
-        fontSize: '1rem',
-    },
-    container: {},
-    paper: {
-        height: 'auto',
-        maxHeight: maxHeightForExtraSmall,
-        maxWidth: maxWidthForExtraSmall,
-        margin: '1rem',
-        borderRadius: sizes.borderRadius.medium,
-        [screens('sm', 'md', 'lg', 'xl')]: {
-            margin: '2rem',
-            maxHeight,
-            maxWidth,
-        },
-    },
-    xsmall: {
-        width: '20.5rem',
-    },
-    small: {
-        width: '32.5rem',
-    },
-    medium: {
-        width: '40.625rem',
-    },
-    large: {
-        width: '50rem',
-    },
-    xlarge: {
-        width: '75rem',
-    },
-    'full-screen': {
-        height: '100%',
-        width: '100%',
-        maxHeight: '100%',
-        maxWidth: '100%',
-        margin: 0,
-        borderRadius: 0,
-    },
-    topAlignedDialog: {
-        position: 'absolute',
-        top: 0,
-        [screens('sm', 'md', 'lg', 'xl')]: {
-            maxHeight: maxHeightForTopAligned,
-        },
-    },
-});
-//# sourceMappingURL=styles.js.map