feat: Add the Kdb element

design-system/elements/index.tsx

@@ -37,6 +37,7 @@ export {
 } from './icon'
 export { InputWrapper, Input } from './input'
 export { Em } from './italic'
+export { Kbd } from './kbd'
 export { Label } from './label'
 export { Ul, Ol, Li } from './list'
 export { Nav, navigation } from './navigation'

design-system/elements/kbd/index.tsx

@@ -0,0 +1 @@
+export { Kbd } from './kbd'

design-system/elements/kbd/kbd.styles.tsx

@@ -0,0 +1,33 @@
+import { cva } from '@/styled-system/css'
+import { sharedTransitionProperties } from '../../utils'
+
+export const kbd = cva({
+  base: {
+    display: 'inline-block',
+    minWidth: '2em',
+    paddingY: '2xs',
+    paddingX: 'calc(1em / 2)',
+    borderRadius: 'xs',
+    border: 'gray.subtle',
+    color: 'gray.400',
+    backgroundColor: 'gray.800',
+    boxShadow: 'neumorphism.closer',
+    fontFamily: 'heading',
+    fontWeight: 'bold',
+    fontSize: {
+      base: '4xs',
+      md: '3xs',
+      lg: '2xs',
+      '2xl': 'xs'
+    },
+    lineHeight: {
+      base: '4xs',
+      md: '3xs',
+      lg: '2xs',
+      '2xl': 'xs'
+    },
+    textAlign: 'center',
+    transitionProperty: 'border-color, background-color, box-shadow, color',
+    ...sharedTransitionProperties
+  }
+})

design-system/elements/kbd/kbd.tsx

@@ -0,0 +1,4 @@
+import { styled } from '@/styled-system/jsx'
+import { kbd } from './kbd.styles'
+
+export const Kbd = styled('kbd', kbd)

design-system/index.tsx

@@ -35,6 +35,7 @@ export {
   Input,
   InputWrapper,
   Instagram,
+  Kbd,
   Label,
   Li,
   Link,

mdx-components.tsx

@@ -16,6 +16,7 @@ import {
   Hr,
   Image,
   InlineCode,
+  Kbd,
   Li,
   LinkOrA,
   Ol,
@@ -146,7 +147,8 @@ const customComponents: MDXComponents = {
     <Callout {...props} css={verticalRhythm.marginBottom.m}>
       {children}
     </Callout>
-  )
+  ),
+  Kbd: ({ children }) => <Kbd>{children}</Kbd>
 }
 
 export function getMDXComponents(page: Pages, slug: string): MDXComponents {