@ornikar/bumper 3.6.2 → 3.7.0

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

@@ -970,6 +970,356 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HorizontalScroll 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`Bumper/Core/Primitives/ScrollView/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    scrollEnabled={true}
+    style={
+      {
+        "height": 120,
+        "width": 176,
+      }
+    }
+  >
+    <View>
+      <View
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingBottom": 8,
+            "paddingLeft": 8,
+            "paddingRight": 8,
+            "paddingTop": 8,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            1
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            2
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            3
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            4
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            5
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            6
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            7
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            8
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            9
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#E9F4FC",
+              "borderBottomLeftRadius": 4,
+              "borderBottomRightRadius": 4,
+              "borderTopLeftRadius": 4,
+              "borderTopRightRadius": 4,
+              "paddingBottom": 12,
+              "paddingLeft": 12,
+              "paddingRight": 12,
+              "paddingTop": 12,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#101010",
+                "fontFamily": "GTStandardRegular",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            Item 
+            10
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Core/Primitives/ScrollView/Features ScrollDisabled 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

package/src/system/core/primitives/ScrollView/__snapshots_web__/ScrollView.features.stories.tsx.snap

@@ -344,6 +344,136 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HorizontalScroll 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Core/Primitives/ScrollView/Features Responsive 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="_dsp_contents"
+          >
+            <div
+              class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-_medium_t-size-size42947888 _width-_medium_t-size-size42948634 _height-t-size-size42947727 _width-t-size-size42947888"
+            >
+              <div
+                class="css-view-g5y9jx"
+              >
+                <div
+                  class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166"
+                >
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 1
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 2
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 3
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 4
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 5
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 6
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 7
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 8
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 9
+                    </span>
+                  </div>
+                  <div
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020317 _paddingRight-t-space-spa1366020317 _paddingBottom-t-space-spa1366020317 _paddingLeft-t-space-spa1366020317 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                  >
+                    <span
+                      class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _col-content--ba907952141"
+                    >
+                      Item 10
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Core/Primitives/ScrollView/Features ScrollDisabled 1`] = `
 <DocumentFragment>
   <div

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

@@ -177,3 +177,32 @@ export const GridLikeLayout: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Stack
+      flexDirection="column"
+      gap="$space.8"
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      $medium={{ flexDirection: 'row', gap: '$space.16' }}
+    >
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          Item 3
+        </Typography.Text>
+      </View>
+    </Stack>
+  ),
+};

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

@@ -450,3 +450,33 @@ export const OverflowBehavior: Story = {
     </VStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <View
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.8"
+      borderRadius="$radius.m"
+      flexDirection="column"
+      gap="$space.8"
+      $medium={{ padding: '$space.16', flexDirection: 'row', gap: '$space.16' }}
+      $large={{ padding: '$space.32' }}
+    >
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+          Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+          Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+          Item 3
+        </Typography.Text>
+      </View>
+    </View>
+  ),
+};

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

@@ -206,3 +206,53 @@ exports[`Bumper/Core/Primitives/Center/Features CircularCentering 1`] = `
   </View>
 </RNCSafeAreaProvider>
 `;
+
+exports[`Bumper/Core/Primitives/Center/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#563B56",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "height": 96,
+        "justifyContent": "center",
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+        "width": 96,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+          "textAlign": "center",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Responsive
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

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

@@ -469,3 +469,63 @@ exports[`Bumper/Core/Primitives/Pressable/Features PressEffects 1`] = `
   </View>
 </RNCSafeAreaProvider>
 `;
+
+exports[`Bumper/Core/Primitives/Pressable/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      {
+        "backgroundColor": "#563B56",
+        "borderBottomLeftRadius": 2,
+        "borderBottomRightRadius": 2,
+        "borderTopLeftRadius": 2,
+        "borderTopRightRadius": 2,
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "GTStandardRegular",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Responsive padding and radius
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;