@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-17eb872bb.13 → 5.0.15-alpha-bill-root-ref-context-42c3d2541.6

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLDivElement>> & {
-    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => JSX.Element) & {
+    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}

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

@@ -1,3 +1,4 @@
+export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/dist-package/src/index.js

@@ -1,3 +1,4 @@
+export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "5.0.15-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+  "version": "5.0.15-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,13 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-17eb872bb.359+17eb872bb",
-    "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
+    "@toptal/picasso-container": "3.1.3-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
+    "@toptal/picasso-icons": "1.12.2-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
+    "@toptal/picasso-shared": "15.0.1-alpha-bill-root-ref-context-42c3d2541.352+42c3d2541",
+    "@toptal/picasso-typography": "4.0.4-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
+    "@toptal/picasso-typography-overflow": "4.0.4-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
+    "@toptal/picasso-user-badge": "5.1.12-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
+    "@toptal/picasso-utils": "3.1.1-alpha-bill-root-ref-context-42c3d2541.6+42c3d2541",
     "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
@@ -36,8 +36,8 @@
     "**/styles.js"
   ],
   "peerDependencies": {
+    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.6",
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
@@ -45,14 +45,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-17eb872bb.280+17eb872bb",
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-17eb872bb.359+17eb872bb"
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-provider": "5.0.1-alpha-bill-root-ref-context-42c3d2541.273+42c3d2541",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-bill-root-ref-context-42c3d2541.352+42c3d2541"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "17eb872bb0410897243666d7cc7a58eb1479ed78"
+  "gitHead": "42c3d25418e033ebaef1ab9907cbc5e3f1a95279"
 }

package/src/Tab/Tab.tsx

@@ -1,26 +1,30 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useContext } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import type { TabProps } from '@material-ui/core'
+import { Tab as MUITab } from '@material-ui/core'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
 import { UserBadge } from '@toptal/picasso-user-badge'
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { useTabsContext, type TabsValueType } from '../Tabs/TabsContext'
+import styles from './styles'
+import { TabsOrientationContext } from '../Tabs/Tabs'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
 export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * If true, the tab will be disabled
    * @default false
    */
   disabled?: boolean
 
-  /** The value of the tab */
-  value?: TabsValueType
+  /** You can provide your own value. Otherwise, we fallback to the child position index */
+  value?: TabProps['value']
 
   /** The label element */
   label?: ReactNode
@@ -36,97 +40,32 @@ export interface Props
 
   // Properties below are managed by Tabs component
 
-  // selected?: boolean
-  // onChange?: TabProps['onChange']
-  // onClick?: TabProps['onClick']
+  selected?: boolean
+  onChange?: TabProps['onChange']
+  onClick?: TabProps['onClick']
 }
 
-const getOpacityClass = (
-  selected: boolean,
-  disabled: boolean,
-  orientation: 'horizontal' | 'vertical'
-) => {
-  if (disabled) {
-    return 'opacity-50'
-  }
-  if (selected || orientation === 'vertical') {
-    return 'opacity-100 '
-  }
-
-  return 'opacity-70'
-}
-
-const wrapperClassesByOrientation = {
-  horizontal: 'inline-flex flex-row items-center justify-center',
-  vertical: 'block',
-}
-
-const rootClassesByOrientation = (selected: boolean) => ({
-  horizontal: [
-    'm-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0',
-    'text-center bg-transparent transition-shadow z-10 rounded-none',
-    'text-black',
-    selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
-  ],
-  vertical: [
-    ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
-    'text-left rounded-l-sm rounded-r-none transition-all',
-    'w-full overflow-hidden',
-    selected && 'shadow-1',
-    selected && [
-      'before:absolute',
-      'before:content-[""]',
-      'before:bottom-0',
-      'before:left-0',
-      'before:top-0',
-      'before:w-[3px]',
-      'before:bg-blue-500',
-    ],
-    selected
-      ? 'bg-gray-50 text-black'
-      : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
-  ],
-})
-
-const classesByVariant = {
-  scrollable: 'shrink-0 max-w-[264px]',
-  fullWidth: 'shrink flex-grow basis-0',
-}
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
 
-export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
-  props,
-  ref
-) {
+export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
   const {
     disabled,
     value,
     label,
     icon,
+    selected,
+    onChange,
+    onClick,
     titleCase: propsTitleCase,
     description,
     avatar,
-    className,
-    onClick,
     ...rest
   } = props
+  const classes = useStyles()
   const titleCase = useTitleCase(propsTitleCase)
-  const {
-    value: selectedValue,
-    onChange,
-    orientation,
-    variant,
-  } = useTabsContext()
-  const isHorizontal = orientation === 'horizontal'
-  const selected = value === selectedValue
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (!disabled && onChange) {
-      onChange(event, value as TabsValueType)
-    }
-    onClick?.(event)
-  }
+  const orientation = useContext(TabsOrientationContext)
 
-  const renderLabel = getLabelComponent({
+  const labelComponent = getLabelComponent({
     avatar,
     description,
     disabled,
@@ -136,44 +75,39 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
   })
 
   return (
-    <button
-      className={twMerge(
-        getOpacityClass(selected, !!disabled, orientation),
-        rootClassesByOrientation(selected)[orientation],
-        classesByVariant[variant],
-        disabled ? 'cursor-default text-gray-500' : 'cursor-pointer',
-        disabled && 'pointer-events-none',
-        icon && isHorizontal && 'min-h-0 pt-0 pr-6',
-        'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
-        'border-0 cursor-pointer inline-flex outline-none',
-        'items-center select-none align-middle appearance-none',
-        'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
-        'normal-case whitespace-normal leading-4',
-        'relative ',
-        className
-      )}
+    <MUITab
+      className=''
+      {...rest}
       ref={ref}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={0}
       disabled={disabled}
-      onClick={handleClick}
-      role='tab'
-      aria-selected={selected}
-      aria-disabled={disabled}
-      type='button'
-      {...rest}
-    >
-      <span
-        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
-      >
-        {renderLabel}
-        {icon && <span className='absolute right-0 mb-0'>{icon}</span>}
-      </span>
-    </button>
+      label={labelComponent}
+      icon={icon}
+      value={value}
+      selected={selected}
+      onChange={onChange}
+      onClick={onClick}
+      classes={{
+        root: classes[orientation],
+        selected: classes.selected,
+        wrapper: classes.wrapper,
+      }}
+    />
   )
 })
 
+Tab.defaultProps = {}
+
 Tab.displayName = 'Tab'
 
+type GetLabelComponentProps = {
+  avatar?: string | null
+  description?: string
+  disabled?: boolean
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}
 const getLabelComponent = ({
   avatar,
   description,
@@ -181,19 +115,14 @@ const getLabelComponent = ({
   label,
   orientation,
   titleCase,
-}: {
-  avatar?: string | null
-  description?: string
-  disabled?: boolean
-  label?: React.ReactNode
-  orientation: 'horizontal' | 'vertical'
-  titleCase?: boolean
-}): React.ReactNode => {
+}: GetLabelComponentProps): React.ReactNode => {
   if (!label) {
     return null
   }
+
   const isHorizontal = orientation === 'horizontal'
   const isCustomLabel = typeof label !== 'string'
+
   const Label = () => (
     <TabLabel titleCase={titleCase} label={label} orientation={orientation} />
   )
@@ -201,6 +130,7 @@ const getLabelComponent = ({
   if (isHorizontal || isCustomLabel) {
     return <Label />
   }
+
   if (typeof avatar === 'undefined') {
     return (
       <>

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

@@ -6,29 +6,31 @@ exports[`Tab Tab disabled tab 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="true"
             aria-selected="false"
-            class="opacity-50 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
             disabled=""
             role="tab"
             tabindex="-1"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -38,6 +40,10 @@ exports[`Tab Tab disabled tab 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -50,27 +56,30 @@ exports[`Tab Tab renders 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -80,6 +89,10 @@ exports[`Tab Tab renders 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -92,43 +105,46 @@ exports[`Tab Tab tab with icon 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-h pt-0 pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
+              <div
+                id="Icon"
+              />
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
               >
                 Tab Label
               </div>
-              <span
-                class="absolute right-0 mb-0"
-              >
-                <div
-                  id="Icon"
-                />
-              </span>
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>

package/src/Tab/story/IconOrBadge.example.tsx

@@ -3,12 +3,10 @@ import { Container, Tabs, Tooltip, Badge } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
-import type { TabsValueType } from '../../Tabs/TabsContext'
-
 const Example = () => {
-  const [value, setValue] = React.useState<TabsValueType>(0)
+  const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue)
   }
 
@@ -26,10 +24,7 @@ const Example = () => {
           }
         />
         <Tabs.Tab label='Label' />
-        <Tabs.Tab
-          label='Label'
-          icon={<Badge content={10} variant='white' className='mt-[1px]' />}
-        />
+        <Tabs.Tab label='Label' icon={<Badge content={10} variant='white' />} />
       </Tabs>
 
       {value === 0 && (

package/src/Tab/styles.ts

@@ -0,0 +1,107 @@
+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(({ breakpoints, palette }: Theme) => ({
+  MuiTab: {
+    root: {
+      minHeight: 0,
+      minWidth: 0,
+      lineHeight: 1,
+      textTransform: 'none',
+      padding: `${rem('9px')} 0 ${rem('7px')}`,
+      overflow: 'initial',
+
+      [breakpoints.up('md')]: {
+        padding: undefined,
+      },
+
+      color: palette.grey.dark,
+
+      [breakpoints.up('md')]: {
+        minWidth: 'auto',
+        fontSize: '1rem',
+      },
+    },
+    labelIcon: {
+      minHeight: 0,
+      paddingRight: '1.5rem',
+      paddingTop: rem('9px'),
+      '& $wrapper > *:first-child': {
+        position: 'absolute',
+        right: 0,
+        marginBottom: 0,
+      },
+    },
+    selected: {
+      color: palette.common.black,
+    },
+    textColorInherit: {
+      '&$disabled': {
+        color: palette.grey.main,
+      },
+    },
+    disabled: {},
+  },
+}))
+
+export default ({ sizes, palette, shadows, transitions }: Theme) =>
+  createStyles({
+    horizontal: {
+      paddingTop: 0,
+      '&:not(:last-child)': {
+        marginRight: '2em',
+      },
+    },
+    vertical: {
+      width: '100%',
+      borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
+      margin: '0.25rem 0',
+      overflow: 'hidden',
+      padding: '0.5rem 1rem',
+      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
+      textAlign: 'left',
+      backgroundColor: palette.grey.lighter,
+      opacity: 1,
+      color: palette.grey.dark,
+
+      '&:first-child': {
+        marginTop: '1rem',
+      },
+
+      '&:last-child': {
+        marginBottom: '1rem',
+      },
+
+      '&:hover': {
+        color: palette.common.black,
+      },
+
+      '&:hover:not($selected)': {
+        backgroundColor: palette.grey.lighter2,
+      },
+
+      '& $wrapper': {
+        display: 'block',
+      },
+    },
+    selected: {
+      '&$vertical': {
+        color: palette.common.black,
+        boxShadow: shadows[1],
+        backgroundColor: palette.grey.lightest,
+
+        '&::before': {
+          content: '""',
+          background: palette.blue.main,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '3px',
+        },
+      },
+    },
+    wrapper: {},
+  })