diff --git a/package.json b/package.json
index f5abe3cf..d6e0636c 100644
--- a/package.json
+++ b/package.json
@@ -48,13 +48,11 @@
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.34.2",
     "highlight.js": "11.9.0",
     "honorable-recipe-mapper": "0.2.0",
     "immer": "10.0.3",
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
-    "prop-types": "15.8.1",
     "react-animate-height": "3.2.3",
     "react-aria": "3.31.1",
     "react-embed": "3.7.0",
@@ -148,4 +146,4 @@
       "eslint --fix --ext ts,tsx,js,jsx"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
deleted file mode 100644
index 3cdcea2e..00000000
--- a/src/components/InfoPanel.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// TODO: Replace grommet Layer with semi-compatible replacement ./Layer.tsx
-// Not sure if we need to support `plain` prop
-import { Layer } from 'grommet'
-import { Div, Flex, Span } from 'honorable'
-
-import { Card, CloseIcon, IconFrame } from '../index'
-
-export default function InfoPanel({
-  title,
-  onClose = () => {},
-  width = 420,
-  marginTop = '0',
-  contentHeight = 300,
-  contentPadding = 0,
-  contentGap = 0,
-  children,
-}: {
-  title: string
-  onClose?: () => void
-  width?: number | string
-  marginTop?: string
-  contentHeight?: number | string
-  contentPadding?: number | string
-  contentGap?: number | string
-  children?: JSX.Element | JSX.Element[] | string
-}) {
-  return (
-    <Layer
-      plain
-      onClickOutside={onClose}
-      position="top-right"
-      margin={{ top: marginTop }}
-    >
-      <Card
-        fillLevel={2}
-        width={width}
-        overflow="hidden"
-        margin="large"
-      >
-        <Div
-          padding="medium"
-          borderBottom="1px solid border-fill-two"
-        >
-          <Flex
-            align="center"
-            justify="space-between"
-          >
-            <Span
-              fontSize={18}
-              fontWeight={500}
-              lineHeight="24px"
-            >
-              {title}
-            </Span>
-            <IconFrame
-              clickable
-              icon={<CloseIcon />}
-              onClick={() => onClose()}
-            />
-          </Flex>
-        </Div>
-        <Flex
-          direction="column"
-          overflowY="auto"
-          gap={contentGap}
-          padding={contentPadding}
-          height={contentHeight}
-        >
-          {children}
-        </Flex>
-      </Card>
-    </Layer>
-  )
-}
diff --git a/src/index.ts b/src/index.ts
index e9a702f2..c493f9bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -42,7 +42,6 @@ export { default as ProgressBar } from './components/ProgressBar'
 export { default as Prop } from './components/Prop'
 export { default as PropWide } from './components/PropWide'
 export { default as PropsContainer } from './components/PropsContainer'
-export { default as InfoPanel } from './components/InfoPanel'
 export { default as UserDetails } from './components/UserDetails'
 export { default as Radio } from './components/Radio'
 export { default as RadioGroup } from './components/RadioGroup'