Repository: uber-web/baseui
Pull request #921 (2019-02-20 22:28:40)

fix(rating): fix missing svgs in IE
#### Description

takes care of svgs in the rating and pagination components

#### Scope

- [x] Patch: Bug Fix



Patch:
diff --git a/src/pagination/icons.js b/src/pagination/icons.js
index 17928aeef..6fe772d63 100644
--- a/src/pagination/icons.js
+++ b/src/pagination/icons.js
@@ -47,12 +47,11 @@ export function ArrowRight({
 }
 
 export function ArrowDown() {
-  return (
-    <img
-      src={
-        'data:image/svg+xml;utf8,<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.29289 5.29289L0.853553 0.853553C0.538571 0.538571 0.761654 0 1.20711 0H10.7929C11.2383 0 11.4614 0.538571 11.1464 0.853554L6.70711 5.29289C6.31658 5.68342 5.68342 5.68342 5.29289 5.29289Z" transform="translate(12) scale(-1 1)" fill="%23666666"/></svg>'
-      }
-      alt="Expand"
-    />
-  );
+  const svg = encodeURIComponent(`
+    <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.29289 5.29289L0.853553 0.853553C0.538571 0.538571 0.761654 0 1.20711 0H10.7929C11.2383 0 11.4614 0.538571 11.1464 0.853554L6.70711 5.29289C6.31658 5.68342 5.68342 5.68342 5.29289 5.29289Z" transform="translate(12) scale(-1 1)" fill="#666666"/>
+    </svg>
+  `);
+
+  return <img src={`data:image/svg+xml;charset=utf8,${svg}`} alt="Expand" />;
 }
diff --git a/src/rating/styled-components.js b/src/rating/styled-components.js
index 037b65c9a..d1f553199 100644
--- a/src/rating/styled-components.js
+++ b/src/rating/styled-components.js
@@ -66,7 +66,7 @@ export const StyledStar = styled(
       ':after': {
         transition: `all ${$theme.animation.timing400}`,
         content:
-          `url('data:image/svg+xml;utf8,` +
+          `url('data:image/svg+xml;charset=utf8,` +
           starSVG(starFill, starStroke) +
           `')`,
       },
@@ -114,7 +114,9 @@ export const StyledEmoticon = styled(
       ':after': {
         transition: `all ${$theme.animation.timing400}`,
         content:
-          `url('data:image/svg+xml;utf8,` + ratingIcons[$index - 1] + `')`,
+          `url('data:image/svg+xml;charset=utf8,` +
+          ratingIcons[$index - 1] +
+          `')`,
       },
     };
 
diff --git a/src/rating/svg-icons.js b/src/rating/svg-icons.js
index cf4722a34..d39199bd5 100644
--- a/src/rating/svg-icons.js
+++ b/src/rating/svg-icons.js
@@ -7,37 +7,68 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 export function starSVG(fillColor: string, strokeColor: string) {
-  return `<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z" fill="${encodeURIComponent(
-    fillColor,
-  )}" stroke="${encodeURIComponent(strokeColor)}"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z"
+        fill="${fillColor}"
+        stroke="${strokeColor}"
+      />
+    </svg>
+  `);
 }
 
 export function angryRatingSVG(fillColor: string) {
-  return `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="22" r="20" fill="${encodeURIComponent(
-    fillColor,
-  )}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z" fill="black"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z" fill="black"/>
+    </svg>
+  `);
 }
 
 export function sadRatingSVG(fillColor: string) {
-  return `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="22" r="20" fill="${encodeURIComponent(
-    fillColor,
-  )}"/><ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/><ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 28C24.8073 28 26.6585 29.7697 27.1609 30.5442C27.4615 31.0075 28.0807 31.1395 28.5441 30.839C29.0074 30.5384 29.1394 29.9192 28.8388 29.4558C28.0439 28.2303 25.614 26 21.8377 26C18.0453 26 15.8091 28.25 15.1202 29.5245C14.8576 30.0103 15.0385 30.6171 15.5244 30.8797C16.0102 31.1423 16.617 30.9614 16.8796 30.4755C17.2718 29.75 18.8842 28 21.8377 28Z" fill="black"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 28C24.8073 28 26.6585 29.7697 27.1609 30.5442C27.4615 31.0075 28.0807 31.1395 28.5441 30.839C29.0074 30.5384 29.1394 29.9192 28.8388 29.4558C28.0439 28.2303 25.614 26 21.8377 26C18.0453 26 15.8091 28.25 15.1202 29.5245C14.8576 30.0103 15.0385 30.6171 15.5244 30.8797C16.0102 31.1423 16.617 30.9614 16.8796 30.4755C17.2718 29.75 18.8842 28 21.8377 28Z" fill="black"/>
+    </svg>
+  `);
 }
 
 export function neutralRatingSVG(fillColor: string) {
-  return `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="22" r="20" fill="${encodeURIComponent(
-    fillColor,
-  )}"/><ellipse cx="16" cy="19" rx="2" ry="2" fill="black"/><ellipse cx="28" cy="19" rx="2" ry="2" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 28C15 27.4477 15.4477 27 16 27L16 28L16 29C15.4477 29 15 28.5523 15 28ZM28 28L28 29H16L16 28L16 27H27.9995L28 28ZM28 28L28 29C28.5523 29 29 28.5523 29 28C29 27.4477 28.5518 27 27.9995 27L28 28Z" fill="black"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
+      <ellipse cx="16" cy="19" rx="2" ry="2" fill="black"/>
+      <ellipse cx="28" cy="19" rx="2" ry="2" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15 28C15 27.4477 15.4477 27 16 27L16 28L16 29C15.4477 29 15 28.5523 15 28ZM28 28L28 29H16L16 28L16 27H27.9995L28 28ZM28 28L28 29C28.5523 29 29 28.5523 29 28C29 27.4477 28.5518 27 27.9995 27L28 28Z" fill="black"/>
+    </svg>
+  `);
 }
 
 export function happyRatingSVG(fillColor: string) {
-  return `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="22" r="20" fill="${encodeURIComponent(
-    fillColor,
-  )}"/><ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/><ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 27.2303 27.1609 26.4558C27.4615 25.9925 28.0807 25.8605 28.5441 26.161C29.0074 26.4616 29.1394 27.0808 28.8388 27.5442C28.0439 28.7697 25.614 31 21.8377 31C18.0453 31 15.8091 28.75 15.1202 27.4755C14.8576 26.9897 15.0385 26.3829 15.5244 26.1203C16.0102 25.8577 16.617 26.0386 16.8796 26.5245C17.2718 27.25 18.8842 29 21.8377 29Z" fill="black"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 27.2303 27.1609 26.4558C27.4615 25.9925 28.0807 25.8605 28.5441 26.161C29.0074 26.4616 29.1394 27.0808 28.8388 27.5442C28.0439 28.7697 25.614 31 21.8377 31C18.0453 31 15.8091 28.75 15.1202 27.4755C14.8576 26.9897 15.0385 26.3829 15.5244 26.1203C16.0102 25.8577 16.617 26.0386 16.8796 26.5245C17.2718 27.25 18.8842 29 21.8377 29Z" fill="black"/>
+    </svg>
+  `);
 }
 
 export function veryHappyRatingSVG(fillColor: string) {
-  return `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22" cy="22" r="20" fill="${encodeURIComponent(
-    fillColor,
-  )}"/><ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/><ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/><path d="M21.8378 31C26.7027 31 28 27.8 28 27H16C16 27.8 16.973 31 21.8378 31Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M26.5528 28H17.3513C17.4656 28.1996 17.6126 28.3984 17.8211 28.6128C18.4608 29.2891 19.6453 30 21.8378 30C24.0315 30 25.3168 29.2869 26.0488 28.5805C26.2631 28.3781 26.4239 28.1881 26.5528 28ZM27.4377 30.0195C26.3048 31.1131 24.5091 32 21.8378 32C19.1655 32 17.4311 31.1109 16.3681 29.9872C15.3474 28.9082 15 27.6646 15 27C15 26.4477 15.4477 26 16 26H28C28.5523 26 29 26.4477 29 27C29 27.404 28.8568 27.9069 28.6231 28.3946C28.3936 28.868 27.9783 29.4894 27.4377 30.0195Z" fill="black"/></svg>`;
+  return encodeURIComponent(`
+    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
+      <path d="M21.8378 31C26.7027 31 28 27.8 28 27H16C16 27.8 16.973 31 21.8378 31Z" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.5528 28H17.3513C17.4656 28.1996 17.6126 28.3984 17.8211 28.6128C18.4608 29.2891 19.6453 30 21.8378 30C24.0315 30 25.3168 29.2869 26.0488 28.5805C26.2631 28.3781 26.4239 28.1881 26.5528 28ZM27.4377 30.0195C26.3048 31.1131 24.5091 32 21.8378 32C19.1655 32 17.4311 31.1109 16.3681 29.9872C15.3474 28.9082 15 27.6646 15 27C15 26.4477 15.4477 26 16 26H28C28.5523 26 29 26.4477 29 27C29 27.404 28.8568 27.9069 28.6231 28.3946C28.3936 28.868 27.9783 29.4894 27.4377 30.0195Z" fill="black"/>
+    </svg>
+  `);
 }


Test patch:
diff --git a/src/rating/__tests__/__snapshots__/styled-components.test.js.snap b/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
index 9115e83e5..84a2edb15 100644
--- a/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
@@ -3,7 +3,7 @@
 exports[`StyledComponents StyledEmoticon EmoticonStates displays correct SVG icon with $index=1 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2029C24.8073%2029%2026.6585%2030.7697%2027.1609%2031.5442C27.4615%2032.0075%2028.0807%2032.1395%2028.5441%2031.839C29.0074%2031.5384%2029.1394%2030.9192%2028.8388%2030.4558C28.0439%2029.2303%2025.614%2027%2021.8377%2027C18.0453%2027%2015.8091%2029.25%2015.1202%2030.5245C14.8576%2031.0103%2015.0385%2031.6171%2015.5244%2031.8797C16.0102%2032.1423%2016.617%2031.9614%2016.8796%2031.4755C17.2718%2030.75%2018.8842%2029%2021.8377%2029Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.684%2016.949C11.1601%2016.7743%2010.8769%2016.208%2011.0516%2015.684C11.2262%2015.1601%2011.7926%2014.8769%2012.3165%2015.0516L18.3165%2017.0516C18.8404%2017.2262%2019.1236%2017.7926%2018.949%2018.3165C18.8093%2018.7355%2018.4192%2019.0005%2018.0005%2019.0005C18.0004%2020.105%2017.105%2021.0002%2016.0005%2021.0002C14.896%2021.0002%2014.0005%2020.1048%2014.0005%2019.0002C14.0005%2018.5694%2014.1368%2018.1703%2014.3686%2017.8438L11.684%2016.949ZM32.949%2015.684C33.1237%2016.208%2032.8405%2016.7743%2032.3166%2016.949L29.6324%2017.8437C29.8642%2018.1702%2030.0005%2018.5693%2030.0005%2019.0002C30.0005%2020.1048%2029.1051%2021.0002%2028.0005%2021.0002C26.8961%2021.0002%2026.0007%2020.105%2026.0005%2019.0005C25.5817%2019.0007%2025.1914%2018.7356%2025.0516%2018.3165C24.877%2017.7926%2025.1602%2017.2262%2025.6841%2017.0516L31.6841%2015.0516C32.208%2014.8769%2032.7744%2015.1601%2032.949%2015.684Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -29,7 +29,7 @@ Object {
 exports[`StyledComponents StyledEmoticon EmoticonStates displays correct SVG icon with $index=2 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><ellipse cx=\\"16\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><ellipse cx=\\"28\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 28C24.8073 28 26.6585 29.7697 27.1609 30.5442C27.4615 31.0075 28.0807 31.1395 28.5441 30.839C29.0074 30.5384 29.1394 29.9192 28.8388 29.4558C28.0439 28.2303 25.614 26 21.8377 26C18.0453 26 15.8091 28.25 15.1202 29.5245C14.8576 30.0103 15.0385 30.6171 15.5244 30.8797C16.0102 31.1423 16.617 30.9614 16.8796 30.4755C17.2718 29.75 18.8842 28 21.8377 28Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2028C24.8073%2028%2026.6585%2029.7697%2027.1609%2030.5442C27.4615%2031.0075%2028.0807%2031.1395%2028.5441%2030.839C29.0074%2030.5384%2029.1394%2029.9192%2028.8388%2029.4558C28.0439%2028.2303%2025.614%2026%2021.8377%2026C18.0453%2026%2015.8091%2028.25%2015.1202%2029.5245C14.8576%2030.0103%2015.0385%2030.6171%2015.5244%2030.8797C16.0102%2031.1423%2016.617%2030.9614%2016.8796%2030.4755C17.2718%2029.75%2018.8842%2028%2021.8377%2028Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -55,7 +55,7 @@ Object {
 exports[`StyledComponents StyledEmoticon EmoticonStates displays correct SVG icon with $index=3 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><ellipse cx=\\"16\\" cy=\\"19\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><ellipse cx=\\"28\\" cy=\\"19\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M15 28C15 27.4477 15.4477 27 16 27L16 28L16 29C15.4477 29 15 28.5523 15 28ZM28 28L28 29H16L16 28L16 27H27.9995L28 28ZM28 28L28 29C28.5523 29 29 28.5523 29 28C29 27.4477 28.5518 27 27.9995 27L28 28Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2219%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2219%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2028C15%2027.4477%2015.4477%2027%2016%2027L16%2028L16%2029C15.4477%2029%2015%2028.5523%2015%2028ZM28%2028L28%2029H16L16%2028L16%2027H27.9995L28%2028ZM28%2028L28%2029C28.5523%2029%2029%2028.5523%2029%2028C29%2027.4477%2028.5518%2027%2027.9995%2027L28%2028Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -81,7 +81,7 @@ Object {
 exports[`StyledComponents StyledEmoticon EmoticonStates displays correct SVG icon with $index=4 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><ellipse cx=\\"16\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><ellipse cx=\\"28\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 27.2303 27.1609 26.4558C27.4615 25.9925 28.0807 25.8605 28.5441 26.161C29.0074 26.4616 29.1394 27.0808 28.8388 27.5442C28.0439 28.7697 25.614 31 21.8377 31C18.0453 31 15.8091 28.75 15.1202 27.4755C14.8576 26.9897 15.0385 26.3829 15.5244 26.1203C16.0102 25.8577 16.617 26.0386 16.8796 26.5245C17.2718 27.25 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2029C24.8073%2029%2026.6585%2027.2303%2027.1609%2026.4558C27.4615%2025.9925%2028.0807%2025.8605%2028.5441%2026.161C29.0074%2026.4616%2029.1394%2027.0808%2028.8388%2027.5442C28.0439%2028.7697%2025.614%2031%2021.8377%2031C18.0453%2031%2015.8091%2028.75%2015.1202%2027.4755C14.8576%2026.9897%2015.0385%2026.3829%2015.5244%2026.1203C16.0102%2025.8577%2016.617%2026.0386%2016.8796%2026.5245C17.2718%2027.25%2018.8842%2029%2021.8377%2029Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -107,7 +107,7 @@ Object {
 exports[`StyledComponents StyledEmoticon EmoticonStates displays correct SVG icon with $index=5 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><ellipse cx=\\"16\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><ellipse cx=\\"28\\" cy=\\"18\\" rx=\\"2\\" ry=\\"2\\" fill=\\"black\\"/><path d=\\"M21.8378 31C26.7027 31 28 27.8 28 27H16C16 27.8 16.973 31 21.8378 31Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M26.5528 28H17.3513C17.4656 28.1996 17.6126 28.3984 17.8211 28.6128C18.4608 29.2891 19.6453 30 21.8378 30C24.0315 30 25.3168 29.2869 26.0488 28.5805C26.2631 28.3781 26.4239 28.1881 26.5528 28ZM27.4377 30.0195C26.3048 31.1131 24.5091 32 21.8378 32C19.1655 32 17.4311 31.1109 16.3681 29.9872C15.3474 28.9082 15 27.6646 15 27C15 26.4477 15.4477 26 16 26H28C28.5523 26 29 26.4477 29 27C29 27.404 28.8568 27.9069 28.6231 28.3946C28.3936 28.868 27.9783 29.4894 27.4377 30.0195Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M21.8378%2031C26.7027%2031%2028%2027.8%2028%2027H16C16%2027.8%2016.973%2031%2021.8378%2031Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M26.5528%2028H17.3513C17.4656%2028.1996%2017.6126%2028.3984%2017.8211%2028.6128C18.4608%2029.2891%2019.6453%2030%2021.8378%2030C24.0315%2030%2025.3168%2029.2869%2026.0488%2028.5805C26.2631%2028.3781%2026.4239%2028.1881%2026.5528%2028ZM27.4377%2030.0195C26.3048%2031.1131%2024.5091%2032%2021.8378%2032C19.1655%2032%2017.4311%2031.1109%2016.3681%2029.9872C15.3474%2028.9082%2015%2027.6646%2015%2027C15%2026.4477%2015.4477%2026%2016%2026H28C28.5523%2026%2029%2026.4477%2029%2027C29%2027.404%2028.8568%2027.9069%2028.6231%2028.3946C28.3936%2028.868%2027.9783%2029.4894%2027.4377%2030.0195Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -133,7 +133,7 @@ Object {
 exports[`StyledComponents StyledEmoticon displays correct styles by default 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2029C24.8073%2029%2026.6585%2030.7697%2027.1609%2031.5442C27.4615%2032.0075%2028.0807%2032.1395%2028.5441%2031.839C29.0074%2031.5384%2029.1394%2030.9192%2028.8388%2030.4558C28.0439%2029.2303%2025.614%2027%2021.8377%2027C18.0453%2027%2015.8091%2029.25%2015.1202%2030.5245C14.8576%2031.0103%2015.0385%2031.6171%2015.5244%2031.8797C16.0102%2032.1423%2016.617%2031.9614%2016.8796%2031.4755C17.2718%2030.75%2018.8842%2029%2021.8377%2029Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.684%2016.949C11.1601%2016.7743%2010.8769%2016.208%2011.0516%2015.684C11.2262%2015.1601%2011.7926%2014.8769%2012.3165%2015.0516L18.3165%2017.0516C18.8404%2017.2262%2019.1236%2017.7926%2018.949%2018.3165C18.8093%2018.7355%2018.4192%2019.0005%2018.0005%2019.0005C18.0004%2020.105%2017.105%2021.0002%2016.0005%2021.0002C14.896%2021.0002%2014.0005%2020.1048%2014.0005%2019.0002C14.0005%2018.5694%2014.1368%2018.1703%2014.3686%2017.8438L11.684%2016.949ZM32.949%2015.684C33.1237%2016.208%2032.8405%2016.7743%2032.3166%2016.949L29.6324%2017.8437C29.8642%2018.1702%2030.0005%2018.5693%2030.0005%2019.0002C30.0005%2020.1048%2029.1051%2021.0002%2028.0005%2021.0002C26.8961%2021.0002%2026.0007%2020.105%2026.0005%2019.0005C25.5817%2019.0007%2025.1914%2018.7356%2025.0516%2018.3165C24.877%2017.7926%2025.1602%2017.2262%2025.6841%2017.0516L31.6841%2015.0516C32.208%2014.8769%2032.7744%2015.1601%2032.949%2015.684Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -159,7 +159,7 @@ Object {
 exports[`StyledComponents StyledEmoticon displays correct styling with state $isActive 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.rating200\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.rating200%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2029C24.8073%2029%2026.6585%2030.7697%2027.1609%2031.5442C27.4615%2032.0075%2028.0807%2032.1395%2028.5441%2031.839C29.0074%2031.5384%2029.1394%2030.9192%2028.8388%2030.4558C28.0439%2029.2303%2025.614%2027%2021.8377%2027C18.0453%2027%2015.8091%2029.25%2015.1202%2030.5245C14.8576%2031.0103%2015.0385%2031.6171%2015.5244%2031.8797C16.0102%2032.1423%2016.617%2031.9614%2016.8796%2031.4755C17.2718%2030.75%2018.8842%2029%2021.8377%2029Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.684%2016.949C11.1601%2016.7743%2010.8769%2016.208%2011.0516%2015.684C11.2262%2015.1601%2011.7926%2014.8769%2012.3165%2015.0516L18.3165%2017.0516C18.8404%2017.2262%2019.1236%2017.7926%2018.949%2018.3165C18.8093%2018.7355%2018.4192%2019.0005%2018.0005%2019.0005C18.0004%2020.105%2017.105%2021.0002%2016.0005%2021.0002C14.896%2021.0002%2014.0005%2020.1048%2014.0005%2019.0002C14.0005%2018.5694%2014.1368%2018.1703%2014.3686%2017.8438L11.684%2016.949ZM32.949%2015.684C33.1237%2016.208%2032.8405%2016.7743%2032.3166%2016.949L29.6324%2017.8437C29.8642%2018.1702%2030.0005%2018.5693%2030.0005%2019.0002C30.0005%2020.1048%2029.1051%2021.0002%2028.0005%2021.0002C26.8961%2021.0002%2026.0007%2020.105%2026.0005%2019.0005C25.5817%2019.0007%2025.1914%2018.7356%2025.0516%2018.3165C24.877%2017.7926%2025.1602%2017.2262%2025.6841%2017.0516L31.6841%2015.0516C32.208%2014.8769%2032.7744%2015.1601%2032.949%2015.684Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -185,7 +185,7 @@ Object {
 exports[`StyledComponents StyledEmoticon displays correct styling with state $isSelected 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.mono500\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2220%22%20fill%3D%22%24theme.colors.mono500%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.8377%2029C24.8073%2029%2026.6585%2030.7697%2027.1609%2031.5442C27.4615%2032.0075%2028.0807%2032.1395%2028.5441%2031.839C29.0074%2031.5384%2029.1394%2030.9192%2028.8388%2030.4558C28.0439%2029.2303%2025.614%2027%2021.8377%2027C18.0453%2027%2015.8091%2029.25%2015.1202%2030.5245C14.8576%2031.0103%2015.0385%2031.6171%2015.5244%2031.8797C16.0102%2032.1423%2016.617%2031.9614%2016.8796%2031.4755C17.2718%2030.75%2018.8842%2029%2021.8377%2029Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.684%2016.949C11.1601%2016.7743%2010.8769%2016.208%2011.0516%2015.684C11.2262%2015.1601%2011.7926%2014.8769%2012.3165%2015.0516L18.3165%2017.0516C18.8404%2017.2262%2019.1236%2017.7926%2018.949%2018.3165C18.8093%2018.7355%2018.4192%2019.0005%2018.0005%2019.0005C18.0004%2020.105%2017.105%2021.0002%2016.0005%2021.0002C14.896%2021.0002%2014.0005%2020.1048%2014.0005%2019.0002C14.0005%2018.5694%2014.1368%2018.1703%2014.3686%2017.8438L11.684%2016.949ZM32.949%2015.684C33.1237%2016.208%2032.8405%2016.7743%2032.3166%2016.949L29.6324%2017.8437C29.8642%2018.1702%2030.0005%2018.5693%2030.0005%2019.0002C30.0005%2020.1048%2029.1051%2021.0002%2028.0005%2021.0002C26.8961%2021.0002%2026.0007%2020.105%2026.0005%2019.0005C25.5817%2019.0007%2025.1914%2018.7356%2025.0516%2018.3165C24.877%2017.7926%2025.1602%2017.2262%2025.6841%2017.0516L31.6841%2015.0516C32.208%2014.8769%2032.7744%2015.1601%2032.949%2015.684Z%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -228,7 +228,7 @@ Object {
 exports[`StyledComponents StyledStar displays correct styles by default 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"22\\" height=\\"20\\" viewBox=\\"0 0 22 20\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z\\" fill=\\"%24theme.colors.mono300\\" stroke=\\"%24theme.colors.mono500\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M11%201.54816L13.1268%207.78053L13.2423%208.11905H13.6H20.4143L14.9132%2011.9714L14.6055%2012.1869L14.7268%2012.5424L16.8321%2018.7118L11.2868%2014.8285L11%2014.6277L10.7132%2014.8285L5.16792%2018.7118L7.27321%2012.5424L7.39454%2012.1869L7.08681%2011.9714L1.58566%208.11905H8.4H8.75769L8.87321%207.78053L11%201.54816Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.mono300%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%24theme.colors.mono500%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -254,7 +254,7 @@ Object {
 exports[`StyledComponents StyledStar displays correct styling with state $isActive 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"22\\" height=\\"20\\" viewBox=\\"0 0 22 20\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z\\" fill=\\"%24theme.colors.rating400\\" stroke=\\"%24theme.colors.rating400\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M11%201.54816L13.1268%207.78053L13.2423%208.11905H13.6H20.4143L14.9132%2011.9714L14.6055%2012.1869L14.7268%2012.5424L16.8321%2018.7118L11.2868%2014.8285L11%2014.6277L10.7132%2014.8285L5.16792%2018.7118L7.27321%2012.5424L7.39454%2012.1869L7.08681%2011.9714L1.58566%208.11905H8.4H8.75769L8.87321%207.78053L11%201.54816Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.rating400%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%24theme.colors.rating400%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -280,7 +280,7 @@ Object {
 exports[`StyledComponents StyledStar displays correct styling with state $isSelected 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"22\\" height=\\"20\\" viewBox=\\"0 0 22 20\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z\\" fill=\\"%24theme.colors.mono300\\" stroke=\\"%24theme.colors.mono500\\"/></svg>')",
+    "content": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M11%201.54816L13.1268%207.78053L13.2423%208.11905H13.6H20.4143L14.9132%2011.9714L14.6055%2012.1869L14.7268%2012.5424L16.8321%2018.7118L11.2868%2014.8285L11%2014.6277L10.7132%2014.8285L5.16792%2018.7118L7.27321%2012.5424L7.39454%2012.1869L7.08681%2011.9714L1.58566%208.11905H8.4H8.75769L8.87321%207.78053L11%201.54816Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.mono300%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%24theme.colors.mono500%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {