release 2.1.0 (#451)

* feat: optimize fonts rendering on windows (#385)

* feat(styles): set Inter to highest font

* docs(fonts): add guide for fonts rendering on windows

* test: udpate snapshots

* chore: release v2.1.0-canary.0

* feat(table): add update row action to Table (#378)

* feat: add update to Table's actions. add test and doc

fix(table): fix comments

* feat(table): improve type for table actions

chore: update docs

chore: remove unused types

chore(table): improve docs

Co-authored-by: William Castandet <williamcastandet@williams-air.home>
Co-authored-by: unix <unix.bio@gmail.com>

* refactor(use-theme): move use-theme to the top directory (#397)

* refactor(use-theme): move use-theme to the top directory

* chore(jest): ignore use-theme of forwarding

* chore: release v2.1.0-canary.1

* feat(select): add clearable option to select multiple with test and english doc (#396)

* docs: add clearable option to select multiple with test and english doc

* fix: fix types for onClear

* fix: fix import path for use-theme

add more test for coverage

* docs(select): add chinese document

Co-authored-by: unix <unix.bio@gmail.com>

* chore: release v2.1.0-canary.2

* fix(tabs): scrollable (#404)

docs(tabs): scroll behavior

* feat(textarea): resize prop (#416)

* feat: add resize prop to textarea

* docs: add resize prop for textarea

* docs(textarea): improve docs and attributes for cn

* test(textarea): update snapshots

Co-authored-by: unix <unix.bio@gmail.com>

* fix(types): replace path aliases in type files (#432)

* fix(types): replace path aliases in type files

* chore(lint): upgrade eslint and optimize code style

* chore: fix type error for context handler

* test: update snapshots

* fix: use ttsc to identify aliases in type paths

* feat(hooks): add a tool hooks for react context (#439)

* feat(hooks): add a tool hooks for react context

* chore: move use-context-state to internal tools

style: fix lint warning

* chore: simplify the structure of the catalog

* refactor(themes): refactor theme module to keep multiple themes (#440)

* refactor(themes): refactor theme module to keep multiple themes

* chore: migrate APIs to be compatible with new theme system

* test: update snapshots

* chore: migrate the path of the theme module

* feat(themes): append static methods of themes

* chore: hide custom theme when no custom content in the context

* chore: manually add flush to preload styles in html

* docs(themes): update to fit the new theme system

* chore: release v2.1.0-canary.3 (#450)

* docs: add link to GH discussions

* chore: upgrade deps

* chore: update code style for prettier

* chore: release v2.1.0-canary.3

* chore(deps): upgrade babel

* chore: replace enzyme adapter with community repo to fit react.17

* test: updatee snapshots for auto typesetting

* test(config): ignore unexported parts of the tools

Co-authored-by: William <wcastand@gmail.com>
Co-authored-by: William Castandet <williamcastandet@williams-air.home>
Co-authored-by: Vaibhav Acharya <vaibhavacharya111@gmail.com>
Co-authored-by: Paul van Dyk <39598117+PaulPCIO@users.noreply.github.com>

.jest.config.js

@@ -18,9 +18,12 @@ module.exports = {
     'components/**/*.{ts,tsx}',
     '!components/**/styles.{ts,tsx}',
     '!components/**/*types.{ts,tsx}',
-    '!components/styles/*',
+    '!components/use-theme/*',
+    '!components/use-all-themes/*',
+    '!components/themes/*',
+    '!components/geist-provider/*',
     '!components/index.ts',
-    '!components/utils/*',
+    '!components/utils/**/*',
   ],
 
   moduleNameMapper: {

components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap

@@ -2,27 +2,27 @@
 
 exports[`AutoComplete Search should hide empty component 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "auto-complete",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "with-label",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "input-container ",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {
                   "class": "input-wrapper   ",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "autocomplete": "off",
                       "class": " ",
@@ -69,10 +69,10 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
           .with-label {
             display: inline-block;
@@ -187,10 +187,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
           .with-label {
             display: inline-block;
@@ -290,17 +290,17 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "input-container ",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "class": "input-wrapper   ",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "autocomplete": "off",
                         "class": " ",
@@ -365,10 +365,10 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
           .auto-complete {
             width: max-content;
@@ -405,10 +405,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
           .auto-complete {
             width: max-content;
@@ -430,22 +430,22 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "with-label",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "input-container ",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "class": "input-wrapper   ",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "autocomplete": "off",
                         "class": " ",
@@ -492,10 +492,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
           .with-label {
             display: inline-block;
@@ -610,10 +610,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
           .with-label {
             display: inline-block;
@@ -713,17 +713,17 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "input-container ",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "class": "input-wrapper   ",
                     },
                     "children": Array [
-                      Object {
+                      Node {
                         "attribs": Object {
                           "autocomplete": "off",
                           "class": " ",
@@ -807,22 +807,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -835,8 +830,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -844,27 +837,27 @@ initialize {
 
 exports[`AutoComplete Search should hide empty component 2`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "auto-complete",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "with-label",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "input-container ",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {
                   "class": "input-wrapper   ",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "autocomplete": "off",
                       "class": " ",
@@ -911,10 +904,10 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
           .with-label {
             display: inline-block;
@@ -1029,10 +1022,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
           .with-label {
             display: inline-block;
@@ -1132,17 +1125,17 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "input-container ",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "class": "input-wrapper   ",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "autocomplete": "off",
                         "class": " ",
@@ -1207,10 +1200,10 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
           .auto-complete {
             width: max-content;
@@ -1247,10 +1240,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
           .auto-complete {
             width: max-content;
@@ -1272,22 +1265,22 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "with-label",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "input-container ",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "class": "input-wrapper   ",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "autocomplete": "off",
                         "class": " ",
@@ -1334,10 +1327,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
           .with-label {
             display: inline-block;
@@ -1452,10 +1445,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
           .with-label {
             display: inline-block;
@@ -1555,17 +1548,17 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "input-container ",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "class": "input-wrapper   ",
                     },
                     "children": Array [
-                      Object {
+                      Node {
                         "attribs": Object {
                           "autocomplete": "off",
                           "class": " ",
@@ -1649,22 +1642,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -1677,8 +1665,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/auto-complete/__tests__/search.test.tsx

@@ -18,7 +18,9 @@ describe('AutoComplete Search', () => {
 
   it('should update value when dropdown clicked', () => {
     let value = ''
-    const wrapper = mount(<AutoComplete options={mockOptions} onChange={val => (value = val)} />)
+    const wrapper = mount(
+      <AutoComplete options={mockOptions} onChange={val => (value = val)} />,
+    )
     wrapper.find('input').at(0).simulate('focus')
     wrapper.find('.item').at(0).simulate('click', nativeEvent)
     expect(value).toEqual('london')

components/auto-complete/auto-complete-context.ts

@@ -3,9 +3,9 @@ import { NormalSizes } from '../utils/prop-types'
 
 export interface AutoCompleteConfig {
   value?: string
-  updateValue?: Function
+  updateValue?: (val: string) => unknown
   visible?: boolean
-  updateVisible?: Function
+  updateVisible?: (next: boolean) => unknown
   size: NormalSizes
   ref?: MutableRefObject<HTMLElement | null>
 }

components/auto-complete/auto-complete-dropdown.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import useTheme from '../styles/use-theme'
+import React, { CSSProperties } from 'react'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { useAutoCompleteContext } from './auto-complete-context'
 import Dropdown from '../shared/dropdown'
@@ -8,7 +8,7 @@ interface Props {
   visible: boolean
   className?: string
   disableMatchWidth?: boolean
-  dropdownStyle?: object
+  dropdownStyle?: CSSProperties
 }
 
 const defaultProps = {
@@ -19,13 +19,9 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type AutoCompleteDropdownProps = Props & typeof defaultProps & NativeAttrs
 
-const AutoCompleteDropdown: React.FC<React.PropsWithChildren<AutoCompleteDropdownProps>> = ({
-  children,
-  visible,
-  className,
-  dropdownStyle,
-  disableMatchWidth,
-}) => {
+const AutoCompleteDropdown: React.FC<
+  React.PropsWithChildren<AutoCompleteDropdownProps>
+> = ({ children, visible, className, dropdownStyle, disableMatchWidth }) => {
   const theme = useTheme()
   const { ref } = useAutoCompleteContext()
   const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {

components/auto-complete/auto-complete-empty.tsx

@@ -12,7 +12,9 @@ const defaultProps = {
   className: '',
 }
 
-export type AutoCompleteEmptyProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+export type AutoCompleteEmptyProps = Props &
+  typeof defaultProps &
+  React.HTMLAttributes<any>
 
 const AutoCompleteEmpty: React.FC<React.PropsWithChildren<AutoCompleteEmptyProps>> = ({
   children,

components/auto-complete/auto-complete-item.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { useAutoCompleteContext } from './auto-complete-context'
 import { NormalSizes } from '../utils/prop-types'
 import Ellipsis from '../shared/ellipsis'
@@ -12,7 +12,9 @@ interface Props {
 
 const defaultProps = {}
 
-export type AutoCompleteItemProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+export type AutoCompleteItemProps = Props &
+  typeof defaultProps &
+  React.HTMLAttributes<any>
 
 const getSizes = (size: NormalSizes) => {
   const fontSizes: { [key in NormalSizes]: string } = {

components/auto-complete/auto-complete-searching.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   className?: string
@@ -10,7 +10,9 @@ const defaultProps = {
   className: '',
 }
 
-export type AutoCompleteSearchProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+export type AutoCompleteSearchProps = Props &
+  typeof defaultProps &
+  React.HTMLAttributes<any>
 
 const AutoCompleteSearch: React.FC<React.PropsWithChildren<AutoCompleteSearchProps>> = ({
   children,

components/auto-complete/auto-complete.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
 import Input from '../input'
 import AutoCompleteItem from './auto-complete-item'
 import AutoCompleteDropdown from './auto-complete-dropdown'
@@ -30,7 +30,7 @@ interface Props {
   searching?: boolean | undefined
   clearable?: boolean
   dropdownClassName?: string
-  dropdownStyle?: object
+  dropdownStyle?: CSSProperties
   disableMatchWidth?: boolean
   disableFreeSolo?: boolean
   className?: string
@@ -110,11 +110,18 @@ const AutoComplete: React.FC<React.PropsWithChildren<AutoCompleteProps>> = ({
     }
     if (options.length === 0) {
       if (state === '') return null
-      return hasEmptyChild ? emptyChild : <AutoCompleteEmpty>No Options</AutoCompleteEmpty>
+      return hasEmptyChild ? (
+        emptyChild
+      ) : (
+        <AutoCompleteEmpty>No Options</AutoCompleteEmpty>
+      )
     }
     return childrenToOptionsNode(options as Array<AutoCompleteOption>)
   }, [searching, options])
-  const showClearIcon = useMemo(() => clearable && searching === undefined, [clearable, searching])
+  const showClearIcon = useMemo(() => clearable && searching === undefined, [
+    clearable,
+    searching,
+  ])
 
   const updateValue = (val: string) => {
     if (disabled) return

components/avatar/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,22 +2,22 @@
 
 exports[`Avatar should render component of a specified size 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "avatar ",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "avatar-text",
         },
         "children": Array [],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         .avatar {
           width: 20px;
@@ -79,10 +79,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         .avatar {
           width: 20px;
@@ -129,7 +129,7 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "avatar-text",
           },
@@ -155,22 +155,17 @@ initialize {
     "name": "span",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -183,8 +178,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -192,22 +185,22 @@ initialize {
 
 exports[`Avatar should render text element 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "avatar ",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "avatar-text",
         },
         "children": Array [],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         .avatar {
           width: 1.875rem;
@@ -269,10 +262,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         .avatar {
           width: 1.875rem;
@@ -319,7 +312,7 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "avatar-text",
           },
@@ -345,22 +338,17 @@ initialize {
     "name": "span",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -373,8 +361,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -382,17 +368,17 @@ initialize {
 
 exports[`Avatar should render text element 2`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "avatar ",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "avatar-text",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "text",
             "next": null,
             "parent": [Circular],
@@ -402,10 +388,10 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         .avatar {
           width: 1.875rem;
@@ -467,10 +453,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         .avatar {
           width: 1.875rem;
@@ -517,12 +503,12 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "avatar-text",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "text",
               "next": null,
               "parent": [Circular],
@@ -551,22 +537,17 @@ initialize {
     "name": "span",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -579,8 +560,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -588,27 +567,27 @@ initialize {
 
 exports[`Avatar should stacked when avatars are in a group 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "avatar-group ",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "avatar ",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "avatar-text",
             },
             "children": Array [],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .avatar {
           width: 1.875rem;
@@ -670,10 +649,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .avatar {
           width: 1.875rem;
@@ -720,7 +699,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "avatar-text",
               },
@@ -745,22 +724,22 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "avatar ",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "avatar-text",
               },
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .avatar {
           width: 1.875rem;
@@ -822,10 +801,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .avatar {
           width: 1.875rem;
@@ -872,7 +851,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "avatar-text",
                 },
@@ -897,10 +876,10 @@ initialize {
           ],
           "name": "span",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .avatar-group {
           display: flex;
@@ -956,22 +935,22 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "avatar ",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "avatar-text",
             },
             "children": Array [],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .avatar {
           width: 1.875rem;
@@ -1033,10 +1012,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .avatar {
           width: 1.875rem;
@@ -1083,7 +1062,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "avatar-text",
               },
@@ -1108,10 +1087,10 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         .avatar-group {
           display: flex;
@@ -1148,22 +1127,22 @@ initialize {
           "x-attribsPrefix": Object {},
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "avatar ",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "avatar-text",
               },
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .avatar {
           width: 1.875rem;
@@ -1225,10 +1204,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .avatar {
           width: 1.875rem;
@@ -1275,7 +1254,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "avatar-text",
                 },
@@ -1319,10 +1298,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         .avatar-group {
           display: flex;
@@ -1353,22 +1332,22 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "avatar ",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "avatar-text",
               },
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .avatar {
           width: 1.875rem;
@@ -1430,10 +1409,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .avatar {
           width: 1.875rem;
@@ -1480,7 +1459,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "avatar-text",
                 },
@@ -1507,22 +1486,22 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "class": "avatar ",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {
                   "class": "avatar-text",
                 },
                 "children": Array [],
                 "name": "span",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         .avatar {
           width: 1.875rem;
@@ -1584,10 +1563,10 @@ initialize {
                   "class": undefined,
                 },
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .avatar {
           width: 1.875rem;
@@ -1634,7 +1613,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "class": "avatar-text",
                   },
@@ -1686,22 +1665,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -1714,8 +1688,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/avatar/avatar-group.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {

components/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { NormalSizes } from '../utils/prop-types'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import AvatarGroup from './avatar-group'
 
 interface Props {

components/badge/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,20 +6,20 @@ exports[`Badge should re-render when size changed 2`] = `ReactWrapper {}`;
 
 exports[`Badge should render different types 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": " ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "badge",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -58,10 +58,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         span {
           display: inline-block;
@@ -91,7 +91,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "badge",
               "next": [Circular],
               "parent": [Circular],
@@ -105,17 +105,17 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -154,10 +154,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -187,7 +187,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -201,17 +201,17 @@ initialize {
           ],
           "name": "span",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {
               "class": " ",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "badge",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -250,10 +250,10 @@ initialize {
                 "prev": null,
                 "type": "text",
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -283,7 +283,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "data": "badge",
                   "next": [Circular],
                   "parent": [Circular],
@@ -297,17 +297,17 @@ initialize {
             ],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "class": " ",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "badge",
-                  "next": Object {
+                  "next": Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "
         span {
           display: inline-block;
@@ -346,10 +346,10 @@ initialize {
                   "prev": null,
                   "type": "text",
                 },
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -379,7 +379,7 @@ initialize {
                   "namespace": "http://www.w3.org/1999/xhtml",
                   "next": null,
                   "parent": [Circular],
-                  "prev": Object {
+                  "prev": Node {
                     "data": "badge",
                     "next": [Circular],
                     "parent": [Circular],
@@ -434,17 +434,17 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": " ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "badge",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -483,10 +483,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         span {
           display: inline-block;
@@ -516,7 +516,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "badge",
               "next": [Circular],
               "parent": [Circular],
@@ -530,17 +530,17 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -579,10 +579,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -612,7 +612,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -626,17 +626,17 @@ initialize {
           ],
           "name": "span",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {
               "class": " ",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "badge",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -675,10 +675,10 @@ initialize {
                 "prev": null,
                 "type": "text",
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -708,7 +708,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "data": "badge",
                   "next": [Circular],
                   "parent": [Circular],
@@ -744,17 +744,17 @@ initialize {
           },
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -793,10 +793,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -826,7 +826,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -859,17 +859,17 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": " ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "badge",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -908,10 +908,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         span {
           display: inline-block;
@@ -941,7 +941,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "badge",
               "next": [Circular],
               "parent": [Circular],
@@ -955,17 +955,17 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -1004,10 +1004,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -1037,7 +1037,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -1063,17 +1063,17 @@ initialize {
           },
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -1112,10 +1112,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -1145,7 +1145,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -1161,17 +1161,17 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "class": " ",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "badge",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -1210,10 +1210,10 @@ initialize {
                 "prev": null,
                 "type": "text",
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -1243,7 +1243,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "data": "badge",
                   "next": [Circular],
                   "parent": [Circular],
@@ -1284,17 +1284,17 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": " ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "badge",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -1333,10 +1333,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         span {
           display: inline-block;
@@ -1366,7 +1366,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "badge",
               "next": [Circular],
               "parent": [Circular],
@@ -1382,17 +1382,17 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": " ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "badge",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -1431,10 +1431,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         span {
           display: inline-block;
@@ -1464,7 +1464,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "badge",
                 "next": [Circular],
                 "parent": [Circular],
@@ -1480,17 +1480,17 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "class": " ",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "badge",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -1529,10 +1529,10 @@ initialize {
                 "prev": null,
                 "type": "text",
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         span {
           display: inline-block;
@@ -1562,7 +1562,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "data": "badge",
                   "next": [Circular],
                   "parent": [Circular],
@@ -1578,17 +1578,17 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": [Circular],
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": " ",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "badge",
-                  "next": Object {
+                  "next": Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "
         span {
           display: inline-block;
@@ -1627,10 +1627,10 @@ initialize {
                   "prev": null,
                   "type": "text",
                 },
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         span {
           display: inline-block;
@@ -1660,7 +1660,7 @@ initialize {
                   "namespace": "http://www.w3.org/1999/xhtml",
                   "next": null,
                   "parent": [Circular],
-                  "prev": Object {
+                  "prev": Node {
                     "data": "badge",
                     "next": [Circular],
                     "parent": [Circular],
@@ -1713,22 +1713,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -1737,8 +1732,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -1746,17 +1739,17 @@ initialize {
 
 exports[`Badge should supoort text 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": " ",
     },
     "children": Array [
-      Object {
+      Node {
         "data": "count",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         span {
           display: inline-block;
@@ -1795,10 +1788,10 @@ initialize {
         "prev": null,
         "type": "text",
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         span {
           display: inline-block;
@@ -1828,7 +1821,7 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "data": "count",
           "next": [Circular],
           "parent": [Circular],
@@ -1843,22 +1836,17 @@ initialize {
     "name": "span",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -1871,8 +1859,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/badge/badge-anchor.tsx

@@ -65,9 +65,10 @@ const BadgeAnchor: React.FC<React.PropsWithChildren<BadgeAnchorProps>> = ({
   placement,
 }) => {
   const [withoutBadgeChildren, badgeChldren] = pickChild(children, Badge)
-  const { top, bottom, left, right, value, origin } = useMemo(() => getTransform(placement), [
-    placement,
-  ])
+  const { top, bottom, left, right, value, origin } = useMemo(
+    () => getTransform(placement),
+    [placement],
+  )
 
   return (
     <div className="anchor">

components/badge/badge.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { NormalSizes, NormalTypes } from '../utils/prop-types'
-import { GeistUIThemesPalette } from 'components/styles/themes'
+import { GeistUIThemesPalette } from 'components/themes/presets'
 import BadgeAnchor from './badge-anchor'
 
 interface Props {

components/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import BreadcrumbsItem from './breadcrumbs-item'
 import BreadcrumbsSeparator from './breadcrumbs-separator'
 import { addColorAlpha } from '../utils/color'
@@ -46,7 +46,8 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<BreadcrumbsProps>> = ({
   const withSeparatorChildren = childrenArray.map((item, index) => {
     if (!React.isValidElement(item)) return item
     const last = childrenArray[index - 1]
-    const lastIsSeparator = React.isValidElement(last) && last.type === BreadcrumbsSeparator
+    const lastIsSeparator =
+      React.isValidElement(last) && last.type === BreadcrumbsSeparator
     const currentIsSeparator = item.type === BreadcrumbsSeparator
     if (!lastIsSeparator && !currentIsSeparator && index > 0) {
       return (

components/button-dropdown/button-dropdown-context.ts

@@ -17,7 +17,9 @@ const defaultContext = {
   loading: false,
 }
 
-export const ButtonDropdownContext = React.createContext<ButtonDropdownConfig>(defaultContext)
+export const ButtonDropdownContext = React.createContext<ButtonDropdownConfig>(
+  defaultContext,
+)
 
 export const useButtonDropdown = (): ButtonDropdownConfig =>
   React.useContext<ButtonDropdownConfig>(ButtonDropdownContext)

components/button-dropdown/button-dropdown-item.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { getColor } from './styles'
 import { useButtonDropdown } from './button-dropdown-context'

components/button-dropdown/button-dropdown.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useCallback, useMemo, useRef, useState } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import useClickAway from '../utils/use-click-away'
 import { getColor } from './styles'
 import ButtonDropdownIcon from './icon'
@@ -50,7 +50,11 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
   const colors = getColor(theme.palette, type)
   const sizes = getButtonSize(size, auto)
   const itemChildren = pickChild(children, ButtonDropdownItem)[1]
-  const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(itemChildren, 'main', true)
+  const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(
+    itemChildren,
+    'main',
+    true,
+  )
 
   const [visible, setVisible] = useState<boolean>(false)
   const clickHandler = useCallback(
@@ -82,7 +86,11 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
 
   return (
     <ButtonDropdownContext.Provider value={initialValue}>
-      <div ref={ref} className={`btn-dropdown ${className}`} onClick={stopPropagation} {...props}>
+      <div
+        ref={ref}
+        className={`btn-dropdown ${className}`}
+        onClick={stopPropagation}
+        {...props}>
         {mainItemChildren}
         <details open={visible}>
           <summary onClick={clickHandler}>

components/button-dropdown/styles.ts

@@ -1,4 +1,4 @@
-import { GeistUIThemesPalette } from '../styles/themes'
+import { GeistUIThemesPalette } from '../themes/presets'
 import { NormalTypes } from '../utils/prop-types'
 
 type ButtonDropdownColors = {

components/button-group/button-group.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
 import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'
-import { GeistUIThemesPalette } from 'components/styles/themes'
+import { GeistUIThemesPalette } from 'components/themes/presets'
 
 interface Props {
   disabled?: boolean
@@ -26,7 +26,10 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ButtonGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const getGroupBorderColors = (palette: GeistUIThemesPalette, props: ButtonGroupProps): string => {
+const getGroupBorderColors = (
+  palette: GeistUIThemesPalette,
+  props: ButtonGroupProps,
+): string => {
   const { ghost, type } = props
   if (!ghost && type !== 'default') return palette.background
   const colors: { [key in ButtonTypes]?: string } = {
@@ -42,7 +45,16 @@ const getGroupBorderColors = (palette: GeistUIThemesPalette, props: ButtonGroupP
 
 const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = groupProps => {
   const theme = useTheme()
-  const { disabled, size, type, ghost, vertical, children, className, ...props } = groupProps
+  const {
+    disabled,
+    size,
+    type,
+    ghost,
+    vertical,
+    children,
+    className,
+    ...props
+  } = groupProps
   const initialValue = useMemo<ButtonGroupConfig>(
     () => ({
       disabled,
@@ -60,7 +72,9 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = groupPr
 
   return (
     <ButtonGroupContext.Provider value={initialValue}>
-      <div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`} {...props}>
+      <div
+        className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`}
+        {...props}>
         {children}
         <style jsx>{`
           .btn-group {

components/button/button-icon.tsx

@@ -24,7 +24,9 @@ const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({
 }) => {
   return (
     <span
-      className={`icon ${isRight ? 'right' : ''} ${isSingle ? 'single' : ''} ${className}`}
+      className={`icon ${isRight ? 'right' : ''} ${
+        isSingle ? 'single' : ''
+      } ${className}`}
       {...props}>
       {children}
       <style jsx>{`

components/button/button.tsx

@@ -7,7 +7,7 @@ import React, {
   PropsWithoutRef,
   RefAttributes,
 } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import ButtonDrip from './button.drip'
 import ButtonLoading from './button-loading'
 import { ButtonTypes, NormalSizes } from '../utils/prop-types'
@@ -84,10 +84,10 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
     } = filteredProps
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
-    const { bg, border, color } = useMemo(() => getButtonColors(theme.palette, filteredProps), [
-      theme.palette,
-      filteredProps,
-    ])
+    const { bg, border, color } = useMemo(
+      () => getButtonColors(theme.palette, filteredProps),
+      [theme.palette, filteredProps],
+    )
     const hover = useMemo(() => getButtonHoverColors(theme.palette, filteredProps), [
       theme.palette,
       filteredProps,
@@ -146,7 +146,12 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
         {loading && <ButtonLoading color={color} />}
         {childrenWithIcon}
         {dripShow && (
-          <ButtonDrip x={dripX} y={dripY} color={dripColor} onCompleted={dripCompletedHandle} />
+          <ButtonDrip
+            x={dripX}
+            y={dripY}
+            color={dripColor}
+            onCompleted={dripCompletedHandle}
+          />
         )}
         <style jsx>{`
           .btn {

components/button/styles.ts

@@ -1,4 +1,4 @@
-import { GeistUIThemesPalette } from '../styles/themes'
+import { GeistUIThemesPalette } from '../themes/presets'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
 import { ButtonProps } from './button'
 import { addColorAlpha } from '../utils/color'
@@ -207,7 +207,10 @@ export interface ButtonCursorGroup {
   events: string
 }
 
-export const getButtonCursor = (disabled: boolean, loading: boolean): ButtonCursorGroup => {
+export const getButtonCursor = (
+  disabled: boolean,
+  loading: boolean,
+): ButtonCursorGroup => {
   if (disabled)
     return {
       cursor: 'not-allowed',
@@ -233,7 +236,10 @@ export type ButtonSizeGroup = {
   fontSize: string
 }
 
-export const getButtonSize = (size: NormalSizes = 'medium', auto: boolean): ButtonSizeGroup => {
+export const getButtonSize = (
+  size: NormalSizes = 'medium',
+  auto: boolean,
+): ButtonSizeGroup => {
   const defaultLayout: ButtonSizeGroup = {
     height: '2.5rem',
     width: 'auto',
@@ -287,5 +293,7 @@ export const getButtonDripColor = (palette: GeistUIThemesPalette, props: ButtonP
   const { type } = props
   const isLightHover = type.endsWith('light')
   const hoverColors = getButtonHoverColors(palette, props)
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65)
+  return isLightHover
+    ? addColorAlpha(hoverColors.bg, 0.65)
+    : addColorAlpha(palette.accents_2, 0.65)
 }

components/capacity/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,21 +2,21 @@
 
 exports[`Capacity should override background color 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "capacity ",
       "title": "50%",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         .capacity {
           width: 50px;
@@ -56,10 +56,10 @@ initialize {
         "x-attribsNamespace": Object {},
         "x-attribsPrefix": Object {},
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         .capacity {
           width: 50px;
@@ -88,7 +88,7 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {},
           "children": Array [],
           "name": "span",
@@ -108,22 +108,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -138,8 +133,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -147,24 +140,24 @@ initialize {
 
 exports[`Capacity should render different widths based on limit-value 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "capacity ",
           "title": "20%",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -204,10 +197,10 @@ initialize {
             "x-attribsNamespace": Object {},
             "x-attribsPrefix": Object {},
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .capacity {
           width: 50px;
@@ -236,7 +229,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
@@ -255,21 +248,21 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "capacity ",
             "title": "40%",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -309,10 +302,10 @@ initialize {
               "x-attribsNamespace": Object {},
               "x-attribsPrefix": Object {},
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -341,7 +334,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
@@ -360,21 +353,21 @@ initialize {
           ],
           "name": "div",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {
               "class": "capacity ",
               "title": "66.67%",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         .capacity {
           width: 50px;
@@ -414,10 +407,10 @@ initialize {
                 "x-attribsNamespace": Object {},
                 "x-attribsPrefix": Object {},
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -446,7 +439,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {},
                   "children": Array [],
                   "name": "span",
@@ -502,21 +495,21 @@ initialize {
           "title": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "capacity ",
           "title": "40%",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -556,10 +549,10 @@ initialize {
             "x-attribsNamespace": Object {},
             "x-attribsPrefix": Object {},
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .capacity {
           width: 50px;
@@ -588,7 +581,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
@@ -607,21 +600,21 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "capacity ",
             "title": "66.67%",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -661,10 +654,10 @@ initialize {
               "x-attribsNamespace": Object {},
               "x-attribsPrefix": Object {},
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -693,7 +686,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
@@ -726,21 +719,21 @@ initialize {
           },
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "capacity ",
             "title": "20%",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -780,10 +773,10 @@ initialize {
               "x-attribsNamespace": Object {},
               "x-attribsPrefix": Object {},
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -812,7 +805,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
@@ -854,21 +847,21 @@ initialize {
           "title": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "capacity ",
           "title": "66.67%",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -908,10 +901,10 @@ initialize {
             "x-attribsNamespace": Object {},
             "x-attribsPrefix": Object {},
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .capacity {
           width: 50px;
@@ -940,7 +933,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
@@ -961,21 +954,21 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "capacity ",
             "title": "40%",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -1015,10 +1008,10 @@ initialize {
               "x-attribsNamespace": Object {},
               "x-attribsPrefix": Object {},
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .capacity {
           width: 50px;
@@ -1047,7 +1040,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
@@ -1068,21 +1061,21 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "class": "capacity ",
               "title": "20%",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [],
                 "name": "span",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         .capacity {
           width: 50px;
@@ -1122,10 +1115,10 @@ initialize {
                 "x-attribsNamespace": Object {},
                 "x-attribsPrefix": Object {},
               },
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .capacity {
           width: 50px;
@@ -1154,7 +1147,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {},
                   "children": Array [],
                   "name": "span",
@@ -1210,22 +1203,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -1234,8 +1222,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/capacity/capacity.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { useProportions } from '../utils/calculations'
-import { GeistUIThemesPalette } from '../styles/themes'
+import { GeistUIThemesPalette } from '../themes/presets'
 
 interface Props {
   value?: number

components/card/card-content.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {

components/card/card-footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {
@@ -24,7 +24,9 @@ const CardFooter: React.FC<React.PropsWithChildren<CardFooterProps>> = ({
   const theme = useTheme()
 
   return (
-    <footer className={`${disableAutoMargin ? '' : 'auto-margin'} ${className}`} {...props}>
+    <footer
+      className={`${disableAutoMargin ? '' : 'auto-margin'} ${className}`}
+      {...props}>
       {children}
       <style jsx>{`
         footer {

components/card/card.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { CardTypes } from '../utils/prop-types'
 import { getStyles } from './styles'
 import CardFooter from './card-footer'
@@ -40,11 +40,10 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
     if (shadow) return theme.expressiveness.shadowMedium
     return hoverable ? theme.expressiveness.shadowSmall : 'none'
   }, [hoverable, shadow, theme.expressiveness])
-  const { color, bgColor, borderColor } = useMemo(() => getStyles(type, theme.palette, shadow), [
-    type,
-    theme.palette,
-    shadow,
-  ])
+  const { color, bgColor, borderColor } = useMemo(
+    () => getStyles(type, theme.palette, shadow),
+    [type, theme.palette, shadow],
+  )
 
   const [withoutFooterChildren, footerChildren] = pickChild(children, CardFooter)
   const [withoutImageChildren, imageChildren] = pickChild(withoutFooterChildren, Image)
@@ -53,7 +52,11 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   return (
     <div className={`card ${className}`} {...props}>
       {imageChildren}
-      {hasContent ? withoutImageChildren : <CardContent>{withoutImageChildren}</CardContent>}
+      {hasContent ? (
+        withoutImageChildren
+      ) : (
+        <CardContent>{withoutImageChildren}</CardContent>
+      )}
       {footerChildren}
       <style jsx>{`
         .card {

components/card/styles.ts

@@ -1,5 +1,5 @@
 import { CardTypes } from '../utils/prop-types'
-import { GeistUIThemesPalette } from '../styles/themes'
+import { GeistUIThemesPalette } from '../themes/presets'
 
 export type CardStyles = {
   color: string

components/checkbox/__tests__/__snapshots__/group.test.tsx.snap

@@ -2,24 +2,24 @@
 
 exports[`Checkbox Group should render correctly 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "group ",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "fill": "none",
               "viewBox": "0 0 12 12",
               "xmlns": "http://www.w3.org/2000/svg",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {
                   "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                   "stroke": "#666",
@@ -43,10 +43,10 @@ initialize {
             ],
             "name": "svg",
             "namespace": "http://www.w3.org/2000/svg",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         svg {
           display: inline-flex;
@@ -65,19 +65,19 @@ initialize {
               ],
               "name": "style",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "type": "checkbox",
                 },
                 "children": Array [],
                 "name": "input",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {
                     "class": "text",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "Sydney",
                       "next": null,
                       "parent": [Circular],
@@ -87,10 +87,10 @@ initialize {
                   ],
                   "name": "span",
                   "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Object {
+                  "next": Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "
         label {
           --checkbox-size: .875rem;
@@ -179,10 +179,10 @@ initialize {
               "xmlns": "",
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         svg {
           display: inline-flex;
@@ -201,19 +201,19 @@ initialize {
             ],
             "name": "style",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "type": "checkbox",
               },
               "children": Array [],
               "name": "input",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "class": "text",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "Sydney",
                     "next": null,
                     "parent": [Circular],
@@ -223,10 +223,10 @@ initialize {
                 ],
                 "name": "span",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         label {
           --checkbox-size: .875rem;
@@ -296,14 +296,14 @@ initialize {
               },
             },
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "fill": "none",
                 "viewBox": "0 0 12 12",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                     "stroke": "#666",
@@ -346,19 +346,19 @@ initialize {
             "x-attribsNamespace": Object {},
             "x-attribsPrefix": Object {},
           },
-          Object {
+          Node {
             "attribs": Object {
               "type": "checkbox",
             },
             "children": Array [],
             "name": "input",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "class": "text",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "Sydney",
                   "next": null,
                   "parent": [Circular],
@@ -368,10 +368,10 @@ initialize {
               ],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         label {
           --checkbox-size: .875rem;
@@ -431,10 +431,10 @@ initialize {
               },
             },
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         svg {
           display: inline-flex;
@@ -455,14 +455,14 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "fill": "none",
                   "viewBox": "0 0 12 12",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                       "stroke": "#666",
@@ -513,12 +513,12 @@ initialize {
               "type": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {
               "class": "text",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "Sydney",
                 "next": null,
                 "parent": [Circular],
@@ -528,10 +528,10 @@ initialize {
             ],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         label {
           --checkbox-size: .875rem;
@@ -581,7 +581,7 @@ initialize {
               "x-attribsPrefix": Object {},
             },
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "type": "checkbox",
               },
@@ -590,10 +590,10 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         svg {
           display: inline-flex;
@@ -614,14 +614,14 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "fill": "none",
                     "viewBox": "0 0 12 12",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                         "stroke": "#666",
@@ -680,10 +680,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         label {
           --checkbox-size: .875rem;
@@ -727,12 +727,12 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "text",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "Sydney",
                   "next": null,
                   "parent": [Circular],
@@ -744,7 +744,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "type": "checkbox",
                 },
@@ -753,10 +753,10 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         svg {
           display: inline-flex;
@@ -777,14 +777,14 @@ initialize {
                   "namespace": "http://www.w3.org/1999/xhtml",
                   "next": [Circular],
                   "parent": [Circular],
-                  "prev": Object {
+                  "prev": Node {
                     "attribs": Object {
                       "fill": "none",
                       "viewBox": "0 0 12 12",
                       "xmlns": "http://www.w3.org/2000/svg",
                     },
                     "children": Array [
-                      Object {
+                      Node {
                         "attribs": Object {
                           "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                           "stroke": "#666",
@@ -850,10 +850,10 @@ initialize {
         ],
         "name": "label",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
           .group :global(label) {
             margin-right: calc(.875rem * 2);
@@ -885,10 +885,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
           .group :global(label) {
             margin-right: calc(.875rem * 2);
@@ -905,19 +905,19 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "fill": "none",
                 "viewBox": "0 0 12 12",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                     "stroke": "#666",
@@ -941,10 +941,10 @@ initialize {
               ],
               "name": "svg",
               "namespace": "http://www.w3.org/2000/svg",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         svg {
           display: inline-flex;
@@ -963,19 +963,19 @@ initialize {
                 ],
                 "name": "style",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {
                     "type": "checkbox",
                   },
                   "children": Array [],
                   "name": "input",
                   "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Object {
+                  "next": Node {
                     "attribs": Object {
                       "class": "text",
                     },
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "Sydney",
                         "next": null,
                         "parent": [Circular],
@@ -985,10 +985,10 @@ initialize {
                     ],
                     "name": "span",
                     "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Object {
+                    "next": Node {
                       "attribs": Object {},
                       "children": Array [
-                        Object {
+                        Node {
                           "data": "
         label {
           --checkbox-size: .875rem;
@@ -1077,10 +1077,10 @@ initialize {
                 "xmlns": "",
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         svg {
           display: inline-flex;
@@ -1099,19 +1099,19 @@ initialize {
               ],
               "name": "style",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "type": "checkbox",
                 },
                 "children": Array [],
                 "name": "input",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {
                     "class": "text",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "Sydney",
                       "next": null,
                       "parent": [Circular],
@@ -1121,10 +1121,10 @@ initialize {
                   ],
                   "name": "span",
                   "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Object {
+                  "next": Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "
         label {
           --checkbox-size: .875rem;
@@ -1194,14 +1194,14 @@ initialize {
                 },
               },
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "fill": "none",
                   "viewBox": "0 0 12 12",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                       "stroke": "#666",
@@ -1244,19 +1244,19 @@ initialize {
               "x-attribsNamespace": Object {},
               "x-attribsPrefix": Object {},
             },
-            Object {
+            Node {
               "attribs": Object {
                 "type": "checkbox",
               },
               "children": Array [],
               "name": "input",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "class": "text",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "Sydney",
                     "next": null,
                     "parent": [Circular],
@@ -1266,10 +1266,10 @@ initialize {
                 ],
                 "name": "span",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         label {
           --checkbox-size: .875rem;
@@ -1329,10 +1329,10 @@ initialize {
                 },
               },
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         svg {
           display: inline-flex;
@@ -1353,14 +1353,14 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "fill": "none",
                     "viewBox": "0 0 12 12",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "attribs": Object {
                         "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                         "stroke": "#666",
@@ -1411,12 +1411,12 @@ initialize {
                 "type": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {
                 "class": "text",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "Sydney",
                   "next": null,
                   "parent": [Circular],
@@ -1426,10 +1426,10 @@ initialize {
               ],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         label {
           --checkbox-size: .875rem;
@@ -1479,7 +1479,7 @@ initialize {
                 "x-attribsPrefix": Object {},
               },
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "type": "checkbox",
                 },
@@ -1488,10 +1488,10 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         svg {
           display: inline-flex;
@@ -1512,14 +1512,14 @@ initialize {
                   "namespace": "http://www.w3.org/1999/xhtml",
                   "next": [Circular],
                   "parent": [Circular],
-                  "prev": Object {
+                  "prev": Node {
                     "attribs": Object {
                       "fill": "none",
                       "viewBox": "0 0 12 12",
                       "xmlns": "http://www.w3.org/2000/svg",
                     },
                     "children": Array [
-                      Object {
+                      Node {
                         "attribs": Object {
                           "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                           "stroke": "#666",
@@ -1578,10 +1578,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         label {
           --checkbox-size: .875rem;
@@ -1625,12 +1625,12 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "text",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "Sydney",
                     "next": null,
                     "parent": [Circular],
@@ -1642,7 +1642,7 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "type": "checkbox",
                   },
@@ -1651,10 +1651,10 @@ initialize {
                   "namespace": "http://www.w3.org/1999/xhtml",
                   "next": [Circular],
                   "parent": [Circular],
-                  "prev": Object {
+                  "prev": Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "
         svg {
           display: inline-flex;
@@ -1675,14 +1675,14 @@ initialize {
                     "namespace": "http://www.w3.org/1999/xhtml",
                     "next": [Circular],
                     "parent": [Circular],
-                    "prev": Object {
+                    "prev": Node {
                       "attribs": Object {
                         "fill": "none",
                         "viewBox": "0 0 12 12",
                         "xmlns": "http://www.w3.org/2000/svg",
                       },
                       "children": Array [
-                        Object {
+                        Node {
                           "attribs": Object {
                             "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                             "stroke": "#666",
@@ -1767,22 +1767,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -1795,8 +1790,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/checkbox/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,19 +2,19 @@
 
 exports[`Checkbox should render correctly 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "fill": "none",
           "viewBox": "0 0 12 12",
           "xmlns": "http://www.w3.org/2000/svg",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
               "stroke": "#666",
@@ -38,10 +38,10 @@ initialize {
         ],
         "name": "svg",
         "namespace": "http://www.w3.org/2000/svg",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         svg {
           display: inline-flex;
@@ -60,19 +60,19 @@ initialize {
           ],
           "name": "style",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {
               "type": "checkbox",
             },
             "children": Array [],
             "name": "input",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "class": "text",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "Sydney",
                   "next": null,
                   "parent": [Circular],
@@ -82,10 +82,10 @@ initialize {
               ],
               "name": "span",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         label {
           --checkbox-size: .875rem;
@@ -174,10 +174,10 @@ initialize {
           "xmlns": "",
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         svg {
           display: inline-flex;
@@ -196,19 +196,19 @@ initialize {
         ],
         "name": "style",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "type": "checkbox",
           },
           "children": Array [],
           "name": "input",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {
               "class": "text",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "Sydney",
                 "next": null,
                 "parent": [Circular],
@@ -218,10 +218,10 @@ initialize {
             ],
             "name": "span",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         label {
           --checkbox-size: .875rem;
@@ -291,14 +291,14 @@ initialize {
           },
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "fill": "none",
             "viewBox": "0 0 12 12",
             "xmlns": "http://www.w3.org/2000/svg",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                 "stroke": "#666",
@@ -341,19 +341,19 @@ initialize {
         "x-attribsNamespace": Object {},
         "x-attribsPrefix": Object {},
       },
-      Object {
+      Node {
         "attribs": Object {
           "type": "checkbox",
         },
         "children": Array [],
         "name": "input",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "text",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "Sydney",
               "next": null,
               "parent": [Circular],
@@ -363,10 +363,10 @@ initialize {
           ],
           "name": "span",
           "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Object {
+          "next": Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         label {
           --checkbox-size: .875rem;
@@ -426,10 +426,10 @@ initialize {
           },
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         svg {
           display: inline-flex;
@@ -450,14 +450,14 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "fill": "none",
               "viewBox": "0 0 12 12",
               "xmlns": "http://www.w3.org/2000/svg",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {
                   "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                   "stroke": "#666",
@@ -508,12 +508,12 @@ initialize {
           "type": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "text",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "Sydney",
             "next": null,
             "parent": [Circular],
@@ -523,10 +523,10 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         label {
           --checkbox-size: .875rem;
@@ -576,7 +576,7 @@ initialize {
           "x-attribsPrefix": Object {},
         },
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "type": "checkbox",
           },
@@ -585,10 +585,10 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         svg {
           display: inline-flex;
@@ -609,14 +609,14 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": [Circular],
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "fill": "none",
                 "viewBox": "0 0 12 12",
                 "xmlns": "http://www.w3.org/2000/svg",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {
                     "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                     "stroke": "#666",
@@ -675,10 +675,10 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         label {
           --checkbox-size: .875rem;
@@ -722,12 +722,12 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "text",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "Sydney",
               "next": null,
               "parent": [Circular],
@@ -739,7 +739,7 @@ initialize {
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
           "parent": [Circular],
-          "prev": Object {
+          "prev": Node {
             "attribs": Object {
               "type": "checkbox",
             },
@@ -748,10 +748,10 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": [Circular],
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         svg {
           display: inline-flex;
@@ -772,14 +772,14 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "fill": "none",
                   "viewBox": "0 0 12 12",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {
                       "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
                       "stroke": "#666",
@@ -846,22 +846,17 @@ initialize {
     "name": "label",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -874,8 +869,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/checkbox/__tests__/group.test.tsx

@@ -89,7 +89,9 @@ describe('Checkbox Group', () => {
   it('should throw error when value missing', () => {
     let errorMessage = ''
     const Group = Checkbox.Group as any
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(msg => (errorMessage = msg))
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(msg => (errorMessage = msg))
     mount(
       <Group>
         <Checkbox value="sydney">Sydney</Checkbox>
@@ -103,7 +105,9 @@ describe('Checkbox Group', () => {
 
   it('should throw error when set check prop in group', () => {
     let errorMessage = ''
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(msg => (errorMessage = msg))
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(msg => (errorMessage = msg))
     mount(
       <Checkbox.Group value={[]}>
         <Checkbox value="sydney" checked>

components/checkbox/checkbox-context.ts

@@ -15,4 +15,5 @@ const defaultContext = {
 
 export const CheckboxContext = React.createContext<CheckboxConfig>(defaultContext)
 
-export const useCheckbox = (): CheckboxConfig => React.useContext<CheckboxConfig>(CheckboxContext)
+export const useCheckbox = (): CheckboxConfig =>
+  React.useContext<CheckboxConfig>(CheckboxContext)

components/checkbox/checkbox.icon.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   disabled?: boolean

components/checkbox/checkbox.tsx

@@ -53,7 +53,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
   const isDisabled = inGroup ? disabledAll || disabled : disabled
 
   if (inGroup && checked) {
-    useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox')
+    useWarning(
+      'Remove props "checked" when [Checkbox] component is in the group.',
+      'Checkbox',
+    )
   }
   if (inGroup) {
     useEffect(() => {

components/code/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,15 +2,15 @@
 
 exports[`Code should repspond to changed by width 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "code",
             "next": null,
             "parent": [Circular],
@@ -30,10 +30,10 @@ initialize {
     ],
     "name": "pre",
     "namespace": "http://www.w3.org/1999/xhtml",
-    "next": Object {
+    "next": Node {
       "attribs": Object {},
       "children": Array [
-        Object {
+        Node {
           "data": "
         pre {
           width: 50%;
@@ -58,37 +58,29 @@ initialize {
       "name": "style",
       "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
-      "parent": null,
-      "prev": [Circular],
-      "root": Object {
-        "attribs": Object {},
+      "parent": Node {
         "children": Array [
           [Circular],
           [Circular],
         ],
         "name": "root",
-        "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": null,
         "prev": null,
         "type": "root",
-        "x-attribsNamespace": Object {},
-        "x-attribsPrefix": Object {},
       },
+      "prev": [Circular],
       "type": "style",
       "x-attribsNamespace": Object {},
       "x-attribsPrefix": Object {},
     },
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
-        Object {
+        Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         pre {
           width: 50%;
@@ -113,23 +105,20 @@ initialize {
           "name": "style",
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": null,
-          "parent": null,
+          "parent": [Circular],
           "prev": [Circular],
-          "root": [Circular],
           "type": "style",
           "x-attribsNamespace": Object {},
           "x-attribsPrefix": Object {},
         },
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -138,10 +127,10 @@ initialize {
       "class": undefined,
     },
   },
-  "1": Object {
+  "1": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "data": "
         pre {
           width: 50%;
@@ -166,73 +155,17 @@ initialize {
     "name": "style",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": Object {
-      "attribs": Object {
-        "class": "",
-      },
+    "parent": Node {
       "children": Array [
-        Object {
-          "attribs": Object {},
-          "children": Array [
-            Object {
-              "data": "code",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "text",
-            },
-          ],
-          "name": "code",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
-      ],
-      "name": "pre",
-      "namespace": "http://www.w3.org/1999/xhtml",
-      "next": [Circular],
-      "parent": null,
-      "prev": null,
-      "root": Object {
-        "attribs": Object {},
-        "children": Array [
-          [Circular],
-          [Circular],
-        ],
-        "name": "root",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": null,
-        "prev": null,
-        "type": "root",
-        "x-attribsNamespace": Object {},
-        "x-attribsPrefix": Object {},
-      },
-      "type": "tag",
-      "x-attribsNamespace": Object {
-        "class": undefined,
-      },
-      "x-attribsPrefix": Object {
-        "class": undefined,
-      },
-    },
-    "root": Object {
-      "attribs": Object {},
-      "children": Array [
-        Object {
+        Node {
           "attribs": Object {
             "class": "",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "code",
                   "next": null,
                   "parent": [Circular],
@@ -253,9 +186,8 @@ initialize {
           "name": "pre",
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
-          "parent": null,
+          "parent": [Circular],
           "prev": null,
-          "root": [Circular],
           "type": "tag",
           "x-attribsNamespace": Object {
             "class": undefined,
@@ -267,13 +199,59 @@ initialize {
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
+    },
+    "prev": Node {
+      "attribs": Object {
+        "class": "",
+      },
+      "children": Array [
+        Node {
+          "attribs": Object {},
+          "children": Array [
+            Node {
+              "data": "code",
+              "next": null,
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+          ],
+          "name": "code",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": null,
+          "parent": [Circular],
+          "prev": null,
+          "type": "tag",
+          "x-attribsNamespace": Object {},
+          "x-attribsPrefix": Object {},
+        },
+      ],
+      "name": "pre",
+      "namespace": "http://www.w3.org/1999/xhtml",
+      "next": [Circular],
+      "parent": Node {
+        "children": Array [
+          [Circular],
+          [Circular],
+        ],
+        "name": "root",
+        "next": null,
+        "parent": null,
+        "prev": null,
+        "type": "root",
+      },
+      "prev": null,
+      "type": "tag",
+      "x-attribsNamespace": Object {
+        "class": undefined,
+      },
+      "x-attribsPrefix": Object {
+        "class": undefined,
+      },
     },
     "type": "style",
     "x-attribsNamespace": Object {},
@@ -283,8 +261,6 @@ initialize {
   "length": 2,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -292,15 +268,15 @@ initialize {
 
 exports[`Code should support block mode 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "code",
             "next": null,
             "parent": [Circular],
@@ -320,10 +296,10 @@ initialize {
     ],
     "name": "pre",
     "namespace": "http://www.w3.org/1999/xhtml",
-    "next": Object {
+    "next": Node {
       "attribs": Object {},
       "children": Array [
-        Object {
+        Node {
           "data": "
         pre {
           width: initial;
@@ -348,37 +324,29 @@ initialize {
       "name": "style",
       "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
-      "parent": null,
-      "prev": [Circular],
-      "root": Object {
-        "attribs": Object {},
+      "parent": Node {
         "children": Array [
           [Circular],
           [Circular],
         ],
         "name": "root",
-        "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": null,
         "prev": null,
         "type": "root",
-        "x-attribsNamespace": Object {},
-        "x-attribsPrefix": Object {},
       },
+      "prev": [Circular],
       "type": "style",
       "x-attribsNamespace": Object {},
       "x-attribsPrefix": Object {},
     },
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
-        Object {
+        Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         pre {
           width: initial;
@@ -403,23 +371,20 @@ initialize {
           "name": "style",
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": null,
-          "parent": null,
+          "parent": [Circular],
           "prev": [Circular],
-          "root": [Circular],
           "type": "style",
           "x-attribsNamespace": Object {},
           "x-attribsPrefix": Object {},
         },
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -428,10 +393,10 @@ initialize {
       "class": undefined,
     },
   },
-  "1": Object {
+  "1": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "data": "
         pre {
           width: initial;
@@ -456,73 +421,17 @@ initialize {
     "name": "style",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": Object {
-      "attribs": Object {
-        "class": "",
-      },
+    "parent": Node {
       "children": Array [
-        Object {
-          "attribs": Object {},
-          "children": Array [
-            Object {
-              "data": "code",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "text",
-            },
-          ],
-          "name": "code",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
-      ],
-      "name": "pre",
-      "namespace": "http://www.w3.org/1999/xhtml",
-      "next": [Circular],
-      "parent": null,
-      "prev": null,
-      "root": Object {
-        "attribs": Object {},
-        "children": Array [
-          [Circular],
-          [Circular],
-        ],
-        "name": "root",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": null,
-        "prev": null,
-        "type": "root",
-        "x-attribsNamespace": Object {},
-        "x-attribsPrefix": Object {},
-      },
-      "type": "tag",
-      "x-attribsNamespace": Object {
-        "class": undefined,
-      },
-      "x-attribsPrefix": Object {
-        "class": undefined,
-      },
-    },
-    "root": Object {
-      "attribs": Object {},
-      "children": Array [
-        Object {
+        Node {
           "attribs": Object {
             "class": "",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "code",
                   "next": null,
                   "parent": [Circular],
@@ -543,9 +452,8 @@ initialize {
           "name": "pre",
           "namespace": "http://www.w3.org/1999/xhtml",
           "next": [Circular],
-          "parent": null,
+          "parent": [Circular],
           "prev": null,
-          "root": [Circular],
           "type": "tag",
           "x-attribsNamespace": Object {
             "class": undefined,
@@ -557,13 +465,59 @@ initialize {
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
+    },
+    "prev": Node {
+      "attribs": Object {
+        "class": "",
+      },
+      "children": Array [
+        Node {
+          "attribs": Object {},
+          "children": Array [
+            Node {
+              "data": "code",
+              "next": null,
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+          ],
+          "name": "code",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": null,
+          "parent": [Circular],
+          "prev": null,
+          "type": "tag",
+          "x-attribsNamespace": Object {},
+          "x-attribsPrefix": Object {},
+        },
+      ],
+      "name": "pre",
+      "namespace": "http://www.w3.org/1999/xhtml",
+      "next": [Circular],
+      "parent": Node {
+        "children": Array [
+          [Circular],
+          [Circular],
+        ],
+        "name": "root",
+        "next": null,
+        "parent": null,
+        "prev": null,
+        "type": "root",
+      },
+      "prev": null,
+      "type": "tag",
+      "x-attribsNamespace": Object {
+        "class": undefined,
+      },
+      "x-attribsPrefix": Object {
+        "class": undefined,
+      },
     },
     "type": "style",
     "x-attribsNamespace": Object {},
@@ -573,8 +527,6 @@ initialize {
   "length": 2,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/col/__tests__/__snapshots__/index.test.tsx.snap

@@ -4,20 +4,20 @@ exports[`Col should render correctly 1`] = `ReactWrapper {}`;
 
 exports[`Col should work with span and offset 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "col ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "col",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .col {
           float: left;
@@ -47,10 +47,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .col {
           float: left;
@@ -71,7 +71,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "col",
               "next": [Circular],
               "parent": [Circular],
@@ -85,17 +85,17 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "col ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "col",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .col {
           float: left;
@@ -125,10 +125,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .col {
           float: left;
@@ -149,7 +149,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "col",
                 "next": [Circular],
                 "parent": [Circular],
@@ -184,17 +184,17 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "col ",
         },
         "children": Array [
-          Object {
+          Node {
             "data": "col",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .col {
           float: left;
@@ -224,10 +224,10 @@ initialize {
             "prev": null,
             "type": "text",
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .col {
           float: left;
@@ -248,7 +248,7 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "data": "col",
               "next": [Circular],
               "parent": [Circular],
@@ -264,17 +264,17 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "col ",
           },
           "children": Array [
-            Object {
+            Node {
               "data": "col",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .col {
           float: left;
@@ -304,10 +304,10 @@ initialize {
               "prev": null,
               "type": "text",
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .col {
           float: left;
@@ -328,7 +328,7 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "data": "col",
                 "next": [Circular],
                 "parent": [Circular],
@@ -365,22 +365,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -389,8 +384,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/collapse/__tests__/index.test.tsx

@@ -41,7 +41,9 @@ describe('Collapse', () => {
   it('should throw error when title missing', () => {
     const Component = Collapse as any
     let errorMessage = ''
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(msg => (errorMessage = msg))
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(msg => (errorMessage = msg))
 
     mount(<Component subtitle="subtitle">content</Component>)
     expect(errorMessage.toLowerCase()).not.toEqual('')

components/collapse/collapse-context.ts

@@ -2,7 +2,7 @@ import React from 'react'
 
 export interface CollapseConfig {
   values: Array<number>
-  updateValues?: Function
+  updateValues?: (currentIndex: number | undefined, nextState: boolean) => unknown
 }
 
 const defaultContext = {

components/collapse/collapse-group.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { CollapseContext, CollapseConfig } from './collapse-context'
 import useCurrentState from '../utils/use-current-state'
 import { setChildrenIndex } from '../utils/collections'
@@ -52,7 +52,9 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
     [state.join(',')],
   )
 
-  const hasIndexChildren = useMemo(() => setChildrenIndex(children, [Collapse]), [children])
+  const hasIndexChildren = useMemo(() => setChildrenIndex(children, [Collapse]), [
+    children,
+  ])
 
   return (
     <CollapseContext.Provider value={initialValue}>

components/collapse/collapse.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import CollapseIcon from './collapse-icon'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import Expand from '../shared/expand'
 import { useCollapseContext } from './collapse-context'
 import useCurrentState from '../utils/use-current-state'

components/css-baseline/__tests__/__snapshots__/baseline.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`CSSBaseline should render correctly 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "data": "
         html,
         body {
@@ -29,7 +29,7 @@ initialize {
           min-height: 100%;
           position: relative;
           overflow-x: hidden;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
 
         #__next {
@@ -49,7 +49,7 @@ initialize {
           font-weight: 400;
           color: inherit;
           letter-spacing: -0.005625rem;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
 
         p {
@@ -303,22 +303,17 @@ initialize {
     "name": "style",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "style",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -327,8 +322,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }
@@ -336,10 +329,10 @@ initialize {
 
 exports[`CSSBaseline should render dark mode correctly 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "data": "
         html,
         body {
@@ -363,7 +356,7 @@ initialize {
           min-height: 100%;
           position: relative;
           overflow-x: hidden;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
 
         #__next {
@@ -383,7 +376,7 @@ initialize {
           font-weight: 400;
           color: inherit;
           letter-spacing: -0.005625rem;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
 
         p {
@@ -637,22 +630,17 @@ initialize {
     "name": "style",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "style",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -661,8 +649,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/css-baseline/__tests__/baseline.test.tsx

@@ -14,7 +14,7 @@ describe('CSSBaseline', () => {
 
   it('should render dark mode correctly', () => {
     const wrapper = render(
-      <GeistProvider theme={{ type: 'dark' }}>
+      <GeistProvider themeType="dark">
         <CssBaseline />
       </GeistProvider>,
     )

components/css-baseline/css-baseline.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import flush from 'styled-jsx/server'
 import flushToReact from 'styled-jsx/server'
 
-const CssBaseline: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+const CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme = useTheme()
 
   return (
@@ -306,7 +306,7 @@ type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
 }
 
 const MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent<
-  React.PropsWithChildren<{}>
+  React.PropsWithChildren<unknown>
 >
 MemoCssBaseline.flush = flush
 

components/description/description.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   title?: ReactNode | string
@@ -17,7 +17,12 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type DescriptionProps = Props & typeof defaultProps & NativeAttrs
 
-const Description: React.FC<DescriptionProps> = ({ title, content, className, ...props }) => {
+const Description: React.FC<DescriptionProps> = ({
+  title,
+  content,
+  className,
+  ...props
+}) => {
   const theme = useTheme()
   return (
     <dl className={className} {...props}>

components/display/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,20 +6,20 @@ exports[`Display should support react-node 1`] = `ReactWrapper {}`;
 
 exports[`Display should work with shadow and width 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {},
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {
           "class": "display ",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "content",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "display",
                 "next": null,
                 "parent": [Circular],
@@ -29,15 +29,15 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -57,10 +57,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .display {
           display: block;
@@ -131,15 +131,15 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {
               "class": "caption",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "h1",
                     "next": null,
                     "parent": [Circular],
@@ -159,10 +159,10 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .display {
           display: block;
@@ -214,12 +214,12 @@ initialize {
               "x-attribsPrefix": Object {},
             },
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "content",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "display",
                   "next": null,
                   "parent": [Circular],
@@ -248,10 +248,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .display {
           display: block;
@@ -297,15 +297,15 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -327,12 +327,12 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "content",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "display",
                     "next": null,
                     "parent": [Circular],
@@ -368,17 +368,17 @@ initialize {
         ],
         "name": "div",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {
             "class": "display ",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "content",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "display",
                   "next": null,
                   "parent": [Circular],
@@ -388,15 +388,15 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "class": "caption",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "h1",
                         "next": null,
                         "parent": [Circular],
@@ -416,10 +416,10 @@ initialize {
                 ],
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         .display {
           display: block;
@@ -490,15 +490,15 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -518,10 +518,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .display {
           display: block;
@@ -573,12 +573,12 @@ initialize {
                 "x-attribsPrefix": Object {},
               },
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "content",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "display",
                     "next": null,
                     "parent": [Circular],
@@ -607,10 +607,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .display {
           display: block;
@@ -656,15 +656,15 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "caption",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "h1",
                         "next": null,
                         "parent": [Circular],
@@ -686,12 +686,12 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "class": "content",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "display",
                       "next": null,
                       "parent": [Circular],
@@ -748,17 +748,17 @@ initialize {
           "class": undefined,
         },
       },
-      Object {
+      Node {
         "attribs": Object {
           "class": "display ",
         },
         "children": Array [
-          Object {
+          Node {
             "attribs": Object {
               "class": "content",
             },
             "children": Array [
-              Object {
+              Node {
                 "data": "display",
                 "next": null,
                 "parent": [Circular],
@@ -768,15 +768,15 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -796,10 +796,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .display {
           display: block;
@@ -870,15 +870,15 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {
               "class": "caption",
             },
             "children": Array [
-              Object {
+              Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "h1",
                     "next": null,
                     "parent": [Circular],
@@ -898,10 +898,10 @@ initialize {
             ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Object {
+            "next": Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .display {
           display: block;
@@ -953,12 +953,12 @@ initialize {
               "x-attribsPrefix": Object {},
             },
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "content",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "display",
                   "next": null,
                   "parent": [Circular],
@@ -987,10 +987,10 @@ initialize {
               "class": undefined,
             },
           },
-          Object {
+          Node {
             "attribs": Object {},
             "children": Array [
-              Object {
+              Node {
                 "data": "
         .display {
           display: block;
@@ -1036,15 +1036,15 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
             "parent": [Circular],
-            "prev": Object {
+            "prev": Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -1066,12 +1066,12 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": [Circular],
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "content",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "display",
                     "next": null,
                     "parent": [Circular],
@@ -1109,17 +1109,17 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {
             "class": "display ",
           },
           "children": Array [
-            Object {
+            Node {
               "attribs": Object {
                 "class": "content",
               },
               "children": Array [
-                Object {
+                Node {
                   "data": "display",
                   "next": null,
                   "parent": [Circular],
@@ -1129,15 +1129,15 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {
                   "class": "caption",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "h1",
                         "next": null,
                         "parent": [Circular],
@@ -1157,10 +1157,10 @@ initialize {
                 ],
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Object {
+                "next": Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "
         .display {
           display: block;
@@ -1231,15 +1231,15 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {
                 "class": "caption",
               },
               "children": Array [
-                Object {
+                Node {
                   "attribs": Object {},
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "h1",
                       "next": null,
                       "parent": [Circular],
@@ -1259,10 +1259,10 @@ initialize {
               ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Object {
+              "next": Node {
                 "attribs": Object {},
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "
         .display {
           display: block;
@@ -1314,12 +1314,12 @@ initialize {
                 "x-attribsPrefix": Object {},
               },
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "content",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "data": "display",
                     "next": null,
                     "parent": [Circular],
@@ -1348,10 +1348,10 @@ initialize {
                 "class": undefined,
               },
             },
-            Object {
+            Node {
               "attribs": Object {},
               "children": Array [
-                Object {
+                Node {
                   "data": "
         .display {
           display: block;
@@ -1397,15 +1397,15 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
               "parent": [Circular],
-              "prev": Object {
+              "prev": Node {
                 "attribs": Object {
                   "class": "caption",
                 },
                 "children": Array [
-                  Object {
+                  Node {
                     "attribs": Object {},
                     "children": Array [
-                      Object {
+                      Node {
                         "data": "h1",
                         "next": null,
                         "parent": [Circular],
@@ -1427,12 +1427,12 @@ initialize {
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": [Circular],
                 "parent": [Circular],
-                "prev": Object {
+                "prev": Node {
                   "attribs": Object {
                     "class": "content",
                   },
                   "children": Array [
-                    Object {
+                    Node {
                       "data": "display",
                       "next": null,
                       "parent": [Circular],
@@ -1491,22 +1491,17 @@ initialize {
     "name": "div",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {},
     "x-attribsPrefix": Object {},
@@ -1515,8 +1510,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/display/display.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   caption?: ReactNode | string

components/divider/divider.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { DividerAlign, SnippetTypes } from '../utils/prop-types'
 import { getMargin } from '../spacer/spacer'
-import { GeistUIThemesPalette } from 'components/styles/themes'
+import { GeistUIThemesPalette } from 'components/themes/presets'
 
 export type DividerTypes = SnippetTypes
 

components/dot/dot.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { NormalTypes } from '../utils/prop-types'
-import { GeistUIThemes } from '../styles/themes'
+import { GeistUIThemes } from '../themes/presets'
 
 interface Props {
   type?: NormalTypes

components/fieldset/__tests__/group.test.tsx

@@ -31,7 +31,9 @@ describe('Fieldset Group', () => {
 
   it('should throw error when value duplicated', () => {
     let errorMessage = ''
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(msg => (errorMessage = msg))
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(msg => (errorMessage = msg))
 
     mount(
       <Fieldset.Group value="two">
@@ -50,7 +52,9 @@ describe('Fieldset Group', () => {
 
   it('should throw error when label missing', () => {
     let errorMessage = ''
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(msg => (errorMessage = msg))
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(msg => (errorMessage = msg))
 
     mount(
       <Fieldset.Group value="one">

components/fieldset/fieldset-content.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {

components/fieldset/fieldset-context.ts

@@ -18,4 +18,5 @@ const defaultContext = {
 
 export const FieldsetContext = React.createContext<FieldsetConfig>(defaultContext)
 
-export const useFieldset = (): FieldsetConfig => React.useContext<FieldsetConfig>(FieldsetContext)
+export const useFieldset = (): FieldsetConfig =>
+  React.useContext<FieldsetConfig>(FieldsetContext)

components/fieldset/fieldset-footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import FieldsetFooterStatus from './fieldset-footer-status'
 import FieldsetFooterActions from './fieldset-footer-actions'
 

components/fieldset/fieldset-group.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import useCurrentState from '../utils/use-current-state'
 import { FieldsetContext, FieldItem } from './fieldset-context'

components/fieldset/fieldset-subtitle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {
@@ -13,7 +13,11 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type FieldsetSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = ({ className, children, ...props }) => {
+const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = ({
+  className,
+  children,
+  ...props
+}) => {
   const theme = useTheme()
 
   return (

components/fieldset/fieldset-title.tsx

@@ -12,7 +12,11 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type FieldsetTitleProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetTitle: React.FC<FieldsetTitleProps> = ({ className, children, ...props }) => {
+const FieldsetTitle: React.FC<FieldsetTitleProps> = ({
+  className,
+  children,
+  ...props
+}) => {
   return (
     <>
       <h4 className={className} {...props}>

components/fieldset/fieldset.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect, useMemo, useState } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import FieldsetTitle from './fieldset-title'
 import FieldsetSubtitle from './fieldset-subtitle'
 import FieldsetFooter from './fieldset-footer'

components/geist-provider/geist-provider.tsx

@@ -4,16 +4,21 @@ import {
   GeistUIContextParams,
   UpdateToastsFunction,
 } from '../utils/use-geist-ui-context'
-import ThemeProvider from '../styles/theme-provider'
-import { ThemeParam } from '../styles/theme-provider/theme-provider'
+import ThemeProvider from './theme-provider'
 import useCurrentState from '../utils/use-current-state'
 import ToastContainer, { ToastWithID } from '../use-toasts/toast-container'
+import { GeistUIThemes } from '../themes/presets'
 
 export interface Props {
-  theme?: ThemeParam
+  themes?: Array<GeistUIThemes>
+  themeType?: string | 'dark' | 'light'
 }
 
-const GeistProvider: React.FC<PropsWithChildren<Props>> = ({ theme, children }) => {
+const GeistProvider: React.FC<PropsWithChildren<Props>> = ({
+  themes,
+  themeType,
+  children,
+}) => {
   const [toasts, setToasts, toastsRef] = useCurrentState<Array<ToastWithID>>([])
   const [toastHovering, setToastHovering] = useState<boolean>(false)
   const updateToasts: UpdateToastsFunction<ToastWithID> = (
@@ -40,7 +45,7 @@ const GeistProvider: React.FC<PropsWithChildren<Props>> = ({ theme, children })
 
   return (
     <GeistUIContent.Provider value={initialValue}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider themes={themes} themeType={themeType}>
         {children}
         <ToastContainer />
       </ThemeProvider>

components/geist-provider/theme-provider.tsx

@@ -0,0 +1,46 @@
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'
+import Themes from '../themes'
+import { GeistUIThemes } from '../themes/presets'
+import { ThemeContext } from '../use-theme/theme-context'
+import { AllThemesConfig, AllThemesContext } from '../use-all-themes/all-themes-context'
+
+export interface Props {
+  themeType?: string
+  themes?: Array<GeistUIThemes>
+}
+
+const ThemeProvider: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  themeType,
+  themes = [],
+}) => {
+  const [allThemes, setAllThemes] = useState<AllThemesConfig>({
+    themes: Themes.getPresets(),
+  })
+
+  const currentTheme = useMemo<GeistUIThemes>(() => {
+    const theme = allThemes.themes.find(item => item.type === themeType)
+    if (theme) return theme
+    return Themes.getPresetStaticTheme()
+  }, [allThemes, themeType])
+
+  useEffect(() => {
+    if (!themes?.length) return
+    setAllThemes(last => {
+      const safeThemes = themes.filter(item => Themes.isAvailableThemeType(item.type))
+      const nextThemes = Themes.getPresets().concat(safeThemes)
+      return {
+        ...last,
+        themes: nextThemes,
+      }
+    })
+  }, [themes])
+
+  return (
+    <AllThemesContext.Provider value={allThemes}>
+      <ThemeContext.Provider value={currentTheme}>{children}</ThemeContext.Provider>
+    </AllThemesContext.Provider>
+  )
+}
+
+export default ThemeProvider

components/grid/__tests__/index.test.tsx

@@ -36,7 +36,11 @@ describe('Grid', () => {
         alignContent="center"
         direction="column"
         wrap="wrap">
-        <Grid justify="center" alignItems="center" alignContent="center" direction="column">
+        <Grid
+          justify="center"
+          alignItems="center"
+          alignContent="center"
+          direction="column">
           test
         </Grid>
       </Grid.Container>,

components/grid/basic-item.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { Justify, Direction, AlignItems, AlignContent } from './grid-types'
 
 type BreakpointsValue = number | boolean
@@ -189,4 +189,6 @@ export type GridBasicItemComponentProps = Partial<typeof defaultProps> &
 
 GridBasicItem.defaultProps = defaultProps
 
-export default React.memo(GridBasicItem) as MemoBasicItemComponent<GridBasicItemComponentProps>
+export default React.memo(
+  GridBasicItem,
+) as MemoBasicItemComponent<GridBasicItemComponentProps>

components/grid/grid-container.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 import { Wrap } from './grid-types'
 import css from 'styled-jsx/css'

components/grid/grid.tsx

@@ -13,7 +13,11 @@ const defaultProps = {
 
 export type GridProps = Props & typeof defaultProps & GridBasicItemComponentProps
 
-const Grid: React.FC<React.PropsWithChildren<GridProps>> = ({ children, className, ...props }) => {
+const Grid: React.FC<React.PropsWithChildren<GridProps>> = ({
+  children,
+  className,
+  ...props
+}) => {
   const { className: resolveClassName, styles } = css.resolve`
     margin: 0;
     box-sizing: border-box;

components/image/image-browser.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import Link from '../link'
 import { Props as LinkProps } from '../link/link'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import ImageBrowserHttpsIcon from './image-browser-https-icon'
 import { getBrowserColors, BrowserColors } from './styles'
@@ -102,13 +102,19 @@ const getAddressInput = (
   </div>
 )
 
-const ImageBrowser = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ImageBrowserProps>>(
+const ImageBrowser = React.forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<ImageBrowserProps>
+>(
   (
     { url, title, children, showFullLink, invert, anchorProps, className, ...props },
     ref: React.Ref<HTMLDivElement>,
   ) => {
     const theme = useTheme()
-    const colors = useMemo(() => getBrowserColors(invert, theme.palette), [invert, theme.palette])
+    const colors = useMemo(() => getBrowserColors(invert, theme.palette), [
+      invert,
+      theme.palette,
+    ])
     const input = useMemo(() => {
       if (url) return getAddressInput(url, showFullLink, colors, anchorProps)
       if (title) return getTitle(title, colors)

components/image/image.skeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   opacity: number
@@ -12,43 +12,45 @@ const defaultProps = {
 
 export type ImageSkeletonProps = Props & typeof defaultProps
 
-const ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(({ opacity, ...props }) => {
-  const theme = useTheme()
-  return (
-    <div className="skeleton" {...props}>
-      <style jsx>{`
-        .skeleton {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 100%;
-          height: 100%;
-          background-image: linear-gradient(
-            270deg,
-            ${theme.palette.accents_1},
-            ${theme.palette.accents_2},
-            ${theme.palette.accents_2},
-            ${theme.palette.accents_1}
-          );
-          background-size: 400% 100%;
-          animation: loading 3s ease-in-out infinite;
-          opacity: ${opacity};
-          transition: opacity 300ms ease-out;
-        }
+const ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(
+  ({ opacity, ...props }) => {
+    const theme = useTheme()
+    return (
+      <div className="skeleton" {...props}>
+        <style jsx>{`
+          .skeleton {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(
+              270deg,
+              ${theme.palette.accents_1},
+              ${theme.palette.accents_2},
+              ${theme.palette.accents_2},
+              ${theme.palette.accents_1}
+            );
+            background-size: 400% 100%;
+            animation: loading 3s ease-in-out infinite;
+            opacity: ${opacity};
+            transition: opacity 300ms ease-out;
+          }
 
-        @keyframes loading {
-          0% {
-            background-position: 200% 0;
+          @keyframes loading {
+            0% {
+              background-position: 200% 0;
+            }
+            to {
+              background-position: -200% 0;
+            }
           }
-          to {
-            background-position: -200% 0;
-          }
-        }
-      `}</style>
-    </div>
-  )
-})
+        `}</style>
+      </div>
+    )
+  },
+)
 
 export default withDefaults(ImageSkeleton, defaultProps)

components/image/image.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import ImageSkeleton from './image.skeleton'
 import ImageBrowser from './image-browser'
 import useRealShape from '../utils/use-real-shape'
@@ -101,7 +101,14 @@ const Image: React.FC<ImageProps> = ({
   return (
     <div className={`image ${className}`}>
       {showSkeleton && showAnimation && <ImageSkeleton opacity={loading ? 0.5 : 0} />}
-      <img ref={imageRef} width={width} height={height} onLoad={imageLoaded} src={src} {...props} />
+      <img
+        ref={imageRef}
+        width={width}
+        height={height}
+        onLoad={imageLoaded}
+        src={src}
+        {...props}
+      />
       <style jsx>{`
         .image {
           width: ${w};

components/image/styles.ts

@@ -1,4 +1,4 @@
-import { GeistUIThemesPalette } from 'components/styles/themes'
+import { GeistUIThemesPalette } from 'components/themes/presets'
 
 export type BrowserColors = {
   color: string
@@ -8,7 +8,10 @@ export type BrowserColors = {
   titleColor: string
 }
 
-export const getBrowserColors = (invert: boolean, palette: GeistUIThemesPalette): BrowserColors => {
+export const getBrowserColors = (
+  invert: boolean,
+  palette: GeistUIThemesPalette,
+): BrowserColors => {
   return invert
     ? {
         color: palette.background,

components/index.ts

@@ -1,7 +1,8 @@
 /// <reference types="styled-jsx" />
-
-export * from './styles/themes'
-export { default as useTheme } from './styles/use-theme'
+export * from './themes/presets'
+export { default as Themes } from './themes'
+export { default as useTheme } from './use-theme'
+export { default as useAllThemes } from './use-all-themes'
 export { default as GeistProvider } from './geist-provider'
 export { default as CssBaseline } from './css-baseline'
 export { default as useToasts } from './use-toasts'

components/input/__tests__/index.test.tsx

@@ -72,7 +72,9 @@ describe('Input', () => {
     let value = ''
     const callback = jest
       .fn()
-      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value))
+      .mockImplementation(
+        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),
+      )
     const wrapper = mount(<Input onChange={callback} />)
     wrapper
       .find('input')
@@ -106,9 +108,13 @@ describe('Input', () => {
     let value = ''
     const callback = jest
       .fn()
-      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value))
+      .mockImplementation(
+        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),
+      )
     const clearHandler = jest.fn()
-    const wrapper = mount(<Input onChange={callback} clearable onClearClick={clearHandler} />)
+    const wrapper = mount(
+      <Input onChange={callback} clearable onClearClick={clearHandler} />,
+    )
 
     wrapper
       .find('input')
@@ -146,7 +152,12 @@ describe('Input', () => {
   it('should ignore icon event when input disabled', () => {
     const click = jest.fn()
     const wrapper = mount(
-      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable disabled />,
+      <Input
+        icon={<span id="test-icon">icon</span>}
+        onIconClick={click}
+        iconClickable
+        disabled
+      />,
     )
     wrapper.find('#test-icon').simulate('click', nativeEvent)
     expect(click).not.toHaveBeenCalled()

components/input/input-block-label.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 export interface InputBlockLabelLabel {}
 
-const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> = ({ children }) => {
+const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> = ({
+  children,
+}) => {
   const theme = useTheme()
 
   return (

components/input/input-icon-clear.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   visible: boolean

components/input/input-icon.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 export interface InputIconProps {
   icon: React.ReactNode

components/input/input-label.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 export interface InputLabel {
   isRight?: boolean

components/input/input.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import InputLabel from './input-label'
 import InputBlockLabel from './input-block-label'
 import InputIcon from './input-icon'
@@ -68,18 +68,18 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
     const [hover, setHover] = useState<boolean>(false)
     const { heightRatio, fontSize } = useMemo(() => getSizes(size), [size])
     const isControlledComponent = useMemo(() => value !== undefined, [value])
-    const labelClasses = useMemo(() => (labelRight ? 'right-label' : label ? 'left-label' : ''), [
-      label,
-      labelRight,
-    ])
-    const iconClasses = useMemo(() => (iconRight ? 'right-icon' : icon ? 'left-icon' : ''), [
-      icon,
-      iconRight,
-    ])
-    const { color, borderColor, hoverBorder } = useMemo(() => getColors(theme.palette, status), [
-      theme.palette,
-      status,
-    ])
+    const labelClasses = useMemo(
+      () => (labelRight ? 'right-label' : label ? 'left-label' : ''),
+      [label, labelRight],
+    )
+    const iconClasses = useMemo(
+      () => (iconRight ? 'right-icon' : icon ? 'left-icon' : ''),
+      [icon, iconRight],
+    )
+    const { color, borderColor, hoverBorder } = useMemo(
+      () => getColors(theme.palette, status),
+      [theme.palette, status],
+    )
 
     const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
       if (disabled || readOnly) return

components/input/styles.ts

@@ -1,5 +1,5 @@
 import { NormalSizes, NormalTypes } from '../utils/prop-types'
-import { GeistUIThemesPalette } from '../styles/themes'
+import { GeistUIThemesPalette } from '../themes/presets'
 
 export type InputSize = {
   heightRatio: string
@@ -35,7 +35,10 @@ export type InputColor = {
   hoverBorder: string
 }
 
-export const getColors = (palette: GeistUIThemesPalette, status?: NormalTypes): InputColor => {
+export const getColors = (
+  palette: GeistUIThemesPalette,
+  status?: NormalTypes,
+): InputColor => {
   const colors: { [key in NormalTypes]: InputColor } = {
     default: {
       color: palette.foreground,

components/keyboard/__tests__/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Keyboard should render correctly 1`] = `
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
+          font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 4pt;
@@ -42,7 +42,7 @@ exports[`Keyboard should work with modifiers 1`] = `
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
+          font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 4pt;
@@ -71,7 +71,7 @@ exports[`Keyboard should work with modifiers 1`] = `
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
+          font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 4pt;
@@ -100,7 +100,7 @@ exports[`Keyboard should work with modifiers 1`] = `
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
+          font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 4pt;
@@ -129,7 +129,7 @@ exports[`Keyboard should work with modifiers 1`] = `
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
+          font-family: \\"Inter\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 4pt;
@@ -155,15 +155,15 @@ exports[`Keyboard should work with modifiers 1`] = `
 
 exports[`Keyboard should work with small size 1`] = `
 initialize {
-  "0": Object {
+  "0": Node {
     "attribs": Object {
       "class": "",
     },
     "children": Array [
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "F",
             "next": null,
             "parent": [Circular],
@@ -173,10 +173,10 @@ initialize {
         ],
         "name": "span",
         "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Object {
+        "next": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "
         kbd {
           width: fit-content;
@@ -185,7 +185,7 @@ initialize {
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 0;
@@ -228,10 +228,10 @@ initialize {
         "x-attribsNamespace": Object {},
         "x-attribsPrefix": Object {},
       },
-      Object {
+      Node {
         "attribs": Object {},
         "children": Array [
-          Object {
+          Node {
             "data": "
         kbd {
           width: fit-content;
@@ -240,7 +240,7 @@ initialize {
           display: inline-block;
           color: #666;
           background-color: #fafafa;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
           border-radius: 5px;
           border: 1px solid #eaeaea;
           padding: 0 0;
@@ -272,10 +272,10 @@ initialize {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": null,
         "parent": [Circular],
-        "prev": Object {
+        "prev": Node {
           "attribs": Object {},
           "children": Array [
-            Object {
+            Node {
               "data": "F",
               "next": null,
               "parent": [Circular],
@@ -300,22 +300,17 @@ initialize {
     "name": "kbd",
     "namespace": "http://www.w3.org/1999/xhtml",
     "next": null,
-    "parent": null,
-    "prev": null,
-    "root": Object {
-      "attribs": Object {},
+    "parent": Node {
       "children": Array [
         [Circular],
       ],
       "name": "root",
-      "namespace": "http://www.w3.org/1999/xhtml",
       "next": null,
       "parent": null,
       "prev": null,
       "type": "root",
-      "x-attribsNamespace": Object {},
-      "x-attribsPrefix": Object {},
     },
+    "prev": null,
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
@@ -328,8 +323,6 @@ initialize {
   "length": 1,
   "options": Object {
     "decodeEntities": true,
-    "normalizeWhitespace": false,
-    "withDomLvl1": true,
     "xml": false,
   },
 }

components/keyboard/keyboard.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
-import { GeistUIThemes } from '../styles/themes'
+import useTheme from '../use-theme'
+import { GeistUIThemes } from '../themes/presets'
 
 interface Props {
   command?: boolean
@@ -55,10 +55,10 @@ const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = ({
   ...props
 }) => {
   const theme = useTheme()
-  const { padding, fontSize, minWidth } = useMemo<CustomLayout>(() => getLayout(small, theme), [
-    small,
-    theme,
-  ])
+  const { padding, fontSize, minWidth } = useMemo<CustomLayout>(
+    () => getLayout(small, theme),
+    [small, theme],
+  )
 
   return (
     <kbd className={className} {...props}>

components/link/icon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const LinkIcon: React.FC<{}> = () => {
+export const LinkIcon: React.FC<unknown> = () => {
   return (
     <svg
       viewBox="0 0 24 24"

components/link/link.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
 import { addColorAlpha } from '../utils/color'

components/loading/loading.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { NormalSizes, NormalTypes } from 'components/utils/prop-types'
-import { GeistUIThemesPalette } from 'components/styles/themes'
+import { GeistUIThemesPalette } from 'components/themes/presets'
 
 interface Props {
   size?: NormalSizes
@@ -30,7 +30,11 @@ const getIconSize = (size: NormalSizes) => {
   return sizes[size]
 }
 
-const getIconBgColor = (type: NormalTypes, palette: GeistUIThemesPalette, color?: string) => {
+const getIconBgColor = (
+  type: NormalTypes,
+  palette: GeistUIThemesPalette,
+  color?: string,
+) => {
   const colors: { [key in NormalTypes]: string } = {
     default: palette.accents_6,
     secondary: palette.secondary,

components/modal/modal-action.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
 } from 'react'
 import css from 'styled-jsx/css'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { useModalContext } from './modal-context'
 import Button, { ButtonProps } from '../button/button'
 
@@ -28,9 +28,14 @@ const defaultProps = {
   disabled: false,
 }
 
-export type ModalActionProps = Props & typeof defaultProps & Omit<ButtonProps, keyof Props>
+export type ModalActionProps = Props &
+  typeof defaultProps &
+  Omit<ButtonProps, keyof Props>
 
-const ModalAction = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<ModalActionProps>>(
+const ModalAction = React.forwardRef<
+  HTMLButtonElement,
+  React.PropsWithChildren<ModalActionProps>
+>(
   (
     { className, children, onClick, passive, disabled, ...props },
     ref: React.Ref<HTMLButtonElement | null>,

components/modal/modal-actions.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
-const ModalActions: React.FC<React.PropsWithChildren<{}>> = ({ children, ...props }) => {
+const ModalActions: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+  ...props
+}) => {
   const theme = useTheme()
   return (
     <>

components/modal/modal-content.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   className?: string

components/modal/modal-context.ts

@@ -8,4 +8,5 @@ const defaultContext = {}
 
 export const ModalContext = React.createContext<ModalConfig>(defaultContext)
 
-export const useModalContext = (): ModalConfig => React.useContext<ModalConfig>(ModalContext)
+export const useModalContext = (): ModalConfig =>
+  React.useContext<ModalConfig>(ModalContext)

components/modal/modal-subtitle.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   className?: string
@@ -13,7 +13,11 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type ModalSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
-const ModalSubtitle: React.FC<ModalSubtitleProps> = ({ className, children, ...props }) => {
+const ModalSubtitle: React.FC<ModalSubtitleProps> = ({
+  className,
+  children,
+  ...props
+}) => {
   const theme = useTheme()
 
   return (

components/modal/modal-title.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 
 interface Props {
   className?: string

components/modal/modal-wrapper.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import CSSTransition from '../shared/css-transition'
 import { isChildElement } from '../utils/collections'
 

components/note/note.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { NormalTypes } from '../utils/prop-types'
-import { GeistUIThemes } from '../styles/themes'
+import { GeistUIThemes } from '../themes/presets'
 
 interface Props {
   type?: NormalTypes
@@ -56,11 +56,10 @@ export const Note: React.FC<React.PropsWithChildren<NoteProps>> = ({
   ...props
 }) => {
   const theme = useTheme()
-  const { color, borderColor, bgColor } = useMemo(() => getStatusColor(type, filled, theme), [
-    type,
-    filled,
-    theme,
-  ])
+  const { color, borderColor, bgColor } = useMemo(
+    () => getStatusColor(type, filled, theme),
+    [type, filled, theme],
+  )
   const padding = small
     ? `calc(${theme.layout.gapHalf} / 2) calc(${theme.layout.gap} / 2)`
     : `${theme.layout.gapHalf} ${theme.layout.gap}`

components/page/__tests__/index.test.tsx

@@ -48,7 +48,7 @@ describe('Page', () => {
 
   it('should disable dot style when in dark mode', () => {
     const wrapper = mount(
-      <GeistProvider theme={{ type: 'dark' }}>
+      <GeistProvider themeType="dark">
         <Page dotBackdrop />
       </GeistProvider>,
     )

components/page/page-content.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {

components/page/page-footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 
 interface Props {
@@ -13,7 +13,10 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs
 
-const PageFooter: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({ children, ...props }) => {
+const PageFooter: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+  children,
+  ...props
+}) => {
   const theme = useTheme()
 
   return (