@ornikar/bumper 2.4.2-canary.9a20239c7f70ea30ccc58f4e866b2322585529c6.0 → 2.5.1-canary.9789a78a274b9d336c93fc42d4a6561d0d61ff73.0

package/src/components/primitives/__snapshots__/View.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives/View View 1`] = `
+exports[`bumper/Primitives View 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -15,9 +15,9 @@ exports[`bumper/Primitives/View View 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#F7F4EE",
-        "height": 500,
-        "width": 50,
+        "backgroundColor": "#563B56",
+        "height": 120,
+        "width": 120,
       }
     }
   />

package/src/components/primitives/__snapshots_web__/Center.stories.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Center 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="_display-flex _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _width-t-size-size42947727 _height-t-size-size42947727 _backgroundColor-bg--accent-1633109644"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385413 _height-t-size-size1385413 _backgroundColor-bg--base--m757972454"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/components/primitives/__snapshots_web__/Stack.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives/Stacks Stacks 1`] = `
+exports[`bumper/Primitives Stack 1`] = `
 <DocumentFragment>
   <div
     class="css-view-175oi2r r-flex-13awgt0"
@@ -17,170 +17,31 @@ exports[`bumper/Primitives/Stacks Stacks 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
-            class="font_unset _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px"
-          >
-            - space is deprecated, use gap instead - direction from NB is now flexDirection- reversed from NB is now direction (rtl/ltr)
-          </span>
           <div
-            class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
+            class="is_HStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-t-space-spa94482162"
           >
-            <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
-              data-disable-theme="true"
-            >
-              Stack
-            </span>
             <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347202 _lineHeight-f-lineHeigh1544154441 _letterSpacing-f-letterSpa1195674548 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                Demo
-              </span>
-              <div
-                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column-reve113220 _gap-t-space-2"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  1
-                </span>
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  2
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-          >
-            <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
-              data-disable-theme="true"
-            >
-              HStack
-            </span>
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--accent-1633109644 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
             <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347202 _lineHeight-f-lineHeigh1544154441 _letterSpacing-f-letterSpa1195674548 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                Default
-              </span>
-              <div
-                class="is_HStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  1
-                </span>
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  2
-                </span>
-              </div>
-            </div>
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--highlig2124217748 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
             <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347202 _lineHeight-f-lineHeigh1544154441 _letterSpacing-f-letterSpa1195674548 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                With gap (space)
-              </span>
-              <div
-                class="is_HStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-t-space-2"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _backgroundColor-bg--accent-1633109644"
-                  data-disable-theme="true"
-                >
-                  1
-                </span>
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _backgroundColor-bg--accent-1633109644"
-                  data-disable-theme="true"
-                >
-                  2
-                </span>
-              </div>
-            </div>
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--highlig1870923013 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
           </div>
           <div
-            class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
+            class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-spa94482162 _marginTop-t-space-spa1366020313"
           >
-            <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
-              data-disable-theme="true"
-            >
-              VStack
-            </span>
             <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347202 _lineHeight-f-lineHeigh1544154441 _letterSpacing-f-letterSpa1195674548 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                Default
-              </span>
-              <div
-                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  1
-                </span>
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-                  data-disable-theme="true"
-                >
-                  2
-                </span>
-              </div>
-            </div>
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--accent-1633109644 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--highlig2124217748 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
             <div
-              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-4 _paddingBottom-t-space-4 _paddingRight-t-space-4 _paddingLeft-t-space-4"
-            >
-              <span
-                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-4 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347202 _lineHeight-f-lineHeigh1544154441 _letterSpacing-f-letterSpa1195674548 _fontWeight-f-weight-se1074390495"
-                data-disable-theme="true"
-              >
-                With gap (space)
-              </span>
-              <div
-                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-2"
-              >
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _backgroundColor-bg--accent-1633109644"
-                  data-disable-theme="true"
-                >
-                  1
-                </span>
-                <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _backgroundColor-bg--accent-1633109644"
-                  data-disable-theme="true"
-                >
-                  2
-                </span>
-              </div>
-            </div>
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385438 _backgroundColor-bg--highlig1870923013 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _borderTopLeftRadius-t-radius-ra1673638416 _borderTopRightRadius-t-radius-ra1673638416 _borderBottomRightRadius-t-radius-ra1673638416 _borderBottomLeftRadius-t-radius-ra1673638416"
+            />
           </div>
         </span>
       </span>

package/src/components/primitives/__snapshots_web__/View.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives/View View 1`] = `
+exports[`bumper/Primitives View 1`] = `
 <DocumentFragment>
   <div
     class="css-view-175oi2r r-flex-13awgt0"
@@ -18,7 +18,7 @@ exports[`bumper/Primitives/View View 1`] = `
           style="display: contents;"
         >
           <div
-            class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-50px _height-500px _backgroundColor-bg--base--m757972454"
+            class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size42947727 _height-t-size-size42947727 _backgroundColor-bg--accent-1633109644"
           />
         </span>
       </span>

package/src/components/typography/Typography.stories.tsx

@@ -1,8 +1,8 @@
-import type { ComponentStory, Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { FC } from 'react';
 import { StorySection } from '../../story-components/StorySection';
 import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
-import { VStack } from '../primitives/Stacks';
+import { VStack } from '../primitives/Stack';
 import { View } from '../primitives/View';
 import type { TypographyTextProps } from './Typograhy';
 import { Typography } from './Typograhy';
@@ -51,14 +51,14 @@ function TypographyVariants({ types }: TypographyTypesProps) {
     <>
       {types.map((type) => {
         return type.weights.map((weight) => (
-          <VStack key={`${type.variant}-${weight}`} marginBottom="$size.20">
+          <VStack key={`${type.variant}-${weight}`} marginBottom="$space.16">
             <Typography.Text variant="heading-s">{`${type.variant.split('-').join(' ')} - ${
               weight || 'semibold'
             }`}</Typography.Text>
             <View
               paddingVertical="$space.4"
               paddingHorizontal="$space.8"
-              borderRadius="$space.4"
+              borderRadius="$radius.m"
               backgroundColor="$bg.base.mid.default"
               marginTop="$space.4"
             >
@@ -74,7 +74,7 @@ function TypographyVariants({ types }: TypographyTypesProps) {
   );
 }
 
-export const TypographyStory: ComponentStory<typeof Typography.Text> = (args) => (
+export const TypographyStory: StoryFn<typeof Typography.Text> = (args) => (
   <>
     <StorySection.Demo>
       <Typography.Text {...args} />

package/src/components/typography/__snapshots__/Typography.stories.tsx.snap

@@ -377,7 +377,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -429,7 +429,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -481,7 +481,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -533,7 +533,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -585,7 +585,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -637,7 +637,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -715,7 +715,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -767,7 +767,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -819,7 +819,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -871,7 +871,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -923,7 +923,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -975,7 +975,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1027,7 +1027,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1079,7 +1079,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1131,7 +1131,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1183,7 +1183,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1261,7 +1261,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1313,7 +1313,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1365,7 +1365,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >
@@ -1417,7 +1417,7 @@ exports[`bumper/Typography/Typography Typography 1`] = `
         style={
           {
             "flexDirection": "column",
-            "marginBottom": 20,
+            "marginBottom": 16,
           }
         }
       >