@toptal/picasso-select 1.0.30-alpha-cjs-and-esm-publish-test-99555d2ed.1 → 2.0.0

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

@@ -6,7 +6,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -14,64 +14,64 @@ exports[`NonNativeSelectOptions renders 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="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>
             </div>
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="2"
           >
             <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>
             </div>
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="3"
           >
             <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>
             </div>
@@ -89,7 +89,7 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       data-testid="no-options"
       role="listbox"
       tabindex="-1"
@@ -98,22 +98,22 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="true"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light PicassoMenuItem-disabled MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters Mui-disabled MuiListItem-button Mui-disabled"
+            class="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 text-gray opacity-100 pointer-events"
+            disabled=""
             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>
             </div>
@@ -131,7 +131,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -139,22 +139,22 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light makeStyles-menuGroup PicassoMenuItem-nonSelectable MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent 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 pt-4 px-4 pb-[10px]"
             role="option"
             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"
                 >
                   <p
                     class="m-0 text-xxs text-graphite font-semibold"
@@ -167,78 +167,78 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="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>
             </div>
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="2"
           >
             <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>
             </div>
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="3"
           >
             <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>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light makeStyles-menuGroup PicassoMenuItem-nonSelectable MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent 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 pt-4 px-4 pb-[10px]"
             role="option"
             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"
                 >
                   <p
                     class="m-0 text-xxs text-graphite font-semibold"
@@ -251,40 +251,40 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="4"
           >
             <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>
             </div>
           </li>
           <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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="5"
           >
             <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>
             </div>

package/src/ScrollMenu/ScrollMenu.tsx

@@ -1,13 +1,9 @@
 import type { ReactNode, RefObject } from 'react'
 import React, { useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
 import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils'
 import { Menu } from '@toptal/picasso-menu'
-
-import styles from './styles'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps {
   children: React.ReactNode
@@ -22,10 +18,6 @@ export interface Props extends BaseProps {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoScrollMenu',
-})
-
 const getMenuSelectedNode = (
   menuRef: RefObject<HTMLDivElement>,
   selectedIndex?: number | null
@@ -75,7 +67,6 @@ const ScrollMenu = (props: Props) => {
     'data-testid': dataTestId,
     ...rest
   } = props
-  const classes = useStyles()
   const menuRef = useRef<HTMLDivElement>(null)
 
   useIsomorphicLayoutEffect(
@@ -85,7 +76,7 @@ const ScrollMenu = (props: Props) => {
 
   return (
     <Menu
-      className={cx(classes.menu, className)}
+      className={twMerge('bg-white', className)}
       style={style}
       role={role}
       data-testid={dataTestId || testIds?.root}
@@ -96,7 +87,12 @@ const ScrollMenu = (props: Props) => {
         <div
           data-testid={testIds?.list}
           ref={menuRef}
-          className={classes.scrollView}
+          className={twJoin(
+            'overflow-y-auto',
+            'max-h-[26.875rem]',
+            '[@media(max-height:585px)]:max-h-[calc(50vh-4.3125rem)]',
+            '[@media(max-height:585px)]:md:max-h-[calc(50vh-4.8125rem)]'
+          )}
           onBlur={onBlur}
         >
           {children}

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

@@ -6,7 +6,7 @@ exports[`ScrollMenu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu"
+      class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
       role="menu"
       tabindex="-1"
     >
@@ -14,25 +14,25 @@ exports[`ScrollMenu renders 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <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"
                   >
                     top
                   </span>
@@ -42,21 +42,21 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <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"
                   >
                     middle
                   </span>
@@ -66,21 +66,21 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <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"
                   >
                     bottom
                   </span>

package/src/Select/story/index.jsx

@@ -63,7 +63,7 @@ page
     {
       title: 'Search behavior',
       description: `Search is enabled when the number of options is greater or equal to \`searchThreshold\`.
-      ⚠️ When used in Drawer, we need to use \`disablePortal\` to enable the mouse focus of the search input.`,
+    ⚠️ When used in Drawer, we need to use \`disablePortal\` to enable the mouse focus of the search input.`,
       takeScreenshot: false,
     },
     'base/Select'

package/src/SelectCaret/SelectCaret.tsx

@@ -1,25 +1,23 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { DropdownArrows16 } from '@toptal/picasso-icons'
-
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles)
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 interface Props {
   disabled?: boolean
 }
 
 const SelectCaret = ({ disabled }: Props) => {
-  const classes = useStyles()
-
   return (
     <DropdownArrows16
-      className={cx(classes.caret, {
-        [classes.caretDisabled]: disabled,
-      })}
+      // className={twJoin(classes.caret, disabled && classes.caretDisabled)}
+      className={twJoin(
+        // in specs right spacing is defined relative to 6px icon width, while we use 16px
+        // so 5px are left instead of 10px when we use wider icon.
+        `absolute top-[calc(50%-0.5rem)] right-[0.3125rem]
+        text-graphite-700 text-[1rem]
+        cursor-inherit pointer-events-none`,
+        disabled && 'text-graphite-700/[.48] z-[1]'
+      )}
     />
   )
 }

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

@@ -6,7 +6,7 @@ exports[`SelectCaret renders 1`] = `
     class="Picasso-root"
   >
     <svg
-      class="PicassoSvgDropdownArrows16-root makeStyles-caret"
+      class="PicassoSvgDropdownArrows16-root absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events"
       style="min-width: 16px; min-height: 16px;"
       viewBox="0 0 16 16"
     >
@@ -24,7 +24,7 @@ exports[`SelectCaret renders disabled 1`] = `
     class="Picasso-root"
   >
     <svg
-      class="PicassoSvgDropdownArrows16-root makeStyles-caret makeStyles-caretDisabled"
+      class="PicassoSvgDropdownArrows16-root absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events text-graphite z-[1]"
       style="min-width: 16px; min-height: 16px;"
       viewBox="0 0 16 16"
     >

package/src/SelectOptions/SelectOptions.tsx

@@ -1,18 +1,11 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
-import cx from 'classnames'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import type { ScrollMenuProps } from '../ScrollMenu'
 import { ScrollMenu } from '../ScrollMenu'
-import styles from './styles'
 
 export interface Props extends ScrollMenuProps {}
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSelectOptions',
-})
-
 const SelectOptions = (props: Props) => {
   const {
     selectedIndex,
@@ -25,16 +18,13 @@ const SelectOptions = (props: Props) => {
     role,
     ...rest
   } = props
-  const classes = useStyles()
 
   return (
     <ScrollMenu
-      className={cx(
-        classes.menu,
-        {
-          [classes.withHeader]: Boolean(fixedHeader),
-          [classes.withFooter]: Boolean(fixedFooter),
-        },
+      className={twJoin(
+        'shadow-5',
+        Boolean(fixedHeader) && 'pt-[0.125rem] [&>div:first-child]:pb-2',
+        Boolean(fixedFooter) && 'pb-0',
         className
       )}
       style={style}

package/LICENSE

@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2021-2022 Toptal, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

@@ -1,6 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-import '@toptal/picasso-input/styles';
-import '@toptal/picasso-loader/styles';
-declare const _default: (theme: Theme) => import("@material-ui/styles").StyleRules<{}, "placeholder" | "startAdornment" | "endAdornment" | "select" | "root" | "rootFull" | "rootShrink" | "rootAuto" | "rootDisabled" | "nativeInput" | "startAdornmentPadding" | "endAdornmentPadding">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/NativeSelect/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;gCAEf,KAAK;AAA5B,wBAkDC"}