@hero-design/rn 8.85.0 → 8.87.1

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardCarousel android should render correctly on iOS 1`] = `
+exports[`CardCarousel android should render correctly on Android 1`] = `
 <View
   style={
     {
@@ -106,6 +106,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                 },
               ]
             }
+            themeGap="medium"
           >
             <View
               style={
@@ -171,6 +172,1801 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                 },
               ]
             }
+            themeGap="medium"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap medium 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="medium"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="medium"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap medium 2`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="medium"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="medium"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap small 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 4,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="small"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 4,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="small"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap small 2`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 4,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="small"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 4,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="small"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap xsmall 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 2,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="xsmall"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 2,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="xsmall"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`CardCarousel gap renders correctly with gap xsmall 2`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
+        },
+      ]
+    }
+    testID="cardCarousel"
+  >
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
+        }
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 2,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="xsmall"
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              themeVariant="basic"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="small"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          style={
+            [
+              {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "padding": 2,
+                },
+                {
+                  "width": 0,
+                },
+              ]
+            }
+            themeGap="xsmall"
           >
             <View
               style={
@@ -403,6 +2199,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                 },
               ]
             }
+            themeGap="medium"
           >
             <View
               style={
@@ -468,6 +2265,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                 },
               ]
             }
+            themeGap="medium"
           >
             <View
               style={