[docs] Add version badges

packages/docs-gesture-handler/docs/components/buttons.mdx

@@ -7,7 +7,7 @@ sidebar_label: Buttons
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 <GifGallery>
   <img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
@@ -39,19 +39,19 @@ exclusive?: boolean;
 
 Defines if more than one button could be pressed simultaneously. By default set to `true`.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### rippleColor
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 rippleColor?: number | ColorValue | null;
 ```
 
 Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### rippleRadius
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 
 ```ts
@@ -60,29 +60,29 @@ rippleRadius?: number | null;
 
 Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### borderless
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 borderless?: boolean;
 ```
 
 If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### foreground
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 foreground?: boolean;
 ```
 
 Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### touchSoundDisabled
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 touchSoundDisabled?: boolean;
@@ -140,9 +140,9 @@ underlayColor?: string;
 
 Background color that will be dimmed when button is in active state.
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### activeOpacity
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 activeOpacity?: number;
@@ -154,9 +154,9 @@ Opacity applied to the underlay when button is in active state.
 
 This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### activeOpacity
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 activeOpacity?: number;

packages/docs-gesture-handler/docs/components/pressable.mdx

@@ -7,7 +7,7 @@ sidebar_label: Pressable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 :::info
 This component is a drop-in replacement for the `Pressable` component.
@@ -89,39 +89,39 @@ cancelable?: null | boolean;
 
 Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
-<HeaderWithBadge platforms={['android', 'web']}>
+<HeaderWithBadges platforms={['android', 'web']}>
 ### onHoverIn
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 onHoverIn?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer is hovering over the element.
 
-<HeaderWithBadge platforms={['android', 'web']}>
+<HeaderWithBadges platforms={['android', 'web']}>
 ### onHoverOut
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 onHoverOut?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer stops hovering over the element.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### delayHoverIn
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 delayHoverIn?: number | null;
 ```
 
 Duration to wait after hover in before calling `onHoverIn`.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### delayHoverOut
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 delayHoverOut?: number | null;
@@ -145,9 +145,9 @@ disabled?: null | boolean;
 
 Whether the `Pressable` behavior is disabled.
 
-<HeaderWithBadge platforms={['android', 'iOS']}>
+<HeaderWithBadges platforms={['android', 'iOS']}>
 ### hitSlop
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 hitSlop?: null | Insets | number;
@@ -157,9 +157,9 @@ Additional distance outside of the view in which a press is detected and [`onPre
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-<HeaderWithBadge platforms={['android', 'iOS']}>
+<HeaderWithBadges platforms={['android', 'iOS']}>
 ### pressRetentionOffset
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 pressRetentionOffset?: null | Insets | number;
@@ -170,19 +170,19 @@ press before [`onPressOut`](#onpressout) is triggered.
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### android_disableSound
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 android_disableSound?: null | boolean;
 ```
 
 If `true`, doesn't play system sound on touch.
 
-<HeaderWithBadge platforms={['android']}>
+<HeaderWithBadges platforms={['android']}>
 ### android_ripple
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 android_ripple?: null | PressableAndroidRippleConfig;

packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx

@@ -6,7 +6,7 @@ sidebar_label: Reanimated Drawer Layout
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 :::info
 This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
@@ -134,9 +134,9 @@ export enum DrawerState {
 
 A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### enableTrackpadTwoFingerGesture
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
@@ -153,9 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
 
 Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter -  [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
 
-<HeaderWithBadge platforms={['android', 'web']}>
+<HeaderWithBadges platforms={['android', 'web']}>
 ### mouseButton
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -176,9 +176,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### enableContextMenu
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx

@@ -7,7 +7,7 @@ sidebar_label: Reanimated Swipeable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery'
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 :::info
 This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
@@ -242,19 +242,19 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];
 
 Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### enableTrackpadTwoFingerGesture
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
 ```
 
 Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
 
-<HeaderWithBadge platforms={['android', 'web']}>
+<HeaderWithBadges platforms={['android', 'web']}>
 ### mouseButton
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -275,9 +275,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### enableContextMenu
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx

@@ -6,7 +6,7 @@ sidebar_position: 4
 ---
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 ## Gesture Detector
 
@@ -190,29 +190,29 @@ gesture: SingleGesture | ComposedGesture;
 
 A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### userSelect
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 userSelect: 'none' | 'auto' | 'text';
 ```
 
 This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### touchAction
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 touchAction: TouchAction;
 ```
 
 This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
 
-<HeaderWithBadge platforms={['web']}>
+<HeaderWithBadges platforms={['web']}>
 ### enableContextMenu
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx

@@ -1,6 +1,6 @@
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 ### enabled
 
@@ -69,9 +69,9 @@ testID: string;
 
 Sets a `testID` property for gesture object, allowing for querying for it in tests.
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### cancelsTouchesInView
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 ```ts
 cancelsTouchesInView: boolean | SharedValue<boolean>;

packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx

@@ -12,7 +12,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
 import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
@@ -142,9 +142,9 @@ numberOfPointers: number | SharedValue<number>;
 
 Determine exact number of points required to handle the fling gesture.
 
-<HeaderWithBadge platforms={['android', 'web']}>
+<HeaderWithBadges platforms={['android', 'web']}>
 ### mouseButton
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"

packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx

@@ -12,7 +12,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
 import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
 
-import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
 
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
@@ -93,9 +93,9 @@ const styles = StyleSheet.create({
 
 <SharedValueInfo />
 
-<HeaderWithBadge platforms={['iOS']}>
+<HeaderWithBadges platforms={['iOS']}>
 ### effect
-</HeaderWithBadge>
+</HeaderWithBadges>
 
 <CollapsibleCode 
 label="Show composed types definitions"