Update shared components in `Toolbar`

src/annotator/components/Toolbar.js

-import { IconButton } from '@hypothesis/frontend-shared';
+import {
+  ButtonBase,
+  AnnotateIcon,
+  CancelIcon,
+  CaretRightIcon,
+  CaretLeftIcon,
+  HideIcon,
+  NoteIcon,
+  ShowIcon,
+} from '@hypothesis/frontend-shared/lib/next';
 import classnames from 'classnames';
 
 /**
- * @typedef {import("@hypothesis/frontend-shared/lib/components/buttons").IconButtonProps} IconButtonProps
- *
- * @typedef {Omit<IconButtonProps, "className">} ToolbarButtonProps
+ * @typedef {import('@hypothesis/frontend-shared/lib/types').PresentationalProps} PresentationalProps
+ * @typedef {import('@hypothesis/frontend-shared/lib/components/input/ButtonBase').ButtonCommonProps} ButtonCommonProps
+ * @typedef {Omit<import('preact').JSX.HTMLAttributes<HTMLButtonElement>, 'icon'|'size'>} HTMLButtonAttributes
+ * @typedef {import('@hypothesis/frontend-shared/lib/types').IconComponent} IconComponent
  */
 
 /**
  * Style an IconButton for use on the Toolbar
  *
- * @param {ToolbarButtonProps} props
+ * @param {PresentationalProps & ButtonCommonProps & HTMLButtonAttributes & {icon: IconComponent}} props
  */
-function ToolbarButton({ ...buttonProps }) {
-  const { icon, title, ...restProps } = buttonProps;
+function ToolbarButton({ icon: Icon, ...buttonProps }) {
   return (
-    <IconButton
-      className={classnames(
+    <ButtonBase
+      classes={classnames(
         'w-[30px] h-[30px]', // These buttons have precise dimensions
         'rounded-px', // size of border radius in absolute units
         'flex items-center justify-center',
         'border bg-white text-grey-6 hover:text-grey-9',
         'shadow transition-colors'
       )}
-      icon={icon}
-      title={title}
-      {...restProps}
-    />
+      {...buttonProps}
+    >
+      <Icon />
+    </ButtonBase>
   );
 }
 
@@ -71,7 +80,7 @@ function StatusNotifier({ highlightsVisible }) {
  *   Callback to toggle visibility of highlights in the document.
  * @prop {() => void} toggleSidebar -
  *   Callback to toggle the visibility of the sidebar.
- * @prop {import("preact").Ref<HTMLButtonElement>} [toggleSidebarRef] -
+ * @prop {import("preact").RefObject<HTMLElement>} [toggleSidebarRef] -
  *   Ref that gets set to the toolbar button for toggling the sidebar.
  *   This is exposed to enable the drag-to-resize functionality of this
  *   button.
@@ -114,8 +123,8 @@ export default function Toolbar({
           absolutely positioned some way down the edge of the sidebar.
       */}
       {useMinimalControls && isSidebarOpen && (
-        <IconButton
-          className={classnames(
+        <ButtonBase
+          classes={classnames(
             'w-[27px] h-[27px] mt-[140px] ml-px-1.5',
             'flex items-center justify-center bg-white border',
             'text-grey-6 hover:text-grey-9 transition-colors',
@@ -126,32 +135,34 @@ export default function Toolbar({
             'shadow-sidebar'
           )}
           title="Close annotation sidebar"
-          icon="cancel"
           onClick={closeSidebar}
-        />
+        >
+          <CancelIcon />
+        </ButtonBase>
       )}
       {!useMinimalControls && (
         <>
-          <IconButton
-            className={classnames(
+          <ButtonBase
+            classes={classnames(
               // Height and width to align with the sidebar's top bar
-              'h-[40px] w-[33px] pl-px-1.5',
+              'h-[40px] w-[33px] pl-[6px]',
               'bg-white text-grey-5 hover:text-grey-9',
               // Turn on left and bottom borders to continue the
               // border of the sidebar's top bar
               'border-l border-b'
             )}
-            buttonRef={toggleSidebarRef}
+            elementRef={toggleSidebarRef}
             title="Annotation sidebar"
-            icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
             expanded={isSidebarOpen}
             pressed={isSidebarOpen}
             onClick={toggleSidebar}
-          />
+          >
+            {isSidebarOpen ? <CaretRightIcon /> : <CaretLeftIcon />}
+          </ButtonBase>
           <div className="space-y-px-1.5 mt-px-2">
             <ToolbarButton
               title="Show highlights"
-              icon={showHighlights ? 'show' : 'hide'}
+              icon={showHighlights ? ShowIcon : HideIcon}
               selected={showHighlights}
               onClick={toggleHighlights}
             />
@@ -161,7 +172,7 @@ export default function Toolbar({
                   ? 'New page note'
                   : 'New annotation'
               }
-              icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
+              icon={newAnnotationType === 'note' ? NoteIcon : AnnotateIcon}
               onClick={createAnnotation}
             />
           </div>