diff --git a/.gitignore b/.gitignore
index 924b7e6f96..9399ad79a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,6 +66,7 @@ dist
 dist-ts
 package-lock.json
 docs/components/**
+scripts/token.js
 
 # Ruby / CocoaPods
 /ios/Pods/
diff --git a/demo/src/screens/componentScreens/SegmentedControlScreen.tsx b/demo/src/screens/componentScreens/SegmentedControlScreen.tsx
index f485cba70b..22bd160842 100644
--- a/demo/src/screens/componentScreens/SegmentedControlScreen.tsx
+++ b/demo/src/screens/componentScreens/SegmentedControlScreen.tsx
@@ -18,7 +18,8 @@ const segments: Record<string, Array<SegmentedControlItemProps>> = {
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
   seventh: [{label: '$'}, {label: '%'}],
-  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}]
+  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}],
+  ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}]
 };
 
 const SegmentedControlScreen = () => {
@@ -87,6 +88,15 @@ const SegmentedControlScreen = () => {
           style={styles.customStyle}
           segmentsStyle={styles.customSegmentsStyle}
         />
+        <Text marginT-s4 center>
+          With a label
+        </Text>
+        <SegmentedControl
+          containerStyle={styles.container}
+          segments={segments.ninth}
+          preset={screenPreset}
+          label="Control label"
+        />
       </View>
     </View>
   );
diff --git a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
index b4e7bfd1d7..e122872aff 100644
--- a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
+++ b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
@@ -3,7 +3,6 @@ import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import {Colors, View, Text, Button, StackAggregator} from 'react-native-ui-lib';
 
-
 const TEXTS = [
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
@@ -12,28 +11,28 @@ const TEXTS = [
 ];
 
 export default class StackAggregatorScreen extends Component {
-  state = { 
+  state = {
     contents: TEXTS,
     collapsed: true
   };
 
   onItemPress = (index: number) => {
     console.warn('item pressed: ', index);
-  }
+  };
 
   onPress = (index: number) => {
     console.warn('item\'s button pressed: ', index);
-  }
+  };
 
   refreshItems = () => {
     const newItems = _.clone(this.state.contents);
     newItems.push('New Item');
     this.setState({contents: newItems});
-  }
+  };
 
   toggleCollapsed = () => {
     this.setState({collapsed: !this.state.collapsed});
-  }
+  };
 
   renderItem = (_: string, index: number) => {
     return (
@@ -42,7 +41,7 @@ export default class StackAggregatorScreen extends Component {
         <Text>{this.state.contents[index]}</Text>
       </View>
     );
-  }
+  };
 
   render() {
     const {collapsed} = this.state;
@@ -53,18 +52,18 @@ export default class StackAggregatorScreen extends Component {
           <Button link label={collapsed ? 'Open Stack' : 'Close Stack'} onPress={this.toggleCollapsed}/>
           <Button link label="Update content" onPress={this.refreshItems}/>
         </View>
-        <Text center grey40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
-        <StackAggregator
-          containerStyle={{marginTop: 12}}
-          onItemPress={this.onItemPress}
-          collapsed={collapsed}
-        >
+        <Text center grey40 text90 marginT-20>
+          Thu, 10 Dec, 11:29
+        </Text>
+        <StackAggregator containerStyle={{marginTop: 12}} onItemPress={this.onItemPress} collapsed={collapsed}>
           {_.map(this.state.contents, (item, index) => {
             return this.renderItem(item, index);
           })}
         </StackAggregator>
 
-        <Text center grey40 text90 marginT-20>Thu, 11 Dec, 13:03</Text>
+        <Text center grey40 text90 marginT-20>
+          Thu, 11 Dec, 13:03
+        </Text>
         <StackAggregator
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
diff --git a/scripts/prReleaseNotes.js b/scripts/prReleaseNotes.js
index 2bb64d2a71..7548d2e245 100644
--- a/scripts/prReleaseNotes.js
+++ b/scripts/prReleaseNotes.js
@@ -1,4 +1,8 @@
-const GITHUB_TOKEN = 'xxxx';
+const GITHUB_TOKEN = require('./token');
+// scripts/token.js:
+// const token = 'XXX';
+// module.exports = token;
+
 const LATEST_VERSION = '7.10.0';
 const NEW_VERSION = '7.11.0';
 const FILE_PREFIX = 'uilib';
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 088efad51a..4c7d3978da 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -17,6 +17,9 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
   get xFlat() {
     return require('./xFlat.png');
   }
diff --git a/src/assets/icons/xMedium.png b/src/assets/icons/xMedium.png
new file mode 100644
index 0000000000..e04f7620b4
Binary files /dev/null and b/src/assets/icons/xMedium.png differ
diff --git a/src/assets/icons/xMedium@1.5x.png b/src/assets/icons/xMedium@1.5x.png
new file mode 100644
index 0000000000..52e8981cc4
Binary files /dev/null and b/src/assets/icons/xMedium@1.5x.png differ
diff --git a/src/assets/icons/xMedium@2x.png b/src/assets/icons/xMedium@2x.png
new file mode 100644
index 0000000000..9ebc8e901f
Binary files /dev/null and b/src/assets/icons/xMedium@2x.png differ
diff --git a/src/assets/icons/xMedium@3x.png b/src/assets/icons/xMedium@3x.png
new file mode 100644
index 0000000000..412c39d594
Binary files /dev/null and b/src/assets/icons/xMedium@3x.png differ
diff --git a/src/assets/icons/xMedium@4x.png b/src/assets/icons/xMedium@4x.png
new file mode 100644
index 0000000000..91bc16c117
Binary files /dev/null and b/src/assets/icons/xMedium@4x.png differ
diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
index fd4158876b..19e693e394 100644
--- a/src/components/badge/index.tsx
+++ b/src/components/badge/index.tsx
@@ -65,7 +65,7 @@ export type BadgeProps = ViewProps &
     /**
      * Additional styles for the badge label
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Receives a number from 1 to 4, representing the label's max digit length.
      * Beyond the max number for that digit length, a "+" will show at the end.
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 74271a4aa7..0f4f774128 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -227,7 +227,7 @@ class Button extends PureComponent<Props, ButtonState> {
     let outlineStyle;
     if ((outline || outlineColor) && !this.isLink) {
       outlineStyle = {
-        borderWidth: outlineWidth || 1,
+        borderWidth: outlineWidth ?? 1,
         borderColor: outlineColor || Colors.$outlinePrimary
       };
 
diff --git a/src/components/colorSwatch/index.tsx b/src/components/colorSwatch/index.tsx
index f71a479797..b3a697dbf9 100644
--- a/src/components/colorSwatch/index.tsx
+++ b/src/components/colorSwatch/index.tsx
@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import Assets from '../../assets';
 import {BorderRadiuses, Colors} from '../../style';
-import {Constants} from '../../commons/new';
+import {asBaseComponent, BaseComponentInjectedProps, Constants, ColorsModifiers} from '../../commons/new';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
@@ -50,7 +50,7 @@ interface Props {
    */
   size?: number;
 }
-export type ColorSwatchProps = Props;
+export type ColorSwatchProps = Props & ColorsModifiers;
 
 const transparentImage = require('./assets/transparentSwatch/TransparentSwatch.png');
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
@@ -62,7 +62,7 @@ export const SWATCH_SIZE = DEFAULT_SIZE;
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true
  */
-class ColorSwatch extends PureComponent<Props> {
+class ColorSwatch extends PureComponent<Props & BaseComponentInjectedProps> {
   static displayName = 'ColorSwatch';
 
   state = {
@@ -71,7 +71,7 @@ class ColorSwatch extends PureComponent<Props> {
     animatedScale: new Animated.Value(0.5)
   };
 
-  styles = createStyles(this.props);
+  styles = createStyles({...this.props, color: this.color});
   layout = {x: 0, y: 0};
 
   componentDidMount() {
@@ -85,6 +85,11 @@ class ColorSwatch extends PureComponent<Props> {
     }
   }
 
+  get color() {
+    const {color, modifiers} = this.props;
+    return color || modifiers?.color;
+  }
+
   animateSwatch(newValue: number) {
     const {animatedOpacity, animatedScale} = this.state;
 
@@ -118,7 +123,8 @@ class ColorSwatch extends PureComponent<Props> {
   }
 
   onPress = () => {
-    const {color = '', value, index} = this.props;
+    const {value, index} = this.props;
+    const color = this.color ?? '';
     const tintColor = this.getTintColor(value);
     const result = value || color;
     const hexString = Colors.getHexString(result);
@@ -135,7 +141,7 @@ class ColorSwatch extends PureComponent<Props> {
   }
 
   getAccessibilityInfo() {
-    const {color} = this.props;
+    const color = this.color;
 
     return {
       accessibilityLabel: color && Colors.getColorName(color),
@@ -152,7 +158,8 @@ class ColorSwatch extends PureComponent<Props> {
   };
 
   renderContent() {
-    const {style, color, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
+    const {style, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
+    const color = this.color;
     const {isSelected} = this.state;
     const Container = onPress ? TouchableOpacity : View;
     const tintColor = this.getTintColor(color);
@@ -213,7 +220,7 @@ class ColorSwatch extends PureComponent<Props> {
   }
 }
 
-export default ColorSwatch;
+export default asBaseComponent<ColorSwatchProps>(ColorSwatch);
 
 function createStyles({color = Colors.grey30}) {
   return StyleSheet.create({
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index ecb78b66bf..b9ba98765d 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -534,7 +534,8 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   renderMockChildren() {
-    const {children} = this.props;
+    const {children, backdropColor} = this.props;
+    const isBackdropColorPassed = backdropColor !== undefined;
     if (children && React.isValidElement(children)) {
       const layout = {
         ...this.getContainerPosition(),
@@ -545,7 +546,7 @@ class Hint extends Component<HintProps, HintState> {
       };
 
       return (
-        <View style={[styles.mockChildrenContainer, layout]}>
+        <View style={[styles.mockChildrenContainer, layout, !isBackdropColorPassed && styles.hidden]}>
           {React.cloneElement<any>(children, {
             collapsable: false,
             key: 'mock',
@@ -609,6 +610,7 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute'
   },
+  hidden: {opacity: 0},
   overlayContainer: {
     zIndex: 10,
     elevation: 10
diff --git a/src/components/index.js b/src/components/index.js
index 287632e13f..78422ac93e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -134,6 +134,9 @@ export default {
   get ProgressBar() {
     return require('./progressBar').default;
   },
+  get ProgressiveImage() {
+    return require('./progressiveImage').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index a8f8ee7d43..edbeafbc76 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -36,7 +36,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   } = props;
   const context = useContext(PickerContext);
 
-  const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0].value);
+  const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0]?.value);
   // TODO: Might not need this memoized style, instead we can move it to a stylesheet
   const wrapperContainerStyle = useMemo(() => {
     // const shouldFlex = Constants.isWeb ? 1 : useDialog ? 1 : 1;
diff --git a/src/components/progressiveImage/index.js b/src/components/progressiveImage/index.tsx
similarity index 55%
rename from src/components/progressiveImage/index.js
rename to src/components/progressiveImage/index.tsx
index cd419f7c06..1b7f727dee 100644
--- a/src/components/progressiveImage/index.js
+++ b/src/components/progressiveImage/index.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {View, StyleSheet, Animated} from 'react-native';
-import AnimatedImage from '../animatedImage';
+import AnimatedImage, {AnimatedImageProps} from '../animatedImage';
 import {Colors} from '../../style';
 
 /**
- * @description: Image component that loads first a small thumbnail of the images, 
+ * @description: Image component that loads first a small thumbnail of the images,
  *               and fades-in the full-sized image with animation once it's loaded
  * @extends: AnimatedImage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
  */
-class ProgressiveImage extends React.Component {
+
+export type ProgressiveImageProps = {
+  /**
+   * small thumbnail source to display while the full-size image is loading
+   */
+  thumbnailSource: AnimatedImageProps['source'];
+};
+
+class ProgressiveImage extends React.Component<ProgressiveImageProps, {}> {
   static displayName = 'ProgressiveImage';
-  static propTypes = {
-    /**
-     * small thumbnail source to display while the full-size image is loading
-     */
-    thumbnailSource: PropTypes.object
-  };
 
   thumbnailAnimated = new Animated.Value(0);
   imageAnimated = new Animated.Value(0);
@@ -25,22 +26,12 @@ class ProgressiveImage extends React.Component {
   getThumbnail = () => {
     const {thumbnailSource, ...props} = this.props;
 
-    return (
-      <AnimatedImage                
-        {...props}
-        source={thumbnailSource}
-        loader={<View style={styles.container}/>}        
-      />
-    );
+    return <AnimatedImage {...props} source={thumbnailSource} loader={<View style={styles.container}/>}/>;
   };
 
-  render() {    
-    return (
-      <AnimatedImage        
-        {...this.props}
-        loader={this.getThumbnail()}
-      />
-    );
+  render() {
+    //@ts-ignore
+    return <AnimatedImage {...this.props} loader={this.getThumbnail()}/>;
   }
 }
 
@@ -50,5 +41,4 @@ const styles = StyleSheet.create({
   }
 });
 
-
 export default ProgressiveImage;
diff --git a/src/components/segmentedControl/__tests__/index.spec.tsx b/src/components/segmentedControl/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..a6dbfb0227
--- /dev/null
+++ b/src/components/segmentedControl/__tests__/index.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import SegmentedControl, {type SegmentedControlProps} from '../index';
+
+const testSegmentes = [{label: 'Segmented 1'}, {label: 'Segmented 2'}, {label: 'Segmented 3'}, {label: 'Segmented 4'}];
+
+const TestCase = (props: Partial<SegmentedControlProps>) => {
+  return <SegmentedControl segments={testSegmentes} {...props}/>;
+};
+
+describe('SegmentedControl', () => {
+  it('should render', () => {
+    const renderTree = render(<TestCase/>);
+    expect(renderTree).toBeTruthy();
+  });
+  it('should render with a label', () => {
+    const renderTree = render(<TestCase label="Test Label"/>);
+    expect(renderTree.queryByText('Test Label')).toBeTruthy();
+  });
+});
diff --git a/src/components/segmentedControl/index.tsx b/src/components/segmentedControl/index.tsx
index 61a195e486..52a1655e38 100644
--- a/src/components/segmentedControl/index.tsx
+++ b/src/components/segmentedControl/index.tsx
@@ -14,6 +14,7 @@ import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
 import Segment, {SegmentedControlItemProps} from './segment';
 import useSegmentedControlPreset from './useSegmentedControlPreset';
+import Text, {TextProps} from '../text';
 
 const CONTAINER_BORDER_WIDTH = 1;
 const TIMING_CONFIG = {
@@ -94,6 +95,14 @@ export type SegmentedControlProps = {
    * Preset type
    */
   preset?: Presets | `${Presets}`;
+  /**
+   * SegmentedControl label
+   */
+  label?: string;
+  /**
+   * Pass props for the SegmentedControl label
+   */
+  labelProps?: TextProps;
 };
 
 const nonAreUndefined = <T, >(array: Array<T | undefined>): array is Array<T> => {
@@ -130,7 +139,9 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     testID,
     iconTintColor,
     segmentDividerWidth,
-    segmentDividerColor
+    segmentDividerColor,
+    label,
+    labelProps
   } = useSegmentedControlPreset(props);
   const animatedSelectedIndex = useSharedValue(initialIndex);
   const segmentsStyle = useSharedValue([] as {x: number; width: number}[]);
@@ -233,6 +244,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     });
   return (
     <View style={containerStyle} testID={testID}>
+      {label && <Text bodySmall $textNeutralHeavy marginB-s1 {...labelProps}>{label}</Text>}
       <View row center onLayout={containerOnLayout} style={[styles.container, style, {borderRadius, backgroundColor}]}>
         <View
           reanimated
diff --git a/src/components/segmentedControl/segmentedControl.api.json b/src/components/segmentedControl/segmentedControl.api.json
index 96a36ad46b..682fb956ca 100644
--- a/src/components/segmentedControl/segmentedControl.api.json
+++ b/src/components/segmentedControl/segmentedControl.api.json
@@ -20,7 +20,9 @@
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"},
     {"name": "style", "type": "ViewStyle", "description": "Custom style to inner container"},
     {"name": "segmentLabelStyle", "type": "TextStyle", "description": "Segment label style"},
-    {"name": "testID", "type": "string", "description": "Component test id"}
+    {"name": "testID", "type": "string", "description": "Component test id"},
+    {"name": "label", "type": "string", "description": "SegmentedControl label"},
+    {"name": "labelProps", "type": "TextProps", "description": "Pass props for the SegmentedControl label"}
   ],
   "snippet": [
     "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"
diff --git a/src/components/stackAggregator/index.tsx b/src/components/stackAggregator/index.tsx
index 9ad7d522a7..3da6c796c0 100644
--- a/src/components/stackAggregator/index.tsx
+++ b/src/components/stackAggregator/index.tsx
@@ -15,46 +15,46 @@ const buttonStartValue = 0.8;
 const icon = require('./assets/arrow-down.png');
 
 export type StackAggregatorProps = ViewProps & {
-   /**
-     * The initial state of the stack
-     */
-    collapsed?: boolean;
-    /**
-     * Component Children
-     */
-    children: JSX.Element | JSX.Element[]
-    /**
-     * The container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * The content container style
-     */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    /**
-     * The items border radius
-     */
-    itemBorderRadius?: number;
-    /**
-     * Props passed to the 'show less' button
-     */
-    buttonProps?: ButtonProps;
-    /**
-     * A callback for item press
-     */
-    onItemPress?: (index: number) => void;
-    /**
-     * A callback for collapse state will change (value is future collapsed state)
-     */
-    onCollapseWillChange?: (changed: boolean) => void;
-    /**
-     * A callback for collapse state change (value is collapsed state)
-     */
-    onCollapseChanged?: (changed: boolean) => void;
-    /**
-     * A setting that disables the cards' onPress
-     */
-    disablePresses?: boolean;
+  /**
+   * The initial state of the stack
+   */
+  collapsed?: boolean;
+  /**
+   * Component Children
+   */
+  children: JSX.Element | JSX.Element[];
+  /**
+   * The container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * The content container style
+   */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * The items border radius
+   */
+  itemBorderRadius?: number;
+  /**
+   * Props passed to the 'show less' button
+   */
+  buttonProps?: ButtonProps;
+  /**
+   * A callback for item press
+   */
+  onItemPress?: (index: number) => void;
+  /**
+   * A callback for collapse state will change (value is future collapsed state)
+   */
+  onCollapseWillChange?: (changed: boolean) => void;
+  /**
+   * A callback for collapse state change (value is collapsed state)
+   */
+  onCollapseChanged?: (changed: boolean) => void;
+  /**
+   * A setting that disables the cards' onPress
+   */
+  disablePresses?: boolean;
 };
 
 /**
@@ -90,14 +90,14 @@ const StackAggregator = (props: StackAggregatorProps) => {
   }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
 
   /** Animations */
-  
+
   const animatedScale = new Animated.Value(isCollapsed ? buttonStartValue : 1);
   const animatedOpacity = new Animated.Value(isCollapsed ? buttonStartValue : 1);
   const animatedContentOpacity = useMemo(() => {
     return new Animated.Value(isCollapsed ? 0 : 1);
   }, [isCollapsed]);
   const easeOut = Easing.bezier(0, 0, 0.58, 1);
-  
+
   const getItemScale = useCallback((index: number) => {
     if (isCollapsed) {
       if (index === itemsCount - 2) {
@@ -108,7 +108,8 @@ const StackAggregator = (props: StackAggregatorProps) => {
       }
     }
     return 1;
-  }, [isCollapsed, itemsCount]);
+  },
+  [isCollapsed, itemsCount]);
 
   const getAnimatedScales = useCallback(() => {
     return React.Children.map(children, (_item, index) => {
@@ -126,7 +127,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
 
   const animateValues = () => {
     const newValue = isCollapsed ? buttonStartValue : 1;
-    
+
     return new Promise(resolve => {
       Animated.parallel([
         Animated.timing(animatedOpacity, {
@@ -255,12 +256,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
         ]}
         collapsable={false}
       >
-        <Card
-          style={styles.card}
-          onPress={() => _onItemPress(index)}
-          borderRadius={itemBorderRadius}
-          elevation={5}
-        >
+        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {opacity: animatedContentOpacity} : undefined} collapsable={false}>
             {item}
           </Animated.View>
@@ -297,13 +293,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
           return renderItem(item as JSX.Element | JSX.Element[], index);
         })}
 
-        {isCollapsed && (
-          <TouchableOpacity
-            onPress={open}
-            activeOpacity={1}
-            style={touchableOpacityStyle}
-          />
-        )}
+        {isCollapsed && <TouchableOpacity onPress={open} activeOpacity={1} style={touchableOpacityStyle}/>}
       </View>
     </View>
   );
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
index e2e1ac8a53..a9d10b521f 100644
--- a/src/components/textField/index.tsx
+++ b/src/components/textField/index.tsx
@@ -70,7 +70,7 @@ const TextField = (props: InternalTextFieldProps) => {
     labelStyle,
     labelProps,
     // Accessory Buttons
-    leadingAccessory,
+    leadingAccessory: propsLeadingAccessory,
     trailingAccessory,
     topTrailingAccessory,
     bottomAccessory,
@@ -107,12 +107,16 @@ const TextField = (props: InternalTextFieldProps) => {
   }, [fieldState, others.editable, readonly, validateField, checkValidity]);
 
   const leadingAccessoryClone = useMemo(() => {
-    if (leadingAccessory) {
-      return React.cloneElement(leadingAccessory, {
+    if (propsLeadingAccessory) {
+      return React.cloneElement(propsLeadingAccessory, {
         ref: leadingAccessoryRef
       });
     }
-  }, [leadingAccessory]);
+  }, [propsLeadingAccessory]);
+
+  const leadingAccessory = useMemo(() => {
+    return floatingPlaceholder ? leadingAccessoryClone : propsLeadingAccessory;
+  }, [floatingPlaceholder, leadingAccessoryClone, propsLeadingAccessory]);
 
   const {margins, paddings, typography, positionStyle, color} = modifiers;
   const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);
@@ -161,7 +165,7 @@ const TextField = (props: InternalTextFieldProps) => {
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
           {/* <View row centerV> */}
-          {leadingAccessoryClone}
+          {leadingAccessory}
 
           {/* Note: We're passing flexG to the View to support properly inline behavior - so the input will be rendered correctly in a row container.
             Known Issue: This slightly push the trailing accessory and clear button when entering a long text
diff --git a/src/incubator/Dialog/dialog.api.json b/src/incubator/Dialog/dialog.api.json
index 53d2fb2498..0a56b6f248 100644
--- a/src/incubator/Dialog/dialog.api.json
+++ b/src/incubator/Dialog/dialog.api.json
@@ -29,6 +29,11 @@
       "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
       "default": "down"
     },
+    {
+      "name": "showClose",
+      "type": "boolean",
+      "description": "Show the close button"
+    },
     {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
     {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
     {
diff --git a/src/incubator/Dialog/index.tsx b/src/incubator/Dialog/index.tsx
index 2b0abb1b2b..eb4d32cf6c 100644
--- a/src/incubator/Dialog/index.tsx
+++ b/src/incubator/Dialog/index.tsx
@@ -24,6 +24,7 @@ import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
 import useHiddenLocation from '../hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
+import useDialogContent from './useDialogContent';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps} from './types';
 export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps};
 
@@ -42,8 +43,10 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const {
     visible = false,
     headerProps,
-    containerStyle,
-    containerProps,
+    showCloseButton,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
     width,
     height,
     onDismiss,
@@ -124,6 +127,16 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const {DialogContent, containerProps, containerStyle} = useDialogContent({
+    showCloseButton,
+    close,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    headerProps,
+    children
+  });
+
   // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     if (isVertical) {
@@ -202,8 +215,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     <GestureDetector gesture={panGesture}>
       {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
-        {headerProps && <DialogHeader {...headerProps}/>}
-        {children}
+        <DialogContent/>
       </View>
     </GestureDetector>
   );
diff --git a/src/incubator/Dialog/types.ts b/src/incubator/Dialog/types.ts
index 48e76ea9f0..e5e8ccabb8 100644
--- a/src/incubator/Dialog/types.ts
+++ b/src/incubator/Dialog/types.ts
@@ -2,10 +2,11 @@ import {PropsWithChildren, ReactElement} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {AlignmentModifiers} from '../../commons/modifiers';
 import {DialogProps as DialogPropsOld} from '../../components/dialog';
+import {ButtonProps} from '../../components/button';
 import {ModalProps} from '../../components/modal';
-import {ViewProps} from '../../components/view';
-import {TextProps} from '../../components/text';
 import {PanningDirections, PanningDirectionsEnum} from '../panView';
+import {TextProps} from '../../components/text';
+import {ViewProps} from '../../components/view';
 type DialogDirections = PanningDirections;
 const DialogDirectionsEnum = PanningDirectionsEnum;
 export {DialogDirections, DialogDirectionsEnum};
@@ -69,11 +70,7 @@ export interface DialogHeaderProps extends ViewProps {
   onPress?: () => void;
 }
 
-export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSafeArea'> {
-  /**
-   * The visibility of the dialog.
-   */
-  visible?: boolean;
+export interface DialogCloseButtonProps {
   /**
    * The Dialog's header (title, subtitle etc)
    */
@@ -86,6 +83,21 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
    * Extra props for the container
    */
   containerProps?: Omit<ViewProps, 'reanimated' | 'animated' | 'style' | 'onLayout' | 'ref' | 'testID'>;
+  /**
+   * Whether to show the close button or not
+   */
+  showCloseButton?: boolean;
+  /**
+   * The close button props
+   */
+  closeButtonProps?: Pick<ButtonProps, 'label' | 'labelProps' | 'iconProps'>;
+}
+
+export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSafeArea'>, DialogCloseButtonProps {
+  /**
+   * The visibility of the dialog.
+   */
+  visible?: boolean;
   /**
    * The dialog width.
    */
diff --git a/src/incubator/Dialog/useDialogContent.tsx b/src/incubator/Dialog/useDialogContent.tsx
new file mode 100644
index 0000000000..b7cf992ea8
--- /dev/null
+++ b/src/incubator/Dialog/useDialogContent.tsx
@@ -0,0 +1,87 @@
+import React, {PropsWithChildren, useMemo} from 'react';
+import {BorderRadiuses, Colors} from '../../style';
+import {DialogCloseButtonProps} from './types';
+import {StyleSheet} from 'react-native';
+import Assets from '../../assets';
+import DialogHeader from './DialogHeader';
+import Icon from '../../components/icon';
+import Text from '../../components/text';
+import TouchableOpacity from '../../components/touchableOpacity';
+import View from '../../components/view';
+
+interface InternalDialogCloseButtonProps extends PropsWithChildren<DialogCloseButtonProps> {
+  close: () => void;
+}
+
+const useDialogContent = (props: InternalDialogCloseButtonProps) => {
+  const {
+    showCloseButton,
+    close,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    headerProps,
+    children
+  } = props;
+
+  const DialogCloseButton = useMemo(() => {
+    if (!showCloseButton) {
+      return null;
+    }
+
+    return (
+      <View left centerV pointerEvents={'box-none'}>
+        <TouchableOpacity paddingB-s2 row onPress={close}>
+          <Icon source={Assets.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps}/>
+          <Text recorderTag={'unmask'} text70BO white {...closeButtonProps?.labelProps}>
+            {closeButtonProps?.label || 'Close'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }, [showCloseButton, close, closeButtonProps]);
+
+  const containerProps = useMemo((): DialogCloseButtonProps['containerProps'] => {
+    return showCloseButton ? {...propsContainerProps, pointerEvents: 'box-none'} : propsContainerProps;
+  }, [showCloseButton, propsContainerProps]);
+
+  const containerStyle = useMemo(() => {
+    return showCloseButton ? [propsContainerStyle, styles.transparent] : propsContainerStyle;
+  }, [showCloseButton, propsContainerStyle]);
+
+  const DialogContent = () => {
+    const DialogContent = (
+      <>
+        {headerProps && <DialogHeader {...headerProps}/>}
+        {children}
+      </>
+    );
+
+    if (DialogCloseButton) {
+      return (
+        <>
+          {DialogCloseButton}
+          <View style={styles.dialogContentContainer}>{DialogContent}</View>
+        </>
+      );
+    } else {
+      return DialogContent;
+    }
+  };
+
+  return {DialogContent, containerStyle, containerProps};
+};
+
+export default useDialogContent;
+
+const styles = StyleSheet.create({
+  transparent: {
+    backgroundColor: Colors.transparent
+  },
+  dialogContentContainer: {
+    flexShrink: 1,
+    backgroundColor: Colors.$backgroundDefault,
+    overflow: 'hidden',
+    borderRadius: BorderRadiuses.br60
+  }
+});
diff --git a/src/index.ts b/src/index.ts
index 1ba81dfb83..8fee83d04a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -124,6 +124,7 @@ export {
   PickerMethods
 } from './components/picker';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
+export {default as ProgressiveImage, ProgressiveImageProps} from './components/progressiveImage';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';
 export {default as RadioGroup, RadioGroupProps} from './components/radioGroup';
 export type {RecorderProps} from './typings/recorderTypes';