From c73eb7155f7bb29688ae0d1a0869d6c17de1694c Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Mon, 18 Jun 2018 20:54:47 -0400
Subject: [PATCH 1/2] Remove styled-components

---
 core/__tests__/Cartesian.js                   |  12 +-
 core/__tests__/Colorable.js                   |   6 +-
 .../__tests__/__snapshots__/Cartesian.js.snap | 126 +++++++++++++++---
 .../__tests__/__snapshots__/Colorable.js.snap | 120 ++++++++++++++---
 core/package.json                             |   6 +-
 core/src/LiveEditor.js                        |   8 +-
 core/src/Markdown.js                          |  11 +-
 7 files changed, 222 insertions(+), 67 deletions(-)

diff --git a/core/__tests__/Cartesian.js b/core/__tests__/Cartesian.js
index 6beae216..df4cf0ba 100644
--- a/core/__tests__/Cartesian.js
+++ b/core/__tests__/Cartesian.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'nano-style'
 import { render } from 'react-testing-library'
 import { color, space, fontSize } from 'styled-system'
 
@@ -12,11 +12,11 @@ const buttonProps = {
   backgroundColor: ['pink', 'tomato', 'purple']
 }
 
-const Button = styled.a`
-  ${color}
-  ${fontSize}
-  ${space}
-`
+const Button = styled('a')(
+  color,
+  fontSize,
+  space,
+)
 
 test('Cartesian renders all examples', () => {
   const { container } = render(<Cartesian {...buttonProps} component={Button} />)
diff --git a/core/__tests__/Colorable.js b/core/__tests__/Colorable.js
index 31d552be..a0a3a796 100644
--- a/core/__tests__/Colorable.js
+++ b/core/__tests__/Colorable.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'nano-style'
 import { render } from 'react-testing-library'
 import { color } from 'styled-system'
 
@@ -7,9 +7,7 @@ import { Colorable } from '../src'
 
 const colors = ['black', 'white', 'pink', 'tomato', 'purple']
 
-const Button = styled.a`
-  ${color}
-`
+const Button = styled('a')(color)
 
 test('Colorable returns all possible colors', () => {
   const { container } = render(
diff --git a/core/__tests__/__snapshots__/Cartesian.js.snap b/core/__tests__/__snapshots__/Cartesian.js.snap
index 26e50c5b..5a1d505d 100644
--- a/core/__tests__/__snapshots__/Cartesian.js.snap
+++ b/core/__tests__/__snapshots__/Cartesian.js.snap
@@ -3,112 +3,202 @@
 exports[`Cartesian renders all examples 1`] = `
 <div>
   <a
-    class="sc-htpNat bGRZZd"
+    backgroundcolor="pink"
+    class="nano1kwchfs"
     font-size="1"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat bGRZZd"
+    backgroundcolor="tomato"
+    class="nano1kwchfs"
     font-size="1"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat bGRZZd"
+    backgroundcolor="purple"
+    class="nano1kwchfs"
     font-size="1"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat kloolt"
+    backgroundcolor="pink"
+    class="nanoxw9r4l"
     font-size="1"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat kloolt"
+    backgroundcolor="tomato"
+    class="nanoxw9r4l"
     font-size="1"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat kloolt"
+    backgroundcolor="purple"
+    class="nanoxw9r4l"
     font-size="1"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat danOEM"
+    backgroundcolor="pink"
+    class="nano1cf2zn1"
     font-size="2"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat danOEM"
+    backgroundcolor="tomato"
+    class="nano1cf2zn1"
     font-size="2"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat danOEM"
+    backgroundcolor="purple"
+    class="nano1cf2zn1"
     font-size="2"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat eVTPhI"
+    backgroundcolor="pink"
+    class="nanowuhht0"
     font-size="2"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat eVTPhI"
+    backgroundcolor="tomato"
+    class="nanowuhht0"
     font-size="2"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat eVTPhI"
+    backgroundcolor="purple"
+    class="nanowuhht0"
     font-size="2"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat bdqFRZ"
+    backgroundcolor="pink"
+    class="nanoxcuqpe"
     font-size="3"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat bdqFRZ"
+    backgroundcolor="tomato"
+    class="nanoxcuqpe"
     font-size="3"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat bdqFRZ"
+    backgroundcolor="purple"
+    class="nanoxcuqpe"
     font-size="3"
+    px="2"
   >
     Hello, world!
   </a>
+  <style>
+    .nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
+  </style>
   <a
-    class="sc-htpNat feADao"
+    backgroundcolor="pink"
+    class="nano1ahjv9n"
     font-size="3"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat feADao"
+    backgroundcolor="tomato"
+    class="nano1ahjv9n"
     font-size="3"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
+  </style>
   <a
-    class="sc-htpNat feADao"
+    backgroundcolor="purple"
+    class="nano1ahjv9n"
     font-size="3"
+    px="3"
   >
     Hello, world!
   </a>
+  <style>
+    .nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
+  </style>
 </div>
 `;
diff --git a/core/__tests__/__snapshots__/Colorable.js.snap b/core/__tests__/__snapshots__/Colorable.js.snap
index fadbbd13..2ac90416 100644
--- a/core/__tests__/__snapshots__/Colorable.js.snap
+++ b/core/__tests__/__snapshots__/Colorable.js.snap
@@ -4,133 +4,213 @@ exports[`Colorable returns all possible colors 1`] = `
 <div>
   <div>
     <a
-      class="sc-htpNat dblfbH"
+      bg="#FFFFFF"
+      class="nano1rekuk9"
       color="#000000"
     >
       Beep
     </a>
+    <style>
+      .nano1rekuk9{color:#000000;background-color:#FFFFFF}
+    </style>
     <a
-      class="sc-htpNat bRkelE"
+      bg="#FFC0CB"
+      class="nano17lvxwa"
       color="#000000"
     >
       Beep
     </a>
+    <style>
+      .nano17lvxwa{color:#000000;background-color:#FFC0CB}
+    </style>
     <a
-      class="sc-htpNat hCWoAL"
+      bg="#FF6347"
+      class="nano1ysyr7m"
       color="#000000"
     >
       Beep
     </a>
+    <style>
+      .nano1ysyr7m{color:#000000;background-color:#FF6347}
+    </style>
     <a
-      class="sc-htpNat dbuxiW"
+      bg="#800080"
+      class="nano1yc7qir"
       color="#000000"
     >
       Beep
     </a>
+    <style>
+      .nano1yc7qir{color:#000000;background-color:#800080}
+    </style>
   </div>
   <div>
     <a
-      class="sc-htpNat iHRlkx"
+      bg="#000000"
+      class="nano1u851w9"
       color="#FFFFFF"
     >
       Beep
     </a>
+    <style>
+      .nano1u851w9{color:#FFFFFF;background-color:#000000}
+    </style>
     <a
-      class="sc-htpNat kXeVah"
+      bg="#FFC0CB"
+      class="nano1nezllh"
       color="#FFFFFF"
     >
       Beep
     </a>
+    <style>
+      .nano1nezllh{color:#FFFFFF;background-color:#FFC0CB}
+    </style>
     <a
-      class="sc-htpNat ihGwIW"
+      bg="#FF6347"
+      class="nanoifq73u"
       color="#FFFFFF"
     >
       Beep
     </a>
+    <style>
+      .nanoifq73u{color:#FFFFFF;background-color:#FF6347}
+    </style>
     <a
-      class="sc-htpNat bAFdRy"
+      bg="#800080"
+      class="nano18ci12p"
       color="#FFFFFF"
     >
       Beep
     </a>
+    <style>
+      .nano18ci12p{color:#FFFFFF;background-color:#800080}
+    </style>
   </div>
   <div>
     <a
-      class="sc-htpNat gQVtPt"
+      bg="#000000"
+      class="nanojgtyut"
       color="#FFC0CB"
     >
       Beep
     </a>
+    <style>
+      .nanojgtyut{color:#FFC0CB;background-color:#000000}
+    </style>
     <a
-      class="sc-htpNat kIfOGd"
+      bg="#FFFFFF"
+      class="nano11elic6"
       color="#FFC0CB"
     >
       Beep
     </a>
+    <style>
+      .nano11elic6{color:#FFC0CB;background-color:#FFFFFF}
+    </style>
     <a
-      class="sc-htpNat iBLqPa"
+      bg="#FF6347"
+      class="nanox3jx3c"
       color="#FFC0CB"
     >
       Beep
     </a>
+    <style>
+      .nanox3jx3c{color:#FFC0CB;background-color:#FF6347}
+    </style>
     <a
-      class="sc-htpNat dpRIBe"
+      bg="#800080"
+      class="nano1a7fmai"
       color="#FFC0CB"
     >
       Beep
     </a>
+    <style>
+      .nano1a7fmai{color:#FFC0CB;background-color:#800080}
+    </style>
   </div>
   <div>
     <a
-      class="sc-htpNat jVWkKd"
+      bg="#000000"
+      class="nanoo5bn9"
       color="#FF6347"
     >
       Beep
     </a>
+    <style>
+      .nanoo5bn9{color:#FF6347;background-color:#000000}
+    </style>
     <a
-      class="sc-htpNat jONCSQ"
+      bg="#FFFFFF"
+      class="nano12qkm0v"
       color="#FF6347"
     >
       Beep
     </a>
+    <style>
+      .nano12qkm0v{color:#FF6347;background-color:#FFFFFF}
+    </style>
     <a
-      class="sc-htpNat kOZJHn"
+      bg="#FFC0CB"
+      class="nano1ndez1j"
       color="#FF6347"
     >
       Beep
     </a>
+    <style>
+      .nano1ndez1j{color:#FF6347;background-color:#FFC0CB}
+    </style>
     <a
-      class="sc-htpNat hrigZI"
+      bg="#800080"
+      class="nano19toesz"
       color="#FF6347"
     >
       Beep
     </a>
+    <style>
+      .nano19toesz{color:#FF6347;background-color:#800080}
+    </style>
   </div>
   <div>
     <a
-      class="sc-htpNat exdLno"
+      bg="#000000"
+      class="nano19oobb2"
       color="#800080"
     >
       Beep
     </a>
+    <style>
+      .nano19oobb2{color:#800080;background-color:#000000}
+    </style>
     <a
-      class="sc-htpNat ljFhXe"
+      bg="#FFFFFF"
+      class="nanokboarc"
       color="#800080"
     >
       Beep
     </a>
+    <style>
+      .nanokboarc{color:#800080;background-color:#FFFFFF}
+    </style>
     <a
-      class="sc-htpNat jwFnuc"
+      bg="#FFC0CB"
+      class="nanorx2046"
       color="#800080"
     >
       Beep
     </a>
+    <style>
+      .nanorx2046{color:#800080;background-color:#FFC0CB}
+    </style>
     <a
-      class="sc-htpNat OTHyq"
+      bg="#FF6347"
+      class="nano1ct90ib"
       color="#800080"
     >
       Beep
     </a>
+    <style>
+      .nano1ct90ib{color:#800080;background-color:#FF6347}
+    </style>
   </div>
 </div>
 `;
diff --git a/core/package.json b/core/package.json
index cffc0516..3095bf7b 100644
--- a/core/package.json
+++ b/core/package.json
@@ -57,11 +57,7 @@
     "react": "^16.4.0",
     "react-testing-library": "^3.1.3",
     "rebass": "^2.0.0-0",
-    "sinon": "^5.0.10",
-    "styled-components": "^3.3.2"
-  },
-  "peerDependencies": {
-    "styled-components": ">=2.0.0 || >=3.0.0"
+    "sinon": "^5.0.10"
   },
   "publishConfig": {
     "access": "public"
diff --git a/core/src/LiveEditor.js b/core/src/LiveEditor.js
index 2a8f8402..bff7a41f 100644
--- a/core/src/LiveEditor.js
+++ b/core/src/LiveEditor.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import matter from 'gray-matter'
-import { ThemeProvider } from 'styled-components'
 import nano from 'nano-style'
 
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
@@ -33,16 +32,11 @@ class KitEditor extends Component {
         <LiveProvider
           mountStylesheet={false}
           scope={{
-            ThemeProvider,
             theme,
             ...scope
           }}
           code={content}
-          transformCode={code => `
-            <ThemeProvider theme={theme}>
-              <div>${code}</div>
-            </ThemeProvider>
-          `}
+          transformCode={code => `<div>${code}</div>`}
         >
           <Box>
             <LivePreview />
diff --git a/core/src/Markdown.js b/core/src/Markdown.js
index 476405dd..378a1be5 100644
--- a/core/src/Markdown.js
+++ b/core/src/Markdown.js
@@ -2,20 +2,17 @@ import React from 'react'
 import { transform } from 'buble'
 import mdx from '@mdx-js/mdx'
 import { MDXTag } from '@mdx-js/tag'
-import { ThemeProvider } from 'styled-components'
 
 export default ({ children, components, theme = {} }) => {
   const jsx = mdx.sync(children).replace('export default ({components}) =>', '')
 
   const { code } = transform(`
-    <ThemeProvider theme={theme}>
-      <React.Fragment>
-        ${jsx}
-      </React.Fragment>
-    </ThemeProvider>
+    <React.Fragment>
+      ${jsx}
+    </React.Fragment>
   `)
 
-  const scope = { ThemeProvider, MDXTag, ...components, components, theme }
+  const scope = { MDXTag, ...components, components, theme }
   const keys = Object.keys(scope)
   const values = keys.map(k => scope[k])
 

From 967e29b459afe55935212a6ae82d30b5709558c2 Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Mon, 18 Jun 2018 22:04:34 -0400
Subject: [PATCH 2/2] Update snapshots

---
 core/__tests__/Matrix.js                    |   5 +-
 core/__tests__/__snapshots__/Matrix.js.snap | 560 ++++----------------
 2 files changed, 115 insertions(+), 450 deletions(-)

diff --git a/core/__tests__/Matrix.js b/core/__tests__/Matrix.js
index 2303f77a..39ba7bfa 100644
--- a/core/__tests__/Matrix.js
+++ b/core/__tests__/Matrix.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import { render } from 'react-testing-library'
-import { Donut } from 'rebass'
-
+import styled from 'nano-style'
 import { Matrix } from '../src'
 
+const Donut = styled('progress')(props => ({ color: props.color }))
+
 test('Matrix renders all examples', () => {
   const { container } = render(
     <Matrix
diff --git a/core/__tests__/__snapshots__/Matrix.js.snap b/core/__tests__/__snapshots__/Matrix.js.snap
index 1fc53ff4..c6538595 100644
--- a/core/__tests__/__snapshots__/Matrix.js.snap
+++ b/core/__tests__/__snapshots__/Matrix.js.snap
@@ -9,35 +9,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dgyxZK"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nanokmk6w3"
+        color="blue "
         value="0.2"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="70.37167544041137"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nanokmk6w3{color:blue }
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -46,35 +25,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl kHqkDi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano1azdsrl"
+        color="pink"
         value="0.2"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="70.37167544041137"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano1azdsrl{color:pink}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -83,35 +41,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl iyNBzh"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano3fmwms"
+        color="tomato"
         value="0.2"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="70.37167544041137"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano3fmwms{color:tomato}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -120,35 +57,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dEoevi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano13y9yz"
+        color="purple"
         value="0.2"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="70.37167544041137"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano13y9yz{color:purple}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -164,35 +80,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dgyxZK"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nanokmk6w3"
+        color="blue "
         value="0.25"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="65.97344572538566"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nanokmk6w3{color:blue }
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -201,35 +96,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl kHqkDi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano1azdsrl"
+        color="pink"
         value="0.25"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="65.97344572538566"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano1azdsrl{color:pink}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -238,35 +112,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl iyNBzh"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano3fmwms"
+        color="tomato"
         value="0.25"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="65.97344572538566"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano3fmwms{color:tomato}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -275,35 +128,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dEoevi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano13y9yz"
+        color="purple"
         value="0.25"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="65.97344572538566"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano13y9yz{color:purple}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -319,35 +151,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dgyxZK"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nanokmk6w3"
+        color="blue "
         value="0.3333333333333333"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="58.643062867009476"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nanokmk6w3{color:blue }
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -356,35 +167,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl kHqkDi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano1azdsrl"
+        color="pink"
         value="0.3333333333333333"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="58.643062867009476"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano1azdsrl{color:pink}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -393,35 +183,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl iyNBzh"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano3fmwms"
+        color="tomato"
         value="0.3333333333333333"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="58.643062867009476"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano3fmwms{color:tomato}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -430,35 +199,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dEoevi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano13y9yz"
+        color="purple"
         value="0.3333333333333333"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="58.643062867009476"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano13y9yz{color:purple}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -474,35 +222,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dgyxZK"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nanokmk6w3"
+        color="blue "
         value="0.75"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="21.99114857512855"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nanokmk6w3{color:blue }
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -511,35 +238,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl kHqkDi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano1azdsrl"
+        color="pink"
         value="0.75"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="21.99114857512855"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano1azdsrl{color:pink}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -548,35 +254,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl iyNBzh"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano3fmwms"
+        color="tomato"
         value="0.75"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="21.99114857512855"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano3fmwms{color:tomato}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}
@@ -585,35 +270,14 @@ exports[`Matrix renders all examples 1`] = `
       class="nano1d47vpu"
       w="512"
     >
-      <svg
-        class="sc-cHGsZl dEoevi"
-        height="128"
-        stroke-width="2"
+      <progress
+        class="nano13y9yz"
+        color="purple"
         value="0.75"
-        viewBox="0 0 32 32"
-        width="128"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          opacity="0.125"
-          r="14"
-          stroke="currentcolor"
-          stroke-width="2"
-        />
-        <circle
-          cx="16"
-          cy="16"
-          fill="none"
-          r="14"
-          stroke="currentcolor"
-          stroke-dasharray="87.96459430051421"
-          stroke-dashoffset="21.99114857512855"
-          stroke-width="2"
-          transform="rotate(-90 16 16)"
-        />
-      </svg>
+      />
+      <style>
+        .nano13y9yz{color:purple}
+      </style>
     </div>
     <style>
       .nano1d47vpu{width:512px}