@ornikar/bumper 3.6.2 → 3.7.0

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

@@ -1121,6 +1121,132 @@ exports[`Bumper/Core/Primitives/Stack/Features NestedStacks 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`Bumper/Core/Primitives/Stack/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "column",
+        "gap": 8,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 16,
+            "letterSpacing": 0.3,
+            "lineHeight": 24,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 3
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Core/Primitives/Stack/Features VStackBasic 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

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

@@ -2373,3 +2373,129 @@ exports[`Bumper/Core/Primitives/View/Features PaddingVariants 1`] = `
   </View>
 </RNCSafeAreaProvider>
 `;
+
+exports[`Bumper/Core/Primitives/View/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#F7F4EE",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "flexDirection": "column",
+        "gap": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 1
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#43390A",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 2
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#1772AB",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "flexGrow": 1,
+          "paddingBottom": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingTop": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 14,
+            "letterSpacing": 0.3,
+            "lineHeight": 20,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        Item 3
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

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

@@ -33,7 +33,7 @@ exports[`Bumper/Core/Primitives/Center/Features CenteringText 1`] = `
               class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _backgroundColor-bg--promo--1572356288 _paddingTop-t-space-spa1366020284 _paddingRight-t-space-spa1366020284 _paddingBottom-t-space-spa1366020284 _paddingLeft-t-space-spa1366020284 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _width-t-size-size42947793 _height-t-size-size42947793"
             >
               <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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba254712717 _textAlign-center"
+                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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _textAlign-center _col-content--ba254712717"
               >
                 Multi-line centered text content
               </span>
@@ -100,3 +100,36 @@ exports[`Bumper/Core/Primitives/Center/Features CircularCentering 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Bumper/Core/Primitives/Center/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;"
+        >
+          <div
+            class="_width-_medium_t-size-size42947793 _height-_medium_t-size-size42947793 _paddingTop-_medium_t-space-spa1366020284 _paddingRight-_medium_t-space-spa1366020284 _paddingBottom-_medium_t-space-spa1366020284 _paddingLeft-_medium_t-space-spa1366020284 _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _backgroundColor-bg--accent-1633109644 _width-t-size-size1385661 _height-t-size-size1385661 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _textAlign-center _col-content--ba254712717"
+            >
+              Responsive
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -182,3 +182,38 @@ exports[`Bumper/Core/Primitives/Pressable/Features PressEffects 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Bumper/Core/Primitives/Pressable/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;"
+        >
+          <div
+            class="is_Pressable _tr-0active-scale0--981281 _paddingTop-_medium_t-space-spa1366020313 _paddingRight-_medium_t-space-spa1366020313 _paddingBottom-_medium_t-space-spa1366020313 _paddingLeft-_medium_t-space-spa1366020313 _btlr-_medium_t-radius-ra1673638410 _btrr-_medium_t-radius-ra1673638410 _bbrr-_medium_t-radius-ra1673638410 _bblr-_medium_t-radius-ra1673638410 _paddingTop-_large_t-space-spa1366020284 _paddingRight-_large_t-space-spa1366020284 _paddingBottom-_large_t-space-spa1366020284 _paddingLeft-_large_t-space-spa1366020284 _btlr-_large_t-radius-ra1673638409 _btrr-_large_t-radius-ra1673638409 _bbrr-_large_t-radius-ra1673638409 _bblr-_large_t-radius-ra1673638409 _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _cur-pointer _backgroundColor-bg--accent-1633109644 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+            role="button"
+            tabindex="0"
+          >
+            <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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba254712717"
+            >
+              Responsive padding and radius
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -426,6 +426,61 @@ exports[`Bumper/Core/Primitives/Stack/Features NestedStacks 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Core/Primitives/Stack/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;"
+        >
+          <div
+            class="_fd-_medium_row _gap-_medium_t-space-spa1366020313 _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166 _backgroundColor-bg--base--m757972454 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+          >
+            <div
+              class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba254712717"
+              >
+                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--promo--1572356288 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba254712717"
+              >
+                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--h105 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba254712717"
+              >
+                Item 3
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Core/Primitives/Stack/Features VStackBasic 1`] = `
 <DocumentFragment>
   <div

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

@@ -879,3 +879,58 @@ exports[`Bumper/Core/Primitives/View/Features PaddingVariants 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Bumper/Core/Primitives/View/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;"
+        >
+          <div
+            class="_paddingTop-_medium_t-space-spa1366020313 _paddingRight-_medium_t-space-spa1366020313 _paddingBottom-_medium_t-space-spa1366020313 _paddingLeft-_medium_t-space-spa1366020313 _fd-_medium_row _gap-_medium_t-space-spa1366020313 _paddingTop-_large_t-space-spa1366020255 _paddingRight-_large_t-space-spa1366020255 _paddingBottom-_large_t-space-spa1366020255 _paddingLeft-_large_t-space-spa1366020255 _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--base--m757972454 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _fd-column _gap-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--accent-1633109644 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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--ba254712717"
+              >
+                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--promo--1572356288 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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--ba254712717"
+              >
+                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--h105 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _flexGrow-1"
+            >
+              <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--ba254712717"
+              >
+                Item 3
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/dataDisplays/Badge/Badge.features.stories.tsx

@@ -35,3 +35,13 @@ export const WithMaximumCount: Story = {
     </HStack>
   ),
 };
+
+export const Responsive: Story = {
+  render: () => (
+    <Badge
+      $wide={{
+        count: 3,
+      }}
+    />
+  ),
+};

package/src/system/dataDisplays/Badge/__snapshots__/Badge.features.stories.tsx.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`Bumper/Data Displays/Badge/Features Responsive 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#E2483D",
+        "borderBottomLeftRadius": 1000,
+        "borderBottomRightRadius": 1000,
+        "borderTopLeftRadius": 1000,
+        "borderTopRightRadius": 1000,
+        "height": 8,
+        "justifyContent": "center",
+        "width": 8,
+      }
+    }
+  />
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Data Displays/Badge/Features WithCount 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

package/src/system/dataDisplays/Badge/__snapshots_web__/Badge.features.stories.tsx.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`Bumper/Data Displays/Badge/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;"
+        >
+          <div
+            class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453 _backgroundColor-bg--danger-46574 _width-8px _height-8px"
+          />
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Data Displays/Badge/Features WithCount 1`] = `
 <DocumentFragment>
   <div

package/src/system/types.ts

@@ -1,8 +1,19 @@
-import type { WithMediaProps } from '@tamagui/core';
+// eslint-disable-next-line no-restricted-imports
+import type { PropsWithoutMediaStyles as InternalPropsWithoutMediaStyles, WithMediaProps } from '@tamagui/core';
 
-// Rewrite PropsWithoutMediaStyles to fix Tamagui's one. Which make optionnall all media props, even if they are required in the original props type. This is a problem for our components which have required media props (like variant for Typography).
+/**
+ * Rewrite of Tamagui PropsWithoutMediaStyles to make all responsive props optionnal.
+ * @internal Do not use directly, use TamaguiMediaProps instead.
+ */
 export type PropsWithoutMediaStyles<A> = {
   [Key in keyof A as Key extends `$${string}` ? never : Key]: A[Key];
 };
 
-export type TamaguiMediaProps<A> = PropsWithoutMediaStyles<A> & WithMediaProps<PropsWithoutMediaStyles<A>>;
+/**
+ * Wraps a component's base props to add responsive breakpoint overrides.
+ *
+ * Strips all `$`-prefixed media keys from `A` (keeping base props required as defined),
+ * then re-adds them as optional via Tamagui's `WithMediaProps`. This lets consumers
+ * pass breakpoint-specific prop objects alongside regular props.
+ */
+export type TamaguiMediaProps<A> = PropsWithoutMediaStyles<A> & WithMediaProps<InternalPropsWithoutMediaStyles<A>>;