From f88694cb37d531dc463f0d597da35f414137dfd8 Mon Sep 17 00:00:00 2001
From: Vojtech Miksu <vojtech@miksu.cz>
Date: Thu, 29 Feb 2024 21:37:15 -0700
Subject: [PATCH] Doc fixes (#5328)

* Fix pre/code styling

* Add StackBlitz buttons to each code example

* Delete old .prettierrc

* Reformat examples
---
 documentation-site/components/code.jsx        |  11 +-
 documentation-site/components/example.jsx     | 110 +++++++-
 documentation-site/components/exports.jsx     |   2 +-
 documentation-site/components/json.jsx        |   4 +-
 .../components/markdown-elements.jsx          |  90 +++----
 documentation-site/examples/.prettierrc       |  14 -
 .../examples/accordion/basic.tsx              |   6 +-
 .../examples/accordion/custom.tsx             |   6 +-
 .../examples/accordion/renderpanelcontent.tsx |   6 +-
 .../examples/accordion/stateful-panel.tsx     |  10 +-
 .../examples/accordion/stateless.tsx          |  11 +-
 .../examples/accordion/title.tsx              |  22 +-
 .../examples/app-nav-bar/basic.tsx            |  62 +++--
 .../examples/app-nav-bar/map-item-to-node.tsx |  22 +-
 .../app-nav-bar/unique-identifier.tsx         |  20 +-
 .../examples/aspect-ratio-box/basic.tsx       |  39 ++-
 .../examples/aspect-ratio-box/calendar.tsx    |  17 +-
 .../examples/aspect-ratio-box/image.tsx       |   7 +-
 documentation-site/examples/avatar/error.tsx  |  28 +-
 .../examples/avatar/initials.tsx              |  12 +-
 .../examples/avatar/override.tsx              |  24 +-
 documentation-site/examples/avatar/sizes.tsx  |  28 +-
 documentation-site/examples/badge/offset.tsx  |  20 +-
 .../examples/badge/primary-inline.tsx         |   4 +-
 .../examples/badge/secondary-inline.tsx       |  11 +-
 documentation-site/examples/banner/action.tsx |  18 +-
 .../examples/banner/artwork.tsx               |  12 +-
 .../examples/banner/variants.tsx              |   8 +-
 documentation-site/examples/block/basic.tsx   |   8 +-
 .../examples/block/override.tsx               |   6 +-
 .../examples/block/responsive.tsx             |   6 +-
 .../examples/bottom-navigation/overflow.tsx   |  81 +++---
 .../examples/breadcrumbs/basic.tsx            |   6 +-
 .../examples/breadcrumbs/pseudo.tsx           |  10 +-
 .../examples/button-dock/basic.tsx            |  60 +++--
 .../examples/button-group/basic.tsx           |   6 +-
 .../examples/button-group/checkbox-mode.tsx   |   6 +-
 .../examples/button-group/disabled-button.tsx |   6 +-
 .../examples/button-group/disabled.tsx        |   6 +-
 .../examples/button-group/dropdown.tsx        |  34 +--
 .../examples/button-group/enhancer.tsx        |  20 +-
 .../examples/button-group/icon.tsx            |   8 +-
 .../examples/button-group/radio-mode.tsx      |   6 +-
 .../button-group/stateful-checkbox.tsx        |   8 +-
 .../examples/button-group/stateful-radio.tsx  |  11 +-
 .../examples/button-group/wrappable.tsx       |   8 +-
 .../examples/button-timed/paused.tsx          |  29 +--
 .../examples/button/as-an-anchor.tsx          |   4 +-
 documentation-site/examples/button/basic.tsx  |   8 +-
 .../examples/button/dropdown.tsx              |  42 ++-
 documentation-site/examples/button/kinds.tsx  |   6 +-
 documentation-site/examples/button/shapes.tsx |   6 +-
 documentation-site/examples/button/sizes.tsx  |   8 +-
 documentation-site/examples/button/states.tsx |   8 +-
 .../examples/button/with-enhancers.tsx        |  10 +-
 documentation-site/examples/card/basic.tsx    |  10 +-
 .../examples/card/image-cta.tsx               |  18 +-
 .../examples/card/thumbnail-cta.tsx           |  21 +-
 .../examples/checkbox/alignment.tsx           |  10 +-
 .../examples/checkbox/basic-controlled.tsx    |   9 +-
 .../examples/checkbox/basic-uncontrolled.tsx  |  10 +-
 .../examples/checkbox/component-overrides.tsx |  12 +-
 .../examples/checkbox/disabled.tsx            |   4 +-
 .../examples/checkbox/error.tsx               |  10 +-
 .../examples/checkbox/focus.tsx               |   6 +-
 .../examples/checkbox/multiline.tsx           |  22 +-
 .../examples/checkbox/overrides.tsx           |  16 +-
 .../examples/checkbox/toggle.tsx              |   9 +-
 .../examples/data-table/access-table-data.tsx |  58 ++---
 .../examples/data-table/basic.tsx             |  64 ++---
 .../examples/data-table/batch-action.tsx      | 140 ++++------
 .../data-table/customized-column-sort.tsx     |  83 +++---
 .../data-table/customized-empty-state.tsx     |  40 +--
 .../data-table/row-height-line-clamp.tsx      | 124 +++++----
 .../examples/datepicker/basic.tsx             |   6 +-
 .../calendar-multiple-months-with-label.tsx   |   6 +-
 .../datepicker/calendar-multiple-months.tsx   |   6 +-
 .../datepicker/calendar-time-select.tsx       |   6 +-
 .../datepicker/composed-range-pickers.tsx     |  38 +--
 .../datepicker/composed-single-pickers.tsx    |  22 +-
 .../datepicker/datepicker-with-timezone.tsx   |  18 +-
 .../datepicker/datepickers-color-states.tsx   |  36 +--
 .../range-picker-with-separate-inputs.tsx     |   8 +-
 .../datepicker/with-callback-overrides.tsx    |  28 +-
 documentation-site/examples/divider/basic.tsx |  36 +--
 .../examples/dnd-list/basic.tsx               |  13 +-
 .../examples/dnd-list/customDragHandle.tsx    |  25 +-
 .../examples/dnd-list/overrideLabel.tsx       |  19 +-
 .../examples/dnd-list/overrides_short.tsx     |   6 +-
 .../dnd-list/overrides_state_props.tsx        |  12 +-
 .../examples/dnd-list/overrides_style.tsx     |  10 +-
 .../examples/dnd-list/removable.tsx           |  15 +-
 .../examples/dnd-list/varyingHeights.tsx      |  14 +-
 .../examples/drawer/anchors.tsx               |  27 +-
 documentation-site/examples/drawer/sizes.tsx  |  25 +-
 .../examples/drawer/ssr-render-all.tsx        |  17 +-
 .../examples/empty-state/empty-state.tsx      |  14 +-
 .../examples/empty-state/loading.tsx          |  12 +-
 .../examples/file-uploader/basic.tsx          |   8 +-
 .../examples/file-uploader/disabled.tsx       |   4 +-
 .../examples/file-uploader/error.tsx          |  36 +--
 .../file-uploader/indeterminate-progress.tsx  |   8 +-
 .../examples/file-uploader/overrides.tsx      |   8 +-
 .../badge-and-label-enhancers.tsx             |  14 +-
 .../fixed-marker/badge-enhancer-text.tsx      |  10 +-
 .../examples/fixed-marker/basic.tsx           |   4 +-
 .../examples/fixed-marker/dragging.tsx        |  10 +-
 .../fixed-marker/end-enhancer-color.tsx       |  10 +-
 .../fixed-marker/react-map-gl-dragging.tsx    |  10 +-
 .../examples/fixed-marker/react-map-gl.tsx    |  10 +-
 .../fixed-marker/start-enhancer-large.tsx     |  10 +-
 .../examples/fixed-marker/start-enhancer.tsx  |  10 +-
 .../examples/fixed-marker/x-small.tsx         |   4 +-
 .../examples/flex-grid/basic.tsx              |  16 +-
 .../examples/flex-grid/missing.tsx            |  16 +-
 .../examples/flex-grid/responsive.tsx         |  16 +-
 .../examples/flex-grid/unequal-narrow.tsx     |  20 +-
 .../examples/flex-grid/unequal-wide.tsx       |  18 +-
 .../examples/floating-marker/basic.tsx        |   4 +-
 .../large-square-anchor-start-enhancer.tsx    |  10 +-
 .../floating-marker/large-top-right.tsx       |   4 +-
 .../examples/floating-marker/react-map-gl.tsx |  10 +-
 .../floating-marker/secondary-label-color.tsx |   9 +-
 .../floating-marker/secondary-label.tsx       |   7 +-
 .../floating-marker/small-no-anchor.tsx       |   4 +-
 .../floating-marker/start-enhancer.tsx        |  10 +-
 .../examples/floating-route-marker/basic.tsx  |   4 +-
 .../changing-pointer-positions.tsx            |  22 +-
 .../custom-color-overrides.tsx                |  32 +--
 .../floating-route-marker/react-map-gl.tsx    |  30 +--
 .../floating-route-marker/secondary-label.tsx |  11 +-
 .../start-end-enhancer.tsx                    |  12 +-
 .../examples/form-control/checkbox.tsx        |  11 +-
 .../examples/form-control/input.tsx           |   8 +-
 .../examples/form-control/kinds.tsx           |   6 +-
 .../examples/form-control/radio-group.tsx     |  13 +-
 .../examples/form-control/select.tsx          |  20 +-
 .../examples/form-control/textarea.tsx        |   8 +-
 .../examples/form-control/validation.tsx      |  28 +-
 .../examples/getting-started/usage.tsx        |  14 +-
 .../examples/header-navigation/basic.tsx      |   8 +-
 .../header-navigation/with-search.tsx         |  38 ++-
 .../examples/hint-dot/offset.tsx              |   6 +-
 documentation-site/examples/icon/basic.tsx    |  13 +-
 documentation-site/examples/icon/button.tsx   |  12 +-
 documentation-site/examples/icon/list.tsx     |  12 +-
 .../examples/input/available-states.tsx       |   4 +-
 .../examples/input/basic-controlled.tsx       |   6 +-
 .../examples/input/basic-uncontrolled.tsx     |   6 +-
 .../examples/input/clearable.tsx              |   6 +-
 .../examples/input/enhancers.tsx              |  16 +-
 documentation-site/examples/input/focus.tsx   |  16 +-
 documentation-site/examples/input/mask.tsx    |   8 +-
 .../examples/input/overrides.tsx              |  14 +-
 .../examples/input/password.tsx               |   6 +-
 documentation-site/examples/input/sizes.tsx   |   4 +-
 .../examples/input/with-select.tsx            |  47 ++--
 .../examples/input/with-tags.tsx              |  32 ++-
 .../examples/internationalization/example.tsx |  12 +-
 documentation-site/examples/layer/basic.tsx   |  44 ++--
 .../examples/layout-grid/align.tsx            |  20 +-
 .../examples/layout-grid/basic.tsx            |  18 +-
 .../examples/layout-grid/behavior.tsx         |  18 +-
 .../examples/layout-grid/compact.tsx          |  18 +-
 .../examples/layout-grid/custom.tsx           |  18 +-
 .../examples/layout-grid/hide.tsx             |  18 +-
 .../examples/layout-grid/order.tsx            |  18 +-
 .../examples/layout-grid/overrides.tsx        |  38 +--
 .../examples/layout-grid/responsive.tsx       |  18 +-
 .../examples/layout-grid/skip-shrink.tsx      |  18 +-
 .../examples/layout-grid/skip.tsx             |  18 +-
 .../examples/layout-grid/span.tsx             |  18 +-
 .../examples/layout-grid/unit.tsx             |  24 +-
 .../examples/list/artwork-sizes.tsx           |  30 +--
 documentation-site/examples/list/basic.tsx    |  16 +-
 .../examples/list/enhancers.tsx               |  18 +-
 .../examples/list/menu-adapter.tsx            |  28 +-
 documentation-site/examples/list/sublist.tsx  |  28 +-
 .../examples/list/tap-target.tsx              |  14 +-
 .../location-puck/consumer-confidence.tsx     |   9 +-
 .../location-puck/consumer-no-heading.tsx     |   9 +-
 .../examples/location-puck/consumer.tsx       |   4 +-
 .../examples/location-puck/earner.tsx         |   4 +-
 .../examples/location-puck/react-map-gl.tsx   |  10 +-
 documentation-site/examples/menu/basic.tsx    |  34 +--
 .../examples/menu/child-render-all.tsx        |  56 ++--
 documentation-site/examples/menu/child.tsx    |  66 ++---
 documentation-site/examples/menu/compact.tsx  |  34 +--
 documentation-site/examples/menu/dividers.tsx |  30 +--
 documentation-site/examples/menu/grouped.tsx  |  22 +-
 documentation-site/examples/menu/href.tsx     |  10 +-
 documentation-site/examples/menu/profile.tsx  |  22 +-
 .../examples/menu/stateless.tsx               |  32 +--
 .../examples/menu/virtual-list.tsx            |  22 +-
 .../examples/message-card/color.tsx           |  37 ++-
 .../examples/message-card/custom-color.tsx    |  11 +-
 .../examples/message-card/layout.tsx          |  20 +-
 .../examples/message-card/positioning.tsx     |  42 ++-
 .../examples/mobile-header/floating.tsx       |  56 ++--
 .../examples/mobile-header/text-content.tsx   | 100 ++++----
 .../examples/modal/autofocus.tsx              |  18 +-
 documentation-site/examples/modal/basic.tsx   |  11 +-
 .../modal/buried-interactive-element.tsx      | 124 ++++-----
 documentation-site/examples/modal/nested.tsx  |  30 +--
 documentation-site/examples/modal/sized.tsx   |  21 +-
 .../examples/notification-circle/inline.tsx   |   7 +-
 .../examples/notification-circle/offset.tsx   |   6 +-
 .../examples/notification/basic.tsx           |   4 +-
 .../examples/notification/closeable.tsx       |   8 +-
 .../examples/notification/custom-dismiss.tsx  |   8 +-
 .../examples/notification/full-width.tsx      |   6 +-
 .../examples/notification/kinds.tsx           |  16 +-
 .../examples/notification/overrides.tsx       |  12 +-
 .../examples/overrides/component.tsx          |   4 +-
 .../examples/overrides/props.tsx              |   6 +-
 .../examples/overrides/style-with-theme.tsx   |   6 +-
 .../examples/overrides/style.tsx              |   6 +-
 .../examples/page-control/overflow.tsx        |  28 +-
 .../examples/pagination/controlled.tsx        |   6 +-
 .../examples/pagination/labels.tsx            |  10 +-
 .../examples/pagination/overrides.tsx         |  42 +--
 .../examples/pagination/uncontrolled.tsx      |   4 +-
 .../examples/payment-card/controlled.tsx      |   6 +-
 .../examples/payment-card/defaultvalue.tsx    |  10 +-
 .../examples/payment-card/form.tsx            |  40 ++-
 .../examples/payment-card/uncontrolled.tsx    |   4 +-
 .../examples/phone-input/basic.tsx            |   6 +-
 .../examples/phone-input/flag-overrides.tsx   |  12 +-
 .../examples/phone-input/localized.tsx        |   6 +-
 .../examples/phone-input/nested-overrides.tsx |   8 +-
 .../examples/phone-input/uncontrolled.tsx     |   4 +-
 .../examples/pin-code/autofocus.tsx           |  20 +-
 .../examples/pin-code/basic.tsx               |   8 +-
 .../examples/pin-code/completion.tsx          |  16 +-
 .../examples/pin-code/event.tsx               |   8 +-
 .../examples/pin-code/id-and-name.tsx         |   8 +-
 .../examples/pin-code/length.tsx              |   8 +-
 documentation-site/examples/pin-code/mask.tsx |  12 +-
 .../examples/pin-code/no-tab.tsx              |   8 +-
 .../examples/pin-code/override.tsx            |  18 +-
 .../examples/pin-code/placeholder.tsx         |   8 +-
 documentation-site/examples/pin-code/size.tsx |  18 +-
 .../examples/pin-code/stateful.tsx            |   6 +-
 .../examples/pin-code/states.tsx              |  16 +-
 .../examples/popover/clipping.tsx             |  24 +-
 .../examples/popover/dismiss.tsx              |  21 +-
 documentation-site/examples/popover/link.tsx  |  16 +-
 .../examples/popover/overrides.tsx            |  22 +-
 .../examples/popover/placements.tsx           |  28 +-
 .../examples/popover/ref-handling.tsx         |  39 ++-
 .../examples/popover/ssr-render-all.tsx       |  14 +-
 .../examples/popover/stateful-click.tsx       |  16 +-
 .../examples/popover/stateful-hover.tsx       |  20 +-
 .../examples/popover/stateless.tsx            |  18 +-
 .../examples/popover/with-arrow.tsx           |  16 +-
 .../examples/progress-bar/basic.tsx           |   4 +-
 .../examples/progress-bar/custom-label.tsx    |   8 +-
 .../examples/progress-bar/negative.tsx        |   6 +-
 .../examples/progress-bar/overrides.tsx       |  18 +-
 .../examples/progress-bar/rounded.tsx         |   8 +-
 .../examples/progress-bar/steps.tsx           |  22 +-
 .../examples/progress-bar/with-label.tsx      |   4 +-
 documentation-site/examples/radio/basic.tsx   |   6 +-
 .../examples/radio/disabled.tsx               |   4 +-
 documentation-site/examples/radio/error.tsx   |   6 +-
 .../examples/radio/horizontal-align.tsx       |   6 +-
 .../examples/radio/overrides.tsx              |  18 +-
 .../examples/radio/stateful.tsx               |   6 +-
 .../examples/rating/emoticon.tsx              |   9 +-
 documentation-site/examples/rating/star.tsx   |  11 +-
 .../examples/rating/starReadOnly.tsx          |   6 +-
 .../examples/segmented-control/badge-hint.tsx |   8 +-
 .../examples/segmented-control/badge.tsx      |  10 +-
 .../examples/segmented-control/basic.tsx      |   8 +-
 .../examples/segmented-control/disabled.tsx   |   8 +-
 .../examples/select/async-options.tsx         | 122 +++++----
 .../examples/select/control-ref-dropdown.tsx  |  30 +--
 .../select/control-ref-input-value.tsx        |  23 +-
 .../examples/select/controlled.tsx            |  18 +-
 .../examples/select/creatable-multi.tsx       |  18 +-
 .../examples/select/creatable.tsx             |  18 +-
 documentation-site/examples/select/focus.tsx  |  28 +-
 .../examples/select/grouped.tsx               |  20 +-
 .../examples/select/in-modal.tsx              |  20 +-
 .../examples/select/overridden-dropdown.tsx   |  20 +-
 .../examples/select/overridden-tag.tsx        |  34 +--
 .../examples/select/overridden.tsx            |  18 +-
 .../examples/select/search-multi-pick.tsx     |  18 +-
 .../examples/select/search-single-pick.tsx    |  18 +-
 documentation-site/examples/select/sizes.tsx  |  42 +--
 .../examples/select/uncontrolled.tsx          |  16 +-
 .../examples/select/with-many-options.tsx     |  47 ++--
 .../examples/side-navigation/basic.tsx        |  36 +--
 .../side-navigation/nav-overrides.tsx         |  42 +--
 .../examples/skeleton/animation.tsx           |   4 +-
 .../examples/skeleton/auto-size-rows.tsx      |   8 +-
 .../examples/skeleton/basic.tsx               |   4 +-
 .../examples/skeleton/circle.tsx              |   6 +-
 .../examples/skeleton/subElements.tsx         |   8 +-
 documentation-site/examples/slider/basic.tsx  |   8 +-
 .../examples/slider/disabled.tsx              |  10 +-
 documentation-site/examples/slider/marks.tsx  |   6 +-
 .../examples/slider/overrides.tsx             |  44 ++--
 documentation-site/examples/slider/range.tsx  |   8 +-
 .../examples/slider/stateful.tsx              |   4 +-
 .../examples/slider/step-min-max.tsx          |   6 +-
 documentation-site/examples/spinner/basic.tsx |   4 +-
 documentation-site/examples/spinner/size.tsx  |   4 +-
 documentation-site/examples/spinner/span.tsx  |   4 +-
 documentation-site/examples/styled/basic.tsx  |  21 +-
 .../examples/table-grid/basic.tsx             |  20 +-
 .../examples/table-grid/cell-navigation.tsx   | 121 ++++-----
 .../examples/table-grid/cell-span.tsx         |  71 +++---
 .../examples/table-grid/nested.tsx            | 192 +++++++-------
 .../examples/table-semantic/alternating.tsx   |  25 +-
 .../examples/table-semantic/basic.tsx         |  12 +-
 .../examples/table-semantic/builder.tsx       |  23 +-
 .../examples/table-semantic/cells.tsx         |  79 +++---
 .../examples/table-semantic/empty-message.tsx |  14 +-
 .../examples/table-semantic/scroll.tsx        |  10 +-
 .../examples/table-semantic/sortable.tsx      |  36 +--
 .../examples/table-semantic/span.tsx          |  28 +-
 .../examples/table-semantic/toggleable.tsx    |  31 +--
 documentation-site/examples/table/basic.tsx   |  12 +-
 documentation-site/examples/table/cells.tsx   | 240 +++++++++---------
 documentation-site/examples/table/filter.tsx  |  33 +--
 .../examples/table/fixed-width-column.tsx     |  86 ++-----
 .../examples/table/horizontal-scroll.tsx      |  88 ++-----
 .../examples/table/pagination.tsx             |  44 ++--
 .../examples/table/vertical-scroll.tsx        |  34 +--
 .../table/virtual-horizontal-scroll.tsx       |  50 ++--
 documentation-site/examples/table/virtual.tsx |  50 ++--
 .../examples/tabs-motion/alignment.tsx        |  13 +-
 .../examples/tabs-motion/artwork.tsx          |   8 +-
 .../examples/tabs-motion/basic.tsx            |   6 +-
 .../examples/tabs-motion/disabled.tsx         |   6 +-
 .../examples/tabs-motion/enhancer.tsx         |   8 +-
 .../examples/tabs-motion/fixed.tsx            |   6 +-
 .../tabs-motion/keyboard-activation.tsx       |   6 +-
 .../examples/tabs-motion/keys.tsx             |   9 +-
 .../examples/tabs-motion/refs.tsx             |  10 +-
 .../examples/tabs-motion/renderAll.tsx        |   6 +-
 .../examples/tabs-motion/stateful.tsx         |   4 +-
 .../tabs-motion/vertical-orientation.tsx      |   6 +-
 .../examples/tabs/custom-keys.tsx             |   8 +-
 .../examples/tabs/overrides.tsx               |  50 ++--
 .../examples/tabs/renderall.tsx               |   6 +-
 .../examples/tabs/uncontrolled.tsx            |   6 +-
 documentation-site/examples/tabs/vertical.tsx |   6 +-
 documentation-site/examples/tag/basic.tsx     |   4 +-
 .../examples/tag/clickable-non-closeable.tsx  |  16 +-
 documentation-site/examples/tag/clickable.tsx |  16 +-
 .../examples/tag/custom-color.tsx             |   4 +-
 documentation-site/examples/tag/disabled.tsx  |  16 +-
 .../examples/tag/non-clickable.tsx            |   4 +-
 .../examples/tag/non-closeable.tsx            |   4 +-
 documentation-site/examples/tag/size.tsx      |   4 +-
 documentation-site/examples/tag/variants.tsx  |   4 +-
 .../examples/textarea/basic.tsx               |  11 +-
 documentation-site/examples/textarea/ref.tsx  |   8 +-
 .../examples/textarea/resizable.tsx           |   6 +-
 .../examples/textarea/sizes.tsx               |  12 +-
 .../examples/textarea/stateful.tsx            |   6 +-
 .../examples/textarea/states.tsx              |   8 +-
 .../examples/theme/icon-overrides.tsx         |  10 +-
 documentation-site/examples/tile/action.tsx   |   8 +-
 .../examples/tile/alignment.tsx               |   6 +-
 .../examples/tile/multi-select-batch.tsx      |   9 +-
 .../examples/tile/multi-select-live.tsx       |   9 +-
 .../tile/selection-no-trailing-content.tsx    |   9 +-
 .../examples/tile/single-select.tsx           |   9 +-
 .../examples/timepicker/timepicker-minmax.tsx |  20 +-
 .../examples/timepicker/timepicker.tsx        |  24 +-
 .../timezonepicker/timezone-picker.tsx        |  10 +-
 .../toast/toast-close-from-outside.tsx        |  12 +-
 .../examples/toast/toast-notification.tsx     |   4 +-
 .../toast/toast-same-key-notification.tsx     |  28 +-
 documentation-site/examples/tokens/basic.tsx  |   8 +-
 .../tooltip/stateful-complex-content.tsx      |  26 +-
 .../examples/tooltip/stateful.tsx             |  18 +-
 .../examples/typography/display.tsx           |  19 +-
 .../examples/typography/heading.tsx           |   7 +-
 .../examples/typography/text.tsx              |   9 +-
 .../examples/unstable-a11y/wrapper.tsx        |  23 +-
 .../examples/use-styletron/overrides.tsx      |   6 +-
 documentation-site/pages/components/menu.mdx  |   6 +-
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  82 +++---
 388 files changed, 3488 insertions(+), 4224 deletions(-)
 delete mode 100644 documentation-site/examples/.prettierrc

diff --git a/documentation-site/components/code.jsx b/documentation-site/components/code.jsx
index a067f23cf9..d54042306b 100644
--- a/documentation-site/components/code.jsx
+++ b/documentation-site/components/code.jsx
@@ -12,14 +12,15 @@ import { lightTheme } from "react-view";
 import darkTheme from "./yard/dark-theme";
 import CodeBox from "./code-box";
 
-const Code = ({ children, language }) => {
+const Code = ({ children, language, content }) => {
   const [, theme] = useStyletron();
+  const code = content || children.props.children;
   return (
     <CodeBox>
       <Highlight
         {...defaultProps}
-        code={children.replace(/[\r\n]+$/, "")}
-        language={language}
+        code={code.replace(/[\r\n]+$/, "")}
+        language={language || "tsx"}
         theme={theme.name.startsWith("light-theme") ? lightTheme : darkTheme}
       >
         {({ style, tokens, getLineProps, getTokenProps }) => (
@@ -38,8 +39,4 @@ const Code = ({ children, language }) => {
   );
 };
 
-Code.defaultProps = {
-  language: "jsx",
-};
-
 export default Code;
diff --git a/documentation-site/components/example.jsx b/documentation-site/components/example.jsx
index 224bbb817d..0f085e9665 100644
--- a/documentation-site/components/example.jsx
+++ b/documentation-site/components/example.jsx
@@ -12,6 +12,7 @@ import { Button, KIND, SIZE } from "baseui/button";
 import { ButtonGroup } from "baseui/button-group";
 import { Card } from "baseui/card";
 import { Block } from "baseui/block";
+import sdk from "@stackblitz/sdk";
 
 import Code from "./code";
 import CodeIcon from "./code-icon";
@@ -20,7 +21,7 @@ import { H3 } from "./markdown-elements";
 
 function Source(props) {
   if (!props.children || typeof props.children !== "string") return null;
-  return <Code>{props.children}</Code>;
+  return <Code content={props.children} />;
 }
 
 function Example(props) {
@@ -69,16 +70,103 @@ function Example(props) {
       {children}
 
       <Block paddingTop="scale400">
-        <Button
-          kind={KIND.secondary}
-          startEnhancer={() => <CodeIcon />}
-          onClick={(event, index) => {
-            trackEvent("show_ts_source", title);
-            setIsOpen((p) => !p);
-          }}
-        >
-          Code
-        </Button>
+        <ButtonGroup>
+          <Button
+            kind={KIND.secondary}
+            startEnhancer={() => <CodeIcon />}
+            onClick={(event, index) => {
+              trackEvent("show_ts_source", title);
+              setIsOpen((p) => !p);
+            }}
+          >
+            Code
+          </Button>
+          <Button
+            kind={KIND.secondary}
+            onClick={async (event, index) => {
+              const response = await fetch(
+                "https://registry.npmjs.org/baseui/next"
+              );
+              const data = await response.json();
+              const PACKAGE_JSON = {
+                name: "stackblitz-baseui-example",
+                version: "0.0.0",
+                private: true,
+                dependencies: {
+                  "@types/react": "18.2.45",
+                  "@types/react-dom": "18.2.18",
+                  baseui: data.version,
+                  react: "18.2.0",
+                  "react-dom": "18.2.0",
+                  "react-scripts": "latest",
+                  "styletron-engine-monolithic": "^1.0.0",
+                  "styletron-react": ">=6",
+                },
+                scripts: {
+                  start: "react-scripts start",
+                  build: "react-scripts build",
+                  test: "react-scripts test --env=jsdom",
+                  eject: "react-scripts eject",
+                },
+              };
+              sdk.openProject(
+                {
+                  dependencies: PACKAGE_JSON.dependencies,
+                  title: "BaseWeb Code Example",
+                  description:
+                    "Dynamically generated code example from baseweb.design",
+                  template: "create-react-app",
+                  files: {
+                    "index.html": `<div id="app"></div>`,
+                    "index.tsx": `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Client as Styletron } from 'styletron-engine-monolithic';
+import { Provider as StyletronProvider } from 'styletron-react';
+import { LightTheme, BaseProvider } from 'baseui';
+import Example from './Example';
+
+const root = createRoot(document.getElementById('app'));
+
+const engine = new Styletron();
+
+root.render(
+  <StrictMode>
+    <StyletronProvider value={engine}>
+      <BaseProvider theme={LightTheme}>
+        <Example />
+      </BaseProvider>
+    </StyletronProvider>
+  </StrictMode>
+);
+`,
+                    "Example.tsx": code,
+                    "tsconfig.json": `{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ES2022"],
+    "moduleResolution": "node",
+    "target": "ES2022"
+  }
+}`,
+                    "package.json": JSON.stringify(PACKAGE_JSON, null, 2),
+                  },
+                  settings: {
+                    compile: {
+                      trigger: "auto",
+                      clearConsole: false,
+                    },
+                  },
+                },
+                {
+                  newWindow: true,
+                  openFile: ["Example.tsx"],
+                }
+              );
+            }}
+          >
+            StackBlitz
+          </Button>
+        </ButtonGroup>
       </Block>
 
       {isOpen && (
diff --git a/documentation-site/components/exports.jsx b/documentation-site/components/exports.jsx
index 4002b150e7..e211639c61 100644
--- a/documentation-site/components/exports.jsx
+++ b/documentation-site/components/exports.jsx
@@ -26,7 +26,7 @@ const Exports = (props) => {
     <React.Fragment>
       <H3>{title}</H3>
       <Paragraph>You can import this module like so:</Paragraph>
-      <Code>{code}</Code>
+      <Code content={code} />
       <Paragraph>
         It exports the following components or utility functions:
       </Paragraph>
diff --git a/documentation-site/components/json.jsx b/documentation-site/components/json.jsx
index 199b38e5cc..daf555ded8 100644
--- a/documentation-site/components/json.jsx
+++ b/documentation-site/components/json.jsx
@@ -8,6 +8,8 @@ LICENSE file in the root directory of this source tree.
 import * as React from "react";
 import Code from "./code.jsx";
 
-const JSONViewer = (props) => <Code>{JSON.stringify(props.src, null, 2)}</Code>;
+const JSONViewer = (props) => (
+  <Code content={JSON.stringify(props.src, null, 2)} />
+);
 
 export default JSONViewer;
diff --git a/documentation-site/components/markdown-elements.jsx b/documentation-site/components/markdown-elements.jsx
index 96902ecca8..5171b8a267 100644
--- a/documentation-site/components/markdown-elements.jsx
+++ b/documentation-site/components/markdown-elements.jsx
@@ -33,14 +33,9 @@ const getText = (children) => {
   return label;
 };
 
-export const cleanAnchor = (anchor) =>
-  slugify(getText(anchor));
-
-export const Heading = ({
-  element,
-  fontType,
-  children,
-}) => {
+export const cleanAnchor = (anchor) => slugify(getText(anchor));
+
+export const Heading = ({ element, fontType, children }) => {
   const [hoverRef, isHovered] = useHover();
   const slug = cleanAnchor(children);
   return (
@@ -54,11 +49,7 @@ export const Heading = ({
     >
       <React.Fragment>
         {children}{" "}
-        <Anchor
-          isVisible={isHovered}
-          slug={slug}
-          element={element}
-        />
+        <Anchor isVisible={isHovered} slug={slug} element={element} />
       </React.Fragment>
     </Block>
   );
@@ -76,29 +67,24 @@ export const Paragraph = (props) => (
   </Block>
 );
 
-export const UnorderedList = (props) => (
-  <ul>{props.children}</ul>
-);
-
-export const InlineCode = themedStyled(
-  "code",
-  ({ $theme }) => {
-    return {
-      ...$theme.typography.MonoParagraphMedium,
-      backgroundColor: "rgba(27, 31, 35, 0.05)",
-      borderTopLeftRadius: "3px",
-      borderTopRightRadius: "3px",
-      borderBottomRightRadius: "3px",
-      borderBottomLeftRadius: "3px",
-      fontSize: "85%",
-      marginLeft: 0,
-      marginRight: 0,
-      marginTop: 0,
-      marginBottom: 0,
-      padding: "0.2em 0.4em",
-    };
-  }
-);
+export const UnorderedList = (props) => <ul>{props.children}</ul>;
+
+export const InlineCode = themedStyled("code", ({ $theme }) => {
+  return {
+    ...$theme.typography.MonoParagraphMedium,
+    backgroundColor: "rgba(27, 31, 35, 0.05)",
+    borderTopLeftRadius: "3px",
+    borderTopRightRadius: "3px",
+    borderBottomRightRadius: "3px",
+    borderBottomLeftRadius: "3px",
+    fontSize: "85%",
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    padding: "0.2em 0.4em",
+  };
+});
 
 const Blockquote = themedStyled("blockquote", {
   backgroundColor: "rgba(27, 31, 35, 0.03)",
@@ -116,8 +102,7 @@ const Blockquote = themedStyled("blockquote", {
 export const DocLink = ({ children, href }) => {
   const parts = href.split("#");
   const internal =
-    (parts[0] === "" && parts[1] !== "") ||
-    !href.includes("http");
+    (parts[0] === "" && parts[1] !== "") || !href.includes("http");
   if (internal) {
     return (
       <Link href={href} legacyBehavior>
@@ -136,9 +121,7 @@ export const H1 = ({ children }) => (
   <React.Fragment>
     <Head>
       <title key="title">
-        {process.env.NODE_ENV !== "production"
-          ? "[DEV] "
-          : ""}
+        {process.env.NODE_ENV !== "production" ? "[DEV] " : ""}
         Base Web - {children}
       </title>
     </Head>
@@ -149,11 +132,7 @@ export const H1 = ({ children }) => (
 );
 
 export const H2 = ({ children }) => (
-  <Heading
-    element="h2"
-    fontType="font650"
-    marginTop="scale1000"
-  >
+  <Heading element="h2" fontType="font650" marginTop="scale1000">
     {children}
   </Heading>
 );
@@ -184,21 +163,14 @@ export const H6 = ({ children }) => (
 
 export const Image = ({ alt, src, height, width }) => {
   if (height || width) {
-    return (
-      <Img
-        src={src}
-        alt={alt}
-        height={height}
-        width={width}
-      />
-    );
+    return <Img src={src} alt={alt} height={height} width={width} />;
   } else {
     return <Img src={src} alt={alt} layout="fill" />;
   }
 };
 
 export default {
-  code: Code,
+  pre: Code,
   h1: H1,
   h2: H2,
   h3: H3,
@@ -209,11 +181,7 @@ export default {
   li: ListItem,
   p: Paragraph,
   ul: UnorderedList,
-  inlineCode: ({ children }) => (
-    <InlineCode>{children}</InlineCode>
-  ),
-  blockquote: ({ children }) => (
-    <Blockquote>{children}</Blockquote>
-  ),
+  code: InlineCode,
+  blockquote: ({ children }) => <Blockquote>{children}</Blockquote>,
   a: DocLink,
 };
diff --git a/documentation-site/examples/.prettierrc b/documentation-site/examples/.prettierrc
deleted file mode 100644
index ece7d6aaed..0000000000
--- a/documentation-site/examples/.prettierrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "singleQuote": true,
-  "bracketSpacing": false,
-  "trailingComma": "all",
-  "printWidth": 68,
-  "overrides": [
-    {
-      "files": "*.js",
-      "options": {
-        "parser": "flow"
-      }
-    }
-  ]
-}
diff --git a/documentation-site/examples/accordion/basic.tsx b/documentation-site/examples/accordion/basic.tsx
index 9febcf6cfd..434f46969b 100644
--- a/documentation-site/examples/accordion/basic.tsx
+++ b/documentation-site/examples/accordion/basic.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/accordion/custom.tsx b/documentation-site/examples/accordion/custom.tsx
index b2b585a582..728567445b 100644
--- a/documentation-site/examples/accordion/custom.tsx
+++ b/documentation-site/examples/accordion/custom.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 export default function Example() {
   return (
-    <Accordion onChange={({expanded}) => console.log(expanded)}>
+    <Accordion onChange={({ expanded }) => console.log(expanded)}>
       <Panel title="Panel 1">Panel 1 opens correctly</Panel>
       <CustomPanel title="Custom Panel">
         This is a custom panel component
diff --git a/documentation-site/examples/accordion/renderpanelcontent.tsx b/documentation-site/examples/accordion/renderpanelcontent.tsx
index 5794855786..76f137bfea 100644
--- a/documentation-site/examples/accordion/renderpanelcontent.tsx
+++ b/documentation-site/examples/accordion/renderpanelcontent.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/accordion/stateful-panel.tsx b/documentation-site/examples/accordion/stateful-panel.tsx
index 2bbb085b9d..1de0005fea 100644
--- a/documentation-site/examples/accordion/stateful-panel.tsx
+++ b/documentation-site/examples/accordion/stateful-panel.tsx
@@ -1,15 +1,13 @@
-import * as React from 'react';
-import {StatefulPanel} from 'baseui/accordion';
+import * as React from "react";
+import { StatefulPanel } from "baseui/accordion";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   return (
     <ul>
-      <StatefulPanel title="Expandable panel">
-        {content}
-      </StatefulPanel>
+      <StatefulPanel title="Expandable panel">{content}</StatefulPanel>
     </ul>
   );
 }
diff --git a/documentation-site/examples/accordion/stateless.tsx b/documentation-site/examples/accordion/stateless.tsx
index 7d1aeee620..78ef2d23a8 100644
--- a/documentation-site/examples/accordion/stateless.tsx
+++ b/documentation-site/examples/accordion/stateless.tsx
@@ -1,15 +1,12 @@
-import * as React from 'react';
-import {StatelessAccordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { StatelessAccordion, Panel } from "baseui/accordion";
 
 export default function Example() {
-  const [expanded, setExpanded] = React.useState<React.Key[]>([
-    'P1',
-    'P2',
-  ]);
+  const [expanded, setExpanded] = React.useState<React.Key[]>(["P1", "P2"]);
   return (
     <StatelessAccordion
       expanded={expanded}
-      onChange={({key, expanded}) => {
+      onChange={({ key, expanded }) => {
         console.log(key);
         setExpanded(expanded);
       }}
diff --git a/documentation-site/examples/accordion/title.tsx b/documentation-site/examples/accordion/title.tsx
index 01ee4f3d81..7d8a753297 100644
--- a/documentation-site/examples/accordion/title.tsx
+++ b/documentation-site/examples/accordion/title.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Accordion, Panel} from 'baseui/accordion';
-import {ArrowUp} from 'baseui/icon';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Accordion, Panel } from "baseui/accordion";
+import { ArrowUp } from "baseui/icon";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   const [css] = useStyletron();
@@ -12,9 +12,7 @@ export default function Example() {
     <Accordion>
       <Panel
         title={
-          <div
-            className={css({display: 'flex', alignItems: 'center'})}
-          >
+          <div className={css({ display: "flex", alignItems: "center" })}>
             <ArrowUp size={24} />
             Custom Title 1
           </div>
@@ -25,9 +23,7 @@ export default function Example() {
 
       <Panel
         title={
-          <div
-            className={css({display: 'flex', alignItems: 'center'})}
-          >
+          <div className={css({ display: "flex", alignItems: "center" })}>
             <ArrowUp size={24} />
             Custom Title 2
           </div>
@@ -38,9 +34,7 @@ export default function Example() {
 
       <Panel
         title={
-          <div
-            className={css({display: 'flex', alignItems: 'center'})}
-          >
+          <div className={css({ display: "flex", alignItems: "center" })}>
             <ArrowUp size={24} />
             Custom Title 2
           </div>
diff --git a/documentation-site/examples/app-nav-bar/basic.tsx b/documentation-site/examples/app-nav-bar/basic.tsx
index 1e64e425f1..28ac46c3d1 100644
--- a/documentation-site/examples/app-nav-bar/basic.tsx
+++ b/documentation-site/examples/app-nav-bar/basic.tsx
@@ -1,53 +1,49 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {Layer} from 'baseui/layer';
-import {ChevronDown, Delete, Overflow, Upload} from 'baseui/icon';
-import {
-  AppNavBar,
-  setItemActive,
-  NavItem,
-} from 'baseui/app-nav-bar';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { Layer } from "baseui/layer";
+import { ChevronDown, Delete, Overflow, Upload } from "baseui/icon";
+import { AppNavBar, setItemActive, NavItem } from "baseui/app-nav-bar";
 
 export default function Example() {
   const [css] = useStyletron();
 
   const [mainItems, setMainItems] = React.useState<NavItem[]>([
-    {icon: Upload, label: 'Primary A'},
-    {icon: Upload, label: 'Primary B'},
+    { icon: Upload, label: "Primary A" },
+    { icon: Upload, label: "Primary B" },
     {
       icon: ChevronDown,
-      label: 'Primary C',
+      label: "Primary C",
       navExitIcon: Delete,
       children: [
-        {icon: Upload, label: 'Secondary A'},
-        {icon: Upload, label: 'Secondary B'},
-        {icon: Upload, label: 'Secondary C'},
-        {icon: Upload, label: 'Secondary D'},
+        { icon: Upload, label: "Secondary A" },
+        { icon: Upload, label: "Secondary B" },
+        { icon: Upload, label: "Secondary C" },
+        { icon: Upload, label: "Secondary D" },
       ],
     },
     {
       icon: ChevronDown,
-      label: 'Primary D',
+      label: "Primary D",
       navExitIcon: Delete,
       children: [
         {
           icon: ChevronDown,
-          label: 'Secondary E',
+          label: "Secondary E",
           children: [
-            {icon: Upload, label: 'Tertiary A'},
-            {icon: Upload, label: 'Tertiary B'},
+            { icon: Upload, label: "Tertiary A" },
+            { icon: Upload, label: "Tertiary B" },
           ],
         },
-        {icon: Upload, label: 'Secondary F'},
+        { icon: Upload, label: "Secondary F" },
       ],
     },
   ]);
   const userItems = [
-    {icon: Overflow, label: 'Account item1'},
-    {icon: Overflow, label: 'Account item2'},
-    {icon: Overflow, label: 'Account item3'},
-    {icon: Overflow, label: 'Account item4'},
+    { icon: Overflow, label: "Account item1" },
+    { icon: Overflow, label: "Account item2" },
+    { icon: Overflow, label: "Account item3" },
+    { icon: Overflow, label: "Account item4" },
   ];
 
   const [isNavVisible, setIsNavVisible] = React.useState(false);
@@ -59,17 +55,17 @@ export default function Example() {
   return (
     <React.Fragment>
       <Button onClick={() => setIsNavVisible((prev) => !prev)}>
-        {isNavVisible ? 'Hide' : 'Show'} navigation bar
+        {isNavVisible ? "Hide" : "Show"} navigation bar
       </Button>
       {isNavVisible && (
         <Layer>
           <div
             className={css({
-              boxSizing: 'border-box',
-              width: '100vw',
-              position: 'fixed',
-              top: '0',
-              left: '0',
+              boxSizing: "border-box",
+              width: "100vw",
+              position: "fixed",
+              top: "0",
+              left: "0",
             })}
           >
             <AppNavBar
@@ -77,7 +73,7 @@ export default function Example() {
               mainItems={mainItems}
               userItems={userItems}
               onMainItemSelect={handleMainItemSelect}
-              onUserItemSelect={(item) => console.log('user', item)}
+              onUserItemSelect={(item) => console.log("user", item)}
               username="Umka Marshmallow"
               usernameSubtitle="5.0"
               userImgUrl=""
diff --git a/documentation-site/examples/app-nav-bar/map-item-to-node.tsx b/documentation-site/examples/app-nav-bar/map-item-to-node.tsx
index 806dcc51f8..7f6fcc36b3 100644
--- a/documentation-site/examples/app-nav-bar/map-item-to-node.tsx
+++ b/documentation-site/examples/app-nav-bar/map-item-to-node.tsx
@@ -1,23 +1,19 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {useStyletron} from 'baseui';
-import {
-  AppNavBar,
-  setItemActive,
-  NavItem,
-} from 'baseui/app-nav-bar';
+import { useStyletron } from "baseui";
+import { AppNavBar, setItemActive, NavItem } from "baseui/app-nav-bar";
 
 export default function Example() {
   const [css] = useStyletron();
 
   const [mainItems, setMainItems] = React.useState<NavItem[]>([
-    {label: 'main one', info: {color: 'blue'}},
-    {label: 'main two', info: {color: 'red'}},
+    { label: "main one", info: { color: "blue" } },
+    { label: "main two", info: { color: "red" } },
   ]);
 
   const userItems = [
-    {label: 'user one', info: {color: 'green'}},
-    {label: 'user two', info: {color: 'yellow'}},
+    { label: "user one", info: { color: "green" } },
+    { label: "user two", info: { color: "yellow" } },
   ];
 
   function handleMainItemSelect(item: NavItem) {
@@ -32,9 +28,7 @@ export default function Example() {
       mapItemToNode={(item) => (
         <div
           className={css({
-            border: `dashed 2px ${
-              item.info ? item.info.color : 'green'
-            }`,
+            border: `dashed 2px ${item.info ? item.info.color : "green"}`,
           })}
         >
           {item.info ? `color: ${item.info.color}` : item.label}
diff --git a/documentation-site/examples/app-nav-bar/unique-identifier.tsx b/documentation-site/examples/app-nav-bar/unique-identifier.tsx
index 45cebf18d0..d6b45801e6 100644
--- a/documentation-site/examples/app-nav-bar/unique-identifier.tsx
+++ b/documentation-site/examples/app-nav-bar/unique-identifier.tsx
@@ -1,17 +1,13 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {
-  AppNavBar,
-  setItemActive,
-  NavItem,
-} from 'baseui/app-nav-bar';
+import { AppNavBar, setItemActive, NavItem } from "baseui/app-nav-bar";
 
 export default function Example() {
   const [mainItems, setMainItems] = React.useState<NavItem[]>([
-    {label: 'label', info: {id: 1}},
-    {label: 'label', info: {id: 2}},
-    {label: 'label', info: {id: 3}},
-    {label: 'label', info: {id: 4}},
+    { label: "label", info: { id: 1 } },
+    { label: "label", info: { id: 2 } },
+    { label: "label", info: { id: 3 } },
+    { label: "label", info: { id: 4 } },
   ]);
 
   function getUniqueIdentifier(item: NavItem) {
@@ -22,9 +18,7 @@ export default function Example() {
   }
 
   function handleMainItemSelect(item: NavItem) {
-    setMainItems((prev) =>
-      setItemActive(prev, item, getUniqueIdentifier),
-    );
+    setMainItems((prev) => setItemActive(prev, item, getUniqueIdentifier));
   }
 
   return (
diff --git a/documentation-site/examples/aspect-ratio-box/basic.tsx b/documentation-site/examples/aspect-ratio-box/basic.tsx
index fe483a312b..137d7413a3 100644
--- a/documentation-site/examples/aspect-ratio-box/basic.tsx
+++ b/documentation-site/examples/aspect-ratio-box/basic.tsx
@@ -1,8 +1,5 @@
-import * as React from 'react';
-import {
-  AspectRatioBox,
-  AspectRatioBoxBody,
-} from 'baseui/aspect-ratio-box';
+import * as React from "react";
+import { AspectRatioBox, AspectRatioBoxBody } from "baseui/aspect-ratio-box";
 
 export default function Example() {
   return (
@@ -15,14 +12,14 @@ export default function Example() {
           overrides={{
             Block: {
               style: {
-                borderLeftStyle: 'solid',
-                borderRightStyle: 'solid',
-                borderTopStyle: 'solid',
-                borderBottomStyle: 'solid',
-                borderLeftWidth: '2px',
-                borderTopWidth: '2px',
-                borderRightWidth: '2px',
-                borderBottomWidth: '2px',
+                borderLeftStyle: "solid",
+                borderRightStyle: "solid",
+                borderTopStyle: "solid",
+                borderBottomStyle: "solid",
+                borderLeftWidth: "2px",
+                borderTopWidth: "2px",
+                borderRightWidth: "2px",
+                borderBottomWidth: "2px",
                 borderLeftColor: `grey`,
                 borderTopColor: `grey`,
                 borderRightColor: `grey`,
@@ -42,14 +39,14 @@ export default function Example() {
           overrides={{
             Block: {
               style: {
-                borderLeftStyle: 'solid',
-                borderRightStyle: 'solid',
-                borderTopStyle: 'solid',
-                borderBottomStyle: 'solid',
-                borderLeftWidth: '2px',
-                borderTopWidth: '2px',
-                borderRightWidth: '2px',
-                borderBottomWidth: '2px',
+                borderLeftStyle: "solid",
+                borderRightStyle: "solid",
+                borderTopStyle: "solid",
+                borderBottomStyle: "solid",
+                borderLeftWidth: "2px",
+                borderTopWidth: "2px",
+                borderRightWidth: "2px",
+                borderBottomWidth: "2px",
                 borderLeftColor: `grey`,
                 borderTopColor: `grey`,
                 borderRightColor: `grey`,
diff --git a/documentation-site/examples/aspect-ratio-box/calendar.tsx b/documentation-site/examples/aspect-ratio-box/calendar.tsx
index 5871f6ddc2..e7273eeaff 100644
--- a/documentation-site/examples/aspect-ratio-box/calendar.tsx
+++ b/documentation-site/examples/aspect-ratio-box/calendar.tsx
@@ -1,12 +1,9 @@
-import * as React from 'react';
-import {
-  AspectRatioBox,
-  AspectRatioBoxBody,
-} from 'baseui/aspect-ratio-box';
-import {Button, KIND} from 'baseui/button';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { AspectRatioBox, AspectRatioBoxBody } from "baseui/aspect-ratio-box";
+import { Button, KIND } from "baseui/button";
+import { useStyletron } from "baseui";
 
-const CalendarButton = (props: {children: React.ReactNode}) => (
+const CalendarButton = (props: { children: React.ReactNode }) => (
   <Button
     kind={KIND.tertiary}
     overrides={{
@@ -23,7 +20,7 @@ const CalendarButton = (props: {children: React.ReactNode}) => (
   />
 );
 
-const DateBox = (props: {children: React.ReactNode}) => (
+const DateBox = (props: { children: React.ReactNode }) => (
   <AspectRatioBox width={`${100 / 7}%`}>
     <AspectRatioBoxBody as={CalendarButton} {...props} />
   </AspectRatioBox>
@@ -32,7 +29,7 @@ const DateBox = (props: {children: React.ReactNode}) => (
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({display: 'flex', flexWrap: 'wrap'})}>
+    <div className={css({ display: "flex", flexWrap: "wrap" })}>
       <DateBox>Feb 1</DateBox>
       <DateBox>2</DateBox>
       <DateBox>3</DateBox>
diff --git a/documentation-site/examples/aspect-ratio-box/image.tsx b/documentation-site/examples/aspect-ratio-box/image.tsx
index e4e53353d2..e4a72070d7 100644
--- a/documentation-site/examples/aspect-ratio-box/image.tsx
+++ b/documentation-site/examples/aspect-ratio-box/image.tsx
@@ -1,8 +1,5 @@
-import * as React from 'react';
-import {
-  AspectRatioBox,
-  AspectRatioBoxBody,
-} from 'baseui/aspect-ratio-box';
+import * as React from "react";
+import { AspectRatioBox, AspectRatioBoxBody } from "baseui/aspect-ratio-box";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/avatar/error.tsx b/documentation-site/examples/avatar/error.tsx
index e6eb218265..e1d21405ca 100644
--- a/documentation-site/examples/avatar/error.tsx
+++ b/documentation-site/examples/avatar/error.tsx
@@ -1,23 +1,19 @@
-import * as React from 'react';
-import {Avatar} from 'baseui/avatar';
+import * as React from "react";
+import { Avatar } from "baseui/avatar";
 
 export default function Example() {
   return (
     <React.Fragment>
-      {[
-        'scale800',
-        'scale1000',
-        'scale1200',
-        'scale1400',
-        '64px',
-      ].map((size) => (
-        <Avatar
-          name={`user`}
-          size={size}
-          src="https://not-a-real-image.png"
-          key={size}
-        />
-      ))}
+      {["scale800", "scale1000", "scale1200", "scale1400", "64px"].map(
+        (size) => (
+          <Avatar
+            name={`user`}
+            size={size}
+            src="https://not-a-real-image.png"
+            key={size}
+          />
+        ),
+      )}
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/avatar/initials.tsx b/documentation-site/examples/avatar/initials.tsx
index d3d24ba3f2..5d61116dd7 100644
--- a/documentation-site/examples/avatar/initials.tsx
+++ b/documentation-site/examples/avatar/initials.tsx
@@ -1,14 +1,12 @@
-import * as React from 'react';
-import {Avatar} from 'baseui/avatar';
+import * as React from "react";
+import { Avatar } from "baseui/avatar";
 
 export default function Example() {
   return (
     <React.Fragment>
-      {['scale1000', 'scale1200', 'scale1400', '64px'].map(
-        (size) => (
-          <Avatar name={`Han Solo`} size={size} key={size} />
-        ),
-      )}
+      {["scale1000", "scale1200", "scale1400", "64px"].map((size) => (
+        <Avatar name={`Han Solo`} size={size} key={size} />
+      ))}
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/avatar/override.tsx b/documentation-site/examples/avatar/override.tsx
index 778e492e0c..0673e25360 100644
--- a/documentation-site/examples/avatar/override.tsx
+++ b/documentation-site/examples/avatar/override.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {Avatar} from 'baseui/avatar';
-import {useStyletron} from 'baseui';
-import {expandBorderStyles} from 'baseui/styles';
+import * as React from "react";
+import { Avatar } from "baseui/avatar";
+import { useStyletron } from "baseui";
+import { expandBorderStyles } from "baseui/styles";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <React.Fragment>
-      <div className={css({display: 'flex', alignItems: 'center'})}>
+      <div className={css({ display: "flex", alignItems: "center" })}>
         <Avatar
           overrides={{
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 ...expandBorderStyles($theme.borders.border500),
               }),
             },
@@ -24,7 +24,7 @@ export default function Example() {
         <Avatar
           overrides={{
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 ...expandBorderStyles($theme.borders.border500),
               }),
             },
@@ -34,11 +34,11 @@ export default function Example() {
           src="https://not-a-real-image.png"
         />
       </div>
-      <div className={css({display: 'flex', alignItems: 'center'})}>
+      <div className={css({ display: "flex", alignItems: "center" })}>
         <Avatar
           overrides={{
             Avatar: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 borderTopLeftRadius: $theme.borders.radius100,
                 borderTopRightRadius: $theme.borders.radius100,
                 borderBottomRightRadius: $theme.borders.radius100,
@@ -46,7 +46,7 @@ export default function Example() {
               }),
             },
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 borderTopLeftRadius: $theme.borders.radius100,
                 borderTopRightRadius: $theme.borders.radius100,
                 borderBottomRightRadius: $theme.borders.radius100,
@@ -62,7 +62,7 @@ export default function Example() {
         <Avatar
           overrides={{
             Avatar: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 borderTopLeftRadius: $theme.borders.radius100,
                 borderTopRightRadius: $theme.borders.radius100,
                 borderBottomRightRadius: $theme.borders.radius100,
@@ -70,7 +70,7 @@ export default function Example() {
               }),
             },
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 borderTopLeftRadius: $theme.borders.radius100,
                 borderTopRightRadius: $theme.borders.radius100,
                 borderBottomRightRadius: $theme.borders.radius100,
diff --git a/documentation-site/examples/avatar/sizes.tsx b/documentation-site/examples/avatar/sizes.tsx
index b2dc220123..83281e5a41 100644
--- a/documentation-site/examples/avatar/sizes.tsx
+++ b/documentation-site/examples/avatar/sizes.tsx
@@ -1,23 +1,19 @@
-import * as React from 'react';
-import {Avatar} from 'baseui/avatar';
+import * as React from "react";
+import { Avatar } from "baseui/avatar";
 
 export default function Example() {
   return (
     <React.Fragment>
-      {[
-        'scale800',
-        'scale1000',
-        'scale1200',
-        'scale1400',
-        '64px',
-      ].map((size, index) => (
-        <Avatar
-          name={`user`}
-          size={size}
-          src={`https://avatars.dicebear.com/api/human/${index}.svg?width=285&mood=happy`}
-          key={size}
-        />
-      ))}
+      {["scale800", "scale1000", "scale1200", "scale1400", "64px"].map(
+        (size, index) => (
+          <Avatar
+            name={`user`}
+            size={size}
+            src={`https://avatars.dicebear.com/api/human/${index}.svg?width=285&mood=happy`}
+            key={size}
+          />
+        ),
+      )}
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/badge/offset.tsx b/documentation-site/examples/badge/offset.tsx
index a769613e98..67f019fa97 100644
--- a/documentation-site/examples/badge/offset.tsx
+++ b/documentation-site/examples/badge/offset.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {Avatar} from 'baseui/avatar';
-import {Badge, SHAPE, COLOR, PLACEMENT} from 'baseui/badge';
+import * as React from "react";
+import { Avatar } from "baseui/avatar";
+import { Badge, SHAPE, COLOR, PLACEMENT } from "baseui/badge";
 
 const styles = {
-  height: '140px',
-  width: '140px',
-  border: '1px solid grey',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  height: "140px",
+  width: "140px",
+  border: "1px solid grey",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
 };
 
 export default function Example() {
@@ -24,7 +24,7 @@ export default function Example() {
         <div style={styles}>
           <Avatar
             name={`user`}
-            size={'72px'}
+            size={"72px"}
             src={`https://avatars.dicebear.com/api/human/4.svg?width=285&mood=happy`}
           />
         </div>
diff --git a/documentation-site/examples/badge/primary-inline.tsx b/documentation-site/examples/badge/primary-inline.tsx
index 7f7f8e07be..7b2af82a78 100644
--- a/documentation-site/examples/badge/primary-inline.tsx
+++ b/documentation-site/examples/badge/primary-inline.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Badge, COLOR} from 'baseui/badge';
+import * as React from "react";
+import { Badge, COLOR } from "baseui/badge";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/badge/secondary-inline.tsx b/documentation-site/examples/badge/secondary-inline.tsx
index ea3cf2c614..51ddefc3c8 100644
--- a/documentation-site/examples/badge/secondary-inline.tsx
+++ b/documentation-site/examples/badge/secondary-inline.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Badge, HIERARCHY} from 'baseui/badge';
+import * as React from "react";
+import { Badge, HIERARCHY } from "baseui/badge";
 
 export default function Example() {
   return (
@@ -8,14 +8,11 @@ export default function Example() {
       <div>
         <Badge
           hierarchy={HIERARCHY.secondary}
-          overrides={{Badge: {style: {marginRight: '8px'}}}}
+          overrides={{ Badge: { style: { marginRight: "8px" } } }}
           content="7 min"
         />
 
-        <Badge
-          hierarchy={HIERARCHY.secondary}
-          content="Closest stop"
-        />
+        <Badge hierarchy={HIERARCHY.secondary} content="Closest stop" />
       </div>
     </React.Fragment>
   );
diff --git a/documentation-site/examples/banner/action.tsx b/documentation-site/examples/banner/action.tsx
index c8b0d21e77..64316ca594 100644
--- a/documentation-site/examples/banner/action.tsx
+++ b/documentation-site/examples/banner/action.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Banner, ACTION_POSITION} from 'baseui/banner';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Banner, ACTION_POSITION } from "baseui/banner";
 // @ts-ignore
-import Delete from 'baseui/icon/delete';
+import Delete from "baseui/icon/delete";
 
-function ActionIcon({size}: {size: string}) {
+function ActionIcon({ size }: { size: string }) {
   return <Delete size={size} />;
 }
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '400px'})}>
+    <div className={css({ width: "400px" })}>
       <Banner
         action={{
-          label: 'Label',
+          label: "Label",
           onClick: () => {},
         }}
         title="Headline text"
@@ -24,7 +24,7 @@ export default function Example() {
 
       <Banner
         action={{
-          label: 'Label',
+          label: "Label",
           icon: ActionIcon,
           onClick: () => {},
         }}
@@ -35,7 +35,7 @@ export default function Example() {
 
       <Banner
         action={{
-          label: 'Label',
+          label: "Label",
           onClick: () => {},
           position: ACTION_POSITION.below,
         }}
diff --git a/documentation-site/examples/banner/artwork.tsx b/documentation-site/examples/banner/artwork.tsx
index c8f439875a..2523dfc2e0 100644
--- a/documentation-site/examples/banner/artwork.tsx
+++ b/documentation-site/examples/banner/artwork.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Banner, ARTWORK_TYPE} from 'baseui/banner';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Banner, ARTWORK_TYPE } from "baseui/banner";
 // @ts-ignore
-import DeleteAlt from 'baseui/icon/delete-alt';
+import DeleteAlt from "baseui/icon/delete-alt";
 
-function ArtworkIcon({size}: {size: string}) {
+function ArtworkIcon({ size }: { size: string }) {
   return <DeleteAlt size={size} aria-label="icon label" />;
 }
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '400px'})}>
+    <div className={css({ width: "400px" })}>
       <Banner
         title="Headline text"
         artwork={{
diff --git a/documentation-site/examples/banner/variants.tsx b/documentation-site/examples/banner/variants.tsx
index d89b61b70f..5422f8e3a4 100644
--- a/documentation-site/examples/banner/variants.tsx
+++ b/documentation-site/examples/banner/variants.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Banner, HIERARCHY, KIND} from 'baseui/banner';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Banner, HIERARCHY, KIND } from "baseui/banner";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '400px'})}>
+    <div className={css({ width: "400px" })}>
       <Banner hierarchy={HIERARCHY.low} kind={KIND.info}>
         Paragraph text
       </Banner>
diff --git a/documentation-site/examples/block/basic.tsx b/documentation-site/examples/block/basic.tsx
index ef4d5db8d0..b545f0a423 100644
--- a/documentation-site/examples/block/basic.tsx
+++ b/documentation-site/examples/block/basic.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-import {Block} from 'baseui/block';
+import React from "react";
+import { Block } from "baseui/block";
 
 export default function Example() {
   return (
     <React.Fragment>
       <Block>first element</Block>
-      <Block paddingTop="100px">
-        padding top applied to this element
-      </Block>
+      <Block paddingTop="100px">padding top applied to this element</Block>
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/block/override.tsx b/documentation-site/examples/block/override.tsx
index 885486cdfb..f2b6281e9a 100644
--- a/documentation-site/examples/block/override.tsx
+++ b/documentation-site/examples/block/override.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Block} from 'baseui/block';
+import * as React from "react";
+import { Block } from "baseui/block";
 
 export default function Example() {
   return (
@@ -7,7 +7,7 @@ export default function Example() {
       as="h2"
       overrides={{
         Block: {
-          style: {color: 'red'},
+          style: { color: "red" },
         },
       }}
     >
diff --git a/documentation-site/examples/block/responsive.tsx b/documentation-site/examples/block/responsive.tsx
index 5ac15b2746..32b47c8cf6 100644
--- a/documentation-site/examples/block/responsive.tsx
+++ b/documentation-site/examples/block/responsive.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {Block} from 'baseui/block';
+import * as React from "react";
+import { Block } from "baseui/block";
 
 export default function Example() {
   return (
     <Block
-      height={['20px', '40px', '80px', '160px']}
+      height={["20px", "40px", "80px", "160px"]}
       backgroundColor="primary200"
     />
   );
diff --git a/documentation-site/examples/bottom-navigation/overflow.tsx b/documentation-site/examples/bottom-navigation/overflow.tsx
index 21c099995d..3a43f459b6 100644
--- a/documentation-site/examples/bottom-navigation/overflow.tsx
+++ b/documentation-site/examples/bottom-navigation/overflow.tsx
@@ -1,28 +1,27 @@
-import * as React from 'react';
-import {styled} from 'baseui/styles';
-import {BottomNavigation, NavItem} from 'baseui/bottom-navigation';
-import {MessageCard} from 'baseui/message-card';
-import {FileUploader} from 'baseui/file-uploader';
-import {colors} from 'baseui/tokens';
-import Calendar from 'baseui/icon/calendar';
-import Alert from 'baseui/icon/alert';
-import ChevronRight from 'baseui/icon/chevron-right';
-import Show from 'baseui/icon/show';
-import Search from 'baseui/icon/search';
-import Upload from 'baseui/icon/upload';
-import deliveryHeroItalianSvg from './images/deliveryHeroItalian.svg';
-import deliveryLargeStrawberriesSvg from './images/deliveryLargeStrawberries.svg';
-import earnerLargeRiderDriverSvg from './images/earnerLargeRiderDriver.svg';
+import * as React from "react";
+import { styled } from "baseui/styles";
+import { BottomNavigation, NavItem } from "baseui/bottom-navigation";
+import { MessageCard } from "baseui/message-card";
+import { FileUploader } from "baseui/file-uploader";
+import { colors } from "baseui/tokens";
+import Calendar from "baseui/icon/calendar";
+import Alert from "baseui/icon/alert";
+import ChevronRight from "baseui/icon/chevron-right";
+import Show from "baseui/icon/show";
+import Search from "baseui/icon/search";
+import Upload from "baseui/icon/upload";
+import deliveryHeroItalianSvg from "./images/deliveryHeroItalian.svg";
+import deliveryLargeStrawberriesSvg from "./images/deliveryLargeStrawberries.svg";
+import earnerLargeRiderDriverSvg from "./images/earnerLargeRiderDriver.svg";
 
-export const TextContent = ({numParagraphs, children}) => {
+export const TextContent = ({ numParagraphs, children }) => {
   const Paragraph = () => (
     <p>
-      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
-      odit aut fugit, sed quia consequuntur magni dolores eos qui
-      ratione voluptatem sequi nesciunt. Neque porro quisquam est,
-      qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
-      velit, sed quia non numquam eius modi tempora incidunt ut
-      labore et dolore magnam aliquam quaerat voluptatem.
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+      fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+      sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
+      amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
     </p>
   );
 
@@ -30,7 +29,7 @@ export const TextContent = ({numParagraphs, children}) => {
     numParagraphs > 0 ? Array(numParagraphs).fill(Paragraph) : [];
 
   return (
-    <div style={{padding: '10px'}}>
+    <div style={{ padding: "10px" }}>
       {children}
       {paragraphs.map((Paragraph, idx) => (
         <Paragraph key={idx} />
@@ -39,13 +38,13 @@ export const TextContent = ({numParagraphs, children}) => {
   );
 };
 
-const StyledIphone6 = styled('div', {
-  width: '375px',
-  height: '667px',
-  border: '1px solid #ECECEC',
-  borderRadius: '12px',
-  position: 'relative',
-  overflow: 'hidden',
+const StyledIphone6 = styled("div", {
+  width: "375px",
+  height: "667px",
+  border: "1px solid #ECECEC",
+  borderRadius: "12px",
+  position: "relative",
+  overflow: "hidden",
 });
 
 export default function Example() {
@@ -55,7 +54,7 @@ export default function Example() {
     <StyledIphone6>
       <BottomNavigation
         activeKey={activeKey}
-        onChange={({activeKey}) => setActiveKey(activeKey)}
+        onChange={({ activeKey }) => setActiveKey(activeKey)}
       >
         <NavItem title="Search" icon={Search}>
           <TextContent numParagraphs={8}>
@@ -66,9 +65,9 @@ export default function Example() {
         <NavItem title="Food" icon={Show}>
           <div
             style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '20px',
+              display: "flex",
+              flexDirection: "column",
+              gap: "20px",
             }}
           >
             <MessageCard
@@ -78,9 +77,9 @@ export default function Example() {
               image={{
                 src: deliveryHeroItalianSvg,
                 ariaLabel:
-                  'Illustration of an Italian meal with pizza and pasta on a picnic table',
+                  "Illustration of an Italian meal with pizza and pasta on a picnic table",
               }}
-              onClick={() => console.log('Saved')}
+              onClick={() => console.log("Saved")}
               backgroundColor={colors.red200}
             />
             <MessageCard
@@ -88,9 +87,9 @@ export default function Example() {
               buttonLabel="Save now"
               image={{
                 src: deliveryLargeStrawberriesSvg,
-                ariaLabel: 'Illustration of strawberries',
+                ariaLabel: "Illustration of strawberries",
               }}
-              onClick={() => console.log('Saved')}
+              onClick={() => console.log("Saved")}
             />
             <MessageCard
               heading="Heading"
@@ -98,9 +97,9 @@ export default function Example() {
               image={{
                 src: earnerLargeRiderDriverSvg,
                 ariaLabel:
-                  'A car with a driver and a passenger both wearing masks',
+                  "A car with a driver and a passenger both wearing masks",
               }}
-              onClick={() => console.log('Saved')}
+              onClick={() => console.log("Saved")}
               backgroundColor={colors.blue300}
             />
           </div>
@@ -127,7 +126,7 @@ export default function Example() {
         <NavItem title="Upload" icon={Upload}>
           <TextContent numParagraphs={0}>
             <h1>File Upload</h1>
-            <FileUploader errorMessage={''} />
+            <FileUploader errorMessage={""} />
           </TextContent>
         </NavItem>
       </BottomNavigation>
diff --git a/documentation-site/examples/breadcrumbs/basic.tsx b/documentation-site/examples/breadcrumbs/basic.tsx
index 5b7943614a..155ff1d5e9 100644
--- a/documentation-site/examples/breadcrumbs/basic.tsx
+++ b/documentation-site/examples/breadcrumbs/basic.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Breadcrumbs} from 'baseui/breadcrumbs';
-import {StyledLink as Link} from 'baseui/link';
+import * as React from "react";
+import { Breadcrumbs } from "baseui/breadcrumbs";
+import { StyledLink as Link } from "baseui/link";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/breadcrumbs/pseudo.tsx b/documentation-site/examples/breadcrumbs/pseudo.tsx
index acf71e6572..c9c796cb64 100644
--- a/documentation-site/examples/breadcrumbs/pseudo.tsx
+++ b/documentation-site/examples/breadcrumbs/pseudo.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {Breadcrumbs} from 'baseui/breadcrumbs';
-import {StyledLink as Link} from 'baseui/link';
+import * as React from "react";
+import { Breadcrumbs } from "baseui/breadcrumbs";
+import { StyledLink as Link } from "baseui/link";
 
 export default function Example() {
   return (
     <Breadcrumbs
       overrides={{
         ListItem: {
-          style: ({$itemIndex, $theme}) => {
+          style: ({ $itemIndex, $theme }) => {
             if ($itemIndex === 0) return {};
             return {
-              ':before': {
+              ":before": {
                 content: "'>'",
                 color: $theme.colors.mono700,
                 marginLeft: $theme.sizing.scale400,
diff --git a/documentation-site/examples/button-dock/basic.tsx b/documentation-site/examples/button-dock/basic.tsx
index 3045044731..566fa8de09 100644
--- a/documentation-site/examples/button-dock/basic.tsx
+++ b/documentation-site/examples/button-dock/basic.tsx
@@ -1,30 +1,30 @@
-import * as React from 'react';
-import {ButtonDock} from 'baseui/button-dock';
-import {Button, KIND} from 'baseui/button';
-import {Checkbox} from 'baseui/checkbox';
-import {styled} from 'baseui';
+import * as React from "react";
+import { ButtonDock } from "baseui/button-dock";
+import { Button, KIND } from "baseui/button";
+import { Checkbox } from "baseui/checkbox";
+import { styled } from "baseui";
 
-const StyledIphone6 = styled('div', {
-  width: '375px',
-  height: '667px',
-  border: '1px solid #ECECEC',
-  borderRadius: '12px',
-  backgroundColor: '#ECECEC',
-  overflow: 'auto',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
+const StyledIphone6 = styled("div", {
+  width: "375px",
+  height: "667px",
+  border: "1px solid #ECECEC",
+  borderRadius: "12px",
+  backgroundColor: "#ECECEC",
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
 });
 
-const ScrollableContent = styled('div', ({$theme}) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  overflow: 'auto',
-  paddingTop: '8px',
-  paddingRight: '8px',
-  paddingBottom: '8px',
-  paddingLeft: '8px',
+const ScrollableContent = styled("div", ({ $theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  overflow: "auto",
+  paddingTop: "8px",
+  paddingRight: "8px",
+  paddingBottom: "8px",
+  paddingLeft: "8px",
   color: $theme.colors.contentPrimary,
   backgroundColor: $theme.colors.backgroundPrimary,
 }));
@@ -32,10 +32,10 @@ const ScrollableContent = styled('div', ({$theme}) => ({
 const Content = () => {
   return (
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
     </p>
   );
 };
@@ -51,9 +51,7 @@ export default function Example() {
       <ButtonDock
         topAccessory={<Checkbox>Optional top accessory</Checkbox>}
         primaryAction={<Button>Primary Action</Button>}
-        dismissiveAction={
-          <Button kind={KIND.tertiary}>Dismiss</Button>
-        }
+        dismissiveAction={<Button kind={KIND.tertiary}>Dismiss</Button>}
         secondaryActions={[
           <Button kind={KIND.secondary} key="first">
             Secondary Action 1
diff --git a/documentation-site/examples/button-group/basic.tsx b/documentation-site/examples/button-group/basic.tsx
index 242ae4dade..022cad1571 100644
--- a/documentation-site/examples/button-group/basic.tsx
+++ b/documentation-site/examples/button-group/basic.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button-group/checkbox-mode.tsx b/documentation-site/examples/button-group/checkbox-mode.tsx
index cad65c2b45..605dfdfa05 100644
--- a/documentation-site/examples/button-group/checkbox-mode.tsx
+++ b/documentation-site/examples/button-group/checkbox-mode.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   const [selected, setSelected] = React.useState([0, 1]);
diff --git a/documentation-site/examples/button-group/disabled-button.tsx b/documentation-site/examples/button-group/disabled-button.tsx
index ee2145e928..74d12d78ac 100644
--- a/documentation-site/examples/button-group/disabled-button.tsx
+++ b/documentation-site/examples/button-group/disabled-button.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button-group/disabled.tsx b/documentation-site/examples/button-group/disabled.tsx
index 3bd7030d55..91bc414c43 100644
--- a/documentation-site/examples/button-group/disabled.tsx
+++ b/documentation-site/examples/button-group/disabled.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button-group/dropdown.tsx b/documentation-site/examples/button-group/dropdown.tsx
index 768c85022e..c961f5f12d 100644
--- a/documentation-site/examples/button-group/dropdown.tsx
+++ b/documentation-site/examples/button-group/dropdown.tsx
@@ -1,39 +1,33 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
-import {TriangleDown} from 'baseui/icon';
-import {Popover} from 'baseui/popover';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
+import { TriangleDown } from "baseui/icon";
+import { Popover } from "baseui/popover";
+import { StatefulMenu } from "baseui/menu";
 
 const items = [
-  {label: 'deploy'},
-  {label: 'restart'},
-  {label: 'scale'},
-  {label: 'rollback'},
-  {label: 'abort'},
+  { label: "deploy" },
+  { label: "restart" },
+  { label: "scale" },
+  { label: "rollback" },
+  { label: "abort" },
 ];
 
 // This component is required because of the way that button-group works.
 // The button group parent will decorate its children with additional props.
 // In Dropdown, we ensure that those props get shuttled to the Button component
 // rather than the wrapping StatefulPopover
-const Dropdown = (props: {children: React.ReactNode}) => {
+const Dropdown = (props: { children: React.ReactNode }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
     <Popover
       isOpen={isOpen}
       onClick={() => setIsOpen((s) => !s)}
       content={
-        <StatefulMenu
-          items={items}
-          onItemSelect={() => setIsOpen(false)}
-        />
+        <StatefulMenu items={items} onItemSelect={() => setIsOpen(false)} />
       }
     >
-      <Button
-        {...props}
-        endEnhancer={() => <TriangleDown size={24} />}
-      >
+      <Button {...props} endEnhancer={() => <TriangleDown size={24} />}>
         {props.children}
       </Button>
     </Popover>
diff --git a/documentation-site/examples/button-group/enhancer.tsx b/documentation-site/examples/button-group/enhancer.tsx
index cca03f2cb9..54393c9c66 100644
--- a/documentation-site/examples/button-group/enhancer.tsx
+++ b/documentation-site/examples/button-group/enhancer.tsx
@@ -1,20 +1,14 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
-import {Upload} from 'baseui/icon';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
+import { Upload } from "baseui/icon";
 
 export default function Example() {
   return (
     <ButtonGroup>
-      <Button startEnhancer={() => <Upload size={24} />}>
-        Label
-      </Button>
-      <Button startEnhancer={() => <Upload size={24} />}>
-        Label
-      </Button>
-      <Button startEnhancer={() => <Upload size={24} />}>
-        Label
-      </Button>
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
     </ButtonGroup>
   );
 }
diff --git a/documentation-site/examples/button-group/icon.tsx b/documentation-site/examples/button-group/icon.tsx
index 66bcd2ea62..db487f7c73 100644
--- a/documentation-site/examples/button-group/icon.tsx
+++ b/documentation-site/examples/button-group/icon.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
-import {Upload} from 'baseui/icon';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
+import { Upload } from "baseui/icon";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button-group/radio-mode.tsx b/documentation-site/examples/button-group/radio-mode.tsx
index 741a771572..05a08b2645 100644
--- a/documentation-site/examples/button-group/radio-mode.tsx
+++ b/documentation-site/examples/button-group/radio-mode.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup, MODE} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup, MODE } from "baseui/button-group";
 
 export default function Example() {
   const [selected, setSelected] = React.useState<number>(-1);
diff --git a/documentation-site/examples/button-group/stateful-checkbox.tsx b/documentation-site/examples/button-group/stateful-checkbox.tsx
index 0e20e477c1..7ccb0ac13c 100644
--- a/documentation-site/examples/button-group/stateful-checkbox.tsx
+++ b/documentation-site/examples/button-group/stateful-checkbox.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulButtonGroup, MODE} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulButtonGroup, MODE } from "baseui/button-group";
 
 export default function Example() {
   return (
     <StatefulButtonGroup
       mode={MODE.checkbox}
-      initialState={{selected: [0, 1]}}
+      initialState={{ selected: [0, 1] }}
     >
       <Button>Label</Button>
       <Button>Label</Button>
diff --git a/documentation-site/examples/button-group/stateful-radio.tsx b/documentation-site/examples/button-group/stateful-radio.tsx
index 51c5ee3f8a..5780f9042f 100644
--- a/documentation-site/examples/button-group/stateful-radio.tsx
+++ b/documentation-site/examples/button-group/stateful-radio.tsx
@@ -1,13 +1,10 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulButtonGroup, MODE} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulButtonGroup, MODE } from "baseui/button-group";
 
 export default function Example() {
   return (
-    <StatefulButtonGroup
-      mode={MODE.radio}
-      initialState={{selected: 0}}
-    >
+    <StatefulButtonGroup mode={MODE.radio} initialState={{ selected: 0 }}>
       <Button>Label</Button>
       <Button>Label</Button>
       <Button>Label</Button>
diff --git a/documentation-site/examples/button-group/wrappable.tsx b/documentation-site/examples/button-group/wrappable.tsx
index 3ca6262695..c3d8f754cb 100644
--- a/documentation-site/examples/button-group/wrappable.tsx
+++ b/documentation-site/examples/button-group/wrappable.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ButtonGroup} from 'baseui/button-group';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   return (
     <ButtonGroup
       overrides={{
         Root: {
-          style: {flexWrap: 'wrap'},
+          style: { flexWrap: "wrap" },
         },
       }}
     >
diff --git a/documentation-site/examples/button-timed/paused.tsx b/documentation-site/examples/button-timed/paused.tsx
index c2a16a8eb4..0cb179fffe 100644
--- a/documentation-site/examples/button-timed/paused.tsx
+++ b/documentation-site/examples/button-timed/paused.tsx
@@ -4,10 +4,10 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import * as React from 'react';
+import * as React from "react";
 
-import {ButtonTimed} from 'baseui/button-timed';
-import {Button, KIND} from 'baseui/button';
+import { ButtonTimed } from "baseui/button-timed";
+import { Button, KIND } from "baseui/button";
 
 export default function Example() {
   const [finished1, setFinished1] = React.useState(false);
@@ -19,11 +19,8 @@ export default function Example() {
 
   return (
     <div>
-      <Button
-        kind={KIND.secondary}
-        onClick={() => setPaused(!paused)}
-      >
-        {paused ? 'Run' : 'Pause'}
+      <Button kind={KIND.secondary} onClick={() => setPaused(!paused)}>
+        {paused ? "Run" : "Pause"}
       </Button>
 
       <div>
@@ -35,9 +32,7 @@ export default function Example() {
           Countdown
         </ButtonTimed>
         {finished1 && (
-          <span style={{marginLeft: '20px', color: 'red'}}>
-            Time!
-          </span>
+          <span style={{ marginLeft: "20px", color: "red" }}>Time!</span>
         )}
       </div>
 
@@ -50,9 +45,7 @@ export default function Example() {
           Countdown
         </ButtonTimed>
         {finished2 && (
-          <span style={{marginLeft: '20px', color: 'blue'}}>
-            Time!
-          </span>
+          <span style={{ marginLeft: "20px", color: "blue" }}>Time!</span>
         )}
       </div>
 
@@ -65,9 +58,7 @@ export default function Example() {
           Countdown
         </ButtonTimed>
         {finished3 && (
-          <span style={{marginLeft: '20px', color: 'gold'}}>
-            Time!
-          </span>
+          <span style={{ marginLeft: "20px", color: "gold" }}>Time!</span>
         )}
       </div>
 
@@ -80,9 +71,7 @@ export default function Example() {
           Countdown
         </ButtonTimed>
         {finished4 && (
-          <span style={{marginLeft: '20px', color: 'green'}}>
-            Time!
-          </span>
+          <span style={{ marginLeft: "20px", color: "green" }}>Time!</span>
         )}
       </div>
     </div>
diff --git a/documentation-site/examples/button/as-an-anchor.tsx b/documentation-site/examples/button/as-an-anchor.tsx
index c9c8d98a36..22ec13dd30 100644
--- a/documentation-site/examples/button/as-an-anchor.tsx
+++ b/documentation-site/examples/button/as-an-anchor.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button/basic.tsx b/documentation-site/examples/button/basic.tsx
index 0f4cf00739..2812532c72 100644
--- a/documentation-site/examples/button/basic.tsx
+++ b/documentation-site/examples/button/basic.tsx
@@ -1,8 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
-  return (
-    <Button onClick={() => alert('thank you 🙂')}>Click me!</Button>
-  );
+  return <Button onClick={() => alert("thank you 🙂")}>Click me!</Button>;
 }
diff --git a/documentation-site/examples/button/dropdown.tsx b/documentation-site/examples/button/dropdown.tsx
index 8bd9a96559..94c46b6b8c 100644
--- a/documentation-site/examples/button/dropdown.tsx
+++ b/documentation-site/examples/button/dropdown.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ChevronDown} from 'baseui/icon';
-import {StatefulPopover, PLACEMENT} from 'baseui/popover';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ChevronDown } from "baseui/icon";
+import { StatefulPopover, PLACEMENT } from "baseui/popover";
+import { StatefulMenu } from "baseui/menu";
 
 const ITEMS = [
-  {label: 'Item One'},
-  {label: 'Item Two'},
-  {label: 'Item Three'},
-  {label: 'Item Four'},
-  {label: 'Item Five'},
-  {label: 'Item Six'},
-  {label: 'Item Seven'},
-  {label: 'Item Eight'},
-  {label: 'Item Nine'},
-  {label: 'Item Ten'},
-  {label: 'Item Eleven'},
-  {label: 'Item Twelve'},
+  { label: "Item One" },
+  { label: "Item Two" },
+  { label: "Item Three" },
+  { label: "Item Four" },
+  { label: "Item Five" },
+  { label: "Item Six" },
+  { label: "Item Seven" },
+  { label: "Item Eight" },
+  { label: "Item Nine" },
+  { label: "Item Ten" },
+  { label: "Item Eleven" },
+  { label: "Item Twelve" },
 ];
 
 export default function Example() {
@@ -24,19 +24,17 @@ export default function Example() {
     <StatefulPopover
       focusLock
       placement={PLACEMENT.bottomLeft}
-      content={({close}) => (
+      content={({ close }) => (
         <StatefulMenu
           items={ITEMS}
           onItemSelect={() => close()}
           overrides={{
-            List: {style: {height: '150px', width: '138px'}},
+            List: { style: { height: "150px", width: "138px" } },
           }}
         />
       )}
     >
-      <Button endEnhancer={() => <ChevronDown size={24} />}>
-        Open Menu
-      </Button>
+      <Button endEnhancer={() => <ChevronDown size={24} />}>Open Menu</Button>
     </StatefulPopover>
   );
 }
diff --git a/documentation-site/examples/button/kinds.tsx b/documentation-site/examples/button/kinds.tsx
index 1ab3186966..7c4612685a 100644
--- a/documentation-site/examples/button/kinds.tsx
+++ b/documentation-site/examples/button/kinds.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Block} from 'baseui/block';
-import {Button, KIND} from 'baseui/button';
+import * as React from "react";
+import { Block } from "baseui/block";
+import { Button, KIND } from "baseui/button";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button/shapes.tsx b/documentation-site/examples/button/shapes.tsx
index 9ca31d16ef..7a40bd381d 100644
--- a/documentation-site/examples/button/shapes.tsx
+++ b/documentation-site/examples/button/shapes.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button, SHAPE} from 'baseui/button';
-import {Upload} from 'baseui/icon';
+import * as React from "react";
+import { Button, SHAPE } from "baseui/button";
+import { Upload } from "baseui/icon";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/button/sizes.tsx b/documentation-site/examples/button/sizes.tsx
index 98b5f6774d..5b8ef72a37 100644
--- a/documentation-site/examples/button/sizes.tsx
+++ b/documentation-site/examples/button/sizes.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button, SIZE} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button, SIZE } from "baseui/button";
 
 export default function Example() {
   const [css, theme] = useStyletron();
-  const space = css({marginBottom: theme.sizing.scale300});
+  const space = css({ marginBottom: theme.sizing.scale300 });
   return (
     <React.Fragment>
       <Button size={SIZE.compact}>Compact size</Button>
diff --git a/documentation-site/examples/button/states.tsx b/documentation-site/examples/button/states.tsx
index dae1e66ebf..a4ac06bfdf 100644
--- a/documentation-site/examples/button/states.tsx
+++ b/documentation-site/examples/button/states.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css, theme] = useStyletron();
-  const space = css({marginLeft: theme.sizing.scale300});
+  const space = css({ marginLeft: theme.sizing.scale300 });
   return (
     <React.Fragment>
       <Button>No state</Button>
diff --git a/documentation-site/examples/button/with-enhancers.tsx b/documentation-site/examples/button/with-enhancers.tsx
index 5c1a612d45..c309c18377 100644
--- a/documentation-site/examples/button/with-enhancers.tsx
+++ b/documentation-site/examples/button/with-enhancers.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {Upload, ArrowRight} from 'baseui/icon';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { Upload, ArrowRight } from "baseui/icon";
 
 export default function Example() {
   return (
@@ -11,9 +11,7 @@ export default function Example() {
         </Button>
       </p>
       <p>
-        <Button endEnhancer={() => <Upload size={24} />}>
-          End Enhancer
-        </Button>
+        <Button endEnhancer={() => <Upload size={24} />}>End Enhancer</Button>
       </p>
     </React.Fragment>
   );
diff --git a/documentation-site/examples/card/basic.tsx b/documentation-site/examples/card/basic.tsx
index be9c9ae3ee..9c403f44b8 100644
--- a/documentation-site/examples/card/basic.tsx
+++ b/documentation-site/examples/card/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Card, StyledBody} from 'baseui/card';
+import * as React from "react";
+import { Card, StyledBody } from "baseui/card";
 
 export default function Example() {
   return (
-    <Card overrides={{Root: {style: {width: '328px'}}}}>
+    <Card overrides={{ Root: { style: { width: "328px" } } }}>
       <StyledBody>
-        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
-        ornare faucibus ex, non facilisis nisl.
+        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+        faucibus ex, non facilisis nisl.
       </StyledBody>
     </Card>
   );
diff --git a/documentation-site/examples/card/image-cta.tsx b/documentation-site/examples/card/image-cta.tsx
index e7697db78a..3ccdc15aad 100644
--- a/documentation-site/examples/card/image-cta.tsx
+++ b/documentation-site/examples/card/image-cta.tsx
@@ -1,22 +1,20 @@
-import * as React from 'react';
-import {Card, StyledBody, StyledAction} from 'baseui/card';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Card, StyledBody, StyledAction } from "baseui/card";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
     <Card
-      overrides={{Root: {style: {width: '328px'}}}}
-      headerImage={
-        'https://source.unsplash.com/user/erondu/700x400'
-      }
+      overrides={{ Root: { style: { width: "328px" } } }}
+      headerImage={"https://source.unsplash.com/user/erondu/700x400"}
       title="Example card"
     >
       <StyledBody>
-        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
-        ornare faucibus ex, non facilisis nisl.
+        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+        faucibus ex, non facilisis nisl.
       </StyledBody>
       <StyledAction>
-        <Button overrides={{BaseButton: {style: {width: '100%'}}}}>
+        <Button overrides={{ BaseButton: { style: { width: "100%" } } }}>
           Button Label
         </Button>
       </StyledAction>
diff --git a/documentation-site/examples/card/thumbnail-cta.tsx b/documentation-site/examples/card/thumbnail-cta.tsx
index 36f108e1cc..9a787999eb 100644
--- a/documentation-site/examples/card/thumbnail-cta.tsx
+++ b/documentation-site/examples/card/thumbnail-cta.tsx
@@ -1,27 +1,22 @@
-import * as React from 'react';
-import {
-  Card,
-  StyledBody,
-  StyledAction,
-  StyledThumbnail,
-} from 'baseui/card';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Card, StyledBody, StyledAction, StyledThumbnail } from "baseui/card";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
     <Card
-      overrides={{Root: {style: {width: '328px'}}}}
+      overrides={{ Root: { style: { width: "328px" } } }}
       title="Example card"
     >
       <StyledThumbnail
-        src={'https://source.unsplash.com/user/erondu/300x300'}
+        src={"https://source.unsplash.com/user/erondu/300x300"}
       />
       <StyledBody>
-        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
-        ornare faucibus ex, non facilisis nisl.
+        Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+        faucibus ex, non facilisis nisl.
       </StyledBody>
       <StyledAction>
-        <Button overrides={{BaseButton: {style: {width: '100%'}}}}>
+        <Button overrides={{ BaseButton: { style: { width: "100%" } } }}>
           Button Label
         </Button>
       </StyledAction>
diff --git a/documentation-site/examples/checkbox/alignment.tsx b/documentation-site/examples/checkbox/alignment.tsx
index e4246b20c4..4b0d00ef0d 100644
--- a/documentation-site/examples/checkbox/alignment.tsx
+++ b/documentation-site/examples/checkbox/alignment.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checkboxes, setCheckboxes] = React.useState([
@@ -23,9 +23,9 @@ export default function Example() {
       </Checkbox>
       <div
         style={{
-          display: 'flex',
-          justifyContent: 'center',
-          margin: '8px 0 8px 12px',
+          display: "flex",
+          justifyContent: "center",
+          margin: "8px 0 8px 12px",
         }}
       >
         <Checkbox
diff --git a/documentation-site/examples/checkbox/basic-controlled.tsx b/documentation-site/examples/checkbox/basic-controlled.tsx
index f861a947c4..08ed413379 100644
--- a/documentation-site/examples/checkbox/basic-controlled.tsx
+++ b/documentation-site/examples/checkbox/basic-controlled.tsx
@@ -1,13 +1,10 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(true);
   return (
-    <Checkbox
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-    >
+    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
       click me
     </Checkbox>
   );
diff --git a/documentation-site/examples/checkbox/basic-uncontrolled.tsx b/documentation-site/examples/checkbox/basic-uncontrolled.tsx
index 71162439be..bab7e65685 100644
--- a/documentation-site/examples/checkbox/basic-uncontrolled.tsx
+++ b/documentation-site/examples/checkbox/basic-uncontrolled.tsx
@@ -1,10 +1,6 @@
-import * as React from 'react';
-import {StatefulCheckbox} from 'baseui/checkbox';
+import * as React from "react";
+import { StatefulCheckbox } from "baseui/checkbox";
 
 export default function Example() {
-  return (
-    <StatefulCheckbox onChange={console.log}>
-      click me
-    </StatefulCheckbox>
-  );
+  return <StatefulCheckbox onChange={console.log}>click me</StatefulCheckbox>;
 }
diff --git a/documentation-site/examples/checkbox/component-overrides.tsx b/documentation-site/examples/checkbox/component-overrides.tsx
index 0b15876c32..ac8ee0f9bb 100644
--- a/documentation-site/examples/checkbox/component-overrides.tsx
+++ b/documentation-site/examples/checkbox/component-overrides.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {StatefulCheckbox} from 'baseui/checkbox';
-import {Alert} from 'baseui/icon';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { StatefulCheckbox } from "baseui/checkbox";
+import { Alert } from "baseui/icon";
 
 export default function Example() {
   const [css, theme] = useStyletron();
@@ -15,8 +15,8 @@ export default function Example() {
               color: props.checked
                 ? theme.colors.primary
                 : theme.colors.mono700,
-              marginTop: '3px',
-              marginRight: '3px',
+              marginTop: "3px",
+              marginRight: "3px",
             })}
           >
             <Alert />
diff --git a/documentation-site/examples/checkbox/disabled.tsx b/documentation-site/examples/checkbox/disabled.tsx
index 834ae1852a..c71d6ab77f 100644
--- a/documentation-site/examples/checkbox/disabled.tsx
+++ b/documentation-site/examples/checkbox/disabled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/checkbox/error.tsx b/documentation-site/examples/checkbox/error.tsx
index 14f108c34b..ff53ab5cb9 100644
--- a/documentation-site/examples/checkbox/error.tsx
+++ b/documentation-site/examples/checkbox/error.tsx
@@ -1,14 +1,10 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(true);
   return (
-    <Checkbox
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-      error
-    >
+    <Checkbox checked={checked} onChange={() => setChecked(!checked)} error>
       Checkbox with an error
     </Checkbox>
   );
diff --git a/documentation-site/examples/checkbox/focus.tsx b/documentation-site/examples/checkbox/focus.tsx
index 85fe1c1d3a..bc5c57a433 100644
--- a/documentation-site/examples/checkbox/focus.tsx
+++ b/documentation-site/examples/checkbox/focus.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button, SIZE} from 'baseui/button';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Button, SIZE } from "baseui/button";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(true);
diff --git a/documentation-site/examples/checkbox/multiline.tsx b/documentation-site/examples/checkbox/multiline.tsx
index 9db7e6f1b2..6af22a2d0f 100644
--- a/documentation-site/examples/checkbox/multiline.tsx
+++ b/documentation-site/examples/checkbox/multiline.tsx
@@ -1,20 +1,16 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(true);
   return (
-    <Checkbox
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-    >
-      It started as a simple idea: What if you could request a ride
-      from your phone? More than 5 billion trips later, we’re
-      working to make transportation safer and more accessible,
-      helping people order food quickly and affordably, reducing
-      congestion in cities by getting more people into fewer cars,
-      and creating opportunities for people to work on their own
-      terms.
+    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
+      It started as a simple idea: What if you could request a ride from your
+      phone? More than 5 billion trips later, we’re working to make
+      transportation safer and more accessible, helping people order food
+      quickly and affordably, reducing congestion in cities by getting more
+      people into fewer cars, and creating opportunities for people to work on
+      their own terms.
     </Checkbox>
   );
 }
diff --git a/documentation-site/examples/checkbox/overrides.tsx b/documentation-site/examples/checkbox/overrides.tsx
index 5052f28192..11ebde9cb9 100644
--- a/documentation-site/examples/checkbox/overrides.tsx
+++ b/documentation-site/examples/checkbox/overrides.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Checkbox} from 'baseui/checkbox';
-import {expandBorderStyles} from 'baseui/styles';
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox";
+import { expandBorderStyles } from "baseui/styles";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(true);
@@ -10,24 +10,22 @@ export default function Example() {
       onChange={() => setChecked(!checked)}
       overrides={{
         Root: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             ...expandBorderStyles($theme.borders.border300),
           }),
         },
         Label: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             color: $theme.colors.warning,
           }),
         },
         Checkmark: {
-          style: ({$checked, $theme}) => ({
+          style: ({ $checked, $theme }) => ({
             borderLeftColor: $theme.colors.warning,
             borderRightColor: $theme.colors.warning,
             borderTopColor: $theme.colors.warning,
             borderBottomColor: $theme.colors.warning,
-            backgroundColor: $checked
-              ? $theme.colors.warning
-              : null,
+            backgroundColor: $checked ? $theme.colors.warning : null,
           }),
         },
       }}
diff --git a/documentation-site/examples/checkbox/toggle.tsx b/documentation-site/examples/checkbox/toggle.tsx
index c8678f5807..279b2828cd 100644
--- a/documentation-site/examples/checkbox/toggle.tsx
+++ b/documentation-site/examples/checkbox/toggle.tsx
@@ -1,11 +1,8 @@
-import * as React from 'react';
-import {Checkbox, STYLE_TYPE} from 'baseui/checkbox';
+import * as React from "react";
+import { Checkbox, STYLE_TYPE } from "baseui/checkbox";
 
 export default function Example() {
-  const [checkboxes, setCheckboxes] = React.useState([
-    false,
-    false,
-  ]);
+  const [checkboxes, setCheckboxes] = React.useState([false, false]);
   return (
     <React.Fragment>
       <Checkbox
diff --git a/documentation-site/examples/data-table/access-table-data.tsx b/documentation-site/examples/data-table/access-table-data.tsx
index 375bc019d9..3d56cf0dcd 100644
--- a/documentation-site/examples/data-table/access-table-data.tsx
+++ b/documentation-site/examples/data-table/access-table-data.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
 import {
   BooleanColumn,
   CategoricalColumn,
@@ -8,53 +8,53 @@ import {
   StringColumn,
   StatefulDataTable,
   ImperativeMethods,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
 type RowData = [boolean, string, number, string];
 
 const columns = [
   BooleanColumn({
-    title: 'boolean',
+    title: "boolean",
     mapDataToValue: (data: RowData) => data[0],
   }),
 
   CategoricalColumn({
-    title: 'color',
+    title: "color",
     mapDataToValue: (data: RowData) => data[1],
   }),
 
   NumericalColumn({
-    title: 'number',
+    title: "number",
     mapDataToValue: (data: RowData) => data[2],
   }),
 
   StringColumn({
-    title: 'description',
+    title: "description",
     mapDataToValue: (data: RowData) => data[3],
   }),
 ];
 
 const rows = [
-  {id: 1, data: [true, 'green', 2, 'bright']},
-  {id: 2, data: [false, 'blue', 1, 'glossy']},
-  {id: 3, data: [true, 'black', 4, 'dry']},
-  {id: 4, data: [false, 'pink', 3, 'brittle']},
-  {id: 5, data: [false, 'blue', 5, 'big']},
-  {id: 6, data: [true, 'pink', 6, 'spicey']},
-  {id: 7, data: [false, 'blue', 3, 'mild']},
-  {id: 8, data: [false, 'blue', 3, 'pointy']},
-  {id: 9, data: [true, 'blue', 3, 'soft']},
-  {id: 10, data: [false, 'pink', 1, 'worn']},
-  {id: 11, data: [true, 'blue', 1, 'brittle']},
-  {id: 12, data: [true, 'blue', 3, 'glossy']},
-  {id: 13, data: [false, 'purple', 3, 'big']},
-  {id: 14, data: [false, 'blue', 1, 'worn']},
-  {id: 15, data: [false, 'blue', 3, 'dry']},
-  {id: 16, data: [false, 'orange', 5, 'spicey']},
-  {id: 17, data: [false, 'orange', 7, 'big']},
-  {id: 18, data: [false, 'blue', 8, 'glossy']},
-  {id: 19, data: [false, 'magenta', 4, 'brittle']},
-  {id: 20, data: [true, 'blue', 3, 'dry']},
+  { id: 1, data: [true, "green", 2, "bright"] },
+  { id: 2, data: [false, "blue", 1, "glossy"] },
+  { id: 3, data: [true, "black", 4, "dry"] },
+  { id: 4, data: [false, "pink", 3, "brittle"] },
+  { id: 5, data: [false, "blue", 5, "big"] },
+  { id: 6, data: [true, "pink", 6, "spicey"] },
+  { id: 7, data: [false, "blue", 3, "mild"] },
+  { id: 8, data: [false, "blue", 3, "pointy"] },
+  { id: 9, data: [true, "blue", 3, "soft"] },
+  { id: 10, data: [false, "pink", 1, "worn"] },
+  { id: 11, data: [true, "blue", 1, "brittle"] },
+  { id: 12, data: [true, "blue", 3, "glossy"] },
+  { id: 13, data: [false, "purple", 3, "big"] },
+  { id: 14, data: [false, "blue", 1, "worn"] },
+  { id: 15, data: [false, "blue", 3, "dry"] },
+  { id: 16, data: [false, "orange", 5, "spicey"] },
+  { id: 17, data: [false, "orange", 7, "big"] },
+  { id: 18, data: [false, "blue", 8, "glossy"] },
+  { id: 19, data: [false, "magenta", 4, "brittle"] },
+  { id: 20, data: [true, "blue", 3, "dry"] },
 ];
 
 export default function Example() {
@@ -71,7 +71,7 @@ export default function Example() {
       <Button onClick={handleClick}>
         Log filtered and sorted records to console
       </Button>
-      <div className={css({height: '800px'})}>
+      <div className={css({ height: "800px" })}>
         <StatefulDataTable columns={columns} rows={rows} />
       </div>
     </>
diff --git a/documentation-site/examples/data-table/basic.tsx b/documentation-site/examples/data-table/basic.tsx
index 65cf4633a1..5308e77cde 100644
--- a/documentation-site/examples/data-table/basic.tsx
+++ b/documentation-site/examples/data-table/basic.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
+import React from "react";
+import { useStyletron } from "baseui";
 import {
   StatefulDataTable,
   BooleanColumn,
@@ -9,13 +9,13 @@ import {
   StringColumn,
   COLUMNS,
   NUMERICAL_FORMATS,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
 // https://gist.github.com/6174/6062387
 function pseudoRandomString(rowIdx: any, columnIdx: any) {
   return (
-    (0.88 * rowIdx).toString(36).replace('.', '').substring(2) +
-    (0.99 * columnIdx).toString(36).replace('.', '')
+    (0.88 * rowIdx).toString(36).replace(".", "").substring(2) +
+    (0.99 * columnIdx).toString(36).replace(".", "")
   ).slice(0, 10);
 }
 
@@ -29,16 +29,16 @@ function makeRowsFromColumns(columns: any, rowCount: number) {
           case COLUMNS.CATEGORICAL:
             switch (i % 5) {
               case 4:
-                return 'A';
+                return "A";
               case 3:
-                return 'B';
+                return "B";
               case 2:
-                return 'C';
+                return "C";
               case 1:
-                return 'D';
+                return "D";
               case 0:
               default:
-                return 'F';
+                return "F";
             }
           case COLUMNS.NUMERICAL:
             return i % 2 ? i - 1 : i + 3;
@@ -49,19 +49,19 @@ function makeRowsFromColumns(columns: any, rowCount: number) {
           case COLUMNS.CUSTOM:
             switch (i % 5) {
               case 4:
-                return {color: 'red'};
+                return { color: "red" };
               case 3:
-                return {color: 'green'};
+                return { color: "green" };
               case 2:
-                return {color: 'blue'};
+                return { color: "blue" };
               case 1:
-                return {color: 'purple'};
+                return { color: "purple" };
               case 0:
               default:
-                return {color: 'yellow'};
+                return { color: "yellow" };
             }
           default:
-            return 'default' + pseudoRandomString(i, j);
+            return "default" + pseudoRandomString(i, j);
         }
       }),
     });
@@ -75,53 +75,53 @@ type RowDataT = [
   number,
   number,
   number,
-  {color: string},
+  { color: string },
   boolean,
   string,
 ];
 
 const columns = [
   CategoricalColumn({
-    title: 'categorical',
+    title: "categorical",
     mapDataToValue: (data: RowDataT) => data[0],
   }),
   StringColumn({
-    title: 'string',
+    title: "string",
     mapDataToValue: (data: RowDataT) => data[1],
   }),
   NumericalColumn({
-    title: 'three',
+    title: "three",
     mapDataToValue: (data: RowDataT) => data[2],
   }),
   NumericalColumn({
-    title: 'neg std',
+    title: "neg std",
     highlight: (n: number) => n < 0,
     mapDataToValue: (data: RowDataT) => data[3],
   }),
   NumericalColumn({
-    title: 'accounting',
+    title: "accounting",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data[4],
   }),
-  CustomColumn<{color: string}, {}>({
-    title: 'custom color',
+  CustomColumn<{ color: string }, {}>({
+    title: "custom color",
     mapDataToValue: (data: RowDataT) => data[5],
     renderCell: function Cell(props: any) {
       const [css] = useStyletron();
       return (
         <div
           className={css({
-            alignItems: 'center',
+            alignItems: "center",
             fontFamily: '"Comic Sans MS", cursive, sans-serif',
-            display: 'flex',
+            display: "flex",
           })}
         >
           <div
             className={css({
               backgroundColor: props.value.color,
-              height: '12px',
-              marginRight: '24px',
-              width: '12px',
+              height: "12px",
+              marginRight: "24px",
+              width: "12px",
             })}
           />
           <div>{props.value.color}</div>
@@ -130,11 +130,11 @@ const columns = [
     },
   }),
   BooleanColumn({
-    title: 'boolean',
+    title: "boolean",
     mapDataToValue: (data: RowDataT) => data[6],
   }),
   CategoricalColumn({
-    title: 'second category',
+    title: "second category",
     mapDataToValue: (data: RowDataT) => data[7],
   }),
 ];
@@ -144,7 +144,7 @@ const rows = makeRowsFromColumns(columns, 2000);
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '800px'})}>
+    <div className={css({ height: "800px" })}>
       <StatefulDataTable columns={columns} rows={rows} />
     </div>
   );
diff --git a/documentation-site/examples/data-table/batch-action.tsx b/documentation-site/examples/data-table/batch-action.tsx
index 31659998e3..7f3487e709 100644
--- a/documentation-site/examples/data-table/batch-action.tsx
+++ b/documentation-site/examples/data-table/batch-action.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {Alert, Check} from 'baseui/icon';
+import React from "react";
+import { Alert, Check } from "baseui/icon";
 
 import {
   StatefulDataTable,
@@ -10,128 +10,88 @@ import {
   NUMERICAL_FORMATS,
   BatchAction,
   RowAction,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
-type RowDataT = [
-  string,
-  boolean,
-  string,
-  number,
-  number,
-  number,
-  number,
-];
+type RowDataT = [string, boolean, string, number, number, number, number];
 
 const columns = [
   StringColumn({
-    title: 'Movie',
+    title: "Movie",
     mapDataToValue: (data: RowDataT) => data[0],
   }),
   BooleanColumn({
-    title: 'is it good?',
+    title: "is it good?",
     mapDataToValue: (data: RowDataT) => data[1],
   }),
   CategoricalColumn({
-    title: 'Genre',
+    title: "Genre",
     mapDataToValue: (data: RowDataT) => data[2],
   }),
   NumericalColumn({
-    title: 'Production Budget (millions)',
+    title: "Production Budget (millions)",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data[3],
   }),
   NumericalColumn({
-    title: 'Box Office (millions)',
+    title: "Box Office (millions)",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data[4],
   }),
   NumericalColumn({
-    title: 'ROI',
+    title: "ROI",
     precision: 2,
     mapDataToValue: (data: RowDataT) => data[5],
   }),
   NumericalColumn({
-    title: 'Rating IMDB',
+    title: "Rating IMDB",
     precision: 2,
     mapDataToValue: (data: RowDataT) => data[6],
   }),
 ];
 
 const initialRows = [
-  ['Avatar', false, 'Action', 237, 2784, 11.7, 8.0],
-  ['The Blind Side', false, 'Drama', 29, 309, 10.7, 7.6],
-  ['The Dark Knight', false, 'Action', 185, 1005, 5.4, 9.0],
-  ['ET: The Extra-Terrestrial', false, 'Drama', 11, 793, 75.5, 7.9],
-  ['Finding Nemo', false, 'Adventure', 94, 940, 10.0, 8.1],
-  ['Ghostbusters', false, 'Comedy', 144, 229, 1.6, 7.8],
-  [
-    'The Hunger Games',
-    false,
-    'Thriller/Suspense',
-    78,
-    649,
-    8.3,
-    7.2,
-  ],
-  ['Iron Man 3', false, 'Action', 178, 1215, 6.8, 7.6],
-  ['Jurassic Park', false, 'Action', 53, 1030, 19.4, 8.0],
-  ['King Kong', false, 'Adventure', 207, 551, 2.7, 7.3],
-  ['The Lion King', false, 'Adventure', 115, 577, 5.0, 8.0],
-  ['Monsters, Inc.', false, 'Adventure', 115, 577, 5.0, 8.0],
-  [
-    'The Twilight Saga: New Moon',
-    false,
-    'Drama',
-    50,
-    710,
-    14.2,
-    4.5,
-  ],
-  [
-    'Oz the Great and Powerful',
-    false,
-    'Adventure',
-    160,
-    493,
-    3.1,
-    6.6,
-  ],
+  ["Avatar", false, "Action", 237, 2784, 11.7, 8.0],
+  ["The Blind Side", false, "Drama", 29, 309, 10.7, 7.6],
+  ["The Dark Knight", false, "Action", 185, 1005, 5.4, 9.0],
+  ["ET: The Extra-Terrestrial", false, "Drama", 11, 793, 75.5, 7.9],
+  ["Finding Nemo", false, "Adventure", 94, 940, 10.0, 8.1],
+  ["Ghostbusters", false, "Comedy", 144, 229, 1.6, 7.8],
+  ["The Hunger Games", false, "Thriller/Suspense", 78, 649, 8.3, 7.2],
+  ["Iron Man 3", false, "Action", 178, 1215, 6.8, 7.6],
+  ["Jurassic Park", false, "Action", 53, 1030, 19.4, 8.0],
+  ["King Kong", false, "Adventure", 207, 551, 2.7, 7.3],
+  ["The Lion King", false, "Adventure", 115, 577, 5.0, 8.0],
+  ["Monsters, Inc.", false, "Adventure", 115, 577, 5.0, 8.0],
+  ["The Twilight Saga: New Moon", false, "Drama", 50, 710, 14.2, 4.5],
+  ["Oz the Great and Powerful", false, "Adventure", 160, 493, 3.1, 6.6],
   [
     `Pirates of the Caribbean: Dead Man's Chest`,
     false,
-    'Adventure',
+    "Adventure",
     225,
     1066,
     4.7,
     7.3,
   ],
-  ['Quantum of Solace', false, 'Action', 200, 586, 2.9, 6.7],
-  [
-    'Raiders of the Lost Ark',
-    false,
-    'Adventure',
-    18,
-    390,
-    21.7,
-    8.7,
-  ],
+  ["Quantum of Solace", false, "Action", 200, 586, 2.9, 6.7],
+  ["Raiders of the Lost Ark", false, "Adventure", 18, 390, 21.7, 8.7],
   [
-    'Star Wars Ep. I: The Phantom Menace',
+    "Star Wars Ep. I: The Phantom Menace",
     false,
-    'Adventure',
+    "Adventure",
     115,
     1027,
     8.9,
     6.5,
   ],
-  ['Titanic', false, 'Thriller/Suspense', 200, 2187, 10.9, 7.6],
-  ['Up', false, 'Adventure', 175, 735, 4.2, 8.3],
-  ['The Vow', false, 'Drama', 30, 196, 6.5, 6.7],
-  ['The War of the Worlds', false, 'Action', 132, 704, 5.3, 6.5],
-  ['X-Men: The Last Stand', false, 'Action', 210, 459, 2.2, 6.8],
-  [`You've Got Mail`, false, 'Drama', 65, 251, 3.9, 6.3],
-  ['Zookeeper', false, 'Romantic Comedy', 80, 170, 2.1, 5.0],
-].map((r) => ({id: String(r[0]), data: r}));
+  ["Titanic", false, "Thriller/Suspense", 200, 2187, 10.9, 7.6],
+  ["Up", false, "Adventure", 175, 735, 4.2, 8.3],
+  ["The Vow", false, "Drama", 30, 196, 6.5, 6.7],
+  ["The War of the Worlds", false, "Action", 132, 704, 5.3, 6.5],
+  ["X-Men: The Last Stand", false, "Action", 210, 459, 2.2, 6.8],
+  [`You've Got Mail`, false, "Drama", 65, 251, 3.9, 6.3],
+  ["Zookeeper", false, "Romantic Comedy", 80, 170, 2.1, 5.0],
+].map((r) => ({ id: String(r[0]), data: r }));
 
 export default function Example() {
   const [rows, setRows] = React.useState(initialRows);
@@ -141,7 +101,7 @@ export default function Example() {
       if (ids.includes(row.id)) {
         const nextData = [...row.data];
         nextData[1] = !nextData[1];
-        return {...row, data: nextData};
+        return { ...row, data: nextData };
       }
 
       return row;
@@ -162,42 +122,42 @@ export default function Example() {
 
   const batchActions: BatchAction[] = [
     {
-      label: 'Check',
-      onClick: ({selection, clearSelection}) => {
+      label: "Check",
+      onClick: ({ selection, clearSelection }) => {
         flagRows(selection.map((r) => r.id));
         clearSelection();
       },
       renderIcon: Check,
     },
     {
-      label: 'Remove',
-      onClick: ({selection, clearSelection}) => {
+      label: "Remove",
+      onClick: ({ selection, clearSelection }) => {
         removeRows(selection.map((r) => r.id));
         clearSelection();
       },
       renderIcon: Alert,
     },
     {
-      label: 'Download',
-      onClick: ({clearSelection}) => clearSelection(),
+      label: "Download",
+      onClick: ({ clearSelection }) => clearSelection(),
     },
   ];
 
   const rowActions: RowAction[] = [
     {
-      label: 'Check',
-      onClick: ({row}) => flagRow(row.id),
+      label: "Check",
+      onClick: ({ row }) => flagRow(row.id),
       renderIcon: Check,
     },
     {
-      label: 'Remove',
-      onClick: ({row}) => removeRow(row.id),
+      label: "Remove",
+      onClick: ({ row }) => removeRow(row.id),
       renderIcon: Alert,
     },
   ];
 
   return (
-    <div style={{height: '300px'}}>
+    <div style={{ height: "300px" }}>
       <StatefulDataTable
         batchActions={batchActions}
         rowActions={rowActions}
diff --git a/documentation-site/examples/data-table/customized-column-sort.tsx b/documentation-site/examples/data-table/customized-column-sort.tsx
index ede3820947..b82aecb380 100644
--- a/documentation-site/examples/data-table/customized-column-sort.tsx
+++ b/documentation-site/examples/data-table/customized-column-sort.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
+import React from "react";
+import { useStyletron } from "baseui";
 import {
   StatefulDataTable,
   CategoricalColumn,
@@ -8,13 +8,13 @@ import {
   StringColumn,
   COLUMNS,
   NUMERICAL_FORMATS,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
 // https://gist.github.com/6174/6062387
 function pseudoRandomString(rowIdx: any, columnIdx: any) {
   return (
-    (0.88 * rowIdx).toString(36).replace('.', '').substring(2) +
-    (0.99 * columnIdx).toString(36).replace('.', '')
+    (0.88 * rowIdx).toString(36).replace(".", "").substring(2) +
+    (0.99 * columnIdx).toString(36).replace(".", "")
   ).slice(0, 10);
 }
 
@@ -28,30 +28,30 @@ function makeRowsFromColumns(columns: any, rowCount: number) {
           case COLUMNS.CATEGORICAL:
             switch (i % 11) {
               case 11:
-                return 'UberX';
+                return "UberX";
               case 10:
-                return 'UberXL';
+                return "UberXL";
               case 9:
-                return 'Uber Select';
+                return "Uber Select";
               case 8:
-                return 'Uber Comfort';
+                return "Uber Comfort";
               case 7:
-                return 'Uber Pool';
+                return "Uber Pool";
               case 6:
-                return 'Uber Black';
+                return "Uber Black";
               case 5:
-                return 'Uber Assist';
+                return "Uber Assist";
               case 4:
-                return 'Uber WAV';
+                return "Uber WAV";
               case 3:
-                return 'Transit';
+                return "Transit";
               case 2:
-                return 'Taxi';
+                return "Taxi";
               case 1:
-                return 'Bike';
+                return "Bike";
               case 0:
               default:
-                return 'Scooter';
+                return "Scooter";
             }
           case COLUMNS.NUMERICAL:
             return i % 2 ? i - 1 : i + 3;
@@ -60,19 +60,19 @@ function makeRowsFromColumns(columns: any, rowCount: number) {
           case COLUMNS.CUSTOM:
             switch (i % 5) {
               case 4:
-                return {color: 'red'};
+                return { color: "red" };
               case 3:
-                return {color: 'green'};
+                return { color: "green" };
               case 2:
-                return {color: 'blue'};
+                return { color: "blue" };
               case 1:
-                return {color: 'purple'};
+                return { color: "purple" };
               case 0:
               default:
-                return {color: 'yellow'};
+                return { color: "yellow" };
             }
           default:
-            return 'default' + pseudoRandomString(i, j);
+            return "default" + pseudoRandomString(i, j);
         }
       }),
     });
@@ -80,18 +80,18 @@ function makeRowsFromColumns(columns: any, rowCount: number) {
   return rows;
 }
 
-type RowDataT = [string, {color: string}, string, number];
+type RowDataT = [string, { color: string }, string, number];
 
 const columns = [
   CategoricalColumn({
-    title: 'categorical',
+    title: "categorical",
     mapDataToValue: (data: RowDataT) => data[0],
   }),
   CustomColumn<
-    {color: string},
-    {selection: Set<string>; exclude: boolean; description: string}
+    { color: string },
+    { selection: Set<string>; exclude: boolean; description: string }
   >({
-    title: 'custom color (sortable)',
+    title: "custom color (sortable)",
     filterable: true,
     sortable: true,
     minWidth: 120,
@@ -101,17 +101,17 @@ const columns = [
       return (
         <div
           className={css({
-            alignItems: 'center',
+            alignItems: "center",
             fontFamily: '"Comic Sans MS", cursive, sans-serif',
-            display: 'flex',
+            display: "flex",
           })}
         >
           <div
             className={css({
               backgroundColor: props.value.color,
-              height: '12px',
-              marginRight: '24px',
-              width: '12px',
+              height: "12px",
+              marginRight: "24px",
+              width: "12px",
             })}
           />
           <div>{props.value.color}</div>
@@ -133,10 +133,7 @@ const columns = [
           <ul>
             {Array.from(colors).map((color: any) => {
               return (
-                <li
-                  key={color}
-                  className={css({backgroundColor: color})}
-                >
+                <li key={color} className={css({ backgroundColor: color })}>
                   <input
                     type="checkbox"
                     onChange={() => {
@@ -148,9 +145,7 @@ const columns = [
                       setSelection(selection);
                     }}
                   />
-                  <span className={css({paddingLeft: '8px'})}>
-                    {color}
-                  </span>
+                  <span className={css({ paddingLeft: "8px" })}>{color}</span>
                 </li>
               );
             })}
@@ -159,7 +154,7 @@ const columns = [
             onClick={() => {
               props.setFilter({
                 selection,
-                description: Array.from(selection).join(', '),
+                description: Array.from(selection).join(", "),
                 exclude: false,
               });
               props.close();
@@ -180,11 +175,11 @@ const columns = [
     },
   }),
   StringColumn({
-    title: 'string',
+    title: "string",
     mapDataToValue: (data: RowDataT) => data[2],
   }),
   NumericalColumn({
-    title: 'accounting',
+    title: "accounting",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data[3],
   }),
@@ -195,7 +190,7 @@ const rows = makeRowsFromColumns(columns, 100);
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '800px'})}>
+    <div className={css({ height: "800px" })}>
       <StatefulDataTable columns={columns} rows={rows} />
     </div>
   );
diff --git a/documentation-site/examples/data-table/customized-empty-state.tsx b/documentation-site/examples/data-table/customized-empty-state.tsx
index 85269ffacb..495d77981e 100644
--- a/documentation-site/examples/data-table/customized-empty-state.tsx
+++ b/documentation-site/examples/data-table/customized-empty-state.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
+import React from "react";
+import { useStyletron } from "baseui";
 import {
   StatefulDataTable,
   BooleanColumn,
@@ -8,7 +8,7 @@ import {
   NumericalColumn,
   StringColumn,
   NUMERICAL_FORMATS,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
 type RowDataT = [
   string,
@@ -16,53 +16,53 @@ type RowDataT = [
   number,
   number,
   number,
-  {color: string},
+  { color: string },
   boolean,
   string,
 ];
 
 const columns = [
   CategoricalColumn({
-    title: 'categorical',
+    title: "categorical",
     mapDataToValue: (data: RowDataT) => data[0],
   }),
   StringColumn({
-    title: 'string',
+    title: "string",
     mapDataToValue: (data: RowDataT) => data[1],
   }),
   NumericalColumn({
-    title: 'three',
+    title: "three",
     mapDataToValue: (data: RowDataT) => data[2],
   }),
   NumericalColumn({
-    title: 'neg std',
+    title: "neg std",
     highlight: (n: number) => n < 0,
     mapDataToValue: (data: RowDataT) => data[3],
   }),
   NumericalColumn({
-    title: 'accounting',
+    title: "accounting",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data[4],
   }),
-  CustomColumn<{color: string}, {}>({
-    title: 'custom color',
+  CustomColumn<{ color: string }, {}>({
+    title: "custom color",
     mapDataToValue: (data: RowDataT) => data[5],
     renderCell: function Cell(props: any) {
       const [css] = useStyletron();
       return (
         <div
           className={css({
-            alignItems: 'center',
+            alignItems: "center",
             fontFamily: '"Comic Sans MS", cursive, sans-serif',
-            display: 'flex',
+            display: "flex",
           })}
         >
           <div
             className={css({
               backgroundColor: props.value.color,
-              height: '12px',
-              marginRight: '24px',
-              width: '12px',
+              height: "12px",
+              marginRight: "24px",
+              width: "12px",
             })}
           />
           <div>{props.value.color}</div>
@@ -71,11 +71,11 @@ const columns = [
     },
   }),
   BooleanColumn({
-    title: 'boolean',
+    title: "boolean",
     mapDataToValue: (data: RowDataT) => data[6],
   }),
   CategoricalColumn({
-    title: 'second category',
+    title: "second category",
     mapDataToValue: (data: RowDataT) => data[7],
   }),
 ];
@@ -84,14 +84,14 @@ export default function Example() {
   const [css] = useStyletron();
   return (
     <React.Fragment>
-      <div className={css({height: '400px'})}>
+      <div className={css({ height: "400px" })}>
         <StatefulDataTable
           columns={columns}
           rows={[]}
           emptyMessage="custom empty message"
         />
       </div>
-      <div className={css({height: '400px'})}>
+      <div className={css({ height: "400px" })}>
         <StatefulDataTable
           columns={columns}
           rows={[]}
diff --git a/documentation-site/examples/data-table/row-height-line-clamp.tsx b/documentation-site/examples/data-table/row-height-line-clamp.tsx
index f73fe9adcc..1cda84a6aa 100644
--- a/documentation-site/examples/data-table/row-height-line-clamp.tsx
+++ b/documentation-site/examples/data-table/row-height-line-clamp.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 import {
   StatefulDataTable,
@@ -6,7 +6,7 @@ import {
   NumericalColumn,
   StringColumn,
   NUMERICAL_FORMATS,
-} from 'baseui/data-table';
+} from "baseui/data-table";
 
 type RowDataT = {
   title: string;
@@ -22,37 +22,37 @@ const loremIpsum = `"We went upstairs together, the colonel first with the lamp,
 
 const columns = [
   StringColumn({
-    title: 'Movie Title',
+    title: "Movie Title",
     mapDataToValue: (data: RowDataT) => data.title,
   }),
   StringColumn({
-    title: 'Lorem Ipsum Description',
+    title: "Lorem Ipsum Description",
     maxWidth: 300,
     lineClamp: 3,
     mapDataToValue: (data: RowDataT) => data.loremIpsum,
   }),
   CategoricalColumn({
-    title: 'Genre',
+    title: "Genre",
     mapDataToValue: (data: RowDataT) => data.genre,
   }),
   NumericalColumn({
-    title: 'Production Budget (millions)',
+    title: "Production Budget (millions)",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data.budget,
   }),
   NumericalColumn({
-    title: 'Box Office (millions)',
+    title: "Box Office (millions)",
     format: NUMERICAL_FORMATS.ACCOUNTING,
     mapDataToValue: (data: RowDataT) => data.boxOffice,
   }),
 
   NumericalColumn({
-    title: 'ROI',
+    title: "ROI",
     precision: 2,
     mapDataToValue: (data: RowDataT) => data.roi,
   }),
   NumericalColumn({
-    title: 'Rating IMDB',
+    title: "Rating IMDB",
     precision: 2,
     mapDataToValue: (data: RowDataT) => data.imdb,
   }),
@@ -60,126 +60,126 @@ const columns = [
 
 const rows = [
   {
-    title: 'Avatar',
+    title: "Avatar",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 237,
     boxOffice: 2784,
     roi: 11.7,
     imdb: 8.0,
   },
   {
-    title: 'The Blind Side',
+    title: "The Blind Side",
     loremIpsum,
-    genre: 'Drama',
+    genre: "Drama",
     budget: 29,
     boxOffice: 309,
     roi: 10.7,
     imdb: 7.6,
   },
   {
-    title: 'The Dark Knight',
+    title: "The Dark Knight",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 185,
     boxOffice: 1005,
     roi: 5.4,
     imdb: 9.0,
   },
   {
-    title: 'ET: The Extra-Terrestrial',
+    title: "ET: The Extra-Terrestrial",
     loremIpsum,
-    genre: 'Drama',
+    genre: "Drama",
     budget: 11,
     boxOffice: 793,
     roi: 75.5,
     imdb: 7.9,
   },
   {
-    title: 'Finding Nemo',
+    title: "Finding Nemo",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 94,
     boxOffice: 940,
     roi: 10.0,
     imdb: 8.1,
   },
   {
-    title: 'Ghostbusters',
+    title: "Ghostbusters",
     loremIpsum,
-    genre: 'Comedy',
+    genre: "Comedy",
     budget: 144,
     boxOffice: 229,
     roi: 1.6,
     imdb: 7.8,
   },
   {
-    title: 'The Hunger Games',
+    title: "The Hunger Games",
     loremIpsum,
-    genre: 'Thriller/Suspense',
+    genre: "Thriller/Suspense",
     budget: 78,
     boxOffice: 649,
     roi: 8.3,
     imdb: 7.2,
   },
   {
-    title: 'Iron Man 3',
+    title: "Iron Man 3",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 178,
     boxOffice: 1215,
     roi: 6.8,
     imdb: 7.6,
   },
   {
-    title: 'Jurassic Park',
+    title: "Jurassic Park",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 53,
     boxOffice: 1030,
     roi: 19.4,
     imdb: 8.0,
   },
   {
-    title: 'King Kong',
+    title: "King Kong",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 207,
     boxOffice: 551,
     roi: 2.7,
     imdb: 7.3,
   },
   {
-    title: 'The Lion King',
+    title: "The Lion King",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 115,
     boxOffice: 577,
     roi: 5.0,
     imdb: 8.0,
   },
   {
-    title: 'Monsters, Inc.',
+    title: "Monsters, Inc.",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 115,
     boxOffice: 577,
     roi: 5.0,
     imdb: 8.0,
   },
   {
-    title: 'The Twilight Saga: New Moon',
+    title: "The Twilight Saga: New Moon",
     loremIpsum,
-    genre: 'Drama',
+    genre: "Drama",
     budget: 50,
     boxOffice: 710,
     roi: 14.2,
     imdb: 4.5,
   },
   {
-    title: 'Oz the Great and Powerful',
+    title: "Oz the Great and Powerful",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 160,
     boxOffice: 493,
     roi: 3.1,
@@ -188,79 +188,79 @@ const rows = [
   {
     title: `Pirates of the Caribbean: Dead Man's Chest`,
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 225,
     boxOffice: 1066,
     roi: 4.7,
     imdb: 7.3,
   },
   {
-    title: 'Quantum of Solace',
+    title: "Quantum of Solace",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 200,
     boxOffice: 586,
     roi: 2.9,
     imdb: 6.7,
   },
   {
-    title: 'Raiders of the Lost Ark',
+    title: "Raiders of the Lost Ark",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 18,
     boxOffice: 390,
     roi: 21.7,
     imdb: 8.7,
   },
   {
-    title: 'Star Wars Ep. I: The Phantom Menace',
+    title: "Star Wars Ep. I: The Phantom Menace",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 115,
     boxOffice: 1027,
     roi: 8.9,
     imdb: 6.5,
   },
   {
-    title: 'Titanic',
+    title: "Titanic",
     loremIpsum,
-    genre: 'Thriller/Suspense',
+    genre: "Thriller/Suspense",
     budget: 200,
     boxOffice: 2187,
     roi: 10.9,
     imdb: 7.6,
   },
   {
-    title: 'Up',
+    title: "Up",
     loremIpsum,
-    genre: 'Adventure',
+    genre: "Adventure",
     budget: 175,
     boxOffice: 735,
     roi: 4.2,
     imdb: 8.3,
   },
   {
-    title: 'The Vow',
+    title: "The Vow",
     loremIpsum,
-    genre: 'Drama',
+    genre: "Drama",
     budget: 30,
     boxOffice: 196,
     roi: 6.5,
     imdb: 6.7,
   },
   {
-    title: 'The War of the Worlds',
+    title: "The War of the Worlds",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 132,
     boxOffice: 704,
     roi: 5.3,
     imdb: 6.5,
   },
   {
-    title: 'X-Men: The Last Stand',
+    title: "X-Men: The Last Stand",
     loremIpsum,
-    genre: 'Action',
+    genre: "Action",
     budget: 210,
     boxOffice: 459,
     roi: 2.2,
@@ -269,31 +269,27 @@ const rows = [
   {
     title: `You've Got Mail`,
     loremIpsum,
-    genre: 'Drama',
+    genre: "Drama",
     budget: 65,
     boxOffice: 251,
     roi: 3.9,
     imdb: 6.3,
   },
   {
-    title: 'Zookeeper',
+    title: "Zookeeper",
     loremIpsum,
-    genre: 'Romantic Comedy',
+    genre: "Romantic Comedy",
     budget: 80,
     boxOffice: 170,
     roi: 2.1,
     imdb: 5.0,
   },
-].map((r) => ({id: r.title, data: r}));
+].map((r) => ({ id: r.title, data: r }));
 
 export default function Example() {
   return (
-    <div style={{height: '600px'}}>
-      <StatefulDataTable
-        columns={columns}
-        rows={rows}
-        rowHeight={78}
-      />
+    <div style={{ height: "600px" }}>
+      <StatefulDataTable columns={columns} rows={rows} rowHeight={78} />
     </div>
   );
 }
diff --git a/documentation-site/examples/datepicker/basic.tsx b/documentation-site/examples/datepicker/basic.tsx
index c85cc2a7a4..c95ebfc3b1 100644
--- a/documentation-site/examples/datepicker/basic.tsx
+++ b/documentation-site/examples/datepicker/basic.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {StatefulCalendar} from 'baseui/datepicker';
+import * as React from "react";
+import { StatefulCalendar } from "baseui/datepicker";
 
 export default function Example() {
   return (
     <StatefulCalendar
       // use the 'onChange' prop to pull data from the component into your application state
-      onChange={({date}) => console.log(date)}
+      onChange={({ date }) => console.log(date)}
     />
   );
 }
diff --git a/documentation-site/examples/datepicker/calendar-multiple-months-with-label.tsx b/documentation-site/examples/datepicker/calendar-multiple-months-with-label.tsx
index d1c386233c..6da2a86502 100644
--- a/documentation-site/examples/datepicker/calendar-multiple-months-with-label.tsx
+++ b/documentation-site/examples/datepicker/calendar-multiple-months-with-label.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import {ORIENTATION, StatefulCalendar} from 'baseui/datepicker';
+import React from "react";
+import { ORIENTATION, StatefulCalendar } from "baseui/datepicker";
 
 export default function Example() {
   return (
     <StatefulCalendar
-      onChange={({date}) => console.log(date)}
+      onChange={({ date }) => console.log(date)}
       orientation={ORIENTATION.horizontal}
       monthsShown={2}
       range
diff --git a/documentation-site/examples/datepicker/calendar-multiple-months.tsx b/documentation-site/examples/datepicker/calendar-multiple-months.tsx
index 8aaa02ed9e..2d8c6056b3 100644
--- a/documentation-site/examples/datepicker/calendar-multiple-months.tsx
+++ b/documentation-site/examples/datepicker/calendar-multiple-months.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import {ORIENTATION, StatefulCalendar} from 'baseui/datepicker';
+import React from "react";
+import { ORIENTATION, StatefulCalendar } from "baseui/datepicker";
 
 export default function Example() {
   return (
     <StatefulCalendar
-      onChange={({date}) => console.log(date)}
+      onChange={({ date }) => console.log(date)}
       orientation={ORIENTATION.horizontal}
       monthsShown={2}
       range
diff --git a/documentation-site/examples/datepicker/calendar-time-select.tsx b/documentation-site/examples/datepicker/calendar-time-select.tsx
index 0c199cc456..b33ef8cc93 100644
--- a/documentation-site/examples/datepicker/calendar-time-select.tsx
+++ b/documentation-site/examples/datepicker/calendar-time-select.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import {StatefulCalendar} from 'baseui/datepicker';
+import React from "react";
+import { StatefulCalendar } from "baseui/datepicker";
 
 export default function Example() {
   return (
     <StatefulCalendar
-      onChange={({date}) => console.log(date)}
+      onChange={({ date }) => console.log(date)}
       timeSelectStart
     />
   );
diff --git a/documentation-site/examples/datepicker/composed-range-pickers.tsx b/documentation-site/examples/datepicker/composed-range-pickers.tsx
index d8c5eb1e40..03317f4a9f 100644
--- a/documentation-site/examples/datepicker/composed-range-pickers.tsx
+++ b/documentation-site/examples/datepicker/composed-range-pickers.tsx
@@ -1,11 +1,11 @@
-import React, {useState} from 'react';
-import {isAfter, isBefore} from 'date-fns';
+import React, { useState } from "react";
+import { isAfter, isBefore } from "date-fns";
 
-import {useStyletron} from 'baseui';
-import {FormControl} from 'baseui/form-control';
-import {ArrowRight} from 'baseui/icon';
-import {DatePicker} from 'baseui/datepicker';
-import {TimePicker} from 'baseui/timepicker';
+import { useStyletron } from "baseui";
+import { FormControl } from "baseui/form-control";
+import { ArrowRight } from "baseui/icon";
+import { DatePicker } from "baseui/datepicker";
+import { TimePicker } from "baseui/timepicker";
 
 const START_DATE = new Date(2019, 3, 1, 12, 0, 0);
 const END_DATE = new Date(2019, 3, 10, 16, 0, 0);
@@ -18,22 +18,22 @@ export default function Example() {
     <div
       className={css({
         [theme.mediaQuery.medium]: {
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
         },
       })}
     >
-      <div className={css({display: 'flex'})}>
+      <div className={css({ display: "flex" })}>
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale300,
           })}
         >
           <FormControl label="Start Date" caption="YYYY/MM/DD">
             <DatePicker
               value={dates}
-              onChange={({date}) => setDates(date as Array<Date>)}
+              onChange={({ date }) => setDates(date as Array<Date>)}
               timeSelectStart
               range
               mask="9999/99/99"
@@ -45,7 +45,7 @@ export default function Example() {
 
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale300,
           })}
         >
@@ -68,27 +68,27 @@ export default function Example() {
 
       <div
         className={css({
-          display: 'none',
+          display: "none",
           marginRight: theme.sizing.scale300,
           [theme.mediaQuery.medium]: {
-            display: 'block',
+            display: "block",
           },
         })}
       >
         <ArrowRight size={24} />
       </div>
 
-      <div className={css({display: 'flex'})}>
+      <div className={css({ display: "flex" })}>
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale300,
           })}
         >
           <FormControl label="End Date" caption="yyyy/MM/DD">
             <DatePicker
               value={dates}
-              onChange={({date}) => setDates(date as Array<Date>)}
+              onChange={({ date }) => setDates(date as Array<Date>)}
               timeSelectEnd
               range
               mask="9999/99/99"
@@ -100,7 +100,7 @@ export default function Example() {
 
         <div
           className={css({
-            width: '120px',
+            width: "120px",
           })}
         >
           <FormControl label="End Time" caption="HH:MM">
diff --git a/documentation-site/examples/datepicker/composed-single-pickers.tsx b/documentation-site/examples/datepicker/composed-single-pickers.tsx
index 1bd0d0427c..23531a60da 100644
--- a/documentation-site/examples/datepicker/composed-single-pickers.tsx
+++ b/documentation-site/examples/datepicker/composed-single-pickers.tsx
@@ -1,10 +1,10 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 
-import {useStyletron} from 'baseui';
-import {FormControl} from 'baseui/form-control';
-import {DatePicker} from 'baseui/datepicker';
-import {TimezonePicker} from 'baseui/timezonepicker';
-import {TimePicker} from 'baseui/timepicker';
+import { useStyletron } from "baseui";
+import { FormControl } from "baseui/form-control";
+import { DatePicker } from "baseui/datepicker";
+import { TimezonePicker } from "baseui/timezonepicker";
+import { TimePicker } from "baseui/timepicker";
 
 const DATE = new Date(2019, 3, 1, 12, 0, 0);
 
@@ -14,17 +14,17 @@ export default function Example() {
   const [zone, setZone] = useState(null);
 
   return (
-    <div className={css({display: 'flex'})}>
+    <div className={css({ display: "flex" })}>
       <div
         className={css({
-          width: '120px',
+          width: "120px",
           marginRight: theme.sizing.scale300,
         })}
       >
         <FormControl label="Date" caption="YYYY/MM/DD">
           <DatePicker
             value={date}
-            onChange={({date}) => setDate(date as Date)}
+            onChange={({ date }) => setDate(date as Date)}
             timeSelectStart
           />
         </FormControl>
@@ -32,7 +32,7 @@ export default function Example() {
 
       <div
         className={css({
-          width: '120px',
+          width: "120px",
           marginRight: theme.sizing.scale300,
         })}
       >
@@ -43,7 +43,7 @@ export default function Example() {
 
       <div
         className={css({
-          width: '340px',
+          width: "340px",
         })}
       >
         <FormControl label="Timezone">
diff --git a/documentation-site/examples/datepicker/datepicker-with-timezone.tsx b/documentation-site/examples/datepicker/datepicker-with-timezone.tsx
index ab59c57ca8..09d89b695e 100644
--- a/documentation-site/examples/datepicker/datepicker-with-timezone.tsx
+++ b/documentation-site/examples/datepicker/datepicker-with-timezone.tsx
@@ -1,13 +1,13 @@
-import React, {useState} from 'react';
-import {DatePicker} from 'baseui/datepicker';
-import {TimezonePicker} from 'baseui/timezonepicker';
-import {FormControl} from 'baseui/form-control';
+import React, { useState } from "react";
+import { DatePicker } from "baseui/datepicker";
+import { TimezonePicker } from "baseui/timezonepicker";
+import { FormControl } from "baseui/form-control";
 
 export default function Example() {
   const [date, setDate] = useState(new Date());
   const [tz, setZone] = useState({
-    id: 'America/Fort_Nelson',
-    label: 'MST - America/Fort Nelson (GMT -07:00)',
+    id: "America/Fort_Nelson",
+    label: "MST - America/Fort Nelson (GMT -07:00)",
     offset: 420,
   });
 
@@ -15,11 +15,9 @@ export default function Example() {
     <React.Fragment>
       <FormControl label="Date">
         <DatePicker
-          onChange={({date}) => setDate(date as Date)}
+          onChange={({ date }) => setDate(date as Date)}
           value={
-            date
-              ? new Date(date.getTime() + tz.offset * 60000)
-              : undefined
+            date ? new Date(date.getTime() + tz.offset * 60000) : undefined
           }
         />
       </FormControl>
diff --git a/documentation-site/examples/datepicker/datepickers-color-states.tsx b/documentation-site/examples/datepicker/datepickers-color-states.tsx
index df9bf7a73c..bb1dafa3ac 100644
--- a/documentation-site/examples/datepicker/datepickers-color-states.tsx
+++ b/documentation-site/examples/datepicker/datepickers-color-states.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
 
-import {useStyletron} from 'baseui';
-import {FormControl} from 'baseui/form-control';
-import {StatefulDatePicker} from 'baseui/datepicker';
-import {TimezonePicker} from 'baseui/timezonepicker';
-import {TimePicker} from 'baseui/timepicker';
+import { useStyletron } from "baseui";
+import { FormControl } from "baseui/form-control";
+import { StatefulDatePicker } from "baseui/datepicker";
+import { TimezonePicker } from "baseui/timezonepicker";
+import { TimePicker } from "baseui/timepicker";
 
 export default function Example() {
   const [css, theme] = useStyletron();
@@ -13,12 +13,12 @@ export default function Example() {
       Disabled state
       <div
         className={css({
-          display: 'flex',
+          display: "flex",
         })}
       >
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -28,7 +28,7 @@ export default function Example() {
         </div>
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -36,7 +36,7 @@ export default function Example() {
             <TimePicker disabled />
           </FormControl>
         </div>
-        <div className={css({flex: 1})}>
+        <div className={css({ flex: 1 })}>
           <FormControl label="TimezonePicker">
             <TimezonePicker disabled />
           </FormControl>
@@ -45,12 +45,12 @@ export default function Example() {
       Positive state
       <div
         className={css({
-          display: 'flex',
+          display: "flex",
         })}
       >
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -60,7 +60,7 @@ export default function Example() {
         </div>
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -68,7 +68,7 @@ export default function Example() {
             <TimePicker positive />
           </FormControl>
         </div>
-        <div className={css({flex: 1})}>
+        <div className={css({ flex: 1 })}>
           <FormControl label="TimezonePicker">
             <TimezonePicker positive />
           </FormControl>
@@ -77,12 +77,12 @@ export default function Example() {
       Error state
       <div
         className={css({
-          display: 'flex',
+          display: "flex",
         })}
       >
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -92,7 +92,7 @@ export default function Example() {
         </div>
         <div
           className={css({
-            width: '120px',
+            width: "120px",
             marginRight: theme.sizing.scale500,
           })}
         >
@@ -100,7 +100,7 @@ export default function Example() {
             <TimePicker error />
           </FormControl>
         </div>
-        <div className={css({flex: 1})}>
+        <div className={css({ flex: 1 })}>
           <FormControl label="TimezonePicker">
             <TimezonePicker error />
           </FormControl>
diff --git a/documentation-site/examples/datepicker/range-picker-with-separate-inputs.tsx b/documentation-site/examples/datepicker/range-picker-with-separate-inputs.tsx
index 234ec91e3b..53ee7c6cb8 100644
--- a/documentation-site/examples/datepicker/range-picker-with-separate-inputs.tsx
+++ b/documentation-site/examples/datepicker/range-picker-with-separate-inputs.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import {StatefulDatepicker} from 'baseui/datepicker';
+import React from "react";
+import { StatefulDatepicker } from "baseui/datepicker";
 
 export default function Example() {
   return (
     <StatefulDatepicker
       aria-label="Select a date"
       clearable={true}
-      initialState={{value: []}}
-      highlightedDate={new Date('March 10, 2019')}
+      initialState={{ value: [] }}
+      highlightedDate={new Date("March 10, 2019")}
       range
       separateRangeInputs
     />
diff --git a/documentation-site/examples/datepicker/with-callback-overrides.tsx b/documentation-site/examples/datepicker/with-callback-overrides.tsx
index b2cddccdbe..c101fe3bba 100644
--- a/documentation-site/examples/datepicker/with-callback-overrides.tsx
+++ b/documentation-site/examples/datepicker/with-callback-overrides.tsx
@@ -1,28 +1,26 @@
-import * as React from 'react';
-import {DatePicker} from 'baseui/datepicker';
-import {LabelSmall} from 'baseui/typography';
-import {Select} from 'baseui/select';
+import * as React from "react";
+import { DatePicker } from "baseui/datepicker";
+import { LabelSmall } from "baseui/typography";
+import { Select } from "baseui/select";
 
 export default function Example() {
-  const [date, setDate] = React.useState(new Date('2020/01/01'));
-  const [quickSelected, setQuickSelected] = React.useState('');
+  const [date, setDate] = React.useState(new Date("2020/01/01"));
+  const [quickSelected, setQuickSelected] = React.useState("");
 
   return (
     <div>
-      <LabelSmall>
-        Quick Selected: {quickSelected || 'nothing'}
-      </LabelSmall>
+      <LabelSmall>Quick Selected: {quickSelected || "nothing"}</LabelSmall>
       <DatePicker
         value={date}
-        onChange={({date}) => setDate(date as Date)}
+        onChange={({ date }) => setDate(date as Date)}
         quickSelect
         quickSelectOptions={[
           {
-            id: 'suggested-time',
+            id: "suggested-time",
             beginDate: new Date(),
           },
           {
-            id: 'other-time',
+            id: "other-time",
             beginDate: new Date(),
           },
         ]}
@@ -30,15 +28,15 @@ export default function Example() {
           QuickSelectFormControl: {
             props: {
               overrides: {
-                Label: () => <LabelSmall>{'Pick me!'}</LabelSmall>,
+                Label: () => <LabelSmall>{"Pick me!"}</LabelSmall>,
               },
             },
           },
           // @ts-ignore
-          QuickSelect: ({onChange, ...rest}) => (
+          QuickSelect: ({ onChange, ...rest }) => (
             <Select
               // @ts-ignore
-              onChange={(params: {option: {id: string}}) => {
+              onChange={(params: { option: { id: string } }) => {
                 setQuickSelected(params.option.id);
                 onChange(params); // call original
               }}
diff --git a/documentation-site/examples/divider/basic.tsx b/documentation-site/examples/divider/basic.tsx
index f1e9b01ad4..4b91fa5ad3 100644
--- a/documentation-site/examples/divider/basic.tsx
+++ b/documentation-site/examples/divider/basic.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import {StyledDivider, SIZE} from 'baseui/divider';
+import * as React from "react";
+import { StyledDivider, SIZE } from "baseui/divider";
 
 export default function Example() {
   return (
     <div
       style={{
-        width: '400px',
-        border: '1px solid #E2E2E2',
-        borderRadius: '8px',
+        width: "400px",
+        border: "1px solid #E2E2E2",
+        borderRadius: "8px",
       }}
     >
       <div
         style={{
-          height: '50px',
-          display: 'flex',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
+          height: "50px",
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "center",
         }}
       >
         Cell Divider
@@ -25,10 +25,10 @@ export default function Example() {
 
       <div
         style={{
-          height: '80px',
-          display: 'flex',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
+          height: "80px",
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "center",
         }}
       >
         Section Divider
@@ -38,10 +38,10 @@ export default function Example() {
 
       <div
         style={{
-          height: '160px',
-          display: 'flex',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
+          height: "160px",
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "center",
         }}
       >
         Module Divider
@@ -49,7 +49,7 @@ export default function Example() {
 
       <StyledDivider $size={SIZE.module} />
 
-      <div style={{height: '160px'}}></div>
+      <div style={{ height: "160px" }}></div>
     </div>
   );
 }
diff --git a/documentation-site/examples/dnd-list/basic.tsx b/documentation-site/examples/dnd-list/basic.tsx
index 17c58c5d6f..96c87210fa 100644
--- a/documentation-site/examples/dnd-list/basic.tsx
+++ b/documentation-site/examples/dnd-list/basic.tsx
@@ -1,18 +1,11 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       initialState={{
-        items: [
-          'Item 1',
-          'Item 2',
-          'Item 3',
-          'Item 4',
-          'Item 5',
-          'Item 6',
-        ],
+        items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
       }}
       onChange={console.log}
     />
diff --git a/documentation-site/examples/dnd-list/customDragHandle.tsx b/documentation-site/examples/dnd-list/customDragHandle.tsx
index f0b53e97fe..66686e3a7d 100644
--- a/documentation-site/examples/dnd-list/customDragHandle.tsx
+++ b/documentation-site/examples/dnd-list/customDragHandle.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
-import {useStyletron} from 'baseui';
-import {ArrowRight} from 'baseui/icon';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
+import { useStyletron } from "baseui";
+import { ArrowRight } from "baseui/icon";
 
 const CustomDragHandle = () => {
   const [css] = useStyletron();
   return (
     <div
       className={css({
-        marginRight: '1em',
-        width: '24px',
-        display: 'flex',
-        alignItems: 'center',
+        marginRight: "1em",
+        width: "24px",
+        display: "flex",
+        alignItems: "center",
       })}
     >
       <ArrowRight size={24} color="#CCC" />
@@ -23,14 +23,7 @@ export default function Example() {
   return (
     <StatefulList
       initialState={{
-        items: [
-          'Item 1',
-          'Item 2',
-          'Item 3',
-          'Item 4',
-          'Item 5',
-          'Item 6',
-        ],
+        items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
       }}
       overrides={{
         DragHandle: CustomDragHandle,
diff --git a/documentation-site/examples/dnd-list/overrideLabel.tsx b/documentation-site/examples/dnd-list/overrideLabel.tsx
index 74c5b0edeb..c0a1adfacf 100644
--- a/documentation-site/examples/dnd-list/overrideLabel.tsx
+++ b/documentation-site/examples/dnd-list/overrideLabel.tsx
@@ -1,24 +1,17 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       initialState={{
-        items: [
-          'Item 1',
-          'Item 2',
-          'Item 3',
-          'Item 4',
-          'Item 5',
-          'Item 6',
-        ],
+        items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
       }}
       overrides={{
         Label: {
-          style: ({$isDragged}) => ({
-            fontSize: $isDragged ? '20px' : 'inherit',
-            color: $isDragged ? 'darkred' : 'inherit',
+          style: ({ $isDragged }) => ({
+            fontSize: $isDragged ? "20px" : "inherit",
+            color: $isDragged ? "darkred" : "inherit",
           }),
         },
       }}
diff --git a/documentation-site/examples/dnd-list/overrides_short.tsx b/documentation-site/examples/dnd-list/overrides_short.tsx
index 7af47db132..a4b89b72f6 100644
--- a/documentation-site/examples/dnd-list/overrides_short.tsx
+++ b/documentation-site/examples/dnd-list/overrides_short.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       removable
       initialState={{
-        items: ['Item 1', 'Item 2', 'Item 3'],
+        items: ["Item 1", "Item 2", "Item 3"],
       }}
     />
   );
diff --git a/documentation-site/examples/dnd-list/overrides_state_props.tsx b/documentation-site/examples/dnd-list/overrides_state_props.tsx
index 42f39b7827..4c03222e76 100644
--- a/documentation-site/examples/dnd-list/overrides_state_props.tsx
+++ b/documentation-site/examples/dnd-list/overrides_state_props.tsx
@@ -1,18 +1,16 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       initialState={{
-        items: ['Item 1', 'Item 2', 'Item 3'],
+        items: ["Item 1", "Item 2", "Item 3"],
       }}
       overrides={{
         Label: {
-          style: ({$theme, $isDragged}) => ({
-            color: $isDragged
-              ? $theme.colors.primary
-              : $theme.colors.accent400,
+          style: ({ $theme, $isDragged }) => ({
+            color: $isDragged ? $theme.colors.primary : $theme.colors.accent400,
           }),
         },
       }}
diff --git a/documentation-site/examples/dnd-list/overrides_style.tsx b/documentation-site/examples/dnd-list/overrides_style.tsx
index e91aef2a80..d679b3fbd8 100644
--- a/documentation-site/examples/dnd-list/overrides_style.tsx
+++ b/documentation-site/examples/dnd-list/overrides_style.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       removable
       initialState={{
-        items: ['Item 1', 'Item 2', 'Item 3'],
+        items: ["Item 1", "Item 2", "Item 3"],
       }}
       overrides={{
         Label: {
           style: {
-            color: 'red',
+            color: "red",
           },
           props: {
-            'data-testid': 'dnd-list-label',
+            "data-testid": "dnd-list-label",
           },
         },
       }}
diff --git a/documentation-site/examples/dnd-list/removable.tsx b/documentation-site/examples/dnd-list/removable.tsx
index 5ebfa1a524..99d617fa64 100644
--- a/documentation-site/examples/dnd-list/removable.tsx
+++ b/documentation-site/examples/dnd-list/removable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
@@ -7,19 +7,12 @@ export default function Example() {
       removable
       removableByMove
       initialState={{
-        items: [
-          'Item 1',
-          'Item 2',
-          'Item 3',
-          'Item 4',
-          'Item 5',
-          'Item 6',
-        ],
+        items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
       }}
       overrides={{
         Root: {
           style: {
-            maxWidth: '300px',
+            maxWidth: "300px",
           },
         },
       }}
diff --git a/documentation-site/examples/dnd-list/varyingHeights.tsx b/documentation-site/examples/dnd-list/varyingHeights.tsx
index 2b0d89aa11..7062724776 100644
--- a/documentation-site/examples/dnd-list/varyingHeights.tsx
+++ b/documentation-site/examples/dnd-list/varyingHeights.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {StatefulList} from 'baseui/dnd-list';
+import * as React from "react";
+import { StatefulList } from "baseui/dnd-list";
 
 export default function Example() {
   return (
     <StatefulList
       initialState={{
         items: [
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-          'Donec ornare.',
-          'Morbi malesuada id ante ac tincidunt. Phasellus at varius enim, fringilla pretium lorem. Integer placerat, est in aliquam tempus, ex urna hendrerit quam, eu sagittis nulla lorem eu magna.',
-          'Morbi nibh nunc.',
-          'Nunc consequat erat id ante mollis tincidunt in a nulla.',
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+          "Donec ornare.",
+          "Morbi malesuada id ante ac tincidunt. Phasellus at varius enim, fringilla pretium lorem. Integer placerat, est in aliquam tempus, ex urna hendrerit quam, eu sagittis nulla lorem eu magna.",
+          "Morbi nibh nunc.",
+          "Nunc consequat erat id ante mollis tincidunt in a nulla.",
         ],
       }}
       onChange={console.log}
diff --git a/documentation-site/examples/drawer/anchors.tsx b/documentation-site/examples/drawer/anchors.tsx
index 1c1fcd6033..b7d21e38fc 100644
--- a/documentation-site/examples/drawer/anchors.tsx
+++ b/documentation-site/examples/drawer/anchors.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {Drawer, ANCHOR} from 'baseui/drawer';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { Drawer, ANCHOR } from "baseui/drawer";
 
 export default function Example() {
-  let initialState: {[key: string]: boolean} = {};
+  let initialState: { [key: string]: boolean } = {};
   for (let anchor in ANCHOR) {
     initialState[anchor] = false;
   }
   const [isOpen, setIsOpen] = React.useState(initialState);
 
   function close(anchorType: string) {
-    setIsOpen({...isOpen, [anchorType]: false});
+    setIsOpen({ ...isOpen, [anchorType]: false });
   }
 
   return (
@@ -18,16 +18,14 @@ export default function Example() {
       {Object.values(ANCHOR).map((eachAnchor: string) => (
         <React.Fragment>
           <Button
-            onClick={() =>
-              setIsOpen({...isOpen, [eachAnchor]: true})
-            }
+            onClick={() => setIsOpen({ ...isOpen, [eachAnchor]: true })}
             overrides={{
               BaseButton: {
                 style: {
-                  marginTop: '12px',
-                  marginBottom: '12px',
-                  marginLeft: '12px',
-                  marginRight: '12px',
+                  marginTop: "12px",
+                  marginBottom: "12px",
+                  marginLeft: "12px",
+                  marginRight: "12px",
                 },
               },
             }}
@@ -39,9 +37,8 @@ export default function Example() {
             isOpen={isOpen[eachAnchor]}
             anchor={eachAnchor}
           >
-            Proin ut dui sed metus pharetra hend rerit vel non mi.
-            Nulla ornare faucibus ex, non facilisis nisl. Maecenas
-            aliquet mauris ut tempus.
+            Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+            faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
           </Drawer>
         </React.Fragment>
       ))}
diff --git a/documentation-site/examples/drawer/sizes.tsx b/documentation-site/examples/drawer/sizes.tsx
index ddf9fdf20e..aab2eafd21 100644
--- a/documentation-site/examples/drawer/sizes.tsx
+++ b/documentation-site/examples/drawer/sizes.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {Drawer, SIZE} from 'baseui/drawer';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { Drawer, SIZE } from "baseui/drawer";
 
 export default function Example() {
-  let initialState: {[key: string]: boolean} = {};
+  let initialState: { [key: string]: boolean } = {};
   for (let size in SIZE) {
     initialState[size] = false;
   }
   const [isOpen, setIsOpen] = React.useState(initialState);
 
   function close(sizeType: string) {
-    setIsOpen({...isOpen, [sizeType]: false});
+    setIsOpen({ ...isOpen, [sizeType]: false });
   }
 
   return (
@@ -18,14 +18,14 @@ export default function Example() {
       {Object.keys(SIZE).map((eachSize) => (
         <React.Fragment>
           <Button
-            onClick={() => setIsOpen({...isOpen, [eachSize]: true})}
+            onClick={() => setIsOpen({ ...isOpen, [eachSize]: true })}
             overrides={{
               BaseButton: {
                 style: {
-                  marginTop: '12px',
-                  marginBottom: '12px',
-                  marginLeft: '12px',
-                  marginRight: '12px',
+                  marginTop: "12px",
+                  marginBottom: "12px",
+                  marginLeft: "12px",
+                  marginRight: "12px",
                 },
               },
             }}
@@ -37,9 +37,8 @@ export default function Example() {
             isOpen={isOpen[eachSize]}
             size={eachSize}
           >
-            Proin ut dui sed metus pharetra hend rerit vel non mi.
-            Nulla ornare faucibus ex, non facilisis nisl. Maecenas
-            aliquet mauris ut tempus.
+            Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+            faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
           </Drawer>
         </React.Fragment>
       ))}
diff --git a/documentation-site/examples/drawer/ssr-render-all.tsx b/documentation-site/examples/drawer/ssr-render-all.tsx
index 0f8fe14109..2e4c85512b 100644
--- a/documentation-site/examples/drawer/ssr-render-all.tsx
+++ b/documentation-site/examples/drawer/ssr-render-all.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {Drawer} from 'baseui/drawer';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { Drawer } from "baseui/drawer";
 
 export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -10,14 +10,9 @@ export default function Example() {
       <Button onClick={() => setIsOpen(true)}>
         Open SSR Drawer (check source!)
       </Button>
-      <Drawer
-        renderAll
-        onClose={() => setIsOpen(false)}
-        isOpen={isOpen}
-      >
-        This content is SSR rendered and also rendered even if the
-        drawer is closed! View it in the source or in your
-        inspector!
+      <Drawer renderAll onClose={() => setIsOpen(false)} isOpen={isOpen}>
+        This content is SSR rendered and also rendered even if the drawer is
+        closed! View it in the source or in your inspector!
       </Drawer>
     </React.Fragment>
   );
diff --git a/documentation-site/examples/empty-state/empty-state.tsx b/documentation-site/examples/empty-state/empty-state.tsx
index 18377066d5..b19df1ad03 100644
--- a/documentation-site/examples/empty-state/empty-state.tsx
+++ b/documentation-site/examples/empty-state/empty-state.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button, KIND, SHAPE, SIZE} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button, KIND, SHAPE, SIZE } from "baseui/button";
 // @ts-ignore
-import Hide from 'baseui/icon/hide';
+import Hide from "baseui/icon/hide";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
       })}
     >
       <Hide size={theme.sizing.scale1600} />
diff --git a/documentation-site/examples/empty-state/loading.tsx b/documentation-site/examples/empty-state/loading.tsx
index 6c9eda3b93..b01cb0d66c 100644
--- a/documentation-site/examples/empty-state/loading.tsx
+++ b/documentation-site/examples/empty-state/loading.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Spinner} from 'baseui/spinner';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Spinner } from "baseui/spinner";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
       })}
     >
       <Spinner
diff --git a/documentation-site/examples/file-uploader/basic.tsx b/documentation-site/examples/file-uploader/basic.tsx
index 5ac6e5957e..07dc3dcce2 100644
--- a/documentation-site/examples/file-uploader/basic.tsx
+++ b/documentation-site/examples/file-uploader/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploader } from "baseui/file-uploader";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: any, delay: number | null) {
@@ -67,9 +67,7 @@ export default function Example() {
       // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
       progressAmount={progressAmount}
       progressMessage={
-        progressAmount
-          ? `Uploading... ${progressAmount}% of 100%`
-          : ''
+        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
       }
     />
   );
diff --git a/documentation-site/examples/file-uploader/disabled.tsx b/documentation-site/examples/file-uploader/disabled.tsx
index f16aa54140..d02150db4b 100644
--- a/documentation-site/examples/file-uploader/disabled.tsx
+++ b/documentation-site/examples/file-uploader/disabled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploader } from "baseui/file-uploader";
 
 export default function Example() {
   return <FileUploader disabled />;
diff --git a/documentation-site/examples/file-uploader/error.tsx b/documentation-site/examples/file-uploader/error.tsx
index c34fe99153..34506f5991 100644
--- a/documentation-site/examples/file-uploader/error.tsx
+++ b/documentation-site/examples/file-uploader/error.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploader } from "baseui/file-uploader";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
@@ -25,19 +25,14 @@ function useInterval(callback: () => void, delay: number | null) {
 // useFakeProgress is an elaborate way to show a fake file transfer for illustrative purposes. You
 // don't need this is your application. Use metadata from your upload destination if it's available,
 // or don't provide progress.
-function useFakeProgress(): [
-  number,
-  string,
-  () => void,
-  () => void,
-] {
+function useFakeProgress(): [number, string, () => void, () => void] {
   const [fakeProgress, setFakeProgress] = React.useState(0);
   const [isActive, setIsActive] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState('');
+  const [errorMessage, setErrorMessage] = React.useState("");
 
   function stopFakeProgress() {
     setIsActive(false);
-    setErrorMessage('');
+    setErrorMessage("");
     setFakeProgress(0);
   }
 
@@ -49,7 +44,7 @@ function useFakeProgress(): [
     () => {
       if (fakeProgress >= 40) {
         // stopFakeProgress();
-        setErrorMessage('Upload failed... connection was lost.');
+        setErrorMessage("Upload failed... connection was lost.");
       } else {
         setFakeProgress(fakeProgress + 10);
       }
@@ -57,21 +52,12 @@ function useFakeProgress(): [
     isActive ? 500 : null,
   );
 
-  return [
-    fakeProgress,
-    errorMessage,
-    startFakeProgress,
-    stopFakeProgress,
-  ];
+  return [fakeProgress, errorMessage, startFakeProgress, stopFakeProgress];
 }
 
 export default function Example() {
-  const [
-    progressAmount,
-    errorMessage,
-    startFakeProgress,
-    stopFakeProgress,
-  ] = useFakeProgress();
+  const [progressAmount, errorMessage, startFakeProgress, stopFakeProgress] =
+    useFakeProgress();
 
   return (
     <FileUploader
@@ -86,9 +72,7 @@ export default function Example() {
       // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
       progressAmount={progressAmount}
       progressMessage={
-        progressAmount
-          ? `Uploading... ${progressAmount}% of 100%`
-          : ''
+        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
       }
     />
   );
diff --git a/documentation-site/examples/file-uploader/indeterminate-progress.tsx b/documentation-site/examples/file-uploader/indeterminate-progress.tsx
index 9d28dfba1b..6c2bccc678 100644
--- a/documentation-site/examples/file-uploader/indeterminate-progress.tsx
+++ b/documentation-site/examples/file-uploader/indeterminate-progress.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploader } from "baseui/file-uploader";
 
 export default function Example() {
   const [isUploading, setIsUploading] = React.useState(false);
@@ -26,9 +26,7 @@ export default function Example() {
         console.log(acceptedFiles, rejectedFiles);
         startProgress();
       }}
-      progressMessage={
-        isUploading ? `Uploading... hang tight.` : ''
-      }
+      progressMessage={isUploading ? `Uploading... hang tight.` : ""}
     />
   );
 }
diff --git a/documentation-site/examples/file-uploader/overrides.tsx b/documentation-site/examples/file-uploader/overrides.tsx
index e81cabfa41..658923aed5 100644
--- a/documentation-site/examples/file-uploader/overrides.tsx
+++ b/documentation-site/examples/file-uploader/overrides.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploader } from "baseui/file-uploader";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: any, delay: number | null) {
@@ -67,9 +67,7 @@ export default function Example() {
       // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
       progressAmount={progressAmount}
       progressMessage={
-        progressAmount
-          ? `Uploading... ${progressAmount}% of 100%`
-          : ''
+        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
       }
       overrides={{
         FileDragAndDrop: {
diff --git a/documentation-site/examples/fixed-marker/badge-and-label-enhancers.tsx b/documentation-site/examples/fixed-marker/badge-and-label-enhancers.tsx
index 22444b7ee1..ef48803463 100644
--- a/documentation-site/examples/fixed-marker/badge-and-label-enhancers.tsx
+++ b/documentation-site/examples/fixed-marker/badge-and-label-enhancers.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FixedMarker,
   NEEDLE_SIZES,
   BADGE_ENHANCER_SIZES,
   LABEL_ENHANCER_POSITIONS,
-} from 'baseui/map-marker';
-import {Show, Search} from 'baseui/icon';
-import {useStyletron} from 'baseui';
+} from "baseui/map-marker";
+import { Show, Search } from "baseui/icon";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '60px'})}>
+    <div className={css({ height: "60px" })}>
       <FixedMarker
-        startEnhancer={({size}) => <Show size={size} />}
+        startEnhancer={({ size }) => <Show size={size} />}
         needle={NEEDLE_SIZES.none}
         badgeEnhancerSize={BADGE_ENHANCER_SIZES.small}
-        badgeEnhancerContent={({size}) => <Search size={size} />}
+        badgeEnhancerContent={({ size }) => <Search size={size} />}
         labelEnhancerContent="Les Gourmands"
         labelEnhancerPosition={LABEL_ENHANCER_POSITIONS.bottom}
       />
diff --git a/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx b/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx
index 661961aa30..28d9056ac7 100644
--- a/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx
+++ b/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {FixedMarker, BADGE_ENHANCER_SIZES} from 'baseui/map-marker';
-import {Show} from 'baseui/icon';
+import * as React from "react";
+import { FixedMarker, BADGE_ENHANCER_SIZES } from "baseui/map-marker";
+import { Show } from "baseui/icon";
 
 export default function Example() {
   return (
     <div>
       <FixedMarker
-        startEnhancer={({size}) => <Show size={size} />}
+        startEnhancer={({ size }) => <Show size={size} />}
         badgeEnhancerSize={BADGE_ENHANCER_SIZES.mediumText}
         badgeEnhancerContent={() => <>New</>}
         overrides={{
           BadgeEnhancer: {
             style: {
-              backgroundColor: 'green',
+              backgroundColor: "green",
             },
           },
         }}
diff --git a/documentation-site/examples/fixed-marker/basic.tsx b/documentation-site/examples/fixed-marker/basic.tsx
index 44726b0d17..42fb81821c 100644
--- a/documentation-site/examples/fixed-marker/basic.tsx
+++ b/documentation-site/examples/fixed-marker/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FixedMarker} from 'baseui/map-marker';
+import * as React from "react";
+import { FixedMarker } from "baseui/map-marker";
 
 export default function Example() {
   return <FixedMarker label="Uber HQ" />;
diff --git a/documentation-site/examples/fixed-marker/dragging.tsx b/documentation-site/examples/fixed-marker/dragging.tsx
index 2145ae1f6c..ccf5a4ba17 100644
--- a/documentation-site/examples/fixed-marker/dragging.tsx
+++ b/documentation-site/examples/fixed-marker/dragging.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FixedMarker,
   NEEDLE_SIZES,
   PINHEAD_SIZES_SHAPES,
-} from 'baseui/map-marker';
-import {Search} from 'baseui/icon';
+} from "baseui/map-marker";
+import { Search } from "baseui/icon";
 
 export default function Example() {
   const [dragging, setDragging] = React.useState(false);
@@ -14,9 +14,7 @@ export default function Example() {
       onMouseLeave={() => setDragging(false)}
     >
       <FixedMarker
-        startEnhancer={({size}: {size: number}) => (
-          <Search size={size} />
-        )}
+        startEnhancer={({ size }: { size: number }) => <Search size={size} />}
         size={PINHEAD_SIZES_SHAPES.large}
         needle={NEEDLE_SIZES.short}
         label="Hover over me to view dragging state"
diff --git a/documentation-site/examples/fixed-marker/end-enhancer-color.tsx b/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
index 0376970ea5..68522a6889 100644
--- a/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
+++ b/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
@@ -1,14 +1,12 @@
-import * as React from 'react';
-import {FixedMarker, KIND} from 'baseui/map-marker';
-import {DeleteAlt} from 'baseui/icon';
+import * as React from "react";
+import { FixedMarker, KIND } from "baseui/map-marker";
+import { DeleteAlt } from "baseui/icon";
 
 export default function Example() {
   return (
     <FixedMarker
       label="Illegal Dropoff"
-      endEnhancer={({size}: {size: number}) => (
-        <DeleteAlt size={size} />
-      )}
+      endEnhancer={({ size }: { size: number }) => <DeleteAlt size={size} />}
       kind={KIND.negative}
     />
   );
diff --git a/documentation-site/examples/fixed-marker/react-map-gl-dragging.tsx b/documentation-site/examples/fixed-marker/react-map-gl-dragging.tsx
index 465aa9d6a7..3a20f93040 100644
--- a/documentation-site/examples/fixed-marker/react-map-gl-dragging.tsx
+++ b/documentation-site/examples/fixed-marker/react-map-gl-dragging.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {FixedMarker} from 'baseui/map-marker';
-import ReactMapGL, {Marker} from 'react-map-gl';
+import * as React from "react";
+import { FixedMarker } from "baseui/map-marker";
+import ReactMapGL, { Marker } from "react-map-gl";
 
 const uberHq = {
   latitude: 37.768495131168336,
@@ -35,9 +35,7 @@ export default function Example() {
       {...viewport}
       width="100%"
       height="500px"
-      onViewportChange={(viewport: Viewport) =>
-        setViewport(viewport)
-      }
+      onViewportChange={(viewport: Viewport) => setViewport(viewport)}
       mapboxApiAccessToken="pk.eyJ1IjoiYmFiYnN1YmVyIiwiYSI6ImNrdThqeGkxZTVwb3kyd3BpZGRlc2NlOXUifQ.qh-EtXm2DJQZVprWUJ-GFQ"
     >
       <Marker
diff --git a/documentation-site/examples/fixed-marker/react-map-gl.tsx b/documentation-site/examples/fixed-marker/react-map-gl.tsx
index 2bf0b7a035..65f8dd6ffe 100644
--- a/documentation-site/examples/fixed-marker/react-map-gl.tsx
+++ b/documentation-site/examples/fixed-marker/react-map-gl.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {FixedMarker} from 'baseui/map-marker';
-import ReactMapGL, {Marker} from 'react-map-gl';
+import * as React from "react";
+import { FixedMarker } from "baseui/map-marker";
+import ReactMapGL, { Marker } from "react-map-gl";
 
 const uberHq = {
   latitude: 37.768495131168336,
@@ -21,9 +21,7 @@ export default function Example() {
       {...viewport}
       width="100%"
       height="500px"
-      onViewportChange={(viewport: Viewport) =>
-        setViewport(viewport)
-      }
+      onViewportChange={(viewport: Viewport) => setViewport(viewport)}
       mapboxApiAccessToken="pk.eyJ1IjoiYmFiYnN1YmVyIiwiYSI6ImNrdThqeGkxZTVwb3kyd3BpZGRlc2NlOXUifQ.qh-EtXm2DJQZVprWUJ-GFQ"
     >
       <Marker {...uberHq}>
diff --git a/documentation-site/examples/fixed-marker/start-enhancer-large.tsx b/documentation-site/examples/fixed-marker/start-enhancer-large.tsx
index 271402cab4..4c5b2049c3 100644
--- a/documentation-site/examples/fixed-marker/start-enhancer-large.tsx
+++ b/documentation-site/examples/fixed-marker/start-enhancer-large.tsx
@@ -1,17 +1,15 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FixedMarker,
   NEEDLE_SIZES,
   PINHEAD_SIZES_SHAPES,
-} from 'baseui/map-marker';
-import {Search} from 'baseui/icon';
+} from "baseui/map-marker";
+import { Search } from "baseui/icon";
 
 export default function Example() {
   return (
     <FixedMarker
-      startEnhancer={({size}: {size: number}) => (
-        <Search size={size} />
-      )}
+      startEnhancer={({ size }: { size: number }) => <Search size={size} />}
       size={PINHEAD_SIZES_SHAPES.large}
       needle={NEEDLE_SIZES.tall}
     />
diff --git a/documentation-site/examples/fixed-marker/start-enhancer.tsx b/documentation-site/examples/fixed-marker/start-enhancer.tsx
index 4e76a56746..a90bc676c8 100644
--- a/documentation-site/examples/fixed-marker/start-enhancer.tsx
+++ b/documentation-site/examples/fixed-marker/start-enhancer.tsx
@@ -1,14 +1,12 @@
-import * as React from 'react';
-import {FixedMarker} from 'baseui/map-marker';
-import {Upload} from 'baseui/icon';
+import * as React from "react";
+import { FixedMarker } from "baseui/map-marker";
+import { Upload } from "baseui/icon";
 
 export default function Example() {
   return (
     <FixedMarker
       label="Cloud Center"
-      startEnhancer={({size}: {size: number}) => (
-        <Upload size={size} />
-      )}
+      startEnhancer={({ size }: { size: number }) => <Upload size={size} />}
     />
   );
 }
diff --git a/documentation-site/examples/fixed-marker/x-small.tsx b/documentation-site/examples/fixed-marker/x-small.tsx
index 859b313420..8169fbd56f 100644
--- a/documentation-site/examples/fixed-marker/x-small.tsx
+++ b/documentation-site/examples/fixed-marker/x-small.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FixedMarker,
   NEEDLE_SIZES,
   PINHEAD_SIZES_SHAPES,
-} from 'baseui/map-marker';
+} from "baseui/map-marker";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/flex-grid/basic.tsx b/documentation-site/examples/flex-grid/basic.tsx
index a69a6b5050..8b326cd212 100644
--- a/documentation-site/examples/flex-grid/basic.tsx
+++ b/documentation-site/examples/flex-grid/basic.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
-import {BlockProps} from 'baseui/block';
+import * as React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { BlockProps } from "baseui/block";
 
 const itemProps: BlockProps = {
-  backgroundColor: 'mono300',
-  height: 'scale1000',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  backgroundColor: "mono300",
+  height: "scale1000",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 };
 
 export default function Example() {
diff --git a/documentation-site/examples/flex-grid/missing.tsx b/documentation-site/examples/flex-grid/missing.tsx
index 94dee29dc4..53bf687030 100644
--- a/documentation-site/examples/flex-grid/missing.tsx
+++ b/documentation-site/examples/flex-grid/missing.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
-import {BlockProps} from 'baseui/block';
+import * as React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { BlockProps } from "baseui/block";
 
 const itemProps: BlockProps = {
-  backgroundColor: 'mono300',
-  height: 'scale1000',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  backgroundColor: "mono300",
+  height: "scale1000",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 };
 
 export default function Example() {
diff --git a/documentation-site/examples/flex-grid/responsive.tsx b/documentation-site/examples/flex-grid/responsive.tsx
index d90ca549c3..f94ceebdd3 100644
--- a/documentation-site/examples/flex-grid/responsive.tsx
+++ b/documentation-site/examples/flex-grid/responsive.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
-import {BlockProps} from 'baseui/block';
+import * as React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { BlockProps } from "baseui/block";
 
 const itemProps: BlockProps = {
-  backgroundColor: 'mono300',
-  height: 'scale1000',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  backgroundColor: "mono300",
+  height: "scale1000",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 };
 
 export default function Example() {
diff --git a/documentation-site/examples/flex-grid/unequal-narrow.tsx b/documentation-site/examples/flex-grid/unequal-narrow.tsx
index b9ae758297..f3060b0f69 100644
--- a/documentation-site/examples/flex-grid/unequal-narrow.tsx
+++ b/documentation-site/examples/flex-grid/unequal-narrow.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
-import {BlockProps} from 'baseui/block';
-import {LightTheme} from 'baseui';
+import * as React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { BlockProps } from "baseui/block";
+import { LightTheme } from "baseui";
 
 const itemProps: BlockProps = {
-  backgroundColor: 'mono300',
-  height: 'scale1000',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  backgroundColor: "mono300",
+  height: "scale1000",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 };
 
 const narrowItemProps = {
@@ -16,7 +16,7 @@ const narrowItemProps = {
   overrides: {
     Block: {
       // theme type is inferred when in-lined
-      style: ({$theme}: {$theme: typeof LightTheme}) => ({
+      style: ({ $theme }: { $theme: typeof LightTheme }) => ({
         width: $theme.sizing.scale1600,
         flexGrow: 0,
       }),
diff --git a/documentation-site/examples/flex-grid/unequal-wide.tsx b/documentation-site/examples/flex-grid/unequal-wide.tsx
index 317ed5ab9c..383ed9aba0 100644
--- a/documentation-site/examples/flex-grid/unequal-wide.tsx
+++ b/documentation-site/examples/flex-grid/unequal-wide.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
-import {BlockProps} from 'baseui/block';
+import * as React from "react";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+import { BlockProps } from "baseui/block";
 
 const itemProps: BlockProps = {
-  backgroundColor: 'mono300',
-  height: 'scale1000',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  backgroundColor: "mono300",
+  height: "scale1000",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 };
 
 export default function Example() {
@@ -22,7 +22,7 @@ export default function Example() {
         {...itemProps}
         overrides={{
           Block: {
-            style: ({$theme}) => ({
+            style: ({ $theme }) => ({
               width: `calc((200% - ${$theme.sizing.scale800}) / 3)`,
             }),
           },
diff --git a/documentation-site/examples/floating-marker/basic.tsx b/documentation-site/examples/floating-marker/basic.tsx
index bed7e102d6..6e66e20ef2 100644
--- a/documentation-site/examples/floating-marker/basic.tsx
+++ b/documentation-site/examples/floating-marker/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FloatingMarker} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingMarker } from "baseui/map-marker";
 
 export default function Example() {
   return <FloatingMarker label="Uber HQ" />;
diff --git a/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx b/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
index eb898f1f63..bb15d69b8c 100644
--- a/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
+++ b/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
@@ -1,18 +1,16 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingMarker,
   FLOATING_MARKER_ANCHOR_TYPES,
   FLOATING_MARKER_SIZES,
-} from 'baseui/map-marker';
-import {Search} from 'baseui/icon';
+} from "baseui/map-marker";
+import { Search } from "baseui/icon";
 export default function Example() {
   return (
     <FloatingMarker
       label="Uber HQ"
       anchorType={FLOATING_MARKER_ANCHOR_TYPES.square}
-      startEnhancer={({size}: {size: number}) => (
-        <Search size={size} />
-      )}
+      startEnhancer={({ size }: { size: number }) => <Search size={size} />}
       size={FLOATING_MARKER_SIZES.large}
     />
   );
diff --git a/documentation-site/examples/floating-marker/large-top-right.tsx b/documentation-site/examples/floating-marker/large-top-right.tsx
index 4e00c3007d..60552ae82b 100644
--- a/documentation-site/examples/floating-marker/large-top-right.tsx
+++ b/documentation-site/examples/floating-marker/large-top-right.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingMarker,
   FLOATING_MARKER_ANCHOR_POSITIONS,
   FLOATING_MARKER_SIZES,
-} from 'baseui/map-marker';
+} from "baseui/map-marker";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/floating-marker/react-map-gl.tsx b/documentation-site/examples/floating-marker/react-map-gl.tsx
index 388ece6c9d..df791c3375 100644
--- a/documentation-site/examples/floating-marker/react-map-gl.tsx
+++ b/documentation-site/examples/floating-marker/react-map-gl.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {FloatingMarker} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingMarker } from "baseui/map-marker";
 // @ts-ignore
-import ReactMapGL, {Marker} from 'react-map-gl';
+import ReactMapGL, { Marker } from "react-map-gl";
 
 const uberHq = {
   latitude: 37.768495131168336,
@@ -22,9 +22,7 @@ export default function Example() {
       {...viewport}
       width="100%"
       height="500px"
-      onViewportChange={(viewport: Viewport) =>
-        setViewport(viewport)
-      }
+      onViewportChange={(viewport: Viewport) => setViewport(viewport)}
       mapboxApiAccessToken="pk.eyJ1IjoiYmFiYnN1YmVyIiwiYSI6ImNrdThqeGkxZTVwb3kyd3BpZGRlc2NlOXUifQ.qh-EtXm2DJQZVprWUJ-GFQ"
     >
       <Marker {...uberHq}>
diff --git a/documentation-site/examples/floating-marker/secondary-label-color.tsx b/documentation-site/examples/floating-marker/secondary-label-color.tsx
index a92fbd8de9..9b5a158752 100644
--- a/documentation-site/examples/floating-marker/secondary-label-color.tsx
+++ b/documentation-site/examples/floating-marker/secondary-label-color.tsx
@@ -1,8 +1,5 @@
-import * as React from 'react';
-import {
-  FloatingMarker,
-  FLOATING_MARKER_SIZES,
-} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingMarker, FLOATING_MARKER_SIZES } from "baseui/map-marker";
 
 export default function Example() {
   return (
@@ -12,7 +9,7 @@ export default function Example() {
       secondaryLabel="Mission Bay 3"
       overrides={{
         Label: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             color: $theme.colors.contentTertiary,
           }),
         },
diff --git a/documentation-site/examples/floating-marker/secondary-label.tsx b/documentation-site/examples/floating-marker/secondary-label.tsx
index e67cc083ed..5b6e8b18a9 100644
--- a/documentation-site/examples/floating-marker/secondary-label.tsx
+++ b/documentation-site/examples/floating-marker/secondary-label.tsx
@@ -1,8 +1,5 @@
-import * as React from 'react';
-import {
-  FloatingMarker,
-  FLOATING_MARKER_SIZES,
-} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingMarker, FLOATING_MARKER_SIZES } from "baseui/map-marker";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/floating-marker/small-no-anchor.tsx b/documentation-site/examples/floating-marker/small-no-anchor.tsx
index 6259e254ba..abca013192 100644
--- a/documentation-site/examples/floating-marker/small-no-anchor.tsx
+++ b/documentation-site/examples/floating-marker/small-no-anchor.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingMarker,
   FLOATING_MARKER_SIZES,
   FLOATING_MARKER_ANCHOR_POSITIONS,
-} from 'baseui/map-marker';
+} from "baseui/map-marker";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/floating-marker/start-enhancer.tsx b/documentation-site/examples/floating-marker/start-enhancer.tsx
index 4157327809..2744bbb794 100644
--- a/documentation-site/examples/floating-marker/start-enhancer.tsx
+++ b/documentation-site/examples/floating-marker/start-enhancer.tsx
@@ -1,18 +1,16 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingMarker,
   FLOATING_MARKER_ANCHOR_POSITIONS,
-} from 'baseui/map-marker';
-import {Search} from 'baseui/icon';
+} from "baseui/map-marker";
+import { Search } from "baseui/icon";
 
 export default function Example() {
   return (
     <FloatingMarker
       label="Uber Cafe"
       anchor={FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight}
-      startEnhancer={({size}: {size: number}) => (
-        <Search size={size} />
-      )}
+      startEnhancer={({ size }: { size: number }) => <Search size={size} />}
     />
   );
 }
diff --git a/documentation-site/examples/floating-route-marker/basic.tsx b/documentation-site/examples/floating-route-marker/basic.tsx
index bed7e102d6..6e66e20ef2 100644
--- a/documentation-site/examples/floating-route-marker/basic.tsx
+++ b/documentation-site/examples/floating-route-marker/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {FloatingMarker} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingMarker } from "baseui/map-marker";
 
 export default function Example() {
   return <FloatingMarker label="Uber HQ" />;
diff --git a/documentation-site/examples/floating-route-marker/changing-pointer-positions.tsx b/documentation-site/examples/floating-route-marker/changing-pointer-positions.tsx
index fb108f4d7d..00880aaae6 100644
--- a/documentation-site/examples/floating-route-marker/changing-pointer-positions.tsx
+++ b/documentation-site/examples/floating-route-marker/changing-pointer-positions.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingRouteMarker,
   FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS,
   calculateFloatingRouteMarkerOffsets,
-} from 'baseui/map-marker';
-import {styled} from 'baseui';
+} from "baseui/map-marker";
+import { styled } from "baseui";
 
-const Container = styled<{}>('div', () => ({
+const Container = styled<{}>("div", () => ({
   height: `${200}px`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 }));
 
-const Center = styled<{}>('div', () => ({
-  position: 'absolute',
+const Center = styled<{}>("div", () => ({
+  position: "absolute",
 }));
 
 const anchors = [
@@ -52,9 +52,7 @@ export default function Example() {
           overrides={{
             Root: {
               style: () => ({
-                transform: calculateFloatingRouteMarkerOffsets(
-                  anchors[index],
-                ),
+                transform: calculateFloatingRouteMarkerOffsets(anchors[index]),
               }),
             },
           }}
diff --git a/documentation-site/examples/floating-route-marker/custom-color-overrides.tsx b/documentation-site/examples/floating-route-marker/custom-color-overrides.tsx
index f4ff07aad3..bf50abe1e1 100644
--- a/documentation-site/examples/floating-route-marker/custom-color-overrides.tsx
+++ b/documentation-site/examples/floating-route-marker/custom-color-overrides.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {FloatingRouteMarker} from 'baseui/map-marker';
-import {styled} from 'baseui';
+import * as React from "react";
+import { FloatingRouteMarker } from "baseui/map-marker";
+import { styled } from "baseui";
 
-const Container = styled('div', () => ({
+const Container = styled("div", () => ({
   height: `${128}px`,
-  display: 'grid',
-  gridTemplateColumns: '1fr 1fr',
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
   padding: `${16}px`,
 }));
 
-const Cell = styled('div', () => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+const Cell = styled("div", () => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 }));
 
 export default function Example() {
@@ -24,17 +24,17 @@ export default function Example() {
           secondaryLabel="Avoids tolls"
           overrides={{
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 backgroundColor: $theme.colors.warning200,
               }),
             },
             Pointer: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 fill: $theme.colors.warning200,
               }),
             },
             Label: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 color: $theme.colors.contentNegative,
               }),
             },
@@ -48,17 +48,17 @@ export default function Example() {
           selected={true}
           overrides={{
             Root: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 backgroundColor: $theme.colors.backgroundAccent,
               }),
             },
             Pointer: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 fill: $theme.colors.backgroundAccent,
               }),
             },
             SecondaryLabel: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 color: $theme.colors.contentOnColor,
               }),
             },
diff --git a/documentation-site/examples/floating-route-marker/react-map-gl.tsx b/documentation-site/examples/floating-route-marker/react-map-gl.tsx
index 6882b19923..8681ccafa4 100644
--- a/documentation-site/examples/floating-route-marker/react-map-gl.tsx
+++ b/documentation-site/examples/floating-route-marker/react-map-gl.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   FloatingRouteMarker,
   FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS,
   calculateFloatingRouteMarkerOffsets,
-} from 'baseui/map-marker';
-import ReactMapGL, {Marker, Source, Layer} from 'react-map-gl';
-import {useStyletron} from 'baseui';
+} from "baseui/map-marker";
+import ReactMapGL, { Marker, Source, Layer } from "react-map-gl";
+import { useStyletron } from "baseui";
 
 function calculateMidpoint([[x1, y1], [x2, y2]]) {
   return [(x1 + x2) / 2, (y1 + y2) / 2];
 }
 
 const geojson = {
-  type: 'FeatureCollection',
+  type: "FeatureCollection",
   features: [
     {
-      type: 'Feature',
+      type: "Feature",
       properties: {},
       geometry: {
-        type: 'LineString',
+        type: "LineString",
         coordinates: [
           [-66.12117290496826, 18.46832392198594],
           [-66.1238443851471, 18.470623748008414],
@@ -31,9 +31,7 @@ const geojson = {
 export default function Example() {
   const [, theme] = useStyletron();
 
-  const midpoint = calculateMidpoint(
-    geojson.features[0].geometry.coordinates,
-  );
+  const midpoint = calculateMidpoint(geojson.features[0].geometry.coordinates);
   const [viewport, setViewport] = React.useState({
     longitude: midpoint[0],
     latitude: midpoint[1],
@@ -52,21 +50,19 @@ export default function Example() {
           id={`background-route-line`}
           type="line"
           layout={{
-            'line-join': 'round',
-            'line-cap': 'round',
+            "line-join": "round",
+            "line-cap": "round",
           }}
           paint={{
-            'line-color': theme.colors.contentPrimary,
-            'line-width': 4,
+            "line-color": theme.colors.contentPrimary,
+            "line-width": 4,
           }}
         />
       </Source>
       <Marker longitude={midpoint[0]} latitude={midpoint[1]}>
         <FloatingRouteMarker
           label="El Morro Path"
-          anchorPosition={
-            FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft
-          }
+          anchorPosition={FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft}
           overrides={{
             Root: {
               style: () => ({
diff --git a/documentation-site/examples/floating-route-marker/secondary-label.tsx b/documentation-site/examples/floating-route-marker/secondary-label.tsx
index af4d583a82..f742ba782b 100644
--- a/documentation-site/examples/floating-route-marker/secondary-label.tsx
+++ b/documentation-site/examples/floating-route-marker/secondary-label.tsx
@@ -1,11 +1,6 @@
-import * as React from 'react';
-import {FloatingRouteMarker} from 'baseui/map-marker';
+import * as React from "react";
+import { FloatingRouteMarker } from "baseui/map-marker";
 
 export default function Example() {
-  return (
-    <FloatingRouteMarker
-      label="57 min"
-      secondaryLabel="Fastest route"
-    />
-  );
+  return <FloatingRouteMarker label="57 min" secondaryLabel="Fastest route" />;
 }
diff --git a/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx b/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
index 9ebb2f9b79..dd8c136a90 100644
--- a/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
+++ b/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {FloatingRouteMarker} from 'baseui/map-marker';
-import ChevronRight from 'baseui/icon/chevron-right';
-import Search from 'baseui/icon/search';
+import * as React from "react";
+import { FloatingRouteMarker } from "baseui/map-marker";
+import ChevronRight from "baseui/icon/chevron-right";
+import Search from "baseui/icon/search";
 
 export default function Example() {
   return (
     <FloatingRouteMarker
       label="Avoids tolls"
-      startEnhancer={({size}) => <Search size={size} />}
-      endEnhancer={({size}) => <ChevronRight size={size} />}
+      startEnhancer={({ size }) => <Search size={size} />}
+      endEnhancer={({ size }) => <ChevronRight size={size} />}
     />
   );
 }
diff --git a/documentation-site/examples/form-control/checkbox.tsx b/documentation-site/examples/form-control/checkbox.tsx
index 46faaaa5dd..d8a34e04c7 100644
--- a/documentation-site/examples/form-control/checkbox.tsx
+++ b/documentation-site/examples/form-control/checkbox.tsx
@@ -1,15 +1,12 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Checkbox } from "baseui/checkbox";
 
 export default function Example() {
   const [checked, setChecked] = React.useState(false);
   return (
     <FormControl label="Checkbox label" caption="Checkbox caption">
-      <Checkbox
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-      >
+      <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
         Checkbox control
       </Checkbox>
     </FormControl>
diff --git a/documentation-site/examples/form-control/input.tsx b/documentation-site/examples/form-control/input.tsx
index db5aea3f3a..57afe2c99b 100644
--- a/documentation-site/examples/form-control/input.tsx
+++ b/documentation-site/examples/form-control/input.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Input } from "baseui/input";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <FormControl label="Input label" caption="Input caption">
       <Input
diff --git a/documentation-site/examples/form-control/kinds.tsx b/documentation-site/examples/form-control/kinds.tsx
index ef6d849943..cb1ce3d2be 100644
--- a/documentation-site/examples/form-control/kinds.tsx
+++ b/documentation-site/examples/form-control/kinds.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Input } from "baseui/input";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/form-control/radio-group.tsx b/documentation-site/examples/form-control/radio-group.tsx
index 6ac728e19d..33f8fa5566 100644
--- a/documentation-site/examples/form-control/radio-group.tsx
+++ b/documentation-site/examples/form-control/radio-group.tsx
@@ -1,14 +1,11 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {RadioGroup, Radio} from 'baseui/radio';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { RadioGroup, Radio } from "baseui/radio";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
-    <FormControl
-      label="RadioGroup label"
-      caption="RadioGroup caption"
-    >
+    <FormControl label="RadioGroup label" caption="RadioGroup caption">
       <RadioGroup
         value={value}
         onChange={(event) => setValue(event.currentTarget.value)}
diff --git a/documentation-site/examples/form-control/select.tsx b/documentation-site/examples/form-control/select.tsx
index e860225143..e2f899c075 100644
--- a/documentation-site/examples/form-control/select.tsx
+++ b/documentation-site/examples/form-control/select.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Select} from 'baseui/select';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Select } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState([]);
@@ -9,14 +9,14 @@ export default function Example() {
       <Select
         id="select-id"
         value={value}
-        onChange={({value}: any) => setValue(value)}
+        onChange={({ value }: any) => setValue(value)}
         options={[
-          {id: 'AliceBlue', color: '#F0F8FF'},
-          {id: 'AntiqueWhite', color: '#FAEBD7'},
-          {id: 'Aqua', color: '#00FFFF'},
-          {id: 'Aquamarine', color: '#7FFFD4'},
-          {id: 'Azure', color: '#F0FFFF'},
-          {id: 'Beige', color: '#F5F5DC'},
+          { id: "AliceBlue", color: "#F0F8FF" },
+          { id: "AntiqueWhite", color: "#FAEBD7" },
+          { id: "Aqua", color: "#00FFFF" },
+          { id: "Aquamarine", color: "#7FFFD4" },
+          { id: "Azure", color: "#F0FFFF" },
+          { id: "Beige", color: "#F5F5DC" },
         ]}
         labelKey="id"
         valueKey="color"
diff --git a/documentation-site/examples/form-control/textarea.tsx b/documentation-site/examples/form-control/textarea.tsx
index 78c7f5fa43..03ffd67cd9 100644
--- a/documentation-site/examples/form-control/textarea.tsx
+++ b/documentation-site/examples/form-control/textarea.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Textarea} from 'baseui/textarea';
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Textarea } from "baseui/textarea";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <FormControl label="Textarea label" caption="Textarea caption">
       <Textarea
diff --git a/documentation-site/examples/form-control/validation.tsx b/documentation-site/examples/form-control/validation.tsx
index b16ce84bf0..90ee9fbb6e 100644
--- a/documentation-site/examples/form-control/validation.tsx
+++ b/documentation-site/examples/form-control/validation.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {FormControl} from 'baseui/form-control';
-import {Input} from 'baseui/input';
-import {useStyletron} from 'baseui';
-import {Alert} from 'baseui/icon';
-import {validate as validateEmail} from 'email-validator'; // add this package to your repo: `$ pnpm add email-validator`
+import * as React from "react";
+import { FormControl } from "baseui/form-control";
+import { Input } from "baseui/input";
+import { useStyletron } from "baseui";
+import { Alert } from "baseui/icon";
+import { validate as validateEmail } from "email-validator"; // add this package to your repo: `$ pnpm add email-validator`
 
 function Negative() {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        alignItems: 'center',
+        display: "flex",
+        alignItems: "center",
         paddingRight: theme.sizing.scale500,
         color: theme.colors.negative400,
       })}
@@ -22,12 +22,12 @@ function Negative() {
 }
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   const [isValid, setIsValid] = React.useState(false);
   const [isVisited, setIsVisited] = React.useState(false);
   const shouldShowError = !isValid && isVisited;
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const {value} = event.currentTarget;
+    const { value } = event.currentTarget;
     setIsValid(validateEmail(value));
     setValue(value);
   };
@@ -35,11 +35,7 @@ export default function Example() {
   return (
     <FormControl
       label="Your email"
-      error={
-        shouldShowError
-          ? 'Please input a valid email address'
-          : null
-      }
+      error={shouldShowError ? "Please input a valid email address" : null}
     >
       <Input
         id="input-id"
@@ -47,7 +43,7 @@ export default function Example() {
         onChange={onChange}
         onBlur={() => setIsVisited(true)}
         error={shouldShowError}
-        overrides={shouldShowError ? {After: Negative} : {}}
+        overrides={shouldShowError ? { After: Negative } : {}}
       />
     </FormControl>
   );
diff --git a/documentation-site/examples/getting-started/usage.tsx b/documentation-site/examples/getting-started/usage.tsx
index f499d0bcb0..5239f7cb6b 100644
--- a/documentation-site/examples/getting-started/usage.tsx
+++ b/documentation-site/examples/getting-started/usage.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {StatefulInput} from 'baseui/input';
-import {useStyletron} from 'baseui';
+import { StatefulInput } from "baseui/input";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
       })}
     >
       <StatefulInput />
diff --git a/documentation-site/examples/header-navigation/basic.tsx b/documentation-site/examples/header-navigation/basic.tsx
index db709769d2..6967b78114 100644
--- a/documentation-site/examples/header-navigation/basic.tsx
+++ b/documentation-site/examples/header-navigation/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   HeaderNavigation,
   ALIGN,
   StyledNavigationItem as NavigationItem,
   StyledNavigationList as NavigationList,
-} from 'baseui/header-navigation';
-import {StyledLink as Link} from 'baseui/link';
-import {Button} from 'baseui/button';
+} from "baseui/header-navigation";
+import { StyledLink as Link } from "baseui/link";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/header-navigation/with-search.tsx b/documentation-site/examples/header-navigation/with-search.tsx
index 5e0528b3ad..e187d508ff 100644
--- a/documentation-site/examples/header-navigation/with-search.tsx
+++ b/documentation-site/examples/header-navigation/with-search.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   HeaderNavigation,
   ALIGN,
   StyledNavigationItem as NavigationItem,
   StyledNavigationList as NavigationList,
-} from 'baseui/header-navigation';
-import {StyledLink as Link} from 'baseui/link';
-import {StatefulSelect as Search, TYPE} from 'baseui/select';
+} from "baseui/header-navigation";
+import { StyledLink as Link } from "baseui/link";
+import { StatefulSelect as Search, TYPE } from "baseui/select";
 
 const options = {
   options: [
-    {id: 'AliceBlue', color: '#F0F8FF'},
-    {id: 'AntiqueWhite', color: '#FAEBD7'},
-    {id: 'Aqua', color: '#00FFFF'},
-    {id: 'Aquamarine', color: '#7FFFD4'},
-    {id: 'Azure', color: '#F0FFFF'},
-    {id: 'Beige', color: '#F5F5DC'},
-    {id: 'Bisque', color: '#FFE4C4'},
-    {id: 'Black', color: '#000000'},
+    { id: "AliceBlue", color: "#F0F8FF" },
+    { id: "AntiqueWhite", color: "#FAEBD7" },
+    { id: "Aqua", color: "#00FFFF" },
+    { id: "Aquamarine", color: "#7FFFD4" },
+    { id: "Azure", color: "#F0FFFF" },
+    { id: "Beige", color: "#F5F5DC" },
+    { id: "Bisque", color: "#FFE4C4" },
+    { id: "Black", color: "#000000" },
   ],
-  labelKey: 'id',
-  valueKey: 'color',
-  placeholder: 'Search colors',
-  maxDropdownHeight: '300px',
+  labelKey: "id",
+  valueKey: "color",
+  placeholder: "Search colors",
+  maxDropdownHeight: "300px",
 };
 
 export default function Example() {
@@ -38,14 +38,12 @@ export default function Example() {
         </NavigationItem>
       </NavigationList>
       <NavigationList $align={ALIGN.right}>
-        <NavigationItem style={{width: '200px'}}>
+        <NavigationItem style={{ width: "200px" }}>
           <Search
             {...options}
             type={TYPE.search}
             getOptionLabel={(props) =>
-              props.option && props.option.id
-                ? props.option.id
-                : null
+              props.option && props.option.id ? props.option.id : null
             }
             onChange={() => {}}
           />
diff --git a/documentation-site/examples/hint-dot/offset.tsx b/documentation-site/examples/hint-dot/offset.tsx
index 8e535568fa..625cb72854 100644
--- a/documentation-site/examples/hint-dot/offset.tsx
+++ b/documentation-site/examples/hint-dot/offset.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Tag, SIZE} from 'baseui/tag';
-import {HintDot, COLOR} from 'baseui/badge';
+import * as React from "react";
+import { Tag, SIZE } from "baseui/tag";
+import { HintDot, COLOR } from "baseui/badge";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/icon/basic.tsx b/documentation-site/examples/icon/basic.tsx
index 293e62fbdb..faa912c41d 100644
--- a/documentation-site/examples/icon/basic.tsx
+++ b/documentation-site/examples/icon/basic.tsx
@@ -1,16 +1,11 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {
-  ArrowUp,
-  ArrowRight,
-  ArrowDown,
-  ArrowLeft,
-} from 'baseui/icon';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from "baseui/icon";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
-    <div className={css({color: theme.colors.warning})}>
+    <div className={css({ color: theme.colors.warning })}>
       <ArrowUp size={36} />
       <ArrowUp size={36} />
       <ArrowDown size={36} />
diff --git a/documentation-site/examples/icon/button.tsx b/documentation-site/examples/icon/button.tsx
index ae6c402d1e..a8addad1a6 100644
--- a/documentation-site/examples/icon/button.tsx
+++ b/documentation-site/examples/icon/button.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
 
-import {ChevronLeft, ChevronRight, Upload} from 'baseui/icon';
+import { ChevronLeft, ChevronRight, Upload } from "baseui/icon";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div>
-      <div className={css({paddingBottom: theme.sizing.scale300})}>
+      <div className={css({ paddingBottom: theme.sizing.scale300 })}>
         <Button startEnhancer={ChevronLeft}>Start Enhancer</Button>
       </div>
 
-      <div className={css({paddingBottom: theme.sizing.scale300})}>
+      <div className={css({ paddingBottom: theme.sizing.scale300 })}>
         <Button endEnhancer={ChevronRight}>End Enhancer</Button>
       </div>
 
diff --git a/documentation-site/examples/icon/list.tsx b/documentation-site/examples/icon/list.tsx
index 5283d6aff0..8a319cd580 100644
--- a/documentation-site/examples/icon/list.tsx
+++ b/documentation-site/examples/icon/list.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import * as Icons from 'baseui/icon/icon-exports';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import * as Icons from "baseui/icon/icon-exports";
 
 function makeImportStatement(key: string) {
   const path = key
     .split(/(?=[A-Z])/)
     .map((word) => word.toLowerCase())
-    .join('-');
+    .join("-");
 
   return `import ${key} from 'baseui/icon/${path}'`;
 }
@@ -17,9 +17,9 @@ function Row(props: any) {
   return (
     <div
       className={css({
-        alignItems: 'center',
+        alignItems: "center",
         color: theme.colors.contentPrimary,
-        display: 'flex',
+        display: "flex",
         paddingBottom: theme.sizing.scale500,
       })}
     >
diff --git a/documentation-site/examples/input/available-states.tsx b/documentation-site/examples/input/available-states.tsx
index c55ad78db3..3b8c0178cf 100644
--- a/documentation-site/examples/input/available-states.tsx
+++ b/documentation-site/examples/input/available-states.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { Input } from "baseui/input";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/input/basic-controlled.tsx b/documentation-site/examples/input/basic-controlled.tsx
index f03cb7d457..92240ed575 100644
--- a/documentation-site/examples/input/basic-controlled.tsx
+++ b/documentation-site/examples/input/basic-controlled.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { Input } from "baseui/input";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <Input
       value={value}
diff --git a/documentation-site/examples/input/basic-uncontrolled.tsx b/documentation-site/examples/input/basic-uncontrolled.tsx
index 63837f3b33..f10805c7a2 100644
--- a/documentation-site/examples/input/basic-uncontrolled.tsx
+++ b/documentation-site/examples/input/basic-uncontrolled.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {StatefulInput} from 'baseui/input';
+import * as React from "react";
+import { StatefulInput } from "baseui/input";
 
 export default function Example() {
   return (
     <StatefulInput
-      initialState={{value: 'I manage my own state...'}}
+      initialState={{ value: "I manage my own state..." }}
       placeholder="I manage my own state..."
     />
   );
diff --git a/documentation-site/examples/input/clearable.tsx b/documentation-site/examples/input/clearable.tsx
index 921d1ce520..d0f93f4528 100644
--- a/documentation-site/examples/input/clearable.tsx
+++ b/documentation-site/examples/input/clearable.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { Input } from "baseui/input";
 
 export default function Example() {
-  const [value, setValue] = React.useState('Clear me!');
+  const [value, setValue] = React.useState("Clear me!");
   return (
     <Input
       value={value}
diff --git a/documentation-site/examples/input/enhancers.tsx b/documentation-site/examples/input/enhancers.tsx
index 10f193f06c..0fdd03d804 100644
--- a/documentation-site/examples/input/enhancers.tsx
+++ b/documentation-site/examples/input/enhancers.tsx
@@ -1,19 +1,13 @@
-import * as React from 'react';
-import {Search} from 'baseui/icon';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { Search } from "baseui/icon";
+import { Input } from "baseui/input";
 
 export default function Example() {
   return (
     <React.Fragment>
-      <Input
-        startEnhancer="@"
-        placeholder="Input with a start enhancer"
-      />
+      <Input startEnhancer="@" placeholder="Input with a start enhancer" />
       <br />
-      <Input
-        endEnhancer=".00"
-        placeholder="Input with an end enhancer"
-      />
+      <Input endEnhancer=".00" placeholder="Input with an end enhancer" />
       <br />
       <Input
         startEnhancer="$"
diff --git a/documentation-site/examples/input/focus.tsx b/documentation-site/examples/input/focus.tsx
index be1d362e7b..e21d71c64f 100644
--- a/documentation-site/examples/input/focus.tsx
+++ b/documentation-site/examples/input/focus.tsx
@@ -1,28 +1,26 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {Input} from 'baseui/input';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { Input } from "baseui/input";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   const inputRef = React.useRef<HTMLInputElement>(null);
   return (
-    <div className={css({display: 'flex'})}>
+    <div className={css({ display: "flex" })}>
       <Input
         inputRef={inputRef}
         placeholder="With input ref"
         overrides={{
           Root: {
             style: {
-              width: '50%',
+              width: "50%",
               marginRight: theme.sizing.scale400,
             },
           },
         }}
       />
-      <Button
-        onClick={() => inputRef.current && inputRef.current.focus()}
-      >
+      <Button onClick={() => inputRef.current && inputRef.current.focus()}>
         Click to focus
       </Button>
     </div>
diff --git a/documentation-site/examples/input/mask.tsx b/documentation-site/examples/input/mask.tsx
index ae77c1ebed..16a2d21cfe 100644
--- a/documentation-site/examples/input/mask.tsx
+++ b/documentation-site/examples/input/mask.tsx
@@ -1,8 +1,6 @@
-import * as React from 'react';
-import {MaskedInput} from 'baseui/input';
+import * as React from "react";
+import { MaskedInput } from "baseui/input";
 
 export default function Example() {
-  return (
-    <MaskedInput placeholder="Phone number" mask="(999) 999-9999" />
-  );
+  return <MaskedInput placeholder="Phone number" mask="(999) 999-9999" />;
 }
diff --git a/documentation-site/examples/input/overrides.tsx b/documentation-site/examples/input/overrides.tsx
index c04d5589f4..73053c3128 100644
--- a/documentation-site/examples/input/overrides.tsx
+++ b/documentation-site/examples/input/overrides.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {Input} from 'baseui/input';
+import React from "react";
+import { Input } from "baseui/input";
 
 export default function Example() {
   return (
@@ -11,14 +11,14 @@ export default function Example() {
               $disabled,
               $error,
               $isFocused,
-              $theme: {colors, sizing},
+              $theme: { colors, sizing },
             } = props;
             const border = $disabled
               ? colors.borderTransparent
               : $error
                 ? colors.borderNegative
                 : $isFocused
-                  ? 'darkseagreen'
+                  ? "darkseagreen"
                   : colors.borderOpaque;
             return {
               borderLeftColor: border,
@@ -27,12 +27,12 @@ export default function Example() {
               borderBottomColor: border,
               boxShadow: `0 0 ${sizing.scale100} ${
                 $disabled
-                  ? 'transparent'
+                  ? "transparent"
                   : $error
                     ? colors.shadowError
                     : $isFocused
-                      ? 'lightseagreen'
-                      : 'transparent'
+                      ? "lightseagreen"
+                      : "transparent"
               }`,
             };
           },
diff --git a/documentation-site/examples/input/password.tsx b/documentation-site/examples/input/password.tsx
index d5661e97ee..0171b0ffce 100644
--- a/documentation-site/examples/input/password.tsx
+++ b/documentation-site/examples/input/password.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import {Input} from 'baseui/input';
+import React from "react";
+import { Input } from "baseui/input";
 
 export default function Example() {
-  const [value, setValue] = React.useState('1234');
+  const [value, setValue] = React.useState("1234");
   return (
     <Input
       onChange={(event) => setValue(event.currentTarget.value)}
diff --git a/documentation-site/examples/input/sizes.tsx b/documentation-site/examples/input/sizes.tsx
index dcdb83c234..72c6c34329 100644
--- a/documentation-site/examples/input/sizes.tsx
+++ b/documentation-site/examples/input/sizes.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {Input, SIZE} from 'baseui/input';
+import React from "react";
+import { Input, SIZE } from "baseui/input";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/input/with-select.tsx b/documentation-site/examples/input/with-select.tsx
index 72717504d2..3feee9f204 100644
--- a/documentation-site/examples/input/with-select.tsx
+++ b/documentation-site/examples/input/with-select.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {useStyletron} from 'baseui';
-import {FormControl} from 'baseui/form-control';
-import {Input} from 'baseui/input';
-import {Select} from 'baseui/select';
+import { useStyletron } from "baseui";
+import { FormControl } from "baseui/form-control";
+import { Input } from "baseui/input";
+import { Select } from "baseui/select";
 
 function SelectAtStart(props: any) {
   const [css] = useStyletron();
   return (
-    <div className={css({display: 'flex'})}>
-      <div className={css({width: '200px', paddingRight: '8px'})}>
+    <div className={css({ display: "flex" })}>
+      <div className={css({ width: "200px", paddingRight: "8px" })}>
         <Select
           options={props.options}
           labelKey="id"
           valueKey="color"
-          onChange={({value}) => props.onSelectChange(value)}
+          onChange={({ value }) => props.onSelectChange(value)}
           value={props.selectValue}
           id={props.id}
         />
@@ -30,18 +30,18 @@ function SelectAtStart(props: any) {
 function SelectAtEnd(props: any) {
   const [css] = useStyletron();
   return (
-    <div className={css({display: 'flex'})}>
+    <div className={css({ display: "flex" })}>
       <Input
         onChange={(e) => props.onInputChange(e.currentTarget.value)}
         value={props.inputValue}
         id={props.id}
       />
-      <div className={css({width: '200px', paddingLeft: '8px'})}>
+      <div className={css({ width: "200px", paddingLeft: "8px" })}>
         <Select
           options={props.options}
           labelKey="id"
           valueKey="color"
-          onChange={({value}) => props.onSelectChange(value)}
+          onChange={({ value }) => props.onSelectChange(value)}
           value={props.selectValue}
         />
       </div>
@@ -50,28 +50,23 @@ function SelectAtEnd(props: any) {
 }
 
 export default function Example() {
-  const [startInputValue, setStartInputValue] = React.useState('');
-  const [startSelectValue, setStartSelectValue] = React.useState(
-    [],
-  );
-  const [endInputValue, setEndInputValue] = React.useState('');
+  const [startInputValue, setStartInputValue] = React.useState("");
+  const [startSelectValue, setStartSelectValue] = React.useState([]);
+  const [endInputValue, setEndInputValue] = React.useState("");
   const [endSelectValue, setEndSelectValue] = React.useState([]);
 
   return (
     <div>
-      <FormControl
-        label="input with start select"
-        caption="caption"
-      >
+      <FormControl label="input with start select" caption="caption">
         <SelectAtStart
           inputValue={startInputValue}
           onInputChange={setStartInputValue}
           selectValue={startSelectValue}
           onSelectChange={setStartSelectValue}
           options={[
-            {id: 'AliceBlue', color: '#F0F8FF'},
-            {id: 'AntiqueWhite', color: '#FAEBD7'},
-            {id: 'Aqua', color: '#00FFFF'},
+            { id: "AliceBlue", color: "#F0F8FF" },
+            { id: "AntiqueWhite", color: "#FAEBD7" },
+            { id: "Aqua", color: "#00FFFF" },
           ]}
           id="start-id"
         />
@@ -84,9 +79,9 @@ export default function Example() {
           selectValue={endSelectValue}
           onSelectChange={setEndSelectValue}
           options={[
-            {id: 'AliceBlue', color: '#F0F8FF'},
-            {id: 'AntiqueWhite', color: '#FAEBD7'},
-            {id: 'Aqua', color: '#00FFFF'},
+            { id: "AliceBlue", color: "#F0F8FF" },
+            { id: "AntiqueWhite", color: "#FAEBD7" },
+            { id: "Aqua", color: "#00FFFF" },
           ]}
           id="end-id"
         />
diff --git a/documentation-site/examples/input/with-tags.tsx b/documentation-site/examples/input/with-tags.tsx
index 695c71bf4c..441b2364d8 100644
--- a/documentation-site/examples/input/with-tags.tsx
+++ b/documentation-site/examples/input/with-tags.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Input, StyledInput} from 'baseui/input';
-import {Tag, VARIANT as TAG_VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Input, StyledInput } from "baseui/input";
+import { Tag, VARIANT as TAG_VARIANT } from "baseui/tag";
 
 const InputReplacement = React.forwardRef(
-  ({tags, removeTag, ...restProps}: any, ref) => {
+  ({ tags, removeTag, ...restProps }: any, ref) => {
     const [css] = useStyletron();
     return (
       <div
         className={css({
-          flex: '1 1 0%',
-          flexWrap: 'wrap',
-          display: 'flex',
-          alignItems: 'center',
+          flex: "1 1 0%",
+          flexWrap: "wrap",
+          display: "flex",
+          alignItems: "center",
         })}
       >
         {tags.map((tag: string, index: number) => (
@@ -31,23 +31,21 @@ const InputReplacement = React.forwardRef(
 );
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
-  const [tags, setTags] = React.useState(['hello']);
+  const [value, setValue] = React.useState("");
+  const [tags, setTags] = React.useState(["hello"]);
   const addTag = (tag: string) => {
     setTags([...tags, tag]);
   };
   const removeTag = (tag: string) => {
     setTags(tags.filter((t) => t !== tag));
   };
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-  ) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     switch (event.keyCode) {
       // Enter
       case 13: {
         if (!value) return;
         addTag(value);
-        setValue('');
+        setValue("");
         return;
       }
       // Backspace
@@ -60,12 +58,12 @@ export default function Example() {
   };
   return (
     <Input
-      placeholder={tags.length ? '' : 'Enter A Tag'}
+      placeholder={tags.length ? "" : "Enter A Tag"}
       value={value}
       onChange={(e) => setValue(e.currentTarget.value)}
       overrides={{
         Input: {
-          style: {width: 'auto', flexGrow: 1},
+          style: { width: "auto", flexGrow: 1 },
           component: InputReplacement,
           props: {
             tags: tags,
diff --git a/documentation-site/examples/internationalization/example.tsx b/documentation-site/examples/internationalization/example.tsx
index b139bdb05a..4434b21e73 100644
--- a/documentation-site/examples/internationalization/example.tsx
+++ b/documentation-site/examples/internationalization/example.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {LocaleProvider} from 'baseui';
-import {StatefulPagination} from 'baseui/pagination';
+import * as React from "react";
+import { LocaleProvider } from "baseui";
+import { StatefulPagination } from "baseui/pagination";
 
 const localeOverrideHu = {
   pagination: {
-    next: 'Következő',
-    prev: 'Előző',
-    preposition: ' ',
+    next: "Következő",
+    prev: "Előző",
+    preposition: " ",
   },
 };
 
diff --git a/documentation-site/examples/layer/basic.tsx b/documentation-site/examples/layer/basic.tsx
index 9ca5177a7b..f3a5fc3d22 100644
--- a/documentation-site/examples/layer/basic.tsx
+++ b/documentation-site/examples/layer/basic.tsx
@@ -1,25 +1,25 @@
 /* global document */
-import * as React from 'react';
-import {Layer} from 'baseui/layer';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Layer } from "baseui/layer";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
 
 function Wrapper(props: any) {
   const [css] = useStyletron();
-  const {offset, color, children, forwardedRef} = props;
+  const { offset, color, children, forwardedRef } = props;
   return (
     <div
       className={css({
-        position: 'fixed',
-        top: offset || '46%',
-        left: offset || '46%',
-        width: '200px',
-        paddingTop: '20px',
-        paddingBottom: '20px',
-        paddingLeft: '20px',
-        paddingRight: '20px',
+        position: "fixed",
+        top: offset || "46%",
+        left: offset || "46%",
+        width: "200px",
+        paddingTop: "20px",
+        paddingBottom: "20px",
+        paddingLeft: "20px",
+        paddingRight: "20px",
         backgroundColor: color,
-        textAlign: 'center',
+        textAlign: "center",
       })}
       ref={forwardedRef}
     >
@@ -32,29 +32,21 @@ export default function Example() {
   const [isSecondOpen, setIsSecondOpen] = React.useState(false);
   return (
     <React.Fragment>
-      <Button onClick={() => setIsFirstOpen(true)}>
-        Render Red Layer
-      </Button>
+      <Button onClick={() => setIsFirstOpen(true)}>Render Red Layer</Button>
       {isFirstOpen ? (
         <Layer>
           <Wrapper color="rgba(255, 190, 190, 0.86)">
-            <Button onClick={() => setIsFirstOpen(false)}>
-              Close
-            </Button>
+            <Button onClick={() => setIsFirstOpen(false)}>Close</Button>
           </Wrapper>
         </Layer>
       ) : null}
       <br />
       <br />
-      <Button onClick={() => setIsSecondOpen(true)}>
-        Render Orange Layer
-      </Button>
+      <Button onClick={() => setIsSecondOpen(true)}>Render Orange Layer</Button>
       {isSecondOpen ? (
         <Layer>
           <Wrapper color="rgba(255, 212, 135, 0.86)" offset="48%">
-            <Button onClick={() => setIsSecondOpen(false)}>
-              Close
-            </Button>
+            <Button onClick={() => setIsSecondOpen(false)}>Close</Button>
           </Wrapper>
         </Layer>
       ) : null}
diff --git a/documentation-site/examples/layout-grid/align.tsx b/documentation-site/examples/layout-grid/align.tsx
index 55fca2ec56..9dd9e536ed 100644
--- a/documentation-site/examples/layout-grid/align.tsx
+++ b/documentation-site/examples/layout-grid/align.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell, ALIGNMENT} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell, ALIGNMENT } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -20,7 +20,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -33,7 +33,7 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{h: number}> = ({
+const Inner: React.FunctionComponent<{ h: number }> = ({
   children,
   h = 25,
 }) => {
@@ -41,13 +41,13 @@ const Inner: React.FunctionComponent<{h: number}> = ({
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
-        height: h + 'px',
+        padding: ".25rem",
+        height: h + "px",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/basic.tsx b/documentation-site/examples/layout-grid/basic.tsx
index 0039b54ec1..0a361283e2 100644
--- a/documentation-site/examples/layout-grid/basic.tsx
+++ b/documentation-site/examples/layout-grid/basic.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -47,7 +47,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -60,17 +60,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/behavior.tsx b/documentation-site/examples/layout-grid/behavior.tsx
index 8305b5bb69..34b435a67d 100644
--- a/documentation-site/examples/layout-grid/behavior.tsx
+++ b/documentation-site/examples/layout-grid/behavior.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell, BEHAVIOR} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell, BEHAVIOR } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -14,7 +14,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -27,17 +27,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/compact.tsx b/documentation-site/examples/layout-grid/compact.tsx
index a79179459b..a8eefa089d 100644
--- a/documentation-site/examples/layout-grid/compact.tsx
+++ b/documentation-site/examples/layout-grid/compact.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell, STYLE} from 'baseui/layout-grid';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell, STYLE } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -47,7 +47,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -60,17 +60,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/custom.tsx b/documentation-site/examples/layout-grid/custom.tsx
index bd242286d5..50690e1c8a 100644
--- a/documentation-site/examples/layout-grid/custom.tsx
+++ b/documentation-site/examples/layout-grid/custom.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -53,7 +53,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -66,17 +66,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/hide.tsx b/documentation-site/examples/layout-grid/hide.tsx
index a985035e78..af6d8c4edc 100644
--- a/documentation-site/examples/layout-grid/hide.tsx
+++ b/documentation-site/examples/layout-grid/hide.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -23,7 +23,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -36,17 +36,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/order.tsx b/documentation-site/examples/layout-grid/order.tsx
index 6ef690ac56..25b0b4d113 100644
--- a/documentation-site/examples/layout-grid/order.tsx
+++ b/documentation-site/examples/layout-grid/order.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -20,7 +20,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -33,17 +33,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/overrides.tsx b/documentation-site/examples/layout-grid/overrides.tsx
index d5b53abca1..e645ef6b46 100644
--- a/documentation-site/examples/layout-grid/overrides.tsx
+++ b/documentation-site/examples/layout-grid/overrides.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -8,15 +8,15 @@ export default function Example() {
       <Grid
         overrides={{
           Grid: {
-            style: ({$theme}) => ({
-              borderLeftWidth: '1px',
-              borderRightWidth: '1px',
-              borderTopWidth: '1px',
-              borderBottomWidth: '1px',
-              borderLeftStyle: 'solid',
-              borderTopStyle: 'solid',
-              borderRightStyle: 'solid',
-              borderBottomStyle: 'solid',
+            style: ({ $theme }) => ({
+              borderLeftWidth: "1px",
+              borderRightWidth: "1px",
+              borderTopWidth: "1px",
+              borderBottomWidth: "1px",
+              borderLeftStyle: "solid",
+              borderTopStyle: "solid",
+              borderRightStyle: "solid",
+              borderBottomStyle: "solid",
               borderLeftColor: `${$theme.colors.positive400}`,
               borderTopColor: `${$theme.colors.positive400}`,
               borderRightColor: `${$theme.colors.positive400}`,
@@ -38,7 +38,7 @@ export default function Example() {
           span={[1, 2, 3]}
           overrides={{
             Cell: {
-              style: ({$theme}) => ({
+              style: ({ $theme }) => ({
                 outline: `solid 1px ${$theme.colors.negative400}`,
               }),
             },
@@ -51,7 +51,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -64,17 +64,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/responsive.tsx b/documentation-site/examples/layout-grid/responsive.tsx
index adc2cd49a8..660615fab1 100644
--- a/documentation-site/examples/layout-grid/responsive.tsx
+++ b/documentation-site/examples/layout-grid/responsive.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -23,7 +23,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -36,17 +36,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/skip-shrink.tsx b/documentation-site/examples/layout-grid/skip-shrink.tsx
index 25f0570fa1..239e5399d6 100644
--- a/documentation-site/examples/layout-grid/skip-shrink.tsx
+++ b/documentation-site/examples/layout-grid/skip-shrink.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -14,7 +14,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -27,17 +27,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/skip.tsx b/documentation-site/examples/layout-grid/skip.tsx
index ccd0f9a522..8808227f3a 100644
--- a/documentation-site/examples/layout-grid/skip.tsx
+++ b/documentation-site/examples/layout-grid/skip.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -17,7 +17,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -30,17 +30,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/span.tsx b/documentation-site/examples/layout-grid/span.tsx
index 3a90e7abb6..9d567534ea 100644
--- a/documentation-site/examples/layout-grid/span.tsx
+++ b/documentation-site/examples/layout-grid/span.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
@@ -23,7 +23,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -36,17 +36,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/layout-grid/unit.tsx b/documentation-site/examples/layout-grid/unit.tsx
index 59d93447c8..10b9a5d14c 100644
--- a/documentation-site/examples/layout-grid/unit.tsx
+++ b/documentation-site/examples/layout-grid/unit.tsx
@@ -1,15 +1,11 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Grid, Cell} from 'baseui/layout-grid';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Grid, Cell } from "baseui/layout-grid";
 
 export default function Example() {
   return (
     <Outer>
-      <Grid
-        gridUnit="rem"
-        gridGutters={[1, 2, 2]}
-        gridMargins={[1, 2, 4]}
-      >
+      <Grid gridUnit="rem" gridGutters={[1, 2, 2]} gridMargins={[1, 2, 4]}>
         <Cell>
           <Inner>1</Inner>
         </Cell>
@@ -51,7 +47,7 @@ export default function Example() {
   );
 }
 
-const Outer: React.FunctionComponent<{}> = ({children}) => {
+const Outer: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
@@ -64,17 +60,17 @@ const Outer: React.FunctionComponent<{}> = ({children}) => {
   );
 };
 
-const Inner: React.FunctionComponent<{}> = ({children}) => {
+const Inner: React.FunctionComponent<{}> = ({ children }) => {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         background: theme.colors.accent200,
         color: theme.colors.accent700,
-        padding: '.25rem',
+        padding: ".25rem",
       })}
     >
       {children}
diff --git a/documentation-site/examples/list/artwork-sizes.tsx b/documentation-site/examples/list/artwork-sizes.tsx
index 998b5c9174..e55a6f8907 100644
--- a/documentation-site/examples/list/artwork-sizes.tsx
+++ b/documentation-site/examples/list/artwork-sizes.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {Search} from 'baseui/icon';
-import {ListItem, ListItemLabel, ARTWORK_SIZES} from 'baseui/list';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { Search } from "baseui/icon";
+import { ListItem, ListItemLabel, ARTWORK_SIZES } from "baseui/list";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <ul
       className={css({
-        width: '375px',
+        width: "375px",
         paddingLeft: 0,
         paddingRight: 0,
       })}
@@ -21,34 +21,24 @@ export default function Example() {
       </ListItem>
 
       <ListItem artwork={Search}>
-        <ListItemLabel description="default">
-          Label Three
-        </ListItemLabel>
+        <ListItemLabel description="default">Label Three</ListItemLabel>
       </ListItem>
       <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.MEDIUM}>
-        <ListItemLabel description="medium">
-          Label Four
-        </ListItemLabel>
+        <ListItemLabel description="medium">Label Four</ListItemLabel>
       </ListItem>
 
       <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.LARGE}>
-        <ListItemLabel description="large">
-          Label Five
-        </ListItemLabel>
+        <ListItemLabel description="large">Label Five</ListItemLabel>
       </ListItem>
       <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.LARGE}>
         <ListItemLabel description="large">Label Six</ListItemLabel>
       </ListItem>
 
       <ListItem artwork={Search} artworkSize={48}>
-        <ListItemLabel description="48px">
-          Label Seven
-        </ListItemLabel>
+        <ListItemLabel description="48px">Label Seven</ListItemLabel>
       </ListItem>
       <ListItem artwork={Search} artworkSize={48}>
-        <ListItemLabel description="48px">
-          Label Eight
-        </ListItemLabel>
+        <ListItemLabel description="48px">Label Eight</ListItemLabel>
       </ListItem>
     </ul>
   );
diff --git a/documentation-site/examples/list/basic.tsx b/documentation-site/examples/list/basic.tsx
index 161dda921f..0130c34ef1 100644
--- a/documentation-site/examples/list/basic.tsx
+++ b/documentation-site/examples/list/basic.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {ListItem, ListItemLabel} from 'baseui/list';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { ListItem, ListItemLabel } from "baseui/list";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <ul
       className={css({
-        width: '375px',
+        width: "375px",
         paddingLeft: 0,
         paddingRight: 0,
       })}
@@ -19,14 +19,10 @@ export default function Example() {
         <ListItemLabel>Label Two</ListItemLabel>
       </ListItem>
       <ListItem>
-        <ListItemLabel description="description">
-          Label Three
-        </ListItemLabel>
+        <ListItemLabel description="description">Label Three</ListItemLabel>
       </ListItem>
       <ListItem>
-        <ListItemLabel description="description">
-          Label Four
-        </ListItemLabel>
+        <ListItemLabel description="description">Label Four</ListItemLabel>
       </ListItem>
     </ul>
   );
diff --git a/documentation-site/examples/list/enhancers.tsx b/documentation-site/examples/list/enhancers.tsx
index 1060d8ef1b..6fb3f7faf7 100644
--- a/documentation-site/examples/list/enhancers.tsx
+++ b/documentation-site/examples/list/enhancers.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {Check, ChevronRight} from 'baseui/icon';
-import {ListItem, ListItemLabel} from 'baseui/list';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { Check, ChevronRight } from "baseui/icon";
+import { ListItem, ListItemLabel } from "baseui/list";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <ul
       className={css({
-        width: '375px',
+        width: "375px",
         paddingLeft: 0,
         paddingRight: 0,
       })}
@@ -30,7 +30,7 @@ export default function Example() {
             <Button shape="round" size="compact" kind="secondary">
               <Check />
             </Button>
-            <div style={{width: '18px'}} />
+            <div style={{ width: "18px" }} />
             <Button shape="round" size="compact" kind="secondary">
               <Check />
             </Button>
@@ -44,9 +44,7 @@ export default function Example() {
         <ListItemLabel>Label</ListItemLabel>
       </ListItem>
 
-      <ListItem
-        endEnhancer={() => <ListItemLabel>Label</ListItemLabel>}
-      >
+      <ListItem endEnhancer={() => <ListItemLabel>Label</ListItemLabel>}>
         <ListItemLabel>Label</ListItemLabel>
       </ListItem>
     </ul>
diff --git a/documentation-site/examples/list/menu-adapter.tsx b/documentation-site/examples/list/menu-adapter.tsx
index b3da2c08c1..1d2f067095 100644
--- a/documentation-site/examples/list/menu-adapter.tsx
+++ b/documentation-site/examples/list/menu-adapter.tsx
@@ -1,16 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {ChevronRight, Search} from 'baseui/icon';
-import {StatefulMenu} from 'baseui/menu';
-import {
-  ListItemLabel,
-  MenuAdapter,
-  ARTWORK_SIZES,
-} from 'baseui/list';
+import { ChevronRight, Search } from "baseui/icon";
+import { StatefulMenu } from "baseui/menu";
+import { ListItemLabel, MenuAdapter, ARTWORK_SIZES } from "baseui/list";
 
-const ITEMS = Array.from({length: 10}, () => ({
-  title: 'Jane Smith',
-  subtitle: 'Senior Engineering Manager',
+const ITEMS = Array.from({ length: 10 }, () => ({
+  title: "Jane Smith",
+  subtitle: "Senior Engineering Manager",
   icon: Search,
 }));
 
@@ -18,12 +14,12 @@ export default function Example() {
   return (
     <StatefulMenu
       items={ITEMS}
-      onItemSelect={() => console.log('select')}
+      onItemSelect={() => console.log("select")}
       overrides={{
         List: {
           style: {
-            height: '300px',
-            width: '450px',
+            height: "300px",
+            width: "450px",
           },
         },
         Option: {
@@ -38,9 +34,7 @@ export default function Example() {
                     artworkSize={ARTWORK_SIZES.LARGE}
                     endEnhancer={() => <ChevronRight />}
                   >
-                    <ListItemLabel
-                      description={props.item.subtitle}
-                    >
+                    <ListItemLabel description={props.item.subtitle}>
                       {props.item.title}
                     </ListItemLabel>
                   </MenuAdapter>
diff --git a/documentation-site/examples/list/sublist.tsx b/documentation-site/examples/list/sublist.tsx
index dd8c999923..bb453e0ba3 100644
--- a/documentation-site/examples/list/sublist.tsx
+++ b/documentation-site/examples/list/sublist.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {ChevronRight, Search} from 'baseui/icon';
-import {ListItem, ListItemLabel, ARTWORK_SIZES} from 'baseui/list';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { ChevronRight, Search } from "baseui/icon";
+import { ListItem, ListItemLabel, ARTWORK_SIZES } from "baseui/list";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <ul
       className={css({
-        width: '375px',
+        width: "375px",
         paddingLeft: 0,
         paddingRight: 0,
       })}
@@ -20,11 +20,7 @@ export default function Example() {
         <ListItemLabel sublist>Label Two</ListItemLabel>
       </ListItem>
 
-      <ListItem
-        artwork={Search}
-        endEnhancer={() => <ChevronRight />}
-        sublist
-      >
+      <ListItem artwork={Search} endEnhancer={() => <ChevronRight />} sublist>
         <ListItemLabel sublist>Label Three</ListItemLabel>
       </ListItem>
       <ListItem
@@ -48,9 +44,7 @@ export default function Example() {
       <ListItem
         artwork={Search}
         artworkSize={ARTWORK_SIZES.LARGE}
-        endEnhancer={() => (
-          <ListItemLabel sublist>Label Six</ListItemLabel>
-        )}
+        endEnhancer={() => <ListItemLabel sublist>Label Six</ListItemLabel>}
         sublist
       >
         <ListItemLabel sublist>Label Six</ListItemLabel>
@@ -58,9 +52,7 @@ export default function Example() {
       <ListItem
         artwork={Search}
         artworkSize={ARTWORK_SIZES.LARGE}
-        endEnhancer={() => (
-          <ListItemLabel sublist>Label Seven</ListItemLabel>
-        )}
+        endEnhancer={() => <ListItemLabel sublist>Label Seven</ListItemLabel>}
         sublist
       >
         <ListItemLabel sublist>Label Seven</ListItemLabel>
@@ -68,9 +60,7 @@ export default function Example() {
       <ListItem
         artwork={Search}
         artworkSize={ARTWORK_SIZES.LARGE}
-        endEnhancer={() => (
-          <ListItemLabel sublist>Label Eight</ListItemLabel>
-        )}
+        endEnhancer={() => <ListItemLabel sublist>Label Eight</ListItemLabel>}
         sublist
       >
         <ListItemLabel sublist>Label Eight</ListItemLabel>
diff --git a/documentation-site/examples/list/tap-target.tsx b/documentation-site/examples/list/tap-target.tsx
index bc9767788b..508f24abdb 100644
--- a/documentation-site/examples/list/tap-target.tsx
+++ b/documentation-site/examples/list/tap-target.tsx
@@ -4,24 +4,22 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import * as React from 'react';
+import * as React from "react";
 
-import ChevronRight from 'baseui/icon/chevron-right';
-import Check from 'baseui/icon/check';
-import {ListItem, ListItemLabel, ARTWORK_SIZES} from 'baseui/list';
+import ChevronRight from "baseui/icon/chevron-right";
+import Check from "baseui/icon/check";
+import { ListItem, ListItemLabel, ARTWORK_SIZES } from "baseui/list";
 
 export default function Example() {
   return (
     <div>
       <ListItem
-        onClick={() => console.log('click')}
+        onClick={() => console.log("click")}
         artwork={Check}
         artworkSize={ARTWORK_SIZES.MEDIUM}
         endEnhancer={() => <ChevronRight />}
       >
-        <ListItemLabel description="description">
-          Label
-        </ListItemLabel>
+        <ListItemLabel description="description">Label</ListItemLabel>
       </ListItem>
     </div>
   );
diff --git a/documentation-site/examples/location-puck/consumer-confidence.tsx b/documentation-site/examples/location-puck/consumer-confidence.tsx
index 6c2dcae4a4..c9afabd06a 100644
--- a/documentation-site/examples/location-puck/consumer-confidence.tsx
+++ b/documentation-site/examples/location-puck/consumer-confidence.tsx
@@ -1,11 +1,8 @@
-import * as React from 'react';
-import {LocationPuck, LOCATION_PUCK_TYPES} from 'baseui/map-marker';
+import * as React from "react";
+import { LocationPuck, LOCATION_PUCK_TYPES } from "baseui/map-marker";
 
 export default function Example() {
   return (
-    <LocationPuck
-      type={LOCATION_PUCK_TYPES.consumer}
-      confidenceRadius={120}
-    />
+    <LocationPuck type={LOCATION_PUCK_TYPES.consumer} confidenceRadius={120} />
   );
 }
diff --git a/documentation-site/examples/location-puck/consumer-no-heading.tsx b/documentation-site/examples/location-puck/consumer-no-heading.tsx
index 978006b432..a0723829cf 100644
--- a/documentation-site/examples/location-puck/consumer-no-heading.tsx
+++ b/documentation-site/examples/location-puck/consumer-no-heading.tsx
@@ -1,11 +1,8 @@
-import * as React from 'react';
-import {LocationPuck, LOCATION_PUCK_TYPES} from 'baseui/map-marker';
+import * as React from "react";
+import { LocationPuck, LOCATION_PUCK_TYPES } from "baseui/map-marker";
 
 export default function Example() {
   return (
-    <LocationPuck
-      type={LOCATION_PUCK_TYPES.consumer}
-      showHeading={false}
-    />
+    <LocationPuck type={LOCATION_PUCK_TYPES.consumer} showHeading={false} />
   );
 }
diff --git a/documentation-site/examples/location-puck/consumer.tsx b/documentation-site/examples/location-puck/consumer.tsx
index e875e44f78..406776d145 100644
--- a/documentation-site/examples/location-puck/consumer.tsx
+++ b/documentation-site/examples/location-puck/consumer.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {LocationPuck, LOCATION_PUCK_TYPES} from 'baseui/map-marker';
+import * as React from "react";
+import { LocationPuck, LOCATION_PUCK_TYPES } from "baseui/map-marker";
 
 export default function Example() {
   return <LocationPuck type={LOCATION_PUCK_TYPES.consumer} />;
diff --git a/documentation-site/examples/location-puck/earner.tsx b/documentation-site/examples/location-puck/earner.tsx
index 0ae6642dfd..08c4a67c28 100644
--- a/documentation-site/examples/location-puck/earner.tsx
+++ b/documentation-site/examples/location-puck/earner.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {LocationPuck, LOCATION_PUCK_TYPES} from 'baseui/map-marker';
+import * as React from "react";
+import { LocationPuck, LOCATION_PUCK_TYPES } from "baseui/map-marker";
 
 export default function Example() {
   return <LocationPuck type={LOCATION_PUCK_TYPES.earner} />;
diff --git a/documentation-site/examples/location-puck/react-map-gl.tsx b/documentation-site/examples/location-puck/react-map-gl.tsx
index 526e9a3747..f5946c1f2c 100644
--- a/documentation-site/examples/location-puck/react-map-gl.tsx
+++ b/documentation-site/examples/location-puck/react-map-gl.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {LocationPuck} from 'baseui/map-marker';
-import ReactMapGL, {Marker} from 'react-map-gl';
+import * as React from "react";
+import { LocationPuck } from "baseui/map-marker";
+import ReactMapGL, { Marker } from "react-map-gl";
 
 const userLocation = {
   latitude: 37.768495131168336,
@@ -21,9 +21,7 @@ export default function Example() {
       {...viewport}
       width="100%"
       height="500px"
-      onViewportChange={(viewport: Viewport) =>
-        setViewport(viewport)
-      }
+      onViewportChange={(viewport: Viewport) => setViewport(viewport)}
       mapboxApiAccessToken="pk.eyJ1IjoiYmFiYnN1YmVyIiwiYSI6ImNrdThqeGkxZTVwb3kyd3BpZGRlc2NlOXUifQ.qh-EtXm2DJQZVprWUJ-GFQ"
     >
       <Marker {...userLocation}>
diff --git a/documentation-site/examples/menu/basic.tsx b/documentation-site/examples/menu/basic.tsx
index db87d0b92c..85653c4ec1 100644
--- a/documentation-site/examples/menu/basic.tsx
+++ b/documentation-site/examples/menu/basic.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu } from "baseui/menu";
 
 const ITEMS = [
-  {label: 'Item One'},
-  {label: 'Item Two'},
-  {label: 'Item Three', disabled: true},
-  {label: 'Item Four', disabled: true},
-  {label: 'Item Five'},
-  {label: 'Item Six'},
-  {label: 'Item Seven'},
-  {label: 'Item Eight'},
-  {label: 'Item Nine'},
-  {label: 'Item Ten'},
-  {label: 'Item Eleven'},
-  {label: 'Item Twelve'},
+  { label: "Item One" },
+  { label: "Item Two" },
+  { label: "Item Three", disabled: true },
+  { label: "Item Four", disabled: true },
+  { label: "Item Five" },
+  { label: "Item Six" },
+  { label: "Item Seven" },
+  { label: "Item Eight" },
+  { label: "Item Nine" },
+  { label: "Item Ten" },
+  { label: "Item Eleven" },
+  { label: "Item Twelve" },
 ];
 
 export default function Example() {
@@ -24,13 +24,13 @@ export default function Example() {
       overrides={{
         List: {
           style: {
-            height: '250px',
-            width: '350px',
+            height: "250px",
+            width: "350px",
           },
         },
         Option: {
           props: {
-            getItemLabel: (item: {label: string}) => item.label,
+            getItemLabel: (item: { label: string }) => item.label,
           },
         },
       }}
diff --git a/documentation-site/examples/menu/child-render-all.tsx b/documentation-site/examples/menu/child-render-all.tsx
index 7ff813b01d..1c676c17ea 100644
--- a/documentation-site/examples/menu/child-render-all.tsx
+++ b/documentation-site/examples/menu/child-render-all.tsx
@@ -1,32 +1,32 @@
-import * as React from 'react';
-import {StatefulMenu, NestedMenus} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu, NestedMenus } from "baseui/menu";
 
-const SSR = 'Rendered ->';
-const SERVER = 'Server ->';
+const SSR = "Rendered ->";
+const SERVER = "Server ->";
 const FILE = [
-  {label: SERVER},
-  {label: 'Side'},
-  {label: 'Up'},
-  {label: SSR},
+  { label: SERVER },
+  { label: "Side" },
+  { label: "Up" },
+  { label: SSR },
 ];
 
 const SERVER_SUB_MENU = [
-  {label: 'DKR130'},
-  {label: 'GKE135'},
-  {label: 'FPF009'},
-  {label: 'GKP399'},
-  {label: 'GPO123'},
-  {label: 'KKC453'},
-  {label: 'ZPS118'},
+  { label: "DKR130" },
+  { label: "GKE135" },
+  { label: "FPF009" },
+  { label: "GKP399" },
+  { label: "GPO123" },
+  { label: "KKC453" },
+  { label: "ZPS118" },
 ];
 
 const SSR_SUB_MENU = [
-  {label: 'Rendered'},
-  {label: 'SSR'},
-  {label: '(check source!)'},
-  {label: 'And'},
-  {label: 'When'},
-  {label: 'Closed'},
+  { label: "Rendered" },
+  { label: "SSR" },
+  { label: "(check source!)" },
+  { label: "And" },
+  { label: "When" },
+  { label: "Closed" },
 ];
 
 export default function Example() {
@@ -36,11 +36,11 @@ export default function Example() {
         items={FILE}
         renderAll
         overrides={{
-          List: {style: {width: '350px', overflow: 'auto'}},
+          List: { style: { width: "350px", overflow: "auto" } },
           Option: {
             props: {
-              size: 'compact',
-              getChildMenu: (item: {label: string}) => {
+              size: "compact",
+              getChildMenu: (item: { label: string }) => {
                 if (item.label === SSR) {
                   return (
                     <StatefulMenu
@@ -48,8 +48,8 @@ export default function Example() {
                       size="compact"
                       items={SSR_SUB_MENU}
                       overrides={{
-                        List: {style: {width: '200px'}},
-                        Option: {props: {size: 'compact'}},
+                        List: { style: { width: "200px" } },
+                        Option: { props: { size: "compact" } },
                       }}
                     />
                   );
@@ -61,8 +61,8 @@ export default function Example() {
                       size="compact"
                       items={SERVER_SUB_MENU}
                       overrides={{
-                        List: {style: {width: '200px'}},
-                        Option: {props: {size: 'compact'}},
+                        List: { style: { width: "200px" } },
+                        Option: { props: { size: "compact" } },
                       }}
                     />
                   );
diff --git a/documentation-site/examples/menu/child.tsx b/documentation-site/examples/menu/child.tsx
index 1a8eec9625..34933256d1 100644
--- a/documentation-site/examples/menu/child.tsx
+++ b/documentation-site/examples/menu/child.tsx
@@ -1,37 +1,37 @@
-import * as React from 'react';
-import {StatefulMenu, NestedMenus} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu, NestedMenus } from "baseui/menu";
 
-const OPEN_RECENT = 'Open Recent ->';
-const NEW_BREAKPOINT = 'New Breakpoint ->';
+const OPEN_RECENT = "Open Recent ->";
+const NEW_BREAKPOINT = "New Breakpoint ->";
 const FILE = [
-  {label: 'New File'},
-  {label: 'New Window'},
-  {label: 'Open...'},
-  {label: 'Open Workspace...'},
-  {label: OPEN_RECENT},
-  {label: 'Add Folder to Workspace...'},
-  {label: 'Save'},
-  {label: 'Save As...'},
-  {label: 'Toggle Breakpoint'},
-  {label: NEW_BREAKPOINT},
-  {label: 'Close Folder'},
-  {label: 'Close Window'},
+  { label: "New File" },
+  { label: "New Window" },
+  { label: "Open..." },
+  { label: "Open Workspace..." },
+  { label: OPEN_RECENT },
+  { label: "Add Folder to Workspace..." },
+  { label: "Save" },
+  { label: "Save As..." },
+  { label: "Toggle Breakpoint" },
+  { label: NEW_BREAKPOINT },
+  { label: "Close Folder" },
+  { label: "Close Window" },
 ];
 
 const RECENT_FILES = [
-  {label: 'Reopen Closed Editor'},
-  {label: '~/workspace/baseui'},
-  {label: '~/workspace/styletron'},
-  {label: '~/workspace/my-project'},
-  {label: 'More...'},
-  {label: 'Clear Recently Opened'},
+  { label: "Reopen Closed Editor" },
+  { label: "~/workspace/baseui" },
+  { label: "~/workspace/styletron" },
+  { label: "~/workspace/my-project" },
+  { label: "More..." },
+  { label: "Clear Recently Opened" },
 ];
 
 const BREAKPOINTS = [
-  {label: 'Conditional Breakpoint...'},
-  {label: 'Inline Breakpoint'},
-  {label: 'Function Breakpoint...'},
-  {label: 'Logpoint...'},
+  { label: "Conditional Breakpoint..." },
+  { label: "Inline Breakpoint" },
+  { label: "Function Breakpoint..." },
+  { label: "Logpoint..." },
 ];
 
 export default function Example() {
@@ -40,19 +40,19 @@ export default function Example() {
       <StatefulMenu
         items={FILE}
         overrides={{
-          List: {style: {width: '350px', overflow: 'auto'}},
+          List: { style: { width: "350px", overflow: "auto" } },
           Option: {
             props: {
-              size: 'compact',
-              getChildMenu: (item: {label: string}) => {
+              size: "compact",
+              getChildMenu: (item: { label: string }) => {
                 if (item.label === OPEN_RECENT) {
                   return (
                     // todo: removed size="compact"
                     <StatefulMenu
                       items={RECENT_FILES}
                       overrides={{
-                        List: {style: {width: '200px'}},
-                        Option: {props: {size: 'compact'}},
+                        List: { style: { width: "200px" } },
+                        Option: { props: { size: "compact" } },
                       }}
                     />
                   );
@@ -63,8 +63,8 @@ export default function Example() {
                     <StatefulMenu
                       items={BREAKPOINTS}
                       overrides={{
-                        List: {style: {width: '220px'}},
-                        Option: {props: {size: 'compact'}},
+                        List: { style: { width: "220px" } },
+                        Option: { props: { size: "compact" } },
                       }}
                     />
                   );
diff --git a/documentation-site/examples/menu/compact.tsx b/documentation-site/examples/menu/compact.tsx
index 6590cb2d8e..ea35d71377 100644
--- a/documentation-site/examples/menu/compact.tsx
+++ b/documentation-site/examples/menu/compact.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu } from "baseui/menu";
 
 const ITEMS = [
-  {label: 'Item One'},
-  {label: 'Item Two'},
-  {label: 'Item Three'},
-  {label: 'Item Four'},
-  {label: 'Item Five'},
-  {label: 'Item Six'},
-  {label: 'Item Seven'},
-  {label: 'Item Eight'},
-  {label: 'Item Nine'},
-  {label: 'Item Ten'},
-  {label: 'Item Eleven'},
-  {label: 'Item Twelve'},
+  { label: "Item One" },
+  { label: "Item Two" },
+  { label: "Item Three" },
+  { label: "Item Four" },
+  { label: "Item Five" },
+  { label: "Item Six" },
+  { label: "Item Seven" },
+  { label: "Item Eight" },
+  { label: "Item Nine" },
+  { label: "Item Ten" },
+  { label: "Item Eleven" },
+  { label: "Item Twelve" },
 ];
 
 export default function Example() {
@@ -23,13 +23,13 @@ export default function Example() {
       overrides={{
         List: {
           style: {
-            width: '500px',
+            width: "500px",
           },
         },
         Option: {
           props: {
-            getItemLabel: (item: {label: string}) => item.label,
-            size: 'compact',
+            getItemLabel: (item: { label: string }) => item.label,
+            size: "compact",
           },
         },
       }}
diff --git a/documentation-site/examples/menu/dividers.tsx b/documentation-site/examples/menu/dividers.tsx
index de19968608..bbe4ce8489 100644
--- a/documentation-site/examples/menu/dividers.tsx
+++ b/documentation-site/examples/menu/dividers.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu } from "baseui/menu";
 
 const ITEMS = [
-  {label: 'Menu option A'},
-  {label: 'Menu option B'},
-  {divider: true},
-  {label: 'Menu option X'},
-  {label: 'Menu option Y'},
-  {label: 'Menu option Z'},
-  {divider: true},
-  {label: 'Menu option 1'},
-  {label: 'Menu option 2'},
-  {label: 'Menu option 3'},
+  { label: "Menu option A" },
+  { label: "Menu option B" },
+  { divider: true },
+  { label: "Menu option X" },
+  { label: "Menu option Y" },
+  { label: "Menu option Z" },
+  { divider: true },
+  { label: "Menu option 1" },
+  { label: "Menu option 2" },
+  { label: "Menu option 3" },
 ];
 
 export default function Example() {
@@ -22,13 +22,13 @@ export default function Example() {
       overrides={{
         List: {
           style: {
-            height: '250px',
-            width: '350px',
+            height: "250px",
+            width: "350px",
           },
         },
         Option: {
           props: {
-            getItemLabel: (item: {label: string}) => item.label,
+            getItemLabel: (item: { label: string }) => item.label,
           },
         },
       }}
diff --git a/documentation-site/examples/menu/grouped.tsx b/documentation-site/examples/menu/grouped.tsx
index 5171367e2a..a46d3ef043 100644
--- a/documentation-site/examples/menu/grouped.tsx
+++ b/documentation-site/examples/menu/grouped.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {StatefulMenu} from 'baseui/menu';
+import { StatefulMenu } from "baseui/menu";
 
 const ITEMS = {
-  __ungrouped: [{id: 'Black', color: '#000000'}],
+  __ungrouped: [{ id: "Black", color: "#000000" }],
   Blueish: [
-    {id: 'AliceBlue', color: '#F0F8FF'},
-    {id: 'Aqua', color: '#00FFFF'},
-    {id: 'Aquamarine', color: '#7FFFD4'},
+    { id: "AliceBlue", color: "#F0F8FF" },
+    { id: "Aqua", color: "#00FFFF" },
+    { id: "Aquamarine", color: "#7FFFD4" },
   ],
   Whiteish: [
-    {id: 'AntiqueWhite', color: '#FAEBD7'},
-    {id: 'Azure', color: '#F0FFFF'},
-    {id: 'Beige', color: '#F5F5DC'},
+    { id: "AntiqueWhite", color: "#FAEBD7" },
+    { id: "Azure", color: "#F0FFFF" },
+    { id: "Beige", color: "#F5F5DC" },
   ],
 };
 
@@ -20,11 +20,11 @@ export default function Example() {
   return (
     <StatefulMenu
       items={ITEMS}
-      onItemSelect={({item}) => console.log(item)}
+      onItemSelect={({ item }) => console.log(item)}
       overrides={{
         List: {
           style: {
-            width: '200px',
+            width: "200px",
           },
         },
         Option: {
diff --git a/documentation-site/examples/menu/href.tsx b/documentation-site/examples/menu/href.tsx
index 53862a0c60..b8860d2399 100644
--- a/documentation-site/examples/menu/href.tsx
+++ b/documentation-site/examples/menu/href.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {StatefulMenu} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu } from "baseui/menu";
 
 export default function Example() {
   return (
     <StatefulMenu
       items={[
-        {label: 'Apple', href: '//www.example.com/apple'},
-        {label: 'Orange', href: '//www.example.com/orange'},
-        {label: 'Strawberry', href: '//www.example.com/strawberry'},
+        { label: "Apple", href: "//www.example.com/apple" },
+        { label: "Orange", href: "//www.example.com/orange" },
+        { label: "Strawberry", href: "//www.example.com/strawberry" },
       ]}
     />
   );
diff --git a/documentation-site/examples/menu/profile.tsx b/documentation-site/examples/menu/profile.tsx
index dab6d4e6fe..0f327fab48 100644
--- a/documentation-site/examples/menu/profile.tsx
+++ b/documentation-site/examples/menu/profile.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulMenu, OptionProfile} from 'baseui/menu';
+import * as React from "react";
+import { StatefulMenu, OptionProfile } from "baseui/menu";
 
 interface IItem {
   title: string;
@@ -8,11 +8,11 @@ interface IItem {
   imgUrl: string;
 }
 
-const ITEMS = Array.from({length: 4}, () => ({
-  title: 'David Smith',
-  subtitle: 'Senior Engineering Manager',
-  body: 'Uber Everything',
-  imgUrl: 'https://via.placeholder.com/60x60',
+const ITEMS = Array.from({ length: 4 }, () => ({
+  title: "David Smith",
+  subtitle: "Senior Engineering Manager",
+  body: "Uber Everything",
+  imgUrl: "https://via.placeholder.com/60x60",
 }));
 
 export default function Example() {
@@ -22,17 +22,13 @@ export default function Example() {
       overrides={{
         List: {
           style: {
-            width: '350px',
+            width: "350px",
           },
         },
         Option: {
           component: OptionProfile,
           props: {
-            getProfileItemLabels: ({
-              title,
-              subtitle,
-              body,
-            }: IItem) => ({
+            getProfileItemLabels: ({ title, subtitle, body }: IItem) => ({
               title,
               subtitle,
               body,
diff --git a/documentation-site/examples/menu/stateless.tsx b/documentation-site/examples/menu/stateless.tsx
index c62e019d79..6a7755a35a 100644
--- a/documentation-site/examples/menu/stateless.tsx
+++ b/documentation-site/examples/menu/stateless.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react';
-import {Menu} from 'baseui/menu';
+import * as React from "react";
+import { Menu } from "baseui/menu";
 
 const ITEMS = [
-  {label: 'Item One'},
-  {label: 'Item Two'},
-  {label: 'Item Three'},
-  {label: 'Item Four'},
-  {label: 'Item Five'},
-  {label: 'Item Six'},
-  {label: 'Item Seven'},
-  {label: 'Item Eight'},
-  {label: 'Item Nine'},
-  {label: 'Item Ten'},
-  {label: 'Item Eleven'},
-  {label: 'Item Twelve'},
+  { label: "Item One" },
+  { label: "Item Two" },
+  { label: "Item Three" },
+  { label: "Item Four" },
+  { label: "Item Five" },
+  { label: "Item Six" },
+  { label: "Item Seven" },
+  { label: "Item Eight" },
+  { label: "Item Nine" },
+  { label: "Item Ten" },
+  { label: "Item Eleven" },
+  { label: "Item Twelve" },
 ];
 
 export default function Example() {
@@ -24,12 +24,12 @@ export default function Example() {
       overrides={{
         List: {
           style: {
-            width: '200px',
+            width: "200px",
           },
         },
         Option: {
           props: {
-            getItemLabel: (item: {label: string}) => item.label,
+            getItemLabel: (item: { label: string }) => item.label,
           },
         },
       }}
diff --git a/documentation-site/examples/menu/virtual-list.tsx b/documentation-site/examples/menu/virtual-list.tsx
index 4a5a811532..f36f125e16 100644
--- a/documentation-site/examples/menu/virtual-list.tsx
+++ b/documentation-site/examples/menu/virtual-list.tsx
@@ -1,26 +1,26 @@
-import React from 'react';
-import {withStyle} from 'baseui';
-import {StatefulMenu, OptionList, StyledList} from 'baseui/menu';
-import {List, AutoSizer} from 'react-virtualized';
+import React from "react";
+import { withStyle } from "baseui";
+import { StatefulMenu, OptionList, StyledList } from "baseui/menu";
+import { List, AutoSizer } from "react-virtualized";
 
-const ITEMS = Array.from({length: 1500}, (_, index) => ({
+const ITEMS = Array.from({ length: 1500 }, (_, index) => ({
   label: `item number: ${index + 1}`,
 }));
 
-const Container = withStyle(StyledList, {height: '500px'});
+const Container = withStyle(StyledList, { height: "500px" });
 
 const VirtualList = React.forwardRef((props: any, ref) => {
   const children = React.Children.toArray(props.children);
   return (
     <Container {...props} ref={ref}>
       <AutoSizer>
-        {({width}) => (
+        {({ width }) => (
           <List
             role={props.role}
             height={500}
             rowCount={props.children.length}
             rowHeight={36}
-            rowRenderer={({index, key, style}) => (
+            rowRenderer={({ index, key, style }) => (
               <OptionList
                 key={key}
                 style={style}
@@ -30,8 +30,8 @@ const VirtualList = React.forwardRef((props: any, ref) => {
                     style: {
                       paddingTop: 0,
                       paddingBottom: 0,
-                      display: 'flex',
-                      alignItems: 'center',
+                      display: "flex",
+                      alignItems: "center",
                     },
                   },
                 }}
@@ -49,7 +49,7 @@ export default function Example() {
   return (
     <StatefulMenu
       items={ITEMS}
-      overrides={{List: {component: VirtualList}}}
+      overrides={{ List: { component: VirtualList } }}
     />
   );
 }
diff --git a/documentation-site/examples/message-card/color.tsx b/documentation-site/examples/message-card/color.tsx
index c62f54824b..e33c7a8584 100644
--- a/documentation-site/examples/message-card/color.tsx
+++ b/documentation-site/examples/message-card/color.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {MessageCard, BUTTON_KIND} from 'baseui/message-card';
-import valley from './images/valley.jpg';
-import moto from './images/moto.jpg';
-import dinner from './images/dinner.jpg';
-import train from './images/train.jpg';
-import {colors} from 'baseui/tokens';
+import * as React from "react";
+import { MessageCard, BUTTON_KIND } from "baseui/message-card";
+import valley from "./images/valley.jpg";
+import moto from "./images/moto.jpg";
+import dinner from "./images/dinner.jpg";
+import train from "./images/train.jpg";
+import { colors } from "baseui/tokens";
 
 export default function Example() {
   return (
@@ -13,51 +13,50 @@ export default function Example() {
         heading="Looking for adventure?"
         paragraph="Pellentesque velit purus, luctus non lorem in, rutrum ultricies quam."
         buttonLabel="Take me there"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: valley,
-          ariaLabel:
-            'A woman hiking through a valley with a yellow backpack',
+          ariaLabel: "A woman hiking through a valley with a yellow backpack",
         }}
         backgroundColor={colors.teal200}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Get there fast"
         paragraph="Vivamus lobortis vestibulum bibendum. Duis malesuada ante purus, sit amet auctor felis commodo sed."
         buttonLabel="Go!"
         buttonKind={BUTTON_KIND.tertiary}
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: moto,
           ariaLabel:
-            'Driving a motorcycle with a delivery container on the back',
+            "Driving a motorcycle with a delivery container on the back",
         }}
         backgroundColor={colors.purple600}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Hidden gems"
         paragraph="Vivamus lobortis vestibulum bibendum. Duis malesuada ante purus, sit amet auctor felis commodo sed."
         buttonLabel="Learn more"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: train,
           ariaLabel:
-            'A train moving across an arched bridge through a green countryside',
+            "A train moving across an arched bridge through a green countryside",
         }}
         backgroundColor={colors.white}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Get 20% off your next order"
         paragraph="In tempus lorem ac nisl fringilla gravida."
         buttonLabel="Save now"
         buttonKind={BUTTON_KIND.tertiary}
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: dinner,
-          ariaLabel: 'A table with freshly prepared food',
+          ariaLabel: "A table with freshly prepared food",
         }}
         backgroundColor={colors.brown500}
       />
diff --git a/documentation-site/examples/message-card/custom-color.tsx b/documentation-site/examples/message-card/custom-color.tsx
index 7c1056076e..d265b9473e 100644
--- a/documentation-site/examples/message-card/custom-color.tsx
+++ b/documentation-site/examples/message-card/custom-color.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   MessageCard,
   IMAGE_LAYOUT,
   BACKGROUND_COLOR_TYPE,
-} from 'baseui/message-card';
-import hamburger from './images/hamburger.jpg';
+} from "baseui/message-card";
+import hamburger from "./images/hamburger.jpg";
 
 export default function Example() {
   return (
@@ -12,12 +12,11 @@ export default function Example() {
       heading="Your favorites, fast"
       paragraph="Quisque sodales tempor metus."
       buttonLabel="Order"
-      onClick={() => alert('Clicked 🙂')}
+      onClick={() => alert("Clicked 🙂")}
       image={{
         src: hamburger,
         layout: IMAGE_LAYOUT.trailing,
-        ariaLabel:
-          'A deconstructed hamburger being literally thrown together',
+        ariaLabel: "A deconstructed hamburger being literally thrown together",
       }}
       backgroundColor="#101010"
       backgroundColorType={BACKGROUND_COLOR_TYPE.dark}
diff --git a/documentation-site/examples/message-card/layout.tsx b/documentation-site/examples/message-card/layout.tsx
index 8ae29f3eb3..f3d499c5ac 100644
--- a/documentation-site/examples/message-card/layout.tsx
+++ b/documentation-site/examples/message-card/layout.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {MessageCard, IMAGE_LAYOUT} from 'baseui/message-card';
-import venice from './images/venice.jpg';
-import planet from './images/planet.jpg';
-import {colors} from 'baseui/tokens';
+import * as React from "react";
+import { MessageCard, IMAGE_LAYOUT } from "baseui/message-card";
+import venice from "./images/venice.jpg";
+import planet from "./images/planet.jpg";
+import { colors } from "baseui/tokens";
 
 export default function Example() {
   return (
@@ -11,24 +11,24 @@ export default function Example() {
         heading="Looking for adventure?"
         paragraph="Nam vitae maximus nibh."
         buttonLabel="Take me there"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: venice,
           layout: IMAGE_LAYOUT.trailing,
-          ariaLabel: 'Cruising down a Venetian canal in a gondola',
+          ariaLabel: "Cruising down a Venetian canal in a gondola",
         }}
         backgroundColor={colors.purple300}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Looking for adventure?"
         paragraph="Nam vitae maximus nibh, ac hendrerit lectus."
         buttonLabel="Learn more"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: planet,
           layout: IMAGE_LAYOUT.trailing,
-          ariaLabel: 'A surreal digitally illustrated planet',
+          ariaLabel: "A surreal digitally illustrated planet",
         }}
       />
     </div>
diff --git a/documentation-site/examples/message-card/positioning.tsx b/documentation-site/examples/message-card/positioning.tsx
index 7aa9f09c8a..9355e5a96a 100644
--- a/documentation-site/examples/message-card/positioning.tsx
+++ b/documentation-site/examples/message-card/positioning.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {MessageCard, IMAGE_LAYOUT} from 'baseui/message-card';
-import valley from './images/valley.jpg';
-import dinner from './images/dinner.jpg';
-import {colors} from 'baseui/tokens';
+import * as React from "react";
+import { MessageCard, IMAGE_LAYOUT } from "baseui/message-card";
+import valley from "./images/valley.jpg";
+import dinner from "./images/dinner.jpg";
+import { colors } from "baseui/tokens";
 
 export default function Example() {
   return (
@@ -10,52 +10,50 @@ export default function Example() {
       <MessageCard
         paragraph="Pellentesque velit purus, luctus non lorem in, rutrum ultricies quam."
         buttonLabel="Explore"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: valley,
-          backgroundPosition: '50% 65%',
-          ariaLabel:
-            'A woman hiking through a valley with a yellow backpack',
+          backgroundPosition: "50% 65%",
+          ariaLabel: "A woman hiking through a valley with a yellow backpack",
         }}
         backgroundColor={colors.teal200}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         paragraph="Pellentesque velit purus, luctus non lorem in, rutrum ultricies quam."
         buttonLabel="Explore"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: valley,
-          backgroundPosition: 'bottom',
-          ariaLabel:
-            'A woman hiking through a valley with a yellow backpack',
+          backgroundPosition: "bottom",
+          ariaLabel: "A woman hiking through a valley with a yellow backpack",
         }}
         backgroundColor={colors.teal200}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Fast, fresh, delicious"
         paragraph="Nam vitae maximus nibh, ac hendrerit lectus."
         buttonLabel="Order now"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: dinner,
-          backgroundPosition: 'left center',
+          backgroundPosition: "left center",
           layout: IMAGE_LAYOUT.trailing,
-          ariaLabel: 'A table with freshly prepared food',
+          ariaLabel: "A table with freshly prepared food",
         }}
-        overrides={{Root: {style: {marginBottom: '30px'}}}}
+        overrides={{ Root: { style: { marginBottom: "30px" } } }}
       />
       <MessageCard
         heading="Fast, fresh, delicious"
         paragraph="Nam vitae maximus nibh, ac hendrerit lectus."
         buttonLabel="Order now"
-        onClick={() => alert('Clicked 🙂')}
+        onClick={() => alert("Clicked 🙂")}
         image={{
           src: dinner,
-          backgroundPosition: 'center right',
+          backgroundPosition: "center right",
           layout: IMAGE_LAYOUT.trailing,
-          ariaLabel: 'A table with freshly prepared food',
+          ariaLabel: "A table with freshly prepared food",
         }}
       />
     </div>
diff --git a/documentation-site/examples/mobile-header/floating.tsx b/documentation-site/examples/mobile-header/floating.tsx
index a89f0c94aa..38669c2577 100644
--- a/documentation-site/examples/mobile-header/floating.tsx
+++ b/documentation-site/examples/mobile-header/floating.tsx
@@ -1,61 +1,61 @@
-import * as React from 'react';
-import {MobileHeader, TYPE} from 'baseui/mobile-header';
-import ArrowLeft from 'baseui/icon/arrow-left';
+import * as React from "react";
+import { MobileHeader, TYPE } from "baseui/mobile-header";
+import ArrowLeft from "baseui/icon/arrow-left";
 
-import Plus from 'baseui/icon/plus';
-import Check from 'baseui/icon/check';
-import map from './images/map-san-francisco.jpg';
-import {useStyletron} from 'baseui';
+import Plus from "baseui/icon/plus";
+import Check from "baseui/icon/check";
+import map from "./images/map-san-francisco.jpg";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
     <div
       className={css({
-        width: '375px',
-        height: '667px',
-        border: '1px solid #ECECEC',
-        borderRadius: '12px',
-        overflow: 'auto',
-        position: 'relative',
+        width: "375px",
+        height: "667px",
+        border: "1px solid #ECECEC",
+        borderRadius: "12px",
+        overflow: "auto",
+        position: "relative",
       })}
     >
       <div
         className={css({
-          width: '100%',
-          position: 'absolute',
-          pointerEvents: 'none',
+          width: "100%",
+          position: "absolute",
+          pointerEvents: "none",
         })}
       >
         <MobileHeader
           type={TYPE.floating}
           navButton={{
-            renderIcon: ({size}) => <ArrowLeft size={size} />,
-            onClick: () => console.log('Nav Button Click'),
-            label: 'Go back',
+            renderIcon: ({ size }) => <ArrowLeft size={size} />,
+            onClick: () => console.log("Nav Button Click"),
+            label: "Go back",
           }}
           actionButtons={[
             {
-              renderIcon: ({size}) => <Check size={size} />,
-              onClick: () => console.log('Check Button Click'),
-              label: 'Confirm entries',
+              renderIcon: ({ size }) => <Check size={size} />,
+              onClick: () => console.log("Check Button Click"),
+              label: "Confirm entries",
             },
             {
-              renderIcon: ({size}) => <Plus size={size} />,
-              onClick: () => console.log('Plus Button Click'),
-              label: 'Add a new entry',
+              renderIcon: ({ size }) => <Plus size={size} />,
+              onClick: () => console.log("Plus Button Click"),
+              label: "Add a new entry",
             },
           ]}
         />
       </div>
       <div
-        style={{height: '100%', width: '100%', overflowY: 'auto'}}
+        style={{ height: "100%", width: "100%", overflowY: "auto" }}
         tabIndex={0}
       >
         <img
           style={{
-            width: '100%',
-            height: 'auto',
+            width: "100%",
+            height: "auto",
           }}
           src={map.src}
           alt="SF map"
diff --git a/documentation-site/examples/mobile-header/text-content.tsx b/documentation-site/examples/mobile-header/text-content.tsx
index 230e59360a..c4e7948296 100644
--- a/documentation-site/examples/mobile-header/text-content.tsx
+++ b/documentation-site/examples/mobile-header/text-content.tsx
@@ -1,97 +1,89 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {MobileHeader} from 'baseui/mobile-header';
-import {Button} from 'baseui/button';
-import {useStyletron} from 'baseui';
+import { MobileHeader } from "baseui/mobile-header";
+import { Button } from "baseui/button";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [expanded, setExpanded] = React.useState(true);
   const [css] = useStyletron();
   return (
     <div>
-      <div style={{marginBottom: '20px'}}>
+      <div style={{ marginBottom: "20px" }}>
         <Button onClick={() => setExpanded(!expanded)}>
-          {expanded ? 'Collapse' : 'Expand'}
+          {expanded ? "Collapse" : "Expand"}
         </Button>
       </div>
 
       <div
         className={css({
-          width: '375px',
-          height: '667px',
-          border: '1px solid #ECECEC',
-          borderRadius: '12px',
-          overflow: 'auto',
+          width: "375px",
+          height: "667px",
+          border: "1px solid #ECECEC",
+          borderRadius: "12px",
+          overflow: "auto",
         })}
       >
         <MobileHeader
           title="Header title"
           expanded={expanded}
           navButton={{
-            onClick: () => console.log('Nav Button Click'),
-            label: 'Back',
+            onClick: () => console.log("Nav Button Click"),
+            label: "Back",
           }}
           actionButtons={[
             {
-              onClick: () => console.log('Check Button Click'),
-              label: 'Action',
+              onClick: () => console.log("Check Button Click"),
+              label: "Action",
             },
           ]}
         />
         <div
           style={{
-            padding: '12px',
-            height: '100%',
-            overflow: 'auto',
+            padding: "12px",
+            height: "100%",
+            overflow: "auto",
           }}
           tabIndex={0}
         >
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu
-            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-            non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
           </p>
 
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu
-            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-            non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
           </p>
 
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu
-            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-            non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
           </p>
 
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu
-            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-            non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
           </p>
         </div>
       </div>
diff --git a/documentation-site/examples/modal/autofocus.tsx b/documentation-site/examples/modal/autofocus.tsx
index 5fb48cd4d6..e77af803fa 100644
--- a/documentation-site/examples/modal/autofocus.tsx
+++ b/documentation-site/examples/modal/autofocus.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 import {
   Modal,
   ModalHeader,
@@ -7,7 +7,7 @@ import {
   ModalFooter,
   ModalButton,
   FocusOnce,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 export default function Example() {
   const [isOpen, setOpen] = React.useState(false);
@@ -20,17 +20,13 @@ export default function Example() {
         </FocusOnce>
         <ModalBody>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Maecenas quam nisl, tempor ut varius sit amet, sodales
-            sit amet mauris. Aliquam vitae sapien quis eros finibus
-            aliquet.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
+            quam nisl, tempor ut varius sit amet, sodales sit amet mauris.
+            Aliquam vitae sapien quis eros finibus aliquet.
           </p>
         </ModalBody>
         <ModalFooter>
-          <ModalButton
-            kind="tertiary"
-            onClick={() => setOpen(false)}
-          >
+          <ModalButton kind="tertiary" onClick={() => setOpen(false)}>
             Close
           </ModalButton>
           <ModalButton autoFocus onClick={() => setOpen(false)}>
diff --git a/documentation-site/examples/modal/basic.tsx b/documentation-site/examples/modal/basic.tsx
index e9182dcb67..ad37d6eb51 100644
--- a/documentation-site/examples/modal/basic.tsx
+++ b/documentation-site/examples/modal/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 import {
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   ModalButton,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -21,9 +21,8 @@ export default function Example() {
       <Modal onClose={close} isOpen={isOpen}>
         <ModalHeader>Hello world</ModalHeader>
         <ModalBody>
-          Proin ut dui sed metus pharetra hend rerit vel non mi.
-          Nulla ornare faucibus ex, non facilisis nisl. Maecenas
-          aliquet mauris ut tempus.
+          Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+          faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
         </ModalBody>
         <ModalFooter>
           <ModalButton kind="tertiary" onClick={close}>
diff --git a/documentation-site/examples/modal/buried-interactive-element.tsx b/documentation-site/examples/modal/buried-interactive-element.tsx
index 82388f2567..052037a6c1 100644
--- a/documentation-site/examples/modal/buried-interactive-element.tsx
+++ b/documentation-site/examples/modal/buried-interactive-element.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 import {
   Modal,
   ModalHeader,
@@ -7,7 +7,7 @@ import {
   ModalFooter,
   ModalButton,
   FocusOnce,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 export default function Example() {
   const [isOpen, setOpen] = React.useState(false);
@@ -20,84 +20,70 @@ export default function Example() {
         </FocusOnce>
         <ModalBody>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Maecenas quam nisl, tempor ut varius sit amet, sodales
-            sit amet mauris. Aliquam vitae sapien quis eros finibus
-            aliquet. Fusce et quam lobortis, viverra eros eget,
-            finibus leo. Integer elementum lacus et lorem suscipit
-            tincidunt. Proin malesuada turpis id mi placerat maximus
-            a et diam. Sed elementum cursus metus, in imperdiet
-            sapien commodo non. Pellentesque ultricies lorem nulla,
-            a finibus eros fermentum viverra. Cras nulla lacus,
-            porttitor quis euismod sed, varius sit amet magna. Ut
-            aliquam odio sed ultricies eleifend. Etiam quis velit
-            odio. Aenean fermentum dolor sit amet pellentesque
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
+            quam nisl, tempor ut varius sit amet, sodales sit amet mauris.
+            Aliquam vitae sapien quis eros finibus aliquet. Fusce et quam
+            lobortis, viverra eros eget, finibus leo. Integer elementum lacus et
+            lorem suscipit tincidunt. Proin malesuada turpis id mi placerat
+            maximus a et diam. Sed elementum cursus metus, in imperdiet sapien
+            commodo non. Pellentesque ultricies lorem nulla, a finibus eros
+            fermentum viverra. Cras nulla lacus, porttitor quis euismod sed,
+            varius sit amet magna. Ut aliquam odio sed ultricies eleifend. Etiam
+            quis velit odio. Aenean fermentum dolor sit amet pellentesque
             facilisis. Aliquam porta in risus nec faucibus.
           </p>
           <p>
-            Proin rhoncus pharetra purus. Aliquam sapien est,
-            ultrices vitae velit ac, dictum volutpat sem. Morbi
-            blandit venenatis volutpat. Sed finibus bibendum justo
-            faucibus tempor. Nunc commodo condimentum magna et
-            auctor. Nunc consequat turpis eget rutrum aliquet.
-            Mauris fringilla libero non urna volutpat lacinia. Sed
-            facilisis finibus lobortis. Etiam ipsum erat, euismod
-            eget purus id, dignissim faucibus velit. Fusce rutrum
-            urna felis, consequat ullamcorper dolor porttitor vitae.
-            Nulla non velit eget urna congue congue ac vitae lorem.
-            Sed ac lorem eu justo consectetur varius placerat sit
-            amet enim. Curabitur eu placerat augue, ut porttitor
-            quam. Vivamus vitae elit eu nisl rutrum sodales ut eu
-            nisl. Praesent elementum orci sed metus vulputate
-            blandit.
+            Proin rhoncus pharetra purus. Aliquam sapien est, ultrices vitae
+            velit ac, dictum volutpat sem. Morbi blandit venenatis volutpat. Sed
+            finibus bibendum justo faucibus tempor. Nunc commodo condimentum
+            magna et auctor. Nunc consequat turpis eget rutrum aliquet. Mauris
+            fringilla libero non urna volutpat lacinia. Sed facilisis finibus
+            lobortis. Etiam ipsum erat, euismod eget purus id, dignissim
+            faucibus velit. Fusce rutrum urna felis, consequat ullamcorper dolor
+            porttitor vitae. Nulla non velit eget urna congue congue ac vitae
+            lorem. Sed ac lorem eu justo consectetur varius placerat sit amet
+            enim. Curabitur eu placerat augue, ut porttitor quam. Vivamus vitae
+            elit eu nisl rutrum sodales ut eu nisl. Praesent elementum orci sed
+            metus vulputate blandit.
           </p>
           <p>
-            In vel condimentum quam, eget dignissim velit.
-            Pellentesque volutpat urna in eros tempor, vestibulum
-            accumsan enim suscipit. Morbi condimentum placerat
-            dolor, et ultrices elit accumsan quis. Nam laoreet
-            auctor felis at lobortis. Nulla fringilla, elit ut
-            sollicitudin fermentum, velit metus porta massa, nec
-            pharetra justo leo a purus. Duis pharetra est interdum
-            neque viverra, eget ultrices dui efficitur. In sed orci
-            dolor. In hac habitasse platea dictumst. Proin aliquam
-            facilisis eros, a mollis ante consequat vitae. Fusce
-            quis viverra est. Sed tristique accumsan magna, vel
-            dictum lectus posuere at. Suspendisse at scelerisque
-            diam.
+            In vel condimentum quam, eget dignissim velit. Pellentesque volutpat
+            urna in eros tempor, vestibulum accumsan enim suscipit. Morbi
+            condimentum placerat dolor, et ultrices elit accumsan quis. Nam
+            laoreet auctor felis at lobortis. Nulla fringilla, elit ut
+            sollicitudin fermentum, velit metus porta massa, nec pharetra justo
+            leo a purus. Duis pharetra est interdum neque viverra, eget ultrices
+            dui efficitur. In sed orci dolor. In hac habitasse platea dictumst.
+            Proin aliquam facilisis eros, a mollis ante consequat vitae. Fusce
+            quis viverra est. Sed tristique accumsan magna, vel dictum lectus
+            posuere at. Suspendisse at scelerisque diam.
           </p>
           <p>
-            Donec sem ante, pulvinar ac turpis laoreet, euismod
-            semper massa. Donec finibus fringilla augue, ac suscipit
-            diam placerat eget. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit. Nam pulvinar ultricies est,
-            ut laoreet tortor pulvinar pretium. Nam imperdiet
-            feugiat sodales. Sed posuere nisi vel ex euismod, in
-            tristique metus sodales. Duis laoreet quam at molestie
-            euismod. Nulla tempus sagittis tortor ac porttitor.
-            Proin suscipit pharetra eros vitae rutrum.
+            Donec sem ante, pulvinar ac turpis laoreet, euismod semper massa.
+            Donec finibus fringilla augue, ac suscipit diam placerat eget. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar
+            ultricies est, ut laoreet tortor pulvinar pretium. Nam imperdiet
+            feugiat sodales. Sed posuere nisi vel ex euismod, in tristique metus
+            sodales. Duis laoreet quam at molestie euismod. Nulla tempus
+            sagittis tortor ac porttitor. Proin suscipit pharetra eros vitae
+            rutrum.
           </p>
           <p>
-            Etiam eu orci faucibus, molestie turpis sed, feugiat
-            eros. Aliquam quis orci eget tellus convallis cursus eu
-            non ante. Praesent et sagittis odio, nec mollis metus.
-            Mauris suscipit sapien eu nulla vehicula mollis. Integer
-            sapien ex, consequat vel ornare mollis, laoreet
-            hendrerit tortor. Vestibulum a lacus vel nisl volutpat
-            mattis. Vivamus tincidunt gravida risus a viverra.
-            Maecenas varius ligula ac blandit tempus. Nulla
-            facilisi. Fusce blandit, purus in malesuada blandit,
-            enim velit pretium est, vel faucibus nisl dui blandit
-            felis. Nullam sit amet dapibus sapien, bibendum suscipit
-            orci. Suspendisse gravida mauris justo, pulvinar
-            condimentum augue egestas eu. Etiam dictum felis eros,
-            sed dapibus orci malesuada sed.
+            Etiam eu orci faucibus, molestie turpis sed, feugiat eros. Aliquam
+            quis orci eget tellus convallis cursus eu non ante. Praesent et
+            sagittis odio, nec mollis metus. Mauris suscipit sapien eu nulla
+            vehicula mollis. Integer sapien ex, consequat vel ornare mollis,
+            laoreet hendrerit tortor. Vestibulum a lacus vel nisl volutpat
+            mattis. Vivamus tincidunt gravida risus a viverra. Maecenas varius
+            ligula ac blandit tempus. Nulla facilisi. Fusce blandit, purus in
+            malesuada blandit, enim velit pretium est, vel faucibus nisl dui
+            blandit felis. Nullam sit amet dapibus sapien, bibendum suscipit
+            orci. Suspendisse gravida mauris justo, pulvinar condimentum augue
+            egestas eu. Etiam dictum felis eros, sed dapibus orci malesuada sed.
           </p>
         </ModalBody>
         <ModalFooter>
-          <ModalButton onClick={() => setOpen(false)}>
-            Okay
-          </ModalButton>
+          <ModalButton onClick={() => setOpen(false)}>Okay</ModalButton>
         </ModalFooter>
       </Modal>
     </React.Fragment>
diff --git a/documentation-site/examples/modal/nested.tsx b/documentation-site/examples/modal/nested.tsx
index e373073065..84b4f92df2 100644
--- a/documentation-site/examples/modal/nested.tsx
+++ b/documentation-site/examples/modal/nested.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 import {
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   ModalButton,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 interface Props {
   children: (args: {
@@ -27,7 +27,7 @@ class ModalStateContainer extends React.Component<Props, State> {
     open = !this.state.isConfirmationOpen,
     cb: () => any = () => {},
   ) => {
-    this.setState({isConfirmationOpen: open}, cb);
+    this.setState({ isConfirmationOpen: open }, cb);
   };
   render() {
     return this.props.children({
@@ -41,23 +41,18 @@ export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
     <ModalStateContainer>
-      {({isConfirmationOpen, toggleConfirm}) => (
+      {({ isConfirmationOpen, toggleConfirm }) => (
         <React.Fragment>
-          <Button onClick={() => setIsOpen(true)}>
-            Open Modal
-          </Button>
+          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
           <Modal onClose={() => setIsOpen(false)} isOpen={isOpen}>
             <ModalHeader>Hello world</ModalHeader>
             <ModalBody>
-              Proin ut dui sed metus pharetra hend rerit vel non mi.
-              Nulla ornare faucibus ex, non facilisis nisl. Maecenas
-              aliquet mauris ut tempus.
+              Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
+              ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut
+              tempus.
             </ModalBody>
             <ModalFooter>
-              <ModalButton
-                kind="tertiary"
-                onClick={() => setIsOpen(false)}
-              >
+              <ModalButton kind="tertiary" onClick={() => setIsOpen(false)}>
                 Cancel
               </ModalButton>
               <ModalButton onClick={() => toggleConfirm(true)}>
@@ -72,10 +67,7 @@ export default function Example() {
             <ModalHeader>Confirm</ModalHeader>
             <ModalBody>Confirm closing all.</ModalBody>
             <ModalFooter>
-              <ModalButton
-                kind="tertiary"
-                onClick={() => toggleConfirm(false)}
-              >
+              <ModalButton kind="tertiary" onClick={() => toggleConfirm(false)}>
                 No
               </ModalButton>
               <ModalButton
diff --git a/documentation-site/examples/modal/sized.tsx b/documentation-site/examples/modal/sized.tsx
index 15c2ad1796..077e4b1089 100644
--- a/documentation-site/examples/modal/sized.tsx
+++ b/documentation-site/examples/modal/sized.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 import {
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   ModalButton,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -24,19 +24,18 @@ export default function Example() {
         overrides={{
           Dialog: {
             style: {
-              width: '80vw',
-              height: '80vh',
-              display: 'flex',
-              flexDirection: 'column',
+              width: "80vw",
+              height: "80vh",
+              display: "flex",
+              flexDirection: "column",
             },
           },
         }}
       >
         <ModalHeader>Hello world</ModalHeader>
-        <ModalBody style={{flex: '1 1 0'}}>
-          Proin ut dui sed metus pharetra hend rerit vel non mi.
-          Nulla ornare faucibus ex, non facilisis nisl. Maecenas
-          aliquet mauris ut tempus.
+        <ModalBody style={{ flex: "1 1 0" }}>
+          Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+          faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
         </ModalBody>
         <ModalFooter>
           <ModalButton kind="tertiary" onClick={close}>
diff --git a/documentation-site/examples/notification-circle/inline.tsx b/documentation-site/examples/notification-circle/inline.tsx
index 521afaf7a3..3cf308edb6 100644
--- a/documentation-site/examples/notification-circle/inline.tsx
+++ b/documentation-site/examples/notification-circle/inline.tsx
@@ -1,11 +1,10 @@
-import * as React from 'react';
-import {NotificationCircle, COLOR} from 'baseui/badge';
+import * as React from "react";
+import { NotificationCircle, COLOR } from "baseui/badge";
 
 export default function Example() {
   return (
     <React.Fragment>
-      Inbox{' '}
-      <NotificationCircle color={COLOR.positive} content={14} />
+      Inbox <NotificationCircle color={COLOR.positive} content={14} />
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/notification-circle/offset.tsx b/documentation-site/examples/notification-circle/offset.tsx
index 9caa42765b..1d1a8ac6d3 100644
--- a/documentation-site/examples/notification-circle/offset.tsx
+++ b/documentation-site/examples/notification-circle/offset.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Tag, SIZE} from 'baseui/tag';
-import {NotificationCircle, COLOR, PLACEMENT} from 'baseui/badge';
+import * as React from "react";
+import { Tag, SIZE } from "baseui/tag";
+import { NotificationCircle, COLOR, PLACEMENT } from "baseui/badge";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/notification/basic.tsx b/documentation-site/examples/notification/basic.tsx
index b84888c7ae..26b8af2a06 100644
--- a/documentation-site/examples/notification/basic.tsx
+++ b/documentation-site/examples/notification/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Notification} from 'baseui/notification';
+import * as React from "react";
+import { Notification } from "baseui/notification";
 
 export default function Example() {
   return <Notification>Default info notification</Notification>;
diff --git a/documentation-site/examples/notification/closeable.tsx b/documentation-site/examples/notification/closeable.tsx
index 782e2638a2..57cdcb48cc 100644
--- a/documentation-site/examples/notification/closeable.tsx
+++ b/documentation-site/examples/notification/closeable.tsx
@@ -1,8 +1,6 @@
-import * as React from 'react';
-import {Notification} from 'baseui/notification';
+import * as React from "react";
+import { Notification } from "baseui/notification";
 
 export default function Example() {
-  return (
-    <Notification closeable>Closeable notification</Notification>
-  );
+  return <Notification closeable>Closeable notification</Notification>;
 }
diff --git a/documentation-site/examples/notification/custom-dismiss.tsx b/documentation-site/examples/notification/custom-dismiss.tsx
index 0c2734d2bf..a397518738 100644
--- a/documentation-site/examples/notification/custom-dismiss.tsx
+++ b/documentation-site/examples/notification/custom-dismiss.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {Button, SIZE} from 'baseui/button';
-import {Notification} from 'baseui/notification';
+import * as React from "react";
+import { Button, SIZE } from "baseui/button";
+import { Notification } from "baseui/notification";
 
 export default function Example() {
   return (
     <Notification>
-      {({dismiss}) => (
+      {({ dismiss }) => (
         <Button onClick={dismiss} size={SIZE.compact}>
           Dismiss
         </Button>
diff --git a/documentation-site/examples/notification/full-width.tsx b/documentation-site/examples/notification/full-width.tsx
index 139cc969e0..c1f025cd88 100644
--- a/documentation-site/examples/notification/full-width.tsx
+++ b/documentation-site/examples/notification/full-width.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {Notification} from 'baseui/notification';
+import * as React from "react";
+import { Notification } from "baseui/notification";
 
 export default function Example() {
   return (
     <Notification
       overrides={{
-        Body: {style: {width: 'auto'}},
+        Body: { style: { width: "auto" } },
       }}
     >
       Default info notification
diff --git a/documentation-site/examples/notification/kinds.tsx b/documentation-site/examples/notification/kinds.tsx
index 994376208f..ff7d7aac10 100644
--- a/documentation-site/examples/notification/kinds.tsx
+++ b/documentation-site/examples/notification/kinds.tsx
@@ -1,18 +1,12 @@
-import * as React from 'react';
-import {Notification, KIND} from 'baseui/notification';
+import * as React from "react";
+import { Notification, KIND } from "baseui/notification";
 
 export default function Example() {
   return (
     <React.Fragment>
-      <Notification kind={KIND.positive}>
-        Positive notification
-      </Notification>
-      <Notification kind={KIND.warning}>
-        Warning notification
-      </Notification>
-      <Notification kind={KIND.negative}>
-        Negative notification
-      </Notification>
+      <Notification kind={KIND.positive}>Positive notification</Notification>
+      <Notification kind={KIND.warning}>Warning notification</Notification>
+      <Notification kind={KIND.negative}>Negative notification</Notification>
     </React.Fragment>
   );
 }
diff --git a/documentation-site/examples/notification/overrides.tsx b/documentation-site/examples/notification/overrides.tsx
index 5b3c660456..3eca474816 100644
--- a/documentation-site/examples/notification/overrides.tsx
+++ b/documentation-site/examples/notification/overrides.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {Notification} from 'baseui/notification';
-import {DeleteAlt} from 'baseui/icon';
-import {expandBorderStyles} from 'baseui/styles';
+import * as React from "react";
+import { Notification } from "baseui/notification";
+import { DeleteAlt } from "baseui/icon";
+import { expandBorderStyles } from "baseui/styles";
 
 export default function Example() {
   return (
     <Notification
       overrides={{
         Body: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             ...expandBorderStyles($theme.borders.border600),
           }),
         },
         CloseIcon: {
           component: DeleteAlt as React.FC<any>,
-          style: {float: 'right', cursor: 'pointer'},
+          style: { float: "right", cursor: "pointer" },
         },
       }}
       closeable
diff --git a/documentation-site/examples/overrides/component.tsx b/documentation-site/examples/overrides/component.tsx
index ac54436c10..2db6ec5cdf 100644
--- a/documentation-site/examples/overrides/component.tsx
+++ b/documentation-site/examples/overrides/component.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/overrides/props.tsx b/documentation-site/examples/overrides/props.tsx
index 90ebf0a0a7..baf0ca23ae 100644
--- a/documentation-site/examples/overrides/props.tsx
+++ b/documentation-site/examples/overrides/props.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
@@ -7,7 +7,7 @@ export default function Example() {
       overrides={{
         BaseButton: {
           props: {
-            'data-test': 'action-button',
+            "data-test": "action-button",
           },
         },
       }}
diff --git a/documentation-site/examples/overrides/style-with-theme.tsx b/documentation-site/examples/overrides/style-with-theme.tsx
index 76888c7f3a..4f70e35ac5 100644
--- a/documentation-site/examples/overrides/style-with-theme.tsx
+++ b/documentation-site/examples/overrides/style-with-theme.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
     <Button
       overrides={{
         BaseButton: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             backgroundColor: $theme.colors.warning,
           }),
         },
diff --git a/documentation-site/examples/overrides/style.tsx b/documentation-site/examples/overrides/style.tsx
index ffc1c2b86a..4a65cd9cc9 100644
--- a/documentation-site/examples/overrides/style.tsx
+++ b/documentation-site/examples/overrides/style.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Button } from "baseui/button";
 
 export default function Example() {
   return (
@@ -7,7 +7,7 @@ export default function Example() {
       overrides={{
         BaseButton: {
           style: {
-            backgroundColor: 'red',
+            backgroundColor: "red",
           },
         },
       }}
diff --git a/documentation-site/examples/page-control/overflow.tsx b/documentation-site/examples/page-control/overflow.tsx
index 77c2f52505..1f7bf63c04 100644
--- a/documentation-site/examples/page-control/overflow.tsx
+++ b/documentation-site/examples/page-control/overflow.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {PageControl} from 'baseui/page-control';
-import {Button, SIZE} from 'baseui/button';
-import {ChevronLeft, ChevronRight} from 'baseui/icon';
+import * as React from "react";
+import { PageControl } from "baseui/page-control";
+import { Button, SIZE } from "baseui/button";
+import { ChevronLeft, ChevronRight } from "baseui/icon";
 
 export default function Example() {
   const NUM_PAGES = 7;
@@ -9,19 +9,19 @@ export default function Example() {
   return (
     <div
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '20px',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "20px",
       }}
     >
       <div
         style={{
-          display: 'flex',
-          justifyContent: 'center',
-          gap: '20px',
-          width: '100%',
-          alignItems: 'center',
+          display: "flex",
+          justifyContent: "center",
+          gap: "20px",
+          width: "100%",
+          alignItems: "center",
         }}
       >
         <Button
@@ -44,7 +44,7 @@ export default function Example() {
       <PageControl
         numPages={NUM_PAGES}
         currentPage={page}
-        onPageChange={({nextPage}) => setPage(nextPage)}
+        onPageChange={({ nextPage }) => setPage(nextPage)}
         aria-label="seven-pages"
       />
     </div>
diff --git a/documentation-site/examples/pagination/controlled.tsx b/documentation-site/examples/pagination/controlled.tsx
index 0e00548af0..01e197613f 100644
--- a/documentation-site/examples/pagination/controlled.tsx
+++ b/documentation-site/examples/pagination/controlled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Pagination} from 'baseui/pagination';
+import * as React from "react";
+import { Pagination } from "baseui/pagination";
 
 export default function Example() {
   const [currentPage, setCurrentPage] = React.useState(1);
@@ -7,7 +7,7 @@ export default function Example() {
     <Pagination
       numPages={20}
       currentPage={currentPage}
-      onPageChange={({nextPage}) => {
+      onPageChange={({ nextPage }) => {
         setCurrentPage(Math.min(Math.max(nextPage, 1), 20));
       }}
     />
diff --git a/documentation-site/examples/pagination/labels.tsx b/documentation-site/examples/pagination/labels.tsx
index cb948b5b34..a41c42bb94 100644
--- a/documentation-site/examples/pagination/labels.tsx
+++ b/documentation-site/examples/pagination/labels.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {StatefulPagination} from 'baseui/pagination';
+import * as React from "react";
+import { StatefulPagination } from "baseui/pagination";
 
 export default function Example() {
   return (
     <StatefulPagination
       numPages={10}
       labels={{
-        prevButton: 'Back',
-        nextButton: 'Forward',
-        preposition: 'out of',
+        prevButton: "Back",
+        nextButton: "Forward",
+        preposition: "out of",
       }}
     />
   );
diff --git a/documentation-site/examples/pagination/overrides.tsx b/documentation-site/examples/pagination/overrides.tsx
index 1498fac88e..fa1380931f 100644
--- a/documentation-site/examples/pagination/overrides.tsx
+++ b/documentation-site/examples/pagination/overrides.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulPagination} from 'baseui/pagination';
-import {expandBorderStyles} from 'baseui/styles';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulPagination } from "baseui/pagination";
+import { expandBorderStyles } from "baseui/styles";
 
 export default function Example() {
   return (
@@ -9,7 +9,7 @@ export default function Example() {
       numPages={10}
       overrides={{
         Root: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             ...expandBorderStyles($theme.borders.border400),
             borderTopLeftRadius: $theme.borders.radius200,
             borderTopRightRadius: $theme.borders.radius200,
@@ -19,23 +19,23 @@ export default function Example() {
           }),
         },
         PrevButton: {
-          component: ({onClick}: any) => (
+          component: ({ onClick }: any) => (
             <Button onClick={onClick}>Left</Button>
           ),
         },
         NextButton: {
-          component: ({onClick}: any) => (
+          component: ({ onClick }: any) => (
             <Button onClick={onClick}>Right</Button>
           ),
         },
         MaxLabel: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             ...$theme.typography.font300,
             marginRight: $theme.sizing.scale1000,
           }),
         },
         DropdownContainer: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             marginLeft: $theme.sizing.scale1000,
           }),
         },
@@ -50,11 +50,11 @@ export default function Example() {
                   $isPseudoFocused,
                   $error,
                 }: any) => ({
-                  borderLeftColor: 'transparent',
-                  borderRightColor: 'transparent',
-                  borderTopColor: 'transparent',
-                  borderBottomColor: 'transparent',
-                  boxShadow: 'none',
+                  borderLeftColor: "transparent",
+                  borderRightColor: "transparent",
+                  borderTopColor: "transparent",
+                  borderBottomColor: "transparent",
+                  boxShadow: "none",
                   backgroundColor: $disabled
                     ? $theme.colors.buttonDisabledFill
                     : $isFocused || $isPseudoFocused
@@ -65,10 +65,10 @@ export default function Example() {
                 }),
               },
               SingleValue: {
-                style: ({$theme}: any) => ({
-                  position: 'relative',
-                  paddingTop: '0',
-                  paddingBottom: '0',
+                style: ({ $theme }: any) => ({
+                  position: "relative",
+                  paddingTop: "0",
+                  paddingBottom: "0",
                   paddingLeft: $theme.sizing.scale200,
                   paddingRight: $theme.sizing.scale500,
                   color: $theme.colors.buttonTertiaryText,
@@ -76,9 +76,9 @@ export default function Example() {
                 }),
               },
               SelectArrow: {
-                style: ({$theme}: any) => ({
-                  width: '24px',
-                  height: '24px',
+                style: ({ $theme }: any) => ({
+                  width: "24px",
+                  height: "24px",
                   color: $theme.colors.buttonTertiaryText,
                 }),
               },
diff --git a/documentation-site/examples/pagination/uncontrolled.tsx b/documentation-site/examples/pagination/uncontrolled.tsx
index df9bb7b766..49a77f444b 100644
--- a/documentation-site/examples/pagination/uncontrolled.tsx
+++ b/documentation-site/examples/pagination/uncontrolled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulPagination} from 'baseui/pagination';
+import * as React from "react";
+import { StatefulPagination } from "baseui/pagination";
 
 export default function Example() {
   return <StatefulPagination numPages={10} />;
diff --git a/documentation-site/examples/payment-card/controlled.tsx b/documentation-site/examples/payment-card/controlled.tsx
index 9ca9eb048d..bf1b34268a 100644
--- a/documentation-site/examples/payment-card/controlled.tsx
+++ b/documentation-site/examples/payment-card/controlled.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {PaymentCard} from 'baseui/payment-card';
+import * as React from "react";
+import { PaymentCard } from "baseui/payment-card";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <PaymentCard
       value={value}
diff --git a/documentation-site/examples/payment-card/defaultvalue.tsx b/documentation-site/examples/payment-card/defaultvalue.tsx
index b3f6d19651..b596adb8f5 100644
--- a/documentation-site/examples/payment-card/defaultvalue.tsx
+++ b/documentation-site/examples/payment-card/defaultvalue.tsx
@@ -1,13 +1,11 @@
-import * as React from 'react';
-import {PaymentCard} from 'baseui/payment-card';
+import * as React from "react";
+import { PaymentCard } from "baseui/payment-card";
 
 export default function Example() {
-  const [value, setValue] = React.useState('4111111111111111');
+  const [value, setValue] = React.useState("4111111111111111");
   return (
     <PaymentCard
-      onChange={(event) =>
-        setValue((event.target as HTMLInputElement).value)
-      }
+      onChange={(event) => setValue((event.target as HTMLInputElement).value)}
       placeholder="Please enter your credit card number..."
       value={value}
     />
diff --git a/documentation-site/examples/payment-card/form.tsx b/documentation-site/examples/payment-card/form.tsx
index 2ace6ddfa3..d0b3751112 100644
--- a/documentation-site/examples/payment-card/form.tsx
+++ b/documentation-site/examples/payment-card/form.tsx
@@ -1,27 +1,27 @@
-import * as React from 'react';
-import {PaymentCard, valid} from 'baseui/payment-card';
-import {MaskedInput} from 'baseui/input';
-import {FormControl} from 'baseui/form-control';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { PaymentCard, valid } from "baseui/payment-card";
+import { MaskedInput } from "baseui/input";
+import { FormControl } from "baseui/form-control";
+import { useStyletron } from "baseui";
 
 function getFormOverrides(width: string) {
   return {
     ControlContainer: {
       style: {
         width,
-        margin: '5px',
+        margin: "5px",
       },
     },
   };
 }
 
 export default function Example() {
-  const [number, setNumber] = React.useState('');
-  const [expiration, setExpiration] = React.useState('');
-  const [code, setCode] = React.useState('');
+  const [number, setNumber] = React.useState("");
+  const [expiration, setExpiration] = React.useState("");
+  const [code, setCode] = React.useState("");
   const [css] = useStyletron();
 
-  const {card} = valid.number(number);
+  const { card } = valid.number(number);
   let codeLength;
 
   if (card && card.code && card.code.size) {
@@ -29,11 +29,8 @@ export default function Example() {
   }
 
   return (
-    <div className={css({display: 'flex'})}>
-      <FormControl
-        overrides={getFormOverrides('250px')}
-        caption="Card number"
-      >
+    <div className={css({ display: "flex" })}>
+      <FormControl overrides={getFormOverrides("250px")} caption="Card number">
         <PaymentCard
           value={number}
           onChange={(event) => setNumber(event.currentTarget.value)}
@@ -41,27 +38,22 @@ export default function Example() {
         />
       </FormControl>
       <FormControl
-        overrides={getFormOverrides('90px')}
+        overrides={getFormOverrides("90px")}
         caption="Expiration date"
       >
         <MaskedInput
           value={expiration}
-          onChange={(event) =>
-            setExpiration(event.currentTarget.value)
-          }
+          onChange={(event) => setExpiration(event.currentTarget.value)}
           placeholder="MM/YY"
           mask="99/99"
         />
       </FormControl>
-      <FormControl
-        overrides={getFormOverrides('70px')}
-        caption="CVC"
-      >
+      <FormControl overrides={getFormOverrides("70px")} caption="CVC">
         <MaskedInput
           value={code}
           onChange={(event) => setCode(event.currentTarget.value)}
           placeholder="CVC"
-          mask={codeLength ? '9'.repeat(codeLength) : '999'}
+          mask={codeLength ? "9".repeat(codeLength) : "999"}
         />
       </FormControl>
     </div>
diff --git a/documentation-site/examples/payment-card/uncontrolled.tsx b/documentation-site/examples/payment-card/uncontrolled.tsx
index eddd780f4c..ec35932ee9 100644
--- a/documentation-site/examples/payment-card/uncontrolled.tsx
+++ b/documentation-site/examples/payment-card/uncontrolled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulPaymentCard} from 'baseui/payment-card';
+import * as React from "react";
+import { StatefulPaymentCard } from "baseui/payment-card";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/phone-input/basic.tsx b/documentation-site/examples/phone-input/basic.tsx
index cbebf42ae8..83355061e2 100644
--- a/documentation-site/examples/phone-input/basic.tsx
+++ b/documentation-site/examples/phone-input/basic.tsx
@@ -1,8 +1,8 @@
-import React, {useState} from 'react';
-import {PhoneInput, COUNTRIES} from 'baseui/phone-input';
+import React, { useState } from "react";
+import { PhoneInput, COUNTRIES } from "baseui/phone-input";
 
 export default function Example() {
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
   const [country, setCountry] = useState(COUNTRIES.US);
   return (
     <PhoneInput
diff --git a/documentation-site/examples/phone-input/flag-overrides.tsx b/documentation-site/examples/phone-input/flag-overrides.tsx
index 0d30a5cc8b..791eeaa187 100644
--- a/documentation-site/examples/phone-input/flag-overrides.tsx
+++ b/documentation-site/examples/phone-input/flag-overrides.tsx
@@ -1,17 +1,13 @@
-import * as React from 'react';
-import {
-  PhoneInput,
-  COUNTRIES,
-  StyledFlag,
-} from 'baseui/phone-input';
+import * as React from "react";
+import { PhoneInput, COUNTRIES, StyledFlag } from "baseui/phone-input";
 
 function CustomFlag(props: any) {
-  const {children, ...rest} = props;
+  const { children, ...rest } = props;
   return <StyledFlag iso={props.$iso} {...rest} />;
 }
 
 export default function Example() {
-  const [text, setText] = React.useState('');
+  const [text, setText] = React.useState("");
   const [country, setCountry] = React.useState(COUNTRIES.US);
   return (
     <PhoneInput
diff --git a/documentation-site/examples/phone-input/localized.tsx b/documentation-site/examples/phone-input/localized.tsx
index ee497b1e89..c27939eedb 100644
--- a/documentation-site/examples/phone-input/localized.tsx
+++ b/documentation-site/examples/phone-input/localized.tsx
@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {PhoneInput, COUNTRIES} from 'baseui/phone-input';
+import React, { useState } from "react";
+import { PhoneInput, COUNTRIES } from "baseui/phone-input";
 
 const iso2FlagEmoji = (iso: any) =>
   String.fromCodePoint(
@@ -9,7 +9,7 @@ const iso2FlagEmoji = (iso: any) =>
   );
 
 export default function Example() {
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
   const [country, setCountry] = useState(COUNTRIES.US);
   return (
     <PhoneInput
diff --git a/documentation-site/examples/phone-input/nested-overrides.tsx b/documentation-site/examples/phone-input/nested-overrides.tsx
index f702a0820c..186a69e951 100644
--- a/documentation-site/examples/phone-input/nested-overrides.tsx
+++ b/documentation-site/examples/phone-input/nested-overrides.tsx
@@ -1,8 +1,8 @@
-import React, {useState} from 'react';
-import {PhoneInput, COUNTRIES} from 'baseui/phone-input';
+import React, { useState } from "react";
+import { PhoneInput, COUNTRIES } from "baseui/phone-input";
 
 export default function Example() {
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
   const [country, setCountry] = useState(COUNTRIES.US);
   return (
     <PhoneInput
@@ -20,7 +20,7 @@ export default function Example() {
             overrides: {
               Root: {
                 style: {
-                  width: '300px',
+                  width: "300px",
                 },
               },
             },
diff --git a/documentation-site/examples/phone-input/uncontrolled.tsx b/documentation-site/examples/phone-input/uncontrolled.tsx
index f286099998..ca29b3e6c6 100644
--- a/documentation-site/examples/phone-input/uncontrolled.tsx
+++ b/documentation-site/examples/phone-input/uncontrolled.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {StatefulPhoneInput} from 'baseui/phone-input';
+import React from "react";
+import { StatefulPhoneInput } from "baseui/phone-input";
 
 export default function Example() {
   return <StatefulPhoneInput />;
diff --git a/documentation-site/examples/pin-code/autofocus.tsx b/documentation-site/examples/pin-code/autofocus.tsx
index 4959f8b908..97746b3014 100644
--- a/documentation-site/examples/pin-code/autofocus.tsx
+++ b/documentation-site/examples/pin-code/autofocus.tsx
@@ -1,22 +1,20 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   const [showPinCode, toggle] = React.useState(false);
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
-    <div className={css({display: 'flex'})}>
-      <Button onClick={() => toggle((s) => !s)}>
-        Mount PinCode
-      </Button>
-      <div className={css({marginLeft: theme.sizing.scale300})} />
+    <div className={css({ display: "flex" })}>
+      <Button onClick={() => toggle((s) => !s)}>Mount PinCode</Button>
+      <div className={css({ marginLeft: theme.sizing.scale300 })} />
       {showPinCode ? (
         <PinCode
           values={values}
-          onChange={({values}) => {
+          onChange={({ values }) => {
             setValues(values);
           }}
           autoFocus
diff --git a/documentation-site/examples/pin-code/basic.tsx b/documentation-site/examples/pin-code/basic.tsx
index 784516e6d1..5034272bd7 100644
--- a/documentation-site/examples/pin-code/basic.tsx
+++ b/documentation-site/examples/pin-code/basic.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <PinCode
       values={values}
-      onChange={({values}) => {
+      onChange={({ values }) => {
         setValues(values);
       }}
     />
diff --git a/documentation-site/examples/pin-code/completion.tsx b/documentation-site/examples/pin-code/completion.tsx
index 7615f8f753..cb23ba7bea 100644
--- a/documentation-site/examples/pin-code/completion.tsx
+++ b/documentation-site/examples/pin-code/completion.tsx
@@ -1,21 +1,21 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
   const [css] = useStyletron();
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   return (
-    <div className={css({display: 'flex'})}>
+    <div className={css({ display: "flex" })}>
       <PinCode
         values={values}
-        onChange={({values}: any) => {
+        onChange={({ values }: any) => {
           setValues(values);
           // if all of our inputs are filled in,
           // shift focus to our submit button
-          if (!values.includes('')) {
+          if (!values.includes("")) {
             buttonRef.current && buttonRef.current.focus();
           }
         }}
diff --git a/documentation-site/examples/pin-code/event.tsx b/documentation-site/examples/pin-code/event.tsx
index 7f6ec40c1c..61ddb2831a 100644
--- a/documentation-site/examples/pin-code/event.tsx
+++ b/documentation-site/examples/pin-code/event.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <PinCode
       values={values}
       manageFocus={false}
-      onChange={({values, event}) => {
+      onChange={({ values, event }) => {
         setValues(values);
         alert(event.target);
       }}
diff --git a/documentation-site/examples/pin-code/id-and-name.tsx b/documentation-site/examples/pin-code/id-and-name.tsx
index 985f2fb27d..c8a9ca29d3 100644
--- a/documentation-site/examples/pin-code/id-and-name.tsx
+++ b/documentation-site/examples/pin-code/id-and-name.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <PinCode
       id="foo"
       name="pin-code"
       values={values}
-      onChange={({values}) => {
+      onChange={({ values }) => {
         setValues(values);
       }}
     />
diff --git a/documentation-site/examples/pin-code/length.tsx b/documentation-site/examples/pin-code/length.tsx
index 64f3836381..a4ecaa16de 100644
--- a/documentation-site/examples/pin-code/length.tsx
+++ b/documentation-site/examples/pin-code/length.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(Array(10).fill(''));
+  const [values, setValues] = React.useState(Array(10).fill(""));
   return (
     <PinCode
       values={values}
-      onChange={({values}) => {
+      onChange={({ values }) => {
         setValues(values);
       }}
     />
diff --git a/documentation-site/examples/pin-code/mask.tsx b/documentation-site/examples/pin-code/mask.tsx
index facfdfed51..e301925fdd 100644
--- a/documentation-site/examples/pin-code/mask.tsx
+++ b/documentation-site/examples/pin-code/mask.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [valuesA, setValuesA] = React.useState(['', '', '', '']);
-  const [valuesB, setValuesB] = React.useState(['', '', '', '']);
+  const [valuesA, setValuesA] = React.useState(["", "", "", ""]);
+  const [valuesB, setValuesB] = React.useState(["", "", "", ""]);
 
   return (
     <React.Fragment>
       <PinCode
         mask
         values={valuesA}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesA(values);
         }}
       />
@@ -18,7 +18,7 @@ export default function Example() {
       <PinCode
         mask="*"
         values={valuesB}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesB(values);
         }}
       />
diff --git a/documentation-site/examples/pin-code/no-tab.tsx b/documentation-site/examples/pin-code/no-tab.tsx
index e9b2273085..173d5051c3 100644
--- a/documentation-site/examples/pin-code/no-tab.tsx
+++ b/documentation-site/examples/pin-code/no-tab.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <React.Fragment>
       <PinCode
         manageFocus={false}
         values={values}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValues(values);
         }}
       />
diff --git a/documentation-site/examples/pin-code/override.tsx b/documentation-site/examples/pin-code/override.tsx
index 09ea3584ce..2c6f1b12dc 100644
--- a/documentation-site/examples/pin-code/override.tsx
+++ b/documentation-site/examples/pin-code/override.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 const overrides = {
   Input: {
@@ -8,11 +8,11 @@ const overrides = {
         InputContainer: {
           style: {
             // use longhand CSS properties
-            backgroundColor: 'lightgreen',
-            borderLeftColor: 'seagreen',
-            borderRightColor: 'seagreen',
-            borderTopColor: 'seagreen',
-            borderBottomColor: 'seagreen',
+            backgroundColor: "lightgreen",
+            borderLeftColor: "seagreen",
+            borderRightColor: "seagreen",
+            borderTopColor: "seagreen",
+            borderBottomColor: "seagreen",
           },
         },
       },
@@ -21,12 +21,12 @@ const overrides = {
 };
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <PinCode
       overrides={overrides}
       values={values}
-      onChange={({values}) => {
+      onChange={({ values }) => {
         setValues(values);
       }}
     />
diff --git a/documentation-site/examples/pin-code/placeholder.tsx b/documentation-site/examples/pin-code/placeholder.tsx
index 90eea7ce7f..d129472d33 100644
--- a/documentation-site/examples/pin-code/placeholder.tsx
+++ b/documentation-site/examples/pin-code/placeholder.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [values, setValues] = React.useState(['', '', '', '']);
+  const [values, setValues] = React.useState(["", "", "", ""]);
   return (
     <PinCode
       placeholder="😀"
       values={values}
-      onChange={({values}) => {
+      onChange={({ values }) => {
         setValues(values);
       }}
     />
diff --git a/documentation-site/examples/pin-code/size.tsx b/documentation-site/examples/pin-code/size.tsx
index f3dcf6fbb1..c1ce6fc9e8 100644
--- a/documentation-site/examples/pin-code/size.tsx
+++ b/documentation-site/examples/pin-code/size.tsx
@@ -1,24 +1,24 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
-import {SIZE} from 'baseui/input';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
+import { SIZE } from "baseui/input";
 
 export default function Example() {
-  const [valuesA, setValuesA] = React.useState(['', '', '', '']);
-  const [valuesB, setValuesB] = React.useState(['', '', '', '']);
-  const [valuesC, setValuesC] = React.useState(['', '', '', '']);
+  const [valuesA, setValuesA] = React.useState(["", "", "", ""]);
+  const [valuesB, setValuesB] = React.useState(["", "", "", ""]);
+  const [valuesC, setValuesC] = React.useState(["", "", "", ""]);
   return (
     <React.Fragment>
       <PinCode
         size={SIZE.compact}
         values={valuesA}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesA(values);
         }}
       />
       <br />
       <PinCode
         values={valuesB}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesB(values);
         }}
       />
@@ -26,7 +26,7 @@ export default function Example() {
       <PinCode
         size={SIZE.large}
         values={valuesC}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesC(values);
         }}
       />
diff --git a/documentation-site/examples/pin-code/stateful.tsx b/documentation-site/examples/pin-code/stateful.tsx
index 797d9c4bcf..688871483b 100644
--- a/documentation-site/examples/pin-code/stateful.tsx
+++ b/documentation-site/examples/pin-code/stateful.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import {StatefulPinCode} from 'baseui/pin-code';
+import React from "react";
+import { StatefulPinCode } from "baseui/pin-code";
 
 export default function Example() {
   return (
     <StatefulPinCode
-      initialState={{values: ['', '', '', '']}}
+      initialState={{ values: ["", "", "", ""] }}
       onChange={console.log}
     />
   );
diff --git a/documentation-site/examples/pin-code/states.tsx b/documentation-site/examples/pin-code/states.tsx
index 19da7e94da..e01be175db 100644
--- a/documentation-site/examples/pin-code/states.tsx
+++ b/documentation-site/examples/pin-code/states.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import {PinCode} from 'baseui/pin-code';
+import React from "react";
+import { PinCode } from "baseui/pin-code";
 
 export default function Example() {
-  const [valuesA, setValuesA] = React.useState(['', '', '', '']);
-  const [valuesB, setValuesB] = React.useState(['', '', '', '']);
-  const [valuesC, setValuesC] = React.useState(['', '', '', '']);
+  const [valuesA, setValuesA] = React.useState(["", "", "", ""]);
+  const [valuesB, setValuesB] = React.useState(["", "", "", ""]);
+  const [valuesC, setValuesC] = React.useState(["", "", "", ""]);
   return (
     <React.Fragment>
       <PinCode
         disabled
         values={valuesA}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesA(values);
         }}
       />
@@ -18,7 +18,7 @@ export default function Example() {
       <PinCode
         error
         values={valuesB}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesB(values);
         }}
       />
@@ -26,7 +26,7 @@ export default function Example() {
       <PinCode
         positive
         values={valuesC}
-        onChange={({values}) => {
+        onChange={({ values }) => {
           setValuesC(values);
         }}
       />
diff --git a/documentation-site/examples/popover/clipping.tsx b/documentation-site/examples/popover/clipping.tsx
index fe1d998c36..8a3d49ba6a 100644
--- a/documentation-site/examples/popover/clipping.tsx
+++ b/documentation-site/examples/popover/clipping.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {StatefulPopover, PLACEMENT} from 'baseui/popover';
-import {ParagraphSmall, LabelSmall} from 'baseui/typography';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { StatefulPopover, PLACEMENT } from "baseui/popover";
+import { ParagraphSmall, LabelSmall } from "baseui/typography";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '300px', overflow: 'auto'})}>
+    <div className={css({ height: "300px", overflow: "auto" })}>
       <div
         className={css({
-          width: '100%',
-          height: '700px',
-          padding: '140px 0',
-          backgroundColor: '#ccc',
-          textAlign: 'center',
+          width: "100%",
+          height: "700px",
+          padding: "140px 0",
+          backgroundColor: "#ccc",
+          textAlign: "center",
         })}
       >
         <StatefulPopover
-          initialState={{isOpen: true}}
+          initialState={{ isOpen: true }}
           dismissOnEsc={false}
           dismissOnClickOutside={false}
           content={() => (
diff --git a/documentation-site/examples/popover/dismiss.tsx b/documentation-site/examples/popover/dismiss.tsx
index 03f71078c7..a356bba58a 100644
--- a/documentation-site/examples/popover/dismiss.tsx
+++ b/documentation-site/examples/popover/dismiss.tsx
@@ -1,26 +1,25 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {StatefulPopover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { StatefulPopover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   const contentCx = css({
     padding: theme.sizing.scale500,
-    maxWidth: '300px',
+    maxWidth: "300px",
   });
   return (
     <StatefulPopover
       dismissOnEsc={false}
       dismissOnClickOutside={false}
-      accessibilityType={'tooltip'}
-      content={({close}) => (
+      accessibilityType={"tooltip"}
+      content={({ close }) => (
         <div className={contentCx}>
           <ParagraphSmall paddingBottom="scale400">
-            content render prop is passed a <code>close()</code>{' '}
-            callback so it you can manually trigger popover close
-            from within
+            content render prop is passed a <code>close()</code> callback so it
+            you can manually trigger popover close from within
           </ParagraphSmall>
           <Button onClick={close}>Dismiss</Button>
         </div>
diff --git a/documentation-site/examples/popover/link.tsx b/documentation-site/examples/popover/link.tsx
index c847a37c06..c23e1153b8 100644
--- a/documentation-site/examples/popover/link.tsx
+++ b/documentation-site/examples/popover/link.tsx
@@ -1,17 +1,13 @@
-import * as React from 'react';
-import {StatefulPopover} from 'baseui/popover';
-import {StyledLink} from 'baseui/link';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { StatefulPopover } from "baseui/popover";
+import { StyledLink } from "baseui/link";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   return (
     <StatefulPopover
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
-      accessibilityType={'tooltip'}
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
+      accessibilityType={"tooltip"}
     >
       <StyledLink href="javascript:void(0);" tabIndex={0}>
         Open
diff --git a/documentation-site/examples/popover/overrides.tsx b/documentation-site/examples/popover/overrides.tsx
index f341ad7c61..3eaf277e4b 100644
--- a/documentation-site/examples/popover/overrides.tsx
+++ b/documentation-site/examples/popover/overrides.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulPopover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulPopover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   return (
     <StatefulPopover
-      initialState={{isOpen: true}}
+      initialState={{ isOpen: true }}
       showArrow
       overrides={{
         Arrow: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             backgroundColor: $theme.colors.warning,
           }),
         },
         Body: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             backgroundColor: $theme.colors.warning,
             borderTopLeftRadius: $theme.borders.radius200,
             borderTopRightRadius: $theme.borders.radius200,
@@ -24,7 +24,7 @@ export default function Example() {
           }),
         },
         Inner: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             backgroundColor: $theme.colors.warning,
             borderTopLeftRadius: $theme.borders.radius200,
             borderTopRightRadius: $theme.borders.radius200,
@@ -34,11 +34,7 @@ export default function Example() {
           }),
         },
       }}
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
     >
       <Button>Click Me</Button>
     </StatefulPopover>
diff --git a/documentation-site/examples/popover/placements.tsx b/documentation-site/examples/popover/placements.tsx
index 979e506e87..885d7e6fcd 100644
--- a/documentation-site/examples/popover/placements.tsx
+++ b/documentation-site/examples/popover/placements.tsx
@@ -1,34 +1,30 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
-import {
-  StatefulPopover,
-  PLACEMENT,
-  TRIGGER_TYPE,
-} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
+import { StatefulPopover, PLACEMENT, TRIGGER_TYPE } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div
       className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        flexWrap: 'wrap',
-        height: '560px',
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        flexWrap: "wrap",
+        height: "560px",
       })}
     >
       {Object.values(PLACEMENT).map((key, index) => (
-        <div style={{padding: theme.sizing.scale700}} key={index}>
+        <div style={{ padding: theme.sizing.scale700 }} key={index}>
           <StatefulPopover
             placement={PLACEMENT[key]}
             triggerType={TRIGGER_TYPE.hover}
             content={
               <ParagraphSmall padding="scale300">{`PLACEMENT.${PLACEMENT[key]}`}</ParagraphSmall>
             }
-            accessibilityType={'tooltip'}
+            accessibilityType={"tooltip"}
           >
             <Button>{PLACEMENT[key]}</Button>
           </StatefulPopover>
diff --git a/documentation-site/examples/popover/ref-handling.tsx b/documentation-site/examples/popover/ref-handling.tsx
index 57b3470483..bffd31092d 100644
--- a/documentation-site/examples/popover/ref-handling.tsx
+++ b/documentation-site/examples/popover/ref-handling.tsx
@@ -1,20 +1,16 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {LabelSmall} from 'baseui/typography';
-import {StatefulCheckbox} from 'baseui/checkbox';
-import {
-  StatefulPopover,
-  PLACEMENT,
-  TRIGGER_TYPE,
-} from 'baseui/popover';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { LabelSmall } from "baseui/typography";
+import { StatefulCheckbox } from "baseui/checkbox";
+import { StatefulPopover, PLACEMENT, TRIGGER_TYPE } from "baseui/popover";
 
 const CheckboxWithRef = React.forwardRef((props: any, ref) => {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulCheckbox
       overrides={{
         Root: {
-          props: {ref: ref, ...restProps},
+          props: { ref: ref, ...restProps },
         },
       }}
     >
@@ -28,24 +24,21 @@ export default function Example() {
   return (
     <div
       className={css({
-        paddingTop: '24px',
-        paddingBottom: '24px',
+        paddingTop: "24px",
+        paddingBottom: "24px",
       })}
     >
       <StatefulPopover
         placement={PLACEMENT.bottomLeft}
         triggerType={TRIGGER_TYPE.hover}
         content={
-          <LabelSmall padding="scale300">
-            This is a popover example
-          </LabelSmall>
+          <LabelSmall padding="scale300">This is a popover example</LabelSmall>
         }
-        accessibilityType={'tooltip'}
+        accessibilityType={"tooltip"}
       >
         <CheckboxWithRef>
-          Created a wrapper component that renders Checkbox and
-          passes popover's anchor props to the Checkbox's Root
-          element.
+          Created a wrapper component that renders Checkbox and passes popover's
+          anchor props to the Checkbox's Root element.
         </CheckboxWithRef>
       </StatefulPopover>
       <br />
@@ -53,11 +46,9 @@ export default function Example() {
         placement={PLACEMENT.bottomLeft}
         triggerType={TRIGGER_TYPE.hover}
         content={
-          <LabelSmall padding="scale300">
-            This is a popover example
-          </LabelSmall>
+          <LabelSmall padding="scale300">This is a popover example</LabelSmall>
         }
-        accessibilityType={'tooltip'}
+        accessibilityType={"tooltip"}
       >
         <span>
           <StatefulCheckbox>
diff --git a/documentation-site/examples/popover/ssr-render-all.tsx b/documentation-site/examples/popover/ssr-render-all.tsx
index 0211523926..6b9bc46c25 100644
--- a/documentation-site/examples/popover/ssr-render-all.tsx
+++ b/documentation-site/examples/popover/ssr-render-all.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulPopover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulPopover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   return (
@@ -11,12 +11,10 @@ export default function Example() {
           Server-side rendered (check source!)
         </ParagraphSmall>
       }
-      accessibilityType={'tooltip'}
+      accessibilityType={"tooltip"}
       renderAll
     >
-      <Button>
-        Always Rendered for SEO / server-side rendering
-      </Button>
+      <Button>Always Rendered for SEO / server-side rendering</Button>
     </StatefulPopover>
   );
 }
diff --git a/documentation-site/examples/popover/stateful-click.tsx b/documentation-site/examples/popover/stateful-click.tsx
index 453336445c..9252b02914 100644
--- a/documentation-site/examples/popover/stateful-click.tsx
+++ b/documentation-site/examples/popover/stateful-click.tsx
@@ -1,17 +1,13 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulPopover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulPopover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   return (
     <StatefulPopover
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
-      accessibilityType={'tooltip'}
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
+      accessibilityType={"tooltip"}
     >
       <Button>Open</Button>
     </StatefulPopover>
diff --git a/documentation-site/examples/popover/stateful-hover.tsx b/documentation-site/examples/popover/stateful-hover.tsx
index 50ef68e060..582afe7bbb 100644
--- a/documentation-site/examples/popover/stateful-hover.tsx
+++ b/documentation-site/examples/popover/stateful-hover.tsx
@@ -1,23 +1,17 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {StatefulPopover, TRIGGER_TYPE} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { StatefulPopover, TRIGGER_TYPE } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <StatefulPopover
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
-      accessibilityType={'tooltip'}
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
+      accessibilityType={"tooltip"}
       triggerType={TRIGGER_TYPE.hover}
     >
-      <span className={css({...theme.typography.font300})}>
-        Hover
-      </span>
+      <span className={css({ ...theme.typography.font300 })}>Hover</span>
     </StatefulPopover>
   );
 }
diff --git a/documentation-site/examples/popover/stateless.tsx b/documentation-site/examples/popover/stateless.tsx
index b5f28ec11a..3d5f2b5376 100644
--- a/documentation-site/examples/popover/stateless.tsx
+++ b/documentation-site/examples/popover/stateless.tsx
@@ -1,22 +1,16 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Popover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Popover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <Popover
       isOpen
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
     >
-      <div className={css({...theme.typography.font300})}>
-        Always open
-      </div>
+      <div className={css({ ...theme.typography.font300 })}>Always open</div>
     </Popover>
   );
 }
diff --git a/documentation-site/examples/popover/with-arrow.tsx b/documentation-site/examples/popover/with-arrow.tsx
index bbb6dbf819..23819ef482 100644
--- a/documentation-site/examples/popover/with-arrow.tsx
+++ b/documentation-site/examples/popover/with-arrow.tsx
@@ -1,18 +1,14 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {StatefulPopover} from 'baseui/popover';
-import {ParagraphSmall} from 'baseui/typography';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { StatefulPopover } from "baseui/popover";
+import { ParagraphSmall } from "baseui/typography";
 
 export default function Example() {
   return (
     <StatefulPopover
       showArrow
-      content={
-        <ParagraphSmall padding="scale500">
-          hello world
-        </ParagraphSmall>
-      }
-      accessibilityType={'tooltip'}
+      content={<ParagraphSmall padding="scale500">hello world</ParagraphSmall>}
+      accessibilityType={"tooltip"}
     >
       <Button>Open</Button>
     </StatefulPopover>
diff --git a/documentation-site/examples/progress-bar/basic.tsx b/documentation-site/examples/progress-bar/basic.tsx
index 233b5e16bd..dd85760def 100644
--- a/documentation-site/examples/progress-bar/basic.tsx
+++ b/documentation-site/examples/progress-bar/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
diff --git a/documentation-site/examples/progress-bar/custom-label.tsx b/documentation-site/examples/progress-bar/custom-label.tsx
index 4b1e151e92..acc237dda9 100644
--- a/documentation-site/examples/progress-bar/custom-label.tsx
+++ b/documentation-site/examples/progress-bar/custom-label.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
 
 const MAX_MB_VALUE = 1000;
 
@@ -38,9 +38,7 @@ export default function Example() {
     <ProgressBar
       value={value}
       getProgressLabel={(value) =>
-        `${
-          (MAX_MB_VALUE / 100) * value
-        }mb out of ${MAX_MB_VALUE}mb downloaded`
+        `${(MAX_MB_VALUE / 100) * value}mb out of ${MAX_MB_VALUE}mb downloaded`
       }
       showLabel
     />
diff --git a/documentation-site/examples/progress-bar/negative.tsx b/documentation-site/examples/progress-bar/negative.tsx
index f3d90806dc..b3fb0a4841 100644
--- a/documentation-site/examples/progress-bar/negative.tsx
+++ b/documentation-site/examples/progress-bar/negative.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
@@ -37,7 +37,7 @@ export default function Example() {
       value={value}
       overrides={{
         BarProgress: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             backgroundColor: $theme.colors.negative,
           }),
         },
diff --git a/documentation-site/examples/progress-bar/overrides.tsx b/documentation-site/examples/progress-bar/overrides.tsx
index d65637ef37..f4fa437ce2 100644
--- a/documentation-site/examples/progress-bar/overrides.tsx
+++ b/documentation-site/examples/progress-bar/overrides.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
@@ -37,22 +37,22 @@ export default function Example() {
       value={value}
       overrides={{
         BarProgress: {
-          style: ({$theme, $value}) => {
+          style: ({ $theme, $value }) => {
             return {
               ...$theme.typography.font350,
               backgroundColor: $theme.colors.positive,
               color: $theme.colors.mono200,
-              position: 'relative',
-              ':after': {
-                position: 'absolute',
-                content: $value > 5 ? `"${$value}%"` : '',
-                right: '10px',
+              position: "relative",
+              ":after": {
+                position: "absolute",
+                content: $value > 5 ? `"${$value}%"` : "",
+                right: "10px",
               },
             };
           },
         },
         Bar: {
-          style: ({$theme}) => ({
+          style: ({ $theme }) => ({
             height: $theme.sizing.scale800,
           }),
         },
diff --git a/documentation-site/examples/progress-bar/rounded.tsx b/documentation-site/examples/progress-bar/rounded.tsx
index 590798b9cc..30260018ae 100644
--- a/documentation-site/examples/progress-bar/rounded.tsx
+++ b/documentation-site/examples/progress-bar/rounded.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {Button} from 'baseui/button';
-import {ProgressBarRounded} from 'baseui/progress-bar';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ProgressBarRounded } from "baseui/progress-bar";
+import { useStyletron } from "baseui";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
diff --git a/documentation-site/examples/progress-bar/steps.tsx b/documentation-site/examples/progress-bar/steps.tsx
index 1a5e91fd7b..4563fb3dcf 100644
--- a/documentation-site/examples/progress-bar/steps.tsx
+++ b/documentation-site/examples/progress-bar/steps.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
-import {Button, SIZE} from 'baseui/button';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
+import { Button, SIZE } from "baseui/button";
 
 export default function Example() {
   const STEPS = 5;
@@ -9,30 +9,26 @@ export default function Example() {
   return (
     <div>
       <ProgressBar value={value} steps={5} />
-      <div style={{display: 'flex', justifyContent: 'center'}}>
+      <div style={{ display: "flex", justifyContent: "center" }}>
         <Button
-          onClick={() =>
-            setValue((prevValue) => prevValue - stepSize)
-          }
+          onClick={() => setValue((prevValue) => prevValue - stepSize)}
           size={SIZE.compact}
           disabled={value === 0 || value === 100}
           overrides={{
             BaseButton: {
-              style: {width: '116px', marginRight: '20px'},
+              style: { width: "116px", marginRight: "20px" },
             },
           }}
         >
           Previous Step
         </Button>
         <Button
-          onClick={() =>
-            setValue((prevValue) => prevValue + stepSize)
-          }
+          onClick={() => setValue((prevValue) => prevValue + stepSize)}
           size={SIZE.compact}
           disabled={value === 100}
-          overrides={{BaseButton: {style: {width: '116px'}}}}
+          overrides={{ BaseButton: { style: { width: "116px" } } }}
         >
-          {value >= 80 ? 'Complete' : 'Next Step'}
+          {value >= 80 ? "Complete" : "Next Step"}
         </Button>
       </div>
     </div>
diff --git a/documentation-site/examples/progress-bar/with-label.tsx b/documentation-site/examples/progress-bar/with-label.tsx
index a6cd812989..c8907a7030 100644
--- a/documentation-site/examples/progress-bar/with-label.tsx
+++ b/documentation-site/examples/progress-bar/with-label.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {ProgressBar} from 'baseui/progress-bar';
+import * as React from "react";
+import { ProgressBar } from "baseui/progress-bar";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
diff --git a/documentation-site/examples/radio/basic.tsx b/documentation-site/examples/radio/basic.tsx
index 0ddd5faf1d..939d38720c 100644
--- a/documentation-site/examples/radio/basic.tsx
+++ b/documentation-site/examples/radio/basic.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Radio, RadioGroup} from 'baseui/radio';
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio";
 
 export default function Example() {
-  const [value, setValue] = React.useState('1');
+  const [value, setValue] = React.useState("1");
   return (
     <RadioGroup
       name="basic usage"
diff --git a/documentation-site/examples/radio/disabled.tsx b/documentation-site/examples/radio/disabled.tsx
index 7ce54de8f7..2d49da2fb9 100644
--- a/documentation-site/examples/radio/disabled.tsx
+++ b/documentation-site/examples/radio/disabled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Radio, RadioGroup} from 'baseui/radio';
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/radio/error.tsx b/documentation-site/examples/radio/error.tsx
index d7242d2399..f8f713eab2 100644
--- a/documentation-site/examples/radio/error.tsx
+++ b/documentation-site/examples/radio/error.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Radio, RadioGroup} from 'baseui/radio';
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio";
 
 export default function Example() {
-  const [value, setValue] = React.useState('1');
+  const [value, setValue] = React.useState("1");
   return (
     <RadioGroup
       error
diff --git a/documentation-site/examples/radio/horizontal-align.tsx b/documentation-site/examples/radio/horizontal-align.tsx
index e86cd24d4d..2bf48e5574 100644
--- a/documentation-site/examples/radio/horizontal-align.tsx
+++ b/documentation-site/examples/radio/horizontal-align.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Radio, RadioGroup} from 'baseui/radio';
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio";
 
 export default function Example() {
-  const [value, setValue] = React.useState('1');
+  const [value, setValue] = React.useState("1");
   return (
     <RadioGroup
       align="horizontal"
diff --git a/documentation-site/examples/radio/overrides.tsx b/documentation-site/examples/radio/overrides.tsx
index 09ba81592b..2366a73103 100644
--- a/documentation-site/examples/radio/overrides.tsx
+++ b/documentation-site/examples/radio/overrides.tsx
@@ -1,18 +1,16 @@
-import * as React from 'react';
-import {ParagraphSmall} from 'baseui/typography';
-import {Radio, RadioGroup} from 'baseui/radio';
-import {RadioOverrides} from 'baseui/radio';
+import * as React from "react";
+import { ParagraphSmall } from "baseui/typography";
+import { Radio, RadioGroup } from "baseui/radio";
+import { RadioOverrides } from "baseui/radio";
 
 export default function Example() {
-  const [value, setValue] = React.useState('1');
+  const [value, setValue] = React.useState("1");
   const radioOverrides: RadioOverrides = {
-    Label: ({$value}) => (
-      <ParagraphSmall>
-        Custom label for value: {$value}
-      </ParagraphSmall>
+    Label: ({ $value }) => (
+      <ParagraphSmall>Custom label for value: {$value}</ParagraphSmall>
     ),
     RadioMarkOuter: {
-      style: ({$theme}) => ({
+      style: ({ $theme }) => ({
         backgroundColor: $theme.colors.positive,
       }),
     },
diff --git a/documentation-site/examples/radio/stateful.tsx b/documentation-site/examples/radio/stateful.tsx
index 1b99613ce5..a7247ad322 100644
--- a/documentation-site/examples/radio/stateful.tsx
+++ b/documentation-site/examples/radio/stateful.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Radio, StatefulRadioGroup} from 'baseui/radio';
+import * as React from "react";
+import { Radio, StatefulRadioGroup } from "baseui/radio";
 
 export default function Example() {
   return (
-    <StatefulRadioGroup name="stateful" initialState={{value: '2'}}>
+    <StatefulRadioGroup name="stateful" initialState={{ value: "2" }}>
       <Radio value="1">First</Radio>
       <Radio value="2">Second</Radio>
       <Radio value="3">Third</Radio>
diff --git a/documentation-site/examples/rating/emoticon.tsx b/documentation-site/examples/rating/emoticon.tsx
index e7467ba5d2..9fc79bbdad 100644
--- a/documentation-site/examples/rating/emoticon.tsx
+++ b/documentation-site/examples/rating/emoticon.tsx
@@ -1,12 +1,9 @@
-import * as React from 'react';
-import {EmoticonRating} from 'baseui/rating';
+import * as React from "react";
+import { EmoticonRating } from "baseui/rating";
 
 export default function Example() {
   const [value, setValue] = React.useState(1);
   return (
-    <EmoticonRating
-      value={value}
-      onChange={({value}) => setValue(value)}
-    />
+    <EmoticonRating value={value} onChange={({ value }) => setValue(value)} />
   );
 }
diff --git a/documentation-site/examples/rating/star.tsx b/documentation-site/examples/rating/star.tsx
index b19fd11996..8d37e9ac17 100644
--- a/documentation-site/examples/rating/star.tsx
+++ b/documentation-site/examples/rating/star.tsx
@@ -1,12 +1,7 @@
-import * as React from 'react';
-import {StarRating} from 'baseui/rating';
+import * as React from "react";
+import { StarRating } from "baseui/rating";
 
 export default function Example() {
   const [value, setValue] = React.useState(1);
-  return (
-    <StarRating
-      value={value}
-      onChange={({value}) => setValue(value)}
-    />
-  );
+  return <StarRating value={value} onChange={({ value }) => setValue(value)} />;
 }
diff --git a/documentation-site/examples/rating/starReadOnly.tsx b/documentation-site/examples/rating/starReadOnly.tsx
index 8c3454527a..43a83507a1 100644
--- a/documentation-site/examples/rating/starReadOnly.tsx
+++ b/documentation-site/examples/rating/starReadOnly.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {StarRating} from 'baseui/rating';
+import * as React from "react";
+import { StarRating } from "baseui/rating";
 
 export default function Example() {
   const [value, setValue] = React.useState(3);
   return (
     <StarRating
       value={value}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       readOnly
     />
   );
diff --git a/documentation-site/examples/segmented-control/badge-hint.tsx b/documentation-site/examples/segmented-control/badge-hint.tsx
index 39eb81ba55..f8a3029b5d 100644
--- a/documentation-site/examples/segmented-control/badge-hint.tsx
+++ b/documentation-site/examples/segmented-control/badge-hint.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {SegmentedControl, Segment} from 'baseui/segmented-control';
+import * as React from "react";
+import { SegmentedControl, Segment } from "baseui/segmented-control";
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState('0');
+  const [activeKey, setActiveKey] = React.useState("0");
   return (
     <SegmentedControl
       activeKey={activeKey}
-      onChange={({activeKey}) => {
+      onChange={({ activeKey }) => {
         setActiveKey(activeKey);
       }}
     >
diff --git a/documentation-site/examples/segmented-control/badge.tsx b/documentation-site/examples/segmented-control/badge.tsx
index 118e6dce64..3c97fc5dd3 100644
--- a/documentation-site/examples/segmented-control/badge.tsx
+++ b/documentation-site/examples/segmented-control/badge.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {SegmentedControl, Segment} from 'baseui/segmented-control';
+import * as React from "react";
+import { SegmentedControl, Segment } from "baseui/segmented-control";
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState('0');
+  const [activeKey, setActiveKey] = React.useState("0");
   return (
     <SegmentedControl
       activeKey={activeKey}
-      onChange={({activeKey}) => {
+      onChange={({ activeKey }) => {
         setActiveKey(activeKey);
       }}
     >
       <Segment key="0" label="Contacts" />
-      <Segment key="1" label="Messages" badge={'2'} />
+      <Segment key="1" label="Messages" badge={"2"} />
     </SegmentedControl>
   );
 }
diff --git a/documentation-site/examples/segmented-control/basic.tsx b/documentation-site/examples/segmented-control/basic.tsx
index 7d5e2a0a59..7d16be6664 100644
--- a/documentation-site/examples/segmented-control/basic.tsx
+++ b/documentation-site/examples/segmented-control/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {SegmentedControl, Segment} from 'baseui/segmented-control';
+import * as React from "react";
+import { SegmentedControl, Segment } from "baseui/segmented-control";
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState('1');
+  const [activeKey, setActiveKey] = React.useState("1");
   return (
     <SegmentedControl
       activeKey={activeKey}
-      onChange={({activeKey}) => {
+      onChange={({ activeKey }) => {
         setActiveKey(activeKey);
       }}
     >
diff --git a/documentation-site/examples/segmented-control/disabled.tsx b/documentation-site/examples/segmented-control/disabled.tsx
index def8bb8d94..9697749241 100644
--- a/documentation-site/examples/segmented-control/disabled.tsx
+++ b/documentation-site/examples/segmented-control/disabled.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {SegmentedControl, Segment} from 'baseui/segmented-control';
+import * as React from "react";
+import { SegmentedControl, Segment } from "baseui/segmented-control";
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState('0');
+  const [activeKey, setActiveKey] = React.useState("0");
   return (
     <SegmentedControl
       activeKey={activeKey}
-      onChange={({activeKey}) => {
+      onChange={({ activeKey }) => {
         setActiveKey(activeKey);
       }}
     >
diff --git a/documentation-site/examples/select/async-options.tsx b/documentation-site/examples/select/async-options.tsx
index 0e89f7e77b..9323452c38 100644
--- a/documentation-site/examples/select/async-options.tsx
+++ b/documentation-site/examples/select/async-options.tsx
@@ -1,63 +1,63 @@
-import * as React from 'react';
-import {Select} from 'baseui/select';
+import * as React from "react";
+import { Select } from "baseui/select";
 
 const OPTIONS = [
-  {label: 'AliceBlue', id: '#F0F8FF'},
-  {label: 'AntiqueWhite', id: '#FAEBD7'},
-  {label: 'Aqua', id: '#00FFFF'},
-  {label: 'Aquamarine', id: '#7FFFD4'},
-  {label: 'Azure', id: '#F0FFFF'},
-  {label: 'Beige', id: '#F5F5DC'},
-  {label: 'IndianRed', id: '#CD5C5C'},
-  {label: 'LightCoral', id: '#F08080'},
-  {label: 'Salmon', id: '#FA8072'},
-  {label: 'DarkSalmon', id: '#E9967A'},
-  {label: 'LightSalmon', id: '#FFA07A'},
-  {label: 'Crimson', id: '#DC143C'},
-  {label: 'Red', id: '#FF0000'},
-  {label: 'FireBrick', id: '#B22222'},
-  {label: 'DarkRed', id: '#8B0000'},
-  {label: 'Pink', id: '#FFC0CB'},
-  {label: 'LightPink', id: '#FFB6C1'},
-  {label: 'HotPink', id: '#FF69B4'},
-  {label: 'DeepPink', id: '#FF1493'},
-  {label: 'MediumVioletRed', id: '#C71585'},
-  {label: 'PaleVioletRed', id: '#DB7093'},
-  {label: 'Coral', id: '#FF7F50'},
-  {label: 'Tomato', id: '#FF6347'},
-  {label: 'OrangeRed', id: '#FF4500'},
-  {label: 'DarkOrange', id: '#FF8C00'},
-  {label: 'Orange', id: '#FFA500'},
-  {label: 'Gold', id: '#FFD700'},
-  {label: 'Yellow', id: '#FFFF00'},
-  {label: 'LightYellow', id: '#FFFFE0'},
-  {label: 'LemonChiffon', id: '#FFFACD'},
-  {label: 'LightGoldenrodYellow', id: '#FAFAD2'},
-  {label: 'PapayaWhip', id: '#FFEFD5'},
-  {label: 'Moccasin', id: '#FFE4B5'},
-  {label: 'PeachPuff', id: '#FFDAB9'},
-  {label: 'PaleGoldenrod', id: '#EEE8AA'},
-  {label: 'Khaki', id: '#F0E68C'},
-  {label: 'DarkKhaki', id: '#BDB76B'},
-  {label: 'Lavender', id: '#E6E6FA'},
-  {label: 'Thistle', id: '#D8BFD8'},
-  {label: 'Plum', id: '#DDA0DD'},
-  {label: 'Violet', id: '#EE82EE'},
-  {label: 'Orchid', id: '#DA70D6'},
-  {label: 'Fuchsia', id: '#FF00FF'},
-  {label: 'Magenta', id: '#FF00FF'},
-  {label: 'MediumOrchid', id: '#BA55D3'},
-  {label: 'MediumPurple', id: '#9370DB'},
-  {label: 'Amethyst', id: '#9966CC'},
-  {label: 'BlueViolet', id: '#8A2BE2'},
-  {label: 'DarkViolet', id: '#9400D3'},
-  {label: 'DarkOrchid', id: '#9932CC'},
-  {label: 'DarkMagenta', id: '#8B008B'},
-  {label: 'Purple', id: '#800080'},
-  {label: 'Indigo', id: '#4B0082'},
-  {label: 'SlateBlue', id: '#6A5ACD'},
-  {label: 'DarkSlateBlue', id: '#483D8B'},
-  {label: 'MediumSlateBlue', id: '"7B68E'},
+  { label: "AliceBlue", id: "#F0F8FF" },
+  { label: "AntiqueWhite", id: "#FAEBD7" },
+  { label: "Aqua", id: "#00FFFF" },
+  { label: "Aquamarine", id: "#7FFFD4" },
+  { label: "Azure", id: "#F0FFFF" },
+  { label: "Beige", id: "#F5F5DC" },
+  { label: "IndianRed", id: "#CD5C5C" },
+  { label: "LightCoral", id: "#F08080" },
+  { label: "Salmon", id: "#FA8072" },
+  { label: "DarkSalmon", id: "#E9967A" },
+  { label: "LightSalmon", id: "#FFA07A" },
+  { label: "Crimson", id: "#DC143C" },
+  { label: "Red", id: "#FF0000" },
+  { label: "FireBrick", id: "#B22222" },
+  { label: "DarkRed", id: "#8B0000" },
+  { label: "Pink", id: "#FFC0CB" },
+  { label: "LightPink", id: "#FFB6C1" },
+  { label: "HotPink", id: "#FF69B4" },
+  { label: "DeepPink", id: "#FF1493" },
+  { label: "MediumVioletRed", id: "#C71585" },
+  { label: "PaleVioletRed", id: "#DB7093" },
+  { label: "Coral", id: "#FF7F50" },
+  { label: "Tomato", id: "#FF6347" },
+  { label: "OrangeRed", id: "#FF4500" },
+  { label: "DarkOrange", id: "#FF8C00" },
+  { label: "Orange", id: "#FFA500" },
+  { label: "Gold", id: "#FFD700" },
+  { label: "Yellow", id: "#FFFF00" },
+  { label: "LightYellow", id: "#FFFFE0" },
+  { label: "LemonChiffon", id: "#FFFACD" },
+  { label: "LightGoldenrodYellow", id: "#FAFAD2" },
+  { label: "PapayaWhip", id: "#FFEFD5" },
+  { label: "Moccasin", id: "#FFE4B5" },
+  { label: "PeachPuff", id: "#FFDAB9" },
+  { label: "PaleGoldenrod", id: "#EEE8AA" },
+  { label: "Khaki", id: "#F0E68C" },
+  { label: "DarkKhaki", id: "#BDB76B" },
+  { label: "Lavender", id: "#E6E6FA" },
+  { label: "Thistle", id: "#D8BFD8" },
+  { label: "Plum", id: "#DDA0DD" },
+  { label: "Violet", id: "#EE82EE" },
+  { label: "Orchid", id: "#DA70D6" },
+  { label: "Fuchsia", id: "#FF00FF" },
+  { label: "Magenta", id: "#FF00FF" },
+  { label: "MediumOrchid", id: "#BA55D3" },
+  { label: "MediumPurple", id: "#9370DB" },
+  { label: "Amethyst", id: "#9966CC" },
+  { label: "BlueViolet", id: "#8A2BE2" },
+  { label: "DarkViolet", id: "#9400D3" },
+  { label: "DarkOrchid", id: "#9932CC" },
+  { label: "DarkMagenta", id: "#8B008B" },
+  { label: "Purple", id: "#800080" },
+  { label: "Indigo", id: "#4B0082" },
+  { label: "SlateBlue", id: "#6A5ACD" },
+  { label: "DarkSlateBlue", id: "#483D8B" },
+  { label: "MediumSlateBlue", id: '"7B68E' },
 ];
 
 function debounce(fn: any, delay: number) {
@@ -84,9 +84,7 @@ export default function Example() {
     setIsLoading(true);
     setTimeout(() => {
       const nextOptions = OPTIONS.filter((option) => {
-        return option.label
-          .toLowerCase()
-          .includes(term.toLowerCase());
+        return option.label.toLowerCase().includes(term.toLowerCase());
       });
       setOptions(nextOptions);
       setIsLoading(false);
@@ -97,7 +95,7 @@ export default function Example() {
     <Select
       isLoading={isLoading}
       options={options}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       onInputChange={(event: React.SyntheticEvent) => {
         const target = event.target as HTMLInputElement;
         handleInputChange(target.value);
diff --git a/documentation-site/examples/select/control-ref-dropdown.tsx b/documentation-site/examples/select/control-ref-dropdown.tsx
index b4afee7ebb..093f5a7945 100644
--- a/documentation-site/examples/select/control-ref-dropdown.tsx
+++ b/documentation-site/examples/select/control-ref-dropdown.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Select, Value, ImperativeMethods} from 'baseui/select';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Select, Value, ImperativeMethods } from "baseui/select";
+import { Button } from "baseui/button";
 
 export default function Example() {
   const [css] = useStyletron();
@@ -11,23 +11,21 @@ export default function Example() {
     <div>
       <div
         className={css({
-          display: 'flex',
-          justifyContent: 'space-between',
-          marginBottom: '20px',
+          display: "flex",
+          justifyContent: "space-between",
+          marginBottom: "20px",
         })}
       >
         <Button
           onClick={() => {
-            controlRef.current &&
-              controlRef.current.setDropdownOpen(true);
+            controlRef.current && controlRef.current.setDropdownOpen(true);
           }}
         >
           Open Dropdown
         </Button>
         <Button
           onClick={() => {
-            controlRef.current &&
-              controlRef.current.setDropdownOpen(false);
+            controlRef.current && controlRef.current.setDropdownOpen(false);
           }}
         >
           Close Dropdown
@@ -37,14 +35,14 @@ export default function Example() {
       <Select
         controlRef={controlRef}
         options={[
-          {id: 'a', label: 'apple'},
-          {id: 'b', label: 'banana'},
-          {id: 'c', label: 'orange'},
+          { id: "a", label: "apple" },
+          { id: "b", label: "banana" },
+          { id: "c", label: "orange" },
         ]}
         value={value}
-        onChange={({value}) => setValue(value)}
+        onChange={({ value }) => setValue(value)}
         overrides={{
-          ValueContainer: {props: {'data-id': 'selected'}},
+          ValueContainer: { props: { "data-id": "selected" } },
         }}
       />
     </div>
diff --git a/documentation-site/examples/select/control-ref-input-value.tsx b/documentation-site/examples/select/control-ref-input-value.tsx
index 61baec5887..a4b766d74b 100644
--- a/documentation-site/examples/select/control-ref-input-value.tsx
+++ b/documentation-site/examples/select/control-ref-input-value.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Select, Value, ImperativeMethods} from 'baseui/select';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Select, Value, ImperativeMethods } from "baseui/select";
+import { Button } from "baseui/button";
 
 export default function Example() {
   const [css] = useStyletron();
@@ -11,13 +11,12 @@ export default function Example() {
     <div>
       <div
         className={css({
-          marginBottom: '20px',
+          marginBottom: "20px",
         })}
       >
         <Button
           onClick={() =>
-            controlRef.current &&
-            controlRef.current.setInputValue('orange')
+            controlRef.current && controlRef.current.setInputValue("orange")
           }
         >
           Set value to "orange"
@@ -27,14 +26,14 @@ export default function Example() {
       <Select
         controlRef={controlRef}
         options={[
-          {id: 'a', label: 'apple'},
-          {id: 'b', label: 'banana'},
-          {id: 'c', label: 'orange'},
+          { id: "a", label: "apple" },
+          { id: "b", label: "banana" },
+          { id: "c", label: "orange" },
         ]}
         value={value}
-        onChange={({value}) => setValue(value)}
+        onChange={({ value }) => setValue(value)}
         overrides={{
-          ValueContainer: {props: {'data-id': 'selected'}},
+          ValueContainer: { props: { "data-id": "selected" } },
         }}
       />
     </div>
diff --git a/documentation-site/examples/select/controlled.tsx b/documentation-site/examples/select/controlled.tsx
index 546c21f4a7..b857b6cd01 100644
--- a/documentation-site/examples/select/controlled.tsx
+++ b/documentation-site/examples/select/controlled.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
   return (
     <Select
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/creatable-multi.tsx b/documentation-site/examples/select/creatable-multi.tsx
index 33dfa439f9..b18e8c32f3 100644
--- a/documentation-site/examples/select/creatable-multi.tsx
+++ b/documentation-site/examples/select/creatable-multi.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
@@ -8,16 +8,16 @@ export default function Example() {
       creatable
       multi
       options={[
-        {id: 'Portland', label: 'Portland'},
-        {id: 'NYC', label: 'New York City'},
-        {id: 'LosAngeles', label: 'Los Angeles'},
-        {id: 'Boston', label: 'Boston'},
-        {id: 'Atlanta', label: 'Atlanta'},
-        {id: 'SanFrancisco', label: 'San Francisco'},
+        { id: "Portland", label: "Portland" },
+        { id: "NYC", label: "New York City" },
+        { id: "LosAngeles", label: "Los Angeles" },
+        { id: "Boston", label: "Boston" },
+        { id: "Atlanta", label: "Atlanta" },
+        { id: "SanFrancisco", label: "San Francisco" },
       ]}
       labelKey="label"
       valueKey="id"
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/creatable.tsx b/documentation-site/examples/select/creatable.tsx
index 80234b8c28..94b8a0ecfe 100644
--- a/documentation-site/examples/select/creatable.tsx
+++ b/documentation-site/examples/select/creatable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
@@ -7,16 +7,16 @@ export default function Example() {
     <Select
       creatable
       options={[
-        {id: 'Portland', label: 'Portland'},
-        {id: 'NYC', label: 'New York City'},
-        {id: 'LosAngeles', label: 'Los Angeles'},
-        {id: 'Boston', label: 'Boston'},
-        {id: 'Atlanta', label: 'Atlanta'},
-        {id: 'SanFrancisco', label: 'San Francisco'},
+        { id: "Portland", label: "Portland" },
+        { id: "NYC", label: "New York City" },
+        { id: "LosAngeles", label: "Los Angeles" },
+        { id: "Boston", label: "Boston" },
+        { id: "Atlanta", label: "Atlanta" },
+        { id: "SanFrancisco", label: "San Francisco" },
       ]}
       labelKey="label"
       valueKey="id"
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/focus.tsx b/documentation-site/examples/select/focus.tsx
index c35673bde3..78a865ffd8 100644
--- a/documentation-site/examples/select/focus.tsx
+++ b/documentation-site/examples/select/focus.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Select, Value, ImperativeMethods} from 'baseui/select';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Select, Value, ImperativeMethods } from "baseui/select";
+import { Button } from "baseui/button";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   const [value, setValue] = React.useState<Value>([]);
   const controlRef = React.useRef<ImperativeMethods>(null);
   return (
-    <div className={css({display: 'flex'})}>
+    <div className={css({ display: "flex" })}>
       <Select
         controlRef={controlRef}
         creatable
         options={[
-          {id: 'Portland', label: 'Portland'},
-          {id: 'NYC', label: 'New York City'},
-          {id: 'LosAngeles', label: 'Los Angeles'},
-          {id: 'Boston', label: 'Boston'},
-          {id: 'Atlanta', label: 'Atlanta'},
-          {id: 'SanFrancisco', label: 'San Francisco'},
+          { id: "Portland", label: "Portland" },
+          { id: "NYC", label: "New York City" },
+          { id: "LosAngeles", label: "Los Angeles" },
+          { id: "Boston", label: "Boston" },
+          { id: "Atlanta", label: "Atlanta" },
+          { id: "SanFrancisco", label: "San Francisco" },
         ]}
         labelKey="label"
         valueKey="id"
-        onChange={({value}) => setValue(value)}
+        onChange={({ value }) => setValue(value)}
         value={value}
         overrides={{
           Root: {
@@ -33,9 +33,7 @@ export default function Example() {
         }}
       />
       <Button
-        onClick={() =>
-          controlRef.current && controlRef.current.setInputFocus()
-        }
+        onClick={() => controlRef.current && controlRef.current.setInputFocus()}
       >
         Click to focus
       </Button>
diff --git a/documentation-site/examples/select/grouped.tsx b/documentation-site/examples/select/grouped.tsx
index fd071cad14..6300ad3039 100644
--- a/documentation-site/examples/select/grouped.tsx
+++ b/documentation-site/examples/select/grouped.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 const options = {
-  __ungrouped: [{id: 'Black', color: '#000000'}],
+  __ungrouped: [{ id: "Black", color: "#000000" }],
   Blueish: [
-    {id: 'AliceBlue', color: '#F0F8FF'},
-    {id: 'Aqua', color: '#00FFFF'},
-    {id: 'Aquamarine', color: '#7FFFD4'},
+    { id: "AliceBlue", color: "#F0F8FF" },
+    { id: "Aqua", color: "#00FFFF" },
+    { id: "Aquamarine", color: "#7FFFD4" },
   ],
   Whiteish: [
-    {id: 'AntiqueWhite', color: '#FAEBD7'},
-    {id: 'Azure', color: '#F0FFFF'},
-    {id: 'Beige', color: '#F5F5DC'},
+    { id: "AntiqueWhite", color: "#FAEBD7" },
+    { id: "Azure", color: "#F0FFFF" },
+    { id: "Beige", color: "#F5F5DC" },
   ],
 };
 
@@ -22,7 +22,7 @@ export default function Example() {
       options={options}
       labelKey="id"
       valueKey="color"
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/in-modal.tsx b/documentation-site/examples/select/in-modal.tsx
index 64b6f39eda..5a8c61e3c2 100644
--- a/documentation-site/examples/select/in-modal.tsx
+++ b/documentation-site/examples/select/in-modal.tsx
@@ -1,13 +1,13 @@
-import React, {useState} from 'react';
-import {Button} from 'baseui/button';
-import {StatefulSelect} from 'baseui/select';
+import React, { useState } from "react";
+import { Button } from "baseui/button";
+import { StatefulSelect } from "baseui/select";
 import {
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   ModalButton,
-} from 'baseui/modal';
+} from "baseui/modal";
 
 export default function Example() {
   const [isOpen, setIsOpen] = useState(false);
@@ -30,12 +30,12 @@ export default function Example() {
         <ModalBody>
           <StatefulSelect
             options={[
-              {id: 'AliceBlue', color: '#F0F8FF'},
-              {id: 'AntiqueWhite', color: '#FAEBD7'},
-              {id: 'Aqua', color: '#00FFFF'},
-              {id: 'Aquamarine', color: '#7FFFD4'},
-              {id: 'Azure', color: '#F0FFFF'},
-              {id: 'Beige', color: '#F5F5DC'},
+              { id: "AliceBlue", color: "#F0F8FF" },
+              { id: "AntiqueWhite", color: "#FAEBD7" },
+              { id: "Aqua", color: "#00FFFF" },
+              { id: "Aquamarine", color: "#7FFFD4" },
+              { id: "Azure", color: "#F0FFFF" },
+              { id: "Beige", color: "#F5F5DC" },
             ]}
             labelKey="id"
             valueKey="color"
diff --git a/documentation-site/examples/select/overridden-dropdown.tsx b/documentation-site/examples/select/overridden-dropdown.tsx
index ac413d4452..e8746bca89 100644
--- a/documentation-site/examples/select/overridden-dropdown.tsx
+++ b/documentation-site/examples/select/overridden-dropdown.tsx
@@ -1,27 +1,27 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
   return (
     <Select
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
       value={value}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       overrides={{
         Popover: {
           props: {
             overrides: {
-              Body: {style: {marginTop: '0', marginBottom: '0'}},
+              Body: { style: { marginTop: "0", marginBottom: "0" } },
             },
           },
         },
diff --git a/documentation-site/examples/select/overridden-tag.tsx b/documentation-site/examples/select/overridden-tag.tsx
index 380950b3a0..80b526544b 100644
--- a/documentation-site/examples/select/overridden-tag.tsx
+++ b/documentation-site/examples/select/overridden-tag.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([
-    {label: 'Atlanta', id: 'ATL'},
+    { label: "Atlanta", id: "ATL" },
   ]);
 
   return (
@@ -14,29 +14,29 @@ export default function Example() {
             overrides: {
               Root: {
                 style: {
-                  borderRadius: '0px',
-                  backgroundColor: 'slateblue',
+                  borderRadius: "0px",
+                  backgroundColor: "slateblue",
                 },
               },
               Action: {
                 style: {
-                  borderRadius: '0px',
-                  ':hover': {
-                    backgroundColor: 'mediumpurple',
+                  borderRadius: "0px",
+                  ":hover": {
+                    backgroundColor: "mediumpurple",
                   },
-                  ':focus': {
-                    backgroundColor: 'mediumpurple',
+                  ":focus": {
+                    backgroundColor: "mediumpurple",
                   },
                 },
               },
               Text: {
                 style: {
-                  color: 'lavender',
+                  color: "lavender",
                 },
               },
               ActionIcon: {
                 props: {
-                  color: 'lavender',
+                  color: "lavender",
                 },
               },
             },
@@ -46,12 +46,12 @@ export default function Example() {
       multi
       type="search"
       options={[
-        {label: 'Atlanta', id: 'ATL'},
-        {label: 'Baltimore', id: 'BWI'},
-        {label: 'Chicago', id: 'ORD'},
-        {label: 'Denver', id: 'DEN'},
+        { label: "Atlanta", id: "ATL" },
+        { label: "Baltimore", id: "BWI" },
+        { label: "Chicago", id: "ORD" },
+        { label: "Denver", id: "DEN" },
       ]}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/overridden.tsx b/documentation-site/examples/select/overridden.tsx
index 000637cce3..41186eea74 100644
--- a/documentation-site/examples/select/overridden.tsx
+++ b/documentation-site/examples/select/overridden.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
-import {Select, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
   return (
     <Select
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
       value={value}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       overrides={{
         StatefulMenu: {
           props: {
diff --git a/documentation-site/examples/select/search-multi-pick.tsx b/documentation-site/examples/select/search-multi-pick.tsx
index 7e3f79607f..9a5099985c 100644
--- a/documentation-site/examples/select/search-multi-pick.tsx
+++ b/documentation-site/examples/select/search-multi-pick.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {Select, TYPE, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, TYPE, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
   return (
     <Select
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
@@ -19,7 +19,7 @@ export default function Example() {
       maxDropdownHeight="300px"
       type={TYPE.search}
       multi
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/search-single-pick.tsx b/documentation-site/examples/select/search-single-pick.tsx
index bb0cb0f21b..190e72fcc5 100644
--- a/documentation-site/examples/select/search-single-pick.tsx
+++ b/documentation-site/examples/select/search-single-pick.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
-import {Select, TYPE, Value} from 'baseui/select';
+import * as React from "react";
+import { Select, TYPE, Value } from "baseui/select";
 
 export default function Example() {
   const [value, setValue] = React.useState<Value>([]);
   return (
     <Select
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
       placeholder="Choose a color"
       maxDropdownHeight="300px"
       type={TYPE.search}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/select/sizes.tsx b/documentation-site/examples/select/sizes.tsx
index 7a4d5f8206..6d9b04edde 100644
--- a/documentation-site/examples/select/sizes.tsx
+++ b/documentation-site/examples/select/sizes.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {StatefulSelect} from 'baseui/select';
-import {SIZE} from 'baseui/input';
+import * as React from "react";
+import { StatefulSelect } from "baseui/select";
+import { SIZE } from "baseui/input";
 
 export default function Example() {
   return (
@@ -8,12 +8,12 @@ export default function Example() {
       <StatefulSelect
         size={SIZE.compact}
         options={[
-          {id: 'AliceBlue', color: '#F0F8FF'},
-          {id: 'AntiqueWhite', color: '#FAEBD7'},
-          {id: 'Aqua', color: '#00FFFF'},
-          {id: 'Aquamarine', color: '#7FFFD4'},
-          {id: 'Azure', color: '#F0FFFF'},
-          {id: 'Beige', color: '#F5F5DC'},
+          { id: "AliceBlue", color: "#F0F8FF" },
+          { id: "AntiqueWhite", color: "#FAEBD7" },
+          { id: "Aqua", color: "#00FFFF" },
+          { id: "Aquamarine", color: "#7FFFD4" },
+          { id: "Azure", color: "#F0FFFF" },
+          { id: "Beige", color: "#F5F5DC" },
         ]}
         labelKey="id"
         valueKey="color"
@@ -22,12 +22,12 @@ export default function Example() {
       <br />
       <StatefulSelect
         options={[
-          {id: 'AliceBlue', color: '#F0F8FF'},
-          {id: 'AntiqueWhite', color: '#FAEBD7'},
-          {id: 'Aqua', color: '#00FFFF'},
-          {id: 'Aquamarine', color: '#7FFFD4'},
-          {id: 'Azure', color: '#F0FFFF'},
-          {id: 'Beige', color: '#F5F5DC'},
+          { id: "AliceBlue", color: "#F0F8FF" },
+          { id: "AntiqueWhite", color: "#FAEBD7" },
+          { id: "Aqua", color: "#00FFFF" },
+          { id: "Aquamarine", color: "#7FFFD4" },
+          { id: "Azure", color: "#F0FFFF" },
+          { id: "Beige", color: "#F5F5DC" },
         ]}
         labelKey="id"
         valueKey="color"
@@ -37,12 +37,12 @@ export default function Example() {
       <StatefulSelect
         size={SIZE.large}
         options={[
-          {id: 'AliceBlue', color: '#F0F8FF'},
-          {id: 'AntiqueWhite', color: '#FAEBD7'},
-          {id: 'Aqua', color: '#00FFFF'},
-          {id: 'Aquamarine', color: '#7FFFD4'},
-          {id: 'Azure', color: '#F0FFFF'},
-          {id: 'Beige', color: '#F5F5DC'},
+          { id: "AliceBlue", color: "#F0F8FF" },
+          { id: "AntiqueWhite", color: "#FAEBD7" },
+          { id: "Aqua", color: "#00FFFF" },
+          { id: "Aquamarine", color: "#7FFFD4" },
+          { id: "Azure", color: "#F0FFFF" },
+          { id: "Beige", color: "#F5F5DC" },
         ]}
         labelKey="id"
         valueKey="color"
diff --git a/documentation-site/examples/select/uncontrolled.tsx b/documentation-site/examples/select/uncontrolled.tsx
index 349522a8b5..9ecf4e72d4 100644
--- a/documentation-site/examples/select/uncontrolled.tsx
+++ b/documentation-site/examples/select/uncontrolled.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {StatefulSelect} from 'baseui/select';
+import * as React from "react";
+import { StatefulSelect } from "baseui/select";
 
 export default function Example() {
   return (
     <StatefulSelect
       options={[
-        {id: 'AliceBlue', color: '#F0F8FF'},
-        {id: 'AntiqueWhite', color: '#FAEBD7'},
-        {id: 'Aqua', color: '#00FFFF'},
-        {id: 'Aquamarine', color: '#7FFFD4'},
-        {id: 'Azure', color: '#F0FFFF'},
-        {id: 'Beige', color: '#F5F5DC'},
+        { id: "AliceBlue", color: "#F0F8FF" },
+        { id: "AntiqueWhite", color: "#FAEBD7" },
+        { id: "Aqua", color: "#00FFFF" },
+        { id: "Aquamarine", color: "#7FFFD4" },
+        { id: "Azure", color: "#F0FFFF" },
+        { id: "Beige", color: "#F5F5DC" },
       ]}
       labelKey="id"
       valueKey="color"
diff --git a/documentation-site/examples/select/with-many-options.tsx b/documentation-site/examples/select/with-many-options.tsx
index 2ecf3c1221..4d3e3c9c4a 100644
--- a/documentation-site/examples/select/with-many-options.tsx
+++ b/documentation-site/examples/select/with-many-options.tsx
@@ -1,18 +1,9 @@
-import * as React from 'react';
-import {withStyle} from 'baseui';
-import {
-  Option,
-  Select,
-  StyledDropdownListItem,
-  Value,
-} from 'baseui/select';
-import {
-  StyledList,
-  StyledEmptyState,
-  OptionListProps,
-} from 'baseui/menu';
+import * as React from "react";
+import { withStyle } from "baseui";
+import { Option, Select, StyledDropdownListItem, Value } from "baseui/select";
+import { StyledList, StyledEmptyState, OptionListProps } from "baseui/menu";
 
-import {FixedSizeList} from 'react-window';
+import { FixedSizeList } from "react-window";
 
 const LIST_ITEM_HEIGHT = 36;
 const EMPTY_LIST_HEIGHT = 72;
@@ -21,8 +12,8 @@ const MAX_LIST_HEIGHT = 500;
 const ListItem = withStyle(StyledDropdownListItem, {
   paddingTop: 0,
   paddingBottom: 0,
-  display: 'flex',
-  alignItems: 'center',
+  display: "flex",
+  alignItems: "center",
 });
 
 const FixedSizeListItem = ({
@@ -30,17 +21,17 @@ const FixedSizeListItem = ({
   index,
   style,
 }: {
-  data: {props: OptionListProps}[];
+  data: { props: OptionListProps }[];
   index: number;
   style: React.CSSProperties;
 }) => {
-  const {item, overrides, ...restChildProps} = data[index].props;
+  const { item, overrides, ...restChildProps } = data[index].props;
   return (
     <ListItem
       key={item.id}
       // @ts-ignore todo: is this working? to adjust styletron props if so
       style={{
-        boxSizing: 'border-box',
+        boxSizing: "border-box",
         ...style,
       }}
       {...restChildProps}
@@ -56,10 +47,7 @@ const VirtualDropdown = React.forwardRef<HTMLUListElement, any>(
 
     if (!children[0] || !children[0].props.item) {
       return (
-        <StyledList
-          $style={{height: EMPTY_LIST_HEIGHT + 'px'}}
-          ref={ref}
-        >
+        <StyledList $style={{ height: EMPTY_LIST_HEIGHT + "px" }} ref={ref}>
           <StyledEmptyState {...children[0].props} />
         </StyledList>
       );
@@ -77,10 +65,9 @@ const VirtualDropdown = React.forwardRef<HTMLUListElement, any>(
           height={height}
           itemCount={children.length}
           itemData={children}
-          itemKey={(
-            index: number,
-            data: {props: OptionListProps}[],
-          ) => data[index].props.item.id}
+          itemKey={(index: number, data: { props: OptionListProps }[]) =>
+            data[index].props.item.id
+          }
           itemSize={LIST_ITEM_HEIGHT}
         >
           {FixedSizeListItem}
@@ -95,7 +82,7 @@ const options: Option[] = [];
 for (let i = 0; i < 10000; i += 1) {
   options.push({
     id: i,
-    label: '' + i,
+    label: "" + i,
   });
 }
 
@@ -106,8 +93,8 @@ export default function Example() {
       options={options}
       labelKey="id"
       valueKey="label"
-      overrides={{Dropdown: {component: VirtualDropdown}}}
-      onChange={({value}) => setValue(value)}
+      overrides={{ Dropdown: { component: VirtualDropdown } }}
+      onChange={({ value }) => setValue(value)}
       value={value}
     />
   );
diff --git a/documentation-site/examples/side-navigation/basic.tsx b/documentation-site/examples/side-navigation/basic.tsx
index 074f47879d..5b530ca8dc 100644
--- a/documentation-site/examples/side-navigation/basic.tsx
+++ b/documentation-site/examples/side-navigation/basic.tsx
@@ -1,48 +1,48 @@
-import React, {useState} from 'react';
-import {Navigation} from 'baseui/side-navigation';
+import React, { useState } from "react";
+import { Navigation } from "baseui/side-navigation";
 
 const nav = [
   {
-    title: 'Colors',
-    itemId: '#level1.1',
+    title: "Colors",
+    itemId: "#level1.1",
     subNav: [
       {
-        title: 'Primary',
-        itemId: '#level1.1.1',
+        title: "Primary",
+        itemId: "#level1.1.1",
       },
       {
-        title: 'Shades',
-        itemId: '#level1.1.2',
+        title: "Shades",
+        itemId: "#level1.1.2",
         subNav: [
           {
-            title: 'Dark',
-            itemId: '#level1.1.2.1',
+            title: "Dark",
+            itemId: "#level1.1.2.1",
           },
           {
-            title: 'Light',
-            itemId: '#level1.1.2.2',
+            title: "Light",
+            itemId: "#level1.1.2.2",
           },
         ],
       },
     ],
   },
   {
-    title: 'Sizing',
-    itemId: '#level1.2',
+    title: "Sizing",
+    itemId: "#level1.2",
   },
   {
-    title: 'Typography',
-    itemId: '#level1.3',
+    title: "Typography",
+    itemId: "#level1.3",
   },
 ];
 
 export default function Example() {
-  const [location, setLocation] = useState('#level1.1.1');
+  const [location, setLocation] = useState("#level1.1.1");
   return (
     <Navigation
       items={nav}
       activeItemId={location}
-      onChange={({item}) => setLocation(item.itemId)}
+      onChange={({ item }) => setLocation(item.itemId)}
     />
   );
 }
diff --git a/documentation-site/examples/side-navigation/nav-overrides.tsx b/documentation-site/examples/side-navigation/nav-overrides.tsx
index 42fb7d270c..c299c809b2 100644
--- a/documentation-site/examples/side-navigation/nav-overrides.tsx
+++ b/documentation-site/examples/side-navigation/nav-overrides.tsx
@@ -1,54 +1,54 @@
-import React, {useState} from 'react';
-import {Navigation} from 'baseui/side-navigation';
+import React, { useState } from "react";
+import { Navigation } from "baseui/side-navigation";
 
 const nav = [
   {
-    title: 'Colors',
-    itemId: '#level1.1',
+    title: "Colors",
+    itemId: "#level1.1",
     subNav: [
       {
-        title: 'Primary',
-        itemId: '#level1.1.1',
+        title: "Primary",
+        itemId: "#level1.1.1",
       },
       {
-        title: 'Shades',
-        itemId: '#level1.1.2',
+        title: "Shades",
+        itemId: "#level1.1.2",
         subNav: [
           {
-            title: 'Dark',
-            itemId: '#level1.1.2.1',
+            title: "Dark",
+            itemId: "#level1.1.2.1",
           },
           {
-            title: 'Light',
-            itemId: '#level1.1.2.2',
+            title: "Light",
+            itemId: "#level1.1.2.2",
           },
         ],
       },
     ],
   },
   {
-    title: 'Sizing',
-    itemId: '#level1.2',
+    title: "Sizing",
+    itemId: "#level1.2",
   },
   {
-    title: 'Typography',
-    itemId: '#level1.3',
+    title: "Typography",
+    itemId: "#level1.3",
   },
 ];
 
 export default function Example() {
-  const [location, setLocation] = useState('#level1.1.1');
+  const [location, setLocation] = useState("#level1.1.1");
   return (
     <Navigation
       items={nav}
       activeItemId={location}
-      onChange={({item}) => setLocation(item.itemId)}
+      onChange={({ item }) => setLocation(item.itemId)}
       overrides={{
         NavItem: {
-          style: ({$active, $theme}) => {
+          style: ({ $active, $theme }) => {
             if (!$active)
               return {
-                ':hover': {
+                ":hover": {
                   color: $theme.colors.positive400,
                 },
               };
@@ -56,7 +56,7 @@ export default function Example() {
               backgroundColor: $theme.colors.positive400,
               borderLeftColor: $theme.colors.mono900,
               color: $theme.colors.mono900,
-              ':hover': {
+              ":hover": {
                 color: $theme.colors.positive400,
               },
             };
diff --git a/documentation-site/examples/skeleton/animation.tsx b/documentation-site/examples/skeleton/animation.tsx
index 79d3fdf3d8..26bd800399 100644
--- a/documentation-site/examples/skeleton/animation.tsx
+++ b/documentation-site/examples/skeleton/animation.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Skeleton} from 'baseui/skeleton';
+import * as React from "react";
+import { Skeleton } from "baseui/skeleton";
 
 export default function Example() {
   return <Skeleton width="200px" height="100px" animation />;
diff --git a/documentation-site/examples/skeleton/auto-size-rows.tsx b/documentation-site/examples/skeleton/auto-size-rows.tsx
index 384194a6f7..ff33a3f91f 100644
--- a/documentation-site/examples/skeleton/auto-size-rows.tsx
+++ b/documentation-site/examples/skeleton/auto-size-rows.tsx
@@ -1,8 +1,6 @@
-import * as React from 'react';
-import {Skeleton} from 'baseui/skeleton';
+import * as React from "react";
+import { Skeleton } from "baseui/skeleton";
 
 export default function Example() {
-  return (
-    <Skeleton autoSizeRows rows={3} height="100px" width="200px" />
-  );
+  return <Skeleton autoSizeRows rows={3} height="100px" width="200px" />;
 }
diff --git a/documentation-site/examples/skeleton/basic.tsx b/documentation-site/examples/skeleton/basic.tsx
index dea934dc2d..f6cbe11345 100644
--- a/documentation-site/examples/skeleton/basic.tsx
+++ b/documentation-site/examples/skeleton/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Skeleton} from 'baseui/skeleton';
+import * as React from "react";
+import { Skeleton } from "baseui/skeleton";
 
 export default function Example() {
   return <Skeleton height="100px" width="200px" />;
diff --git a/documentation-site/examples/skeleton/circle.tsx b/documentation-site/examples/skeleton/circle.tsx
index ce37f1f409..3ef87d2560 100644
--- a/documentation-site/examples/skeleton/circle.tsx
+++ b/documentation-site/examples/skeleton/circle.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Skeleton} from 'baseui/skeleton';
+import * as React from "react";
+import { Skeleton } from "baseui/skeleton";
 
 export default function Example() {
   return (
@@ -9,7 +9,7 @@ export default function Example() {
       overrides={{
         Root: {
           style: {
-            borderRadius: '50%',
+            borderRadius: "50%",
           },
         },
       }}
diff --git a/documentation-site/examples/skeleton/subElements.tsx b/documentation-site/examples/skeleton/subElements.tsx
index 007292328a..f12240339e 100644
--- a/documentation-site/examples/skeleton/subElements.tsx
+++ b/documentation-site/examples/skeleton/subElements.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Skeleton} from 'baseui/skeleton';
+import * as React from "react";
+import { Skeleton } from "baseui/skeleton";
 
 export default function Example() {
   return (
@@ -9,8 +9,8 @@ export default function Example() {
       overrides={{
         Row: {
           style: {
-            height: '20px',
-            marginBottom: '15px',
+            height: "20px",
+            marginBottom: "15px",
           },
         },
       }}
diff --git a/documentation-site/examples/slider/basic.tsx b/documentation-site/examples/slider/basic.tsx
index e133ecd18a..14c93c3517 100644
--- a/documentation-site/examples/slider/basic.tsx
+++ b/documentation-site/examples/slider/basic.tsx
@@ -1,9 +1,7 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([60]);
-  return (
-    <Slider value={value} onChange={({value}) => setValue(value)} />
-  );
+  return <Slider value={value} onChange={({ value }) => setValue(value)} />;
 }
diff --git a/documentation-site/examples/slider/disabled.tsx b/documentation-site/examples/slider/disabled.tsx
index 75dc0d5404..f941bc474e 100644
--- a/documentation-site/examples/slider/disabled.tsx
+++ b/documentation-site/examples/slider/disabled.tsx
@@ -1,13 +1,9 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([40]);
   return (
-    <Slider
-      disabled
-      value={value}
-      onChange={({value}) => setValue(value)}
-    />
+    <Slider disabled value={value} onChange={({ value }) => setValue(value)} />
   );
 }
diff --git a/documentation-site/examples/slider/marks.tsx b/documentation-site/examples/slider/marks.tsx
index b9e301977c..e7b2337d4f 100644
--- a/documentation-site/examples/slider/marks.tsx
+++ b/documentation-site/examples/slider/marks.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([60]);
@@ -8,7 +8,7 @@ export default function Example() {
       value={value}
       step={10}
       marks
-      onChange={({value}) => value && setValue(value)}
+      onChange={({ value }) => value && setValue(value)}
     />
   );
 }
diff --git a/documentation-site/examples/slider/overrides.tsx b/documentation-site/examples/slider/overrides.tsx
index 598ae3fa14..9861f1f54f 100644
--- a/documentation-site/examples/slider/overrides.tsx
+++ b/documentation-site/examples/slider/overrides.tsx
@@ -1,41 +1,41 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([70]);
   return (
     <Slider
       value={value}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
       overrides={{
-        InnerThumb: ({$value, $thumbIndex}) => (
+        InnerThumb: ({ $value, $thumbIndex }) => (
           <React.Fragment>{$value[$thumbIndex]}</React.Fragment>
         ),
         ThumbValue: () => null,
         Thumb: {
           style: () => ({
-            height: '36px',
-            width: '36px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderTopLeftRadius: '36px',
-            borderTopRightRadius: '36px',
-            borderBottomRightRadius: '36px',
-            borderBottomLeftRadius: '36px',
-            borderLeftStyle: 'solid',
-            borderRightStyle: 'solid',
-            borderTopStyle: 'solid',
-            borderBottomStyle: 'solid',
-            borderLeftWidth: '3px',
-            borderTopWidth: '3px',
-            borderRightWidth: '3px',
-            borderBottomWidth: '3px',
+            height: "36px",
+            width: "36px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderTopLeftRadius: "36px",
+            borderTopRightRadius: "36px",
+            borderBottomRightRadius: "36px",
+            borderBottomLeftRadius: "36px",
+            borderLeftStyle: "solid",
+            borderRightStyle: "solid",
+            borderTopStyle: "solid",
+            borderBottomStyle: "solid",
+            borderLeftWidth: "3px",
+            borderTopWidth: "3px",
+            borderRightWidth: "3px",
+            borderBottomWidth: "3px",
             borderLeftColor: `#ccc`,
             borderTopColor: `#ccc`,
             borderRightColor: `#ccc`,
             borderBottomColor: `#ccc`,
-            backgroundColor: '#fff',
+            backgroundColor: "#fff",
           }),
         },
       }}
diff --git a/documentation-site/examples/slider/range.tsx b/documentation-site/examples/slider/range.tsx
index 83fbdf397d..6839bc76e0 100644
--- a/documentation-site/examples/slider/range.tsx
+++ b/documentation-site/examples/slider/range.tsx
@@ -1,9 +1,7 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([25, 75]);
-  return (
-    <Slider value={value} onChange={({value}) => setValue(value)} />
-  );
+  return <Slider value={value} onChange={({ value }) => setValue(value)} />;
 }
diff --git a/documentation-site/examples/slider/stateful.tsx b/documentation-site/examples/slider/stateful.tsx
index a0f2279f67..bab543a239 100644
--- a/documentation-site/examples/slider/stateful.tsx
+++ b/documentation-site/examples/slider/stateful.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulSlider} from 'baseui/slider';
+import * as React from "react";
+import { StatefulSlider } from "baseui/slider";
 
 export default function Example() {
   return <StatefulSlider />;
diff --git a/documentation-site/examples/slider/step-min-max.tsx b/documentation-site/examples/slider/step-min-max.tsx
index 9e8dda571b..36c2110b90 100644
--- a/documentation-site/examples/slider/step-min-max.tsx
+++ b/documentation-site/examples/slider/step-min-max.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Slider} from 'baseui/slider';
+import * as React from "react";
+import { Slider } from "baseui/slider";
 
 export default function Example() {
   const [value, setValue] = React.useState([90]);
@@ -9,7 +9,7 @@ export default function Example() {
       min={-300}
       max={300}
       step={10}
-      onChange={({value}) => setValue(value)}
+      onChange={({ value }) => setValue(value)}
     />
   );
 }
diff --git a/documentation-site/examples/spinner/basic.tsx b/documentation-site/examples/spinner/basic.tsx
index 8f897770ab..809840a25e 100644
--- a/documentation-site/examples/spinner/basic.tsx
+++ b/documentation-site/examples/spinner/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Spinner} from 'baseui/spinner';
+import * as React from "react";
+import { Spinner } from "baseui/spinner";
 
 export default function Example() {
   return <Spinner />;
diff --git a/documentation-site/examples/spinner/size.tsx b/documentation-site/examples/spinner/size.tsx
index c2053486e3..25dfe91835 100644
--- a/documentation-site/examples/spinner/size.tsx
+++ b/documentation-site/examples/spinner/size.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Spinner, SIZE} from 'baseui/spinner';
+import * as React from "react";
+import { Spinner, SIZE } from "baseui/spinner";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/spinner/span.tsx b/documentation-site/examples/spinner/span.tsx
index e43bd8c3d5..528f513ebe 100644
--- a/documentation-site/examples/spinner/span.tsx
+++ b/documentation-site/examples/spinner/span.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Spinner} from 'baseui/spinner';
+import * as React from "react";
+import { Spinner } from "baseui/spinner";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/styled/basic.tsx b/documentation-site/examples/styled/basic.tsx
index 084af55706..ce55b0198c 100644
--- a/documentation-site/examples/styled/basic.tsx
+++ b/documentation-site/examples/styled/basic.tsx
@@ -1,16 +1,15 @@
-import * as React from 'react';
-import {styled} from 'baseui';
-import {Theme} from 'baseui';
+import * as React from "react";
+import { styled } from "baseui";
+import { Theme } from "baseui";
 
-type CustomTheme = Theme & {extraProp: string};
+type CustomTheme = Theme & { extraProp: string };
 
-const BlueDiv = styled<
-  'div',
-  {$color: keyof Theme['colors']},
-  CustomTheme
->('div', ({$color, $theme}) => ({
-  color: $theme.colors[$color],
-}));
+const BlueDiv = styled<"div", { $color: keyof Theme["colors"] }, CustomTheme>(
+  "div",
+  ({ $color, $theme }) => ({
+    color: $theme.colors[$color],
+  }),
+);
 
 export default function Example() {
   return <BlueDiv $color="accent">This is a blue div</BlueDiv>;
diff --git a/documentation-site/examples/table-grid/basic.tsx b/documentation-site/examples/table-grid/basic.tsx
index b15abdd5b9..8e75108b57 100644
--- a/documentation-site/examples/table-grid/basic.tsx
+++ b/documentation-site/examples/table-grid/basic.tsx
@@ -1,36 +1,32 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {
-  StyledTable,
-  StyledHeadCell,
-  StyledBodyCell,
-} from 'baseui/table-grid';
+import React from "react";
+import { useStyletron } from "baseui";
+import { StyledTable, StyledHeadCell, StyledBodyCell } from "baseui/table-grid";
 
 const data = Array(100)
   .fill(2)
   .map(() => [
     `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut`,
-    'Cell two',
-    'Cell three',
+    "Cell two",
+    "Cell three",
   ]);
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '750px'})}>
+    <div className={css({ height: "750px" })}>
       <StyledTable
         role="grid"
         $gridTemplateColumns="minmax(400px, max-content) 200px 200px"
       >
-        <div role="row" className={css({display: 'contents'})}>
+        <div role="row" className={css({ display: "contents" })}>
           <StyledHeadCell>Column 1</StyledHeadCell>
           <StyledHeadCell>Column 2</StyledHeadCell>
           <StyledHeadCell>Column 3</StyledHeadCell>
         </div>
         {data.map((row) => {
           return (
-            <div role="row" className={css({display: 'contents'})}>
+            <div role="row" className={css({ display: "contents" })}>
               <StyledBodyCell>{row[0]}</StyledBodyCell>
               <StyledBodyCell>{row[1]}</StyledBodyCell>
               <StyledBodyCell>{row[2]}</StyledBodyCell>
diff --git a/documentation-site/examples/table-grid/cell-navigation.tsx b/documentation-site/examples/table-grid/cell-navigation.tsx
index cf5de3bac4..c1ac726ff6 100644
--- a/documentation-site/examples/table-grid/cell-navigation.tsx
+++ b/documentation-site/examples/table-grid/cell-navigation.tsx
@@ -1,13 +1,9 @@
-import React from 'react';
-import {format} from 'date-fns';
-import {StyledLink} from 'baseui/link';
-import {useStyletron} from 'baseui';
+import React from "react";
+import { format } from "date-fns";
+import { StyledLink } from "baseui/link";
+import { useStyletron } from "baseui";
 
-import {
-  StyledTable,
-  StyledHeadCell,
-  StyledBodyCell,
-} from 'baseui/table-grid';
+import { StyledTable, StyledHeadCell, StyledBodyCell } from "baseui/table-grid";
 
 function useCellNavigation() {
   const cells = React.useRef([]);
@@ -93,19 +89,19 @@ function useCellNavigation() {
   function handleKeyDown(event: KeyboardEvent) {
     let direction = [0, 0];
     switch (event.key) {
-      case 'ArrowUp':
+      case "ArrowUp":
         event.preventDefault();
         direction = UP;
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         event.preventDefault();
         direction = RIGHT;
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         event.preventDefault();
         direction = DOWN;
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         event.preventDefault();
         direction = LEFT;
         break;
@@ -113,10 +109,7 @@ function useCellNavigation() {
         break;
     }
 
-    const next = nextInDirection(
-      [columnIndex, rowIndex],
-      direction,
-    );
+    const next = nextInDirection([columnIndex, rowIndex], direction);
     if (next) {
       setColumnIndex(next[0]);
       setRowIndex(next[1]);
@@ -125,8 +118,7 @@ function useCellNavigation() {
 
   const getCellProps = React.useMemo(() => {
     return function (column: number, row: number) {
-      const isAddressable =
-        column === columnIndex && row === rowIndex;
+      const isAddressable = column === columnIndex && row === rowIndex;
       return {
         ref: (r: any) => register(r, column, row),
         tabIndex: isAddressable ? 0 : -1,
@@ -140,48 +132,39 @@ function useCellNavigation() {
     };
   }, [columnIndex, rowIndex]);
 
-  return {getCellProps};
+  return { getCellProps };
 }
 
 const row = [
-  'feat(docs-site): theme editor POC',
-  'https://github.com/uber/baseweb/pull/1296',
+  "feat(docs-site): theme editor POC",
+  "https://github.com/uber/baseweb/pull/1296",
   [
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'jh3y left a comment'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [
-      new Date(2019, 6, 22),
-      'jh3y marked this pull request as ready',
-    ],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "jh3y left a comment"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "jh3y marked this pull request as ready"],
   ],
 ];
 
 const data = [row, row, row];
 
 export default function Example() {
-  const {getCellProps} = useCellNavigation();
+  const { getCellProps } = useCellNavigation();
   const [css] = useStyletron();
   return (
-    <div className={css({height: '600px'})}>
+    <div className={css({ height: "600px" })}>
       <StyledTable
         tabIndex="0"
         role="grid"
         $gridTemplateColumns="minmax(300px, 500px) repeat(2, max-content)"
       >
-        <StyledHeadCell {...getCellProps(0, 0)}>
-          Name
-        </StyledHeadCell>
-        <StyledHeadCell {...getCellProps(1, 0)}>
-          Date
-        </StyledHeadCell>
-        <StyledHeadCell {...getCellProps(2, 0)}>
-          Event
-        </StyledHeadCell>
+        <StyledHeadCell {...getCellProps(0, 0)}>Name</StyledHeadCell>
+        <StyledHeadCell {...getCellProps(1, 0)}>Date</StyledHeadCell>
+        <StyledHeadCell {...getCellProps(2, 0)}>Event</StyledHeadCell>
 
         {data.map((row, rowIndex) => {
           const events = row[2] as Array<any>;
@@ -192,37 +175,27 @@ export default function Example() {
                 {...getCellProps(0, primaryRowIndex)}
                 $gridRow={`span ${row[2].length}`}
               >
-                <StyledLink href={String(row[1])}>
-                  {row[0]}
-                </StyledLink>
+                <StyledLink href={String(row[1])}>{row[0]}</StyledLink>
               </StyledBodyCell>
-              {events.map(
-                (event: [Date, string], index: number) => {
-                  const striped = index % 2 === 0;
-                  return (
-                    <React.Fragment>
-                      <StyledBodyCell
-                        {...getCellProps(
-                          1,
-                          primaryRowIndex + rowIndex,
-                        )}
-                        $striped={striped}
-                      >
-                        {format(event[0], 'yyyy-MM-dd h:mm a')}
-                      </StyledBodyCell>
-                      <StyledBodyCell
-                        {...getCellProps(
-                          2,
-                          primaryRowIndex + rowIndex,
-                        )}
-                        $striped={striped}
-                      >
-                        {event[1]}
-                      </StyledBodyCell>
-                    </React.Fragment>
-                  );
-                },
-              )}
+              {events.map((event: [Date, string], index: number) => {
+                const striped = index % 2 === 0;
+                return (
+                  <React.Fragment>
+                    <StyledBodyCell
+                      {...getCellProps(1, primaryRowIndex + rowIndex)}
+                      $striped={striped}
+                    >
+                      {format(event[0], "yyyy-MM-dd h:mm a")}
+                    </StyledBodyCell>
+                    <StyledBodyCell
+                      {...getCellProps(2, primaryRowIndex + rowIndex)}
+                      $striped={striped}
+                    >
+                      {event[1]}
+                    </StyledBodyCell>
+                  </React.Fragment>
+                );
+              })}
             </React.Fragment>
           );
         })}
diff --git a/documentation-site/examples/table-grid/cell-span.tsx b/documentation-site/examples/table-grid/cell-span.tsx
index 9d90fe10dc..b89d8301f1 100644
--- a/documentation-site/examples/table-grid/cell-span.tsx
+++ b/documentation-site/examples/table-grid/cell-span.tsx
@@ -1,29 +1,22 @@
-import React from 'react';
-import {format} from 'date-fns';
-import {StyledLink} from 'baseui/link';
-import {useStyletron} from 'baseui';
+import React from "react";
+import { format } from "date-fns";
+import { StyledLink } from "baseui/link";
+import { useStyletron } from "baseui";
 
-import {
-  StyledTable,
-  StyledHeadCell,
-  StyledBodyCell,
-} from 'baseui/table-grid';
+import { StyledTable, StyledHeadCell, StyledBodyCell } from "baseui/table-grid";
 
 const row = [
-  'feat(docs-site): theme editor POC',
-  'https://github.com/uber/baseweb/pull/1296',
+  "feat(docs-site): theme editor POC",
+  "https://github.com/uber/baseweb/pull/1296",
   [
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'jh3y left a comment'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'chasestarr left a comment'],
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [new Date(2019, 6, 22), 'jh3y added a commit'],
-    [
-      new Date(2019, 6, 22),
-      'jh3y marked this pull request as ready',
-    ],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "jh3y left a comment"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "chasestarr left a comment"],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "jh3y added a commit"],
+    [new Date(2019, 6, 22), "jh3y marked this pull request as ready"],
   ],
 ];
 
@@ -32,7 +25,7 @@ const data = [row, row, row];
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '600px'})}>
+    <div className={css({ height: "600px" })}>
       <StyledTable $gridTemplateColumns="minmax(300px, 500px) repeat(2, max-content)">
         <StyledHeadCell>Name</StyledHeadCell>
         <StyledHeadCell>Date</StyledHeadCell>
@@ -41,25 +34,21 @@ export default function Example() {
           return (
             <React.Fragment>
               <StyledBodyCell $gridRow={`span ${row[2].length}`}>
-                <StyledLink href={String(row[1])}>
-                  {row[0]}
-                </StyledLink>
+                <StyledLink href={String(row[1])}>{row[0]}</StyledLink>
               </StyledBodyCell>
-              {(row[2] as any[]).map(
-                (event: [Date, string], index: number) => {
-                  const striped = index % 2 === 0;
-                  return (
-                    <React.Fragment>
-                      <StyledBodyCell $striped={striped}>
-                        {format(event[0], 'yyyy-MM-dd h:mm a')}
-                      </StyledBodyCell>
-                      <StyledBodyCell $striped={striped}>
-                        {event[1]}
-                      </StyledBodyCell>
-                    </React.Fragment>
-                  );
-                },
-              )}
+              {(row[2] as any[]).map((event: [Date, string], index: number) => {
+                const striped = index % 2 === 0;
+                return (
+                  <React.Fragment>
+                    <StyledBodyCell $striped={striped}>
+                      {format(event[0], "yyyy-MM-dd h:mm a")}
+                    </StyledBodyCell>
+                    <StyledBodyCell $striped={striped}>
+                      {event[1]}
+                    </StyledBodyCell>
+                  </React.Fragment>
+                );
+              })}
             </React.Fragment>
           );
         })}
diff --git a/documentation-site/examples/table-grid/nested.tsx b/documentation-site/examples/table-grid/nested.tsx
index bdc7fa829b..7d3a61a68c 100644
--- a/documentation-site/examples/table-grid/nested.tsx
+++ b/documentation-site/examples/table-grid/nested.tsx
@@ -1,137 +1,133 @@
-import React from 'react';
-import {format} from 'date-fns';
+import React from "react";
+import { format } from "date-fns";
 
-import {Button} from 'baseui/button';
-import {ChevronDown, ChevronRight, Overflow} from 'baseui/icon';
-import {StyledLink} from 'baseui/link';
-import {StatefulMenu} from 'baseui/menu';
-import {StatefulPopover, PLACEMENT} from 'baseui/popover';
-import {withStyle, useStyletron} from 'baseui';
-import {
-  StyledTable,
-  StyledHeadCell,
-  StyledBodyCell,
-} from 'baseui/table-grid';
-import {Tag} from 'baseui/tag';
+import { Button } from "baseui/button";
+import { ChevronDown, ChevronRight, Overflow } from "baseui/icon";
+import { StyledLink } from "baseui/link";
+import { StatefulMenu } from "baseui/menu";
+import { StatefulPopover, PLACEMENT } from "baseui/popover";
+import { withStyle, useStyletron } from "baseui";
+import { StyledTable, StyledHeadCell, StyledBodyCell } from "baseui/table-grid";
+import { Tag } from "baseui/tag";
 
 function buildRow(status: string) {
   return [
-    'Baseui Github CI Job',
+    "Baseui Github CI Job",
     status,
     new Date(2019, 6, 22),
-    'feat(side-navigation): improve item rendering performance',
-    'https://github.com/uber/baseweb/pull/1449',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+    "feat(side-navigation): improve item rendering performance",
+    "https://github.com/uber/baseweb/pull/1449",
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
     [
       [
-        'buildkite/baseui',
-        'running',
+        "buildkite/baseui",
+        "running",
         new Date(2019, 6, 22),
-        'Build #7728 passed (20 minutes, 1 second)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728',
+        "Build #7728 passed (20 minutes, 1 second)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728",
       ],
       [
-        'buildkite/baseui/docker-package-e2e',
-        'running',
+        "buildkite/baseui/docker-package-e2e",
+        "running",
         new Date(2019, 6, 22),
-        'Passed (6 minutes, 44 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728#54927bc9-88e0-4d0b-80b0-f60b8a2298e4',
+        "Passed (6 minutes, 44 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728#54927bc9-88e0-4d0b-80b0-f60b8a2298e4",
       ],
       [
-        'buildkite/baseui/docker-package-unit',
-        'passed',
+        "buildkite/baseui/docker-package-unit",
+        "passed",
         new Date(2019, 6, 22),
-        'Passed (7 minutes)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728#fea8c317-b65b-4c5f-9fad-b7a329a26237',
+        "Passed (7 minutes)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728#fea8c317-b65b-4c5f-9fad-b7a329a26237",
       ],
       [
-        'buildkite/baseui/documentation-site-link-checker',
-        'failed',
+        "buildkite/baseui/documentation-site-link-checker",
+        "failed",
         new Date(2019, 6, 22),
-        'Passed (1 minute, 33 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728#eaa5998f-69a4-4b94-9a9b-4dd2bbd8c985',
+        "Passed (1 minute, 33 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728#eaa5998f-69a4-4b94-9a9b-4dd2bbd8c985",
       ],
       [
-        'buildkite/baseui/eslint',
-        'passed',
+        "buildkite/baseui/eslint",
+        "passed",
         new Date(2019, 6, 22),
-        'Passed (1 minute, 34 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728#a658a503-472f-43aa-80b5-708d39951cf7',
+        "Passed (1 minute, 34 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728#a658a503-472f-43aa-80b5-708d39951cf7",
       ],
       [
-        'buildkite/baseui/flowtype',
-        'passed',
+        "buildkite/baseui/flowtype",
+        "passed",
         new Date(2019, 6, 22),
-        'Passed (1 minute, 33 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728',
+        "Passed (1 minute, 33 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728",
       ],
       [
-        'buildkite/baseui/jest',
-        'running',
+        "buildkite/baseui/jest",
+        "running",
         new Date(2019, 6, 22),
-        'Passed (1 minute, 33 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728',
+        "Passed (1 minute, 33 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728",
       ],
       [
-        'buildkite/baseui/pipeline',
-        'running',
+        "buildkite/baseui/pipeline",
+        "running",
         new Date(2019, 6, 22),
-        'Passed (1 minute, 33 seconds)',
-        'https://buildkite.com/uberopensource/baseui/builds/7728',
+        "Passed (1 minute, 33 seconds)",
+        "https://buildkite.com/uberopensource/baseui/builds/7728",
       ],
     ],
   ];
 }
 
 const data = [
-  buildRow('running'),
-  buildRow('running'),
-  buildRow('failed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('failed'),
-  buildRow('failed'),
-  buildRow('failed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('passed'),
-  buildRow('passed'),
+  buildRow("running"),
+  buildRow("running"),
+  buildRow("failed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("failed"),
+  buildRow("failed"),
+  buildRow("failed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("passed"),
+  buildRow("passed"),
 ];
 
 function statusToTagKind(status: string) {
   switch (status) {
-    case 'running': {
-      return 'primary';
+    case "running": {
+      return "primary";
     }
-    case 'passed': {
-      return 'positive';
+    case "passed": {
+      return "positive";
     }
-    case 'failed': {
-      return 'negative';
+    case "failed": {
+      return "negative";
     }
     default: {
-      return 'neutral';
+      return "neutral";
     }
   }
 }
 
-function Tasks(props: {tasks: any[]}) {
+function Tasks(props: { tasks: any[] }) {
   const [css] = useStyletron();
   return (
     <div
       className={css({
-        gridColumn: 'span 5',
-        padding: '32px 24px',
+        gridColumn: "span 5",
+        padding: "32px 24px",
       })}
     >
       <StyledTable
         role="grid"
         $gridTemplateColumns="max-content auto auto auto"
       >
-        <div role="row" className={css({display: 'contents'})}>
+        <div role="row" className={css({ display: "contents" })}>
           <StyledHeadCell $sticky={false}>Task</StyledHeadCell>
           <StyledHeadCell $sticky={false}>Status</StyledHeadCell>
           <StyledHeadCell $sticky={false}>Last Run</StyledHeadCell>
@@ -139,7 +135,7 @@ function Tasks(props: {tasks: any[]}) {
         </div>
         {props.tasks.map((task) => {
           return (
-            <div role="row" className={css({display: 'contents'})}>
+            <div role="row" className={css({ display: "contents" })}>
               <StyledBodyCell>{task[0]}</StyledBodyCell>
               <StyledBodyCell>
                 <Tag
@@ -151,7 +147,7 @@ function Tasks(props: {tasks: any[]}) {
                 </Tag>
               </StyledBodyCell>
               <StyledBodyCell>
-                {format(task[2], 'yyyy-MM-dd h:mm a')}
+                {format(task[2], "yyyy-MM-dd h:mm a")}
               </StyledBodyCell>
               <StyledBodyCell>
                 <StyledLink href={task[4]}>{task[3]}</StyledLink>
@@ -165,15 +161,15 @@ function Tasks(props: {tasks: any[]}) {
 }
 
 const CenteredBodyCell = withStyle(StyledBodyCell, {
-  display: 'flex',
-  alignItems: 'center',
+  display: "flex",
+  alignItems: "center",
 });
 
-function Row({striped, row}: any) {
+function Row({ striped, row }: any) {
   const [css] = useStyletron();
   const [expanded, setExpanded] = React.useState(false);
   return (
-    <div role="row" className={css({display: 'contents'})}>
+    <div role="row" className={css({ display: "contents" })}>
       <CenteredBodyCell $striped={striped}>
         <Button
           size="compact"
@@ -181,11 +177,7 @@ function Row({striped, row}: any) {
           onClick={() => setExpanded(!expanded)}
           shape="square"
         >
-          {expanded ? (
-            <ChevronDown size={18} />
-          ) : (
-            <ChevronRight size={18} />
-          )}
+          {expanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
         </Button>
         {row[0]}
       </CenteredBodyCell>
@@ -202,32 +194,32 @@ function Row({striped, row}: any) {
         <StyledLink href={row[4]}>{row[3]}</StyledLink>
       </CenteredBodyCell>
       <CenteredBodyCell $striped={striped}>
-        {format(row[2], 'yyyy-MM-dd h:mm a')}
+        {format(row[2], "yyyy-MM-dd h:mm a")}
       </CenteredBodyCell>
       <CenteredBodyCell $striped={striped}>
         <div
           className={css({
-            textOverflow: 'ellipsis',
-            maxWidth: '200px',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
+            textOverflow: "ellipsis",
+            maxWidth: "200px",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
           })}
         >
           {row[5]}
         </div>
         <StatefulPopover
           placement={PLACEMENT.bottomLeft}
-          content={({close}) => (
+          content={({ close }) => (
             <StatefulMenu
               items={[
-                {label: 'Item One'},
-                {label: 'Item Two'},
-                {label: 'Item Three'},
-                {label: 'Item Four'},
+                { label: "Item One" },
+                { label: "Item Two" },
+                { label: "Item Three" },
+                { label: "Item Four" },
               ]}
               onItemSelect={() => close()}
               overrides={{
-                List: {style: {height: '144px', width: '138px'}},
+                List: { style: { height: "144px", width: "138px" } },
               }}
             />
           )}
@@ -245,12 +237,12 @@ function Row({striped, row}: any) {
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '600px'})}>
+    <div className={css({ height: "600px" })}>
       <StyledTable
         role="grid"
         $gridTemplateColumns="max-content min-content minmax(300px, max-content) max-content auto"
       >
-        <div role="row" className={css({display: 'contents'})}>
+        <div role="row" className={css({ display: "contents" })}>
           <StyledHeadCell>Job Name</StyledHeadCell>
           <StyledHeadCell>Status</StyledHeadCell>
           <StyledHeadCell>Pull Request</StyledHeadCell>
diff --git a/documentation-site/examples/table-semantic/alternating.tsx b/documentation-site/examples/table-semantic/alternating.tsx
index 0e61913187..b426558634 100644
--- a/documentation-site/examples/table-semantic/alternating.tsx
+++ b/documentation-site/examples/table-semantic/alternating.tsx
@@ -1,37 +1,34 @@
-import * as React from 'react';
-import {StyledLink as Link} from 'baseui/link';
-import {
-  TableBuilder,
-  TableBuilderColumn,
-} from 'baseui/table-semantic';
+import * as React from "react";
+import { StyledLink as Link } from "baseui/link";
+import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
 
 const DATA = [
   {
     foo: 10,
-    bar: 'banana',
-    url: 'https://example.com/b',
+    bar: "banana",
+    url: "https://example.com/b",
   },
   {
     foo: 1,
-    bar: 'carrot',
-    url: 'https://example.com/c',
+    bar: "carrot",
+    url: "https://example.com/c",
   },
   {
     foo: 2,
-    bar: 'apple',
-    url: 'https://example.com/a',
+    bar: "apple",
+    url: "https://example.com/a",
   },
 ];
 
 export default function Example() {
   const overrides = {
     TableBodyRow: {
-      style: ({$theme, $rowIndex}: any) => ({
+      style: ({ $theme, $rowIndex }: any) => ({
         backgroundColor:
           $rowIndex % 2
             ? $theme.colors.backgroundPrimary
             : $theme.colors.backgroundSecondary,
-        ':hover': {
+        ":hover": {
           backgroundColor: $theme.colors.backgroundTertiary,
         },
       }),
diff --git a/documentation-site/examples/table-semantic/basic.tsx b/documentation-site/examples/table-semantic/basic.tsx
index 98a4e45410..768c7b854b 100644
--- a/documentation-site/examples/table-semantic/basic.tsx
+++ b/documentation-site/examples/table-semantic/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Table} from 'baseui/table-semantic';
+import * as React from "react";
+import { Table } from "baseui/table-semantic";
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 const DATA = [
-  ['Sarah Brown', 31, '100 Broadway St., New York City, New York'],
-  ['Jane Smith', 32, '100 Market St., San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie St., Sydney, Australia'],
+  ["Sarah Brown", 31, "100 Broadway St., New York City, New York"],
+  ["Jane Smith", 32, "100 Market St., San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie St., Sydney, Australia"],
 ];
 
 export default function Example() {
diff --git a/documentation-site/examples/table-semantic/builder.tsx b/documentation-site/examples/table-semantic/builder.tsx
index 985fd9e3df..1796e89d01 100644
--- a/documentation-site/examples/table-semantic/builder.tsx
+++ b/documentation-site/examples/table-semantic/builder.tsx
@@ -1,26 +1,23 @@
-import * as React from 'react';
-import {StyledLink as Link} from 'baseui/link';
-import {
-  TableBuilder,
-  TableBuilderColumn,
-} from 'baseui/table-semantic';
+import * as React from "react";
+import { StyledLink as Link } from "baseui/link";
+import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
 
-type Row = {bar: string; foo: number; url: string};
+type Row = { bar: string; foo: number; url: string };
 const DATA: Row[] = [
   {
     foo: 10,
-    bar: 'banana',
-    url: 'https://example.com/b',
+    bar: "banana",
+    url: "https://example.com/b",
   },
   {
     foo: 1,
-    bar: 'carrot',
-    url: 'https://example.com/c',
+    bar: "carrot",
+    url: "https://example.com/c",
   },
   {
     foo: 2,
-    bar: 'apple',
-    url: 'https://example.com/a',
+    bar: "apple",
+    url: "https://example.com/a",
   },
 ];
 
diff --git a/documentation-site/examples/table-semantic/cells.tsx b/documentation-site/examples/table-semantic/cells.tsx
index a71221406f..db2fb09584 100644
--- a/documentation-site/examples/table-semantic/cells.tsx
+++ b/documentation-site/examples/table-semantic/cells.tsx
@@ -1,24 +1,21 @@
-import * as React from 'react';
-import {
-  TableBuilder,
-  TableBuilderColumn,
-} from 'baseui/table-semantic';
-import {Avatar} from 'baseui/avatar';
-import {Button, KIND, SIZE} from 'baseui/button';
-import {Tag} from 'baseui/tag';
-import {useStyletron} from 'baseui';
-import {ArrowUp, ArrowDown} from 'baseui/icon';
+import * as React from "react";
+import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
+import { Avatar } from "baseui/avatar";
+import { Button, KIND, SIZE } from "baseui/button";
+import { Tag } from "baseui/tag";
+import { useStyletron } from "baseui";
+import { ArrowUp, ArrowDown } from "baseui/icon";
 
 const ROW = {
   foo: 10,
-  bar: 'banana',
-  url: 'https://example.com/b',
+  bar: "banana",
+  url: "https://example.com/b",
   largeNumber: 1000000,
   avatarSrc:
-    'https://avatars.dicebear.com/api/human/3.svg?width=285&mood=happy',
-  name: 'User Name',
-  title: 'Job Title',
-  list: ['One', 'Two', 'Three'],
+    "https://avatars.dicebear.com/api/human/3.svg?width=285&mood=happy",
+  name: "User Name",
+  title: "Job Title",
+  list: ["One", "Two", "Three"],
 };
 
 type Row = typeof ROW;
@@ -36,12 +33,12 @@ function AvatarCell({
 }) {
   const [css, theme] = useStyletron();
   return (
-    <div className={css({display: 'flex', alignItems: 'center'})}>
+    <div className={css({ display: "flex", alignItems: "center" })}>
       <Avatar name={title} size="48px" src={src} />
       <div
         className={css({
           paddingLeft: theme.sizing.scale550,
-          whiteSpace: 'nowrap',
+          whiteSpace: "nowrap",
         })}
       >
         <p
@@ -56,7 +53,7 @@ function AvatarCell({
           className={css({
             ...theme.typography.ParagraphSmall,
             marginBottom: 0,
-            marginTop: '4px',
+            marginTop: "4px",
           })}
         >
           {subtitle}
@@ -66,29 +63,21 @@ function AvatarCell({
   );
 }
 
-function NumberCell({
-  value,
-  delta,
-}: {
-  value: number;
-  delta: number;
-}) {
+function NumberCell({ value, delta }: { value: number; delta: number }) {
   const [css, theme] = useStyletron();
   const positive = delta >= 0;
   return (
-    <div className={css({display: 'flex', alignItems: 'center'})}>
-      <span
-        className={css({...theme.typography.MonoParagraphSmall})}
-      >
-        {new Intl.NumberFormat('en-US', {
-          style: 'currency',
-          currency: 'USD',
+    <div className={css({ display: "flex", alignItems: "center" })}>
+      <span className={css({ ...theme.typography.MonoParagraphSmall })}>
+        {new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
         }).format(value)}
       </span>
       <div
         className={css({
-          alignItems: 'center',
-          display: 'flex',
+          alignItems: "center",
+          display: "flex",
           paddingLeft: theme.sizing.scale300,
           color: positive
             ? theme.colors.contentPositive
@@ -99,7 +88,7 @@ function NumberCell({
         <span
           className={css({
             ...theme.typography.MonoLabelSmall,
-            paddingLeft: '2px',
+            paddingLeft: "2px",
           })}
         >
           {delta}%
@@ -109,10 +98,10 @@ function NumberCell({
   );
 }
 
-function TagsCell({tags}: {tags: Array<string>}) {
+function TagsCell({ tags }: { tags: Array<string> }) {
   const [css] = useStyletron();
   return (
-    <div className={css({display: 'flex', alignItems: 'center'})}>
+    <div className={css({ display: "flex", alignItems: "center" })}>
       {tags.map((tag) => {
         return (
           <Tag key={tag} closeable={false}>
@@ -124,10 +113,10 @@ function TagsCell({tags}: {tags: Array<string>}) {
   );
 }
 
-function ButtonsCell({labels}: {labels: Array<string>}) {
+function ButtonsCell({ labels }: { labels: Array<string> }) {
   const [css, theme] = useStyletron();
   return (
-    <div className={css({display: 'flex', alignItems: 'center'})}>
+    <div className={css({ display: "flex", alignItems: "center" })}>
       {labels.map((label, index) => {
         return (
           <Button
@@ -153,7 +142,7 @@ function ButtonsCell({labels}: {labels: Array<string>}) {
 export default function Example() {
   return (
     <TableBuilder
-      overrides={{Root: {style: {maxHeight: '300px'}}}}
+      overrides={{ Root: { style: { maxHeight: "300px" } } }}
       data={DATA}
     >
       <TableBuilderColumn<Row> header="Avatar">
@@ -167,15 +156,11 @@ export default function Example() {
       </TableBuilderColumn>
 
       <TableBuilderColumn<Row> header="Number positive">
-        {(row) => (
-          <NumberCell value={row.largeNumber} delta={0.51} />
-        )}
+        {(row) => <NumberCell value={row.largeNumber} delta={0.51} />}
       </TableBuilderColumn>
 
       <TableBuilderColumn<Row> header="Number negative">
-        {(row) => (
-          <NumberCell value={row.largeNumber} delta={-0.51} />
-        )}
+        {(row) => <NumberCell value={row.largeNumber} delta={-0.51} />}
       </TableBuilderColumn>
 
       <TableBuilderColumn<Row> header="Tags">
diff --git a/documentation-site/examples/table-semantic/empty-message.tsx b/documentation-site/examples/table-semantic/empty-message.tsx
index c188b4eadc..a1822faeb0 100644
--- a/documentation-site/examples/table-semantic/empty-message.tsx
+++ b/documentation-site/examples/table-semantic/empty-message.tsx
@@ -1,14 +1,8 @@
-import * as React from 'react';
-import {Table} from 'baseui/table-semantic';
+import * as React from "react";
+import { Table } from "baseui/table-semantic";
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 export default function Example() {
-  return (
-    <Table
-      columns={COLUMNS}
-      data={[]}
-      emptyMessage={<h1>No data</h1>}
-    />
-  );
+  return <Table columns={COLUMNS} data={[]} emptyMessage={<h1>No data</h1>} />;
 }
diff --git a/documentation-site/examples/table-semantic/scroll.tsx b/documentation-site/examples/table-semantic/scroll.tsx
index 441fe94d26..c979bbbe2a 100644
--- a/documentation-site/examples/table-semantic/scroll.tsx
+++ b/documentation-site/examples/table-semantic/scroll.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Table} from 'baseui/table-semantic';
+import * as React from "react";
+import { Table } from "baseui/table-semantic";
 
 const SIZER = Array(100).fill(null);
 
@@ -16,13 +16,11 @@ const DATA = SIZER.map((_row, rowIndex) => {
 const overrides = {
   Root: {
     style: {
-      maxHeight: '300px',
+      maxHeight: "300px",
     },
   },
 };
 
 export default function Example() {
-  return (
-    <Table overrides={overrides} columns={COLUMNS} data={DATA} />
-  );
+  return <Table overrides={overrides} columns={COLUMNS} data={DATA} />;
 }
diff --git a/documentation-site/examples/table-semantic/sortable.tsx b/documentation-site/examples/table-semantic/sortable.tsx
index 5b60c669f1..379c6edbea 100644
--- a/documentation-site/examples/table-semantic/sortable.tsx
+++ b/documentation-site/examples/table-semantic/sortable.tsx
@@ -1,12 +1,9 @@
-import React, {useState, useMemo} from 'react';
-import {StyledLink as Link} from 'baseui/link';
-import {
-  TableBuilder,
-  TableBuilderColumn,
-} from 'baseui/table-semantic';
+import React, { useState, useMemo } from "react";
+import { StyledLink as Link } from "baseui/link";
+import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
 
 export default function Example() {
-  const [sortColumn, setSortColumn] = useState('bar');
+  const [sortColumn, setSortColumn] = useState("bar");
   const [sortAsc, setSortAsc] = useState(true);
   type Row = {
     foo: number;
@@ -16,18 +13,18 @@ export default function Example() {
   const [data] = useState<Row[]>([
     {
       foo: 10,
-      bar: 'banana',
-      url: 'https://example.com/b',
+      bar: "banana",
+      url: "https://example.com/b",
     },
     {
       foo: 1,
-      bar: 'carrot',
-      url: 'https://example.com/c',
+      bar: "carrot",
+      url: "https://example.com/c",
     },
     {
       foo: 2,
-      bar: 'apple',
-      url: 'https://example.com/a',
+      bar: "apple",
+      url: "https://example.com/a",
     },
   ]);
 
@@ -38,9 +35,9 @@ export default function Example() {
       const leftValue = String(left[sortColumn]);
       const rightValue = String(right[sortColumn]);
 
-      return leftValue.localeCompare(rightValue, 'en', {
+      return leftValue.localeCompare(rightValue, "en", {
         numeric: true,
-        sensitivity: 'base',
+        sensitivity: "base",
       });
     });
   }, [sortColumn, sortAsc, data]);
@@ -58,18 +55,13 @@ export default function Example() {
     <TableBuilder
       data={sortedData}
       sortColumn={sortColumn}
-      sortOrder={sortAsc ? 'ASC' : 'DESC'}
+      sortOrder={sortAsc ? "ASC" : "DESC"}
       onSort={handleSort}
     >
       <TableBuilderColumn id="bar" header="Produce" sortable>
         {(row: Row) => <Link href={row.url}>{row.bar}</Link>}
       </TableBuilderColumn>
-      <TableBuilderColumn
-        id="foo"
-        header="Quantity"
-        numeric
-        sortable
-      >
+      <TableBuilderColumn id="foo" header="Quantity" numeric sortable>
         {(row: Row) => row.foo}
       </TableBuilderColumn>
     </TableBuilder>
diff --git a/documentation-site/examples/table-semantic/span.tsx b/documentation-site/examples/table-semantic/span.tsx
index 451d39dbd2..4acac4b984 100644
--- a/documentation-site/examples/table-semantic/span.tsx
+++ b/documentation-site/examples/table-semantic/span.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   StyledRoot,
   StyledTable,
@@ -6,27 +6,19 @@ import {
   StyledTableHeadCell,
   StyledTableBodyRow,
   StyledTableBodyCell,
-} from 'baseui/table-semantic';
+} from "baseui/table-semantic";
 
 export default function Example() {
   return (
     <StyledRoot>
       <StyledTable>
         <StyledTableHeadRow>
-          <StyledTableHeadCell colSpan={2}>
-            Parent
-          </StyledTableHeadCell>
-          <StyledTableHeadCell colSpan={2}>
-            Children
-          </StyledTableHeadCell>
+          <StyledTableHeadCell colSpan={2}>Parent</StyledTableHeadCell>
+          <StyledTableHeadCell colSpan={2}>Children</StyledTableHeadCell>
         </StyledTableHeadRow>
         <StyledTableBodyRow>
-          <StyledTableBodyCell rowSpan={3}>
-            Sarah
-          </StyledTableBodyCell>
-          <StyledTableBodyCell rowSpan={3}>
-            Brown
-          </StyledTableBodyCell>
+          <StyledTableBodyCell rowSpan={3}>Sarah</StyledTableBodyCell>
+          <StyledTableBodyCell rowSpan={3}>Brown</StyledTableBodyCell>
           <StyledTableBodyCell>Sally</StyledTableBodyCell>
           <StyledTableBodyCell>Brown</StyledTableBodyCell>
         </StyledTableBodyRow>
@@ -39,12 +31,8 @@ export default function Example() {
           <StyledTableBodyCell>Black</StyledTableBodyCell>
         </StyledTableBodyRow>
         <StyledTableBodyRow>
-          <StyledTableBodyCell rowSpan={2}>
-            Jane
-          </StyledTableBodyCell>
-          <StyledTableBodyCell rowSpan={2}>
-            Smith
-          </StyledTableBodyCell>
+          <StyledTableBodyCell rowSpan={2}>Jane</StyledTableBodyCell>
+          <StyledTableBodyCell rowSpan={2}>Smith</StyledTableBodyCell>
           <StyledTableBodyCell>Molly</StyledTableBodyCell>
           <StyledTableBodyCell>Smith</StyledTableBodyCell>
         </StyledTableBodyRow>
diff --git a/documentation-site/examples/table-semantic/toggleable.tsx b/documentation-site/examples/table-semantic/toggleable.tsx
index 919dd5c7af..415cd0d05a 100644
--- a/documentation-site/examples/table-semantic/toggleable.tsx
+++ b/documentation-site/examples/table-semantic/toggleable.tsx
@@ -1,10 +1,7 @@
-import React, {useState} from 'react';
-import {Checkbox} from 'baseui/checkbox';
-import {StyledLink as Link} from 'baseui/link';
-import {
-  TableBuilder,
-  TableBuilderColumn,
-} from 'baseui/table-semantic';
+import React, { useState } from "react";
+import { Checkbox } from "baseui/checkbox";
+import { StyledLink as Link } from "baseui/link";
+import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
 
 export default function Example() {
   type Row = {
@@ -16,20 +13,20 @@ export default function Example() {
   const [data, setData] = useState<Row[]>([
     {
       foo: 10,
-      bar: 'banana',
-      url: 'https://example.com/b',
+      bar: "banana",
+      url: "https://example.com/b",
       selected: true,
     },
     {
       foo: 1,
-      bar: 'carrot',
-      url: 'https://example.com/c',
+      bar: "carrot",
+      url: "https://example.com/c",
       selected: false,
     },
     {
       foo: 2,
-      bar: 'apple',
-      url: 'https://example.com/a',
+      bar: "apple",
+      url: "https://example.com/a",
       selected: false,
     },
   ]);
@@ -48,7 +45,7 @@ export default function Example() {
   }
 
   function toggle(event: any) {
-    const {name, checked} = event.currentTarget;
+    const { name, checked } = event.currentTarget;
 
     setData((data) =>
       data.map((row) => ({
@@ -62,8 +59,8 @@ export default function Example() {
     <TableBuilder data={data}>
       <TableBuilderColumn
         overrides={{
-          TableHeadCell: {style: {width: '1%'}},
-          TableBodyCell: {style: {width: '1%'}},
+          TableHeadCell: { style: { width: "1%" } },
+          TableBodyCell: { style: { width: "1%" } },
         }}
         header={
           <Checkbox
@@ -75,7 +72,7 @@ export default function Example() {
       >
         {(row: Row) => (
           <Checkbox
-            name={'' + row.foo}
+            name={"" + row.foo}
             checked={row.selected}
             onChange={toggle}
           />
diff --git a/documentation-site/examples/table/basic.tsx b/documentation-site/examples/table/basic.tsx
index 68c52a4283..3478ea86e4 100644
--- a/documentation-site/examples/table/basic.tsx
+++ b/documentation-site/examples/table/basic.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {Table} from 'baseui/table';
+import * as React from "react";
+import { Table } from "baseui/table";
 
 const DATA = [
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 export default function Example() {
   return <Table columns={COLUMNS} data={DATA} />;
diff --git a/documentation-site/examples/table/cells.tsx b/documentation-site/examples/table/cells.tsx
index 84f4c2ccf9..0f6f920d63 100644
--- a/documentation-site/examples/table/cells.tsx
+++ b/documentation-site/examples/table/cells.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import {withStyle, useStyletron} from 'baseui';
+import React from "react";
+import { withStyle, useStyletron } from "baseui";
 
-import {Block} from 'baseui/block';
+import { Block } from "baseui/block";
 import {
   ArrowUp,
   ArrowDown,
@@ -9,7 +9,7 @@ import {
   Plus,
   Delete,
   Overflow,
-} from 'baseui/icon';
+} from "baseui/icon";
 import {
   StyledTable,
   StyledHead,
@@ -18,13 +18,13 @@ import {
   StyledRow,
   StyledCell,
   StyledAction,
-} from 'baseui/table';
+} from "baseui/table";
 import {
   ParagraphXSmall,
   LabelXSmall,
   ParagraphSmall,
-} from 'baseui/typography';
-import {Theme} from 'baseui';
+} from "baseui/typography";
+import { Theme } from "baseui";
 
 const StyledHeadingCell = withStyle(StyledCell, {
   paddingTop: 0,
@@ -33,242 +33,240 @@ const StyledHeadingCell = withStyle(StyledCell, {
 
 const StyledDeltaCell = withStyle<
   typeof StyledCell,
-  {$isNegative: boolean},
-  Theme & {customThemeProp: string}
->(StyledCell, ({$isNegative, $theme}) => ({
+  { $isNegative: boolean },
+  Theme & { customThemeProp: string }
+>(StyledCell, ({ $isNegative, $theme }) => ({
   ...$theme.typography.font550,
-  alignItems: 'center',
+  alignItems: "center",
   backgroundColor: $isNegative
     ? $theme.colors.negative50
     : $theme.colors.positive50,
-  color: $isNegative
-    ? $theme.colors.negative
-    : $theme.colors.positive,
+  color: $isNegative ? $theme.colors.negative : $theme.colors.positive,
 }));
 
 const StyledLargeText = withStyle(StyledCell, {
-  alignItems: 'center',
+  alignItems: "center",
 });
 
 const DATA = [
   [
-    'Marlyn',
-    'Engineering',
-    'San Francisco',
+    "Marlyn",
+    "Engineering",
+    "San Francisco",
     -100,
     1234.5,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Luther',
-    'Marketing',
-    'Seattle',
+    "Luther",
+    "Marketing",
+    "Seattle",
     50,
     2435.2,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Kiera',
-    'Operations',
-    'Los Angeles',
+    "Kiera",
+    "Operations",
+    "Los Angeles",
     40,
     8348.1,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Edna',
-    'Design',
-    'Atlanta',
+    "Edna",
+    "Design",
+    "Atlanta",
     700,
     2893.4,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Soraya',
-    'Finance',
-    'Denver',
+    "Soraya",
+    "Finance",
+    "Denver",
     99,
     8787.3,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Dorris',
-    'Legal',
-    'Dallas',
+    "Dorris",
+    "Legal",
+    "Dallas",
     -20,
     6325.2,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Astrid',
-    'Product',
-    'Tempe',
+    "Astrid",
+    "Product",
+    "Tempe",
     0,
     7392.7,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Wendie',
-    'Engineering',
-    'Pittsburgh',
+    "Wendie",
+    "Engineering",
+    "Pittsburgh",
     -15,
     9283.1,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Marna',
-    'Marketing',
-    'Indianapolis',
+    "Marna",
+    "Marketing",
+    "Indianapolis",
     -2,
     7720.9,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Malka',
-    'Operations',
-    'New Orleans',
+    "Malka",
+    "Operations",
+    "New Orleans",
     30,
     6273.3,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Jospeh',
-    'Design',
-    'New York City',
+    "Jospeh",
+    "Design",
+    "New York City",
     -22,
     8837.4,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Roselee',
-    'Finance',
-    'Oakland',
+    "Roselee",
+    "Finance",
+    "Oakland",
     4,
     9277.9,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Justine',
-    'Legal',
-    'Louisville',
+    "Justine",
+    "Legal",
+    "Louisville",
     -9,
     7737.2,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Marlon',
-    'Engineering',
-    'Baltimore',
+    "Marlon",
+    "Engineering",
+    "Baltimore",
     -2,
     2330.3,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Mellissa',
-    'Marketing',
-    'Boulder',
+    "Mellissa",
+    "Marketing",
+    "Boulder",
     -30,
     4458.8,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Fausto',
-    'Operations',
-    'Chicago',
+    "Fausto",
+    "Operations",
+    "Chicago",
     -10,
     6363.9,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Alfredia',
-    'Design',
-    'Grand Rapids',
+    "Alfredia",
+    "Design",
+    "Grand Rapids",
     70,
     2235.2,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
   [
-    'Abel',
-    'Finance',
-    'Nashville',
+    "Abel",
+    "Finance",
+    "Nashville",
     30,
     9882.3,
     {
-      title: 'Australia',
-      data: '100 Macquarie st. Sydney, Australia',
+      title: "Australia",
+      data: "100 Macquarie st. Sydney, Australia",
     },
   ],
   [
-    'Winford',
-    'Legal',
-    'Sacramento',
+    "Winford",
+    "Legal",
+    "Sacramento",
     10,
     8774.7,
     {
-      title: 'New York',
-      data: '100 Broadway st. New York City, New York',
+      title: "New York",
+      data: "100 Broadway st. New York City, New York",
     },
   ],
   [
-    'Neil',
-    'Product',
-    'Columbus',
+    "Neil",
+    "Product",
+    "Columbus",
     -5,
     2673.2,
     {
-      title: 'California',
-      data: '100 Market st. San Francisco, California',
+      title: "California",
+      data: "100 Market st. San Francisco, California",
     },
   ],
 ];
@@ -276,7 +274,7 @@ const DATA = [
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '400px'})}>
+    <div className={css({ height: "400px" })}>
       <StyledTable>
         <StyledHead $width="1000px">
           <StyledHeadCell>Name</StyledHeadCell>
@@ -299,20 +297,14 @@ export default function Example() {
 
               <StyledDeltaCell $isNegative={row[3] < 0}>
                 <React.Fragment>
-                  {row[3] < 0 ? (
-                    <ArrowDown size={24} />
-                  ) : (
-                    <ArrowUp size={24} />
-                  )}
+                  {row[3] < 0 ? <ArrowDown size={24} /> : <ArrowUp size={24} />}
                   {row[3]}%
                 </React.Fragment>
               </StyledDeltaCell>
 
               <StyledLargeText>
                 <Block font="font550">{row[4]}</Block>
-                <LabelXSmall paddingLeft="scale200">
-                  +1000%
-                </LabelXSmall>
+                <LabelXSmall paddingLeft="scale200">+1000%</LabelXSmall>
               </StyledLargeText>
 
               <StyledCell>
diff --git a/documentation-site/examples/table/filter.tsx b/documentation-site/examples/table/filter.tsx
index 25bd127f2c..292874077c 100644
--- a/documentation-site/examples/table/filter.tsx
+++ b/documentation-site/examples/table/filter.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Checkbox} from 'baseui/checkbox';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Checkbox } from "baseui/checkbox";
 import {
   Filter,
   StyledTable,
@@ -9,7 +9,7 @@ import {
   StyledBody,
   StyledRow,
   StyledCell,
-} from 'baseui/table';
+} from "baseui/table";
 
 const FilterCheckbox = (props: any) => (
   <Checkbox
@@ -17,12 +17,12 @@ const FilterCheckbox = (props: any) => (
     onChange={props.onChange}
     overrides={{
       Root: {
-        style: ({$theme}) => ({
+        style: ({ $theme }) => ({
           marginTop: $theme.sizing.scale400,
           marginBottom: $theme.sizing.scale400,
         }),
       },
-      Checkmark: {style: {marginLeft: 0}},
+      Checkmark: { style: { marginLeft: 0 } },
     }}
   >
     {props.children}
@@ -35,7 +35,7 @@ class FilterTable extends React.Component<any> {
   };
 
   FILTER_FUNCTIONS = Array.from(
-    {length: 10},
+    { length: 10 },
     (_, i) => (row: any) => row[0] % (i + 1) === 0,
   );
 
@@ -48,20 +48,16 @@ class FilterTable extends React.Component<any> {
     } else {
       filters[index] = this.FILTER_FUNCTIONS[index];
     }
-    this.setState({filters});
+    this.setState({ filters });
   };
 
-  handleReset = () => this.setState({filters: []});
-  handleSelectAll = () =>
-    this.setState({filters: this.FILTER_FUNCTIONS});
+  handleReset = () => this.setState({ filters: [] });
+  handleSelectAll = () => this.setState({ filters: this.FILTER_FUNCTIONS });
 
   render() {
     const filteredData = this.state.filters
       .filter(Boolean)
-      .reduce(
-        (data, filter) => data.filter(filter),
-        this.props.data,
-      );
+      .reduce((data, filter) => data.filter(filter), this.props.data);
 
     return (
       <StyledTable>
@@ -103,12 +99,9 @@ class FilterTable extends React.Component<any> {
 
 export default function Example() {
   const [css] = useStyletron();
-  const FILTER_DATA = Array.from({length: 100}, (_, i) => [
-    i,
-    'row title',
-  ]);
+  const FILTER_DATA = Array.from({ length: 100 }, (_, i) => [i, "row title"]);
   return (
-    <div className={css({height: '500px'})}>
+    <div className={css({ height: "500px" })}>
       <FilterTable data={FILTER_DATA} />
     </div>
   );
diff --git a/documentation-site/examples/table/fixed-width-column.tsx b/documentation-site/examples/table/fixed-width-column.tsx
index ed0dd028cd..19ff1a51b1 100644
--- a/documentation-site/examples/table/fixed-width-column.tsx
+++ b/documentation-site/examples/table/fixed-width-column.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {withStyle, useStyletron} from 'baseui';
+import React from "react";
+import { withStyle, useStyletron } from "baseui";
 import {
   StyledTable,
   StyledHead,
@@ -7,85 +7,37 @@ import {
   StyledBody,
   StyledRow,
   StyledCell,
-} from 'baseui/table';
+} from "baseui/table";
 
 const DATA = [
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Id', 'First Name', 'Last Name', 'Age', 'Address'];
+const COLUMNS = ["Id", "First Name", "Last Name", "Age", "Address"];
 
 const SmallerHeadCell = withStyle(StyledHeadCell, {
-  maxWidth: '30px',
+  maxWidth: "30px",
 });
 
 const SmallerCell = withStyle(StyledCell, {
-  maxWidth: '30px',
+  maxWidth: "30px",
 });
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '400px'})}>
+    <div className={css({ height: "400px" })}>
       <StyledTable>
         <StyledHead>
           <SmallerHeadCell>ID</SmallerHeadCell>
diff --git a/documentation-site/examples/table/horizontal-scroll.tsx b/documentation-site/examples/table/horizontal-scroll.tsx
index c21285eac8..519311166b 100644
--- a/documentation-site/examples/table/horizontal-scroll.tsx
+++ b/documentation-site/examples/table/horizontal-scroll.tsx
@@ -1,81 +1,29 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Table} from 'baseui/table';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Table } from "baseui/table";
 
 const DATA = [
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
-  [
-    1,
-    'Sarah',
-    'Brown',
-    31,
-    '100 Broadway st. New York City, New York',
-  ],
-  [
-    2,
-    'Jane',
-    'Smith',
-    32,
-    '100 Market st. San Francisco, California',
-  ],
-  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
+  [1, "Sarah", "Brown", 31, "100 Broadway st. New York City, New York"],
+  [2, "Jane", "Smith", 32, "100 Market st. San Francisco, California"],
+  [3, "Joe", "Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Id', 'First Name', 'Last Name', 'Age', 'Address'];
+const COLUMNS = ["Id", "First Name", "Last Name", "Age", "Address"];
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '400px'})}>
-      <Table
-        columns={COLUMNS}
-        data={DATA}
-        horizontalScrollWidth="1000px"
-      />
+    <div className={css({ height: "400px" })}>
+      <Table columns={COLUMNS} data={DATA} horizontalScrollWidth="1000px" />
     </div>
   );
 }
diff --git a/documentation-site/examples/table/pagination.tsx b/documentation-site/examples/table/pagination.tsx
index 478f00f2de..de008e366f 100644
--- a/documentation-site/examples/table/pagination.tsx
+++ b/documentation-site/examples/table/pagination.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Button, KIND} from 'baseui/button';
-import {TriangleDown} from 'baseui/icon';
-import {StatefulMenu} from 'baseui/menu';
-import {Pagination} from 'baseui/pagination';
-import {StatefulPopover, PLACEMENT} from 'baseui/popover';
-import {Table} from 'baseui/table';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Button, KIND } from "baseui/button";
+import { TriangleDown } from "baseui/icon";
+import { StatefulMenu } from "baseui/menu";
+import { Pagination } from "baseui/pagination";
+import { StatefulPopover, PLACEMENT } from "baseui/popover";
+import { Table } from "baseui/table";
 
-function PaginatedTable(props: {data: any[]; columns: any[]}) {
+function PaginatedTable(props: { data: any[]; columns: any[] }) {
   const [css, theme] = useStyletron();
   const [page, setPage] = React.useState(1);
   const [limit, setLimit] = React.useState(12);
@@ -41,8 +41,8 @@ function PaginatedTable(props: {data: any[]; columns: any[]}) {
     <React.Fragment>
       <div
         className={css({
-          display: 'flex',
-          justifyContent: 'space-between',
+          display: "flex",
+          justifyContent: "space-between",
           paddingTop: theme.sizing.scale600,
           paddingBottom: theme.sizing.scale600,
         })}
@@ -69,7 +69,7 @@ function PaginatedTable(props: {data: any[]; columns: any[]}) {
           </div>
         </Button>
       </div>
-      <div className={css({height: '500px'})}>
+      <div className={css({ height: "500px" })}>
         <Table columns={props.columns} data={window()} />
       </div>
       <div
@@ -78,23 +78,23 @@ function PaginatedTable(props: {data: any[]; columns: any[]}) {
           paddingBottom: theme.sizing.scale600,
           paddingRight: theme.sizing.scale800,
           paddingLeft: theme.sizing.scale800,
-          display: 'flex',
-          justifyContent: 'space-between',
+          display: "flex",
+          justifyContent: "space-between",
         })}
       >
         <StatefulPopover
-          content={({close}) => (
+          content={({ close }) => (
             <StatefulMenu
-              items={Array.from({length: 100}, (_, i) => ({
+              items={Array.from({ length: 100 }, (_, i) => ({
                 label: i + 1,
               }))}
-              onItemSelect={({item}) => {
+              onItemSelect={({ item }) => {
                 handleLimitChange(item.label);
                 close();
               }}
               overrides={{
                 List: {
-                  style: {height: '150px', width: '100px'},
+                  style: { height: "150px", width: "100px" },
                 },
               }}
             />
@@ -109,16 +109,16 @@ function PaginatedTable(props: {data: any[]; columns: any[]}) {
         <Pagination
           currentPage={page}
           numPages={Math.ceil(props.data.length / limit)}
-          onPageChange={({nextPage}) => handlePageChange(nextPage)}
+          onPageChange={({ nextPage }) => handlePageChange(nextPage)}
         />
       </div>
     </React.Fragment>
   );
 }
 
-const COLUMNS = Array.from({length: 5}, () => 'Label');
-const DATA = Array.from({length: 45}, (_, i) =>
-  Array.from({length: 5}, () => `row: ${i + 1}`),
+const COLUMNS = Array.from({ length: 5 }, () => "Label");
+const DATA = Array.from({ length: 45 }, (_, i) =>
+  Array.from({ length: 5 }, () => `row: ${i + 1}`),
 );
 
 export default function Example() {
diff --git a/documentation-site/examples/table/vertical-scroll.tsx b/documentation-site/examples/table/vertical-scroll.tsx
index 8af845606b..560d6f2624 100644
--- a/documentation-site/examples/table/vertical-scroll.tsx
+++ b/documentation-site/examples/table/vertical-scroll.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {Table} from 'baseui/table';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Table } from "baseui/table";
 
 const DATA = [
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({height: '500px'})}>
+    <div className={css({ height: "500px" })}>
       <Table columns={COLUMNS} data={DATA} />
     </div>
   );
diff --git a/documentation-site/examples/table/virtual-horizontal-scroll.tsx b/documentation-site/examples/table/virtual-horizontal-scroll.tsx
index 48b3c2c000..189f0b220e 100644
--- a/documentation-site/examples/table/virtual-horizontal-scroll.tsx
+++ b/documentation-site/examples/table/virtual-horizontal-scroll.tsx
@@ -1,38 +1,38 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { useStyletron } from "baseui";
 import {
   StyledTable,
   StyledHead,
   StyledHeadCell,
   StyledRow,
   StyledCell,
-} from 'baseui/table';
+} from "baseui/table";
 
-import {List, AutoSizer} from 'react-virtualized';
+import { List, AutoSizer } from "react-virtualized";
 import {
   CellMeasurer,
   CellMeasurerCache,
-} from 'react-virtualized/dist/commonjs/CellMeasurer';
+} from "react-virtualized/dist/commonjs/CellMeasurer";
 
 const DATA = [
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 const WIDTH = 1000;
 
@@ -44,7 +44,7 @@ const cache = new CellMeasurerCache({
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '500px'})}>
+    <div className={css({ width: "500px" })}>
       <StyledTable
         role="grid"
         aria-colcount={COLUMNS.length}
@@ -58,16 +58,16 @@ export default function Example() {
           ))}
         </StyledHead>
 
-        <div className={css({height: '100%'})}>
+        <div className={css({ height: "100%" })}>
           <AutoSizer>
-            {({height}) => (
+            {({ height }) => (
               <List
                 height={height}
                 width={WIDTH}
                 rowCount={DATA.length}
                 rowHeight={cache.rowHeight}
                 deferredMeasurementCache={cache}
-                rowRenderer={({index, key, parent, style}) => (
+                rowRenderer={({ index, key, parent, style }) => (
                   <CellMeasurer
                     cache={cache}
                     columnIndex={0}
diff --git a/documentation-site/examples/table/virtual.tsx b/documentation-site/examples/table/virtual.tsx
index 2e6c04a172..d7440f6184 100644
--- a/documentation-site/examples/table/virtual.tsx
+++ b/documentation-site/examples/table/virtual.tsx
@@ -1,38 +1,38 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { useStyletron } from "baseui";
 import {
   StyledTable,
   StyledHead,
   StyledHeadCell,
   StyledRow,
   StyledCell,
-} from 'baseui/table';
+} from "baseui/table";
 
-import {AutoSizer, List} from 'react-virtualized';
+import { AutoSizer, List } from "react-virtualized";
 import {
   CellMeasurer,
   CellMeasurerCache,
-} from 'react-virtualized/dist/commonjs/CellMeasurer';
+} from "react-virtualized/dist/commonjs/CellMeasurer";
 
 const DATA = [
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
-  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
-  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
-  ['Joe Black', 33, '100 Macquarie st. Sydney, Australia'],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
+  ["Sarah Brown", 31, "100 Broadway st. New York City, New York"],
+  ["Jane Smith", 32, "100 Market st. San Francisco, California"],
+  ["Joe Black", 33, "100 Macquarie st. Sydney, Australia"],
 ];
 
-const COLUMNS = ['Name', 'Age', 'Address'];
+const COLUMNS = ["Name", "Age", "Address"];
 
 const cache = new CellMeasurerCache({
   defaultHeight: 36,
@@ -42,7 +42,7 @@ const cache = new CellMeasurerCache({
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '500px'})}>
+    <div className={css({ width: "500px" })}>
       <StyledTable
         role="grid"
         aria-colcount={COLUMNS.length}
@@ -56,16 +56,16 @@ export default function Example() {
           ))}
         </StyledHead>
 
-        <div className={css({height: '100px'})}>
+        <div className={css({ height: "100px" })}>
           <AutoSizer>
-            {({width, height}) => (
+            {({ width, height }) => (
               <List
                 height={height}
                 width={width}
                 rowCount={DATA.length}
                 rowHeight={cache.rowHeight}
                 deferredMeasurementCache={cache}
-                rowRenderer={({index, key, parent, style}) => (
+                rowRenderer={({ index, key, parent, style }) => (
                   <CellMeasurer
                     cache={cache}
                     columnIndex={0}
diff --git a/documentation-site/examples/tabs-motion/alignment.tsx b/documentation-site/examples/tabs-motion/alignment.tsx
index 9a4756c611..f26a33dcb5 100644
--- a/documentation-site/examples/tabs-motion/alignment.tsx
+++ b/documentation-site/examples/tabs-motion/alignment.tsx
@@ -1,11 +1,6 @@
-import * as React from 'react';
-import {
-  Tabs,
-  Tab,
-  StyledTabList,
-  StyledTabPanel,
-} from 'baseui/tabs-motion';
-import {Grid, Cell} from 'baseui/layout-grid';
+import * as React from "react";
+import { Tabs, Tab, StyledTabList, StyledTabPanel } from "baseui/tabs-motion";
+import { Grid, Cell } from "baseui/layout-grid";
 
 const TabsOverrides = {
   TabList: {
@@ -40,7 +35,7 @@ export default function Example() {
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       overrides={TabsOverrides}
     >
       <Tab title="First" overrides={TabOverrides}>
diff --git a/documentation-site/examples/tabs-motion/artwork.tsx b/documentation-site/examples/tabs-motion/artwork.tsx
index 3d5d14d179..3c119c56b3 100644
--- a/documentation-site/examples/tabs-motion/artwork.tsx
+++ b/documentation-site/examples/tabs-motion/artwork.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
-import {Check} from 'baseui/icon';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
+import { Check } from "baseui/icon";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
     >
       <Tab title="First" artwork={Check}>
         I must not fear.
diff --git a/documentation-site/examples/tabs-motion/basic.tsx b/documentation-site/examples/tabs-motion/basic.tsx
index 2e347b38af..f2f998a983 100644
--- a/documentation-site/examples/tabs-motion/basic.tsx
+++ b/documentation-site/examples/tabs-motion/basic.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
     >
       <Tab title="First">I must not fear.</Tab>
       <Tab title="Second">Fear is the mind-killer.</Tab>
diff --git a/documentation-site/examples/tabs-motion/disabled.tsx b/documentation-site/examples/tabs-motion/disabled.tsx
index 1e18efaa46..17d3a0c756 100644
--- a/documentation-site/examples/tabs-motion/disabled.tsx
+++ b/documentation-site/examples/tabs-motion/disabled.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       disabled
     >
       <Tab title="First">I must not fear.</Tab>
diff --git a/documentation-site/examples/tabs-motion/enhancer.tsx b/documentation-site/examples/tabs-motion/enhancer.tsx
index 6633dfd910..337e1fc79c 100644
--- a/documentation-site/examples/tabs-motion/enhancer.tsx
+++ b/documentation-site/examples/tabs-motion/enhancer.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
-import {Button, SIZE, SHAPE} from 'baseui/button';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
+import { Button, SIZE, SHAPE } from "baseui/button";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       endEnhancer={
         <Button size={SIZE.compact} shape={SHAPE.pill}>
           Button
diff --git a/documentation-site/examples/tabs-motion/fixed.tsx b/documentation-site/examples/tabs-motion/fixed.tsx
index f9ce16d120..2e1dfc193a 100644
--- a/documentation-site/examples/tabs-motion/fixed.tsx
+++ b/documentation-site/examples/tabs-motion/fixed.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab, FILL} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab, FILL } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       fill={FILL.fixed}
     >
       <Tab title="First">I must not fear.</Tab>
diff --git a/documentation-site/examples/tabs-motion/keyboard-activation.tsx b/documentation-site/examples/tabs-motion/keyboard-activation.tsx
index 30f82ccceb..225cdce777 100644
--- a/documentation-site/examples/tabs-motion/keyboard-activation.tsx
+++ b/documentation-site/examples/tabs-motion/keyboard-activation.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       activateOnFocus={false}
     >
       <Tab title="First">I must not fear.</Tab>
diff --git a/documentation-site/examples/tabs-motion/keys.tsx b/documentation-site/examples/tabs-motion/keys.tsx
index dcf247f8de..1a10aa121c 100644
--- a/documentation-site/examples/tabs-motion/keys.tsx
+++ b/documentation-site/examples/tabs-motion/keys.tsx
@@ -1,13 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
-  const [activeKey, setActiveKey] =
-    React.useState<React.Key>('first');
+  const [activeKey, setActiveKey] = React.useState<React.Key>("first");
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
     >
       <Tab key="first" title="First">
         I must not fear.
diff --git a/documentation-site/examples/tabs-motion/refs.tsx b/documentation-site/examples/tabs-motion/refs.tsx
index b26ae73698..de23b9a3f8 100644
--- a/documentation-site/examples/tabs-motion/refs.tsx
+++ b/documentation-site/examples/tabs-motion/refs.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
@@ -9,16 +9,16 @@ export default function Example() {
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       overrides={{
-        TabList: {props: {ref: tabListRef}},
+        TabList: { props: { ref: tabListRef } },
       }}
     >
       <Tab
         title="First"
         tabRef={firstTabRef}
         overrides={{
-          TabPanel: {props: {ref: firstTabPanelRef}},
+          TabPanel: { props: { ref: firstTabPanelRef } },
         }}
       >
         I must not fear.
diff --git a/documentation-site/examples/tabs-motion/renderAll.tsx b/documentation-site/examples/tabs-motion/renderAll.tsx
index e0e52be4f3..ef7d4d0f62 100644
--- a/documentation-site/examples/tabs-motion/renderAll.tsx
+++ b/documentation-site/examples/tabs-motion/renderAll.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       renderAll
     >
       <Tab title="First">I must not fear.</Tab>
diff --git a/documentation-site/examples/tabs-motion/stateful.tsx b/documentation-site/examples/tabs-motion/stateful.tsx
index 6e021f8194..0439668f30 100644
--- a/documentation-site/examples/tabs-motion/stateful.tsx
+++ b/documentation-site/examples/tabs-motion/stateful.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {StatefulTabs, Tab} from 'baseui/tabs-motion';
+import * as React from "react";
+import { StatefulTabs, Tab } from "baseui/tabs-motion";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/tabs-motion/vertical-orientation.tsx b/documentation-site/examples/tabs-motion/vertical-orientation.tsx
index a721526b71..d38cf755d6 100644
--- a/documentation-site/examples/tabs-motion/vertical-orientation.tsx
+++ b/documentation-site/examples/tabs-motion/vertical-orientation.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab, ORIENTATION} from 'baseui/tabs-motion';
+import * as React from "react";
+import { Tabs, Tab, ORIENTATION } from "baseui/tabs-motion";
 
 export default function Example() {
   const [activeKey, setActiveKey] = React.useState<React.Key>(0);
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(activeKey)}
+      onChange={({ activeKey }) => setActiveKey(activeKey)}
       orientation={ORIENTATION.vertical}
     >
       <Tab title="First">I must not fear.</Tab>
diff --git a/documentation-site/examples/tabs/custom-keys.tsx b/documentation-site/examples/tabs/custom-keys.tsx
index 23accbeb9d..5d613b1199 100644
--- a/documentation-site/examples/tabs/custom-keys.tsx
+++ b/documentation-site/examples/tabs/custom-keys.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {Tabs, Tab} from 'baseui/tabs';
+import * as React from "react";
+import { Tabs, Tab } from "baseui/tabs";
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState('black');
+  const [activeKey, setActiveKey] = React.useState("black");
   return (
     <Tabs
       activeKey={activeKey}
-      onChange={({activeKey}) => setActiveKey(String(activeKey))}
+      onChange={({ activeKey }) => setActiveKey(String(activeKey))}
     >
       <Tab key="black" title="Black">
         <span role="img" aria-label="black">
diff --git a/documentation-site/examples/tabs/overrides.tsx b/documentation-site/examples/tabs/overrides.tsx
index 3583659a98..4461ee46ac 100644
--- a/documentation-site/examples/tabs/overrides.tsx
+++ b/documentation-site/examples/tabs/overrides.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {StatefulTabs, Tab, StyledTab} from 'baseui/tabs';
-import {LabelMedium} from 'baseui/typography';
-import {StyleObject} from 'styletron-react';
+import * as React from "react";
+import { StatefulTabs, Tab, StyledTab } from "baseui/tabs";
+import { LabelMedium } from "baseui/typography";
+import { StyleObject } from "styletron-react";
 
-function TabOverride({children, ...rest}: any) {
+function TabOverride({ children, ...rest }: any) {
   return (
     <StyledTab {...rest}>
       <LabelMedium
         overrides={{
           Block: {
-            style: {color: 'inherit', ':hover': {color: 'inherit'}},
+            style: { color: "inherit", ":hover": { color: "inherit" } },
           },
         }}
       >
@@ -19,50 +19,48 @@ function TabOverride({children, ...rest}: any) {
   );
 }
 
-const tabStyle = ({$active, $disabled, $theme}: any) => ({
+const tabStyle = ({ $active, $disabled, $theme }: any) => ({
   outlineColor: $theme.colors.white,
   color: $active ? $theme.colors.mono100 : $theme.colors.mono300,
-  ':hover': $disabled
+  ":hover": $disabled
     ? {}
     : {
         color: $theme.colors.mono100,
       },
-  ':focus': $disabled
+  ":focus": $disabled
     ? {}
     : {
         color: $theme.colors.mono100,
       },
 });
 
-const tabBarStyle = ({$theme}: any) => ({
+const tabBarStyle = ({ $theme }: any) => ({
   backgroundColor: $theme.colors.mono600,
 });
 
-const tabContentStyle = ({$theme}: any): StyleObject => ({
-  borderLeftWidth: '2px',
-  borderRightWidth: '2px',
-  borderBottomWidth: '2px',
-  borderTopWidth: '0',
-  borderLeftStyle: 'dashed',
-  borderRightStyle: 'dashed',
-  borderTopStyle: 'dashed',
-  borderBottomStyle: 'dashed',
+const tabContentStyle = ({ $theme }: any): StyleObject => ({
+  borderLeftWidth: "2px",
+  borderRightWidth: "2px",
+  borderBottomWidth: "2px",
+  borderTopWidth: "0",
+  borderLeftStyle: "dashed",
+  borderRightStyle: "dashed",
+  borderTopStyle: "dashed",
+  borderBottomStyle: "dashed",
   borderLeftColor: $theme.colors.mono600,
   borderRightColor: $theme.colors.mono600,
   borderTopColor: $theme.colors.mono600,
   borderBottomColor: $theme.colors.mono600,
 });
 
-const content = ['Tab Content 1', 'Tab Content 2', 'Tab Content 3'];
+const content = ["Tab Content 1", "Tab Content 2", "Tab Content 3"];
 
 export default function Example() {
-  const [activeKey, setActiveKey] = React.useState<string | number>(
-    '0',
-  );
+  const [activeKey, setActiveKey] = React.useState<string | number>("0");
   return (
     <StatefulTabs
-      initialState={{activeKey: activeKey}}
-      onChange={({activeKey}) => {
+      initialState={{ activeKey: activeKey }}
+      onChange={({ activeKey }) => {
         setActiveKey(activeKey);
       }}
       overrides={{
@@ -72,7 +70,7 @@ export default function Example() {
         TabContent: {
           style: tabContentStyle,
         },
-        Tab: {component: TabOverride, style: tabStyle},
+        Tab: { component: TabOverride, style: tabStyle },
       }}
     >
       <Tab title="Tab Link 1">
diff --git a/documentation-site/examples/tabs/renderall.tsx b/documentation-site/examples/tabs/renderall.tsx
index d85d9d8165..e1f3964b11 100644
--- a/documentation-site/examples/tabs/renderall.tsx
+++ b/documentation-site/examples/tabs/renderall.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {StatefulTabs, Tab} from 'baseui/tabs';
+import * as React from "react";
+import { StatefulTabs, Tab } from "baseui/tabs";
 
 export default function Example() {
   return (
-    <StatefulTabs initialState={{activeKey: '0'}} renderAll>
+    <StatefulTabs initialState={{ activeKey: "0" }} renderAll>
       <Tab title="Tab Link 1">Tab 1 content</Tab>
       <Tab title="Tab Link 2">Tab 2 content</Tab>
       <Tab title="Tab Link 3">Tab 3 content</Tab>
diff --git a/documentation-site/examples/tabs/uncontrolled.tsx b/documentation-site/examples/tabs/uncontrolled.tsx
index 888346b66b..238aec573b 100644
--- a/documentation-site/examples/tabs/uncontrolled.tsx
+++ b/documentation-site/examples/tabs/uncontrolled.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {StatefulTabs, Tab} from 'baseui/tabs';
+import * as React from "react";
+import { StatefulTabs, Tab } from "baseui/tabs";
 
 export default function Example() {
   return (
-    <StatefulTabs initialState={{activeKey: '0'}}>
+    <StatefulTabs initialState={{ activeKey: "0" }}>
       <Tab title="Tab Link 1">Tab 1 content</Tab>
       <Tab title="Tab Link 2">Tab 2 content</Tab>
       <Tab title="Tab Link 3">Tab 3 content</Tab>
diff --git a/documentation-site/examples/tabs/vertical.tsx b/documentation-site/examples/tabs/vertical.tsx
index 9388e68ee5..10dcdec408 100644
--- a/documentation-site/examples/tabs/vertical.tsx
+++ b/documentation-site/examples/tabs/vertical.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {StatefulTabs, Tab, ORIENTATION} from 'baseui/tabs';
+import * as React from "react";
+import { StatefulTabs, Tab, ORIENTATION } from "baseui/tabs";
 
 export default function Example() {
   return (
     <StatefulTabs
       orientation={ORIENTATION.vertical}
-      initialState={{activeKey: '2'}}
+      initialState={{ activeKey: "2" }}
     >
       <Tab title="Tab Link 1">Tab 1 content</Tab>
       <Tab title="Tab Link 2">Tab 2 content</Tab>
diff --git a/documentation-site/examples/tag/basic.tsx b/documentation-site/examples/tag/basic.tsx
index a1fe2f39b3..0ba1243cc4 100644
--- a/documentation-site/examples/tag/basic.tsx
+++ b/documentation-site/examples/tag/basic.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag} from 'baseui/tag';
+import * as React from "react";
+import { Tag } from "baseui/tag";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/tag/clickable-non-closeable.tsx b/documentation-site/examples/tag/clickable-non-closeable.tsx
index c48eee3a8f..56261c42e9 100644
--- a/documentation-site/examples/tag/clickable-non-closeable.tsx
+++ b/documentation-site/examples/tag/clickable-non-closeable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, VARIANT } from "baseui/tag";
 
 const variants = Object.values(VARIANT);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
@@ -12,7 +12,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('neutral');
+              onClick("neutral");
             }}
             variant={variant}
             kind="neutral"
@@ -22,7 +22,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('primary');
+              onClick("primary");
             }}
             variant={variant}
             kind="primary"
@@ -32,7 +32,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('accent');
+              onClick("accent");
             }}
             variant={variant}
             kind="accent"
@@ -42,7 +42,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('positive');
+              onClick("positive");
             }}
             variant={variant}
             kind="positive"
@@ -52,7 +52,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('warning');
+              onClick("warning");
             }}
             variant={variant}
             kind="warning"
@@ -62,7 +62,7 @@ export default function Example() {
           <Tag
             closeable={false}
             onClick={() => {
-              onClick('negative');
+              onClick("negative");
             }}
             variant={variant}
             kind="negative"
diff --git a/documentation-site/examples/tag/clickable.tsx b/documentation-site/examples/tag/clickable.tsx
index 01abc8a79b..c4d7e82bc6 100644
--- a/documentation-site/examples/tag/clickable.tsx
+++ b/documentation-site/examples/tag/clickable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, VARIANT } from "baseui/tag";
 
 const variants = Object.values(VARIANT);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
@@ -11,7 +11,7 @@ export default function Example() {
         <React.Fragment key={index}>
           <Tag
             onClick={() => {
-              onClick('neutral');
+              onClick("neutral");
             }}
             variant={variant}
             kind="neutral"
@@ -20,7 +20,7 @@ export default function Example() {
           </Tag>
           <Tag
             onClick={() => {
-              onClick('primary');
+              onClick("primary");
             }}
             variant={variant}
             kind="primary"
@@ -29,7 +29,7 @@ export default function Example() {
           </Tag>
           <Tag
             onClick={() => {
-              onClick('accent');
+              onClick("accent");
             }}
             variant={variant}
             kind="accent"
@@ -38,7 +38,7 @@ export default function Example() {
           </Tag>
           <Tag
             onClick={() => {
-              onClick('positive');
+              onClick("positive");
             }}
             variant={variant}
             kind="positive"
@@ -47,7 +47,7 @@ export default function Example() {
           </Tag>
           <Tag
             onClick={() => {
-              onClick('warning');
+              onClick("warning");
             }}
             variant={variant}
             kind="warning"
@@ -56,7 +56,7 @@ export default function Example() {
           </Tag>
           <Tag
             onClick={() => {
-              onClick('negative');
+              onClick("negative");
             }}
             variant={variant}
             kind="negative"
diff --git a/documentation-site/examples/tag/custom-color.tsx b/documentation-site/examples/tag/custom-color.tsx
index e3a5e6c7a8..c6b5c2db40 100644
--- a/documentation-site/examples/tag/custom-color.tsx
+++ b/documentation-site/examples/tag/custom-color.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, KIND, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, KIND, VARIANT } from "baseui/tag";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/tag/disabled.tsx b/documentation-site/examples/tag/disabled.tsx
index e599e03732..e579f487c1 100644
--- a/documentation-site/examples/tag/disabled.tsx
+++ b/documentation-site/examples/tag/disabled.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, VARIANT } from "baseui/tag";
 
 const variants = Object.values(VARIANT);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
@@ -12,7 +12,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('neutral');
+              onClick("neutral");
             }}
             variant={variant}
             kind="neutral"
@@ -22,7 +22,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('primary');
+              onClick("primary");
             }}
             variant={variant}
             kind="primary"
@@ -32,7 +32,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('accent');
+              onClick("accent");
             }}
             variant={variant}
             kind="accent"
@@ -42,7 +42,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('positive');
+              onClick("positive");
             }}
             variant={variant}
             kind="positive"
@@ -52,7 +52,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('warning');
+              onClick("warning");
             }}
             variant={variant}
             kind="warning"
@@ -62,7 +62,7 @@ export default function Example() {
           <Tag
             disabled
             onClick={() => {
-              onClick('negative');
+              onClick("negative");
             }}
             variant={variant}
             kind="negative"
diff --git a/documentation-site/examples/tag/non-clickable.tsx b/documentation-site/examples/tag/non-clickable.tsx
index 450e8468fc..83739e6090 100644
--- a/documentation-site/examples/tag/non-clickable.tsx
+++ b/documentation-site/examples/tag/non-clickable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, VARIANT } from "baseui/tag";
 
 const variants = Object.values(VARIANT);
 
diff --git a/documentation-site/examples/tag/non-closeable.tsx b/documentation-site/examples/tag/non-closeable.tsx
index ee479a4524..4b0e03bc0f 100644
--- a/documentation-site/examples/tag/non-closeable.tsx
+++ b/documentation-site/examples/tag/non-closeable.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, VARIANT } from "baseui/tag";
 
 const variants = Object.values(VARIANT);
 
diff --git a/documentation-site/examples/tag/size.tsx b/documentation-site/examples/tag/size.tsx
index 7b2c8375e3..1af7c41d8a 100644
--- a/documentation-site/examples/tag/size.tsx
+++ b/documentation-site/examples/tag/size.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, SIZE} from 'baseui/tag';
+import * as React from "react";
+import { Tag, SIZE } from "baseui/tag";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/tag/variants.tsx b/documentation-site/examples/tag/variants.tsx
index f7c04964a7..32a81a016c 100644
--- a/documentation-site/examples/tag/variants.tsx
+++ b/documentation-site/examples/tag/variants.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag} from 'baseui/tag';
+import * as React from "react";
+import { Tag } from "baseui/tag";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/textarea/basic.tsx b/documentation-site/examples/textarea/basic.tsx
index 0028321e78..b28c4f84df 100644
--- a/documentation-site/examples/textarea/basic.tsx
+++ b/documentation-site/examples/textarea/basic.tsx
@@ -1,12 +1,9 @@
-import * as React from 'react';
-import {Textarea} from 'baseui/textarea';
+import * as React from "react";
+import { Textarea } from "baseui/textarea";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
-    <Textarea
-      value={value}
-      onChange={(e) => setValue(e.currentTarget.value)}
-    />
+    <Textarea value={value} onChange={(e) => setValue(e.currentTarget.value)} />
   );
 }
diff --git a/documentation-site/examples/textarea/ref.tsx b/documentation-site/examples/textarea/ref.tsx
index 01ac12e5d0..22e7be3176 100644
--- a/documentation-site/examples/textarea/ref.tsx
+++ b/documentation-site/examples/textarea/ref.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Textarea} from 'baseui/textarea';
-import {Button} from 'baseui/button';
+import * as React from "react";
+import { Textarea } from "baseui/textarea";
+import { Button } from "baseui/button";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
   return (
     <React.Fragment>
diff --git a/documentation-site/examples/textarea/resizable.tsx b/documentation-site/examples/textarea/resizable.tsx
index 616c1cdb0b..84970bce1e 100644
--- a/documentation-site/examples/textarea/resizable.tsx
+++ b/documentation-site/examples/textarea/resizable.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Textarea} from 'baseui/textarea';
+import * as React from "react";
+import { Textarea } from "baseui/textarea";
 
 export default function Example() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <Textarea
       value={value}
diff --git a/documentation-site/examples/textarea/sizes.tsx b/documentation-site/examples/textarea/sizes.tsx
index 3444e09630..ae37c7a781 100644
--- a/documentation-site/examples/textarea/sizes.tsx
+++ b/documentation-site/examples/textarea/sizes.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {Textarea} from 'baseui/textarea';
-import {SIZE} from 'baseui/input';
+import * as React from "react";
+import { Textarea } from "baseui/textarea";
+import { SIZE } from "baseui/input";
 
 export default function Example() {
-  const [valueA, setValueA] = React.useState('Compact size...');
-  const [valueB, setValueB] = React.useState('Default size...');
-  const [valueC, setValueC] = React.useState('Large size...');
+  const [valueA, setValueA] = React.useState("Compact size...");
+  const [valueB, setValueB] = React.useState("Default size...");
+  const [valueC, setValueC] = React.useState("Large size...");
   return (
     <React.Fragment>
       <Textarea
diff --git a/documentation-site/examples/textarea/stateful.tsx b/documentation-site/examples/textarea/stateful.tsx
index 70e546e221..16c6084ff5 100644
--- a/documentation-site/examples/textarea/stateful.tsx
+++ b/documentation-site/examples/textarea/stateful.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import {StatefulTextarea} from 'baseui/textarea';
+import * as React from "react";
+import { StatefulTextarea } from "baseui/textarea";
 
 export default function Example() {
   return (
     <StatefulTextarea
-      initialState={{value: 'I manage my own state...'}}
+      initialState={{ value: "I manage my own state..." }}
       onChange={console.log}
       placeholder="I manage my own state..."
     />
diff --git a/documentation-site/examples/textarea/states.tsx b/documentation-site/examples/textarea/states.tsx
index 5c6f944003..7ca0b57eca 100644
--- a/documentation-site/examples/textarea/states.tsx
+++ b/documentation-site/examples/textarea/states.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Textarea} from 'baseui/textarea';
+import * as React from "react";
+import { Textarea } from "baseui/textarea";
 
 export default function Example() {
-  const [valueA, setValueA] = React.useState('Positive state...');
-  const [valueB, setValueB] = React.useState('Error state...');
+  const [valueA, setValueA] = React.useState("Positive state...");
+  const [valueB, setValueB] = React.useState("Error state...");
   return (
     <React.Fragment>
       <Textarea
diff --git a/documentation-site/examples/theme/icon-overrides.tsx b/documentation-site/examples/theme/icon-overrides.tsx
index e85c30d094..c8b83d3a91 100644
--- a/documentation-site/examples/theme/icon-overrides.tsx
+++ b/documentation-site/examples/theme/icon-overrides.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {StatefulPagination} from 'baseui/pagination';
+import * as React from "react";
+import { StatefulPagination } from "baseui/pagination";
 
-import {createTheme, lightThemePrimitives} from 'baseui';
-import {ThemeProvider} from 'baseui';
-import {ArrowLeft} from 'baseui/icon';
+import { createTheme, lightThemePrimitives } from "baseui";
+import { ThemeProvider } from "baseui";
+import { ArrowLeft } from "baseui/icon";
 
 const themeWithIcons = createTheme(
   {
diff --git a/documentation-site/examples/tile/action.tsx b/documentation-site/examples/tile/action.tsx
index 6ad2047529..922b2439ba 100644
--- a/documentation-site/examples/tile/action.tsx
+++ b/documentation-site/examples/tile/action.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Tile, TILE_KIND, ALIGNMENT} from 'baseui/tile';
-import Calendar from 'baseui/icon/calendar';
+import * as React from "react";
+import { Tile, TILE_KIND, ALIGNMENT } from "baseui/tile";
+import Calendar from "baseui/icon/calendar";
 
 export default function Example() {
   return (
@@ -9,7 +9,7 @@ export default function Example() {
       leadingContent={() => <Calendar size={36} />}
       label="Book now"
       color
-      onClick={() => alert('booking appointment')}
+      onClick={() => alert("booking appointment")}
       headerAlignment={ALIGNMENT.center}
       bodyAlignment={ALIGNMENT.center}
     />
diff --git a/documentation-site/examples/tile/alignment.tsx b/documentation-site/examples/tile/alignment.tsx
index e8401a03db..a9a11bedae 100644
--- a/documentation-site/examples/tile/alignment.tsx
+++ b/documentation-site/examples/tile/alignment.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import {Tile, TILE_KIND, ALIGNMENT} from 'baseui/tile';
-import Upload from 'baseui/icon/upload';
+import * as React from "react";
+import { Tile, TILE_KIND, ALIGNMENT } from "baseui/tile";
+import Upload from "baseui/icon/upload";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/tile/multi-select-batch.tsx b/documentation-site/examples/tile/multi-select-batch.tsx
index d68fbeea9f..663106a83e 100644
--- a/documentation-site/examples/tile/multi-select-batch.tsx
+++ b/documentation-site/examples/tile/multi-select-batch.tsx
@@ -1,10 +1,5 @@
-import * as React from 'react';
-import {
-  Tile,
-  TileGroup,
-  TILE_GROUP_KIND,
-  TILE_KIND,
-} from 'baseui/tile';
+import * as React from "react";
+import { Tile, TileGroup, TILE_GROUP_KIND, TILE_KIND } from "baseui/tile";
 
 export default function Example() {
   const [selected, setSelected] = React.useState<Array<number>>([]);
diff --git a/documentation-site/examples/tile/multi-select-live.tsx b/documentation-site/examples/tile/multi-select-live.tsx
index e1ded875bb..382e1722e6 100644
--- a/documentation-site/examples/tile/multi-select-live.tsx
+++ b/documentation-site/examples/tile/multi-select-live.tsx
@@ -1,10 +1,5 @@
-import * as React from 'react';
-import {
-  Tile,
-  TileGroup,
-  TILE_GROUP_KIND,
-  TILE_KIND,
-} from 'baseui/tile';
+import * as React from "react";
+import { Tile, TileGroup, TILE_GROUP_KIND, TILE_KIND } from "baseui/tile";
 
 export default function Example() {
   const [selected, setSelected] = React.useState<Array<number>>([]);
diff --git a/documentation-site/examples/tile/selection-no-trailing-content.tsx b/documentation-site/examples/tile/selection-no-trailing-content.tsx
index faa7ffdad0..80277c4af7 100644
--- a/documentation-site/examples/tile/selection-no-trailing-content.tsx
+++ b/documentation-site/examples/tile/selection-no-trailing-content.tsx
@@ -1,10 +1,5 @@
-import * as React from 'react';
-import {
-  Tile,
-  TileGroup,
-  TILE_GROUP_KIND,
-  TILE_KIND,
-} from 'baseui/tile';
+import * as React from "react";
+import { Tile, TileGroup, TILE_GROUP_KIND, TILE_KIND } from "baseui/tile";
 
 export default function Example() {
   const [selected, setSelected] = React.useState<number>(-1);
diff --git a/documentation-site/examples/tile/single-select.tsx b/documentation-site/examples/tile/single-select.tsx
index 760a319722..d7b070ec5a 100644
--- a/documentation-site/examples/tile/single-select.tsx
+++ b/documentation-site/examples/tile/single-select.tsx
@@ -1,10 +1,5 @@
-import * as React from 'react';
-import {
-  Tile,
-  TileGroup,
-  TILE_GROUP_KIND,
-  TILE_KIND,
-} from 'baseui/tile';
+import * as React from "react";
+import { Tile, TileGroup, TILE_GROUP_KIND, TILE_KIND } from "baseui/tile";
 
 export default function Example() {
   const [selected, setSelected] = React.useState<number>(-1);
diff --git a/documentation-site/examples/timepicker/timepicker-minmax.tsx b/documentation-site/examples/timepicker/timepicker-minmax.tsx
index 983ea7fe21..d2c7703fd3 100644
--- a/documentation-site/examples/timepicker/timepicker-minmax.tsx
+++ b/documentation-site/examples/timepicker/timepicker-minmax.tsx
@@ -1,13 +1,13 @@
-import React, {useState} from 'react';
-import {useStyletron} from 'baseui';
-import {TimePicker} from 'baseui/timepicker';
-import {FormControl} from 'baseui/form-control';
+import React, { useState } from "react";
+import { useStyletron } from "baseui";
+import { TimePicker } from "baseui/timepicker";
+import { FormControl } from "baseui/form-control";
 
-const initial = new Date('December 6, 2021 9:00:00');
-const sameDateMin = new Date('December 6, 2021 8:00:00');
-const sameDateMax = new Date('December 6, 2021 10:00:00');
-const beyondDateMin = new Date('December 4, 2021 8:00:00');
-const beyondDateMax = new Date('December 8, 2021 10:00:00');
+const initial = new Date("December 6, 2021 9:00:00");
+const sameDateMin = new Date("December 6, 2021 8:00:00");
+const sameDateMax = new Date("December 6, 2021 10:00:00");
+const beyondDateMin = new Date("December 4, 2021 8:00:00");
+const beyondDateMax = new Date("December 8, 2021 10:00:00");
 
 export default function Example() {
   const [css] = useStyletron();
@@ -16,7 +16,7 @@ export default function Example() {
   const [ignoreDate, setIgnoreDate] = useState(initial);
 
   return (
-    <div className={css({width: '130px'})}>
+    <div className={css({ width: "130px" })}>
       <FormControl label="min/max times on the same date">
         <TimePicker
           value={sameDate}
diff --git a/documentation-site/examples/timepicker/timepicker.tsx b/documentation-site/examples/timepicker/timepicker.tsx
index dfcbb92e03..30b2898804 100644
--- a/documentation-site/examples/timepicker/timepicker.tsx
+++ b/documentation-site/examples/timepicker/timepicker.tsx
@@ -1,26 +1,20 @@
-import React, {useState} from 'react';
-import {useStyletron} from 'baseui';
-import {TimePicker} from 'baseui/timepicker';
-import {FormControl} from 'baseui/form-control';
+import React, { useState } from "react";
+import { useStyletron } from "baseui";
+import { TimePicker } from "baseui/timepicker";
+import { FormControl } from "baseui/form-control";
 
 export default function Example() {
   const [css] = useStyletron();
-  const [twelveHourTime, setTwelveHourTime] = useState<Date | null>(
-    null,
-  );
-  const [twentyFourHourTime, setTwentyFourHourTime] =
-    useState<Date | null>(null);
-  const [creatableTime, setCreatableTime] = useState<Date | null>(
+  const [twelveHourTime, setTwelveHourTime] = useState<Date | null>(null);
+  const [twentyFourHourTime, setTwentyFourHourTime] = useState<Date | null>(
     null,
   );
+  const [creatableTime, setCreatableTime] = useState<Date | null>(null);
 
   return (
-    <div className={css({width: '130px'})}>
+    <div className={css({ width: "130px" })}>
       <FormControl label="12 hour format">
-        <TimePicker
-          value={twelveHourTime}
-          onChange={setTwelveHourTime}
-        />
+        <TimePicker value={twelveHourTime} onChange={setTwelveHourTime} />
       </FormControl>
       <FormControl label="24 hour format">
         <TimePicker
diff --git a/documentation-site/examples/timezonepicker/timezone-picker.tsx b/documentation-site/examples/timezonepicker/timezone-picker.tsx
index 43e03ad2fd..9c81f5dd2b 100644
--- a/documentation-site/examples/timezonepicker/timezone-picker.tsx
+++ b/documentation-site/examples/timezonepicker/timezone-picker.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {useStyletron} from 'baseui';
-import {TimezonePicker} from 'baseui/timezonepicker';
-import {FormControl} from 'baseui/form-control';
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { TimezonePicker } from "baseui/timezonepicker";
+import { FormControl } from "baseui/form-control";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({width: '400px'})}>
+    <div className={css({ width: "400px" })}>
       <FormControl label="daylight savings time">
         <TimezonePicker date={new Date(2019, 3, 1)} />
       </FormControl>
diff --git a/documentation-site/examples/toast/toast-close-from-outside.tsx b/documentation-site/examples/toast/toast-close-from-outside.tsx
index 3df1d22be3..5bc5bb040c 100644
--- a/documentation-site/examples/toast/toast-close-from-outside.tsx
+++ b/documentation-site/examples/toast/toast-close-from-outside.tsx
@@ -1,16 +1,14 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {toaster, ToasterContainer} from 'baseui/toast';
-import {Button} from 'baseui/button';
+import { toaster, ToasterContainer } from "baseui/toast";
+import { Button } from "baseui/button";
 
 type INullableReactText = React.ReactText | null;
 
 export default function Example() {
-  const [toastKey, setToastKey] =
-    React.useState<INullableReactText>(null);
+  const [toastKey, setToastKey] = React.useState<INullableReactText>(null);
 
-  const showToast = () =>
-    setToastKey(toaster.info('This is the message.', {}));
+  const showToast = () => setToastKey(toaster.info("This is the message.", {}));
 
   const closeToast = () => {
     if (toastKey) {
diff --git a/documentation-site/examples/toast/toast-notification.tsx b/documentation-site/examples/toast/toast-notification.tsx
index 35bec42279..ad5958b0bc 100644
--- a/documentation-site/examples/toast/toast-notification.tsx
+++ b/documentation-site/examples/toast/toast-notification.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Toast, KIND, ToasterContainer} from 'baseui/toast';
+import * as React from "react";
+import { Toast, KIND, ToasterContainer } from "baseui/toast";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/toast/toast-same-key-notification.tsx b/documentation-site/examples/toast/toast-same-key-notification.tsx
index 99dd8c52c6..59d70d93f2 100644
--- a/documentation-site/examples/toast/toast-same-key-notification.tsx
+++ b/documentation-site/examples/toast/toast-same-key-notification.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {toaster, ToasterContainer} from 'baseui/toast';
-import {Button, SIZE} from 'baseui/button';
-import {Block} from 'baseui/block';
+import * as React from "react";
+import { toaster, ToasterContainer } from "baseui/toast";
+import { Button, SIZE } from "baseui/button";
+import { Block } from "baseui/block";
 
 export default function Example() {
   const [count, setCount] = React.useState(0);
@@ -11,14 +11,10 @@ export default function Example() {
       <Button
         onClick={() => {
           setCount(count + 1);
-          let toastKey: React.Key = '';
+          let toastKey: React.Key = "";
           const msg = `Click count: ${count}`;
           const ok = (
-            <Block
-              marginTop="15px"
-              display="flex"
-              justifyContent="center"
-            >
+            <Block marginTop="15px" display="flex" justifyContent="center">
               <Button
                 size={SIZE.compact}
                 onClick={() => toaster.clear(toastKey)}
@@ -28,11 +24,7 @@ export default function Example() {
             </Block>
           );
           const showMore = (
-            <Block
-              marginTop="15px"
-              display="flex"
-              justifyContent="center"
-            >
+            <Block marginTop="15px" display="flex" justifyContent="center">
               <Button
                 size={SIZE.compact}
                 onClick={() =>
@@ -63,11 +55,11 @@ export default function Example() {
               {showMore}
             </React.Fragment>,
             {
-              key: 'same-key',
-              onClose: () => console.log('Toast closed.'),
+              key: "same-key",
+              onClose: () => console.log("Toast closed."),
               overrides: {
                 InnerContainer: {
-                  style: {width: '100%'},
+                  style: { width: "100%" },
                 },
               },
             },
diff --git a/documentation-site/examples/tokens/basic.tsx b/documentation-site/examples/tokens/basic.tsx
index 3495554d5a..5603b738fa 100644
--- a/documentation-site/examples/tokens/basic.tsx
+++ b/documentation-site/examples/tokens/basic.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {colors} from 'baseui/tokens';
+import React from "react";
+import { useStyletron } from "baseui";
+import { colors } from "baseui/tokens";
 
 export default function Example() {
   const [css] = useStyletron();
   return (
-    <div className={css({color: colors.blue400})}>
+    <div className={css({ color: colors.blue400 })}>
       This text is Uber blue!
     </div>
   );
diff --git a/documentation-site/examples/tooltip/stateful-complex-content.tsx b/documentation-site/examples/tooltip/stateful-complex-content.tsx
index bf980c3325..406a1906f1 100644
--- a/documentation-site/examples/tooltip/stateful-complex-content.tsx
+++ b/documentation-site/examples/tooltip/stateful-complex-content.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {StatefulTooltip} from 'baseui/tooltip';
-import {StyledLink} from 'baseui/link';
-import {useStyletron, DarkTheme, ThemeProvider} from 'baseui';
+import * as React from "react";
+import { StatefulTooltip } from "baseui/tooltip";
+import { StyledLink } from "baseui/link";
+import { useStyletron, DarkTheme, ThemeProvider } from "baseui";
 
 function ComplexContent() {
   return (
@@ -16,16 +16,16 @@ export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div>
-      You can use tooltips in many places, including inline text{' '}
+      You can use tooltips in many places, including inline text{" "}
       <StatefulTooltip
-        accessibilityType={'tooltip'}
+        accessibilityType={"tooltip"}
         content={ComplexContent}
         autoFocus
       >
         <span
           className={css({
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'dotted',
+            borderBottomWidth: "1px",
+            borderBottomStyle: "dotted",
             borderBottomColor: `${theme.colors.primary500}`,
             color: theme.colors.primary500,
           })}
@@ -34,11 +34,11 @@ export default function Example() {
           such as this
         </span>
       </StatefulTooltip>
-      . Tooltips are essentially just a Popover with a few style
-      tweaks, so you can use all the features that Popover supports.
-      Tooltips with interactive content, such as links or buttons,
-      should use the autoFocus or focusLock props. This ensures the
-      content is within the keyboard tab order of the page.
+      . Tooltips are essentially just a Popover with a few style tweaks, so you
+      can use all the features that Popover supports. Tooltips with interactive
+      content, such as links or buttons, should use the autoFocus or focusLock
+      props. This ensures the content is within the keyboard tab order of the
+      page.
     </div>
   );
 }
diff --git a/documentation-site/examples/tooltip/stateful.tsx b/documentation-site/examples/tooltip/stateful.tsx
index a6eaa84bfc..6e2ee21cce 100644
--- a/documentation-site/examples/tooltip/stateful.tsx
+++ b/documentation-site/examples/tooltip/stateful.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {StatefulTooltip} from 'baseui/tooltip';
-import {useStyletron} from 'baseui';
+import * as React from "react";
+import { StatefulTooltip } from "baseui/tooltip";
+import { useStyletron } from "baseui";
 
 export default function Example() {
   const [css, theme] = useStyletron();
   return (
     <div>
-      You can use tooltips in many places, including inline text{' '}
+      You can use tooltips in many places, including inline text{" "}
       <StatefulTooltip
-        accessibilityType={'tooltip'}
+        accessibilityType={"tooltip"}
         content="Tooltips display short messages."
       >
         <span
           className={css({
-            borderBottomWidth: '1px',
-            borderBottomStyle: 'dotted',
+            borderBottomWidth: "1px",
+            borderBottomStyle: "dotted",
             borderBottomColor: `${theme.colors.primary500}`,
             color: theme.colors.primary500,
           })}
@@ -23,8 +23,8 @@ export default function Example() {
           such as this
         </span>
       </StatefulTooltip>
-      . Tooltips are essentially just a Popover with a few style
-      tweaks, so you can use all the features that Popover supports.
+      . Tooltips are essentially just a Popover with a few style tweaks, so you
+      can use all the features that Popover supports.
     </div>
   );
 }
diff --git a/documentation-site/examples/typography/display.tsx b/documentation-site/examples/typography/display.tsx
index 38b9dc66e1..9d725bf1dd 100644
--- a/documentation-site/examples/typography/display.tsx
+++ b/documentation-site/examples/typography/display.tsx
@@ -1,26 +1,19 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   DisplayLarge,
   DisplayMedium,
   DisplaySmall,
   DisplayXSmall,
-} from 'baseui/typography';
+} from "baseui/typography";
 
-const textString =
-  'We ignite opportunity by setting the world in motion.';
+const textString = "We ignite opportunity by setting the world in motion.";
 
 export default function Example() {
   return (
     <React.Fragment>
-      <DisplayLarge marginBottom="scale500">
-        {textString}
-      </DisplayLarge>
-      <DisplayMedium marginBottom="scale500">
-        {textString}
-      </DisplayMedium>
-      <DisplaySmall marginBottom="scale500">
-        {textString}
-      </DisplaySmall>
+      <DisplayLarge marginBottom="scale500">{textString}</DisplayLarge>
+      <DisplayMedium marginBottom="scale500">{textString}</DisplayMedium>
+      <DisplaySmall marginBottom="scale500">{textString}</DisplaySmall>
       <DisplayXSmall>{textString}</DisplayXSmall>
     </React.Fragment>
   );
diff --git a/documentation-site/examples/typography/heading.tsx b/documentation-site/examples/typography/heading.tsx
index c54d43eb25..bd05d20157 100644
--- a/documentation-site/examples/typography/heading.tsx
+++ b/documentation-site/examples/typography/heading.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   HeadingXXLarge,
   HeadingXLarge,
@@ -6,10 +6,9 @@ import {
   HeadingMedium,
   HeadingSmall,
   HeadingXSmall,
-} from 'baseui/typography';
+} from "baseui/typography";
 
-const textString =
-  'We ignite opportunity by setting the world in motion.';
+const textString = "We ignite opportunity by setting the world in motion.";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/typography/text.tsx b/documentation-site/examples/typography/text.tsx
index d899fc95d5..8ee59832f5 100644
--- a/documentation-site/examples/typography/text.tsx
+++ b/documentation-site/examples/typography/text.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   ParagraphLarge,
   ParagraphMedium,
@@ -8,12 +8,11 @@ import {
   LabelMedium,
   LabelSmall,
   LabelXSmall,
-} from 'baseui/typography';
+} from "baseui/typography";
 
-const textString =
-  'We ignite opportunity by setting the world in motion.';
+const textString = "We ignite opportunity by setting the world in motion.";
 const bodyString =
-  'Good things happen when people can move, whether across town or towards their dreams. Opportunities appear, open up, become reality. What started as a way to tap a button to get a ride has led to billions of moments of human connection as people around the world go all kinds of places in all kinds of ways with the help of our technology.';
+  "Good things happen when people can move, whether across town or towards their dreams. Opportunities appear, open up, become reality. What started as a way to tap a button to get a ride has led to billions of moments of human connection as people around the world go all kinds of places in all kinds of ways with the help of our technology.";
 
 export default function Example() {
   return (
diff --git a/documentation-site/examples/unstable-a11y/wrapper.tsx b/documentation-site/examples/unstable-a11y/wrapper.tsx
index ddc619deea..59c97c6f4c 100644
--- a/documentation-site/examples/unstable-a11y/wrapper.tsx
+++ b/documentation-site/examples/unstable-a11y/wrapper.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 
-import {useStyletron} from 'baseui';
-import {Unstable_A11y as A11y} from 'baseui/a11y';
-import {Button} from 'baseui/button';
-import {FormControl} from 'baseui/form-control';
-import {StatefulInput} from 'baseui/input';
+import { useStyletron } from "baseui";
+import { Unstable_A11y as A11y } from "baseui/a11y";
+import { Button } from "baseui/button";
+import { FormControl } from "baseui/form-control";
+import { StatefulInput } from "baseui/input";
 
 export default function Example() {
-  const [inputs, setInputs] = React.useState(['']);
+  const [inputs, setInputs] = React.useState([""]);
   const [css, theme] = useStyletron();
   return (
     <A11y>
@@ -16,10 +16,7 @@ export default function Example() {
           padding: theme.sizing.scale900,
         })}
       >
-        <Button
-          size="compact"
-          onClick={() => setInputs([...inputs, ''])}
-        >
+        <Button size="compact" onClick={() => setInputs([...inputs, ""])}>
           add input component
         </Button>
 
@@ -27,9 +24,7 @@ export default function Example() {
         <br />
 
         {/* eslint-disable-next-line jsx-a11y/aria-proptypes */}
-        <div aria-hidden={'asdf' as unknown as boolean}>
-          should violate
-        </div>
+        <div aria-hidden={"asdf" as unknown as boolean}>should violate</div>
         <br />
 
         <div>should not violate</div>
diff --git a/documentation-site/examples/use-styletron/overrides.tsx b/documentation-site/examples/use-styletron/overrides.tsx
index ada96320c1..acc97d73e5 100644
--- a/documentation-site/examples/use-styletron/overrides.tsx
+++ b/documentation-site/examples/use-styletron/overrides.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {useStyletron} from 'baseui';
-import {Button} from 'baseui/button';
+import React from "react";
+import { useStyletron } from "baseui";
+import { Button } from "baseui/button";
 
 export default function Example() {
   const [css, theme] = useStyletron();
diff --git a/documentation-site/pages/components/menu.mdx b/documentation-site/pages/components/menu.mdx
index 74fac4a5d1..1ba7c89ddb 100644
--- a/documentation-site/pages/components/menu.mdx
+++ b/documentation-site/pages/components/menu.mdx
@@ -158,8 +158,8 @@ The provided id will be set as a value for the item container's `id` attribute t
         <strong>Source Code</strong> (override objects are empty just to
         demonstrate their placement)
       </Block>
-      <Code>
-        {`import {StatefulMenu, OptionProfile} from 'baseui/menu';
+      <Code
+        content={`import {StatefulMenu, OptionProfile} from 'baseui/menu';
           export default () => (
             <StatefulMenu
               items={[...new Array(4)].map(() => ({
@@ -195,7 +195,7 @@ The provided id will be set as a value for the item container's `id` attribute t
               }}
             />
           );`}
-      </Code>
+      />
     </React.Fragment>
   )}
 />
diff --git a/package.json b/package.json
index 697d11e34e..e894a79a21 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.4",
+    "@stackblitz/sdk": "^1.9.0",
     "@types/mdx": "^2.0.10",
     "@types/node": "20.10.5",
     "@types/react": "^18.2.45",
@@ -86,7 +87,7 @@
     "just-omit": "^1.1.0",
     "just-pick": "^2.1.0",
     "lint-staged": "^15.1.0",
-    "next": "14.0.5-canary.18",
+    "next": "^14.1.0",
     "prettier": "^3.1.1",
     "prism-react-renderer": "^1.0.1",
     "raw-loader": "^4.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7a1aac698..17e336e45c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,6 +139,9 @@ devDependencies:
   '@next/mdx':
     specifier: ^14.0.4
     version: 14.0.4(@mdx-js/loader@3.0.0)(@mdx-js/react@3.0.0)
+  '@stackblitz/sdk':
+    specifier: ^1.9.0
+    version: 1.9.0
   '@types/mdx':
     specifier: ^2.0.10
     version: 2.0.10
@@ -179,8 +182,8 @@ devDependencies:
     specifier: ^15.1.0
     version: 15.2.0
   next:
-    specifier: 14.0.5-canary.18
-    version: 14.0.5-canary.18(@babel/core@7.23.6)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^14.1.0
+    version: 14.1.0(@babel/core@7.23.6)(react-dom@18.2.0)(react@18.2.0)
   prettier:
     specifier: ^3.1.1
     version: 3.1.1
@@ -2318,8 +2321,8 @@ packages:
       strict-event-emitter: 0.5.1
     dev: true
 
-  /@next/env@14.0.5-canary.18:
-    resolution: {integrity: sha512-v/Bisy0uZa8qvzedk5pkKg/nd2ZD1l20DLa42+aLRb7mFC8w0lCgvKnr+XmCRjUPFJDq3GNrT+R7CXRrzeJH6Q==}
+  /@next/env@14.1.0:
+    resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
     dev: true
 
   /@next/mdx@14.0.4(@mdx-js/loader@3.0.0)(@mdx-js/react@3.0.0):
@@ -2338,8 +2341,8 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /@next/swc-darwin-arm64@14.0.5-canary.18:
-    resolution: {integrity: sha512-qIycAgBQTwmnlMldUSkvaE9CPQLhCGl5R5ISWWwyFWBkMTt8CsCOzzgdo3EJvq7noTcumALLyGdkyuzQOJDnug==}
+  /@next/swc-darwin-arm64@14.1.0:
+    resolution: {integrity: sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -2347,8 +2350,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-darwin-x64@14.0.5-canary.18:
-    resolution: {integrity: sha512-AKAoaaLmWqhSNwgEmS0Y9kemJNGD5bTNvWIJvSaknJXEIhiZpkV8aEtIMXvqgdvvj83pW/6wwUmQdrO4RWJT5A==}
+  /@next/swc-darwin-x64@14.1.0:
+    resolution: {integrity: sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -2356,8 +2359,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-linux-arm64-gnu@14.0.5-canary.18:
-    resolution: {integrity: sha512-u0XT0Mu+0BFYIMeoAbO9cUNjaHvbxh14bEJcZROwUVmP+h0Qmth/rtYgj9LchWRcFa6b61Zb34RQEypFs95w2A==}
+  /@next/swc-linux-arm64-gnu@14.1.0:
+    resolution: {integrity: sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2365,8 +2368,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-linux-arm64-musl@14.0.5-canary.18:
-    resolution: {integrity: sha512-x1lDglRbx9nLEs9LxSSVmq1kO230KEtSPse6IrafdFnPUJeSR79yHyw8v6UIczSwqWUchMMW8dhjmWiTMxT6xQ==}
+  /@next/swc-linux-arm64-musl@14.1.0:
+    resolution: {integrity: sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2374,8 +2377,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-linux-x64-gnu@14.0.5-canary.18:
-    resolution: {integrity: sha512-3oQ/SLE0NKafPWiMqPq0810GOH2gFifHuEJ231Y4ITx5ELa/s6Hf2qDW5MK+lfNz4OQPCSLOXUxDZ4R7TZVwZg==}
+  /@next/swc-linux-x64-gnu@14.1.0:
+    resolution: {integrity: sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2383,8 +2386,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-linux-x64-musl@14.0.5-canary.18:
-    resolution: {integrity: sha512-e3KzvmFo9RNyiK90pRD63jpAEpDHZNPtNC3CEU7ejOgC8/9tEjFtkvLU5IXM/r4UYod0yHTnrNAwFWdY9it7EQ==}
+  /@next/swc-linux-x64-musl@14.1.0:
+    resolution: {integrity: sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2392,8 +2395,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-win32-arm64-msvc@14.0.5-canary.18:
-    resolution: {integrity: sha512-Uo55E5/b7Jwx8DbbWTMNt+LO9iiRdqmNiVn/gJtBikEn5JqSNXijadWhCCG8k7dAO4SgTm30Oub0yfWtgxUZrA==}
+  /@next/swc-win32-arm64-msvc@14.1.0:
+    resolution: {integrity: sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -2401,8 +2404,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-win32-ia32-msvc@14.0.5-canary.18:
-    resolution: {integrity: sha512-/onO0n///gTPAiPs2WRisQuxVEyCyno3E/lYhxlgueg/R1M/tzWkY9hUYRNBqDZdfw9GssauCGzyYo8Rb7gS0A==}
+  /@next/swc-win32-ia32-msvc@14.1.0:
+    resolution: {integrity: sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -2410,8 +2413,8 @@ packages:
     dev: true
     optional: true
 
-  /@next/swc-win32-x64-msvc@14.0.5-canary.18:
-    resolution: {integrity: sha512-5rpRmQqjsO1zr62G7NEEGkhmWO2sxB0oPYFMekSQWsoKNEJG6h96htpqBw0J+2wRiH2dBX7B9LZkcrCgiCzLyA==}
+  /@next/swc-win32-x64-msvc@14.1.0:
+    resolution: {integrity: sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -2573,6 +2576,10 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /@stackblitz/sdk@1.9.0:
+    resolution: {integrity: sha512-3m6C7f8pnR5KXys/Hqx2x6ylnpqOak6HtnZI6T5keEO0yT+E4Spkw37VEbdwuC+2oxmjdgq6YZEgiKX7hM1GmQ==}
+    dev: true
+
   /@swc/core-darwin-arm64@1.3.101:
     resolution: {integrity: sha512-mNFK+uHNPRXSnfTOG34zJOeMl2waM4hF4a2NY7dkMXrPqw9CoJn4MwTXJcyMiSz1/BnNjjTCHF3Yhj0jPxmkzQ==}
     engines: {node: '>=10'}
@@ -3425,6 +3432,10 @@ packages:
     resolution: {integrity: sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==}
     dev: true
 
+  /caniuse-lite@1.0.30001591:
+    resolution: {integrity: sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==}
+    dev: true
+
   /card-validator@6.2.0:
     resolution: {integrity: sha512-1vYv45JaE9NmixZr4dl6ykzbFKv7imI9L7MQDs235b/a7EGbG8rrEsipeHtVvscLSUbl3RX6UP5gyOe0Y2FlHA==}
     dependencies:
@@ -6827,8 +6838,8 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /next@14.0.5-canary.18(@babel/core@7.23.6)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-JaCgGzABOJSm9gyoIs5RtlDil0KfMoWMYCvHbeQBCNrGIYRvhsYrJ/PNYmcFxcemz/P5GFk2kO1HS96RgucGFA==}
+  /next@14.1.0(@babel/core@7.23.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -6842,26 +6853,25 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 14.0.5-canary.18
+      '@next/env': 14.1.0
       '@swc/helpers': 0.5.2
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001570
+      caniuse-lite: 1.0.30001591
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       styled-jsx: 5.1.1(@babel/core@7.23.6)(react@18.2.0)
-      watchpack: 2.4.0
     optionalDependencies:
-      '@next/swc-darwin-arm64': 14.0.5-canary.18
-      '@next/swc-darwin-x64': 14.0.5-canary.18
-      '@next/swc-linux-arm64-gnu': 14.0.5-canary.18
-      '@next/swc-linux-arm64-musl': 14.0.5-canary.18
-      '@next/swc-linux-x64-gnu': 14.0.5-canary.18
-      '@next/swc-linux-x64-musl': 14.0.5-canary.18
-      '@next/swc-win32-arm64-msvc': 14.0.5-canary.18
-      '@next/swc-win32-ia32-msvc': 14.0.5-canary.18
-      '@next/swc-win32-x64-msvc': 14.0.5-canary.18
+      '@next/swc-darwin-arm64': 14.1.0
+      '@next/swc-darwin-x64': 14.1.0
+      '@next/swc-linux-arm64-gnu': 14.1.0
+      '@next/swc-linux-arm64-musl': 14.1.0
+      '@next/swc-linux-x64-gnu': 14.1.0
+      '@next/swc-linux-x64-musl': 14.1.0
+      '@next/swc-win32-arm64-msvc': 14.1.0
+      '@next/swc-win32-ia32-msvc': 14.1.0
+      '@next/swc-win32-x64-msvc': 14.1.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros