@khanacademy/wonder-blocks-icon-button 4.1.9 → 4.2.1

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IconButtonCore kind:primary color:default size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -68,7 +68,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:false disa
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -140,7 +140,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:false focu
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -212,7 +212,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:false hove
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -284,7 +284,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:false pres
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:true disabled 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:true disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -352,7 +352,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:true disab
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:true focused 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:true focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -424,7 +424,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:true focus
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:true hovered 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:true hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -496,7 +496,7 @@ exports[`IconButtonCore kind:primary color:default size:default light:true hover
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:default size:default light:true pressed 1`] = `
+exports[`IconButtonCore kind:primary color:default size:medium light:true pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -600,7 +600,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false disabl
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -608,7 +608,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false disabl
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={-1}
@@ -672,7 +672,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false focuse
       "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -680,7 +680,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false focuse
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -744,7 +744,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false hovere
       "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -752,7 +752,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false hovere
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -816,7 +816,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false presse
       "color": "#1b50b3",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -824,7 +824,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:false presse
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -884,7 +884,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true disable
       "color": "#6296f6",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -892,7 +892,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true disable
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={-1}
@@ -956,7 +956,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true focused
       "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -964,7 +964,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true focused
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -1028,7 +1028,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true hovered
       "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1036,7 +1036,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true hovered
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -1100,7 +1100,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true pressed
       "color": "#b5cefb",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1108,7 +1108,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true pressed
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -1136,7 +1136,7 @@ exports[`IconButtonCore kind:primary color:default size:small light:true pressed
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1168,7 +1168,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1176,7 +1176,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={-1}
@@ -1184,7 +1184,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1193,18 +1193,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1232,15 +1232,15 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#1865f2",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1248,7 +1248,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1256,7 +1256,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1265,18 +1265,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1304,15 +1304,15 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#1865f2",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1320,7 +1320,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1328,7 +1328,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1337,18 +1337,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1376,15 +1376,15 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#9e271d",
+      "borderColor": "#1b50b3",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#9e271d",
+      "color": "#1b50b3",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1392,7 +1392,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1400,7 +1400,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1409,18 +1409,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:true disabled 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:true disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1449,10 +1449,10 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true d
       "background": "none",
       "border": "none",
       "boxSizing": "border-box",
-      "color": "#e56d61",
+      "color": "#6296f6",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1460,7 +1460,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true d
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={-1}
@@ -1468,7 +1468,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true d
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1477,18 +1477,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true d
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:true focused 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:true focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1524,7 +1524,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true f
       "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1532,7 +1532,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true f
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1540,7 +1540,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true f
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1549,18 +1549,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true f
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:true hovered 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:true hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1596,7 +1596,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true h
       "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1604,7 +1604,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true h
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1612,7 +1612,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true h
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1621,18 +1621,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true h
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:default light:true pressed 1`] = `
+exports[`IconButtonCore kind:primary color:default size:xsmall light:true pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1660,15 +1660,15 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true p
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#f3bbb4",
+      "borderColor": "#b5cefb",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#f3bbb4",
+      "color": "#b5cefb",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -1676,7 +1676,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true p
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -1684,7 +1684,7 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true p
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -1693,18 +1693,18 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true p
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1772,7 +1772,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false di
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1844,7 +1844,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false fo
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1916,7 +1916,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false ho
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -1988,7 +1988,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false pr
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:true disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:true disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2056,7 +2056,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true dis
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:true focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:true focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2128,7 +2128,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true foc
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:true hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:true hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2200,7 +2200,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true hov
 </button>
 `;
 
-exports[`IconButtonCore kind:primary color:destructive size:small light:true pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:medium light:true pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2272,7 +2272,7 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true pre
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2304,7 +2304,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false di
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2312,7 +2312,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false di
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={-1}
@@ -2340,7 +2340,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false di
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2368,15 +2368,15 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false fo
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1865f2",
+      "borderColor": "#d92916",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1865f2",
+      "color": "#d92916",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2384,7 +2384,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false fo
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2412,7 +2412,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false fo
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2440,15 +2440,15 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false ho
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1865f2",
+      "borderColor": "#d92916",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1865f2",
+      "color": "#d92916",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2456,7 +2456,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false ho
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2484,7 +2484,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false ho
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2512,15 +2512,15 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false pr
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1b50b3",
+      "borderColor": "#9e271d",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1b50b3",
+      "color": "#9e271d",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2528,7 +2528,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false pr
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2556,7 +2556,7 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false pr
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:small light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:true disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2585,10 +2585,10 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false disa
       "background": "none",
       "border": "none",
       "boxSizing": "border-box",
-      "color": "rgba(33,36,44,0.32)",
+      "color": "#e56d61",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2596,7 +2596,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false disa
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={-1}
@@ -2624,7 +2624,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false disa
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:small light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:true focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2652,15 +2652,15 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false focu
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1865f2",
+      "borderColor": "#ffffff",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1865f2",
+      "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2668,7 +2668,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false focu
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2696,7 +2696,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false focu
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:small light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:true hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2724,15 +2724,15 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false hove
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1865f2",
+      "borderColor": "#ffffff",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1865f2",
+      "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2740,7 +2740,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false hove
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2768,7 +2768,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false hove
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:default size:small light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:small light:true pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2796,15 +2796,15 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false pres
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#1b50b3",
+      "borderColor": "#f3bbb4",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#1b50b3",
+      "color": "#f3bbb4",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2812,7 +2812,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false pres
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -2840,7 +2840,7 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false pres
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2872,7 +2872,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2880,7 +2880,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={-1}
@@ -2888,7 +2888,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -2897,18 +2897,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -2944,7 +2944,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "color": "#d92916",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -2952,7 +2952,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -2960,7 +2960,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -2969,18 +2969,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3016,7 +3016,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "color": "#d92916",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3024,7 +3024,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -3032,7 +3032,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3041,18 +3041,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3088,7 +3088,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "color": "#9e271d",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3096,7 +3096,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -3104,7 +3104,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3113,18 +3113,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:small light:false disabled 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:true disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3153,10 +3153,10 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "background": "none",
       "border": "none",
       "boxSizing": "border-box",
-      "color": "rgba(33,36,44,0.32)",
+      "color": "#e56d61",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3164,7 +3164,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={-1}
@@ -3172,7 +3172,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3181,18 +3181,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:small light:false focused 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:true focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3220,15 +3220,15 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#ffffff",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3236,7 +3236,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -3244,7 +3244,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3253,18 +3253,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:small light:false hovered 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:true hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3292,15 +3292,15 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#ffffff",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#ffffff",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3308,7 +3308,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -3316,7 +3316,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3325,18 +3325,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:secondary color:destructive size:small light:false pressed 1`] = `
+exports[`IconButtonCore kind:primary color:destructive size:xsmall light:true pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3364,15 +3364,15 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#9e271d",
+      "borderColor": "#f3bbb4",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#9e271d",
+      "color": "#f3bbb4",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3380,7 +3380,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -3388,7 +3388,7 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -3397,18 +3397,18 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:medium light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3476,7 +3476,7 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false dis
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:medium light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3548,7 +3548,7 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false foc
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:medium light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3620,7 +3620,7 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false hov
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:medium light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3692,7 +3692,7 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false pre
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:small light:false disabled 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:small light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3724,7 +3724,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false disab
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3732,7 +3732,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false disab
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={-1}
@@ -3760,7 +3760,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false disab
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:small light:false focused 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:small light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3796,7 +3796,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false focus
       "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3804,7 +3804,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false focus
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -3832,7 +3832,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false focus
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:small light:false hovered 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:small light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3868,7 +3868,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false hover
       "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3876,7 +3876,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false hover
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -3904,7 +3904,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false hover
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:default size:small light:false pressed 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:small light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -3940,7 +3940,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false press
       "color": "#1b50b3",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 32,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -3948,7 +3948,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false press
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 32,
     }
   }
   tabIndex={0}
@@ -3976,7 +3976,7 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false press
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:default light:false disabled 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:xsmall light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4008,7 +4008,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -4016,7 +4016,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={-1}
@@ -4024,7 +4024,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -4033,18 +4033,18 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:default light:false focused 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:xsmall light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4072,15 +4072,15 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#1865f2",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -4088,7 +4088,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -4096,7 +4096,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -4105,18 +4105,18 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:default light:false hovered 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:xsmall light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4144,15 +4144,15 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#d92916",
+      "borderColor": "#1865f2",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#d92916",
+      "color": "#1865f2",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -4160,7 +4160,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -4168,7 +4168,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -4177,18 +4177,18 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:default light:false pressed 1`] = `
+exports[`IconButtonCore kind:secondary color:default size:xsmall light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4216,15 +4216,15 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#9e271d",
+      "borderColor": "#1b50b3",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 2,
       "boxSizing": "border-box",
-      "color": "#9e271d",
+      "color": "#1b50b3",
       "cursor": "pointer",
       "display": "inline-flex",
-      "height": 40,
+      "height": 24,
       "justifyContent": "center",
       "margin": -8,
       "outline": "none",
@@ -4232,7 +4232,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
       "position": "relative",
       "textDecoration": "none",
       "touchAction": "manipulation",
-      "width": 40,
+      "width": 24,
     }
   }
   tabIndex={0}
@@ -4240,7 +4240,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
 >
   <svg
     className=""
-    height={24}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -4249,18 +4249,18 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
         "verticalAlign": "text-bottom",
       }
     }
-    viewBox="0 0 24 24"
-    width={24}
+    viewBox="0 0 16 16"
+    width={16}
   >
     <path
-      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:small light:false disabled 1`] = `
+exports[`IconButtonCore kind:secondary color:destructive size:medium light:false disabled 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4328,7 +4328,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false d
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:small light:false focused 1`] = `
+exports[`IconButtonCore kind:secondary color:destructive size:medium light:false focused 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4400,7 +4400,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false f
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:small light:false hovered 1`] = `
+exports[`IconButtonCore kind:secondary color:destructive size:medium light:false hovered 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4472,7 +4472,7 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false h
 </button>
 `;
 
-exports[`IconButtonCore kind:tertiary color:destructive size:small light:false pressed 1`] = `
+exports[`IconButtonCore kind:secondary color:destructive size:medium light:false pressed 1`] = `
 <button
   aria-label="search"
   className=""
@@ -4543,3 +4543,2275 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false p
   </svg>
 </button>
 `;
+
+exports[`IconButtonCore kind:secondary color:destructive size:small light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:small light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:small light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:small light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#9e271d",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#9e271d",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:xsmall light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:xsmall light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:xsmall light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:secondary color:destructive size:xsmall light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#9e271d",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#9e271d",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:medium light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:medium light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:medium light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:medium light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1b50b3",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1b50b3",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:small light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:small light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:small light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:small light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1b50b3",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1b50b3",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:xsmall light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:xsmall light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:xsmall light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1865f2",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1865f2",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:default size:xsmall light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#1b50b3",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#1b50b3",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:medium light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:medium light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:medium light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:medium light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#9e271d",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#9e271d",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 40,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:small light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:small light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:small light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:small light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#9e271d",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#9e271d",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 32,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 32,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={24}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:xsmall light:false disabled 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "boxSizing": "border-box",
+      "color": "rgba(33,36,44,0.32)",
+      "cursor": "default",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={-1}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:xsmall light:false focused 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:xsmall light:false hovered 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#d92916",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#d92916",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButtonCore kind:tertiary color:destructive size:xsmall light:false pressed 1`] = `
+<button
+  aria-label="search"
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    {
+      "::MozFocusInner": {
+        "border": 0,
+      },
+      ":focus": {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "none",
+      "border": "none",
+      "borderColor": "#9e271d",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 2,
+      "boxSizing": "border-box",
+      "color": "#9e271d",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 24,
+      "justifyContent": "center",
+      "margin": -8,
+      "outline": "none",
+      "padding": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "width": 24,
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <svg
+    className=""
+    height={16}
+    style={
+      {
+        "display": "inline-block",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "verticalAlign": "text-bottom",
+      }
+    }
+    viewBox="0 0 16 16"
+    width={16}
+  >
+    <path
+      d="M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+</button>
+`;