@ornikar/bumper 2.7.2-canary.1768565076.501fccaa5e4ef824bb180cfd40a7e74454a29a3e.0 → 2.8.0

package/src/system/core/primitives/__snapshots__/View.features.stories.tsx.snap

@@ -0,0 +1,2338 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/View/Features BackgroundColors 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.low.default
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.mid.default
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F1ECE4",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.hi.default
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.accent.default
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.promo.hi.default
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.info.mid
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ECFEDD",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.success.mid
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#FDF8E7",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.warning.mid
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#FDE4E3",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.danger.mid
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features BorderColors 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#F1ECE4",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#F1ECE4",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#F1ECE4",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#F1ECE4",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.low
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.mid
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#563B56",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#563B56",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#563B56",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#563B56",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.accent
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#1772AB",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#1772AB",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#1772AB",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#1772AB",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.info
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#438D06",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#438D06",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#438D06",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#438D06",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.success
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EFC11F",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#EFC11F",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#EFC11F",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#EFC11F",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.warning
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#E2483D",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 2,
+          "borderLeftColor": "#E2483D",
+          "borderLeftWidth": 2,
+          "borderRightColor": "#E2483D",
+          "borderRightWidth": 2,
+          "borderStyle": "solid",
+          "borderTopColor": "#E2483D",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.danger
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features BordersAndRadius 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 0,
+          "borderBottomRightRadius": 0,
+          "borderBottomWidth": 1,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 1,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 0,
+          "borderTopRightRadius": 0,
+          "borderTopWidth": 1,
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        radius.none
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderBottomWidth": 1,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 1,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "borderTopWidth": 1,
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        radius.s
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomWidth": 1,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 1,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopWidth": 1,
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        radius.m
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 8,
+          "borderBottomWidth": 1,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 1,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 8,
+          "borderTopRightRadius": 8,
+          "borderTopWidth": 1,
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        radius.l
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#F7F4EE",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomLeftRadius": 1000,
+          "borderBottomRightRadius": 1000,
+          "borderBottomWidth": 1,
+          "borderLeftColor": "#EAE3D6",
+          "borderLeftWidth": 1,
+          "borderRightColor": "#EAE3D6",
+          "borderRightWidth": 1,
+          "borderStyle": "solid",
+          "borderTopColor": "#EAE3D6",
+          "borderTopLeftRadius": 1000,
+          "borderTopRightRadius": 1000,
+          "borderTopWidth": 1,
+          "height": 96,
+          "justifyContent": "center",
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+          "width": 96,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        circle
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features DirectionalMargin 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F1ECE4",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 0,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "borderBottomLeftRadius": 4,
+            "borderBottomRightRadius": 4,
+            "borderTopLeftRadius": 4,
+            "borderTopRightRadius": 4,
+            "marginBottom": 8,
+            "marginTop": 32,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          marginTop: space.32, marginBottom: space.8
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "borderBottomLeftRadius": 4,
+            "borderBottomRightRadius": 4,
+            "borderTopLeftRadius": 4,
+            "borderTopRightRadius": 4,
+            "marginBottom": 8,
+            "marginLeft": 32,
+            "marginRight": 32,
+            "marginTop": 8,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          marginHorizontal: space.32, marginVertical: space.8
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features DirectionalPadding 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#ECFEDD",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 8,
+          "paddingTop": 32,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        paddingTop: space.32, paddingBottom: space.8
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ECFEDD",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingLeft": 32,
+          "paddingRight": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        paddingLeft: space.32, paddingRight: space.8
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ECFEDD",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 8,
+          "paddingLeft": 32,
+          "paddingRight": 32,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        paddingHorizontal: space.32, paddingVertical: space.8
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features FlexAlignment 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "flex-start",
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "height": 120,
+          "justifyContent": "flex-start",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          alignItems: flex-start, justifyContent: flex-start
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "height": 120,
+          "justifyContent": "center",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          alignItems: center, justifyContent: center
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "flex-end",
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "height": 120,
+          "justifyContent": "flex-end",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#E9F4FC",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          alignItems: flex-end, justifyContent: flex-end
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "stretch",
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "height": 120,
+          "justifyContent": "space-between",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#ECFEDD",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          Item 1
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#FDF8E7",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          Item 2
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#FDE4E3",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          Item 3
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features FlexLayout 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          flexGrow: 1
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 2,
+            "marginLeft": 8,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          flexGrow: 2
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "row",
+          "gap": 8,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#E9F4FC",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          flexGrow: 1
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#ECFEDD",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          flexGrow: 1
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#FDF8E7",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          flexGrow: 1
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features FlexWrap 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 8,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        3
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        4
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        6
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        7
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        8
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        9
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        10
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        11
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 64,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        12
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features MarginVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F1ECE4",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 0,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 4,
+            "borderBottomRightRadius": 4,
+            "borderTopLeftRadius": 4,
+            "borderTopRightRadius": 4,
+            "marginBottom": 8,
+            "marginLeft": 8,
+            "marginRight": 8,
+            "marginTop": 8,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          margin: space.8
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 4,
+            "borderBottomRightRadius": 4,
+            "borderTopLeftRadius": 4,
+            "borderTopRightRadius": 4,
+            "marginBottom": 16,
+            "marginLeft": 16,
+            "marginRight": 16,
+            "marginTop": 16,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          margin: space.16
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 4,
+            "borderBottomRightRadius": 4,
+            "borderTopLeftRadius": 4,
+            "borderTopRightRadius": 4,
+            "marginBottom": 24,
+            "marginLeft": 24,
+            "marginRight": 24,
+            "marginTop": 24,
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          margin: space.24
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features OverflowBehavior 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "height": 96,
+          "overflow": "hidden",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 208,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        overflow: hidden - This long text content will be clipped when it exceeds the container's dimensions and won't cause scrollbars to appear
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "height": 96,
+          "overflow": "scroll",
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+          "width": 208,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        overflow: scroll - This long text content will be scrollable when it exceeds the container's dimensions, allowing users to access all content
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/View/Features PaddingVariants 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.none
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 4,
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "paddingTop": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.4
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.8
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.16
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingTop": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.24
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "paddingBottom": 32,
+          "paddingLeft": 32,
+          "paddingRight": 32,
+          "paddingTop": 32,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        space.32
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;