@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.0

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

@@ -0,0 +1,1234 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/Stack/Features FlexGrowExample 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "row",
+        "gap": 8,
+        "height": 144,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#E9F4FC",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Fixed
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ECFEDD",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <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": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        flexGrow: 2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#FDE4E3",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Fixed
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Stack/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,
+        "maxWidth": 400,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        3
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        4
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        6
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        7
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        8
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        9
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 12,
+          "paddingLeft": 12,
+          "paddingRight": 12,
+          "paddingTop": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 
+        10
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Stack/Features GridLikeLayout 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "column",
+        "gap": 16,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          1
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          2
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#1772AB",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          3
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#438D06",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          4
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 16,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "#EFC11F",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          5
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#E2483D",
+            "borderBottomLeftRadius": 2,
+            "borderBottomRightRadius": 2,
+            "borderTopLeftRadius": 2,
+            "borderTopRightRadius": 2,
+            "flexGrow": 1,
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#ffffff",
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          6
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Stack/Features HStackBasic 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "row",
+        "gap": 16,
+        "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": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        HStack Item 1
+      </Text>
+    </View>
+    <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": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        HStack Item 2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        HStack Item 3
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Stack/Features NestedStacks 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F1ECE4",
+        "borderBottomLeftRadius": 8,
+        "borderBottomRightRadius": 8,
+        "borderTopLeftRadius": 8,
+        "borderTopRightRadius": 8,
+        "flexDirection": "column",
+        "gap": 16,
+        "paddingBottom": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 28,
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Nested Stacks Layout
+    </Text>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "column",
+          "gap": 12,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 14,
+            "letterSpacing": 0,
+            "lineHeight": 18,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Section 1
+      </Text>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "gap": 8,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 2,
+              "borderBottomRightRadius": 2,
+              "borderTopLeftRadius": 2,
+              "borderTopRightRadius": 2,
+              "flexGrow": 1,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Col 1
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#ECFEDD",
+              "borderBottomLeftRadius": 2,
+              "borderBottomRightRadius": 2,
+              "borderTopLeftRadius": 2,
+              "borderTopRightRadius": 2,
+              "flexGrow": 1,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Col 2
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "flexDirection": "column",
+          "gap": 12,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandardSemibold",
+            "fontSize": 14,
+            "letterSpacing": 0,
+            "lineHeight": 18,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Section 2
+      </Text>
+      <View
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#FDF8E7",
+              "borderBottomLeftRadius": 2,
+              "borderBottomRightRadius": 2,
+              "borderTopLeftRadius": 2,
+              "borderTopRightRadius": 2,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Row 1
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#FDE4E3",
+              "borderBottomLeftRadius": 2,
+              "borderBottomRightRadius": 2,
+              "borderTopLeftRadius": 2,
+              "borderTopRightRadius": 2,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Row 2
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Core/Primitives/Stack/Features VStackBasic 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "column",
+        "gap": 16,
+        "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": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        VStack Item 1
+      </Text>
+    </View>
+    <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": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        VStack Item 2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandard",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        VStack Item 3
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;