@xyo-network/react-appbar 3.0.1 → 3.0.3

package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx

@@ -1,6 +1,10 @@
 import { Divider, useTheme } from '@mui/material'
-import { Decorator, Meta, StoryFn } from '@storybook/react'
-import { FlexCol, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
+import {
+  FlexCol, FlexGrowCol, FlexRow,
+} from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { CollapsibleProvider, useCollapsible } from '../../contexts/index.ts'
@@ -21,11 +25,7 @@ const StorybookEntry = {
   argTypes: {},
   component: CollapsibleDrawer,
   decorators: [CollapseProviderDecorator],
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/CollapseDrawer',
 } as Meta<typeof CollapsibleDrawer>
 
@@ -48,9 +48,7 @@ const Template: StoryFn<typeof CollapsibleDrawer> = (args) => {
 }
 
 const Default = Template.bind({})
-Default.args = {
-  collapsedSize: '40px',
-}
+Default.args = { collapsedSize: '40px' }
 
 export { Default }
 

package/src/components/CollapsibleDrawer/CollapseToggle.tsx

@@ -1,5 +1,6 @@
 import { Icon, useTheme } from '@mui/material'
-import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import React, { useState } from 'react'
 // eslint-disable-next-line import-x/no-internal-modules
 import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
@@ -7,7 +8,9 @@ import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
 import { useCollapsible } from '../../contexts/index.ts'
 
 export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
-  const { collapse, setCollapse, setCollapseEnd } = useCollapsible()
+  const {
+    collapse, setCollapse, setCollapseEnd,
+  } = useCollapsible()
   const [hover, setHover] = useState(false)
   const theme = useTheme()
 

package/src/components/CollapsibleDrawer/CollapsibleDrawer.tsx

@@ -1,10 +1,15 @@
-import { Collapse, CollapseProps, styled, useTheme } from '@mui/material'
-import { WithChildren } from '@xylabs/react-shared'
+import type { CollapseProps } from '@mui/material'
+import {
+  Collapse, styled, useTheme,
+} from '@mui/material'
+import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
 import { useCollapsible } from '../../contexts/index.ts'
 
-export const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({ children, sx, ...props }) => {
+export const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({
+  children, sx, ...props
+}) => {
   const { collapse, setCollapseEnd } = useCollapsible()
   const theme = useTheme()
 

package/src/components/CollapsibleDrawer/storyExampleMenuData.tsx

@@ -15,7 +15,7 @@ import {
   // eslint-disable-next-line import-x/no-internal-modules
 } from 'react-icons/vsc'
 
-import { MenuListItemProps } from '../SiteMenu/index.ts'
+import type { MenuListItemProps } from '../SiteMenu/index.ts'
 
 export const menuDataTop: MenuListItemProps[] = [
   {
@@ -46,9 +46,15 @@ export const menuDataTop: MenuListItemProps[] = [
     icon: <VscServer fontSize="body1" />,
     primary: 'Archives',
     subNavListItems: [
-      { icon: <VscDashboard fontSize="body2" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },
-      { icon: <VscAdd fontSize="body2" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },
-      { icon: <VscTable fontSize="body2" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },
+      {
+        icon: <VscDashboard fontSize="body2" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.',
+      },
+      {
+        icon: <VscAdd fontSize="body2" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.',
+      },
+      {
+        icon: <VscTable fontSize="body2" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.',
+      },
     ],
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',

package/src/components/MobileSystemControls/SystemControls.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import React from 'react'
 
@@ -8,11 +8,7 @@ import { SystemControlsType } from './SystemControlsType.ts'
 const StorybookEntry: Meta = {
   argTypes: {},
   component: SystemControls,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/System/SystemControls',
 }
 

package/src/components/MobileSystemControls/SystemControls.tsx

@@ -2,7 +2,7 @@ import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { SystemControlsRoot } from './SystemControlsRoot.tsx'
-import { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'
+import type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'
 
 const SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {
   return (

package/src/components/MobileSystemControls/SystemControlsRoot.tsx

@@ -1,14 +1,13 @@
 import { styled } from '@mui/material'
 
 import { SystemControlsType } from './SystemControlsType.ts'
-import { SystemControlsUnstyled, SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'
+import type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'
+import { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'
 
 const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({
   // shared defaults
   ['&']: {
-    '.toggle': {
-      backgroundColor: theme.palette.primary.main,
-    },
+    '.toggle': { backgroundColor: theme.palette.primary.main },
     'alignItems': 'start',
     'zIndex': 1,
   },
@@ -42,9 +41,7 @@ const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControl
       flexDirection: 'column',
       padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
     },
-    '.control-wrap': {
-      marginBottom: `${theme.spacing(2)}`,
-    },
+    '.control-wrap': { marginBottom: `${theme.spacing(2)}` },
     '.toggle': {
       borderRadius: '0 5px 5px 0',
       padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,

package/src/components/MobileSystemControls/SystemControlsUnstyled.tsx

@@ -1,5 +1,7 @@
-import { Paper, Theme, useMediaQuery } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import type { Theme } from '@mui/material'
+import { Paper, useMediaQuery } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { NetworkSelectEx } from '@xyo-network/react-network'
 import React from 'react'
 

package/src/components/MobileSystemControls/controls/SystemControl.tsx

@@ -1,6 +1,8 @@
-import { Collapse, CollapseProps } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { WithChildren } from '@xylabs/react-shared'
+import type { CollapseProps } from '@mui/material'
+import { Collapse } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import type { WithChildren } from '@xylabs/react-shared'
 import React, { useState } from 'react'
 
 import { SystemControlsType } from '../SystemControlsType.ts'

package/src/components/MobileSystemControls/controls/SystemControlText.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@mui/material'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
 interface SystemControlTextProps extends FlexBoxProps {

package/src/components/SearchBar/SearchBar.tsx

@@ -1,21 +1,35 @@
 import { Search as SearchIcon } from '@mui/icons-material'
 import { Paper, TextField } from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
-import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import React, { useState } from 'react'
 
 export interface SearchBarProps extends FlexBoxProps {
   onSearch?: (term?: string) => void
 }
 
-export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {
+export const SearchBar: React.FC<SearchBarProps> = ({
+  defaultValue, onSearch, ...props
+}) => {
   const [term, setTerm] = useState<string>()
 
   return (
     <FlexRow alignItems="stretch" {...props}>
-      <Paper variant="elevation" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>
+      <Paper
+        variant="elevation"
+        elevation={0}
+        style={{
+          display: 'flex', overflow: 'hidden', width: '100%',
+        }}
+      >
         <TextField
-          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}
+          InputProps={{
+            color: 'secondary',
+            style: {
+              borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,
+            },
+          }}
           variant="outlined"
           size="small"
           defaultValue={defaultValue}
@@ -25,7 +39,12 @@ export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ..
             if (event.key === 'Enter') onSearch?.(term)
           }}
         />
-        <ButtonEx variant="contained" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color="secondary" onClick={() => onSearch?.(term)}>
+        <ButtonEx
+          variant="contained"
+          style={{ borderRadius: 0, borderTopLeftRadius: 0 }}
+          color="secondary"
+          onClick={() => onSearch?.(term)}
+        >
           <SearchIcon />
         </ButtonEx>
       </Paper>

package/src/components/SiteMenu/Menu.tsx

@@ -1,6 +1,9 @@
 import { Menu as MenuIcon, Settings as SettingsIcon } from '@mui/icons-material'
-import { IconButton, List, SwipeableDrawer } from '@mui/material'
-import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import {
+  IconButton, List, SwipeableDrawer,
+} from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import React, { useEffect, useState } from 'react'
 
 import { MenuListItemContainer } from './MenuListItem/index.ts'
@@ -11,7 +14,9 @@ export interface SiteMenuProps extends FlexBoxProps {
   side?: 'left' | 'right' | 'top' | 'bottom'
 }
 
-export const SiteMenu: React.FC<SiteMenuProps> = ({ children, onMenuToggle, side = 'right', ...props }) => {
+export const SiteMenu: React.FC<SiteMenuProps> = ({
+  children, onMenuToggle, side = 'right', ...props
+}) => {
   const [open, setOpen] = useState(false)
 
   useEffect(() => {

package/src/components/SiteMenu/MenuListItem/MenuListItemContainer.stories.tsx

@@ -1,20 +1,17 @@
 import { List } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 // eslint-disable-next-line import-x/no-internal-modules
 import { FaGlobeAmericas } from 'react-icons/fa'
 import { BrowserRouter } from 'react-router-dom'
 
-import { MenuListItemContainer, MenuListItemProps } from './MenuListItemContainer.tsx'
+import type { MenuListItemProps } from './MenuListItemContainer.tsx'
+import { MenuListItemContainer } from './MenuListItemContainer.tsx'
 
 const StorybookEntry = {
   argTypes: {},
   component: MenuListItemContainer,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/MenuListItemContainer',
 } as Meta<typeof MenuListItemContainer>
 
@@ -46,7 +43,9 @@ const WithChildren = Template.bind({})
 WithChildren.args = {
   icon: <FaGlobeAmericas />,
   primary: 'Explore',
-  subNavListItems: [{ primary: 'Explore', to: '/explore', tooltip: 'View global archivist data on a world map.' }],
+  subNavListItems: [{
+    primary: 'Explore', to: '/explore', tooltip: 'View global archivist data on a world map.',
+  }],
   tooltip: 'View global archivist data on a world map.',
 }
 

package/src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx

@@ -1,11 +1,14 @@
-import { ListItemProps, ListItemText, useTheme } from '@mui/material'
+import type { ListItemProps } from '@mui/material'
+import { ListItemText, useTheme } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { LinkEx } from '@xylabs/react-link'
 import React, { useState } from 'react'
 
 import { useCollapsible } from '../../../contexts/index.ts'
-import { MenuListItemBase, NavListItemProps } from '../lib/index.ts'
-import { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components/index.ts'
+import type { MenuListItemBase, NavListItemProps } from '../lib/index.ts'
+import {
+  ListItemTooltip, MenuIcon, MenuListItem,
+} from './list-item-components/index.ts'
 import { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav/index.ts'
 
 export interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {

package/src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx

@@ -1,4 +1,5 @@
-import { Tooltip, TooltipProps } from '@mui/material'
+import type { TooltipProps } from '@mui/material'
+import { Tooltip } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 // eslint-disable-next-line import-x/no-internal-modules

package/src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx

@@ -1,5 +1,7 @@
-import { Typography, TypographyProps } from '@mui/material'
-import React, { ReactNode } from 'react'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+import React from 'react'
 
 export interface MenuIconProps extends TypographyProps {
   icon?: ReactNode

package/src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx

@@ -1,18 +1,30 @@
-import { ListItem, ListItemProps } from '@mui/material'
+import type { ListItemProps } from '@mui/material'
+import { ListItem } from '@mui/material'
 import React from 'react'
 
-import { MenuListItemBase } from '../../lib/index.ts'
+import type { MenuListItemBase } from '../../lib/index.ts'
 
 export interface ListItemExProps extends MenuListItemBase, ListItemProps {}
 
-export const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
-  const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }
+export const MenuListItem: React.FC<ListItemExProps> = ({
+  iconOnly, collapseEnd, sx, children, dense, ...props
+}) => {
+  const listItemSx = iconOnly
+    ? {
+        borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto',
+      }
+    : { width: '100%' }
   // wait till collapseEnds to remove the spacing between items
   const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }
   // adjusts to the paddingY value which does NOT scale along the theme.spacing
   const paddingSx = dense ? { px: '8px' } : { px: '12px' }
   return (
-    <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>
+    <ListItem
+      sx={{
+        ...listItemSx, ...spacingSx, ...paddingSx, ...sx,
+      }}
+      {...props}
+    >
       {children}
     </ListItem>
   )

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx

@@ -1,8 +1,9 @@
-import { Collapse, CollapseProps, List } from '@mui/material'
-import { WithChildren } from '@xylabs/react-shared'
+import type { CollapseProps } from '@mui/material'
+import { Collapse, List } from '@mui/material'
+import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
-import { NavListItemProps } from '../../lib/index.ts'
+import type { NavListItemProps } from '../../lib/index.ts'
 
 export interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {
   collapse?: boolean
@@ -10,7 +11,9 @@ export interface SubNavListItemsCollapseProps extends WithChildren, CollapseProp
   subNavListItems?: NavListItemProps[]
 }
 
-export const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {
+export const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({
+  collapse, openSubNav, children, ...props
+}) => {
   return (
     <Collapse in={collapse == true ? false : openSubNav} {...props}>
       <List>{children}</List>

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx

@@ -1,5 +1,9 @@
-import { IconButton, IconButtonProps, useTheme } from '@mui/material'
-import React, { Dispatch, SetStateAction, SyntheticEvent } from 'react'
+import type { IconButtonProps } from '@mui/material'
+import { IconButton, useTheme } from '@mui/material'
+import type {
+  Dispatch, SetStateAction, SyntheticEvent,
+} from 'react'
+import React from 'react'
 // eslint-disable-next-line import-x/no-internal-modules
 import { VscChevronDown } from 'react-icons/vsc'
 export interface SubNavToggleIconButtonProps extends IconButtonProps {

package/src/components/SiteMenu/MenuSection.tsx

@@ -1,8 +1,10 @@
 import { Collapse, ListSubheader } from '@mui/material'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
-import { MenuListItemContainer, MenuListItemProps } from './MenuListItem/index.ts'
+import type { MenuListItemProps } from './MenuListItem/index.ts'
+import { MenuListItemContainer } from './MenuListItem/index.ts'
 
 export interface MenuSectionProps extends FlexBoxProps {
   iconMenuTextSpacing?: string
@@ -11,7 +13,9 @@ export interface MenuSectionProps extends FlexBoxProps {
   title: string
 }
 
-export const MenuSection: React.FC<MenuSectionProps> = ({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
+export const MenuSection: React.FC<MenuSectionProps> = ({
+  iconMenuTextSpacing, listItems, showTitle = true, title, ...props
+}) => {
   return (
     <FlexCol alignItems="stretch" {...props}>
       <Collapse in={showTitle} timeout={700}>

package/src/components/SiteMenu/hooks/useMenuItemsShared.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react'
 
 import { useCollapsible } from '../../../contexts/index.ts'
-import { MenuListItemProps } from '../MenuListItem/index.ts'
+import type { MenuListItemProps } from '../MenuListItem/index.ts'
 
 export type DefaultSiteMenuListItemProps = Pick<MenuListItemProps, 'collapseEnd' | 'dense' | 'iconOnly' | 'sx'>
 
 export const useMenuItemsShared = () => {
-  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible()
+  const {
+    collapse, collapseEnd, setCollapse, setCollapseEnd,
+  } = useCollapsible()
 
   const onMenuItemToggle = (open?: boolean) => {
     setCollapse?.(previous => (open ? false : previous))
@@ -18,9 +20,7 @@ export const useMenuItemsShared = () => {
       collapseEnd,
       dense: true,
       iconOnly: collapse,
-      sx: {
-        px: '8px',
-      },
+      sx: { px: '8px' },
     }),
     [collapse, collapseEnd],
   )

package/src/components/SiteMenu/lib/NavListItemProps.ts

@@ -1,6 +1,6 @@
-import { ListItemProps, ListItemTextProps } from '@mui/material'
-import { ReactNode } from 'react'
-import { To } from 'react-router-dom'
+import type { ListItemProps, ListItemTextProps } from '@mui/material'
+import type { ReactNode } from 'react'
+import type { To } from 'react-router-dom'
 
 export interface NavListItemProps {
   href?: string

package/src/components/Toolbar/Context/ContextToolbar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -7,11 +7,7 @@ import { ContextToolbar } from './ContextToolbar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ContextToolbar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/Toolbar/Context',
 } as Meta<typeof ContextToolbar>
 

package/src/components/Toolbar/Context/ContextToolbar.tsx

@@ -1,6 +1,7 @@
-import { Toolbar, ToolbarProps } from '@mui/material'
+import type { ToolbarProps } from '@mui/material'
+import { Toolbar } from '@mui/material'
 import React from 'react'
-import { To } from 'react-router-dom'
+import type { To } from 'react-router-dom'
 
 import { LogoLinkEx } from './LogoLinkEx.tsx'
 
@@ -9,7 +10,9 @@ export interface ContextToolbarProps extends ToolbarProps {
   version?: boolean
 }
 
-export const ContextToolbar: React.FC<ContextToolbarProps> = ({ logoTo = '/', version = false, ...props }) => {
+export const ContextToolbar: React.FC<ContextToolbarProps> = ({
+  logoTo = '/', version = false, ...props
+}) => {
   return (
     <Toolbar {...props}>
       <LogoLinkEx version={version} to={logoTo} />

package/src/components/Toolbar/Context/LogoLinkEx.tsx

@@ -1,6 +1,7 @@
 import { Typography, useTheme } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
-import { LinkEx, LinkExProps } from '@xylabs/react-link'
+import type { LinkExProps } from '@xylabs/react-link'
+import { LinkEx } from '@xylabs/react-link'
 import React from 'react'
 
 import { Logo } from './Logo.tsx'
@@ -9,7 +10,9 @@ export interface LogoLinkExProps extends LinkExProps {
   version?: boolean | string
 }
 
-export const LogoLinkEx: React.FC<LogoLinkExProps> = ({ to = '/', version = false, ...props }) => {
+export const LogoLinkEx: React.FC<LogoLinkExProps> = ({
+  to = '/', version = false, ...props
+}) => {
   const theme = useTheme()
   return (
     <LinkEx to={to} {...props}>

package/src/components/Toolbar/System/SystemToolbar.stories.tsx

@@ -1,8 +1,9 @@
 import { List } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import { TypographyEx } from '@xyo-network/react-shared'
-import React, { SyntheticEvent } from 'react'
+import type { SyntheticEvent } from 'react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
 import { MenuListItemContainer } from '../../SiteMenu/index.ts'
@@ -22,11 +23,7 @@ const DefaultMenu = (
 
 const StorybookEntry: Meta = {
   component: SystemToolbar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/Toolbar/System',
 }
 
@@ -56,6 +53,8 @@ WithOnMenuToggle.args = {
   onMenuToggle: state => console.log(state),
 }
 
-export { Default, PrecedingChildren, WithOnMenuToggle }
+export {
+  Default, PrecedingChildren, WithOnMenuToggle,
+}
 
 export default StorybookEntry

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -1,10 +1,14 @@
-import { Paper, Toolbar, ToolbarProps } from '@mui/material'
+import type { ToolbarProps } from '@mui/material'
+import { Paper, Toolbar } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { DarkModeIconButton } from '@xyo-network/react-app-settings'
-import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
-import React, { ReactNode } from 'react'
+import type { NetworkSelectExProps } from '@xyo-network/react-network'
+import { NetworkSelectEx } from '@xyo-network/react-network'
+import type { ReactNode } from 'react'
+import React from 'react'
 
-import { SiteMenu, SiteMenuProps } from '../../SiteMenu/index.ts'
+import type { SiteMenuProps } from '../../SiteMenu/index.ts'
+import { SiteMenu } from '../../SiteMenu/index.ts'
 
 export interface SystemToolbarProps extends ToolbarProps {
   darkModeButton?: boolean

package/src/contexts/Collapsible/State.ts

@@ -1,5 +1,5 @@
-import { ContextExState } from '@xyo-network/react-shared'
-import { Dispatch, SetStateAction } from 'react'
+import type { ContextExState } from '@xyo-network/react-shared'
+import type { Dispatch, SetStateAction } from 'react'
 
 export interface CollapsibleState extends ContextExState {
   collapse?: boolean

package/src/contexts/Collapsible/context.ts

@@ -1,5 +1,5 @@
 import { createContextEx } from '@xyo-network/react-shared'
 
-import { CollapsibleState } from './State.ts'
+import type { CollapsibleState } from './State.ts'
 
 export const CollapsibleContext = createContextEx<CollapsibleState>()