From e633dcda670b0070f04702fff07b815ccb4d9c52 Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Sun, 11 Aug 2024 11:28:23 +0300
Subject: [PATCH 01/11] TextField - only use leadingAccessoryRef when needed
 (i.e. floatingPlaceholder={true}) (#3197)

---
 src/components/textField/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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

From 3437aca027da12f13c28c9be4462cddc3a1b37af Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Tue, 13 Aug 2024 09:59:30 +0300
Subject: [PATCH 02/11] Badge - fix labelStyle's type (#3207)

---
 src/components/badge/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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.

From bfea0342b0fbf55ec26c8a4c847e46a055e77dc1 Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:03:10 +0300
Subject: [PATCH 03/11] ColorSwatch - support theme and color modifiers (#3209)

---
 src/components/colorSwatch/index.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

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({

From 0144852034f1f614d4ca701b289bdd6c96780253 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 14 Aug 2024 11:21:38 +0300
Subject: [PATCH 04/11] StackAggregator - prettify

---
 .../StackAggregatorScreen.tsx                 |  27 +++--
 src/components/stackAggregator/index.tsx      | 104 ++++++++----------
 2 files changed, 60 insertions(+), 71 deletions(-)

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/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>
   );

From b112b5f532c22757ee717a02b025254a4d8bf44f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=A4=A7=E4=BE=A0?=
 <46771139+crazyshakalaka@users.noreply.github.com>
Date: Thu, 15 Aug 2024 15:32:35 +0800
Subject: [PATCH 05/11] fix: picker items list is error when array is empty
 (#3204)

Co-authored-by: Spring Xue <springx@panda-eu.com>
---
 src/components/picker/PickerItemsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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;

From 1b9fbdf3f52fdcebe208b9fca40541c55ac555b6 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Thu, 15 Aug 2024 15:53:13 +0300
Subject: [PATCH 06/11] Hint - Hide mocked children (#3194)

* hidden the mocked children so they wont be visible

* Revert "hidden the mocked children so they wont be visible"

This reverts commit 03974dc339b54ae34e6f16a4140795a9254362c7.

* changed mockChildren opacity handling

* moved opacity style to styles object
---
 src/components/hint/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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

From b4aa69abb9b19881e67d7269c0ed3a8d1f897597 Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Sun, 18 Aug 2024 10:37:25 +0300
Subject: [PATCH 07/11] Dialog - add showClose (#3192)

* Dialog - add showClose

* Review fixes 1

* Review fixes 2

* Rename to useDialogContent
---
 src/assets/icons/index.js                 |   3 +
 src/assets/icons/xMedium.png              | Bin 0 -> 218 bytes
 src/assets/icons/xMedium@1.5x.png         | Bin 0 -> 256 bytes
 src/assets/icons/xMedium@2x.png           | Bin 0 -> 290 bytes
 src/assets/icons/xMedium@3x.png           | Bin 0 -> 390 bytes
 src/assets/icons/xMedium@4x.png           | Bin 0 -> 483 bytes
 src/incubator/Dialog/dialog.api.json      |   5 ++
 src/incubator/Dialog/index.tsx            |  20 ++++-
 src/incubator/Dialog/types.ts             |  26 +++++--
 src/incubator/Dialog/useDialogContent.tsx |  87 ++++++++++++++++++++++
 10 files changed, 130 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/icons/xMedium.png
 create mode 100644 src/assets/icons/xMedium@1.5x.png
 create mode 100644 src/assets/icons/xMedium@2x.png
 create mode 100644 src/assets/icons/xMedium@3x.png
 create mode 100644 src/assets/icons/xMedium@4x.png
 create mode 100644 src/incubator/Dialog/useDialogContent.tsx

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 0000000000000000000000000000000000000000..e04f7620b490d77d234318776770371adf96f3c6
GIT binary patch
literal 218
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaN3?zjj6;1;wxd5LKSN8%RWm8850~-ZH8$DZF
zHA^Q&Lt8~d8z2c3tl=$v0946Y666=mAbRDjfb{LXE27$87yt#6JY5_^BrYc>ERfkS
zyUF7t8%KH+12gmDG{zZ+lV+YepkU(3u;^T66vN_WN+H4lTzZU?n!Fp92nabWc3^XA
zyr43n(SXx6eTT>e4Y3&_H~40VSf9`k^JX?^Uo7CVOFZD<d4`66g2A&yRz3pS#^CAd
K=d#Wzp$PzH&Og`y

literal 0
HcmV?d00001

diff --git a/src/assets/icons/xMedium@1.5x.png b/src/assets/icons/xMedium@1.5x.png
new file mode 100644
index 0000000000000000000000000000000000000000..52e8981cc4c10a4d8580237bd532a410c3e8b4f1
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|l3?zm1T2})pxd5LKSN8&+|Ns9h7}@}lqLHnG
zgM%WFVQ8mpXscjgvsugHBv2)1NswPK1LNAc-7Iq)Ll}xDJOv7Nc)B=-Xq-QLek11r
z1p(Fz!Yt7TC5>8?Z=|xCd!)}cD&=~(t#{tMk1+}xt?c;!$Uji`kFB;Ba%bCKW?|!2
zA{<=jA|O>fL)U#)gyYA*4L5qECU?wmIU*Kvvq>vD@MoWT&rG@BEu2pkBHu1iUF_Gi
y^-<H;N5YRwg^gou9#}3qA#Bl<a{ck=?+g>(87jvw-I@Y)6N9I#pUXO@geCwO&sr-0

literal 0
HcmV?d00001

diff --git a/src/assets/icons/xMedium@2x.png b/src/assets/icons/xMedium@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ebc8e901f12a0bc47d2842207652754ef88b168
GIT binary patch
literal 290
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)I<N|y`T-^(N6bx+@4Q-VSZ50e{
zfJo5*$hKDmvJGrveH>N*RdSXD`2{ol33vIPd(HY?hWq)AK*3d>E{-7<r=MQf$lGin
zz#7nEt{@tF$Dpx$%>zB_B^@sU%}y|gxa`bjF5CAm=Rfa`S4-Bb|E{|}w>mHX?(*fF
zX*-kO9`_f_iP(E1L2yFdly1%#mXDj_-oAe5UuGb3pJ^qd2eU)e1Wv}81`{}#I|C-1
zaM1p?sQ2d0{VGvKjMq+_D0EJEvg4rOq<%FO`MW|}t_W-i5nj7hDJt7FEm!lzb+)M0
h-DVZGKk82XWE6Yh5|Q`%v=7kL44$rjF6*2UngHtmZ8QJ?

literal 0
HcmV?d00001

diff --git a/src/assets/icons/xMedium@3x.png b/src/assets/icons/xMedium@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..412c39d594940f8a407533ec574a289ed9409a9b
GIT binary patch
literal 390
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xZ3?!EyURMI7R04cLT-^(NR6V>D3~hl((a`48
zr%xJY&Wb>;fejF8Te<_uuSOqgf$F(Sg8YIR*tSi-z$jdN{k%|jY2|MQ21Yhd7sn8f
z<8QAR3Nb12um;STxUqE4!E0vUZog*Sw($$cv|BfCR<+nRtt;C(hpBr)3rn?mYFj1G
zlV-zU-><s6*Q}qp_58dNKkHo?j2n*56+JLf=N9uGK8`5nJ0})d3cO-I*qYz2!M^dW
zPq!vJ@0$a%i)^lZsCEjGJT!$N(W|M*tEI@RO=zh@=cNT6D+894WPp%Xzyhs+C2d~!
zc3X+O>sU6|R;t`&(l?`!g-js}|D<lW5?yxfWyp+Kp(`!wrglBPzG8}UtC!`Zl{OQU
zrm_buD%ixzrM}zeqWYti`#y9&ZTxbj?f*=R34K)`?1j~D2bS-PJ$%V;yYX}FN~LL~
hF`wJdh1AF7=We+hm;QZO8!(_4JYD@<);T3K0RZc~q8R`H

literal 0
HcmV?d00001

diff --git a/src/assets/icons/xMedium@4x.png b/src/assets/icons/xMedium@4x.png
new file mode 100644
index 0000000000000000000000000000000000000000..91bc16c117659e29030673a8455c335198e93e93
GIT binary patch
literal 483
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeE3?v1%WpM*3tpJ}8SN8%RMME1kBNr7T2Sr0$
zB?Eg!Lpucn8z8c`cLs?V*(n*?0=Yi3&w`BMEeY}qX80&+amzIB(oy#54ULjZ8>1N*
z7^6L1977@wzrALdb=W|J?ZE_}NNzc1PL^HQ*bSd>>~&+3+_ZecTK5-M_D+8xz_iY@
zqTDm*=Bl^fy?>c*d(nI7Q@YOH`Q|g1cujrPf8~$J_dj0(_8$1!uUvQ8Yl+M2ohQWd
zeuzvA-)j@yapytXUWZ4F9<1hjIF+&->K?S^JG$_m5Y4L)cQ9$Nd3ZmHVG-jw=^BA-
zUkQccxpUO^Fev<CP+)3Ma%xa&I?%zvtlY%F#=^|Q!SzB==7O@v0U@0PPN^3hKqLnw
zf2c+r5R#Oi<tlSQ&Zx`L{pqvGr#u?eKfT*NZ6bsBjOdUHF4ex*O)kb=*7Uw%m%w?O
zUFBl7N#6@oDOVn=nTl+4eFPS-;1C94A+2twmQ#xu7!RHEZ`klz$iTPu2$yTCqTabm
z&-6g&5D+y{(QjR)=3&E%va{YAZ?YB@o%J^Goge%8(x2?@J(2!XwXW8$uwJ3HzjlF3
SpCB;&89ZJ6T-G@yGywp5Kem4W

literal 0
HcmV?d00001

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
+  }
+});

From 6d6859952244ca4397fb71a343834f50d4521dd8 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 18 Aug 2024 14:32:30 +0300
Subject: [PATCH 08/11] export progressiveImage component (#3213)

---
 src/components/index.js                       |  3 ++
 .../progressiveImage/{index.js => index.tsx}  | 40 +++++++------------
 src/index.ts                                  |  1 +
 3 files changed, 19 insertions(+), 25 deletions(-)
 rename src/components/progressiveImage/{index.js => index.tsx} (55%)

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/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/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';

From e82d8494bad4ebb99041a2269e8019b95a913a84 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Sun, 18 Aug 2024 15:49:07 +0300
Subject: [PATCH 09/11] Segmented Control - Component label (#3212)

* added a label to the segmented control

* Added sanity tests
---
 .../SegmentedControlScreen.tsx                | 12 ++++++++++-
 .../segmentedControl/__tests__/index.spec.tsx | 20 +++++++++++++++++++
 src/components/segmentedControl/index.tsx     | 14 ++++++++++++-
 .../segmentedControl.api.json                 |  4 +++-
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/components/segmentedControl/__tests__/index.spec.tsx

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/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}/>"

From 3627dbc4fc23b741e1f0eea06da28e21e34b91f8 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Tue, 20 Aug 2024 15:35:53 +0300
Subject: [PATCH 10/11] Release notes - make the token personal

---
 .gitignore                | 1 +
 scripts/prReleaseNotes.js | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

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/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';

From d95738e630f917a8c43ec5a39f87219c3caee7f4 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Wed, 21 Aug 2024 12:06:24 +0300
Subject: [PATCH 11/11] outlineWidth support zero value (#3218)

---
 src/components/button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
       };