diff --git a/components/package.json b/components/package.json
index 23c8fc4c..e381084a 100644
--- a/components/package.json
+++ b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
index 1a01b08c..a7e89325 100644
--- a/components/src/components/atoms/Avatar/Avatar.tsx
+++ b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -61,8 +61,8 @@ const Container = styled.div<Container>(
   `,
 )
 
-const Placeholder = styled.div<{ $url?: string }>(
-  ({ theme, $url }) => css`
+const Placeholder = styled.div<{ $url?: string; $disabled: boolean }>(
+  ({ theme, $url, $disabled }) => css`
     background: ${$url || theme.colors.gradients.blue};
 
     display: flex;
@@ -70,11 +70,16 @@ const Placeholder = styled.div<{ $url?: string }>(
     justify-content: center;
     width: 100%;
     height: 100%;
+
+    ${$disabled &&
+    css`
+      filter: grayscale(1);
+    `}
   `,
 )
 
-const Img = styled.img<{ $shown: boolean }>(
-  ({ $shown }) => css`
+const Img = styled.img<{ $shown: boolean; $disabled: boolean }>(
+  ({ $shown, $disabled }) => css`
     height: 100%;
     width: 100%;
     object-fit: cover;
@@ -84,6 +89,11 @@ const Img = styled.img<{ $shown: boolean }>(
     css`
       display: block;
     `}
+
+    ${$disabled &&
+    css`
+      filter: grayscale(1);
+    `}
   `,
 )
 
@@ -98,6 +108,8 @@ export type Props = {
   shape?: Shape
   /** A placeholder for the image to use when not loaded, in css format (e.g. url("https://example.com")) */
   placeholder?: string
+  /** If true sets the component into disabled format. */
+  disabled?: boolean
 } & Omit<NativeImgAttributes, 'alt' | 'onError' | 'children' | 'onError'>
 
 export const Avatar = ({
@@ -107,6 +119,7 @@ export const Avatar = ({
   src,
   placeholder,
   decoding = 'async',
+  disabled = false,
   ...props
 }: Props) => {
   const ref = React.useRef<HTMLImageElement>(null)
@@ -138,9 +151,16 @@ export const Avatar = ({
 
   return (
     <Container $noBorder={!showImage || noBorder} $shape={shape}>
-      {!showImage && <Placeholder $url={placeholder} aria-label={label} />}
+      {!showImage && (
+        <Placeholder
+          $disabled={disabled}
+          $url={placeholder}
+          aria-label={label}
+        />
+      )}
       <Img
         {...props}
+        $disabled={disabled}
         $shown={showImage}
         alt={label}
         decoding={decoding}
diff --git a/components/src/components/molecules/PageButtons/PageButtons.tsx b/components/src/components/molecules/PageButtons/PageButtons.tsx
index f5f4ea45..bbd1d138 100644
--- a/components/src/components/molecules/PageButtons/PageButtons.tsx
+++ b/components/src/components/molecules/PageButtons/PageButtons.tsx
@@ -5,17 +5,25 @@ import { getTestId } from '../../../utils/utils'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
+type Size = 'small' | 'medium'
+
 type Props = {
   /** Total number of pages */
   total: number
   current: number
   /** Maximum number of buttons to show */
   max?: number
+  size?: Size
   alwaysShowFirst?: boolean
   alwaysShowLast?: boolean
+  showEllipsis?: boolean
   onChange: (value: number) => void
 } & Omit<NativeDivProps, 'children' | 'onChange'>
 
+enum Marker {
+  ellipsis = -1,
+}
+
 const Container = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -27,8 +35,8 @@ const Container = styled.div(
   `,
 )
 
-const PageButton = styled.button<{ $selected?: boolean }>(
-  ({ theme, $selected }) => css`
+const PageButton = styled.button<{ $selected?: boolean; $size: Size }>(
+  ({ theme, $selected, $size }) => css`
     background-color: transparent;
     transition: all 0.15s ease-in-out;
     cursor: pointer;
@@ -37,21 +45,26 @@ const PageButton = styled.button<{ $selected?: boolean }>(
           background-color: ${theme.colors.background};
           cursor: default;
           pointer-events: none;
+          color: ${theme.colors.accent};
         `
       : css`
+          color: ${theme.colors.text};
           &:hover {
             background-color: ${theme.colors.foregroundSecondary};
           }
         `}
 
-    border-radius: ${theme.radii['extraLarge']};
+    border-radius: ${$size === 'small'
+      ? theme.space['2']
+      : theme.radii['extraLarge']};
     border: 1px solid ${theme.colors.borderSecondary};
-    min-width: ${theme.space['10']};
+    min-width: ${$size === 'small' ? theme.space['9'] : theme.space['10']};
     padding: ${theme.space['2']};
-    height: ${theme.space['10']};
-    font-size: ${theme.fontSizes['small']};
+    height: ${$size === 'small' ? theme.space['9'] : theme.space['10']};
+    font-size: ${$size === 'small'
+      ? theme.space['3.5']
+      : theme.fontSizes['small']};
     font-weight: ${theme.fontWeights['medium']};
-    color: ${theme.colors.text};
   `,
 )
 
@@ -67,8 +80,10 @@ export const PageButtons = ({
   total,
   current,
   max = 5,
+  size = 'medium',
   alwaysShowFirst,
   alwaysShowLast,
+  showEllipsis = true,
   onChange,
   ...props
 }: Props) => {
@@ -77,23 +92,31 @@ export const PageButtons = ({
     Math.min(Math.max(current - maxPerSide, 1), total - max + 1),
     1,
   )
-  const array = Array.from({ length: max }, (_, i) => start + i).filter(
+  const pageNumbers = Array.from({ length: max }, (_, i) => start + i).filter(
     (x) => x <= total,
   )
 
   if (total > max) {
     if (alwaysShowFirst && start > 1) {
-      array[0] = -1
-      array.unshift(1)
-    } else if (start > 1) {
-      array.unshift(-1)
+      if (showEllipsis) {
+        pageNumbers[0] = Marker.ellipsis
+        pageNumbers.unshift(1)
+      } else {
+        pageNumbers[0] = 1
+      }
+    } else if (showEllipsis && start > 1) {
+      pageNumbers.unshift(Marker.ellipsis)
     }
 
     if (alwaysShowLast && total > current + maxPerSide) {
-      array[array.length - 1] = -1 * total
-      array.push(total)
-    } else if (total > current + maxPerSide) {
-      array.push(-1 * total)
+      if (showEllipsis) {
+        pageNumbers[pageNumbers.length - 1] = Marker.ellipsis
+        pageNumbers.push(total)
+      } else {
+        pageNumbers[pageNumbers.length - 1] = total
+      }
+    } else if (showEllipsis && total > current + maxPerSide) {
+      pageNumbers.push(Marker.ellipsis)
     }
   }
 
@@ -101,14 +124,16 @@ export const PageButtons = ({
     <Container
       {...{ ...props, 'data-testid': getTestId(props, 'pagebuttons') }}
     >
-      {array.map((value) =>
-        0 > value ? (
-          <Dots data-testid="pagebutton-dots" key={value}>
+      {pageNumbers.map((value, i) =>
+        value === Marker.ellipsis ? (
+          // eslint-disable-next-line react/no-array-index-key
+          <Dots data-testid="pagebutton-dots" key={`${value}-${i}`}>
             ...
           </Dots>
         ) : (
           <PageButton
             $selected={value === current}
+            $size={size}
             data-testid="pagebutton"
             key={value}
             type="button"
diff --git a/components/src/components/molecules/Select/Select.test.tsx b/components/src/components/molecules/Select/Select.test.tsx
index 7f7cc996..5ebedf90 100644
--- a/components/src/components/molecules/Select/Select.test.tsx
+++ b/components/src/components/molecules/Select/Select.test.tsx
@@ -41,8 +41,8 @@ describe('<Select />', () => {
       </ThemeProvider>,
     )
     userEvent.click(screen.getByTestId('select-container'))
-    userEvent.click(screen.getByText('One'))
-    expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+    userEvent.click(screen.getByTestId('select-option-1'))
+    expect(screen.getByTestId('selected').innerHTML).toContain('One')
   })
 
   it('should call onChange when selection made', async () => {
@@ -64,7 +64,7 @@ describe('<Select />', () => {
       </ThemeProvider>,
     )
     userEvent.click(screen.getByTestId('select-container'))
-    userEvent.click(screen.getByText('One'))
+    userEvent.click(screen.getByTestId('select-option-1'))
     await waitFor(() => {
       expect(mockCallback).toHaveReturnedWith(['1', '1'])
     })
@@ -100,7 +100,7 @@ describe('<Select />', () => {
     )
 
     await waitFor(() => {
-      expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+      expect(screen.getByTestId('selected').innerHTML).toContain('One')
     })
   })
 
@@ -214,7 +214,7 @@ describe('<Select />', () => {
     userEvent.type(input, '{arrowdown}')
     userEvent.type(input, '{arrowdown}')
     userEvent.type(input, '{enter}')
-    expect(screen.getByTestId('selected').innerHTML).toEqual('One')
+    expect(screen.getByTestId('selected').innerHTML).toContain('One')
   })
 
   /** Createable */
@@ -323,7 +323,9 @@ describe('<Select />', () => {
     userEvent.type(screen.getByTestId('select-input'), 'onsies')
     expect(screen.getByTestId('select-input')).toHaveValue('onsies')
 
-    const create = await screen.findByText('Add "onsies"')
+    const create = await screen.findByTestId(
+      'select-option-CREATE_OPTION_VALUE',
+    )
     userEvent.click(create)
 
     await waitFor(() => {
diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
index ff04a614..63a698ec 100644
--- a/components/src/components/molecules/Select/Select.tsx
+++ b/components/src/components/molecules/Select/Select.tsx
@@ -15,13 +15,19 @@ import { Space } from '@/src/tokens'
 
 const CREATE_OPTION_VALUE = 'CREATE_OPTION_VALUE'
 
-type Size = 'small' | 'medium'
+type Size = 'small' | 'medium' | 'large'
 
-const SelectContainer = styled.div<{ $disabled?: boolean; $size: Size }>(
-  ({ theme, $disabled, $size }) => css`
-    background: ${theme.colors.background};
-    border-color: ${theme.colors.backgroundHide};
-    border-width: ${theme.space['px']};
+const SelectContainer = styled.div<{
+  $disabled?: boolean
+  $size: Size
+  $showBorder: boolean
+}>(
+  ({ theme, $disabled, $size, $showBorder }) => css`
+    background: ${theme.colors.backgroundSecondary};
+    ${$showBorder &&
+    css`
+      border: 1px solid ${theme.colors.backgroundHide};
+    `};
     cursor: pointer;
     position: relative;
     display: flex;
@@ -30,14 +36,20 @@ const SelectContainer = styled.div<{ $disabled?: boolean; $size: Size }>(
     justify-content: space-between;
     z-index: 10;
     overflow: hidden;
-    ${$size === 'medium'
+    ${$size === 'small'
       ? css`
-          border-radius: ${theme.radii['2xLarge']};
-          height: ${theme.space['14']};
+          border-radius: ${theme.space['2']};
+          height: ${theme.space['9']};
+          font-size: ${theme.space['3.5']};
         `
-      : css`
+      : $size === 'medium'
+      ? css`
           border-radius: ${theme.radii['almostExtraLarge']};
           height: ${theme.space['10']};
+        `
+      : css`
+          border-radius: ${theme.radii['2xLarge']};
+          height: ${theme.space['14']};
         `}
 
     ${$disabled &&
@@ -51,6 +63,12 @@ const SelectContainer = styled.div<{ $disabled?: boolean; $size: Size }>(
 const SelectContentContainer = styled.div(
   () => css`
     flex: 1;
+    overflow: hidden;
+    display: flex;
+
+    svg {
+      display: block;
+    }
   `,
 )
 
@@ -63,6 +81,15 @@ const SelectActionContainer = styled.div(
   `,
 )
 
+const SelectLabel = styled.div(
+  () => css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 1.4;
+  `,
+)
+
 const OptionElementContainer = styled.div<{ $padding: Space; $gap: Space }>(
   ({ theme, $padding, $gap }) => css`
     align-items: center;
@@ -72,6 +99,7 @@ const OptionElementContainer = styled.div<{ $padding: Space; $gap: Space }>(
     gap: ${theme.space[$gap]};
     padding: ${theme.space[$padding]};
     padding-right: 0;
+    overflow: hidden;
   `,
 )
 
@@ -79,21 +107,25 @@ const NoOptionContainer = styled.div<{ $padding: Space }>(
   ({ theme, $padding }) => css`
     padding: ${theme.space[$padding]};
     padding-right: 0;
-    font-style: italic;
+    color: ${theme.colors.textPlaceholder};
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   `,
 )
 
 const SelectInput = styled.input<{ $padding: Space }>(
   ({ theme, $padding }) => css`
     padding: ${theme.space[$padding]};
+    background: transparent;
     padding-right: 0;
     width: 100%;
     height: 100%;
   `,
 )
 
-const SelectActionButton = styled.button<{ $padding: Space }>(
-  ({ theme, $padding }) => css`
+const SelectActionButton = styled.button<{ $padding: Space; $size: Size }>(
+  ({ theme, $padding, $size }) => css`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -102,7 +134,7 @@ const SelectActionButton = styled.button<{ $padding: Space }>(
     padding: ${theme.space[$padding]};
     svg {
       display: block;
-      width: 12px;
+      width: ${$size === 'small' ? theme.space['2'] : theme.space['3']};
       path {
         color: ${theme.colors.textSecondary};
       }
@@ -117,7 +149,6 @@ const Chevron = styled(IconDownIndicatorSvg)<{
 }>(
   ({ theme, $open, $disabled, $direction }) => css`
     margin-left: ${theme.space['1']};
-    width: ${theme.space['3']};
     margin-right: ${theme.space['0.5']};
     transition-duration: ${theme.transitionDuration['200']};
     transition-property: all;
@@ -148,8 +179,10 @@ const SelectOptionContainer = styled.div<{
   $state?: TransitionState
   $direction?: Direction
   $rows?: number
+  $size?: Size
+  $align?: 'left' | 'right'
 }>(
-  ({ theme, $state, $direction, $rows }) => css`
+  ({ theme, $state, $direction, $rows, $size, $align }) => css`
     display: ${$state === 'exited' ? 'none' : 'block'};
     position: absolute;
     visibility: hidden;
@@ -159,11 +192,23 @@ const SelectOptionContainer = styled.div<{
     margin-top: ${theme.space['1.5']};
     padding: ${theme.space['1.5']};
     min-width: ${theme.space['full']};
+    ${$align === 'right'
+      ? css`
+          right: 0;
+        `
+      : css`
+          left: 0;
+        `}
     border-radius: ${theme.radii['medium']};
     box-shadow: ${theme.boxShadows['0.02']};
     background: ${theme.colors.background};
     transition: all 0.3s cubic-bezier(1, 0, 0.22, 1.6), z-index 0.3s linear;
 
+    ${$size === 'small' &&
+    css`
+      font-size: ${theme.space['3.5']};
+    `}
+
     ${$state === 'entered'
       ? css`
           z-index: 20;
@@ -292,6 +337,10 @@ const SelectOption = styled.div<{
         background-color: ${theme.colors.transparent};
       }
     `}
+
+    svg {
+      display: block;
+    }
   `,
 )
 
@@ -372,8 +421,6 @@ export type SelectProps = {
   direction?: Direction
   /** The string or component to prefix the value in the create value option. */
   createablePrefix?: string
-  /** The message for when there is no option selected */
-  noSelectionMessage?: string
   /** The handler for change events. */
   onChange?: NativeSelectProps['onChange']
   /** The tabindex attribute for  */
@@ -398,6 +445,10 @@ export type SelectProps = {
   padding?: Space | { outer?: Space; inner?: Space }
   /** The size attribute for input element. Useful for controlling input size in flexboxes. */
   inputSize?: number | { max?: number; min?: number }
+  /** If true, show a border around the select component **/
+  showBorder?: boolean
+  /** If the option list is wider than the select, which  */
+  align?: 'left' | 'right'
 } & FieldBaseProps &
   Omit<
     NativeDivProps,
@@ -442,7 +493,7 @@ export const Select = React.forwardRef(
       autocomplete = false,
       createable = false,
       createablePrefix = 'Add ',
-      noSelectionMessage,
+      placeholder,
       direction = 'down',
       error,
       hideLabel,
@@ -465,6 +516,8 @@ export const Select = React.forwardRef(
       size = 'medium',
       padding: paddingProp,
       inputSize: inputSizeProps,
+      showBorder = false,
+      align,
       ...props
     }: SelectProps,
     ref: React.Ref<HTMLInputElement>,
@@ -615,7 +668,7 @@ export const Select = React.forwardRef(
       if (!menuOpen && state === 'unmounted') handleReset()
     }, [menuOpen, state])
 
-    const defaultPadding = size === 'medium' ? '4' : '2'
+    const defaultPadding = size === 'small' ? '3' : '4'
     const outerPadding = getPadding('outer', defaultPadding, paddingProp)
     const innerPadding = getPadding('inner', defaultPadding, paddingProp)
 
@@ -698,7 +751,9 @@ export const Select = React.forwardRef(
       option ? (
         <React.Fragment>
           {option.prefix && <div>{option.prefix}</div>}
-          {option.node ? option.node : option.label || option.value}
+          <SelectLabel>
+            {option.node ? option.node : option.label || option.value}
+          </SelectLabel>
         </React.Fragment>
       ) : null
 
@@ -729,6 +784,7 @@ export const Select = React.forwardRef(
               onKeyDown: handleKeydown,
             }}
             $disabled={disabled}
+            $showBorder={showBorder}
             $size={size}
             id={`combo-${id}`}
             ref={displayRef}
@@ -763,9 +819,9 @@ export const Select = React.forwardRef(
                 >
                   <OptionElement option={selectedOption} />
                 </OptionElementContainer>
-              ) : noSelectionMessage ? (
+              ) : placeholder ? (
                 <NoOptionContainer $padding={outerPadding}>
-                  {noSelectionMessage}
+                  {placeholder}
                 </NoOptionContainer>
               ) : null}
             </SelectContentContainer>
@@ -773,13 +829,18 @@ export const Select = React.forwardRef(
               {showClearButton ? (
                 <SelectActionButton
                   $padding={outerPadding}
+                  $size={size}
                   type="button"
                   onClick={handleInputClear}
                 >
                   <CloseSVG />
                 </SelectActionButton>
               ) : (
-                <SelectActionButton $padding={outerPadding} type="button">
+                <SelectActionButton
+                  $padding={outerPadding}
+                  $size={size}
+                  type="button"
+                >
                   <Chevron
                     $direction={direction}
                     $disabled={disabled}
@@ -813,8 +874,10 @@ export const Select = React.forwardRef(
             </VisuallyHidden>
           </SelectContainer>
           <SelectOptionContainer
+            $align={align}
             $direction={direction}
             $rows={rows}
+            $size={size}
             $state={state}
             id={`listbox-${id}`}
             role="listbox"
@@ -834,6 +897,7 @@ export const Select = React.forwardRef(
                     $gap: innerPadding,
                   }}
                   data-option-index={index}
+                  data-testid={`select-option-${option.value}`}
                   key={option.value}
                   role="option"
                   onClick={handleOptionClick(option)}
diff --git a/docs/src/reference/mdx/atoms/Avatar.docs.mdx b/docs/src/reference/mdx/atoms/Avatar.docs.mdx
index b7a46295..98a9444c 100644
--- a/docs/src/reference/mdx/atoms/Avatar.docs.mdx
+++ b/docs/src/reference/mdx/atoms/Avatar.docs.mdx
@@ -96,6 +96,23 @@ By default, there is a light border around the edge to define image edges on sim
 </DeleteMe>
 ```
 
+## Disabled
+
+The placeholder is shown if the src property is undefined or if an error occurs loading the src.
+
+```tsx live=true
+<DeleteMe alignItems="center" flexDirection="row" flexWrap="wrap">
+  <Typography variant="label">Placeholder</Typography>
+  <div style={{ width: '100px' }}>
+    <Avatar disabled />
+  </div>
+  <Typography variant="label">Avatar</Typography>
+  <div style={{ width: '100px' }}>
+    <Avatar disabled src={avatars.noun97} />
+  </div>
+</DeleteMe>
+```
+
 <!-- ## next/image
 
 If you are using Next.js and configured [`next/image`](https://nextjs.org/docs/api-reference/next/image) appropriately, you can pass it in with the `as` prop.
diff --git a/docs/src/reference/mdx/molecules/PageButtons.docs.mdx b/docs/src/reference/mdx/molecules/PageButtons.docs.mdx
index 00df75fc..a6ecc6a5 100644
--- a/docs/src/reference/mdx/molecules/PageButtons.docs.mdx
+++ b/docs/src/reference/mdx/molecules/PageButtons.docs.mdx
@@ -28,3 +28,30 @@ import { PageButtons } from '@ensdomains/thorin'
 ## Props
 
 <PropsTable sourceLink={sourceLink} types={types} />
+
+## Size
+
+```tsx live=true
+<DeleteMe>
+  <Field label="Small">
+    <PageButtons
+      alwaysShowFirst
+      alwaysShowLast
+      current={getState('pageButtons') || 1}
+      size="small"
+      total={100}
+      onChange={(value) => setState('pageButtons', value)}
+    />
+  </Field>
+  <Field label="Medium">
+    <PageButtons
+      alwaysShowFirst
+      alwaysShowLast
+      current={getState('pageButtons') || 1}
+      size="medium"
+      total={100}
+      onChange={(value) => setState('pageButtons', value)}
+    />
+  </Field>
+</DeleteMe>
+```
diff --git a/docs/src/reference/mdx/molecules/Select.docs.mdx b/docs/src/reference/mdx/molecules/Select.docs.mdx
index 7758b299..3dd00a35 100644
--- a/docs/src/reference/mdx/molecules/Select.docs.mdx
+++ b/docs/src/reference/mdx/molecules/Select.docs.mdx
@@ -103,6 +103,73 @@ import {
 </Card>
 ```
 
+## Align
+
+```tsx live=true expand=true minHeight=350px
+<DeleteMe flexDirection="row" justifyContent="space-between">
+  <div>
+    <Select
+      align="left"
+      label="Label text"
+      options={[
+        { value: '0', label: 'Zero' },
+        { value: '1', label: 'One', prefix: <EthSVG /> },
+        { value: '2', label: 'Two', prefix: <FlagSVG /> },
+        { value: '3', label: 'Three', prefix: <MoonSVG /> },
+        { value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
+      ]}
+    />
+  </div>
+  <div>
+    <Select
+      align="right"
+      label="Label text"
+      options={[
+        { value: '0', label: 'Zero' },
+        { value: '1', label: 'One', prefix: <EthSVG /> },
+        { value: '2', label: 'Two', prefix: <FlagSVG /> },
+        { value: '3', label: 'Three', prefix: <MoonSVG /> },
+        { value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
+      ]}
+    />
+  </div>
+</DeleteMe>
+```
+
+## Size
+
+```tsx live=true expand=true minHeight=350px
+<DeleteMe>
+  <Select
+    label="Small"
+    options={[
+      { value: '0', label: 'Zero' },
+      { value: '1', label: 'One', prefix: <EthSVG /> },
+      { value: '2', label: 'Two', prefix: <FlagSVG /> },
+    ]}
+    size="small"
+  />
+  <Select
+    label="Medium"
+    options={[
+      { value: '0', label: 'Zero' },
+      { value: '1', label: 'One', prefix: <EthSVG /> },
+      { value: '2', label: 'Two', prefix: <FlagSVG /> },
+    ]}
+    size="medium"
+  />
+  <Select
+    label="Large"
+    options={[
+      { value: '0', label: 'Zero' },
+      { value: '1', label: 'One', prefix: <EthSVG /> },
+      { value: '2', label: 'Two', prefix: <FlagSVG /> },
+    ]}
+    size="large"
+  />
+</DeleteMe>
+```
+
 ## Disabled
 
 ```tsx live=true expand=true minHeight=350px
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ebc3289..a2460571 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,7 +233,7 @@ importers:
       copy-to-clipboard: 3.3.2
       gray-matter: 4.0.3
       lodash: 4.17.21
-      next: 12.2.5_sfoxds7t5ydpegc3knd667wn6m
+      next: 12.3.0_sfoxds7t5ydpegc3knd667wn6m
       next-mdx-remote: 3.0.8_sfoxds7t5ydpegc3knd667wn6m
       nookies: 2.5.2
       playroom: 0.28.0_sfoxds7t5ydpegc3knd667wn6m
@@ -2317,8 +2317,8 @@ packages:
   /@mdx-js/util/1.6.22:
     resolution: {integrity: sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==}
 
-  /@next/env/12.2.5:
-    resolution: {integrity: sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw==}
+  /@next/env/12.3.0:
+    resolution: {integrity: sha512-PTJpjAFVbzBQ9xXpzMTroShvD5YDIIy46jQ7d4LrWpY+/5a8H90Tm8hE3Hvkc5RBRspVo7kvEOnqQms0A+2Q6w==}
     dev: false
 
   /@next/eslint-plugin-next/12.0.1:
@@ -2337,8 +2337,8 @@ packages:
       '@mdx-js/react': 1.6.22_react@17.0.2
     dev: true
 
-  /@next/swc-android-arm-eabi/12.2.5:
-    resolution: {integrity: sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==}
+  /@next/swc-android-arm-eabi/12.3.0:
+    resolution: {integrity: sha512-/PuirPnAKsYBw93w/7Q9hqy+KGOU9mjYprZ/faxMUJh/dc6v3rYLxkZKNG9nFPIW4QKNTCnhP40xF9hLnxO+xg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [android]
@@ -2346,8 +2346,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-android-arm64/12.2.5:
-    resolution: {integrity: sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==}
+  /@next/swc-android-arm64/12.3.0:
+    resolution: {integrity: sha512-OaI+FhAM6P9B6Ybwbn0Zl8YwWido0lLwhDBi9WiYCh4RQmIXAyVIoIJPHo4fP05+mXaJ/k1trvDvuURvHOq2qw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
@@ -2355,8 +2355,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-arm64/12.2.5:
-    resolution: {integrity: sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==}
+  /@next/swc-darwin-arm64/12.3.0:
+    resolution: {integrity: sha512-9s4d3Mhii+WFce8o8Jok7WC3Bawkr9wEUU++SJRptjU1L5tsfYJMrSYCACHLhZujziNDLyExe4Hwwsccps1sfg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -2364,8 +2364,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64/12.2.5:
-    resolution: {integrity: sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==}
+  /@next/swc-darwin-x64/12.3.0:
+    resolution: {integrity: sha512-2scC4MqUTwGwok+wpVxP+zWp7WcCAVOtutki2E1n99rBOTnUOX6qXkgxSy083yBN6GqwuC/dzHeN7hIKjavfRA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -2373,8 +2373,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-freebsd-x64/12.2.5:
-    resolution: {integrity: sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==}
+  /@next/swc-freebsd-x64/12.3.0:
+    resolution: {integrity: sha512-xAlruUREij/bFa+qsE1tmsP28t7vz02N4ZDHt2lh3uJUniE0Ne9idyIDLc1Ed0IF2RjfgOp4ZVunuS3OM0sngw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
@@ -2382,8 +2382,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm-gnueabihf/12.2.5:
-    resolution: {integrity: sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==}
+  /@next/swc-linux-arm-gnueabihf/12.3.0:
+    resolution: {integrity: sha512-jin2S4VT/cugc2dSZEUIabhYDJNgrUh7fufbdsaAezgcQzqfdfJqfxl4E9GuafzB4cbRPTaqA0V5uqbp0IyGkQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -2391,8 +2391,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu/12.2.5:
-    resolution: {integrity: sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==}
+  /@next/swc-linux-arm64-gnu/12.3.0:
+    resolution: {integrity: sha512-RqJHDKe0WImeUrdR0kayTkRWgp4vD/MS7g0r6Xuf8+ellOFH7JAAJffDW3ayuVZeMYOa7RvgNFcOoWnrTUl9Nw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2400,8 +2400,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl/12.2.5:
-    resolution: {integrity: sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==}
+  /@next/swc-linux-arm64-musl/12.3.0:
+    resolution: {integrity: sha512-nvNWoUieMjvDjpYJ/4SQe9lQs2xMj6ZRs8N+bmTrVu9leY2Fg3WD6W9p/1uU9hGO8u+OdF13wc4iRShu/WYIHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2409,8 +2409,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu/12.2.5:
-    resolution: {integrity: sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==}
+  /@next/swc-linux-x64-gnu/12.3.0:
+    resolution: {integrity: sha512-4ajhIuVU9PeQCMMhdDgZTLrHmjbOUFuIyg6J19hZqwEwDTSqQyrSLkbJs2Nd7IRiM6Ul/XyrtEFCpk4k+xD2+w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2418,8 +2418,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl/12.2.5:
-    resolution: {integrity: sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==}
+  /@next/swc-linux-x64-musl/12.3.0:
+    resolution: {integrity: sha512-U092RBYbaGxoMAwpauePJEu2PuZSEoUCGJBvsptQr2/2XIMwAJDYM4c/M5NfYEsBr+yjvsYNsOpYfeQ88D82Yg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2427,8 +2427,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc/12.2.5:
-    resolution: {integrity: sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==}
+  /@next/swc-win32-arm64-msvc/12.3.0:
+    resolution: {integrity: sha512-pzSzaxjDEJe67bUok9Nxf9rykbJfHXW0owICFsPBsqHyc+cr8vpF7g9e2APTCddtVhvjkga9ILoZJ9NxWS7Yiw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -2436,8 +2436,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc/12.2.5:
-    resolution: {integrity: sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==}
+  /@next/swc-win32-ia32-msvc/12.3.0:
+    resolution: {integrity: sha512-MQGUpMbYhQmTZ06a9e0hPQJnxFMwETo2WtyAotY3GEzbNCQVbCGhsvqEKcl+ZEHgShlHXUWvSffq1ZscY6gK7A==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -2445,8 +2445,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc/12.2.5:
-    resolution: {integrity: sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==}
+  /@next/swc-win32-x64-msvc/12.3.0:
+    resolution: {integrity: sha512-C/nw6OgQpEULWqs+wgMHXGvlJLguPRFFGqR2TAqWBerQ8J+Sg3z1ZTqwelkSi4FoqStGuZ2UdFHIDN1ySmR1xA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -3105,8 +3105,8 @@ packages:
       - supports-color
     dev: true
 
-  /@swc/helpers/0.4.3:
-    resolution: {integrity: sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==}
+  /@swc/helpers/0.4.11:
+    resolution: {integrity: sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==}
     dependencies:
       tslib: 2.4.0
     dev: false
@@ -8897,8 +8897,8 @@ packages:
       - supports-color
     dev: false
 
-  /next/12.2.5_sfoxds7t5ydpegc3knd667wn6m:
-    resolution: {integrity: sha512-tBdjqX5XC/oFs/6gxrZhjmiq90YWizUYU6qOWAfat7zJwrwapJ+BYgX2PmiacunXMaRpeVT4vz5MSPSLgNkrpA==}
+  /next/12.3.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-GpzI6me9V1+XYtfK0Ae9WD0mKqHyzQlGq1xH1rzNIYMASo4Tkl4rTe9jSqtBpXFhOS33KohXs9ZY38Akkhdciw==}
     engines: {node: '>=12.22.0'}
     hasBin: true
     peerDependencies:
@@ -8915,28 +8915,28 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 12.2.5
-      '@swc/helpers': 0.4.3
+      '@next/env': 12.3.0
+      '@swc/helpers': 0.4.11
       caniuse-lite: 1.0.30001373
       postcss: 8.4.14
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
-      styled-jsx: 5.0.4_react@17.0.2
+      styled-jsx: 5.0.6_react@17.0.2
       use-sync-external-store: 1.2.0_react@17.0.2
     optionalDependencies:
-      '@next/swc-android-arm-eabi': 12.2.5
-      '@next/swc-android-arm64': 12.2.5
-      '@next/swc-darwin-arm64': 12.2.5
-      '@next/swc-darwin-x64': 12.2.5
-      '@next/swc-freebsd-x64': 12.2.5
-      '@next/swc-linux-arm-gnueabihf': 12.2.5
-      '@next/swc-linux-arm64-gnu': 12.2.5
-      '@next/swc-linux-arm64-musl': 12.2.5
-      '@next/swc-linux-x64-gnu': 12.2.5
-      '@next/swc-linux-x64-musl': 12.2.5
-      '@next/swc-win32-arm64-msvc': 12.2.5
-      '@next/swc-win32-ia32-msvc': 12.2.5
-      '@next/swc-win32-x64-msvc': 12.2.5
+      '@next/swc-android-arm-eabi': 12.3.0
+      '@next/swc-android-arm64': 12.3.0
+      '@next/swc-darwin-arm64': 12.3.0
+      '@next/swc-darwin-x64': 12.3.0
+      '@next/swc-freebsd-x64': 12.3.0
+      '@next/swc-linux-arm-gnueabihf': 12.3.0
+      '@next/swc-linux-arm64-gnu': 12.3.0
+      '@next/swc-linux-arm64-musl': 12.3.0
+      '@next/swc-linux-x64-gnu': 12.3.0
+      '@next/swc-linux-x64-musl': 12.3.0
+      '@next/swc-win32-arm64-msvc': 12.3.0
+      '@next/swc-win32-ia32-msvc': 12.3.0
+      '@next/swc-win32-x64-msvc': 12.3.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -11191,8 +11191,8 @@ packages:
       shallowequal: 1.1.0
       supports-color: 5.5.0
 
-  /styled-jsx/5.0.4_react@17.0.2:
-    resolution: {integrity: sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==}
+  /styled-jsx/5.0.6_react@17.0.2:
+    resolution: {integrity: sha512-xOeROtkK5MGMDimBQ3J6iPId8q0t/BDoG5XN6oKkZClVz9ISF/hihN8OCn2LggMU6N32aXnrXBdn3auSqNS9fA==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'