baseui 10.10.0 → 10.12.0

package/accordion/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 
 export type AccordionStateT = {
   expanded: Array<React.Key>,
@@ -23,13 +23,13 @@ export type StateChangeTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: AccordionStateT,
-  currentState: AccordionStateT,
+  currentState: AccordionStateT
 ) => AccordionStateT;
 
 export type PanelStateReducerT = (
   stateChangeType: StateChangeTypeT,
   nextState: PanelStateT,
-  currentState: PanelStateT,
+  currentState: PanelStateT
 ) => PanelStateT;
 
 export type AccordionOverridesT = {
@@ -51,13 +51,14 @@ export type PanelOverridesT = {
   ContentAnimationContainer?: OverrideT,
 };
 
-export type OnChangeHandlerT = ({expanded: boolean}) => mixed;
+export type OnChangeHandlerT = ({ expanded: boolean }) => mixed;
 
 export type AccordionOnChangeHandlerT = ({
   expanded: Array<React.Key>,
 }) => mixed;
 
-type ChildrenT = React.ChildrenArray<React.Element<*>>;
+//flowlint-next-line unclear-type:off
+type ChildrenT = React.ChildrenArray<React.Element<any>>;
 
 export type AccordionPropsT = {
   /** Determines how many panels may be expanded at a time. If set to
@@ -167,12 +168,11 @@ type SharedStatefulPanelContainerPropsT = {
   stateReducer?: PanelStateReducerT,
 };
 export type StatefulPanelContainerPropsT = SharedStatefulPanelContainerPropsT & {
-  children: (props: $Diff<PanelPropsT, {children: React.Node}>) => React.Node,
+  children: (props: $Diff<PanelPropsT, { children: React.Node }>) => React.Node,
 };
 
 // Props for stateful panel
-export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT &
-  SharedPanelPropsT;
+export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT & SharedPanelPropsT;
 
 export type SharedStylePropsArgT = {
   $color?: string,

package/app-nav-bar/app-nav-bar.js.flow

@@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
-import {Cell, Grid} from '../layout-grid/index.js';
-import {useStyletron} from '../styles/index.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Cell, Grid } from '../layout-grid/index.js';
+import { useStyletron } from '../styles/index.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-import {KIND, POSITION} from './constants.js';
+import { KIND, POSITION } from './constants.js';
 import MobileNav from './mobile-menu.js';
 import UserMenu from './user-menu.js';
 import {
@@ -25,17 +25,11 @@ import {
   StyledAppName,
   StyledMainMenuItem,
 } from './styled-components.js';
-import type {AppNavBarPropsT} from './types.js';
-import {defaultMapItemToNode, mapItemsActive} from './utils.js';
+import type { AppNavBarPropsT } from './types.js';
+import { defaultMapItemToNode, mapItemsActive } from './utils.js';
 
 function MainMenuItem(props) {
-  const {
-    item,
-    kind = KIND.primary,
-    mapItemToNode,
-    onSelect,
-    overrides = {},
-  } = props;
+  const { item, kind = KIND.primary, mapItemToNode, onSelect, overrides = {} } = props;
   const [focusVisible, setFocusVisible] = React.useState(false);
 
   function handleFocus(event) {
@@ -64,7 +58,7 @@ function MainMenuItem(props) {
 
   const [MainMenuItemElement, mainMenuItemElementProps] = getOverrides(
     overrides.MainMenuItem,
-    StyledMainMenuItem,
+    StyledMainMenuItem
   );
 
   return (
@@ -86,15 +80,15 @@ function MainMenuItem(props) {
 }
 
 function SecondaryMenu(props) {
-  const {items = [], mapItemToNode, onSelect, overrides = {}} = props;
+  const { items = [], mapItemToNode, onSelect, overrides = {} } = props;
 
   const [SubnavContainer, subnavContainerProps] = getOverrides(
     overrides.SubnavContainer,
-    StyledSubnavContainer,
+    StyledSubnavContainer
   );
   const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(
     overrides.SecondaryMenuContainer,
-    StyledSecondaryMenuContainer,
+    StyledSecondaryMenuContainer
   );
 
   return (
@@ -129,8 +123,8 @@ export default function AppNavBar(props: AppNavBarPropsT) {
   const {
     title,
     mapItemToNode = defaultMapItemToNode,
-    onMainItemSelect = item => {},
-    onUserItemSelect = item => {},
+    onMainItemSelect = (item) => {},
+    onUserItemSelect = (item) => {},
     overrides = {},
     userItems = [],
     username,
@@ -146,17 +140,11 @@ export default function AppNavBar(props: AppNavBarPropsT) {
   }, [props.mainItems, props.isMainItemActive]);
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-  const [Spacing, spacingProps] = getOverrides(
-    overrides.Spacing,
-    StyledSpacing,
-  );
-  const [AppName, appNameProps] = getOverrides(
-    overrides.AppName,
-    StyledAppName,
-  );
+  const [Spacing, spacingProps] = getOverrides(overrides.Spacing, StyledSpacing);
+  const [AppName, appNameProps] = getOverrides(overrides.AppName, StyledAppName);
   const [PrimaryMenuContainer, primaryMenuContainerProps] = getOverrides(
     overrides.PrimaryMenuContainer,
-    StyledPrimaryMenuContainer,
+    StyledPrimaryMenuContainer
   );
 
   let secondaryMenu;
@@ -176,9 +164,7 @@ export default function AppNavBar(props: AppNavBarPropsT) {
         <Grid>
           <Cell span={[4, 8, 0]}>
             <Spacing {...spacingProps}>
-              {mainItems.length || userItems.length ? (
-                <MobileNav {...props} />
-              ) : null}
+              {mainItems.length || userItems.length ? <MobileNav {...props} /> : null}
               <AppName {...appNameProps}>{title}</AppName>
             </Spacing>
           </Cell>
@@ -220,10 +206,8 @@ export default function AppNavBar(props: AppNavBarPropsT) {
                 if (item.active && item.children && item.children.length) {
                   secondaryMenu = item.children;
                   if (item.navPosition) {
-                    desktopSubNavPosition =
-                      item.navPosition.desktop || desktopSubNavPosition;
-                    mobileSubNavPosition =
-                      item.navPosition.mobile || mobileSubNavPosition;
+                    desktopSubNavPosition = item.navPosition.desktop || desktopSubNavPosition;
+                    mobileSubNavPosition = item.navPosition.mobile || mobileSubNavPosition;
                   }
                 }
                 return (

package/app-nav-bar/index.js.flow

@@ -6,12 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as AppNavBar} from './app-nav-bar.js';
-export {POSITION} from './constants.js';
+export { default as AppNavBar } from './app-nav-bar.js';
+export { POSITION } from './constants.js';
 export * from './styled-components.js';
 export * from './types.js';
 
-export {setItemActive} from './utils.js';
+export { setItemActive } from './utils.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/app-nav-bar/mobile-menu.js

@@ -69,7 +69,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 var USER_MENU_ITEM = 'USER_MENU_ITEM';
-var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
+var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
+
 var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
       _props$mapItemToNode = props.mapItemToNode,
@@ -150,21 +151,18 @@ function MobileMenu(props) {
   var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SideMenuButton, _index.Button),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       SideMenuButton = _getOverrides4[0],
-      sideMenuButtonProps = _getOverrides4[1]; // $FlowFixMe
-
+      sideMenuButtonProps = _getOverrides4[1];
 
   sideMenuButtonProps.overrides = (0, _overrides.mergeOverrides)({
     BaseButton: {
       component: _styledComponents.StyledSideMenuButton
     }
-  }, // $FlowFixMe
-  sideMenuButtonProps.overrides);
+  }, sideMenuButtonProps.overrides);
 
   var _getOverrides5 = (0, _overrides.getOverrides)(overrides.MobileDrawer, _index2.Drawer),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       MobileDrawer = _getOverrides6[0],
-      drawerProps = _getOverrides6[1]; // $FlowFixMe
-
+      drawerProps = _getOverrides6[1];
 
   drawerProps.overrides = (0, _overrides.mergeOverrides)({
     DrawerBody: {
@@ -182,14 +180,12 @@ function MobileMenu(props) {
     Close: function Close() {
       return null;
     }
-  }, // $FlowFixMe
-  drawerProps.overrides);
+  }, drawerProps.overrides);
 
   var _getOverrides7 = (0, _overrides.getOverrides)(overrides.MobileMenu, _index4.StatefulMenu),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       MobileMenu = _getOverrides8[0],
-      menuProps = _getOverrides8[1]; // $FlowFixMe
-
+      menuProps = _getOverrides8[1];
 
   menuProps.overrides = (0, _overrides.mergeOverrides)({
     List: {
@@ -200,6 +196,7 @@ function MobileMenu(props) {
         boxShadow: 'none'
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
       return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({
         ref: ref
@@ -208,8 +205,7 @@ function MobileMenu(props) {
         overrides: overrides
       }));
     })
-  }, // $FlowFixMe
-  menuProps.overrides);
+  }, menuProps.overrides);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuButton, _extends({
     onClick: toggleMenu
   }, sideMenuButtonProps), /*#__PURE__*/React.createElement(_menu.default, {

package/app-nav-bar/mobile-menu.js.flow

@@ -8,37 +8,30 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button} from '../button/index.js';
-import {Drawer, ANCHOR} from '../drawer/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { Button } from '../button/index.js';
+import { Drawer, ANCHOR } from '../drawer/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import ArrowLeft from '../icon/arrow-left.js';
 import MenuIcon from '../icon/menu.js';
-import {MenuAdapter, ListItemLabel, ARTWORK_SIZES} from '../list/index.js';
-import {StatefulMenu} from '../menu/index.js';
-
-import {
-  StyledSideMenuButton,
-  StyledUserMenuProfileListItem,
-} from './styled-components.js';
-import type {AppNavBarPropsT} from './types.js';
+import { MenuAdapter, ListItemLabel, ARTWORK_SIZES } from '../list/index.js';
+import { StatefulMenu } from '../menu/index.js';
+
+import { StyledSideMenuButton, StyledUserMenuProfileListItem } from './styled-components.js';
+import type { AppNavBarPropsT } from './types.js';
 import UserProfileTile from './user-profile-tile.js';
-import {defaultMapItemToNode} from './utils.js';
+import { defaultMapItemToNode } from './utils.js';
 
 const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 const USER_MENU_ITEM = 'USER_MENU_ITEM';
 const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
 
+// eslint-disable-next-line react/display-name
 const MobileNavMenuItem = React.forwardRef((props, ref) => {
-  const {
-    item,
-    mapItemToNode = defaultMapItemToNode,
-    overrides = {},
-    ...restProps
-  } = props;
+  const { item, mapItemToNode = defaultMapItemToNode, overrides = {}, ...restProps } = props;
 
   const [UserMenuProfileListItem, userMenuProfileListItemProps] = getOverrides(
     overrides.UserMenuProfileListItem,
-    StyledUserMenuProfileListItem,
+    StyledUserMenuProfileListItem
   );
 
   if (item.PARENT_MENU_ITEM) {
@@ -56,11 +49,7 @@ const MobileNavMenuItem = React.forwardRef((props, ref) => {
   if (item.USER_TITLE_ITEM) {
     // Replace with a user menu item renderer
     return (
-      <UserMenuProfileListItem
-        {...restProps}
-        {...userMenuProfileListItemProps}
-        ref={ref}
-      >
+      <UserMenuProfileListItem {...restProps} {...userMenuProfileListItemProps} ref={ref}>
         <UserProfileTile {...item.item} />
       </UserMenuProfileListItem>
     );
@@ -79,22 +68,16 @@ const MobileNavMenuItem = React.forwardRef((props, ref) => {
 });
 
 export default function MobileMenu(props: AppNavBarPropsT) {
-  const {
-    mainItems = [],
-    userItems = [],
-    mapItemToNode,
-    overrides = {},
-    ...rest
-  } = props;
+  const { mainItems = [], userItems = [], mapItemToNode, overrides = {}, ...rest } = props;
 
   const items = [
     ...(userItems.length
       ? [
           {
-            item: {...rest},
+            item: { ...rest },
             label: props.username,
             [USER_TITLE_ITEM]: true,
-            children: userItems.map(item => {
+            children: userItems.map((item) => {
               return {
                 ...item,
                 [USER_MENU_ITEM]: true,
@@ -114,26 +97,17 @@ export default function MobileMenu(props: AppNavBarPropsT) {
     setIsOpen(!isOpen);
   };
 
-  const [SideMenuButton, sideMenuButtonProps] = getOverrides(
-    overrides.SideMenuButton,
-    Button,
-  );
-  // $FlowFixMe
+  const [SideMenuButton, sideMenuButtonProps] = getOverrides(overrides.SideMenuButton, Button);
   sideMenuButtonProps.overrides = mergeOverrides(
-    {BaseButton: {component: StyledSideMenuButton}},
-    // $FlowFixMe
-    sideMenuButtonProps.overrides,
+    { BaseButton: { component: StyledSideMenuButton } },
+    sideMenuButtonProps.overrides
   );
 
-  const [MobileDrawer, drawerProps] = getOverrides(
-    overrides.MobileDrawer,
-    Drawer,
-  );
-  // $FlowFixMe
+  const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer);
   drawerProps.overrides = mergeOverrides(
     {
       DrawerBody: {
-        style: ({$theme}) => {
+        style: ({ $theme }) => {
           return {
             marginTop: '0px',
             marginBottom: '0px',
@@ -145,15 +119,10 @@ export default function MobileMenu(props: AppNavBarPropsT) {
       // Removes the close icon from the drawer
       Close: () => null,
     },
-    // $FlowFixMe
-    drawerProps.overrides,
+    drawerProps.overrides
   );
 
-  const [MobileMenu, menuProps] = getOverrides(
-    overrides.MobileMenu,
-    StatefulMenu,
-  );
-  // $FlowFixMe
+  const [MobileMenu, menuProps] = getOverrides(overrides.MobileMenu, StatefulMenu);
   menuProps.overrides = mergeOverrides(
     {
       List: {
@@ -164,6 +133,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
           boxShadow: 'none',
         },
       },
+      // eslint-disable-next-line react/display-name
       ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <MobileNavMenuItem
@@ -175,8 +145,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
         );
       }),
     },
-    // $FlowFixMe
-    menuProps.overrides,
+    menuProps.overrides
   );
 
   return (
@@ -193,13 +162,13 @@ export default function MobileMenu(props: AppNavBarPropsT) {
       >
         <MobileMenu
           items={currentNavItems}
-          onItemSelect={({item}) => {
+          onItemSelect={({ item }) => {
             if (item.PARENT_MENU_ITEM) {
               // Remove current parent item selected to return to
               // from the ancestors list (`ancestorNavItems[ancestorArrLength - 1]`)
               const updatedAncestorNavItems = ancestorNavItems.slice(
                 0,
-                ancestorNavItems.length - 1,
+                ancestorNavItems.length - 1
               );
               const isTopLevel = !updatedAncestorNavItems.length;
               if (isTopLevel) {
@@ -207,9 +176,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
                 setCurrentNavItems(items);
               } else {
                 const newParentItem = {
-                  ...updatedAncestorNavItems[
-                    updatedAncestorNavItems.length - 1
-                  ],
+                  ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
                   [PARENT_MENU_ITEM]: true,
                 };
                 setCurrentNavItems([newParentItem, ...newParentItem.children]);
@@ -225,7 +192,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
             }
 
             if (item.children && item.children.length) {
-              const parentItem = {...item, [PARENT_MENU_ITEM]: true};
+              const parentItem = { ...item, [PARENT_MENU_ITEM]: true };
               setAncestorNavItems([...ancestorNavItems, item]);
               setCurrentNavItems([parentItem, ...item.children]);
               return;

package/app-nav-bar/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, withStyle} from '../styles/index.js';
-import {StyledListItem} from '../menu/index.js';
-import {KIND} from './constants.js';
+import { styled, withStyle } from '../styles/index.js';
+import { StyledListItem } from '../menu/index.js';
+import { KIND } from './constants.js';
 
-const StyledButton = styled<{$isFocusVisible: boolean}>(
+const StyledButton = styled<{ $isFocusVisible: boolean }>(
   'button',
-  ({$theme, $isFocusVisible}) => ({
+  ({ $theme, $isFocusVisible }) => ({
     boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'row',
@@ -37,11 +37,11 @@ const StyledButton = styled<{$isFocusVisible: boolean}>(
     outlineOffset: '-3px',
     WebkitAppearance: 'none',
     cursor: 'pointer',
-  }),
+  })
 );
 
-export const StyledRoot = styled<{}>('div', props => {
-  const {$theme} = props;
+export const StyledRoot = styled<{}>('div', (props) => {
+  const { $theme } = props;
   return {
     ...$theme.typography.font300,
     boxSizing: 'border-box',
@@ -51,15 +51,15 @@ export const StyledRoot = styled<{}>('div', props => {
   };
 });
 
-export const StyledSubnavContainer = styled<{}>('div', ({$theme}) => {
+export const StyledSubnavContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)',
   };
 });
 
-export const StyledSpacing = styled<{}>('div', props => {
-  const {$theme} = props;
+export const StyledSpacing = styled<{}>('div', (props) => {
+  const { $theme } = props;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -74,7 +74,7 @@ export const StyledSpacing = styled<{}>('div', props => {
   };
 });
 
-export const StyledAppName = styled<{}>('div', ({$theme}) => ({
+export const StyledAppName = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font550,
   color: $theme.colors.primary,
   textDecoration: 'none',
@@ -85,18 +85,18 @@ export const StyledAppName = styled<{}>('div', ({$theme}) => ({
 
 export const StyledSideMenuButton = withStyle<typeof StyledButton, {}>(
   StyledButton,
-  ({$theme}) => ({
+  ({ $theme }) => ({
     ...($theme.direction === 'rtl'
-      ? {marginLeft: $theme.sizing.scale600}
-      : {marginRight: $theme.sizing.scale600}),
+      ? { marginLeft: $theme.sizing.scale600 }
+      : { marginRight: $theme.sizing.scale600 }),
     paddingTop: $theme.sizing.scale100,
     paddingBottom: $theme.sizing.scale100,
     paddingLeft: $theme.sizing.scale100,
     paddingRight: $theme.sizing.scale100,
-  }),
+  })
 );
 
-export const StyledPrimaryMenuContainer = styled<{}>('div', ({$theme}) => {
+export const StyledPrimaryMenuContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -112,12 +112,12 @@ export const StyledMainMenuItem = styled<{
   $active?: boolean,
   $isFocusVisible: boolean,
   $kind: $Values<typeof KIND>,
-}>('div', props => {
+}>('div', (props) => {
   const {
     $active,
     $isFocusVisible,
     $kind,
-    $theme: {colors, sizing, direction},
+    $theme: { colors, sizing, direction },
   } = props;
   return {
     boxSizing: 'border-box',
@@ -132,15 +132,14 @@ export const StyledMainMenuItem = styled<{
     outlineOffset: '-3px',
     borderBottomWidth: '2px',
     borderBottomStyle: 'solid',
-    borderBottomColor:
-      $active && !$isFocusVisible ? colors.primary : 'transparent',
+    borderBottomColor: $active && !$isFocusVisible ? colors.primary : 'transparent',
     cursor: $active ? 'default' : 'pointer',
     whiteSpace: $kind === KIND.secondary ? 'nowrap' : 'initial',
     ':first-child': {
-      ...(direction === 'rtl' ? {marginRight: '0'} : {marginLeft: '0'}),
+      ...(direction === 'rtl' ? { marginRight: '0' } : { marginLeft: '0' }),
     },
     ':last-child': {
-      ...(direction === 'rtl' ? {marginLeft: '0'} : {marginRight: '0'}),
+      ...(direction === 'rtl' ? { marginLeft: '0' } : { marginRight: '0' }),
     },
     ':hover': {
       color: colors.primary,
@@ -148,7 +147,7 @@ export const StyledMainMenuItem = styled<{
   };
 });
 
-export const StyledSecondaryMenuContainer = styled<{}>('div', ({$theme}) => {
+export const StyledSecondaryMenuContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -163,16 +162,16 @@ export const StyledSecondaryMenuContainer = styled<{}>('div', ({$theme}) => {
 
 export const StyledUserMenuButton = StyledButton;
 
-export const StyledUserMenuProfileListItem = withStyle<
-  typeof StyledListItem,
-  {},
->(StyledListItem, ({$theme}) => ({
-  paddingTop: '0',
-  paddingBottom: '0',
-  ...($theme.direction === 'rtl' ? {paddingLeft: '0'} : {paddingRight: '0'}),
-}));
+export const StyledUserMenuProfileListItem = withStyle<typeof StyledListItem, {}>(
+  StyledListItem,
+  ({ $theme }) => ({
+    paddingTop: '0',
+    paddingBottom: '0',
+    ...($theme.direction === 'rtl' ? { paddingLeft: '0' } : { paddingRight: '0' }),
+  })
+);
 
-export const StyledUserProfileTileContainer = styled<{}>('div', ({$theme}) => {
+export const StyledUserProfileTileContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -185,18 +184,15 @@ export const StyledUserProfileTileContainer = styled<{}>('div', ({$theme}) => {
   };
 });
 
-export const StyledUserProfilePictureContainer = styled<{}>(
-  'div',
-  ({$theme}) => {
-    return {
-      ...($theme.direction === 'rtl'
-        ? {marginLeft: $theme.sizing.scale600}
-        : {marginRight: $theme.sizing.scale600}),
-    };
-  },
-);
+export const StyledUserProfilePictureContainer = styled<{}>('div', ({ $theme }) => {
+  return {
+    ...($theme.direction === 'rtl'
+      ? { marginLeft: $theme.sizing.scale600 }
+      : { marginRight: $theme.sizing.scale600 }),
+  };
+});
 
-export const StyledUserProfileInfoContainer = styled<{}>('div', ({$theme}) => {
+export const StyledUserProfileInfoContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     alignSelf: 'center',