From eb56adfb7957e2221988ef38437c29443c079660 Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Fri, 14 Oct 2022 16:04:21 +0530
Subject: [PATCH] fix: update snapshots

---
 example/tests/storybook.test.js.snap.android | 1236 +++++++++---------
 example/tests/storybook.test.js.snap.ios     | 1084 +++++++--------
 example/tests/storybook.test.js.snap.node    |  450 ++++---
 example/tests/storybook.test.js.snap.web     |  450 ++++---
 4 files changed, 1700 insertions(+), 1520 deletions(-)

diff --git a/example/tests/storybook.test.js.snap.android b/example/tests/storybook.test.js.snap.android
index 435719a14..bd0a57447 100644
--- a/example/tests/storybook.test.js.snap.android
+++ b/example/tests/storybook.test.js.snap.android
@@ -203,12 +203,11 @@ exports[`Storyshots Actionsheet Composition 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -911,12 +910,11 @@ exports[`Storyshots Actionsheet Custom Backdrop 1`] = `
       animationType="slide"
       hardwareAccelerated={false}
       onRequestClose={[Function]}
+      statusBarTranslucent={true}
       transparent={true}
       visible={false}
     >
       <View
-        entryDuration={200}
-        exitDuration={150}
         pointerEvents="none"
         style={
           Object {
@@ -1687,12 +1685,11 @@ exports[`Storyshots Actionsheet DisableOverlay 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -2435,12 +2432,11 @@ exports[`Storyshots Actionsheet Icon 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -3320,12 +3316,11 @@ exports[`Storyshots Actionsheet Usage 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -4209,8 +4204,8 @@ exports[`Storyshots Alert Basic 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -4226,13 +4221,13 @@ exports[`Storyshots Alert Basic 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -4625,8 +4620,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -4642,13 +4637,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -4911,8 +4906,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -4928,13 +4923,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -5197,8 +5192,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -5214,13 +5209,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -5621,8 +5616,8 @@ exports[`Storyshots Alert Composition 1`] = `
                 <RNSVGSvgView
                   accessibilityRole="image"
                   align="xMidYMid"
-                  bbHeight={20}
-                  bbWidth={20}
+                  bbHeight={12}
+                  bbWidth={12}
                   color={-11840157}
                   dataSet={Object {}}
                   focusable={false}
@@ -5638,13 +5633,13 @@ exports[`Storyshots Alert Composition 1`] = `
                       },
                       Object {
                         "color": "#4b5563",
-                        "height": 20,
-                        "width": 20,
+                        "height": 12,
+                        "width": 12,
                       },
                       Object {
                         "flex": 0,
-                        "height": 20,
-                        "width": 20,
+                        "height": 12,
+                        "width": 12,
                       },
                     ]
                   }
@@ -6197,8 +6192,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -6214,13 +6209,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -6462,8 +6457,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -6479,13 +6474,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -6712,8 +6707,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -6729,13 +6724,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -6962,8 +6957,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -6979,13 +6974,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -7343,8 +7338,8 @@ exports[`Storyshots Alert Usage 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={-11840157}
                 dataSet={Object {}}
                 focusable={false}
@@ -7360,13 +7355,13 @@ exports[`Storyshots Alert Usage 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -9158,8 +9153,8 @@ exports[`Storyshots Alert action 1`] = `
                   <RNSVGSvgView
                     accessibilityRole="image"
                     align="xMidYMid"
-                    bbHeight={20}
-                    bbWidth={20}
+                    bbHeight={12}
+                    bbWidth={12}
                     color={-11840157}
                     dataSet={Object {}}
                     focusable={false}
@@ -9175,13 +9170,13 @@ exports[`Storyshots Alert action 1`] = `
                         },
                         Object {
                           "color": "#4b5563",
-                          "height": 20,
-                          "width": 20,
+                          "height": 12,
+                          "width": 12,
                         },
                         Object {
                           "flex": 0,
-                          "height": 20,
-                          "width": 20,
+                          "height": 12,
+                          "width": 12,
                         },
                       ]
                     }
@@ -15346,7 +15341,7 @@ exports[`Storyshots Breadcrumb Basic 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -15731,7 +15726,7 @@ exports[`Storyshots Breadcrumb Collapsible 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -16314,7 +16309,7 @@ exports[`Storyshots Breadcrumb ComponentSeparator 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -16696,7 +16691,7 @@ exports[`Storyshots Breadcrumb Composition 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -17161,7 +17156,7 @@ exports[`Storyshots Breadcrumb Separators 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -29494,16 +29489,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
         >
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-69-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-69-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2-label"
+            labelId="field-69-label"
+            nativeID="field-69-label"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -29631,16 +29626,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -29826,16 +29821,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -30021,16 +30016,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -30165,16 +30160,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -30256,16 +30251,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           </View>
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-69-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-69-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-69-label"
+            nativeID="field-69"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -30278,7 +30273,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
               dataSet={Object {}}
               style={
                 Object {
-                  "alignItems": "center",
+                  "alignItems": "flex-start",
                   "flexDirection": "row",
                 }
               }
@@ -30305,6 +30300,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                       "color": "#dc2626",
                       "fontSize": 12,
                       "height": 12,
+                      "marginTop": 4,
                       "width": 12,
                     },
                     Object {
@@ -32542,7 +32538,7 @@ exports[`Storyshots Container Playground 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -32725,7 +32721,7 @@ exports[`Storyshots Container Usage 1`] = `
               "backgroundColor": undefined,
               "color": "#171717",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -32995,7 +32991,7 @@ exports[`Storyshots Divider Basic 1`] = `
               "color": "#171717",
               "flexDirection": "row",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -33031,7 +33027,7 @@ exports[`Storyshots Divider Basic 1`] = `
               "color": "#171717",
               "flexDirection": "row",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -33429,7 +33425,7 @@ exports[`Storyshots Divider Orientation 1`] = `
               "backgroundColor": undefined,
               "color": "#171717",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -33476,7 +33472,7 @@ exports[`Storyshots Divider Orientation 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -33510,7 +33506,7 @@ exports[`Storyshots Divider Orientation 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -33684,7 +33680,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
               "backgroundColor": undefined,
               "color": "#1f2937",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "600",
               "letterSpacing": 0,
@@ -33732,16 +33728,16 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-270-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-270-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-270-label"
+              nativeID="field-270-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -33793,7 +33789,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-270-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -33802,7 +33798,6 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -33842,16 +33837,16 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-3-feedback"
+              feedbackId="field-271-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-3-helptext"
+              helpTextId="field-271-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-3-label"
-              nativeID="field-react-aria-0-3-label"
+              labelId="field-271-label"
+              nativeID="field-271-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -33903,7 +33898,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-3"
+                nativeID="field-271-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -33912,7 +33907,6 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -34300,7 +34294,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
               "backgroundColor": undefined,
               "color": "#1f2937",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "600",
               "letterSpacing": 0,
@@ -34348,16 +34342,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-273-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-273-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-273-label"
+              nativeID="field-273-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -34409,7 +34403,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-273-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -34418,7 +34412,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -34458,16 +34451,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-3-feedback"
+              feedbackId="field-274-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-3-helptext"
+              helpTextId="field-274-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-3-label"
-              nativeID="field-react-aria-0-3-label"
+              labelId="field-274-label"
+              nativeID="field-274-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -34519,7 +34512,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-3"
+                nativeID="field-274-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -34528,7 +34521,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -34568,16 +34560,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-4-feedback"
+              feedbackId="field-275-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-4-helptext"
+              helpTextId="field-275-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-4-label"
-              nativeID="field-react-aria-0-4-label"
+              labelId="field-275-label"
+              nativeID="field-275-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -34629,7 +34621,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-4"
+                nativeID="field-275-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -34638,7 +34630,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -34936,6 +34927,7 @@ exports[`Storyshots Examples Todo App 1`] = `
                 allowFontScaling={true}
                 dataSet={Object {}}
                 editable={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
@@ -34944,7 +34936,6 @@ exports[`Storyshots Examples Todo App 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -35015,11 +35006,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                       "fontSize": 12,
                     },
                     Object {
-                      "color": "#fafafa",
-                      "fontSize": 20,
-                      "height": 20,
-                      "lineHeight": 20,
-                      "width": 20,
+                      "color": "#fafaf9",
+                      "fontSize": 16,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "width": 16,
                     },
                     Object {
                       "fontFamily": "feather",
@@ -35268,11 +35259,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -35466,11 +35457,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -35664,11 +35655,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -35862,11 +35853,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -38677,16 +38668,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-2-feedback"
+                feedbackId="field-87-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-2-helptext"
+                helpTextId="field-87-helptext"
                 isDisabled={false}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-2-label"
-                nativeID="field-react-aria-0-2-label"
+                labelId="field-87-label"
+                nativeID="field-87-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -38738,7 +38729,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   disabled={false}
                   editable={true}
                   isRequired={false}
-                  nativeID="field-react-aria-0-2"
+                  nativeID="field-87-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
@@ -38747,7 +38738,6 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -38770,16 +38760,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-2-feedback"
+                feedbackId="field-87-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-2-helptext"
+                helpTextId="field-87-helptext"
                 isDisabled={false}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-2-label"
-                nativeID="field-react-aria-0-2-feedback"
+                labelId="field-87-label"
+                nativeID="field-87-feedback"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -38864,16 +38854,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-3-feedback"
+                feedbackId="field-88-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-3-helptext"
+                helpTextId="field-88-helptext"
                 isDisabled={true}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-3-label"
-                nativeID="field-react-aria-0-3-label"
+                labelId="field-88-label"
+                nativeID="field-88-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -38926,17 +38916,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   disabled={true}
                   editable={false}
                   isRequired={false}
-                  nativeID="field-react-aria-0-3"
+                  nativeID="field-88-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   placeholder="Title"
-                  placeholderTextColor="#404040"
+                  placeholderTextColor="#a3a3a3"
                   readOnly={false}
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -38959,16 +38948,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-3-feedback"
+                feedbackId="field-88-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-3-helptext"
+                helpTextId="field-88-helptext"
                 isDisabled={true}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-3-label"
-                nativeID="field-react-aria-0-3-feedback"
+                labelId="field-88-label"
+                nativeID="field-88-feedback"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -39052,16 +39041,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-4-feedback"
+                feedbackId="field-89-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-4-helptext"
+                helpTextId="field-89-helptext"
                 isDisabled={false}
                 isInvalid={true}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-4-label"
-                nativeID="field-react-aria-0-4-label"
+                labelId="field-89-label"
+                nativeID="field-89-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -39096,21 +39085,14 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                 dataSet={Object {}}
                 isFocused={false}
                 style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "borderColor": "#dc2626",
-                      "borderRadius": 4,
-                      "borderWidth": 1,
-                      "flexDirection": "row",
-                      "overflow": "hidden",
-                    },
-                    Object {
-                      "outlineColor": "#dc2626",
-                      "outlineStyle": "solid",
-                      "outlineWidth": "1px",
-                    },
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "borderColor": "#d4d4d4",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flexDirection": "row",
+                    "overflow": "hidden",
+                  }
                 }
               >
                 <TextInput
@@ -39122,7 +39104,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   editable={true}
                   isInvalid={true}
                   isRequired={false}
-                  nativeID="field-react-aria-0-4"
+                  nativeID="field-89-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
@@ -39132,7 +39114,6 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -39155,16 +39136,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-4-feedback"
+                feedbackId="field-89-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-4-helptext"
+                helpTextId="field-89-helptext"
                 isDisabled={false}
                 isInvalid={true}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-4-label"
-                nativeID="field-react-aria-0-4"
+                labelId="field-89-label"
+                nativeID="field-89"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -39432,16 +39413,16 @@ exports[`Storyshots FormControl Playground 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-83-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-83-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-83-label"
+          nativeID="field-83-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -39516,7 +39497,7 @@ exports[`Storyshots FormControl Playground 1`] = `
             disabled={false}
             editable={true}
             isRequired={true}
-            nativeID="field-react-aria-0-2"
+            nativeID="field-83-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -39526,7 +39507,6 @@ exports[`Storyshots FormControl Playground 1`] = `
             rejectResponderTermination={true}
             required={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -39553,16 +39533,16 @@ exports[`Storyshots FormControl Playground 1`] = `
         />
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-83-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-83-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-feedback"
+          labelId="field-83-label"
+          nativeID="field-83-feedback"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -39760,16 +39740,16 @@ exports[`Storyshots FormControl Usage 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-85-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-85-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={true}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-85-label"
+              nativeID="field-85-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -39845,7 +39825,7 @@ exports[`Storyshots FormControl Usage 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={true}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-85-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -39855,7 +39835,6 @@ exports[`Storyshots FormControl Usage 1`] = `
                 rejectResponderTermination={true}
                 required={true}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -39882,16 +39861,16 @@ exports[`Storyshots FormControl Usage 1`] = `
             />
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-85-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-85-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={true}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-feedback"
+              labelId="field-85-label"
+              nativeID="field-85-feedback"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -40280,7 +40259,7 @@ exports[`Storyshots Heading Basic 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -40429,7 +40408,7 @@ exports[`Storyshots Heading Composition 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 30,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -40825,7 +40804,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -40851,7 +40830,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 30,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -40877,7 +40856,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 36,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -40903,7 +40882,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 48,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 2.4000000000000004,
@@ -40929,7 +40908,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 60,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 3,
@@ -41076,7 +41055,7 @@ exports[`Storyshots Heading Truncate 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -42615,7 +42594,7 @@ exports[`Storyshots Icon All Icons 1`] = `
                           stroke={null}
                         >
                           <RNSVGPath
-                            d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+                            d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
                             propList={
                               Array [
                                 "stroke",
@@ -47006,7 +46985,7 @@ exports[`Storyshots Icon Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -47591,9 +47570,9 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
         <RNSVGSvgView
           accessibilityRole="image"
           align="xMidYMid"
-          bbHeight={20}
-          bbWidth={20}
-          color={-328966}
+          bbHeight={40}
+          bbWidth={40}
+          color={-16612153}
           dataSet={Object {}}
           focusable={false}
           meetOrSlice={0}
@@ -47608,18 +47587,18 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
                 "borderWidth": 0,
               },
               Object {
-                "color": "#fafafa",
-                "height": 20,
-                "width": 20,
+                "color": "#0284c7",
+                "height": 40,
+                "width": 40,
               },
               Object {
                 "flex": 0,
-                "height": 20,
-                "width": 20,
+                "height": 40,
+                "width": 40,
               },
             ]
           }
-          tintColor={-328966}
+          tintColor={-16612153}
           vbHeight={100}
           vbWidth={100}
         >
@@ -49162,7 +49141,7 @@ exports[`Storyshots Image Sizes 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -49731,6 +49710,7 @@ exports[`Storyshots Input Addons 1`] = `
             allowFontScaling={true}
             dataSet={Object {}}
             editable={true}
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -49738,7 +49718,6 @@ exports[`Storyshots Input Addons 1`] = `
             placeholderTextColor="#a3a3a3"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -50001,6 +49980,7 @@ exports[`Storyshots Input Elements 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -50008,7 +49988,6 @@ exports[`Storyshots Input Elements 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -50057,6 +50036,7 @@ exports[`Storyshots Input Elements 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -50064,7 +50044,6 @@ exports[`Storyshots Input Elements 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={true}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -50088,35 +50067,52 @@ exports[`Storyshots Input Elements 1`] = `
           dataSet={Object {}}
           style={Object {}}
         />
-        <Text
-          allowFontScaling={false}
+        <View
+          accessible={true}
           dataSet={Object {}}
-          onPress={[Function]}
-          style={
-            Array [
-              Object {
-                "color": undefined,
-                "fontSize": 12,
-              },
-              Object {
-                "color": "#a3a3a3",
-                "fontSize": 20,
-                "height": 20,
-                "lineHeight": 20,
-                "marginRight": 8,
-                "width": 20,
-              },
-              Object {
-                "fontFamily": "material",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onHoverIn={[Function]}
+          onHoverOut={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={Object {}}
         >
-          
-        </Text>
+          <Text
+            allowFontScaling={false}
+            dataSet={Object {}}
+            style={
+              Array [
+                Object {
+                  "color": undefined,
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#a3a3a3",
+                  "fontSize": 20,
+                  "height": 20,
+                  "lineHeight": 20,
+                  "marginRight": 8,
+                  "width": 20,
+                },
+                Object {
+                  "fontFamily": "material",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
       </View>
     </View>
   </View>
@@ -50266,16 +50262,16 @@ exports[`Storyshots Input Form Controlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-125-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-125-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-125-label"
+          nativeID="field-125-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -50310,21 +50306,14 @@ exports[`Storyshots Input Form Controlled 1`] = `
           dataSet={Object {}}
           isFocused={false}
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "borderColor": "#dc2626",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "flexDirection": "row",
-                "overflow": "hidden",
-              },
-              Object {
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
-              },
-            ]
+            Object {
+              "alignItems": "center",
+              "borderColor": "#d4d4d4",
+              "borderRadius": 4,
+              "borderWidth": 1,
+              "flexDirection": "row",
+              "overflow": "hidden",
+            }
           }
         >
           <TextInput
@@ -50336,7 +50325,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
             editable={true}
             isInvalid={true}
             isRequired={false}
-            nativeID="field-react-aria-0-2"
+            nativeID="field-125-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -50346,7 +50335,6 @@ exports[`Storyshots Input Form Controlled 1`] = `
             rejectResponderTermination={true}
             required={false}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -50369,16 +50357,16 @@ exports[`Storyshots Input Form Controlled 1`] = `
         </View>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-125-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-125-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-125-label"
+          nativeID="field-125"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -50648,6 +50636,7 @@ exports[`Storyshots Input Password 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -50655,7 +50644,6 @@ exports[`Storyshots Input Password 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={true}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -50906,6 +50894,7 @@ exports[`Storyshots Input Primary 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -50913,7 +50902,6 @@ exports[`Storyshots Input Primary 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51092,6 +51080,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51099,7 +51088,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51147,6 +51135,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51154,7 +51143,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51202,6 +51190,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51209,7 +51198,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51257,6 +51245,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51264,7 +51253,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51312,6 +51300,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51319,7 +51308,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51367,6 +51355,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51374,7 +51363,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51551,6 +51539,7 @@ exports[`Storyshots Input Value Controlled 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -51559,7 +51548,6 @@ exports[`Storyshots Input Value Controlled 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51739,6 +51727,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51746,7 +51735,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51795,6 +51783,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51802,7 +51791,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51851,6 +51839,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51858,7 +51847,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51906,6 +51894,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51913,7 +51902,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -51961,6 +51949,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -51968,7 +51957,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -52154,7 +52142,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -52213,6 +52201,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -52220,7 +52209,6 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -56788,7 +56776,7 @@ exports[`Storyshots Menu Basic 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="139"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -57007,7 +56995,7 @@ exports[`Storyshots Menu Group 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="141"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -57228,7 +57216,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
         colorScheme="primary"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="145"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -57333,8 +57321,6 @@ exports[`Storyshots Menu Menu positions 1`] = `
               "borderRadius": 4,
               "borderWidth": 1,
               "flexDirection": "row",
-              "marginLeft": 0,
-              "marginRight": 0,
               "overflow": "hidden",
             }
           }
@@ -57347,6 +57333,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
             editable={false}
             focusable={false}
             importantForAccessibility="no"
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -57354,7 +57341,11 @@ exports[`Storyshots Menu Menu positions 1`] = `
             pointerEvents="none"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
+            selection={
+              Object {
+                "start": 0,
+              }
+            }
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -57382,8 +57373,8 @@ exports[`Storyshots Menu Menu positions 1`] = `
           <RNSVGSvgView
             accessibilityRole="image"
             align="xMidYMid"
-            bbHeight={16}
-            bbWidth={16}
+            bbHeight={24}
+            bbWidth={24}
             color={-9211021}
             dataSet={Object {}}
             focusable={false}
@@ -57399,14 +57390,18 @@ exports[`Storyshots Menu Menu positions 1`] = `
                 },
                 Object {
                   "color": "#737373",
-                  "height": 16,
+                  "height": 24,
                   "marginRight": 12,
-                  "width": 16,
+                  "paddingBottom": 4,
+                  "paddingLeft": 4,
+                  "paddingRight": 4,
+                  "paddingTop": 4,
+                  "width": 24,
                 },
                 Object {
                   "flex": 0,
-                  "height": 16,
-                  "width": 16,
+                  "height": 24,
+                  "width": 24,
                 },
               ]
             }
@@ -57447,12 +57442,11 @@ exports[`Storyshots Menu Menu positions 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -58724,7 +58718,7 @@ exports[`Storyshots Menu MenuOptionsGroup 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="143"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -59009,12 +59003,11 @@ exports[`Storyshots Modal Basic 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -59077,8 +59070,6 @@ exports[`Storyshots Modal Basic 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
@@ -59309,16 +59300,16 @@ exports[`Storyshots Modal Basic 1`] = `
                     >
                       <View
                         dataSet={Object {}}
-                        feedbackId="field-react-aria-0-2-feedback"
+                        feedbackId="field-147-feedback"
                         hasFeedbackText={false}
                         hasHelpText={false}
-                        helpTextId="field-react-aria-0-2-helptext"
+                        helpTextId="field-147-helptext"
                         isDisabled={false}
                         isInvalid={false}
                         isReadOnly={false}
                         isRequired={false}
-                        labelId="field-react-aria-0-2-label"
-                        nativeID="field-react-aria-0-2-label"
+                        labelId="field-147-label"
+                        nativeID="field-147-label"
                         setHasFeedbackText={[Function]}
                         setHasHelpText={[Function]}
                         style={
@@ -59370,7 +59361,7 @@ exports[`Storyshots Modal Basic 1`] = `
                           disabled={false}
                           editable={true}
                           isRequired={false}
-                          nativeID="field-react-aria-0-2"
+                          nativeID="field-147-input"
                           onBlur={[Function]}
                           onFocus={[Function]}
                           onKeyPress={[Function]}
@@ -59379,7 +59370,6 @@ exports[`Storyshots Modal Basic 1`] = `
                           rejectResponderTermination={true}
                           required={false}
                           secureTextEntry={false}
-                          selectionColor="#1f2937"
                           style={
                             Object {
                               "backgroundColor": "transparent",
@@ -59412,16 +59402,16 @@ exports[`Storyshots Modal Basic 1`] = `
                     >
                       <View
                         dataSet={Object {}}
-                        feedbackId="field-react-aria-0-3-feedback"
+                        feedbackId="field-148-feedback"
                         hasFeedbackText={false}
                         hasHelpText={false}
-                        helpTextId="field-react-aria-0-3-helptext"
+                        helpTextId="field-148-helptext"
                         isDisabled={false}
                         isInvalid={false}
                         isReadOnly={false}
                         isRequired={false}
-                        labelId="field-react-aria-0-3-label"
-                        nativeID="field-react-aria-0-3-label"
+                        labelId="field-148-label"
+                        nativeID="field-148-label"
                         setHasFeedbackText={[Function]}
                         setHasHelpText={[Function]}
                         style={
@@ -59473,7 +59463,7 @@ exports[`Storyshots Modal Basic 1`] = `
                           disabled={false}
                           editable={true}
                           isRequired={false}
-                          nativeID="field-react-aria-0-3"
+                          nativeID="field-148-input"
                           onBlur={[Function]}
                           onFocus={[Function]}
                           onKeyPress={[Function]}
@@ -59482,7 +59472,6 @@ exports[`Storyshots Modal Basic 1`] = `
                           rejectResponderTermination={true}
                           required={false}
                           secureTextEntry={false}
-                          selectionColor="#1f2937"
                           style={
                             Object {
                               "backgroundColor": "transparent",
@@ -59885,12 +59874,11 @@ exports[`Storyshots Modal Modal Custom Backdrop 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -59953,8 +59941,6 @@ exports[`Storyshots Modal Modal Custom Backdrop 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
@@ -60869,12 +60855,11 @@ exports[`Storyshots Modal Modal Placement 1`] = `
       animationType="fade"
       hardwareAccelerated={false}
       onRequestClose={[Function]}
+      statusBarTranslucent={true}
       transparent={true}
       visible={false}
     >
       <View
-        entryDuration={200}
-        exitDuration={150}
         pointerEvents="none"
         style={
           Object {
@@ -60937,8 +60922,6 @@ exports[`Storyshots Modal Modal Placement 1`] = `
         />
       </View>
       <View
-        entryDuration={200}
-        exitDuration={100}
         pointerEvents="none"
         style={
           Object {
@@ -61169,16 +61152,16 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                   >
                     <View
                       dataSet={Object {}}
-                      feedbackId="field-react-aria-0-2-feedback"
+                      feedbackId="field-154-feedback"
                       hasFeedbackText={false}
                       hasHelpText={false}
-                      helpTextId="field-react-aria-0-2-helptext"
+                      helpTextId="field-154-helptext"
                       isDisabled={false}
                       isInvalid={false}
                       isReadOnly={false}
                       isRequired={false}
-                      labelId="field-react-aria-0-2-label"
-                      nativeID="field-react-aria-0-2-label"
+                      labelId="field-154-label"
+                      nativeID="field-154-label"
                       setHasFeedbackText={[Function]}
                       setHasHelpText={[Function]}
                       style={
@@ -61230,7 +61213,7 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                         disabled={false}
                         editable={true}
                         isRequired={false}
-                        nativeID="field-react-aria-0-2"
+                        nativeID="field-154-input"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onKeyPress={[Function]}
@@ -61239,7 +61222,6 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                         rejectResponderTermination={true}
                         required={false}
                         secureTextEntry={false}
-                        selectionColor="#1f2937"
                         style={
                           Object {
                             "backgroundColor": "transparent",
@@ -61272,16 +61254,16 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                   >
                     <View
                       dataSet={Object {}}
-                      feedbackId="field-react-aria-0-3-feedback"
+                      feedbackId="field-155-feedback"
                       hasFeedbackText={false}
                       hasHelpText={false}
-                      helpTextId="field-react-aria-0-3-helptext"
+                      helpTextId="field-155-helptext"
                       isDisabled={false}
                       isInvalid={false}
                       isReadOnly={false}
                       isRequired={false}
-                      labelId="field-react-aria-0-3-label"
-                      nativeID="field-react-aria-0-3-label"
+                      labelId="field-155-label"
+                      nativeID="field-155-label"
                       setHasFeedbackText={[Function]}
                       setHasHelpText={[Function]}
                       style={
@@ -61333,7 +61315,7 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                         disabled={false}
                         editable={true}
                         isRequired={false}
-                        nativeID="field-react-aria-0-3"
+                        nativeID="field-155-input"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onKeyPress={[Function]}
@@ -61342,7 +61324,6 @@ exports[`Storyshots Modal Modal Placement 1`] = `
                         rejectResponderTermination={true}
                         required={false}
                         secureTextEntry={false}
-                        selectionColor="#1f2937"
                         style={
                           Object {
                             "backgroundColor": "transparent",
@@ -61668,12 +61649,11 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
       animationType="fade"
       hardwareAccelerated={false}
       onRequestClose={[Function]}
+      statusBarTranslucent={true}
       transparent={true}
       visible={false}
     >
       <View
-        entryDuration={200}
-        exitDuration={150}
         pointerEvents="none"
         style={
           Object {
@@ -61736,8 +61716,6 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
         />
       </View>
       <View
-        entryDuration={200}
-        exitDuration={100}
         pointerEvents="none"
         style={
           Object {
@@ -61968,16 +61946,16 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                   >
                     <View
                       dataSet={Object {}}
-                      feedbackId="field-react-aria-0-2-feedback"
+                      feedbackId="field-151-feedback"
                       hasFeedbackText={false}
                       hasHelpText={false}
-                      helpTextId="field-react-aria-0-2-helptext"
+                      helpTextId="field-151-helptext"
                       isDisabled={false}
                       isInvalid={false}
                       isReadOnly={false}
                       isRequired={false}
-                      labelId="field-react-aria-0-2-label"
-                      nativeID="field-react-aria-0-2-label"
+                      labelId="field-151-label"
+                      nativeID="field-151-label"
                       setHasFeedbackText={[Function]}
                       setHasHelpText={[Function]}
                       style={
@@ -62029,7 +62007,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                         disabled={false}
                         editable={true}
                         isRequired={false}
-                        nativeID="field-react-aria-0-2"
+                        nativeID="field-151-input"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onKeyPress={[Function]}
@@ -62038,7 +62016,6 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                         rejectResponderTermination={true}
                         required={false}
                         secureTextEntry={false}
-                        selectionColor="#1f2937"
                         style={
                           Object {
                             "backgroundColor": "transparent",
@@ -62071,16 +62048,16 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                   >
                     <View
                       dataSet={Object {}}
-                      feedbackId="field-react-aria-0-3-feedback"
+                      feedbackId="field-152-feedback"
                       hasFeedbackText={false}
                       hasHelpText={false}
-                      helpTextId="field-react-aria-0-3-helptext"
+                      helpTextId="field-152-helptext"
                       isDisabled={false}
                       isInvalid={false}
                       isReadOnly={false}
                       isRequired={false}
-                      labelId="field-react-aria-0-3-label"
-                      nativeID="field-react-aria-0-3-label"
+                      labelId="field-152-label"
+                      nativeID="field-152-label"
                       setHasFeedbackText={[Function]}
                       setHasHelpText={[Function]}
                       style={
@@ -62132,7 +62109,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                         disabled={false}
                         editable={true}
                         isRequired={false}
-                        nativeID="field-react-aria-0-3"
+                        nativeID="field-152-input"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onKeyPress={[Function]}
@@ -62141,7 +62118,6 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
                         rejectResponderTermination={true}
                         required={false}
                         secureTextEntry={false}
-                        selectionColor="#1f2937"
                         style={
                           Object {
                             "backgroundColor": "transparent",
@@ -62440,6 +62416,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -62447,7 +62424,6 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           placeholderTextColor="#334155"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -62600,12 +62576,11 @@ exports[`Storyshots Modal Modal Size Examples 1`] = `
       animationType="fade"
       hardwareAccelerated={false}
       onRequestClose={[Function]}
+      statusBarTranslucent={true}
       transparent={true}
       visible={false}
     >
       <View
-        entryDuration={200}
-        exitDuration={150}
         pointerEvents="none"
         style={
           Object {
@@ -62668,8 +62643,6 @@ exports[`Storyshots Modal Modal Size Examples 1`] = `
         />
       </View>
       <View
-        entryDuration={200}
-        exitDuration={100}
         pointerEvents="none"
         style={
           Object {
@@ -63679,12 +63652,11 @@ exports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `
       animationType="fade"
       hardwareAccelerated={false}
       onRequestClose={[Function]}
+      statusBarTranslucent={true}
       transparent={true}
       visible={false}
     >
       <View
-        entryDuration={200}
-        exitDuration={150}
         pointerEvents="none"
         style={
           Object {
@@ -63747,8 +63719,6 @@ exports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `
         />
       </View>
       <View
-        entryDuration={200}
-        exitDuration={100}
         pointerEvents="none"
         style={
           Object {
@@ -63999,16 +63969,16 @@ exports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `
                   >
                     <View
                       dataSet={Object {}}
-                      feedbackId="field-react-aria-0-2-feedback"
+                      feedbackId="field-157-feedback"
                       hasFeedbackText={false}
                       hasHelpText={false}
-                      helpTextId="field-react-aria-0-2-helptext"
+                      helpTextId="field-157-helptext"
                       isDisabled={false}
                       isInvalid={false}
                       isReadOnly={false}
                       isRequired={false}
-                      labelId="field-react-aria-0-2-label"
-                      nativeID="field-react-aria-0-2-label"
+                      labelId="field-157-label"
+                      nativeID="field-157-label"
                       setHasFeedbackText={[Function]}
                       setHasHelpText={[Function]}
                       style={
@@ -64060,7 +64030,7 @@ exports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `
                         disabled={false}
                         editable={true}
                         isRequired={false}
-                        nativeID="field-react-aria-0-2"
+                        nativeID="field-157-input"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onKeyPress={[Function]}
@@ -64069,7 +64039,6 @@ exports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `
                         rejectResponderTermination={true}
                         required={false}
                         secureTextEntry={false}
-                        selectionColor="#1f2937"
                         style={
                           Object {
                             "backgroundColor": "transparent",
@@ -64493,12 +64462,11 @@ exports[`Storyshots Modal Multiple modal 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -64561,8 +64529,6 @@ exports[`Storyshots Modal Multiple modal 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
@@ -65053,12 +65019,11 @@ exports[`Storyshots Modal Multiple modal 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -65121,8 +65086,6 @@ exports[`Storyshots Modal Multiple modal 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
@@ -65839,12 +65802,11 @@ exports[`Storyshots Modal Multiple modal 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -65907,8 +65869,6 @@ exports[`Storyshots Modal Multiple modal 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
@@ -67573,8 +67533,6 @@ exports[`Storyshots Popover Popover positions 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginLeft": 0,
-                "marginRight": 0,
                 "overflow": "hidden",
               }
             }
@@ -67587,6 +67545,7 @@ exports[`Storyshots Popover Popover positions 1`] = `
               editable={false}
               focusable={false}
               importantForAccessibility="no"
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -67594,7 +67553,11 @@ exports[`Storyshots Popover Popover positions 1`] = `
               pointerEvents="none"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -67622,8 +67585,8 @@ exports[`Storyshots Popover Popover positions 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={-9211021}
               dataSet={Object {}}
               focusable={false}
@@ -67639,14 +67602,18 @@ exports[`Storyshots Popover Popover positions 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -67687,12 +67654,11 @@ exports[`Storyshots Popover Popover positions 1`] = `
           animationType="slide"
           hardwareAccelerated={false}
           onRequestClose={[Function]}
+          statusBarTranslucent={true}
           transparent={true}
           visible={false}
         >
           <View
-            entryDuration={200}
-            exitDuration={150}
             pointerEvents="none"
             style={
               Object {
@@ -74070,16 +74036,16 @@ exports[`Storyshots Radio Form Controlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-181-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-181-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-181-label"
+          nativeID="field-181-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -74139,32 +74105,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={true}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-181-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-181-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-181-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-181-label",
+                "nativeID": "field-181",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-181-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-181-label"
+            nativeID="field-181"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -74217,32 +74183,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-181-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-181-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-181-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-181-label",
+                      "nativeID": "field-181",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-181-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-181-label"
+                  nativeID="field-181"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -74381,32 +74347,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={false}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-181-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-181-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-181-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-181-label",
+                "nativeID": "field-181",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-181-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-181-label"
+            nativeID="field-181"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -74459,32 +74425,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-181-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-181-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-181-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-181-label",
+                      "nativeID": "field-181",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-181-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-181-label"
+                  nativeID="field-181"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -74623,32 +74589,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={false}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-181-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-181-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-181-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-181-label",
+                "nativeID": "field-181",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-181-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-181-label"
+            nativeID="field-181"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -74701,32 +74667,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-181-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-181-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-181-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-181-label",
+                      "nativeID": "field-181",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-181-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-181-label"
+                  nativeID="field-181"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -74853,16 +74819,16 @@ exports[`Storyshots Radio Form Controlled 1`] = `
         </View>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-181-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-181-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-181-label"
+          nativeID="field-181"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -80856,7 +80822,6 @@ exports[`Storyshots Select Basic 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginTop": 4,
                 "minWidth": 200,
                 "overflow": "hidden",
               }
@@ -80870,6 +80835,7 @@ exports[`Storyshots Select Basic 1`] = `
               editable={false}
               focusable={false}
               importantForAccessibility="no"
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -80878,7 +80844,11 @@ exports[`Storyshots Select Basic 1`] = `
               pointerEvents="none"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -80906,8 +80876,8 @@ exports[`Storyshots Select Basic 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={-9211021}
               dataSet={Object {}}
               focusable={false}
@@ -80923,14 +80893,18 @@ exports[`Storyshots Select Basic 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -80971,12 +80945,11 @@ exports[`Storyshots Select Basic 1`] = `
           animationType="slide"
           hardwareAccelerated={false}
           onRequestClose={[Function]}
+          statusBarTranslucent={true}
           transparent={true}
           visible={false}
         >
           <View
-            entryDuration={200}
-            exitDuration={150}
             pointerEvents="none"
             style={
               Object {
@@ -81785,16 +81758,16 @@ exports[`Storyshots Select FormControlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-186-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-186-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-186-label"
+          nativeID="field-186-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -81870,23 +81843,15 @@ exports[`Storyshots Select FormControlled 1`] = `
             dataSet={Object {}}
             isFocused={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "borderColor": "#dc2626",
-                  "borderRadius": 4,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "marginTop": 4,
-                  "minWidth": 200,
-                  "overflow": "hidden",
-                },
-                Object {
-                  "outlineColor": "#dc2626",
-                  "outlineStyle": "solid",
-                  "outlineWidth": "1px",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "borderColor": "#d4d4d4",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "minWidth": 200,
+                "overflow": "hidden",
+              }
             }
           >
             <TextInput
@@ -81902,7 +81867,7 @@ exports[`Storyshots Select FormControlled 1`] = `
               importantForAccessibility="no"
               isInvalid={true}
               isRequired={true}
-              nativeID="field-react-aria-0-2"
+              nativeID="field-186-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -81913,7 +81878,11 @@ exports[`Storyshots Select FormControlled 1`] = `
               rejectResponderTermination={true}
               required={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -81941,8 +81910,8 @@ exports[`Storyshots Select FormControlled 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={-9211021}
               dataSet={Object {}}
               focusable={false}
@@ -81958,14 +81927,18 @@ exports[`Storyshots Select FormControlled 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -82006,12 +81979,11 @@ exports[`Storyshots Select FormControlled 1`] = `
           animationType="slide"
           hardwareAccelerated={false}
           onRequestClose={[Function]}
+          statusBarTranslucent={true}
           transparent={true}
           visible={false}
         >
           <View
-            entryDuration={200}
-            exitDuration={150}
             pointerEvents="none"
             style={
               Object {
@@ -82670,16 +82642,16 @@ exports[`Storyshots Select FormControlled 1`] = `
         </Modal>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-186-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-186-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-186-label"
+          nativeID="field-186"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -82940,16 +82912,16 @@ exports[`Storyshots Select Select Long list 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-188-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-188-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-188-label"
+          nativeID="field-188-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -83013,7 +82985,6 @@ exports[`Storyshots Select Select Long list 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginTop": 4,
                 "minWidth": 100,
                 "overflow": "hidden",
               }
@@ -83029,7 +83000,7 @@ exports[`Storyshots Select Select Long list 1`] = `
               focusable={false}
               importantForAccessibility="no"
               isRequired={false}
-              nativeID="field-react-aria-0-2"
+              nativeID="field-188-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -83040,7 +83011,11 @@ exports[`Storyshots Select Select Long list 1`] = `
               rejectResponderTermination={true}
               required={false}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -83068,8 +83043,8 @@ exports[`Storyshots Select Select Long list 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={-9211021}
               dataSet={Object {}}
               focusable={false}
@@ -83085,14 +83060,18 @@ exports[`Storyshots Select Select Long list 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -83133,12 +83112,11 @@ exports[`Storyshots Select Select Long list 1`] = `
           animationType="slide"
           hardwareAccelerated={false}
           onRequestClose={[Function]}
+          statusBarTranslucent={true}
           transparent={true}
           visible={false}
         >
           <View
-            entryDuration={200}
-            exitDuration={150}
             pointerEvents="none"
             style={
               Object {
@@ -87754,16 +87732,16 @@ exports[`Storyshots Slider Form Controlled 1`] = `
         >
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-204-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-204-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2-label"
+            labelId="field-204-label"
+            nativeID="field-204-label"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -87984,16 +87962,16 @@ exports[`Storyshots Slider Form Controlled 1`] = `
           </View>
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-204-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-204-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-204-label"
+            nativeID="field-204"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -95109,6 +95087,7 @@ exports[`Storyshots TextArea Default 1`] = `
           dataSet={Object {}}
           editable={true}
           multiline={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -95116,7 +95095,6 @@ exports[`Storyshots TextArea Default 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -95311,23 +95289,16 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
             dataSet={Object {}}
             isFocused={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "borderColor": "#dc2626",
-                  "borderRadius": 4,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 80,
-                  "marginBottom": 20,
-                  "overflow": "hidden",
-                },
-                Object {
-                  "outlineColor": "#dc2626",
-                  "outlineStyle": "solid",
-                  "outlineWidth": "1px",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "borderColor": "#d4d4d4",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "height": 80,
+                "marginBottom": 20,
+                "overflow": "hidden",
+              }
             }
           >
             <TextInput
@@ -95339,6 +95310,7 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               editable={true}
               isInvalid={true}
               multiline={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -95346,7 +95318,6 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -95436,14 +95407,14 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               disabled={true}
               editable={false}
               multiline={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
               placeholder="Disabled TextArea"
-              placeholderTextColor="#404040"
+              placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -95630,7 +95601,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -95673,6 +95644,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95680,7 +95652,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -95732,6 +95703,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95739,7 +95711,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -95791,6 +95762,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95798,7 +95770,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -95850,6 +95821,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95857,7 +95829,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -95909,6 +95880,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95916,7 +95888,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -95968,6 +95939,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -95975,7 +95947,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -96160,6 +96131,7 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           dataSet={Object {}}
           editable={true}
           multiline={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onChangeText={[Function]}
@@ -96168,7 +96140,6 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -99727,8 +99698,6 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
               "borderRadius": 4,
               "borderWidth": 1,
               "flexDirection": "row",
-              "marginLeft": 0,
-              "marginRight": 0,
               "overflow": "hidden",
             }
           }
@@ -99741,6 +99710,7 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             editable={false}
             focusable={false}
             importantForAccessibility="no"
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -99748,7 +99718,11 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             pointerEvents="none"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
+            selection={
+              Object {
+                "start": 0,
+              }
+            }
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -99776,8 +99750,8 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
           <RNSVGSvgView
             accessibilityRole="image"
             align="xMidYMid"
-            bbHeight={16}
-            bbWidth={16}
+            bbHeight={24}
+            bbWidth={24}
             color={-9211021}
             dataSet={Object {}}
             focusable={false}
@@ -99793,14 +99767,18 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
                 },
                 Object {
                   "color": "#737373",
-                  "height": 16,
+                  "height": 24,
                   "marginRight": 12,
-                  "width": 16,
+                  "paddingBottom": 4,
+                  "paddingLeft": 4,
+                  "paddingRight": 4,
+                  "paddingTop": 4,
+                  "width": 24,
                 },
                 Object {
                   "flex": 0,
-                  "height": 16,
-                  "width": 16,
+                  "height": 24,
+                  "width": 24,
                 },
               ]
             }
@@ -99841,12 +99819,11 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
         animationType="slide"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -101878,7 +101855,7 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   "backgroundColor": undefined,
                   "color": "#171717",
                   "fontFamily": undefined,
-                  "fontSize": null,
+                  "fontSize": 24,
                   "fontStyle": "normal",
                   "fontWeight": "700",
                   "letterSpacing": 0,
@@ -102137,13 +102114,13 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   allowFontScaling={true}
                   dataSet={Object {}}
                   editable={true}
+                  nativeID="undefined-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   placeholderTextColor="#a3a3a3"
                   rejectResponderTermination={true}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -102499,7 +102476,7 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     "backgroundColor": undefined,
                     "color": "#171717",
                     "fontFamily": undefined,
-                    "fontSize": null,
+                    "fontSize": 24,
                     "fontStyle": "normal",
                     "fontWeight": "700",
                     "letterSpacing": 0,
@@ -102836,13 +102813,13 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     allowFontScaling={true}
                     dataSet={Object {}}
                     editable={true}
+                    nativeID="undefined-input"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onKeyPress={[Function]}
                     placeholderTextColor="#a3a3a3"
                     rejectResponderTermination={true}
                     secureTextEntry={false}
-                    selectionColor="#1f2937"
                     style={
                       Object {
                         "backgroundColor": "transparent",
@@ -103499,11 +103476,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material",
@@ -103588,11 +103565,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material-community",
@@ -103677,11 +103654,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material-community",
@@ -103766,11 +103743,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material",
@@ -103836,7 +103813,7 @@ exports[`Storyshots Transitions Stagger 1`] = `
                   "fontSize": 12,
                 },
                 Object {
-                  "color": "#fafafa",
+                  "color": "#fafaf9",
                   "fontSize": 24,
                   "height": 24,
                   "lineHeight": 24,
@@ -104212,7 +104189,7 @@ exports[`Storyshots View Basic 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -104229,7 +104206,7 @@ exports[`Storyshots View Basic 1`] = `
               "backgroundColor": undefined,
               "color": "#10b981",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": undefined,
               "fontWeight": "700",
               "lineHeight": 30,
@@ -105549,7 +105526,7 @@ exports[`Storyshots useBreakpointValue Usage 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -105899,6 +105876,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -105907,7 +105885,6 @@ exports[`Storyshots useClipboard Usage 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -106039,6 +106016,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -106047,7 +106025,6 @@ exports[`Storyshots useClipboard Usage 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -107478,12 +107455,11 @@ exports[`Storyshots useDisclose Usage 1`] = `
         animationType="fade"
         hardwareAccelerated={false}
         onRequestClose={[Function]}
+        statusBarTranslucent={true}
         transparent={true}
         visible={false}
       >
         <View
-          entryDuration={200}
-          exitDuration={150}
           pointerEvents="none"
           style={
             Object {
@@ -107546,8 +107522,6 @@ exports[`Storyshots useDisclose Usage 1`] = `
           />
         </View>
         <View
-          entryDuration={200}
-          exitDuration={100}
           pointerEvents="none"
           style={
             Object {
diff --git a/example/tests/storybook.test.js.snap.ios b/example/tests/storybook.test.js.snap.ios
index 007b99e22..4c3c59c3a 100644
--- a/example/tests/storybook.test.js.snap.ios
+++ b/example/tests/storybook.test.js.snap.ios
@@ -1323,8 +1323,8 @@ exports[`Storyshots Alert Basic 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -1340,13 +1340,13 @@ exports[`Storyshots Alert Basic 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -1739,8 +1739,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -1756,13 +1756,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -2025,8 +2025,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -2042,13 +2042,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -2311,8 +2311,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -2328,13 +2328,13 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -2735,8 +2735,8 @@ exports[`Storyshots Alert Composition 1`] = `
                 <RNSVGSvgView
                   accessibilityRole="image"
                   align="xMidYMid"
-                  bbHeight={20}
-                  bbWidth={20}
+                  bbHeight={12}
+                  bbWidth={12}
                   color={4283127139}
                   dataSet={Object {}}
                   focusable={false}
@@ -2752,13 +2752,13 @@ exports[`Storyshots Alert Composition 1`] = `
                       },
                       Object {
                         "color": "#4b5563",
-                        "height": 20,
-                        "width": 20,
+                        "height": 12,
+                        "width": 12,
                       },
                       Object {
                         "flex": 0,
-                        "height": 20,
-                        "width": 20,
+                        "height": 12,
+                        "width": 12,
                       },
                     ]
                   }
@@ -3311,8 +3311,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -3328,13 +3328,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -3576,8 +3576,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -3593,13 +3593,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -3826,8 +3826,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -3843,13 +3843,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -4076,8 +4076,8 @@ exports[`Storyshots Alert Status 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -4093,13 +4093,13 @@ exports[`Storyshots Alert Status 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -4457,8 +4457,8 @@ exports[`Storyshots Alert Usage 1`] = `
               <RNSVGSvgView
                 accessibilityRole="image"
                 align="xMidYMid"
-                bbHeight={20}
-                bbWidth={20}
+                bbHeight={12}
+                bbWidth={12}
                 color={4283127139}
                 dataSet={Object {}}
                 focusable={false}
@@ -4474,13 +4474,13 @@ exports[`Storyshots Alert Usage 1`] = `
                     },
                     Object {
                       "color": "#4b5563",
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                     Object {
                       "flex": 0,
-                      "height": 20,
-                      "width": 20,
+                      "height": 12,
+                      "width": 12,
                     },
                   ]
                 }
@@ -6272,8 +6272,8 @@ exports[`Storyshots Alert action 1`] = `
                   <RNSVGSvgView
                     accessibilityRole="image"
                     align="xMidYMid"
-                    bbHeight={20}
-                    bbWidth={20}
+                    bbHeight={12}
+                    bbWidth={12}
                     color={4283127139}
                     dataSet={Object {}}
                     focusable={false}
@@ -6289,13 +6289,13 @@ exports[`Storyshots Alert action 1`] = `
                         },
                         Object {
                           "color": "#4b5563",
-                          "height": 20,
-                          "width": 20,
+                          "height": 12,
+                          "width": 12,
                         },
                         Object {
                           "flex": 0,
-                          "height": 20,
-                          "width": 20,
+                          "height": 12,
+                          "width": 12,
                         },
                       ]
                     }
@@ -12439,7 +12439,7 @@ exports[`Storyshots Breadcrumb Basic 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -12824,7 +12824,7 @@ exports[`Storyshots Breadcrumb Collapsible 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -13407,7 +13407,7 @@ exports[`Storyshots Breadcrumb ComponentSeparator 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -13731,7 +13731,7 @@ exports[`Storyshots Breadcrumb Composition 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -14164,7 +14164,7 @@ exports[`Storyshots Breadcrumb Separators 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -26497,16 +26497,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
         >
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-69-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-69-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2-label"
+            labelId="field-69-label"
+            nativeID="field-69-label"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -26634,16 +26634,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -26829,16 +26829,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -27024,16 +27024,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -27168,16 +27168,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     dataSet={Object {}}
                     defaultIsChecked={false}
                     disabled={false}
-                    feedbackId="field-react-aria-0-2-feedback"
+                    feedbackId="field-69-feedback"
                     hasFeedbackText={false}
                     hasHelpText={false}
-                    helpTextId="field-react-aria-0-2-helptext"
+                    helpTextId="field-69-helptext"
                     isDisabled={false}
                     isInvalid={true}
                     isReadOnly={false}
                     isRequired={false}
-                    labelId="field-react-aria-0-2-label"
-                    nativeID="field-react-aria-0-2"
+                    labelId="field-69-label"
+                    nativeID="field-69"
                     readOnly={false}
                     required={false}
                     setHasFeedbackText={[Function]}
@@ -27259,16 +27259,16 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           </View>
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-69-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-69-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-69-label"
+            nativeID="field-69"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -27281,7 +27281,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
               dataSet={Object {}}
               style={
                 Object {
-                  "alignItems": "center",
+                  "alignItems": "flex-start",
                   "flexDirection": "row",
                 }
               }
@@ -27308,6 +27308,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                       "color": "#dc2626",
                       "fontSize": 12,
                       "height": 12,
+                      "marginTop": 4,
                       "width": 12,
                     },
                     Object {
@@ -29545,7 +29546,7 @@ exports[`Storyshots Container Playground 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -29728,7 +29729,7 @@ exports[`Storyshots Container Usage 1`] = `
               "backgroundColor": undefined,
               "color": "#171717",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -29998,7 +29999,7 @@ exports[`Storyshots Divider Basic 1`] = `
               "color": "#171717",
               "flexDirection": "row",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -30034,7 +30035,7 @@ exports[`Storyshots Divider Basic 1`] = `
               "color": "#171717",
               "flexDirection": "row",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -30432,7 +30433,7 @@ exports[`Storyshots Divider Orientation 1`] = `
               "backgroundColor": undefined,
               "color": "#171717",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "700",
               "letterSpacing": 0,
@@ -30479,7 +30480,7 @@ exports[`Storyshots Divider Orientation 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -30513,7 +30514,7 @@ exports[`Storyshots Divider Orientation 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -30687,7 +30688,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
               "backgroundColor": undefined,
               "color": "#1f2937",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "600",
               "letterSpacing": 0,
@@ -30735,16 +30736,16 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-263-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-263-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-263-label"
+              nativeID="field-263-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -30796,7 +30797,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-263-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -30805,7 +30806,6 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -30845,16 +30845,16 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-3-feedback"
+              feedbackId="field-264-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-3-helptext"
+              helpTextId="field-264-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-3-label"
-              nativeID="field-react-aria-0-3-label"
+              labelId="field-264-label"
+              nativeID="field-264-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -30906,7 +30906,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-3"
+                nativeID="field-264-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -30915,7 +30915,6 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -31303,7 +31302,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
               "backgroundColor": undefined,
               "color": "#1f2937",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": "normal",
               "fontWeight": "600",
               "letterSpacing": 0,
@@ -31351,16 +31350,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-266-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-266-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-266-label"
+              nativeID="field-266-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -31412,7 +31411,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-266-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -31421,7 +31420,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -31461,16 +31459,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-3-feedback"
+              feedbackId="field-267-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-3-helptext"
+              helpTextId="field-267-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-3-label"
-              nativeID="field-react-aria-0-3-label"
+              labelId="field-267-label"
+              nativeID="field-267-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -31522,7 +31520,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-3"
+                nativeID="field-267-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -31531,7 +31529,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -31571,16 +31568,16 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-4-feedback"
+              feedbackId="field-268-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-4-helptext"
+              helpTextId="field-268-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={false}
-              labelId="field-react-aria-0-4-label"
-              nativeID="field-react-aria-0-4-label"
+              labelId="field-268-label"
+              nativeID="field-268-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -31632,7 +31629,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={false}
-                nativeID="field-react-aria-0-4"
+                nativeID="field-268-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -31641,7 +31638,6 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 rejectResponderTermination={true}
                 required={false}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -31939,6 +31935,7 @@ exports[`Storyshots Examples Todo App 1`] = `
                 allowFontScaling={true}
                 dataSet={Object {}}
                 editable={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
@@ -31947,7 +31944,6 @@ exports[`Storyshots Examples Todo App 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -32018,11 +32014,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                       "fontSize": 12,
                     },
                     Object {
-                      "color": "#fafafa",
-                      "fontSize": 20,
-                      "height": 20,
-                      "lineHeight": 20,
-                      "width": 20,
+                      "color": "#fafaf9",
+                      "fontSize": 16,
+                      "height": 16,
+                      "lineHeight": 16,
+                      "width": 16,
                     },
                     Object {
                       "fontFamily": "feather",
@@ -32271,11 +32267,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -32469,11 +32465,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -32667,11 +32663,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -32865,11 +32861,11 @@ exports[`Storyshots Examples Todo App 1`] = `
                         "fontSize": 12,
                       },
                       Object {
-                        "color": "#525252",
-                        "fontSize": 16,
-                        "height": 16,
-                        "lineHeight": 16,
-                        "width": 16,
+                        "color": "#a3a3a3",
+                        "fontSize": 12,
+                        "height": 12,
+                        "lineHeight": 12,
+                        "width": 12,
                       },
                       Object {
                         "fontFamily": "entypo",
@@ -35680,16 +35676,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-2-feedback"
+                feedbackId="field-87-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-2-helptext"
+                helpTextId="field-87-helptext"
                 isDisabled={false}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-2-label"
-                nativeID="field-react-aria-0-2-label"
+                labelId="field-87-label"
+                nativeID="field-87-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -35741,7 +35737,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   disabled={false}
                   editable={true}
                   isRequired={false}
-                  nativeID="field-react-aria-0-2"
+                  nativeID="field-87-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
@@ -35750,7 +35746,6 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -35773,16 +35768,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-2-feedback"
+                feedbackId="field-87-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-2-helptext"
+                helpTextId="field-87-helptext"
                 isDisabled={false}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-2-label"
-                nativeID="field-react-aria-0-2-feedback"
+                labelId="field-87-label"
+                nativeID="field-87-feedback"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -35867,16 +35862,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-3-feedback"
+                feedbackId="field-88-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-3-helptext"
+                helpTextId="field-88-helptext"
                 isDisabled={true}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-3-label"
-                nativeID="field-react-aria-0-3-label"
+                labelId="field-88-label"
+                nativeID="field-88-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -35929,17 +35924,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   disabled={true}
                   editable={false}
                   isRequired={false}
-                  nativeID="field-react-aria-0-3"
+                  nativeID="field-88-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   placeholder="Title"
-                  placeholderTextColor="#404040"
+                  placeholderTextColor="#a3a3a3"
                   readOnly={false}
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -35962,16 +35956,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-3-feedback"
+                feedbackId="field-88-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-3-helptext"
+                helpTextId="field-88-helptext"
                 isDisabled={true}
                 isInvalid={false}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-3-label"
-                nativeID="field-react-aria-0-3-feedback"
+                labelId="field-88-label"
+                nativeID="field-88-feedback"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -36055,16 +36049,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-4-feedback"
+                feedbackId="field-89-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-4-helptext"
+                helpTextId="field-89-helptext"
                 isDisabled={false}
                 isInvalid={true}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-4-label"
-                nativeID="field-react-aria-0-4-label"
+                labelId="field-89-label"
+                nativeID="field-89-label"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -36099,21 +36093,14 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                 dataSet={Object {}}
                 isFocused={false}
                 style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "borderColor": "#dc2626",
-                      "borderRadius": 4,
-                      "borderWidth": 1,
-                      "flexDirection": "row",
-                      "overflow": "hidden",
-                    },
-                    Object {
-                      "outlineColor": "#dc2626",
-                      "outlineStyle": "solid",
-                      "outlineWidth": "1px",
-                    },
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "borderColor": "#d4d4d4",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flexDirection": "row",
+                    "overflow": "hidden",
+                  }
                 }
               >
                 <TextInput
@@ -36125,7 +36112,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   editable={true}
                   isInvalid={true}
                   isRequired={false}
-                  nativeID="field-react-aria-0-4"
+                  nativeID="field-89-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
@@ -36135,7 +36122,6 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   rejectResponderTermination={true}
                   required={false}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -36158,16 +36144,16 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </View>
               <View
                 dataSet={Object {}}
-                feedbackId="field-react-aria-0-4-feedback"
+                feedbackId="field-89-feedback"
                 hasFeedbackText={false}
                 hasHelpText={false}
-                helpTextId="field-react-aria-0-4-helptext"
+                helpTextId="field-89-helptext"
                 isDisabled={false}
                 isInvalid={true}
                 isReadOnly={false}
                 isRequired={false}
-                labelId="field-react-aria-0-4-label"
-                nativeID="field-react-aria-0-4"
+                labelId="field-89-label"
+                nativeID="field-89"
                 setHasFeedbackText={[Function]}
                 setHasHelpText={[Function]}
                 style={
@@ -36435,16 +36421,16 @@ exports[`Storyshots FormControl Playground 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-83-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-83-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-83-label"
+          nativeID="field-83-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -36519,7 +36505,7 @@ exports[`Storyshots FormControl Playground 1`] = `
             disabled={false}
             editable={true}
             isRequired={true}
-            nativeID="field-react-aria-0-2"
+            nativeID="field-83-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -36529,7 +36515,6 @@ exports[`Storyshots FormControl Playground 1`] = `
             rejectResponderTermination={true}
             required={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -36556,16 +36541,16 @@ exports[`Storyshots FormControl Playground 1`] = `
         />
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-83-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-83-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-feedback"
+          labelId="field-83-label"
+          nativeID="field-83-feedback"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -36763,16 +36748,16 @@ exports[`Storyshots FormControl Usage 1`] = `
           >
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-85-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-85-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={true}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-label"
+              labelId="field-85-label"
+              nativeID="field-85-label"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -36848,7 +36833,7 @@ exports[`Storyshots FormControl Usage 1`] = `
                 disabled={false}
                 editable={true}
                 isRequired={true}
-                nativeID="field-react-aria-0-2"
+                nativeID="field-85-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -36858,7 +36843,6 @@ exports[`Storyshots FormControl Usage 1`] = `
                 rejectResponderTermination={true}
                 required={true}
                 secureTextEntry={true}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -36885,16 +36869,16 @@ exports[`Storyshots FormControl Usage 1`] = `
             />
             <View
               dataSet={Object {}}
-              feedbackId="field-react-aria-0-2-feedback"
+              feedbackId="field-85-feedback"
               hasFeedbackText={false}
               hasHelpText={false}
-              helpTextId="field-react-aria-0-2-helptext"
+              helpTextId="field-85-helptext"
               isDisabled={false}
               isInvalid={false}
               isReadOnly={false}
               isRequired={true}
-              labelId="field-react-aria-0-2-label"
-              nativeID="field-react-aria-0-2-feedback"
+              labelId="field-85-label"
+              nativeID="field-85-feedback"
               setHasFeedbackText={[Function]}
               setHasHelpText={[Function]}
               style={
@@ -37283,7 +37267,7 @@ exports[`Storyshots Heading Basic 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -37432,7 +37416,7 @@ exports[`Storyshots Heading Composition 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 30,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -37828,7 +37812,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -37854,7 +37838,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 30,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -37880,7 +37864,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 36,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -37906,7 +37890,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 48,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 2.4000000000000004,
@@ -37932,7 +37916,7 @@ exports[`Storyshots Heading Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 60,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 3,
@@ -38079,7 +38063,7 @@ exports[`Storyshots Heading Truncate 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -39649,7 +39633,7 @@ exports[`Storyshots Icon All Icons 1`] = `
                           stroke={null}
                         >
                           <RNSVGPath
-                            d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+                            d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
                             propList={
                               Array [
                                 "stroke",
@@ -44040,7 +44024,7 @@ exports[`Storyshots Icon Sizes 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -44338,10 +44322,10 @@ exports[`Storyshots IconButton Basic 1`] = `
               },
               Object {
                 "color": "#f97316",
-                "fontSize": 32,
-                "height": 32,
-                "lineHeight": 32,
-                "width": 32,
+                "fontSize": 20,
+                "height": 20,
+                "lineHeight": 20,
+                "width": 20,
               },
               Object {
                 "fontFamily": "entypo",
@@ -44625,9 +44609,9 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
         <RNSVGSvgView
           accessibilityRole="image"
           align="xMidYMid"
-          bbHeight={20}
-          bbWidth={20}
-          color={4294638330}
+          bbHeight={40}
+          bbWidth={40}
+          color={4278355143}
           dataSet={Object {}}
           focusable={false}
           meetOrSlice={0}
@@ -44642,18 +44626,18 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
                 "borderWidth": 0,
               },
               Object {
-                "color": "#fafafa",
-                "height": 20,
-                "width": 20,
+                "color": "#0284c7",
+                "height": 40,
+                "width": 40,
               },
               Object {
                 "flex": 0,
-                "height": 20,
-                "width": 20,
+                "height": 40,
+                "width": 40,
               },
             ]
           }
-          tintColor={4294638330}
+          tintColor={4278355143}
           vbHeight={100}
           vbWidth={100}
         >
@@ -46196,7 +46180,7 @@ exports[`Storyshots Image Sizes 1`] = `
           "backgroundColor": undefined,
           "color": "#171717",
           "fontFamily": undefined,
-          "fontSize": null,
+          "fontSize": 24,
           "fontStyle": "normal",
           "fontWeight": "700",
           "letterSpacing": 0,
@@ -46765,6 +46749,7 @@ exports[`Storyshots Input Addons 1`] = `
             allowFontScaling={true}
             dataSet={Object {}}
             editable={true}
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -46772,7 +46757,6 @@ exports[`Storyshots Input Addons 1`] = `
             placeholderTextColor="#a3a3a3"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -47035,6 +47019,7 @@ exports[`Storyshots Input Elements 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -47042,7 +47027,6 @@ exports[`Storyshots Input Elements 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -47091,6 +47075,7 @@ exports[`Storyshots Input Elements 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -47098,7 +47083,6 @@ exports[`Storyshots Input Elements 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={true}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -47122,35 +47106,52 @@ exports[`Storyshots Input Elements 1`] = `
           dataSet={Object {}}
           style={Object {}}
         />
-        <Text
-          allowFontScaling={false}
+        <View
+          accessible={true}
           dataSet={Object {}}
-          onPress={[Function]}
-          style={
-            Array [
-              Object {
-                "color": undefined,
-                "fontSize": 12,
-              },
-              Object {
-                "color": "#a3a3a3",
-                "fontSize": 20,
-                "height": 20,
-                "lineHeight": 20,
-                "marginRight": 8,
-                "width": 20,
-              },
-              Object {
-                "fontFamily": "material",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onHoverIn={[Function]}
+          onHoverOut={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={Object {}}
         >
-          
-        </Text>
+          <Text
+            allowFontScaling={false}
+            dataSet={Object {}}
+            style={
+              Array [
+                Object {
+                  "color": undefined,
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#a3a3a3",
+                  "fontSize": 20,
+                  "height": 20,
+                  "lineHeight": 20,
+                  "marginRight": 8,
+                  "width": 20,
+                },
+                Object {
+                  "fontFamily": "material",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
       </View>
     </View>
   </View>
@@ -47300,16 +47301,16 @@ exports[`Storyshots Input Form Controlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-125-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-125-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-125-label"
+          nativeID="field-125-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -47344,21 +47345,14 @@ exports[`Storyshots Input Form Controlled 1`] = `
           dataSet={Object {}}
           isFocused={false}
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "borderColor": "#dc2626",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "flexDirection": "row",
-                "overflow": "hidden",
-              },
-              Object {
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
-              },
-            ]
+            Object {
+              "alignItems": "center",
+              "borderColor": "#d4d4d4",
+              "borderRadius": 4,
+              "borderWidth": 1,
+              "flexDirection": "row",
+              "overflow": "hidden",
+            }
           }
         >
           <TextInput
@@ -47370,7 +47364,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
             editable={true}
             isInvalid={true}
             isRequired={false}
-            nativeID="field-react-aria-0-2"
+            nativeID="field-125-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -47380,7 +47374,6 @@ exports[`Storyshots Input Form Controlled 1`] = `
             rejectResponderTermination={true}
             required={false}
             secureTextEntry={false}
-            selectionColor="#1f2937"
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -47403,16 +47396,16 @@ exports[`Storyshots Input Form Controlled 1`] = `
         </View>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-125-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-125-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-125-label"
+          nativeID="field-125"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -47682,6 +47675,7 @@ exports[`Storyshots Input Password 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -47689,7 +47683,6 @@ exports[`Storyshots Input Password 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={true}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -47940,6 +47933,7 @@ exports[`Storyshots Input Primary 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -47947,7 +47941,6 @@ exports[`Storyshots Input Primary 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48126,6 +48119,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48133,7 +48127,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48181,6 +48174,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48188,7 +48182,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48236,6 +48229,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48243,7 +48237,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48291,6 +48284,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48298,7 +48292,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48346,6 +48339,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48353,7 +48347,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48401,6 +48394,7 @@ exports[`Storyshots Input Size  1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48408,7 +48402,6 @@ exports[`Storyshots Input Size  1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48585,6 +48578,7 @@ exports[`Storyshots Input Value Controlled 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -48593,7 +48587,6 @@ exports[`Storyshots Input Value Controlled 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48773,6 +48766,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48780,7 +48774,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48829,6 +48822,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48836,7 +48830,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48885,6 +48878,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48892,7 +48886,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48940,6 +48933,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -48947,7 +48941,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -48995,6 +48988,7 @@ exports[`Storyshots Input Variants 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -49002,7 +48996,6 @@ exports[`Storyshots Input Variants 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -49193,7 +49186,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -49252,6 +49245,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -49259,7 +49253,6 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -53827,7 +53820,7 @@ exports[`Storyshots Menu Basic 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="139"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -54046,7 +54039,7 @@ exports[`Storyshots Menu Group 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="141"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -54267,7 +54260,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
         colorScheme="primary"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="145"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -54372,8 +54365,6 @@ exports[`Storyshots Menu Menu positions 1`] = `
               "borderRadius": 4,
               "borderWidth": 1,
               "flexDirection": "row",
-              "marginLeft": 0,
-              "marginRight": 0,
               "overflow": "hidden",
             }
           }
@@ -54386,6 +54377,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
             editable={false}
             focusable={false}
             importantForAccessibility="no"
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -54393,7 +54385,11 @@ exports[`Storyshots Menu Menu positions 1`] = `
             pointerEvents="none"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
+            selection={
+              Object {
+                "start": 0,
+              }
+            }
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -54421,8 +54417,8 @@ exports[`Storyshots Menu Menu positions 1`] = `
           <RNSVGSvgView
             accessibilityRole="image"
             align="xMidYMid"
-            bbHeight={16}
-            bbWidth={16}
+            bbHeight={24}
+            bbWidth={24}
             color={4285756275}
             dataSet={Object {}}
             focusable={false}
@@ -54438,14 +54434,18 @@ exports[`Storyshots Menu Menu positions 1`] = `
                 },
                 Object {
                   "color": "#737373",
-                  "height": 16,
+                  "height": 24,
                   "marginRight": 12,
-                  "width": 16,
+                  "paddingBottom": 4,
+                  "paddingLeft": 4,
+                  "paddingRight": 4,
+                  "paddingTop": 4,
+                  "width": 24,
                 },
                 Object {
                   "flex": 0,
-                  "height": 16,
-                  "width": 16,
+                  "height": 24,
+                  "width": 24,
                 },
               ]
             }
@@ -54624,7 +54624,7 @@ exports[`Storyshots Menu MenuOptionsGroup 1`] = `
         aria-haspopup="menu"
         dataSet={Object {}}
         focusable={true}
-        nativeID="react-aria-0-2"
+        nativeID="143"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -55839,6 +55839,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           allowFontScaling={true}
           dataSet={Object {}}
           editable={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -55846,7 +55847,6 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           placeholderTextColor="#334155"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -57640,8 +57640,6 @@ exports[`Storyshots Popover Popover positions 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginLeft": 0,
-                "marginRight": 0,
                 "overflow": "hidden",
               }
             }
@@ -57654,6 +57652,7 @@ exports[`Storyshots Popover Popover positions 1`] = `
               editable={false}
               focusable={false}
               importantForAccessibility="no"
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -57661,7 +57660,11 @@ exports[`Storyshots Popover Popover positions 1`] = `
               pointerEvents="none"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -57689,8 +57692,8 @@ exports[`Storyshots Popover Popover positions 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={4285756275}
               dataSet={Object {}}
               focusable={false}
@@ -57706,14 +57709,18 @@ exports[`Storyshots Popover Popover positions 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -62998,16 +63005,16 @@ exports[`Storyshots Radio Form Controlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-174-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-174-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-174-label"
+          nativeID="field-174-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -63067,32 +63074,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={true}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-174-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-174-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-174-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-174-label",
+                "nativeID": "field-174",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-174-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-174-label"
+            nativeID="field-174"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -63145,32 +63152,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-174-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-174-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-174-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-174-label",
+                      "nativeID": "field-174",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-174-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-174-label"
+                  nativeID="field-174"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -63309,32 +63316,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={false}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-174-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-174-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-174-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-174-label",
+                "nativeID": "field-174",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-174-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-174-label"
+            nativeID="field-174"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -63387,32 +63394,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-174-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-174-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-174-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-174-label",
+                      "nativeID": "field-174",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-174-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-174-label"
+                  nativeID="field-174"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -63551,32 +63558,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
             accessible={true}
             checked={false}
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-174-feedback"
             focusable={true}
             formControlContext={
               Object {
-                "feedbackId": "field-react-aria-0-2-feedback",
+                "feedbackId": "field-174-feedback",
                 "hasFeedbackText": false,
                 "hasHelpText": false,
-                "helpTextId": "field-react-aria-0-2-helptext",
+                "helpTextId": "field-174-helptext",
                 "isDisabled": false,
                 "isInvalid": true,
                 "isReadOnly": false,
                 "isRequired": false,
-                "labelId": "field-react-aria-0-2-label",
-                "nativeID": "field-react-aria-0-2",
+                "labelId": "field-174-label",
+                "nativeID": "field-174",
                 "setHasFeedbackText": [Function],
                 "setHasHelpText": [Function],
               }
             }
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-174-helptext"
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-174-label"
+            nativeID="field-174"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -63629,32 +63636,32 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                   colorScheme="primary"
                   dataSet={Object {}}
                   defaultIsChecked={false}
-                  feedbackId="field-react-aria-0-2-feedback"
+                  feedbackId="field-174-feedback"
                   formControlContext={
                     Object {
-                      "feedbackId": "field-react-aria-0-2-feedback",
+                      "feedbackId": "field-174-feedback",
                       "hasFeedbackText": false,
                       "hasHelpText": false,
-                      "helpTextId": "field-react-aria-0-2-helptext",
+                      "helpTextId": "field-174-helptext",
                       "isDisabled": false,
                       "isInvalid": true,
                       "isReadOnly": false,
                       "isRequired": false,
-                      "labelId": "field-react-aria-0-2-label",
-                      "nativeID": "field-react-aria-0-2",
+                      "labelId": "field-174-label",
+                      "nativeID": "field-174",
                       "setHasFeedbackText": [Function],
                       "setHasHelpText": [Function],
                     }
                   }
                   hasFeedbackText={false}
                   hasHelpText={false}
-                  helpTextId="field-react-aria-0-2-helptext"
+                  helpTextId="field-174-helptext"
                   isDisabled={false}
                   isInvalid={true}
                   isReadOnly={false}
                   isRequired={false}
-                  labelId="field-react-aria-0-2-label"
-                  nativeID="field-react-aria-0-2"
+                  labelId="field-174-label"
+                  nativeID="field-174"
                   setHasFeedbackText={[Function]}
                   setHasHelpText={[Function]}
                   state={
@@ -63781,16 +63788,16 @@ exports[`Storyshots Radio Form Controlled 1`] = `
         </View>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-174-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-174-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-174-label"
+          nativeID="field-174"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -69789,7 +69796,6 @@ exports[`Storyshots Select Basic 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginTop": 4,
                 "minWidth": 200,
                 "overflow": "hidden",
               }
@@ -69803,6 +69809,7 @@ exports[`Storyshots Select Basic 1`] = `
               editable={false}
               focusable={false}
               importantForAccessibility="no"
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -69811,7 +69818,11 @@ exports[`Storyshots Select Basic 1`] = `
               pointerEvents="none"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -69839,8 +69850,8 @@ exports[`Storyshots Select Basic 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={4285756275}
               dataSet={Object {}}
               focusable={false}
@@ -69856,14 +69867,18 @@ exports[`Storyshots Select Basic 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -70052,16 +70067,16 @@ exports[`Storyshots Select FormControlled 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-179-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-179-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-179-label"
+          nativeID="field-179-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -70137,23 +70152,15 @@ exports[`Storyshots Select FormControlled 1`] = `
             dataSet={Object {}}
             isFocused={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "borderColor": "#dc2626",
-                  "borderRadius": 4,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "marginTop": 4,
-                  "minWidth": 200,
-                  "overflow": "hidden",
-                },
-                Object {
-                  "outlineColor": "#dc2626",
-                  "outlineStyle": "solid",
-                  "outlineWidth": "1px",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "borderColor": "#d4d4d4",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "minWidth": 200,
+                "overflow": "hidden",
+              }
             }
           >
             <TextInput
@@ -70169,7 +70176,7 @@ exports[`Storyshots Select FormControlled 1`] = `
               importantForAccessibility="no"
               isInvalid={true}
               isRequired={true}
-              nativeID="field-react-aria-0-2"
+              nativeID="field-179-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -70180,7 +70187,11 @@ exports[`Storyshots Select FormControlled 1`] = `
               rejectResponderTermination={true}
               required={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -70208,8 +70219,8 @@ exports[`Storyshots Select FormControlled 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={4285756275}
               dataSet={Object {}}
               focusable={false}
@@ -70225,14 +70236,18 @@ exports[`Storyshots Select FormControlled 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -70271,16 +70286,16 @@ exports[`Storyshots Select FormControlled 1`] = `
         </View>
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-179-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-179-helptext"
           isDisabled={false}
           isInvalid={true}
           isReadOnly={false}
           isRequired={true}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2"
+          labelId="field-179-label"
+          nativeID="field-179"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -70541,16 +70556,16 @@ exports[`Storyshots Select Select Long list 1`] = `
       >
         <View
           dataSet={Object {}}
-          feedbackId="field-react-aria-0-2-feedback"
+          feedbackId="field-181-feedback"
           hasFeedbackText={false}
           hasHelpText={false}
-          helpTextId="field-react-aria-0-2-helptext"
+          helpTextId="field-181-helptext"
           isDisabled={false}
           isInvalid={false}
           isReadOnly={false}
           isRequired={false}
-          labelId="field-react-aria-0-2-label"
-          nativeID="field-react-aria-0-2-label"
+          labelId="field-181-label"
+          nativeID="field-181-label"
           setHasFeedbackText={[Function]}
           setHasHelpText={[Function]}
           style={
@@ -70614,7 +70629,6 @@ exports[`Storyshots Select Select Long list 1`] = `
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "flexDirection": "row",
-                "marginTop": 4,
                 "minWidth": 100,
                 "overflow": "hidden",
               }
@@ -70630,7 +70644,7 @@ exports[`Storyshots Select Select Long list 1`] = `
               focusable={false}
               importantForAccessibility="no"
               isRequired={false}
-              nativeID="field-react-aria-0-2"
+              nativeID="field-181-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -70641,7 +70655,11 @@ exports[`Storyshots Select Select Long list 1`] = `
               rejectResponderTermination={true}
               required={false}
               secureTextEntry={false}
-              selectionColor="#1f2937"
+              selection={
+                Object {
+                  "start": 0,
+                }
+              }
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -70669,8 +70687,8 @@ exports[`Storyshots Select Select Long list 1`] = `
             <RNSVGSvgView
               accessibilityRole="image"
               align="xMidYMid"
-              bbHeight={16}
-              bbWidth={16}
+              bbHeight={24}
+              bbWidth={24}
               color={4285756275}
               dataSet={Object {}}
               focusable={false}
@@ -70686,14 +70704,18 @@ exports[`Storyshots Select Select Long list 1`] = `
                   },
                   Object {
                     "color": "#737373",
-                    "height": 16,
+                    "height": 24,
                     "marginRight": 12,
-                    "width": 16,
+                    "paddingBottom": 4,
+                    "paddingLeft": 4,
+                    "paddingRight": 4,
+                    "paddingTop": 4,
+                    "width": 24,
                   },
                   Object {
                     "flex": 0,
-                    "height": 16,
-                    "width": 16,
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
@@ -74149,16 +74171,16 @@ exports[`Storyshots Slider Form Controlled 1`] = `
         >
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-197-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-197-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2-label"
+            labelId="field-197-label"
+            nativeID="field-197-label"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -74379,16 +74401,16 @@ exports[`Storyshots Slider Form Controlled 1`] = `
           </View>
           <View
             dataSet={Object {}}
-            feedbackId="field-react-aria-0-2-feedback"
+            feedbackId="field-197-feedback"
             hasFeedbackText={false}
             hasHelpText={false}
-            helpTextId="field-react-aria-0-2-helptext"
+            helpTextId="field-197-helptext"
             isDisabled={false}
             isInvalid={true}
             isReadOnly={false}
             isRequired={false}
-            labelId="field-react-aria-0-2-label"
-            nativeID="field-react-aria-0-2"
+            labelId="field-197-label"
+            nativeID="field-197"
             setHasFeedbackText={[Function]}
             setHasHelpText={[Function]}
             style={
@@ -81630,6 +81652,7 @@ exports[`Storyshots TextArea Default 1`] = `
           dataSet={Object {}}
           editable={true}
           multiline={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyPress={[Function]}
@@ -81637,7 +81660,6 @@ exports[`Storyshots TextArea Default 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -81832,23 +81854,16 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
             dataSet={Object {}}
             isFocused={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "borderColor": "#dc2626",
-                  "borderRadius": 4,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 80,
-                  "marginBottom": 20,
-                  "overflow": "hidden",
-                },
-                Object {
-                  "outlineColor": "#dc2626",
-                  "outlineStyle": "solid",
-                  "outlineWidth": "1px",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "borderColor": "#d4d4d4",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "height": 80,
+                "marginBottom": 20,
+                "overflow": "hidden",
+              }
             }
           >
             <TextInput
@@ -81860,6 +81875,7 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               editable={true}
               isInvalid={true}
               multiline={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
@@ -81867,7 +81883,6 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -81957,14 +81972,14 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               disabled={true}
               editable={false}
               multiline={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onFocus={[Function]}
               onKeyPress={[Function]}
               placeholder="Disabled TextArea"
-              placeholderTextColor="#404040"
+              placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -82151,7 +82166,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -82194,6 +82209,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82201,7 +82217,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82253,6 +82268,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82260,7 +82276,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82312,6 +82327,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82319,7 +82335,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82371,6 +82386,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82378,7 +82394,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82430,6 +82445,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82437,7 +82453,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82489,6 +82504,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 dataSet={Object {}}
                 editable={true}
                 multiline={true}
+                nativeID="undefined-input"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyPress={[Function]}
@@ -82496,7 +82512,6 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 placeholderTextColor="#a3a3a3"
                 rejectResponderTermination={true}
                 secureTextEntry={false}
-                selectionColor="#1f2937"
                 style={
                   Object {
                     "backgroundColor": "transparent",
@@ -82681,6 +82696,7 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           dataSet={Object {}}
           editable={true}
           multiline={true}
+          nativeID="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onChangeText={[Function]}
@@ -82689,7 +82705,6 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           placeholderTextColor="#a3a3a3"
           rejectResponderTermination={true}
           secureTextEntry={false}
-          selectionColor="#1f2937"
           style={
             Object {
               "backgroundColor": "transparent",
@@ -86248,8 +86263,6 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
               "borderRadius": 4,
               "borderWidth": 1,
               "flexDirection": "row",
-              "marginLeft": 0,
-              "marginRight": 0,
               "overflow": "hidden",
             }
           }
@@ -86262,6 +86275,7 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             editable={false}
             focusable={false}
             importantForAccessibility="no"
+            nativeID="undefined-input"
             onBlur={[Function]}
             onFocus={[Function]}
             onKeyPress={[Function]}
@@ -86269,7 +86283,11 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             pointerEvents="none"
             rejectResponderTermination={true}
             secureTextEntry={false}
-            selectionColor="#1f2937"
+            selection={
+              Object {
+                "start": 0,
+              }
+            }
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -86297,8 +86315,8 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
           <RNSVGSvgView
             accessibilityRole="image"
             align="xMidYMid"
-            bbHeight={16}
-            bbWidth={16}
+            bbHeight={24}
+            bbWidth={24}
             color={4285756275}
             dataSet={Object {}}
             focusable={false}
@@ -86314,14 +86332,18 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
                 },
                 Object {
                   "color": "#737373",
-                  "height": 16,
+                  "height": 24,
                   "marginRight": 12,
-                  "width": 16,
+                  "paddingBottom": 4,
+                  "paddingLeft": 4,
+                  "paddingRight": 4,
+                  "paddingTop": 4,
+                  "width": 24,
                 },
                 Object {
                   "flex": 0,
-                  "height": 16,
-                  "width": 16,
+                  "height": 24,
+                  "width": 24,
                 },
               ]
             }
@@ -87264,7 +87286,7 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   "backgroundColor": undefined,
                   "color": "#171717",
                   "fontFamily": undefined,
-                  "fontSize": null,
+                  "fontSize": 24,
                   "fontStyle": "normal",
                   "fontWeight": "700",
                   "letterSpacing": 0,
@@ -87523,13 +87545,13 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   allowFontScaling={true}
                   dataSet={Object {}}
                   editable={true}
+                  nativeID="undefined-input"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   placeholderTextColor="#a3a3a3"
                   rejectResponderTermination={true}
                   secureTextEntry={false}
-                  selectionColor="#1f2937"
                   style={
                     Object {
                       "backgroundColor": "transparent",
@@ -87885,7 +87907,7 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     "backgroundColor": undefined,
                     "color": "#171717",
                     "fontFamily": undefined,
-                    "fontSize": null,
+                    "fontSize": 24,
                     "fontStyle": "normal",
                     "fontWeight": "700",
                     "letterSpacing": 0,
@@ -88222,13 +88244,13 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     allowFontScaling={true}
                     dataSet={Object {}}
                     editable={true}
+                    nativeID="undefined-input"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onKeyPress={[Function]}
                     placeholderTextColor="#a3a3a3"
                     rejectResponderTermination={true}
                     secureTextEntry={false}
-                    selectionColor="#1f2937"
                     style={
                       Object {
                         "backgroundColor": "transparent",
@@ -88885,11 +88907,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material",
@@ -88974,11 +88996,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material-community",
@@ -89063,11 +89085,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material-community",
@@ -89152,11 +89174,11 @@ exports[`Storyshots Transitions Stagger 1`] = `
                     "fontSize": 12,
                   },
                   Object {
-                    "color": "#fafafa",
-                    "fontSize": 20,
-                    "height": 20,
-                    "lineHeight": 20,
-                    "width": 20,
+                    "color": "#fafaf9",
+                    "fontSize": 24,
+                    "height": 24,
+                    "lineHeight": 24,
+                    "width": 24,
                   },
                   Object {
                     "fontFamily": "material",
@@ -89222,7 +89244,7 @@ exports[`Storyshots Transitions Stagger 1`] = `
                   "fontSize": 12,
                 },
                 Object {
-                  "color": "#fafafa",
+                  "color": "#fafaf9",
                   "fontSize": 24,
                   "height": 24,
                   "lineHeight": 24,
@@ -89598,7 +89620,7 @@ exports[`Storyshots View Basic 1`] = `
             "backgroundColor": undefined,
             "color": "#171717",
             "fontFamily": undefined,
-            "fontSize": null,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "700",
             "letterSpacing": 0,
@@ -89615,7 +89637,7 @@ exports[`Storyshots View Basic 1`] = `
               "backgroundColor": undefined,
               "color": "#10b981",
               "fontFamily": undefined,
-              "fontSize": null,
+              "fontSize": 24,
               "fontStyle": undefined,
               "fontWeight": "700",
               "lineHeight": 30,
@@ -90947,7 +90969,7 @@ exports[`Storyshots useBreakpointValue Usage 1`] = `
                 "backgroundColor": undefined,
                 "color": "#171717",
                 "fontFamily": undefined,
-                "fontSize": null,
+                "fontSize": 24,
                 "fontStyle": "normal",
                 "fontWeight": "700",
                 "letterSpacing": 0,
@@ -91297,6 +91319,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -91305,7 +91328,6 @@ exports[`Storyshots useClipboard Usage 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
@@ -91437,6 +91459,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               allowFontScaling={true}
               dataSet={Object {}}
               editable={true}
+              nativeID="undefined-input"
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -91445,7 +91468,6 @@ exports[`Storyshots useClipboard Usage 1`] = `
               placeholderTextColor="#a3a3a3"
               rejectResponderTermination={true}
               secureTextEntry={false}
-              selectionColor="#1f2937"
               style={
                 Object {
                   "backgroundColor": "transparent",
diff --git a/example/tests/storybook.test.js.snap.node b/example/tests/storybook.test.js.snap.node
index 4032f7aa5..ab1cc2167 100644
--- a/example/tests/storybook.test.js.snap.node
+++ b/example/tests/storybook.test.js.snap.node
@@ -1298,8 +1298,8 @@ exports[`Storyshots Alert Basic 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -1648,8 +1648,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -1890,8 +1890,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -2132,8 +2132,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -2496,8 +2496,8 @@ exports[`Storyshots Alert Composition 1`] = `
                   style={
                     Object {
                       "color": "rgba(75,85,99,1.00)",
-                      "height": "20px",
-                      "width": "20px",
+                      "height": "12px",
+                      "width": "12px",
                     }
                   }
                   viewBox="0 0 24 24"
@@ -2966,8 +2966,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3173,8 +3173,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3375,8 +3375,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3577,8 +3577,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3900,8 +3900,8 @@ exports[`Storyshots Alert Usage 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -5573,8 +5573,8 @@ exports[`Storyshots Alert action 1`] = `
                     style={
                       Object {
                         "color": "rgba(75,85,99,1.00)",
-                        "height": "20px",
-                        "width": "20px",
+                        "height": "12px",
+                        "width": "12px",
                       }
                     }
                     viewBox="0 0 24 24"
@@ -24226,7 +24226,7 @@ exports[`Storyshots Checkbox Checkbox Group 1`] = `
         <div
           aria-label="pick an item"
           className="css-view-1dbjc4n"
-          id="react-aria-0-2"
+          id="react-aria-0-1"
           role="group"
           style={
             Object {
@@ -24996,7 +24996,7 @@ exports[`Storyshots Checkbox Controlled checkbox 1`] = `
     <div
       aria-label="choose numbers"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       role="group"
       style={
         Object {
@@ -27459,7 +27459,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
         >
           <label
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2-label"
+            id="field-69-label"
             style={
               Object {
                 "WebkitBoxDirection": "normal",
@@ -27512,7 +27512,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           <div
             aria-label="choose multiple items"
             className="css-view-1dbjc4n"
-            id="react-aria-0-3"
+            id="react-aria-0-1"
             role="group"
             style={
               Object {
@@ -27611,7 +27611,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -27780,7 +27780,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -27949,7 +27949,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -28108,7 +28108,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -28183,7 +28183,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           </div>
           <div
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2"
+            id="field-69"
             style={
               Object {
                 "marginTop": "8px",
@@ -28194,14 +28194,14 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
               className="css-view-1dbjc4n"
               style={
                 Object {
-                  "WebkitAlignItems": "center",
-                  "WebkitBoxAlign": "center",
+                  "WebkitAlignItems": "flex-start",
+                  "WebkitBoxAlign": "start",
                   "WebkitBoxDirection": "normal",
                   "WebkitBoxOrient": "horizontal",
                   "WebkitFlexDirection": "row",
-                  "alignItems": "center",
+                  "alignItems": "flex-start",
                   "flexDirection": "row",
-                  "msFlexAlign": "center",
+                  "msFlexAlign": "start",
                   "msFlexDirection": "row",
                 }
               }
@@ -28214,6 +28214,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     "color": "rgba(220,38,38,1.00)",
                     "fontSize": "12px",
                     "height": "12px",
+                    "marginTop": "4px",
                     "width": "12px",
                   }
                 }
@@ -29543,7 +29544,7 @@ exports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `
     <div
       aria-label="choose values"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       role="group"
       style={
         Object {
@@ -30649,7 +30650,7 @@ exports[`Storyshots Custom Theme Basic 1`] = `
       dir="auto"
       style={
         Object {
-          "color": "rgba(23,23,23,1.00)",
+          "color": "rgba(255,119,204,1.00)",
           "fontSize": "24px",
           "fontStyle": "normal",
           "fontWeight": "700",
@@ -30718,7 +30719,7 @@ exports[`Storyshots Custom Theme CustomizingBase 1`] = `
       dir="auto"
       style={
         Object {
-          "color": "rgba(23,23,23,1.00)",
+          "color": "rgba(52,211,153,1.00)",
           "fontSize": "32px",
           "fontStyle": "normal",
           "fontWeight": "400",
@@ -33212,7 +33213,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-264-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33283,7 +33284,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-264-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33335,7 +33336,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-3-label"
+              id="field-265-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33406,7 +33407,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-3"
+                id="field-265-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33837,7 +33838,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-267-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33908,7 +33909,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-267-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33960,7 +33961,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-3-label"
+              id="field-268-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -34031,7 +34032,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-3"
+                id="field-268-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -34083,7 +34084,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-4-label"
+              id="field-269-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -34154,7 +34155,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-4"
+                id="field-269-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -34483,6 +34484,7 @@ exports[`Storyshots Examples Todo App 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -38467,7 +38469,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-2-label"
+                id="field-87-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38538,7 +38540,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={false}
-                  id="field-react-aria-0-2"
+                  id="field-87-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38573,7 +38575,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-2-feedback"
+                id="field-87-feedback"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -38650,7 +38652,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-3-label"
+                id="field-88-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38719,10 +38721,10 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   autoCapitalize="sentences"
                   autoComplete="on"
                   autoCorrect="on"
-                  className="css-textinput-11aywtz r-placeholderTextColor-1u2fwfn"
+                  className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={true}
-                  id="field-react-aria-0-3"
+                  id="field-88-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38758,7 +38760,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-3-feedback"
+                id="field-88-feedback"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -38834,7 +38836,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-4-label"
+                id="field-89-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38878,24 +38880,21 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                     "WebkitBoxOrient": "horizontal",
                     "WebkitFlexDirection": "row",
                     "alignItems": "center",
-                    "borderBottomColor": "rgba(220,38,38,1.00)",
+                    "borderBottomColor": "rgba(212,212,212,1.00)",
                     "borderBottomLeftRadius": "4px",
                     "borderBottomRightRadius": "4px",
                     "borderBottomWidth": "1px",
-                    "borderLeftColor": "rgba(220,38,38,1.00)",
+                    "borderLeftColor": "rgba(212,212,212,1.00)",
                     "borderLeftWidth": "1px",
-                    "borderRightColor": "rgba(220,38,38,1.00)",
+                    "borderRightColor": "rgba(212,212,212,1.00)",
                     "borderRightWidth": "1px",
-                    "borderTopColor": "rgba(220,38,38,1.00)",
+                    "borderTopColor": "rgba(212,212,212,1.00)",
                     "borderTopLeftRadius": "4px",
                     "borderTopRightRadius": "4px",
                     "borderTopWidth": "1px",
                     "flexDirection": "row",
                     "msFlexAlign": "center",
                     "msFlexDirection": "row",
-                    "outlineColor": "#dc2626",
-                    "outlineStyle": "solid",
-                    "outlineWidth": "1px",
                     "overflowX": "auto",
                     "overflowY": "auto",
                   }
@@ -38909,7 +38908,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={false}
-                  id="field-react-aria-0-4"
+                  id="field-89-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38945,7 +38944,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-4"
+                id="field-89"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -39144,7 +39143,7 @@ exports[`Storyshots FormControl Playground 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-83-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -39237,7 +39236,7 @@ exports[`Storyshots FormControl Playground 1`] = `
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
             disabled={false}
-            id="field-react-aria-0-2"
+            id="field-83-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -39277,7 +39276,7 @@ exports[`Storyshots FormControl Playground 1`] = `
         />
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-feedback"
+          id="field-83-feedback"
           style={
             Object {
               "marginTop": "8px",
@@ -39450,7 +39449,7 @@ exports[`Storyshots FormControl Usage 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-85-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -39544,7 +39543,7 @@ exports[`Storyshots FormControl Usage 1`] = `
                 defaultValue="12345"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-85-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -39584,7 +39583,7 @@ exports[`Storyshots FormControl Usage 1`] = `
             />
             <div
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-feedback"
+              id="field-85-feedback"
               style={
                 Object {
                   "marginTop": "8px",
@@ -41900,7 +41899,7 @@ exports[`Storyshots Icon All Icons 1`] = `
                         stroke=""
                       >
                         <path
-                          d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+                          d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
                           stroke="currentColor"
                         />
                       </g>
@@ -45311,9 +45310,9 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
           strokeWidth="10"
           style={
             Object {
-              "color": "rgba(250,250,250,1.00)",
-              "height": "20px",
-              "width": "20px",
+              "color": "rgba(2,132,199,1.00)",
+              "height": "40px",
+              "width": "40px",
             }
           }
           viewBox="0 0 100 100"
@@ -47459,6 +47458,7 @@ exports[`Storyshots Input Addons 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -47712,6 +47712,7 @@ exports[`Storyshots Input Elements 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -47790,6 +47791,7 @@ exports[`Storyshots Input Elements 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -47826,9 +47828,26 @@ exports[`Storyshots Input Elements 1`] = `
           className="css-view-1dbjc4n"
         />
         <div
-          className="css-text-901oao"
-          dir="auto"
-        />
+          className="css-view-1dbjc4n"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onContextMenu={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          style={
+            Object {
+              "cursor": "pointer",
+              "msTouchAction": "manipulation",
+              "touchAction": "manipulation",
+            }
+          }
+          tabIndex="0"
+        >
+          <div
+            className="css-text-901oao"
+            dir="auto"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -47958,7 +47977,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-125-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -48002,24 +48021,21 @@ exports[`Storyshots Input Form Controlled 1`] = `
               "WebkitBoxOrient": "horizontal",
               "WebkitFlexDirection": "row",
               "alignItems": "center",
-              "borderBottomColor": "rgba(220,38,38,1.00)",
+              "borderBottomColor": "rgba(212,212,212,1.00)",
               "borderBottomLeftRadius": "4px",
               "borderBottomRightRadius": "4px",
               "borderBottomWidth": "1px",
-              "borderLeftColor": "rgba(220,38,38,1.00)",
+              "borderLeftColor": "rgba(212,212,212,1.00)",
               "borderLeftWidth": "1px",
-              "borderRightColor": "rgba(220,38,38,1.00)",
+              "borderRightColor": "rgba(212,212,212,1.00)",
               "borderRightWidth": "1px",
-              "borderTopColor": "rgba(220,38,38,1.00)",
+              "borderTopColor": "rgba(212,212,212,1.00)",
               "borderTopLeftRadius": "4px",
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
-              "outlineColor": "#dc2626",
-              "outlineStyle": "solid",
-              "outlineWidth": "1px",
               "overflowX": "auto",
               "overflowY": "auto",
             }
@@ -48033,7 +48049,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
             disabled={false}
-            id="field-react-aria-0-2"
+            id="field-125-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -48069,7 +48085,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-125"
           style={
             Object {
               "marginTop": "8px",
@@ -48294,6 +48310,7 @@ exports[`Storyshots Input Password 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48569,6 +48586,7 @@ exports[`Storyshots Input Primary 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48755,6 +48773,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48832,6 +48851,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48909,6 +48929,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48986,6 +49007,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49063,6 +49085,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49140,6 +49163,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49327,6 +49351,7 @@ exports[`Storyshots Input Value Controlled 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49514,6 +49539,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49592,6 +49618,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49669,6 +49696,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49746,6 +49774,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49823,6 +49852,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -50079,6 +50109,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -54936,7 +54967,7 @@ exports[`Storyshots Menu Basic 1`] = `
         aria-haspopup="menu"
         aria-label="More options menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="139"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55094,7 +55125,7 @@ exports[`Storyshots Menu Group 1`] = `
       <div
         aria-haspopup="menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="141"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55251,7 +55282,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
       <div
         aria-haspopup="menu"
         className="css-cursor-18t94o4 css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="145"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55346,6 +55377,12 @@ exports[`Storyshots Menu Menu positions 1`] = `
       />
       <div
         className="css-view-1dbjc4n"
+        style={
+          Object {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          }
+        }
       >
         <select
           onBlur={[Function]}
@@ -55461,8 +55498,6 @@ exports[`Storyshots Menu Menu positions 1`] = `
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
-              "marginLeft": "0px",
-              "marginRight": "0px",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
               "overflowX": "auto",
@@ -55477,6 +55512,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -55519,9 +55555,13 @@ exports[`Storyshots Menu Menu positions 1`] = `
             style={
               Object {
                 "color": "rgba(115,115,115,1.00)",
-                "height": "16px",
+                "height": "24px",
                 "marginRight": "12px",
-                "width": "16px",
+                "paddingBottom": "4px",
+                "paddingLeft": "4px",
+                "paddingRight": "4px",
+                "paddingTop": "4px",
+                "width": "24px",
               }
             }
             viewBox="0 0 24 24"
@@ -55657,7 +55697,7 @@ exports[`Storyshots Menu MenuOptionsGroup 1`] = `
       <div
         aria-haspopup="menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="143"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -56907,6 +56947,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-klosnv"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -58071,7 +58112,7 @@ exports[`Storyshots Mode Basic 1`] = `
         dir="auto"
         style={
           Object {
-            "color": "rgba(23,23,23,1.00)",
+            "color": "rgba(252,165,165,1.00)",
             "fontSize": "24px",
             "fontStyle": "normal",
             "fontWeight": "700",
@@ -59577,6 +59618,12 @@ exports[`Storyshots Popover Popover positions 1`] = `
         />
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginLeft": "0px",
+              "marginRight": "0px",
+            }
+          }
         >
           <select
             onBlur={[Function]}
@@ -59692,8 +59739,6 @@ exports[`Storyshots Popover Popover positions 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginLeft": "0px",
-                "marginRight": "0px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
                 "overflowX": "auto",
@@ -59708,6 +59753,7 @@ exports[`Storyshots Popover Popover positions 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -59750,9 +59796,13 @@ exports[`Storyshots Popover Popover positions 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -62244,7 +62294,7 @@ exports[`Storyshots Radio Controlled Radio 1`] = `
       aria-label="favorite number"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -62693,7 +62743,7 @@ exports[`Storyshots Radio Custom Color 1`] = `
       aria-label="favorite colorscheme"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -63306,7 +63356,7 @@ exports[`Storyshots Radio Custom Icon 1`] = `
       aria-label="pick a choice"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -63908,7 +63958,7 @@ exports[`Storyshots Radio Disabled 1`] = `
       aria-label="select prize"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -64542,7 +64592,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-175-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -64580,7 +64630,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
           aria-label="select prize"
           aria-orientation="vertical"
           className="css-view-1dbjc4n"
-          id="react-aria-0-3"
+          id="react-aria-0-1"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -64676,7 +64726,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -64844,7 +64894,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -65012,7 +65062,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -65098,7 +65148,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-175"
           style={
             Object {
               "marginTop": "8px",
@@ -65279,7 +65329,7 @@ exports[`Storyshots Radio Invalid 1`] = `
       aria-label="select an option"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -65578,7 +65628,7 @@ exports[`Storyshots Radio Playground 1`] = `
         aria-label="pick an option from below"
         aria-orientation="vertical"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="react-aria-0-1"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -66030,7 +66080,7 @@ exports[`Storyshots Radio Size 1`] = `
       aria-label="pick a size"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -66672,7 +66722,7 @@ exports[`Storyshots Radio Uncontrolled Radio 1`] = `
       aria-label="Pick your favorite number"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -67285,7 +67335,7 @@ exports[`Storyshots Radio With Ref 1`] = `
       aria-label="pick an option"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -70799,6 +70849,11 @@ exports[`Storyshots Select Basic 1`] = `
       >
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Choose Service"
@@ -70877,7 +70932,6 @@ exports[`Storyshots Select Basic 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "200px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
@@ -70893,6 +70947,7 @@ exports[`Storyshots Select Basic 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -70936,9 +70991,13 @@ exports[`Storyshots Select Basic 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -71087,7 +71146,7 @@ exports[`Storyshots Select FormControlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-180-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -71141,6 +71200,11 @@ exports[`Storyshots Select FormControlled 1`] = `
         </label>
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Choose Service"
@@ -71209,26 +71273,22 @@ exports[`Storyshots Select FormControlled 1`] = `
                 "WebkitBoxOrient": "horizontal",
                 "WebkitFlexDirection": "row",
                 "alignItems": "center",
-                "borderBottomColor": "rgba(220,38,38,1.00)",
+                "borderBottomColor": "rgba(212,212,212,1.00)",
                 "borderBottomLeftRadius": "4px",
                 "borderBottomRightRadius": "4px",
                 "borderBottomWidth": "1px",
-                "borderLeftColor": "rgba(220,38,38,1.00)",
+                "borderLeftColor": "rgba(212,212,212,1.00)",
                 "borderLeftWidth": "1px",
-                "borderRightColor": "rgba(220,38,38,1.00)",
+                "borderRightColor": "rgba(212,212,212,1.00)",
                 "borderRightWidth": "1px",
-                "borderTopColor": "rgba(220,38,38,1.00)",
+                "borderTopColor": "rgba(212,212,212,1.00)",
                 "borderTopLeftRadius": "4px",
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "200px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
                 "overflowX": "auto",
                 "overflowY": "auto",
               }
@@ -71244,7 +71304,7 @@ exports[`Storyshots Select FormControlled 1`] = `
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
               disabled={false}
-              id="field-react-aria-0-2"
+              id="field-180-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -71289,9 +71349,13 @@ exports[`Storyshots Select FormControlled 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -71308,7 +71372,7 @@ exports[`Storyshots Select FormControlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-180"
           style={
             Object {
               "marginTop": "8px",
@@ -71507,7 +71571,7 @@ exports[`Storyshots Select Select Long list 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-182-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -71543,6 +71607,11 @@ exports[`Storyshots Select Select Long list 1`] = `
         </label>
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Select a Color"
@@ -71834,7 +71903,6 @@ exports[`Storyshots Select Select Long list 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "100px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
@@ -71851,7 +71919,7 @@ exports[`Storyshots Select Select Long list 1`] = `
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
               disabled={false}
-              id="field-react-aria-0-2"
+              id="field-182-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -71895,9 +71963,13 @@ exports[`Storyshots Select Select Long list 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -74174,9 +74246,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={70}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74394,9 +74466,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-5"
+                    aria-labelledby="react-aria-0-4"
                     aria-valuetext={70}
-                    id="react-aria-0-5-0"
+                    id="react-aria-0-4-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74614,9 +74686,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-8"
+                    aria-labelledby="react-aria-0-7"
                     aria-valuetext={70}
-                    id="react-aria-0-8-0"
+                    id="react-aria-0-7-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74958,9 +75030,9 @@ exports[`Storyshots Slider Customized 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -75288,9 +75360,9 @@ exports[`Storyshots Slider Disabled 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -75443,7 +75515,7 @@ exports[`Storyshots Slider Form Controlled 1`] = `
         >
           <label
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2-label"
+            id="field-198-label"
             style={
               Object {
                 "WebkitBoxDirection": "normal",
@@ -75671,9 +75743,9 @@ exports[`Storyshots Slider Form Controlled 1`] = `
                     }
                   >
                     <input
-                      aria-labelledby="react-aria-0-3"
+                      aria-labelledby="react-aria-0-1"
                       aria-valuetext={50}
-                      id="react-aria-0-3-0"
+                      id="react-aria-0-1-0"
                       max={100}
                       min={0}
                       onBlur={[Function]}
@@ -75691,7 +75763,7 @@ exports[`Storyshots Slider Form Controlled 1`] = `
           </div>
           <div
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2"
+            id="field-198"
             style={
               Object {
                 "marginTop": "8px",
@@ -76073,9 +76145,9 @@ exports[`Storyshots Slider Playground 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -76401,9 +76473,9 @@ exports[`Storyshots Slider ReadOnly 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -76740,9 +76812,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={40}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -76960,9 +77032,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-5"
+                    aria-labelledby="react-aria-0-4"
                     aria-valuetext={60}
-                    id="react-aria-0-5-0"
+                    id="react-aria-0-4-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -77180,9 +77252,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-8"
+                    aria-labelledby="react-aria-0-7"
                     aria-valuetext={80}
-                    id="react-aria-0-8-0"
+                    id="react-aria-0-7-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -77512,9 +77584,9 @@ exports[`Storyshots Slider Usage 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -77907,9 +77979,9 @@ exports[`Storyshots Slider Value 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={70}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -78236,10 +78308,10 @@ exports[`Storyshots Slider Vertical 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-orientation="vertical"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -83760,6 +83832,7 @@ exports[`Storyshots TextArea Default 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -83950,15 +84023,15 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
                 "WebkitBoxOrient": "horizontal",
                 "WebkitFlexDirection": "row",
                 "alignItems": "center",
-                "borderBottomColor": "rgba(220,38,38,1.00)",
+                "borderBottomColor": "rgba(212,212,212,1.00)",
                 "borderBottomLeftRadius": "4px",
                 "borderBottomRightRadius": "4px",
                 "borderBottomWidth": "1px",
-                "borderLeftColor": "rgba(220,38,38,1.00)",
+                "borderLeftColor": "rgba(212,212,212,1.00)",
                 "borderLeftWidth": "1px",
-                "borderRightColor": "rgba(220,38,38,1.00)",
+                "borderRightColor": "rgba(212,212,212,1.00)",
                 "borderRightWidth": "1px",
-                "borderTopColor": "rgba(220,38,38,1.00)",
+                "borderTopColor": "rgba(212,212,212,1.00)",
                 "borderTopLeftRadius": "4px",
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
@@ -83967,9 +84040,6 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
                 "marginBottom": "20px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
                 "overflowX": "auto",
                 "overflowY": "auto",
               }
@@ -83983,6 +84053,7 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -84094,9 +84165,10 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               autoCapitalize="sentences"
               autoComplete="on"
               autoCorrect="on"
-              className="css-textinput-11aywtz r-placeholderTextColor-1u2fwfn"
+              className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
               disabled={true}
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -84357,6 +84429,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84436,6 +84509,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84515,6 +84589,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84594,6 +84669,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84673,6 +84749,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84752,6 +84829,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84945,6 +85023,7 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -88680,6 +88759,12 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
       />
       <div
         className="css-view-1dbjc4n"
+        style={
+          Object {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          }
+        }
       >
         <select
           onBlur={[Function]}
@@ -88790,8 +88875,6 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
-              "marginLeft": "0px",
-              "marginRight": "0px",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
               "overflowX": "auto",
@@ -88806,6 +88889,7 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -88848,9 +88932,13 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             style={
               Object {
                 "color": "rgba(115,115,115,1.00)",
-                "height": "16px",
+                "height": "24px",
                 "marginRight": "12px",
-                "width": "16px",
+                "paddingBottom": "4px",
+                "paddingLeft": "4px",
+                "paddingRight": "4px",
+                "paddingTop": "4px",
+                "width": "24px",
               }
             }
             viewBox="0 0 24 24"
@@ -90034,6 +90122,7 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   autoCorrect="on"
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
+                  id="undefined-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -90765,6 +90854,7 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     autoCorrect="on"
                     className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                     dir="auto"
+                    id="undefined-input"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
@@ -93876,6 +93966,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -94056,6 +94147,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
diff --git a/example/tests/storybook.test.js.snap.web b/example/tests/storybook.test.js.snap.web
index 4032f7aa5..ab1cc2167 100644
--- a/example/tests/storybook.test.js.snap.web
+++ b/example/tests/storybook.test.js.snap.web
@@ -1298,8 +1298,8 @@ exports[`Storyshots Alert Basic 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -1648,8 +1648,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -1890,8 +1890,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -2132,8 +2132,8 @@ exports[`Storyshots Alert ColorScheme 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -2496,8 +2496,8 @@ exports[`Storyshots Alert Composition 1`] = `
                   style={
                     Object {
                       "color": "rgba(75,85,99,1.00)",
-                      "height": "20px",
-                      "width": "20px",
+                      "height": "12px",
+                      "width": "12px",
                     }
                   }
                   viewBox="0 0 24 24"
@@ -2966,8 +2966,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3173,8 +3173,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3375,8 +3375,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3577,8 +3577,8 @@ exports[`Storyshots Alert Status 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -3900,8 +3900,8 @@ exports[`Storyshots Alert Usage 1`] = `
                 style={
                   Object {
                     "color": "rgba(75,85,99,1.00)",
-                    "height": "20px",
-                    "width": "20px",
+                    "height": "12px",
+                    "width": "12px",
                   }
                 }
                 viewBox="0 0 24 24"
@@ -5573,8 +5573,8 @@ exports[`Storyshots Alert action 1`] = `
                     style={
                       Object {
                         "color": "rgba(75,85,99,1.00)",
-                        "height": "20px",
-                        "width": "20px",
+                        "height": "12px",
+                        "width": "12px",
                       }
                     }
                     viewBox="0 0 24 24"
@@ -24226,7 +24226,7 @@ exports[`Storyshots Checkbox Checkbox Group 1`] = `
         <div
           aria-label="pick an item"
           className="css-view-1dbjc4n"
-          id="react-aria-0-2"
+          id="react-aria-0-1"
           role="group"
           style={
             Object {
@@ -24996,7 +24996,7 @@ exports[`Storyshots Checkbox Controlled checkbox 1`] = `
     <div
       aria-label="choose numbers"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       role="group"
       style={
         Object {
@@ -27459,7 +27459,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
         >
           <label
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2-label"
+            id="field-69-label"
             style={
               Object {
                 "WebkitBoxDirection": "normal",
@@ -27512,7 +27512,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           <div
             aria-label="choose multiple items"
             className="css-view-1dbjc4n"
-            id="react-aria-0-3"
+            id="react-aria-0-1"
             role="group"
             style={
               Object {
@@ -27611,7 +27611,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -27780,7 +27780,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -27949,7 +27949,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -28108,7 +28108,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                   />
                   <div
                     className="css-view-1dbjc4n"
-                    id="field-react-aria-0-2"
+                    id="field-69"
                     style={
                       Object {
                         "WebkitAlignItems": "center",
@@ -28183,7 +28183,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
           </div>
           <div
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2"
+            id="field-69"
             style={
               Object {
                 "marginTop": "8px",
@@ -28194,14 +28194,14 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
               className="css-view-1dbjc4n"
               style={
                 Object {
-                  "WebkitAlignItems": "center",
-                  "WebkitBoxAlign": "center",
+                  "WebkitAlignItems": "flex-start",
+                  "WebkitBoxAlign": "start",
                   "WebkitBoxDirection": "normal",
                   "WebkitBoxOrient": "horizontal",
                   "WebkitFlexDirection": "row",
-                  "alignItems": "center",
+                  "alignItems": "flex-start",
                   "flexDirection": "row",
-                  "msFlexAlign": "center",
+                  "msFlexAlign": "start",
                   "msFlexDirection": "row",
                 }
               }
@@ -28214,6 +28214,7 @@ exports[`Storyshots Checkbox Form Controlled 1`] = `
                     "color": "rgba(220,38,38,1.00)",
                     "fontSize": "12px",
                     "height": "12px",
+                    "marginTop": "4px",
                     "width": "12px",
                   }
                 }
@@ -29543,7 +29544,7 @@ exports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `
     <div
       aria-label="choose values"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       role="group"
       style={
         Object {
@@ -30649,7 +30650,7 @@ exports[`Storyshots Custom Theme Basic 1`] = `
       dir="auto"
       style={
         Object {
-          "color": "rgba(23,23,23,1.00)",
+          "color": "rgba(255,119,204,1.00)",
           "fontSize": "24px",
           "fontStyle": "normal",
           "fontWeight": "700",
@@ -30718,7 +30719,7 @@ exports[`Storyshots Custom Theme CustomizingBase 1`] = `
       dir="auto"
       style={
         Object {
-          "color": "rgba(23,23,23,1.00)",
+          "color": "rgba(52,211,153,1.00)",
           "fontSize": "32px",
           "fontStyle": "normal",
           "fontWeight": "400",
@@ -33212,7 +33213,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-264-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33283,7 +33284,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-264-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33335,7 +33336,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-3-label"
+              id="field-265-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33406,7 +33407,7 @@ exports[`Storyshots Examples Signin Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-3"
+                id="field-265-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33837,7 +33838,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-267-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -33908,7 +33909,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-267-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -33960,7 +33961,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-3-label"
+              id="field-268-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -34031,7 +34032,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-3"
+                id="field-268-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -34083,7 +34084,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-4-label"
+              id="field-269-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -34154,7 +34155,7 @@ exports[`Storyshots Examples Signup Screen 1`] = `
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-4"
+                id="field-269-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -34483,6 +34484,7 @@ exports[`Storyshots Examples Todo App 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -38467,7 +38469,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-2-label"
+                id="field-87-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38538,7 +38540,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={false}
-                  id="field-react-aria-0-2"
+                  id="field-87-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38573,7 +38575,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-2-feedback"
+                id="field-87-feedback"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -38650,7 +38652,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-3-label"
+                id="field-88-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38719,10 +38721,10 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   autoCapitalize="sentences"
                   autoComplete="on"
                   autoCorrect="on"
-                  className="css-textinput-11aywtz r-placeholderTextColor-1u2fwfn"
+                  className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={true}
-                  id="field-react-aria-0-3"
+                  id="field-88-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38758,7 +38760,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-3-feedback"
+                id="field-88-feedback"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -38834,7 +38836,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
             >
               <label
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-4-label"
+                id="field-89-label"
                 style={
                   Object {
                     "WebkitBoxDirection": "normal",
@@ -38878,24 +38880,21 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                     "WebkitBoxOrient": "horizontal",
                     "WebkitFlexDirection": "row",
                     "alignItems": "center",
-                    "borderBottomColor": "rgba(220,38,38,1.00)",
+                    "borderBottomColor": "rgba(212,212,212,1.00)",
                     "borderBottomLeftRadius": "4px",
                     "borderBottomRightRadius": "4px",
                     "borderBottomWidth": "1px",
-                    "borderLeftColor": "rgba(220,38,38,1.00)",
+                    "borderLeftColor": "rgba(212,212,212,1.00)",
                     "borderLeftWidth": "1px",
-                    "borderRightColor": "rgba(220,38,38,1.00)",
+                    "borderRightColor": "rgba(212,212,212,1.00)",
                     "borderRightWidth": "1px",
-                    "borderTopColor": "rgba(220,38,38,1.00)",
+                    "borderTopColor": "rgba(212,212,212,1.00)",
                     "borderTopLeftRadius": "4px",
                     "borderTopRightRadius": "4px",
                     "borderTopWidth": "1px",
                     "flexDirection": "row",
                     "msFlexAlign": "center",
                     "msFlexDirection": "row",
-                    "outlineColor": "#dc2626",
-                    "outlineStyle": "solid",
-                    "outlineWidth": "1px",
                     "overflowX": "auto",
                     "overflowY": "auto",
                   }
@@ -38909,7 +38908,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
                   disabled={false}
-                  id="field-react-aria-0-4"
+                  id="field-89-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -38945,7 +38944,7 @@ exports[`Storyshots FormControl CustomStyle 1`] = `
               </div>
               <div
                 className="css-view-1dbjc4n"
-                id="field-react-aria-0-4"
+                id="field-89"
                 style={
                   Object {
                     "marginTop": "8px",
@@ -39144,7 +39143,7 @@ exports[`Storyshots FormControl Playground 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-83-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -39237,7 +39236,7 @@ exports[`Storyshots FormControl Playground 1`] = `
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
             disabled={false}
-            id="field-react-aria-0-2"
+            id="field-83-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -39277,7 +39276,7 @@ exports[`Storyshots FormControl Playground 1`] = `
         />
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-feedback"
+          id="field-83-feedback"
           style={
             Object {
               "marginTop": "8px",
@@ -39450,7 +39449,7 @@ exports[`Storyshots FormControl Usage 1`] = `
           >
             <label
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-label"
+              id="field-85-label"
               style={
                 Object {
                   "WebkitBoxDirection": "normal",
@@ -39544,7 +39543,7 @@ exports[`Storyshots FormControl Usage 1`] = `
                 defaultValue="12345"
                 dir="auto"
                 disabled={false}
-                id="field-react-aria-0-2"
+                id="field-85-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -39584,7 +39583,7 @@ exports[`Storyshots FormControl Usage 1`] = `
             />
             <div
               className="css-view-1dbjc4n"
-              id="field-react-aria-0-2-feedback"
+              id="field-85-feedback"
               style={
                 Object {
                   "marginTop": "8px",
@@ -41900,7 +41899,7 @@ exports[`Storyshots Icon All Icons 1`] = `
                         stroke=""
                       >
                         <path
-                          d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+                          d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
                           stroke="currentColor"
                         />
                       </g>
@@ -45311,9 +45310,9 @@ exports[`Storyshots IconButton SVGIcon 1`] = `
           strokeWidth="10"
           style={
             Object {
-              "color": "rgba(250,250,250,1.00)",
-              "height": "20px",
-              "width": "20px",
+              "color": "rgba(2,132,199,1.00)",
+              "height": "40px",
+              "width": "40px",
             }
           }
           viewBox="0 0 100 100"
@@ -47459,6 +47458,7 @@ exports[`Storyshots Input Addons 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -47712,6 +47712,7 @@ exports[`Storyshots Input Elements 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -47790,6 +47791,7 @@ exports[`Storyshots Input Elements 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -47826,9 +47828,26 @@ exports[`Storyshots Input Elements 1`] = `
           className="css-view-1dbjc4n"
         />
         <div
-          className="css-text-901oao"
-          dir="auto"
-        />
+          className="css-view-1dbjc4n"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onContextMenu={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          style={
+            Object {
+              "cursor": "pointer",
+              "msTouchAction": "manipulation",
+              "touchAction": "manipulation",
+            }
+          }
+          tabIndex="0"
+        >
+          <div
+            className="css-text-901oao"
+            dir="auto"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -47958,7 +47977,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-125-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -48002,24 +48021,21 @@ exports[`Storyshots Input Form Controlled 1`] = `
               "WebkitBoxOrient": "horizontal",
               "WebkitFlexDirection": "row",
               "alignItems": "center",
-              "borderBottomColor": "rgba(220,38,38,1.00)",
+              "borderBottomColor": "rgba(212,212,212,1.00)",
               "borderBottomLeftRadius": "4px",
               "borderBottomRightRadius": "4px",
               "borderBottomWidth": "1px",
-              "borderLeftColor": "rgba(220,38,38,1.00)",
+              "borderLeftColor": "rgba(212,212,212,1.00)",
               "borderLeftWidth": "1px",
-              "borderRightColor": "rgba(220,38,38,1.00)",
+              "borderRightColor": "rgba(212,212,212,1.00)",
               "borderRightWidth": "1px",
-              "borderTopColor": "rgba(220,38,38,1.00)",
+              "borderTopColor": "rgba(212,212,212,1.00)",
               "borderTopLeftRadius": "4px",
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
-              "outlineColor": "#dc2626",
-              "outlineStyle": "solid",
-              "outlineWidth": "1px",
               "overflowX": "auto",
               "overflowY": "auto",
             }
@@ -48033,7 +48049,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
             dir="auto"
             disabled={false}
-            id="field-react-aria-0-2"
+            id="field-125-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -48069,7 +48085,7 @@ exports[`Storyshots Input Form Controlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-125"
           style={
             Object {
               "marginTop": "8px",
@@ -48294,6 +48310,7 @@ exports[`Storyshots Input Password 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48569,6 +48586,7 @@ exports[`Storyshots Input Primary 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48755,6 +48773,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48832,6 +48851,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48909,6 +48929,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -48986,6 +49007,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49063,6 +49085,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49140,6 +49163,7 @@ exports[`Storyshots Input Size  1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49327,6 +49351,7 @@ exports[`Storyshots Input Value Controlled 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49514,6 +49539,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49592,6 +49618,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49669,6 +49696,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49746,6 +49774,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -49823,6 +49852,7 @@ exports[`Storyshots Input Variants 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -50079,6 +50109,7 @@ exports[`Storyshots KeyboardAvoidingView Basic 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -54936,7 +54967,7 @@ exports[`Storyshots Menu Basic 1`] = `
         aria-haspopup="menu"
         aria-label="More options menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="139"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55094,7 +55125,7 @@ exports[`Storyshots Menu Group 1`] = `
       <div
         aria-haspopup="menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="141"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55251,7 +55282,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
       <div
         aria-haspopup="menu"
         className="css-cursor-18t94o4 css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="145"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -55346,6 +55377,12 @@ exports[`Storyshots Menu Menu positions 1`] = `
       />
       <div
         className="css-view-1dbjc4n"
+        style={
+          Object {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          }
+        }
       >
         <select
           onBlur={[Function]}
@@ -55461,8 +55498,6 @@ exports[`Storyshots Menu Menu positions 1`] = `
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
-              "marginLeft": "0px",
-              "marginRight": "0px",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
               "overflowX": "auto",
@@ -55477,6 +55512,7 @@ exports[`Storyshots Menu Menu positions 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -55519,9 +55555,13 @@ exports[`Storyshots Menu Menu positions 1`] = `
             style={
               Object {
                 "color": "rgba(115,115,115,1.00)",
-                "height": "16px",
+                "height": "24px",
                 "marginRight": "12px",
-                "width": "16px",
+                "paddingBottom": "4px",
+                "paddingLeft": "4px",
+                "paddingRight": "4px",
+                "paddingTop": "4px",
+                "width": "24px",
               }
             }
             viewBox="0 0 24 24"
@@ -55657,7 +55697,7 @@ exports[`Storyshots Menu MenuOptionsGroup 1`] = `
       <div
         aria-haspopup="menu"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="143"
         onBlur={[Function]}
         onClick={[Function]}
         onContextMenu={[Function]}
@@ -56907,6 +56947,7 @@ exports[`Storyshots Modal Modal Ref Examples 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-klosnv"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -58071,7 +58112,7 @@ exports[`Storyshots Mode Basic 1`] = `
         dir="auto"
         style={
           Object {
-            "color": "rgba(23,23,23,1.00)",
+            "color": "rgba(252,165,165,1.00)",
             "fontSize": "24px",
             "fontStyle": "normal",
             "fontWeight": "700",
@@ -59577,6 +59618,12 @@ exports[`Storyshots Popover Popover positions 1`] = `
         />
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginLeft": "0px",
+              "marginRight": "0px",
+            }
+          }
         >
           <select
             onBlur={[Function]}
@@ -59692,8 +59739,6 @@ exports[`Storyshots Popover Popover positions 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginLeft": "0px",
-                "marginRight": "0px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
                 "overflowX": "auto",
@@ -59708,6 +59753,7 @@ exports[`Storyshots Popover Popover positions 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -59750,9 +59796,13 @@ exports[`Storyshots Popover Popover positions 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -62244,7 +62294,7 @@ exports[`Storyshots Radio Controlled Radio 1`] = `
       aria-label="favorite number"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -62693,7 +62743,7 @@ exports[`Storyshots Radio Custom Color 1`] = `
       aria-label="favorite colorscheme"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -63306,7 +63356,7 @@ exports[`Storyshots Radio Custom Icon 1`] = `
       aria-label="pick a choice"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -63908,7 +63958,7 @@ exports[`Storyshots Radio Disabled 1`] = `
       aria-label="select prize"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -64542,7 +64592,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-175-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -64580,7 +64630,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
           aria-label="select prize"
           aria-orientation="vertical"
           className="css-view-1dbjc4n"
-          id="react-aria-0-3"
+          id="react-aria-0-1"
           onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -64676,7 +64726,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -64844,7 +64894,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -65012,7 +65062,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
                 />
                 <div
                   className="css-view-1dbjc4n"
-                  id="field-react-aria-0-2"
+                  id="field-174"
                   style={
                     Object {
                       "WebkitAlignItems": "center",
@@ -65098,7 +65148,7 @@ exports[`Storyshots Radio Form Controlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-175"
           style={
             Object {
               "marginTop": "8px",
@@ -65279,7 +65329,7 @@ exports[`Storyshots Radio Invalid 1`] = `
       aria-label="select an option"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -65578,7 +65628,7 @@ exports[`Storyshots Radio Playground 1`] = `
         aria-label="pick an option from below"
         aria-orientation="vertical"
         className="css-view-1dbjc4n"
-        id="react-aria-0-2"
+        id="react-aria-0-1"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -66030,7 +66080,7 @@ exports[`Storyshots Radio Size 1`] = `
       aria-label="pick a size"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -66672,7 +66722,7 @@ exports[`Storyshots Radio Uncontrolled Radio 1`] = `
       aria-label="Pick your favorite number"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -67285,7 +67335,7 @@ exports[`Storyshots Radio With Ref 1`] = `
       aria-label="pick an option"
       aria-orientation="vertical"
       className="css-view-1dbjc4n"
-      id="react-aria-0-2"
+      id="react-aria-0-1"
       onBlur={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
@@ -70799,6 +70849,11 @@ exports[`Storyshots Select Basic 1`] = `
       >
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Choose Service"
@@ -70877,7 +70932,6 @@ exports[`Storyshots Select Basic 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "200px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
@@ -70893,6 +70947,7 @@ exports[`Storyshots Select Basic 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -70936,9 +70991,13 @@ exports[`Storyshots Select Basic 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -71087,7 +71146,7 @@ exports[`Storyshots Select FormControlled 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-180-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -71141,6 +71200,11 @@ exports[`Storyshots Select FormControlled 1`] = `
         </label>
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Choose Service"
@@ -71209,26 +71273,22 @@ exports[`Storyshots Select FormControlled 1`] = `
                 "WebkitBoxOrient": "horizontal",
                 "WebkitFlexDirection": "row",
                 "alignItems": "center",
-                "borderBottomColor": "rgba(220,38,38,1.00)",
+                "borderBottomColor": "rgba(212,212,212,1.00)",
                 "borderBottomLeftRadius": "4px",
                 "borderBottomRightRadius": "4px",
                 "borderBottomWidth": "1px",
-                "borderLeftColor": "rgba(220,38,38,1.00)",
+                "borderLeftColor": "rgba(212,212,212,1.00)",
                 "borderLeftWidth": "1px",
-                "borderRightColor": "rgba(220,38,38,1.00)",
+                "borderRightColor": "rgba(212,212,212,1.00)",
                 "borderRightWidth": "1px",
-                "borderTopColor": "rgba(220,38,38,1.00)",
+                "borderTopColor": "rgba(212,212,212,1.00)",
                 "borderTopLeftRadius": "4px",
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "200px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
                 "overflowX": "auto",
                 "overflowY": "auto",
               }
@@ -71244,7 +71304,7 @@ exports[`Storyshots Select FormControlled 1`] = `
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
               disabled={false}
-              id="field-react-aria-0-2"
+              id="field-180-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -71289,9 +71349,13 @@ exports[`Storyshots Select FormControlled 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -71308,7 +71372,7 @@ exports[`Storyshots Select FormControlled 1`] = `
         </div>
         <div
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2"
+          id="field-180"
           style={
             Object {
               "marginTop": "8px",
@@ -71507,7 +71571,7 @@ exports[`Storyshots Select Select Long list 1`] = `
       >
         <label
           className="css-view-1dbjc4n"
-          id="field-react-aria-0-2-label"
+          id="field-182-label"
           style={
             Object {
               "WebkitBoxDirection": "normal",
@@ -71543,6 +71607,11 @@ exports[`Storyshots Select Select Long list 1`] = `
         </label>
         <div
           className="css-view-1dbjc4n"
+          style={
+            Object {
+              "marginTop": "4px",
+            }
+          }
         >
           <select
             aria-label="Select a Color"
@@ -71834,7 +71903,6 @@ exports[`Storyshots Select Select Long list 1`] = `
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
                 "flexDirection": "row",
-                "marginTop": "4px",
                 "minWidth": "100px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
@@ -71851,7 +71919,7 @@ exports[`Storyshots Select Select Long list 1`] = `
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
               dir="auto"
               disabled={false}
-              id="field-react-aria-0-2"
+              id="field-182-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -71895,9 +71963,13 @@ exports[`Storyshots Select Select Long list 1`] = `
               style={
                 Object {
                   "color": "rgba(115,115,115,1.00)",
-                  "height": "16px",
+                  "height": "24px",
                   "marginRight": "12px",
-                  "width": "16px",
+                  "paddingBottom": "4px",
+                  "paddingLeft": "4px",
+                  "paddingRight": "4px",
+                  "paddingTop": "4px",
+                  "width": "24px",
                 }
               }
               viewBox="0 0 24 24"
@@ -74174,9 +74246,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={70}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74394,9 +74466,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-5"
+                    aria-labelledby="react-aria-0-4"
                     aria-valuetext={70}
-                    id="react-aria-0-5-0"
+                    id="react-aria-0-4-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74614,9 +74686,9 @@ exports[`Storyshots Slider Color 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-8"
+                    aria-labelledby="react-aria-0-7"
                     aria-valuetext={70}
-                    id="react-aria-0-8-0"
+                    id="react-aria-0-7-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -74958,9 +75030,9 @@ exports[`Storyshots Slider Customized 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -75288,9 +75360,9 @@ exports[`Storyshots Slider Disabled 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -75443,7 +75515,7 @@ exports[`Storyshots Slider Form Controlled 1`] = `
         >
           <label
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2-label"
+            id="field-198-label"
             style={
               Object {
                 "WebkitBoxDirection": "normal",
@@ -75671,9 +75743,9 @@ exports[`Storyshots Slider Form Controlled 1`] = `
                     }
                   >
                     <input
-                      aria-labelledby="react-aria-0-3"
+                      aria-labelledby="react-aria-0-1"
                       aria-valuetext={50}
-                      id="react-aria-0-3-0"
+                      id="react-aria-0-1-0"
                       max={100}
                       min={0}
                       onBlur={[Function]}
@@ -75691,7 +75763,7 @@ exports[`Storyshots Slider Form Controlled 1`] = `
           </div>
           <div
             className="css-view-1dbjc4n"
-            id="field-react-aria-0-2"
+            id="field-198"
             style={
               Object {
                 "marginTop": "8px",
@@ -76073,9 +76145,9 @@ exports[`Storyshots Slider Playground 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -76401,9 +76473,9 @@ exports[`Storyshots Slider ReadOnly 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={50}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -76740,9 +76812,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={40}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -76960,9 +77032,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-5"
+                    aria-labelledby="react-aria-0-4"
                     aria-valuetext={60}
-                    id="react-aria-0-5-0"
+                    id="react-aria-0-4-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -77180,9 +77252,9 @@ exports[`Storyshots Slider Size 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-8"
+                    aria-labelledby="react-aria-0-7"
                     aria-valuetext={80}
-                    id="react-aria-0-8-0"
+                    id="react-aria-0-7-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -77512,9 +77584,9 @@ exports[`Storyshots Slider Usage 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -77907,9 +77979,9 @@ exports[`Storyshots Slider Value 1`] = `
                   }
                 >
                   <input
-                    aria-labelledby="react-aria-0-2"
+                    aria-labelledby="react-aria-0-1"
                     aria-valuetext={70}
-                    id="react-aria-0-2-0"
+                    id="react-aria-0-1-0"
                     max={100}
                     min={0}
                     onBlur={[Function]}
@@ -78236,10 +78308,10 @@ exports[`Storyshots Slider Vertical 1`] = `
                 }
               >
                 <input
-                  aria-labelledby="react-aria-0-2"
+                  aria-labelledby="react-aria-0-1"
                   aria-orientation="vertical"
                   aria-valuetext={70}
-                  id="react-aria-0-2-0"
+                  id="react-aria-0-1-0"
                   max={100}
                   min={0}
                   onBlur={[Function]}
@@ -83760,6 +83832,7 @@ exports[`Storyshots TextArea Default 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -83950,15 +84023,15 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
                 "WebkitBoxOrient": "horizontal",
                 "WebkitFlexDirection": "row",
                 "alignItems": "center",
-                "borderBottomColor": "rgba(220,38,38,1.00)",
+                "borderBottomColor": "rgba(212,212,212,1.00)",
                 "borderBottomLeftRadius": "4px",
                 "borderBottomRightRadius": "4px",
                 "borderBottomWidth": "1px",
-                "borderLeftColor": "rgba(220,38,38,1.00)",
+                "borderLeftColor": "rgba(212,212,212,1.00)",
                 "borderLeftWidth": "1px",
-                "borderRightColor": "rgba(220,38,38,1.00)",
+                "borderRightColor": "rgba(212,212,212,1.00)",
                 "borderRightWidth": "1px",
-                "borderTopColor": "rgba(220,38,38,1.00)",
+                "borderTopColor": "rgba(212,212,212,1.00)",
                 "borderTopLeftRadius": "4px",
                 "borderTopRightRadius": "4px",
                 "borderTopWidth": "1px",
@@ -83967,9 +84040,6 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
                 "marginBottom": "20px",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",
-                "outlineColor": "#dc2626",
-                "outlineStyle": "solid",
-                "outlineWidth": "1px",
                 "overflowX": "auto",
                 "overflowY": "auto",
               }
@@ -83983,6 +84053,7 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -84094,9 +84165,10 @@ exports[`Storyshots TextArea InValid and Disabled 1`] = `
               autoCapitalize="sentences"
               autoComplete="on"
               autoCorrect="on"
-              className="css-textinput-11aywtz r-placeholderTextColor-1u2fwfn"
+              className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
               disabled={true}
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -84357,6 +84429,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84436,6 +84509,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84515,6 +84589,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84594,6 +84669,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84673,6 +84749,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84752,6 +84829,7 @@ exports[`Storyshots TextArea Sizes 1`] = `
                 autoCorrect="on"
                 className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                 dir="auto"
+                id="undefined-input"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -84945,6 +85023,7 @@ exports[`Storyshots TextArea Value Controlled 1`] = `
           autoCorrect="on"
           className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
           dir="auto"
+          id="undefined-input"
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
@@ -88680,6 +88759,12 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
       />
       <div
         className="css-view-1dbjc4n"
+        style={
+          Object {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          }
+        }
       >
         <select
           onBlur={[Function]}
@@ -88790,8 +88875,6 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
               "borderTopRightRadius": "4px",
               "borderTopWidth": "1px",
               "flexDirection": "row",
-              "marginLeft": "0px",
-              "marginRight": "0px",
               "msFlexAlign": "center",
               "msFlexDirection": "row",
               "overflowX": "auto",
@@ -88806,6 +88889,7 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             autoCorrect="on"
             className="css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao"
             dir="auto"
+            id="undefined-input"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
@@ -88848,9 +88932,13 @@ exports[`Storyshots Tooltip Tooltip Positions 1`] = `
             style={
               Object {
                 "color": "rgba(115,115,115,1.00)",
-                "height": "16px",
+                "height": "24px",
                 "marginRight": "12px",
-                "width": "16px",
+                "paddingBottom": "4px",
+                "paddingLeft": "4px",
+                "paddingRight": "4px",
+                "paddingTop": "4px",
+                "width": "24px",
               }
             }
             viewBox="0 0 24 24"
@@ -90034,6 +90122,7 @@ exports[`Storyshots Transitions Slide wrapped inside parent 1`] = `
                   autoCorrect="on"
                   className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                   dir="auto"
+                  id="undefined-input"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}
@@ -90765,6 +90854,7 @@ exports[`Storyshots Transitions SlideComposition 1`] = `
                     autoCorrect="on"
                     className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
                     dir="auto"
+                    id="undefined-input"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
@@ -93876,6 +93966,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
@@ -94056,6 +94147,7 @@ exports[`Storyshots useClipboard Usage 1`] = `
               autoCorrect="on"
               className="css-textinput-11aywtz r-placeholderTextColor-uek9y"
               dir="auto"
+              id="undefined-input"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}