@toptal/picasso-menu 1.0.17 → 2.0.0

package/src/MenuItem/MenuItem.tsx

@@ -6,10 +6,7 @@ import type {
   ReactElement,
 } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { MenuItem as MUIMenuItem } from '@material-ui/core'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 import type {
   BaseProps,
   ButtonOrAnchorProps,
@@ -17,7 +14,6 @@ import type {
   OverridableComponent,
 } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
-import { Container } from '@toptal/picasso-container'
 import { ChevronMinor16, CheckMinor16 } from '@toptal/picasso-icons'
 import { Paper } from '@toptal/picasso-paper'
 import { Popper } from '@toptal/picasso-popper'
@@ -26,7 +22,6 @@ import { ClickAwayListener, toTitleCase } from '@toptal/picasso-utils'
 import type { AvatarProps, Avatar } from '@toptal/picasso-avatar'
 
 import { useMenuItem } from './hooks'
-import styles from './styles'
 
 export type VariantType = 'light' | 'dark'
 
@@ -67,9 +62,51 @@ export interface Props extends BaseProps, TextLabelProps, MenuItemAttributes {
   onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoMenuItem',
-})
+const getFontColor = ({
+  variant,
+  highlighted,
+}: {
+  variant: VariantType
+  highlighted?: boolean
+}) => {
+  if (variant === 'light') {
+    return 'text-black'
+  }
+  if (variant === 'dark') {
+    return ['focus:text-white', highlighted ? 'text-white' : 'text-gray-500']
+  }
+}
+
+const getBackgroundAndActionStyles = ({
+  variant,
+  highlighted,
+  nonSelectable,
+}: {
+  variant: VariantType
+  highlighted: boolean
+  nonSelectable?: boolean
+}) => {
+  let bgColor = 'bg-transparent'
+  let actionBgColor
+
+  if (variant === 'dark') {
+    actionBgColor =
+      !nonSelectable && 'hover:bg-graphite-700 focus:bg-graphite-700'
+    if (highlighted) {
+      bgColor = 'bg-graphite-700'
+    }
+  }
+
+  if (variant === 'light') {
+    actionBgColor = !nonSelectable && 'hover:bg-blue-100 focus:bg-blue-100'
+
+    if (highlighted) {
+      bgColor = 'bg-blue-100'
+    }
+  }
+
+  return [bgColor, actionBgColor]
+}
 
 export const MenuItem: OverridableComponent<Props> = forwardRef<
   HTMLElement,
@@ -90,15 +127,16 @@ export const MenuItem: OverridableComponent<Props> = forwardRef<
     style,
     value,
     variant = 'light',
+    role = 'menuitem',
     nonSelectable,
     onClick,
     onMouseEnter,
     icon,
     avatar,
+    tabIndex: tabIndexProp,
     ...rest
   } = props
 
-  const classes = useStyles()
   const anchorRef = useRef<HTMLDivElement>(null)
   const titleCase = useTitleCase(propTitleCase)
   const { isOpened, onItemClick, onItemMouseEnter, onAwayClick } = useMenuItem({
@@ -106,58 +144,62 @@ export const MenuItem: OverridableComponent<Props> = forwardRef<
     onClick,
     onMouseEnter,
   })
+  const highlighted = selected || isOpened
   const isLink = as === Link && rest.href
+  const Component: React.ElementType = isLink ? 'a' : as || 'li'
+
   const isIconWrapperVisible = checkmarked !== undefined || icon
 
+  let tabIndex
+
+  if (!disabled) {
+    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1
+  }
+
   return (
     <>
-      <MUIMenuItem
-        {...rest}
+      <Component
         ref={ref}
+        role={role}
+        tabIndex={tabIndex}
         // replace Picasso Link with Anchor to not applying Picasso
         // Link component styles, this is the only difference between them now
-        component={isLink ? 'a' : as}
-        classes={{
-          gutters: classes.gutters,
-          selected: classes.selected,
-        }}
-        className={cx(classes.root, classes[variant], className, {
-          [classes.nonSelectable]: nonSelectable,
-          [classes.disabled]: disabled,
-        })}
+        className={twMerge(
+          getFontColor({ variant, highlighted }),
+          getBackgroundAndActionStyles({ variant, highlighted, nonSelectable }),
+          disableGutters ? 'p-0' : 'px-4 py-[0.375rem]',
+          'min-w-[9rem] w-auto min-h-[unset] sm:min-h-[auto] md:min-h-0 relative cursor-pointer',
+          'transition-colors duration-150 ease-in-out',
+          'overflow-hidden whitespace-normal text-left no-underline',
+          'flex items-center justify-start',
+          'outline-none appearance-none leading-4',
+          className,
+          disabled && 'text-gray-600 opacity-100 pointer-events-none'
+        )}
+        aria-disabled={Boolean(disabled)}
         disabled={disabled}
-        disableGutters={disableGutters}
         onClick={onItemClick}
         onMouseEnter={onItemMouseEnter}
         style={style}
         value={value}
-        selected={selected || isOpened}
+        {...rest}
       >
-        <Container
-          ref={anchorRef}
-          className={classes.itemWrapper}
-          flex
-          direction='row'
-        >
-          {avatar && <Container right='xsmall'>{avatar}</Container>}
+        <div ref={anchorRef} className='flex flex-1 max-w-full'>
+          {avatar && <div className='mr-2'>{avatar}</div>}
 
-          <Container flex direction='column' className={classes.content}>
-            <Container flex alignItems='center'>
+          <div className='flex flex-col flex-1 min-w-0'>
+            <div className='flex items-center'>
               {isIconWrapperVisible && (
-                <Container
-                  className={classes.iconContainer}
-                  flex
-                  inline
-                  right='xsmall'
-                >
+                <div className='w-4 inline-flex mr-2'>
                   {checkmarked ? <CheckMinor16 /> : icon}
-                </Container>
+                </div>
               )}
               {typeof children === 'string' ? (
                 <span
-                  className={cx(classes.stringContent, {
-                    [classes.stringContentSemibold]: checkmarked,
-                  })}
+                  className={twJoin(
+                    'flex-1 text-md leading-5',
+                    checkmarked && 'text-semibold'
+                  )}
                   style={style}
                 >
                   {titleCase ? toTitleCase(children) : children}
@@ -166,25 +208,25 @@ export const MenuItem: OverridableComponent<Props> = forwardRef<
                 children
               )}
               {menu && (
-                <Container flex inline left='xsmall'>
+                <div className='inline-flex ml-2'>
                   <ChevronMinor16 color='' />
-                </Container>
+                </div>
               )}
-            </Container>
+            </div>
             {description && (
-              <Container
-                className={cx(classes.description, {
-                  [classes.descriptionDisabled]: disabled,
-                })}
-                left={isIconWrapperVisible ? 'medium' : undefined}
-                top={0.25}
+              <div
+                className={twJoin(
+                  'text-2xs mt-1',
+                  !disabled && 'text-graphite-700',
+                  isIconWrapperVisible && 'ml-6'
+                )}
               >
                 {description}
-              </Container>
+              </div>
             )}
-          </Container>
-        </Container>
-      </MUIMenuItem>
+          </div>
+        </div>
+      </Component>
       {menu && isOpened && (
         <Popper
           anchorEl={anchorRef.current}
@@ -201,7 +243,7 @@ export const MenuItem: OverridableComponent<Props> = forwardRef<
           }}
         >
           <ClickAwayListener onClickAway={onAwayClick}>
-            <Paper className={classes.paper}>{menu}</Paper>
+            <Paper className='max-h-[14.75rem] overflow-y-auto'>{menu}</Paper>
           </ClickAwayListener>
         </Popper>
       )}

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

@@ -7,21 +7,21 @@ exports[`MenuItem renders 1`] = `
   >
     <li
       aria-disabled="false"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+      class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
       role="menuitem"
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex flex-1 max-w"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col flex-1 min-w"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="flex items-center"
           >
             <span
-              class="PicassoMenuItem-stringContent"
+              class="flex-1 text-md leading-5"
             >
               1
             </span>
@@ -40,21 +40,21 @@ exports[`MenuItem renders checkmarked 1`] = `
   >
     <li
       aria-disabled="false"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+      class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
       role="menuitem"
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex flex-1 max-w"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col flex-1 min-w"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="flex items-center"
           >
             <div
-              class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+              class="w-4 inline-flex mr-2"
             >
               <svg
                 class="PicassoSvgCheckMinor16-root"
@@ -67,7 +67,7 @@ exports[`MenuItem renders checkmarked 1`] = `
               </svg>
             </div>
             <span
-              class="PicassoMenuItem-stringContent PicassoMenuItem-stringContentSemibold"
+              class="flex-1 text-md leading-5 text-semibold"
             >
               1
             </span>
@@ -89,21 +89,21 @@ exports[`MenuItem renders in title case with global prop 1`] = `
     >
       <li
         aria-disabled="false"
-        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
         role="menuitem"
         tabindex="-1"
       >
         <div
-          class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+          class="flex flex-1 max-w"
         >
           <div
-            class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+            class="flex flex-col flex-1 min-w"
           >
             <div
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="flex items-center"
             >
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 Arrow
               </span>
@@ -123,21 +123,21 @@ exports[`MenuItem renders in title case with local prop 1`] = `
   >
     <li
       aria-disabled="false"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+      class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
       role="menuitem"
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex flex-1 max-w"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col flex-1 min-w"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="flex items-center"
           >
             <span
-              class="PicassoMenuItem-stringContent"
+              class="flex-1 text-md leading-5"
             >
               Arrow
             </span>
@@ -156,26 +156,26 @@ exports[`MenuItem renders with a sub menu arrow 1`] = `
   >
     <li
       aria-disabled="false"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+      class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
       role="menuitem"
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex flex-1 max-w"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col flex-1 min-w"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="flex items-center"
           >
             <span
-              class="PicassoMenuItem-stringContent"
+              class="flex-1 text-md leading-5"
             >
               1
             </span>
             <div
-              class="PicassoContainer-leftxsmallMargin PicassoContainer-flex PicassoContainer-inline"
+              class="inline-flex ml-2"
             >
               <svg
                 class="PicassoSvgChevronMinor16-root"
@@ -202,28 +202,27 @@ exports[`MenuItem renders with description 1`] = `
   >
     <li
       aria-disabled="false"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+      class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
       role="menuitem"
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex flex-1 max-w"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col flex-1 min-w"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="flex items-center"
           >
             <span
-              class="PicassoMenuItem-stringContent"
+              class="flex-1 text-md leading-5"
             >
               1
             </span>
           </div>
           <div
-            class="PicassoMenuItem-description"
-            style="margin-top: 0.25rem;"
+            class="text-2xs mt-1 text-graphite"
           >
             details
           </div>

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

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

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

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

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

@@ -1,29 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ shadows }) => ({
-    MuiMenu: {
-        paper: {
-            boxShadow: shadows[2],
-        },
-    },
-    MuiList: {
-        root: {
-            boxShadow: shadows[1],
-        },
-    },
-}));
-export default ({ sizes }) => createStyles({
-    root: {
-        outline: 0,
-        padding: '0.5rem 0',
-        borderRadius: sizes.borderRadius.small,
-    },
-    backButtonIcon: {
-        verticalAlign: 'middle',
-        marginTop: rem('-1px'),
-        marginRight: rem('4px'),
-        marginLeft: rem('-5px'),
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Menu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,KAAK,EAAE;YACL,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;SACtB;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;SACtB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAClC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,UAAU;QACnB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;KACvC;IACD,cAAc,EAAE;QACd,aAAa,EAAE,QAAQ;QACvB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC;QACtB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QACvB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;KACxB;CACF,CAAC,CAAA"}

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ typography, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "gutters" | "selected" | "content" | "dark" | "light" | "disabled" | "nonSelectable" | "stringContent" | "stringContentSemibold" | "iconContainer" | "itemWrapper" | "description" | "descriptionDisabled" | "paper">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,119 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-import { rem } from '@toptal/picasso-shared';
-PicassoProvider.override(() => ({
-    MuiMenuItem: {
-        root: {
-            boxSizing: 'border-box',
-            lineHeight: '1rem',
-            padding: 0,
-            // to override MUI paddingTop and paddingBottom default values
-            paddingTop: 0,
-            paddingBottom: 0,
-            fontSize: '1rem',
-            minHeight: 'unset',
-            whiteSpace: 'normal',
-        },
-        gutters: {
-            padding: '0.625rem',
-            // to override MUI paddingLeft and paddingRight default values
-            paddingLeft: '0.625rem',
-            paddingRight: '0.625rem',
-        },
-    },
-}));
-export default ({ typography, palette }) => createStyles({
-    root: {
-        minWidth: rem('144'),
-        '&$nonSelectable:hover, &$nonSelectable:focus': {
-            backgroundColor: 'unset',
-        },
-        '&$disabled': {
-            color: palette.grey.main2,
-            pointerEvents: 'none',
-            opacity: 1,
-        },
-    },
-    light: {
-        color: palette.common.black,
-        '&:hover': {
-            color: palette.common.black,
-            backgroundColor: palette.blue.lighter,
-            '&$selected': {
-                color: palette.common.black,
-                backgroundColor: palette.blue.lighter,
-            },
-        },
-        '&$selected': {
-            color: palette.common.black,
-            backgroundColor: palette.blue.lighter,
-        },
-        '&:focus': {
-            color: palette.common.black,
-            backgroundColor: palette.blue.lighter,
-            '&$selected': {
-                color: palette.common.black,
-                backgroundColor: palette.blue.lighter,
-            },
-        },
-    },
-    dark: {
-        color: palette.grey.main,
-        '&:hover': {
-            backgroundColor: palette.grey.dark,
-            '&$selected': {
-                color: palette.common.white,
-                backgroundColor: palette.grey.dark,
-            },
-        },
-        '&$selected': {
-            color: palette.common.white,
-            backgroundColor: palette.grey.dark,
-        },
-        '&:focus': {
-            color: palette.common.white,
-            backgroundColor: palette.grey.dark,
-            '&$selected': {
-                color: palette.common.white,
-                backgroundColor: palette.grey.dark,
-            },
-        },
-    },
-    selected: {},
-    nonSelectable: {},
-    stringContent: {
-        flex: 1,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-    },
-    stringContentSemibold: {
-        fontWeight: typography.fontWeights.semibold,
-    },
-    gutters: {
-        padding: '0.375rem 1rem',
-    },
-    iconContainer: {
-        width: '1rem',
-    },
-    itemWrapper: {
-        flex: 1,
-        maxWidth: '100%',
-    },
-    content: {
-        flex: 1,
-        minWidth: '0px',
-    },
-    description: {
-        fontSize: '0.6875em',
-        color: palette.text.primary,
-    },
-    descriptionDisabled: {
-        color: 'inherit',
-    },
-    paper: {
-        maxHeight: '14.75rem',
-        overflowY: 'auto',
-    },
-    disabled: {},
-});
-//# sourceMappingURL=styles.js.map

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

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

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=styles.d.ts.map

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

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

package/dist-package/src/styles.js

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

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

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

package/src/Menu/styles.ts

@@ -1,32 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ shadows }: Theme) => ({
-  MuiMenu: {
-    paper: {
-      boxShadow: shadows[2],
-    },
-  },
-  MuiList: {
-    root: {
-      boxShadow: shadows[1],
-    },
-  },
-}))
-
-export default ({ sizes }: Theme) =>
-  createStyles({
-    root: {
-      outline: 0,
-      padding: '0.5rem 0',
-      borderRadius: sizes.borderRadius.small,
-    },
-    backButtonIcon: {
-      verticalAlign: 'middle',
-      marginTop: rem('-1px'),
-      marginRight: rem('4px'),
-      marginLeft: rem('-5px'),
-    },
-  })