@sproutsocial/racine 12.15.0 → 12.16.1

package/__flow__/PartnerLogo/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import PartnerLogo from "./";
+import PartnerLogo, { type TypeProps } from "./";
 import Box from "../Box";
 
 export default {
@@ -52,7 +53,7 @@ export default {
   },
 };
 
-export const PartnerLogos = (args) => (
+export const PartnerLogos = (args: TypeProps) => (
   <Box width="25%">
     <PartnerLogo {...args} />
   </Box>
@@ -62,7 +63,7 @@ PartnerLogos.story = {
   name: "Partner Logos",
 };
 
-export const ModeOverride = (args) => (
+export const ModeOverride = (args: TypeProps) => (
   <Box width="25%">
     <PartnerLogo {...args} />
   </Box>
@@ -76,19 +77,46 @@ ModeOverride.story = {
   name: "Mode override",
 };
 
-export const LogoLayout = (args) => (
-  <Box display="flex" alignItems="center">
-    <PartnerLogo partnerName="facebook" height="40" width="40" mr={400} />
-    <PartnerLogo
-      partnerName="microsoft-dynamics"
-      height="40"
-      width="40"
-      mr={400}
-    />
-    <PartnerLogo partnerName="zendesk" />
+export const LogoLayout = (args: TypeProps) => (
+  <Box display="flex" alignItems="stretch">
+    <Box display="flex" alignItems="center" mr={600}>
+      <PartnerLogo partnerName="facebook" mr={600} />
+      <PartnerLogo height="30px" partnerName="microsoft-dynamics" mr={600} />
+      <PartnerLogo size="jumbo" partnerName="zendesk" />
+    </Box>
+    <Box display="flex" flexDirection="column" justifyContent="space-between">
+      <Box>
+        <PartnerLogo size="jumbo" partnerName="zendesk" logoType="lockup" />
+      </Box>
+      <Box>
+        <PartnerLogo size="jumbo" partnerName="dropbox" logoType="lockup" />
+      </Box>
+    </Box>
   </Box>
 );
 
 LogoLayout.story = {
   name: "Layout and size",
 };
+
+export const LogoType = (args: TypeProps) => (
+  <>
+    <PartnerLogo {...args} />
+  </>
+);
+
+LogoType.story = {
+  name: "Logo types",
+};
+
+LogoType.argTypes = {
+  logoType: {
+    options: [undefined, "wordmark", "lockup"],
+    control: { type: "select" },
+  },
+};
+
+LogoType.args = {
+  partnerName: "zendesk",
+  logoType: "wordmark",
+};

package/__flow__/PartnerLogo/partnerLogos/dropbox-lockup-dark.svg

@@ -0,0 +1,7 @@
+<svg width="291" height="57" viewBox="0 0 291 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2115 0L0 10.5568L17.2115 21.1136L34.4258 10.5568L51.6372 21.1136L68.8486 10.5568L51.6372 0L34.4258 10.5568L17.2115 0Z" fill="white"/>
+<path d="M17.4402 43.1451L0 32.1294L17.4402 21.1136L34.8833 32.1294L17.4402 43.1451Z" fill="white"/>
+<path d="M34.8833 32.1294L51.866 21.1136L68.8486 32.1294L51.866 43.1451L34.8833 32.1294Z" fill="white"/>
+<path d="M34.4258 56.9148L17.4417 46.358L34.4258 35.8013L51.407 46.358L34.4258 56.9148Z" fill="white"/>
+<path d="M80.7823 10.2068H94.4327C103.162 10.2068 110.29 15.2812 110.29 26.7931V29.2531C110.29 40.8078 103.564 46.0365 94.638 46.0365H80.7823V10.2068ZM88.4079 16.6955V39.462H94.2781C99.1906 39.462 102.554 36.1962 102.554 29.0131V27.1531C102.554 19.97 99.0962 16.7042 94.0216 16.7042H88.4079V16.6955ZM114.347 17.047H120.415L121.364 23.7844C122.52 19.1642 125.481 16.7984 130.846 16.7984H132.704V24.4873H129.597C123.375 24.4873 121.869 26.6473 121.869 32.7761V46.0451H114.347V17.047ZM134.313 32.1675V31.3617C134.313 21.6157 140.534 16.387 148.964 16.387C157.59 16.387 163.564 21.71 163.564 31.3617V32.1675C163.564 41.7163 157.693 46.7908 148.964 46.7908C139.636 46.7908 134.313 41.7163 134.313 32.1675ZM155.938 32.0646V31.3617C155.938 25.9358 153.226 22.7729 148.964 22.7729C144.753 22.7729 141.938 25.7387 141.938 31.3617V32.0646C141.938 37.2933 144.599 40.2077 148.913 40.2077C153.234 40.2077 155.938 37.3448 155.938 32.0646ZM167.526 17.047H173.85L174.604 22.5757C176.161 18.8556 179.37 16.3956 184.137 16.3956C191.514 16.3956 196.332 21.7186 196.332 31.4732V32.2789C196.332 41.8278 190.966 46.7994 184.137 46.7994C179.524 46.7994 176.46 44.7422 174.903 41.3735V55.9968H167.526V17.047ZM188.698 32.1161V31.4646C188.698 25.6873 185.737 22.8243 181.775 22.8243C177.564 22.8243 174.749 26.0387 174.749 31.4132V31.9703C174.749 37.0962 177.462 40.3106 181.621 40.3106C185.942 40.3106 188.698 37.4477 188.698 32.1161ZM207.415 40.7649L206.816 46.0451H200.294V7.34385H207.671V22.2157C209.28 18.4442 212.489 16.387 217.051 16.387C223.923 16.4384 229.04 21.2128 229.04 30.856V31.7132C229.04 41.3649 224.222 46.7908 216.846 46.7908C212.079 46.7908 208.972 44.485 207.415 40.7649ZM221.467 31.7132V31.0103C221.467 25.6873 218.557 22.7729 214.543 22.7729C210.376 22.7729 207.517 26.1416 207.517 31.1132V31.7132C207.517 37.1391 210.273 40.2592 214.44 40.2592C218.805 40.2592 221.467 37.4477 221.467 31.7132ZM232.404 32.1675V31.3617C232.404 21.6157 238.574 16.387 247.004 16.387C255.63 16.387 261.655 21.71 261.655 31.3617V32.1675C261.655 41.7163 255.733 46.7908 247.004 46.7908C237.667 46.7908 232.404 41.7163 232.404 32.1675ZM254.021 32.0646V31.3617C254.021 25.9358 251.308 22.7729 247.046 22.7729C242.836 22.7729 240.02 25.7387 240.02 31.3617V32.0646C240.02 37.2933 242.682 40.2077 246.995 40.2077C251.368 40.2077 254.021 37.3448 254.021 32.0646ZM271.488 31.0103L261.356 17.0384H270.033L275.904 25.7301L281.826 17.0384H290.452L280.166 30.9589L291 46.0365H282.468L275.793 36.4362L269.322 46.0365H260.491L271.488 31.0103Z" fill="white"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/dropbox-lockup.svg

@@ -0,0 +1,7 @@
+<svg width="291" height="57" viewBox="0 0 291 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2115 0L0 10.5568L17.2115 21.1136L34.4258 10.5568L51.6372 21.1136L68.8486 10.5568L51.6372 0L34.4258 10.5568L17.2115 0Z" fill="#0061FE"/>
+<path d="M17.4402 43.1451L0 32.1294L17.4402 21.1136L34.8833 32.1294L17.4402 43.1451Z" fill="#0061FE"/>
+<path d="M34.8833 32.1294L51.866 21.1136L68.8486 32.1294L51.866 43.1451L34.8833 32.1294Z" fill="#0061FE"/>
+<path d="M34.4258 56.9148L17.4417 46.358L34.4258 35.8013L51.407 46.358L34.4258 56.9148Z" fill="#0061FE"/>
+<path d="M80.7822 10.2068H94.4326C103.162 10.2068 110.29 15.2812 110.29 26.7931V29.2531C110.29 40.8078 103.564 46.0365 94.6378 46.0365H80.7822V10.2068ZM88.4078 16.6955V39.462H94.278C99.1905 39.462 102.553 36.1962 102.553 29.0131V27.1531C102.553 19.97 99.0961 16.7042 94.0215 16.7042H88.4078V16.6955ZM114.347 17.047H120.414L121.364 23.7844C122.519 19.1642 125.481 16.7984 130.846 16.7984H132.704V24.4873H129.597C123.375 24.4873 121.869 26.6473 121.869 32.7761V46.0451H114.347V17.047ZM134.312 32.1675V31.3617C134.312 21.6157 140.534 16.387 148.964 16.387C157.59 16.387 163.564 21.71 163.564 31.3617V32.1675C163.564 41.7163 157.693 46.7908 148.964 46.7908C139.635 46.7908 134.312 41.7163 134.312 32.1675ZM155.938 32.0646V31.3617C155.938 25.9358 153.226 22.7729 148.964 22.7729C144.753 22.7729 141.937 25.7387 141.937 31.3617V32.0646C141.937 37.2933 144.599 40.2077 148.912 40.2077C153.234 40.2077 155.938 37.3448 155.938 32.0646ZM167.526 17.047H173.85L174.604 22.5757C176.161 18.8556 179.37 16.3956 184.137 16.3956C191.514 16.3956 196.332 21.7186 196.332 31.4732V32.2789C196.332 41.8278 190.966 46.7994 184.137 46.7994C179.524 46.7994 176.46 44.7422 174.902 41.3735V55.9968H167.526V17.047ZM188.698 32.1161V31.4646C188.698 25.6873 185.737 22.8243 181.775 22.8243C177.564 22.8243 174.749 26.0387 174.749 31.4132V31.9703C174.749 37.0962 177.462 40.3106 181.621 40.3106C185.942 40.3106 188.698 37.4477 188.698 32.1161ZM207.415 40.7649L206.815 46.0451H200.294V7.34385H207.671V22.2157C209.28 18.4442 212.489 16.387 217.051 16.387C223.923 16.4384 229.04 21.2128 229.04 30.856V31.7132C229.04 41.3649 224.222 46.7908 216.846 46.7908C212.079 46.7908 208.972 44.485 207.415 40.7649ZM221.467 31.7132V31.0103C221.467 25.6873 218.557 22.7729 214.543 22.7729C210.375 22.7729 207.517 26.1416 207.517 31.1132V31.7132C207.517 37.1391 210.273 40.2592 214.44 40.2592C218.805 40.2592 221.467 37.4477 221.467 31.7132ZM232.404 32.1675V31.3617C232.404 21.6157 238.574 16.387 247.004 16.387C255.63 16.387 261.655 21.71 261.655 31.3617V32.1675C261.655 41.7163 255.733 46.7908 247.004 46.7908C237.667 46.7908 232.404 41.7163 232.404 32.1675ZM254.021 32.0646V31.3617C254.021 25.9358 251.308 22.7729 247.046 22.7729C242.836 22.7729 240.02 25.7387 240.02 31.3617V32.0646C240.02 37.2933 242.682 40.2077 246.995 40.2077C251.368 40.2077 254.021 37.3448 254.021 32.0646ZM271.487 31.0103L261.355 17.0384H270.033L275.904 25.7301L281.826 17.0384H290.452L280.166 30.9589L291 46.0365H282.468L275.793 36.4362L269.322 46.0365H260.491L271.487 31.0103Z" fill="#1E1919"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/dropbox-wordmark-dark.svg

@@ -0,0 +1,3 @@
+<svg width="308" height="71" viewBox="0 0 308 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.1774H19.9534C32.7135 4.1774 43.1343 11.5818 43.1343 28.3793V31.9689C43.1343 48.8289 33.3015 56.4584 20.2536 56.4584H0V4.1774ZM11.1464 13.6455V46.8652H19.7282C26.9089 46.8652 31.8253 42.0999 31.8253 31.6187V28.9046C31.8253 18.4234 26.7713 13.6581 19.3529 13.6581H11.1464V13.6455ZM49.064 14.1584H57.9335L59.3221 23.9892C61.011 17.2477 65.3394 13.7956 73.1831 13.7956H75.8978V25.0148H71.3567C62.2619 25.0148 60.0602 28.1666 60.0602 37.1094V56.4709H49.064V14.1584ZM78.2497 36.2214V35.0457C78.2497 20.8248 87.3447 13.1953 99.6667 13.1953C112.277 13.1953 121.009 20.9624 121.009 35.0457V36.2214C121.009 50.1546 112.427 57.559 99.6667 57.559C86.0307 57.559 78.2497 50.1546 78.2497 36.2214V36.2214ZM109.863 36.0713V35.0457C109.863 27.1285 105.897 22.5133 99.6667 22.5133C93.5117 22.5133 89.3957 26.8409 89.3957 35.0457V36.0713C89.3957 43.7008 93.2867 47.9533 99.5917 47.9533C105.909 47.9533 109.863 43.7759 109.863 36.0713ZM126.801 14.1584H136.046L137.147 22.2256C139.423 16.7974 144.115 13.2078 151.083 13.2078C161.866 13.2078 168.909 20.9749 168.909 35.2083V36.384C168.909 50.3172 161.066 57.5715 151.083 57.5715C144.34 57.5715 139.861 54.5698 137.585 49.6544V70.992H126.801V14.1584ZM157.751 36.1464V35.1958C157.751 26.7658 153.422 22.5883 147.63 22.5883C141.475 22.5883 137.359 27.2786 137.359 35.1208V35.9337C137.359 43.4132 141.325 48.1034 147.405 48.1034C153.722 48.1034 157.751 43.926 157.751 36.1464ZM185.11 48.7663L184.234 56.4709H174.701V0H185.485V21.7003C187.837 16.1971 192.528 13.1953 199.196 13.1953C209.241 13.2703 216.722 20.2369 216.722 34.3078V35.5585C216.722 49.6418 209.679 57.559 198.896 57.559C191.928 57.559 187.387 54.1945 185.11 48.7663V48.7663ZM205.651 35.5585V34.5329C205.651 26.7658 201.398 22.5133 195.531 22.5133C189.438 22.5133 185.26 27.4287 185.26 34.683V35.5585C185.26 43.4757 189.288 48.0284 195.38 48.0284C201.76 48.0284 205.651 43.926 205.651 35.5585V35.5585ZM221.639 36.2214V35.0457C221.639 20.8248 230.658 13.1953 242.981 13.1953C255.591 13.1953 264.398 20.9624 264.398 35.0457V36.2214C264.398 50.1546 255.741 57.559 242.981 57.559C229.332 57.559 221.639 50.1546 221.639 36.2214V36.2214ZM253.239 36.0713V35.0457C253.239 27.1285 249.273 22.5133 243.043 22.5133C236.888 22.5133 232.773 26.8409 232.773 35.0457V36.0713C232.773 43.7008 236.663 47.9533 242.968 47.9533C249.361 47.9533 253.239 43.7759 253.239 36.0713ZM278.772 34.5329L263.96 14.1458H276.645L285.227 26.8283L293.884 14.1458H306.494L291.457 34.4579L307.294 56.4584H294.822L285.064 42.4501L275.607 56.4584H262.696L278.772 34.5329Z" fill="white"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/dropbox-wordmark.svg

@@ -0,0 +1,3 @@
+<svg width="308" height="71" viewBox="0 0 308 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.1774H19.9534C32.7135 4.1774 43.1343 11.5818 43.1343 28.3793V31.9689C43.1343 48.8289 33.3015 56.4584 20.2536 56.4584H0V4.1774ZM11.1464 13.6455V46.8652H19.7282C26.9089 46.8652 31.8253 42.0999 31.8253 31.6187V28.9046C31.8253 18.4234 26.7713 13.6581 19.3529 13.6581H11.1464V13.6455ZM49.064 14.1584H57.9335L59.3221 23.9892C61.011 17.2477 65.3394 13.7956 73.1831 13.7956H75.8978V25.0148H71.3567C62.2619 25.0148 60.0602 28.1666 60.0602 37.1094V56.4709H49.064V14.1584ZM78.2497 36.2214V35.0457C78.2497 20.8248 87.3447 13.1953 99.6667 13.1953C112.277 13.1953 121.009 20.9624 121.009 35.0457V36.2214C121.009 50.1546 112.427 57.559 99.6667 57.559C86.0307 57.559 78.2497 50.1546 78.2497 36.2214V36.2214ZM109.863 36.0713V35.0457C109.863 27.1285 105.897 22.5133 99.6667 22.5133C93.5117 22.5133 89.3957 26.8409 89.3957 35.0457V36.0713C89.3957 43.7008 93.2867 47.9533 99.5917 47.9533C105.909 47.9533 109.863 43.7759 109.863 36.0713ZM126.801 14.1584H136.046L137.147 22.2256C139.423 16.7974 144.115 13.2078 151.083 13.2078C161.866 13.2078 168.909 20.9749 168.909 35.2083V36.384C168.909 50.3172 161.066 57.5715 151.083 57.5715C144.34 57.5715 139.861 54.5698 137.585 49.6544V70.992H126.801V14.1584ZM157.751 36.1464V35.1958C157.751 26.7658 153.422 22.5883 147.63 22.5883C141.475 22.5883 137.359 27.2786 137.359 35.1208V35.9337C137.359 43.4132 141.325 48.1034 147.405 48.1034C153.722 48.1034 157.751 43.926 157.751 36.1464ZM185.11 48.7663L184.234 56.4709H174.701V0H185.485V21.7003C187.837 16.1971 192.528 13.1953 199.196 13.1953C209.241 13.2703 216.722 20.2369 216.722 34.3078V35.5585C216.722 49.6418 209.679 57.559 198.896 57.559C191.928 57.559 187.387 54.1945 185.11 48.7663V48.7663ZM205.651 35.5585V34.5329C205.651 26.7658 201.398 22.5133 195.531 22.5133C189.438 22.5133 185.26 27.4287 185.26 34.683V35.5585C185.26 43.4757 189.288 48.0284 195.38 48.0284C201.76 48.0284 205.651 43.926 205.651 35.5585V35.5585ZM221.639 36.2214V35.0457C221.639 20.8248 230.658 13.1953 242.981 13.1953C255.591 13.1953 264.398 20.9624 264.398 35.0457V36.2214C264.398 50.1546 255.741 57.559 242.981 57.559C229.332 57.559 221.639 50.1546 221.639 36.2214V36.2214ZM253.239 36.0713V35.0457C253.239 27.1285 249.273 22.5133 243.043 22.5133C236.888 22.5133 232.773 26.8409 232.773 35.0457V36.0713C232.773 43.7008 236.663 47.9533 242.968 47.9533C249.361 47.9533 253.239 43.7759 253.239 36.0713ZM278.772 34.5329L263.96 14.1458H276.645L285.227 26.8283L293.884 14.1458H306.494L291.457 34.4579L307.294 56.4584H294.822L285.064 42.4501L275.607 56.4584H262.696L278.772 34.5329Z" fill="#1E1919"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/zendesk-lockup-dark.svg

@@ -0,0 +1,28 @@
+<svg width="160" height="115" viewBox="0 0 160 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.6063 17.847V67.5672H35.4197L76.6063 17.847Z" fill="white"/>
+<mask id="mask0_223_79" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="0" width="42" height="21">
+<path d="M35.4197 0H76.6063V20.5929H35.4197V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_223_79)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.6062 -0.000396729C76.6062 11.3735 67.3868 20.5929 56.0129 20.5929C44.6389 20.5929 35.4196 11.3735 35.4196 -0.000396729H76.6062Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.394 67.5676C83.394 56.1937 92.6134 46.9743 103.987 46.9743C115.361 46.9743 124.576 56.1937 124.576 67.5676H83.394Z" fill="white"/>
+<mask id="mask1_223_79" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="83" y="0" width="42" height="50">
+<path d="M83.394 0H124.576V49.7223H83.394V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_223_79)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.394 49.7224V-0.00210571H124.576L83.394 49.7224Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.338 101.739C110.902 98.9325 109.226 96.8668 105.874 96.8668C102.758 96.8668 100.599 98.6362 100.024 101.739H111.338ZM106.398 110.107C109.036 110.107 110.953 109.024 112.104 107.889L114.936 110.941C113.061 112.863 110.475 114.29 106.449 114.29C99.5453 114.29 95.0837 109.714 95.0837 103.508C95.0837 97.3578 99.7865 92.7312 105.823 92.7312C112.676 92.7312 116.562 97.9462 116.227 105.185H100.024C100.599 108.186 102.707 110.107 106.398 110.107Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 109.881L12.4703 97.2114H0.287841V93.2366H18.2525V97.2918L5.77798 109.965H18.4176V113.936H0V109.881Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3609 101.739C36.9249 98.9325 35.2486 96.8668 31.8919 96.8668C28.7764 96.8668 26.6219 98.6362 26.0462 101.739H37.3609ZM32.421 110.107C35.0581 110.107 36.9757 109.024 38.127 107.889L40.9546 110.941C39.0837 112.863 36.4973 114.29 32.4718 114.29C25.5636 114.29 21.1063 109.714 21.1063 103.508C21.1063 97.3578 25.8091 92.7312 31.8453 92.7312C38.6985 92.7312 42.5843 97.9462 42.2457 105.185H26.0462C26.6219 108.186 28.7299 110.107 32.421 110.107Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.7216 103.482C86.7216 99.799 83.9363 96.7767 80.1521 96.7767C76.4525 96.7767 73.5825 99.7143 73.5825 103.482C73.5825 107.249 76.4525 110.233 80.1521 110.233C83.9363 110.233 86.7216 107.207 86.7216 103.482ZM69.176 103.524C69.176 96.8994 74.1201 92.7554 79.5722 92.7554C82.3151 92.7554 84.9353 93.9575 86.4719 95.8623V83.6461H90.8784V113.878H86.4719V111.016C84.893 113.048 82.2728 114.288 79.5298 114.288C74.2513 114.288 69.176 110.106 69.176 103.524Z" fill="white"/>
+<mask id="mask2_223_79" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="119" y="92" width="18" height="23">
+<path d="M119.097 92.7185H136.6V114.29H119.097V92.7185Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_223_79)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.097 109.486L123.085 107.416C124.211 109.321 126.039 110.438 128.41 110.438C130.903 110.438 132.194 109.156 132.194 107.708C132.194 106.049 129.781 105.676 127.161 105.138C123.626 104.393 119.969 103.234 119.969 98.971C119.969 95.699 123.085 92.6766 127.995 92.719C131.86 92.719 134.725 94.2471 136.351 96.7318L132.647 98.7636C131.694 97.3117 130.073 96.4016 127.995 96.4016C125.624 96.4016 124.418 97.5615 124.418 98.8864C124.418 100.376 126.331 100.791 129.324 101.452C132.736 102.197 136.6 103.314 136.6 107.623C136.6 110.48 134.107 114.332 128.198 114.29C123.876 114.29 120.841 112.55 119.097 109.486Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M148.567 104.682L145.075 108.492V113.876H140.668V83.6486H145.075V103.442L154.43 93.1727H159.793L151.682 102.032L160 113.876H155.009L148.567 104.682Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8595 92.7545C50.6234 92.7545 46.238 96.1493 46.238 101.779V113.873H50.725V102.342C50.725 98.9431 52.6764 96.9113 56.0035 96.9113C59.3263 96.9113 60.9941 98.9431 60.9941 102.342V113.873H65.4853V101.779C65.4853 96.1493 61.0957 92.7545 55.8595 92.7545Z" fill="white"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/zendesk-lockup.svg

@@ -0,0 +1,28 @@
+<svg width="160" height="115" viewBox="0 0 160 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.6063 17.847V67.5672H35.4197L76.6063 17.847Z" fill="#03363D"/>
+<mask id="mask0_223_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="0" width="42" height="21">
+<path d="M35.4197 0H76.6063V20.5929H35.4197V0Z" fill="#03363D"/>
+</mask>
+<g mask="url(#mask0_223_56)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.6063 -0.000396729C76.6063 11.3735 67.3869 20.5929 56.013 20.5929C44.639 20.5929 35.4197 11.3735 35.4197 -0.000396729H76.6063Z" fill="#03363D"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.394 67.5676C83.394 56.1937 92.6134 46.9743 103.987 46.9743C115.361 46.9743 124.576 56.1937 124.576 67.5676H83.394Z" fill="#03363D"/>
+<mask id="mask1_223_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="83" y="0" width="42" height="50">
+<path d="M83.394 0H124.576V49.7223H83.394V0Z" fill="#03363D"/>
+</mask>
+<g mask="url(#mask1_223_56)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.394 49.7224V-0.00210571H124.576L83.394 49.7224Z" fill="#03363D"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.338 101.739C110.902 98.9325 109.226 96.8668 105.874 96.8668C102.758 96.8668 100.599 98.6362 100.024 101.739H111.338ZM106.398 110.107C109.036 110.107 110.953 109.024 112.104 107.889L114.936 110.941C113.061 112.863 110.475 114.29 106.449 114.29C99.5453 114.29 95.0837 109.714 95.0837 103.508C95.0837 97.3578 99.7865 92.7312 105.823 92.7312C112.676 92.7312 116.562 97.9462 116.227 105.185H100.024C100.599 108.186 102.707 110.107 106.398 110.107Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 109.881L12.4703 97.2114H0.287841V93.2366H18.2525V97.2918L5.77798 109.965H18.4176V113.936H0V109.881Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3607 101.739C36.9247 98.9325 35.2485 96.8668 31.8918 96.8668C28.7763 96.8668 26.6217 98.6362 26.0461 101.739H37.3607ZM32.4209 110.107C35.058 110.107 36.9755 109.024 38.1269 107.889L40.9545 110.941C39.0835 112.863 36.4972 114.29 32.4717 114.29C25.5635 114.29 21.1062 109.714 21.1062 103.508C21.1062 97.3578 25.809 92.7312 31.8452 92.7312C38.6983 92.7312 42.5842 97.9462 42.2456 105.185H26.0461C26.6217 108.186 28.7297 110.107 32.4209 110.107Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.7216 103.482C86.7216 99.799 83.9363 96.7767 80.1521 96.7767C76.4525 96.7767 73.5825 99.7143 73.5825 103.482C73.5825 107.249 76.4525 110.233 80.1521 110.233C83.9363 110.233 86.7216 107.207 86.7216 103.482ZM69.176 103.524C69.176 96.8994 74.1201 92.7554 79.5722 92.7554C82.3151 92.7554 84.9353 93.9575 86.4719 95.8623V83.6461H90.8784V113.878H86.4719V111.016C84.893 113.048 82.2728 114.288 79.5298 114.288C74.2513 114.288 69.176 110.106 69.176 103.524Z" fill="#03363D"/>
+<mask id="mask2_223_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="119" y="92" width="18" height="23">
+<path d="M119.097 92.7185H136.6V114.29H119.097V92.7185Z" fill="#03363D"/>
+</mask>
+<g mask="url(#mask2_223_56)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.097 109.486L123.085 107.416C124.211 109.321 126.039 110.438 128.41 110.438C130.903 110.438 132.194 109.156 132.194 107.708C132.194 106.049 129.781 105.676 127.161 105.138C123.626 104.393 119.969 103.234 119.969 98.971C119.969 95.699 123.085 92.6766 127.995 92.719C131.86 92.719 134.725 94.2471 136.351 96.7318L132.647 98.7636C131.694 97.3117 130.073 96.4016 127.995 96.4016C125.624 96.4016 124.418 97.5615 124.418 98.8864C124.418 100.376 126.331 100.791 129.324 101.452C132.736 102.197 136.6 103.314 136.6 107.623C136.6 110.48 134.107 114.332 128.198 114.29C123.876 114.29 120.841 112.55 119.097 109.486Z" fill="#03363D"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M148.567 104.682L145.075 108.492V113.876H140.668V83.6486H145.075V103.442L154.43 93.1727H159.793L151.682 102.032L160 113.876H155.009L148.567 104.682Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8595 92.7545C50.6234 92.7545 46.238 96.1493 46.238 101.779V113.873H50.725V102.342C50.725 98.9431 52.6764 96.9113 56.0035 96.9113C59.3263 96.9113 60.9941 98.9431 60.9941 102.342V113.873H65.4853V101.779C65.4853 96.1493 61.0957 92.7545 55.8595 92.7545Z" fill="#03363D"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/zendesk-wordmark-dark.svg

@@ -0,0 +1,9 @@
+<svg width="350" height="67" viewBox="0 0 350 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M243.435 39.5559C242.492 33.4224 238.825 28.9026 231.485 28.9026C224.668 28.9026 219.955 32.7761 218.695 39.5559H243.435ZM232.638 57.8492C238.401 57.8492 242.595 55.4823 245.111 53.0083L251.297 59.6769C247.206 63.8757 241.55 67 232.745 67C217.646 67 207.898 56.9889 207.898 43.4294C207.898 29.977 218.173 19.8629 231.378 19.8629C246.37 19.8629 254.858 31.2695 254.125 47.0889H218.695C219.955 53.6546 224.565 57.8492 232.638 57.8492Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 57.3581L27.2712 29.6587H0.638044V20.9649H39.9045V29.8357L12.6333 57.5392H40.2709V66.229H0V57.3581Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.685 39.5559C80.7423 33.4224 77.0746 28.9026 69.735 28.9026C62.9182 28.9026 58.2049 32.7761 56.9453 39.5559H81.685ZM70.8876 57.8492C76.6506 57.8492 80.8452 55.4823 83.3603 53.0083L89.5473 59.6769C85.4556 63.8757 79.7996 67 70.9905 67C55.8956 67 46.1479 56.9889 46.1479 43.4294C46.1479 29.977 56.4225 19.8629 69.628 19.8629C84.62 19.8629 93.108 31.2695 92.3753 47.0889H56.9453C58.2049 53.6546 62.8153 57.8492 70.8876 57.8492Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M189.616 43.3664C189.616 35.3106 183.528 28.6996 175.254 28.6996C167.161 28.6996 160.888 35.1295 160.888 43.3664C160.888 51.6034 167.161 58.1238 175.254 58.1238C183.528 58.1238 189.616 51.5128 189.616 43.3664ZM151.256 43.457C151.256 28.9713 162.069 19.9193 173.978 19.9193C179.98 19.9193 185.706 22.5456 189.069 26.7114V0H198.705V66.0932H189.069V59.8444C185.615 64.2819 179.889 66.9946 173.888 66.9946C162.345 66.9946 151.256 57.8562 151.256 43.457Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M260.399 56.4937L269.122 51.9697C271.58 56.1314 275.581 58.5766 280.759 58.5766C286.213 58.5766 289.033 55.7733 289.033 52.6037C289.033 48.9812 283.764 48.1662 278.034 46.9889C270.304 45.3588 262.309 42.8231 262.309 33.5035C262.309 26.3451 269.122 19.7382 279.854 19.8288C288.305 19.8288 294.582 23.1795 298.126 28.6132L290.033 33.0466C287.942 29.8769 284.398 27.8846 279.854 27.8846C274.671 27.8846 272.037 30.4244 272.037 33.3183C272.037 36.5785 276.219 37.48 282.764 38.9289C290.215 40.5632 298.67 43.0042 298.67 52.4225C298.67 58.6671 293.22 67.0893 280.306 66.9947C270.855 66.9947 264.215 63.1952 260.399 56.4937Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M324.835 45.9935L317.203 54.321V66.0898H307.567V0.000793457H317.203V43.2767L337.654 20.8257H349.381L331.652 40.1976L349.838 66.0898H338.93L324.835 45.9935Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.138 19.9103C110.682 19.9103 101.09 27.3322 101.09 39.6444V66.0923H110.908V40.8711C110.908 33.4492 115.181 29.0034 122.446 29.0034C129.724 29.0034 133.363 33.4492 133.363 40.8711V66.0923H143.181V39.6444C143.181 27.3322 133.589 19.9103 122.138 19.9103Z" fill="white"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/zendesk-wordmark.svg

@@ -0,0 +1,9 @@
+<svg width="350" height="67" viewBox="0 0 350 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M243.435 39.5559C242.493 33.4224 238.825 28.9026 231.485 28.9026C224.668 28.9026 219.955 32.7761 218.696 39.5559H243.435ZM232.638 57.8492C238.401 57.8492 242.595 55.4823 245.111 53.0083L251.298 59.6769C247.206 63.8757 241.55 67 232.745 67C217.646 67 207.898 56.9889 207.898 43.4294C207.898 29.977 218.173 19.8629 231.378 19.8629C246.37 19.8629 254.858 31.2695 254.126 47.0889H218.696C219.955 53.6546 224.566 57.8492 232.638 57.8492Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 57.3581L27.2712 29.6587H0.638044V20.9649H39.9045V29.8357L12.6333 57.5392H40.2709V66.229H0V57.3581Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.685 39.5559C80.7423 33.4224 77.0746 28.9026 69.735 28.9026C62.9182 28.9026 58.2049 32.7761 56.9453 39.5559H81.685ZM70.8876 57.8492C76.6506 57.8492 80.8452 55.4823 83.3603 53.0083L89.5473 59.6769C85.4556 63.8757 79.7996 67 70.9905 67C55.8956 67 46.1479 56.9889 46.1479 43.4294C46.1479 29.977 56.4225 19.8629 69.628 19.8629C84.62 19.8629 93.108 31.2695 92.3753 47.0889H56.9453C58.2049 53.6546 62.8153 57.8492 70.8876 57.8492Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M189.616 43.3664C189.616 35.3106 183.528 28.6996 175.254 28.6996C167.161 28.6996 160.888 35.1295 160.888 43.3664C160.888 51.6034 167.161 58.1238 175.254 58.1238C183.528 58.1238 189.616 51.5128 189.616 43.3664ZM151.255 43.457C151.255 28.9713 162.069 19.9193 173.978 19.9193C179.98 19.9193 185.706 22.5456 189.069 26.7114V0H198.705V66.0932H189.069V59.8444C185.615 64.2819 179.889 66.9946 173.888 66.9946C162.345 66.9946 151.255 57.8562 151.255 43.457Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M260.399 56.4937L269.122 51.9697C271.58 56.1314 275.581 58.5766 280.759 58.5766C286.213 58.5766 289.033 55.7733 289.033 52.6037C289.033 48.9812 283.764 48.1662 278.034 46.9889C270.304 45.3588 262.309 42.8231 262.309 33.5035C262.309 26.3451 269.122 19.7382 279.854 19.8288C288.305 19.8288 294.582 23.1795 298.126 28.6132L290.033 33.0466C287.942 29.8769 284.398 27.8846 279.854 27.8846C274.671 27.8846 272.037 30.4244 272.037 33.3183C272.037 36.5785 276.219 37.48 282.764 38.9289C290.215 40.5632 298.67 43.0042 298.67 52.4225C298.67 58.6671 293.22 67.0893 280.306 66.9947C270.855 66.9947 264.215 63.1952 260.399 56.4937Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M324.835 45.9935L317.203 54.321V66.0898H307.567V0.000793457H317.203V43.2767L337.654 20.8257H349.381L331.652 40.1976L349.838 66.0898H338.93L324.835 45.9935Z" fill="#03363D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.138 19.9103C110.682 19.9103 101.09 27.3322 101.09 39.6444V66.0923H110.908V40.8711C110.908 33.4492 115.181 29.0034 122.446 29.0034C129.724 29.0034 133.363 33.4492 133.363 40.8711V66.0923H143.181V39.6444C143.181 27.3322 133.59 19.9103 122.138 19.9103Z" fill="#03363D"/>
+</svg>

package/__flow__/PartnerLogo/styles.js

@@ -0,0 +1,50 @@
+//@flow
+import styled, { css, type StyledComponent } from "styled-components";
+import { COMMON, FLEXBOX } from "../utils/system-props";
+import { verticalAlign } from "styled-system";
+import type { TypeTheme } from "../types/theme.flow";
+
+const sizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px",
+};
+
+const stylesForSize = (height, width, logoSize) => css`
+  line-height: ${logoSize ? logoSize : height};
+
+  &,
+  .logo-svg {
+    height: ${logoSize ? logoSize : height};
+    width: ${logoSize ? logoSize : ""};
+  }
+
+  /* IE 11 hack, do not remove */
+  /* stylelint-disable */
+  _:-ms-fullscreen &,
+  html & {
+    width: ${logoSize ? logoSize : width};
+  }
+
+  ${"" /* PDF hack, do not remove */}
+  .pdf-page & {
+    width: ${logoSize ? logoSize : width};
+  }
+`;
+
+const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({
+  className: "logo",
+})`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+  ${(props) => stylesForSize(props.height, props.width, sizes[props.logoSize])};
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${verticalAlign}
+`;
+
+export default Container;

package/__flow__/Popout/index.js

@@ -45,7 +45,7 @@ export type EnumPlacements =
   | "bottom-end"
   | "left-end";
 
-type TypeFocusLockProps = {|
+export type TypeFocusLockProps = {|
   disabled?: boolean,
   returnFocus?:
     | boolean
@@ -67,7 +67,7 @@ type TypeFocusLockProps = {|
   children?: React.Node,
 |};
 
-type TypeProps = {
+export type TypeProps = {
   /**
    * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
    */

package/__flow__/Popout/index.stories.js

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
-import Popout, { placements } from "./index";
+// @flow
+import React, { useState, type Node as ReactNode } from "react";
+import Popout, { placements, type TypeFocusLockProps } from "./index";
 import Box from "../Box";
 import Button from "../Button";
 import Input from "../Input";
@@ -9,7 +10,7 @@ import Modal from "../Modal";
 import Drawer from "../Drawer";
 import Loader from "../Loader";
 
-const Wrapper = ({ children }) => (
+const Wrapper = ({ children }: { children: ReactNode }) => (
   <Box
     width="100%"
     p={600}
@@ -33,7 +34,7 @@ const FullyControlled = ({
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
 
   const isOpenCallback = (isOpen, event) => {
-    event.stopPropagation && event.stopPropagation();
+    event && event.stopPropagation && event.stopPropagation();
     setIsOpen(isOpen);
   };
 
@@ -161,6 +162,8 @@ export const attachedToFormFullWidth = () => {
       >
         {({ show, hide, ref, ariaProps }) => (
           <Input
+            id="popout-input"
+            name="popout-input"
             ariaLabel="Descriptive label goes here"
             autoFocus={false}
             disabled={false}
@@ -187,6 +190,7 @@ export const withinAModal = () => {
       appElementSelector="#root"
       isOpen={true}
       label="Example Modal"
+      closeButtonLabel="Close this dialog"
       header={<Modal.Header>Header</Modal.Header>}
       footer={<Modal.Footer>footer</Modal.Footer>}
     >
@@ -222,7 +226,12 @@ withinAModal.story = {
 
 export const withinADrawer = () => {
   return (
-    <Drawer isOpen={true} onClose={() => {}} closeButtonLabel="Example Modal">
+    <Drawer
+      id="popout-drawer"
+      isOpen={true}
+      onClose={() => {}}
+      closeButtonLabel="Example Modal"
+    >
       <Box
         width="100%"
         display="flex"
@@ -268,7 +277,7 @@ export const bringFocusWithin = () => (
         content={
           <Popout.Content>
             <Box mb={350}>the input should be focused</Box>
-            <Input autoFocus />
+            <Input id="popout" name="popout" autoFocus />
           </Popout.Content>
         }
         placement={select("placement", placements)}
@@ -351,8 +360,12 @@ export const WithDynamicContent = () => {
               )}
             </Popout.Content>
           }
-          onOpen={() => setTimeout(() => setLoading(false), 1000)}
-          onClose={() => setTimeout(() => setLoading(true), 200)}
+          onOpen={() => {
+            setTimeout(() => setLoading(false), 1000);
+          }}
+          onClose={() => {
+            setTimeout(() => setLoading(true), 200);
+          }}
         >
           <Button appearance="primary">show popout</Button>
         </Popout>
@@ -394,11 +407,13 @@ MemoryLeakTest.story = {
 
 export const FocusLockProps = ({
   focusLockProps = knobsObject("focusLockProps", { returnFocus: false }),
+}: {
+  focusLockProps?: TypeFocusLockProps,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const isOpenCallback = (isOpen, event) => {
-    event.stopPropagation && event.stopPropagation();
+    event && event.stopPropagation && event.stopPropagation();
     setIsOpen(isOpen);
   };
 

package/__flow__/Popout/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Component from "@reach/component-component";
 import { render, wait, fireEvent } from "../utils/react-testing-library";
@@ -8,7 +9,7 @@ import Button from "../Button";
 jest.mock("../Portal", () => ({ children }) => <div>{children}</div>);
 
 if (global.document) {
-  document.createRange = () => ({
+  (global: any).document.createRange = () => ({
     setStart: () => {},
     setEnd: () => {},
     commonAncestorContainer: {

package/__flow__/Radio/index.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import Container, { Input, InputWrapper, LabelText } from "./styles";
 
-type TypeProps = {
+export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,

package/__flow__/Radio/index.stories.js

@@ -1,24 +1,25 @@
+// @flow
 import React from "react";
-import Radio from "./";
+import Radio, { type TypeProps } from "./";
 
 export default {
   title: "Radio",
   component: Radio,
 };
 
-export const Unchecked = (args) => <Radio {...args} />;
+export const Unchecked = (args: TypeProps) => <Radio {...args} />;
 
 Unchecked.args = {
   checked: false,
 };
 
-export const Checked = (args) => <Radio {...args} />;
+export const Checked = (args: TypeProps) => <Radio {...args} />;
 
 Checked.args = {
   checked: true,
 };
 
-export const DisabledUnchecked = (args) => <Radio {...args} />;
+export const DisabledUnchecked = (args: TypeProps) => <Radio {...args} />;
 
 DisabledUnchecked.args = {
   disabled: true,
@@ -28,7 +29,7 @@ DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const DisabledChecked = (args) => <Radio {...args} />;
+export const DisabledChecked = (args: TypeProps) => <Radio {...args} />;
 
 DisabledChecked.args = {
   checked: true,
@@ -39,7 +40,7 @@ DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const LabelledChecked = (args) => <Radio {...args} />;
+export const LabelledChecked = (args: TypeProps) => <Radio {...args} />;
 
 LabelledChecked.args = {
   checked: true,
@@ -50,7 +51,7 @@ LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = (args) => <Radio {...args} />;
+export const LabelledUnchecked = (args: TypeProps) => <Radio {...args} />;
 
 LabelledUnchecked.args = {
   checked: false,
@@ -61,7 +62,7 @@ LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = (args) => <Radio {...args} />;
+export const LabelledDisabled = (args: TypeProps) => <Radio {...args} />;
 
 LabelledDisabled.args = {
   checked: false,

package/__flow__/Radio/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Radio from "./";

package/__flow__/SegmentedControl/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { useState } from "react";
 import SegmentedControl from "./index";
 import Box from "../Box";

package/__flow__/SegmentedControl/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { useState } from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/Select/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, text } from "@storybook/addon-knobs";
 
@@ -16,26 +17,40 @@ export default {
   title: "Select",
 };
 
-export const defaultStory = () => <Select>{options}</Select>;
+export const defaultStory = () => (
+  <Select id="default" name="default">
+    {options}
+  </Select>
+);
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const small = () => <Select size="small">{options}</Select>;
+export const small = () => (
+  <Select id="small" name="small" size="small">
+    {options}
+  </Select>
+);
 
 small.story = {
   name: "Small",
 };
 
-export const large = () => <Select size="large">{options}</Select>;
+export const large = () => (
+  <Select id="large" name="large" size="large">
+    {options}
+  </Select>
+);
 
 large.story = {
   name: "Large",
 };
 
 export const disabled = () => (
-  <Select disabled={boolean("disabled", true)}>{options}</Select>
+  <Select id="disabled" name="disabled" disabled={boolean("disabled", true)}>
+    {options}
+  </Select>
 );
 
 disabled.story = {
@@ -43,7 +58,9 @@ disabled.story = {
 };
 
 export const required = () => (
-  <Select required={boolean("required", true)}>{options}</Select>
+  <Select id="required" name="required" required={boolean("required", true)}>
+    {options}
+  </Select>
 );
 
 required.story = {
@@ -51,7 +68,9 @@ required.story = {
 };
 
 export const invalid = () => (
-  <Select isInvalid={boolean("isInvalid", true)}>{options}</Select>
+  <Select id="invalid" name="invalid" isInvalid={boolean("isInvalid", true)}>
+    {options}
+  </Select>
 );
 
 invalid.story = {

package/__flow__/Select/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Select from "./";

package/__flow__/Skeleton/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Skeleton from "./index";
 import Box from "../Box";

package/__flow__/SpotIllustration/index.js

@@ -15,7 +15,7 @@ const StyledSVG: StyledComponent<{ customFill?: string }, TypeTheme, *> = styled
   color: ${(p) => p.theme.colors.illustration.stroke};
 `;
 
-type TypeProps = {
+export type TypeProps = {
   name: EnumIllustrationNames,
   customFill?: "red" | "green" | "yellow" | "magenta" | "purple" | "aqua",
   height?: string,

package/__flow__/SpotIllustration/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import SpotIllustration from "./index.js";
+import SpotIllustration, { type TypeProps } from "./index.js";
 import EmptyState from "../EmptyState";
 import Box from "../Box";
 import Button from "../Button";
@@ -23,7 +24,7 @@ export default {
   },
 };
 
-export const sample = (args) => (
+export const sample = (args: TypeProps) => (
   <Box width={1 / 2}>
     <SpotIllustration {...args} />
   </Box>
@@ -33,7 +34,7 @@ sample.story = {
   name: "Spot illustration",
 };
 
-export const smallSpots = (args) => (
+export const smallSpots = (args: TypeProps) => (
   <Box
     display="flex"
     flexDirection="column"
@@ -94,7 +95,7 @@ smallSpots.story = {
   name: "Small spot illustrations",
 };
 
-export const emptyStateExample = (args) => (
+export const emptyStateExample = (args: TypeProps) => (
   <EmptyState
     media={
       <Box display="flex" alignItems="center" justifyContent="center">
@@ -116,7 +117,7 @@ emptyStateExample.args = {
   name: "conversation",
 };
 
-export const overrideSize = (args) => (
+export const overrideSize = (args: TypeProps) => (
   <Box width={1 / 2}>
     <SpotIllustration {...args} />
   </Box>

package/__flow__/Stack/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Stack from "./index";
 import Text from "../Text";