react-native-ui-lib 7.39.1 → 7.40.0-snapshot.6808

package/src/components/button/button.api.json

@@ -2,13 +2,8 @@
   "name": "Button",
   "category": "controls",
   "description": "Customizable button component that handles press events",
-  "extends": [
-    "basic/TouchableOpacity"
-  ],
-  "modifiers": [
-    "margin",
-    "background"
-  ],
+  "extends": ["basic/TouchableOpacity"],
+  "modifiers": ["margin", "background"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Sizes.png?raw=true",
@@ -140,7 +135,7 @@
     {
       "name": "enableShadow",
       "type": "boolean",
-      "description": "Control shadow visibility (iOS-only)"
+      "description": "Control shadow visibility"
     },
     {
       "name": "avoidInnerPadding",
@@ -169,12 +164,21 @@
     }
   ],
   "snippet": [
-    "<Button label={'Press'$1} size={Button.sizes.medium$2} backgroundColor={Colors.red30$3}/>"
+    "<View flex>",
+    "<View flex center gap-s5>",
+    "<Button label={'Press'} backgroundColor={Colors.red30}/>",
+    "<Button label={'Press'} outline size={Button.sizes.medium}/>",
+    "<Button label={'Press'}  iconSource={Assets.icons.demo.star}/>",
+    "</View>",
+    "<View flex bottom>",
+    "<Button fullWidth label='Full Width Button'/>",
+    "</View>",
+    "</View>"
   ],
   "docs": {
     "hero": {
       "title": "Button",
-      "description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. 
Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
+      "description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. 
 Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -189,10 +193,7 @@
         "sections": [
           {
             "type": "table",
-            "columns": [
-              "Type",
-              "Component"
-            ],
+            "columns": ["Type", "Component"],
             "items": [
               {
                 "title": "Main Button",
@@ -221,15 +222,6 @@
                   }
                 ]
               },
-              {
-                "title": "Floating Button",
-                "description": "The Floating Button is displayed at the bottom of the screen.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_floatingButton.png"
-                  }
-                ]
-              },
               {
                 "title": "Full-Width Button",
                 "description": "Full Width buttons are sticky on the bottom of the screens.",
@@ -238,15 +230,6 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_fullButton.png"
                   }
                 ]
-              },
-              {
-                "title": "Toggle Button",
-                "description": "Toggle Button are mainly used to toggle between a state, f.e- favorite, like.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_toggleButtons.png"
-                  }
-                ]
               }
             ],
             "title": "Button Types",
@@ -259,10 +242,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Primary",
@@ -289,11 +269,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Main",
@@ -320,7 +296,7 @@
                 ]
               },
               {
-                "title": "Distructive",
+                "title": "Destructive",
                 "description": "Used for destructive actions such as Delete and Log out. ",
                 "content": [
                   {
@@ -330,18 +306,6 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructiveSecondary.png"
                   }
                 ]
-              },
-              {
-                "title": "Premium",
-                "description": "Used as a premium upgrade entry point.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumSecondary.png"
-                  }
-                ]
               }
             ],
             "title": "",
@@ -355,11 +319,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -404,11 +364,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -453,59 +409,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
-            "items": [
-              {
-                "title": "Active",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActivePrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActiveSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Loading",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Disabled",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledSecondary.png"
-                  }
-                ],
-                "description": ""
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Premium"
-          },
-          {
-            "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Large",
@@ -540,10 +444,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Icon prefix",
@@ -574,10 +475,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Primary",
@@ -603,11 +501,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Main",
@@ -643,11 +537,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -678,43 +568,6 @@
             "description": "",
             "name": "Main"
           },
-          {
-            "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
-            "items": [
-              {
-                "title": "Active",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedActiveSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Disabled",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledSecondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Inverted"
-          },
           {
             "type": "section",
             "title": "Usage Examples",
@@ -732,10 +585,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Main",
@@ -747,7 +597,7 @@
                 ]
               },
               {
-                "title": "Distructive",
+                "title": "Destructive",
                 "description": "text style: bodyBold, $textDangerLight",
                 "content": [
                   {
@@ -769,10 +619,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Regular",
@@ -797,11 +644,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Regular",
-              "Small (bodyBoldSmall)"
-            ],
+            "columns": ["Property", "Regular", "Small (bodyBoldSmall)"],
             "items": [
               {
                 "title": "Icon prefix",
@@ -834,14 +677,11 @@
           {
             "type": "section",
             "title": "Full-Width Button",
-            "description": "Full-Width buttons are sticky on the bottom of the screens.
They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
+            "description": "Full-Width buttons are sticky on the bottom of the screens.
They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Main",
@@ -853,7 +693,7 @@
                 ]
               },
               {
-                "title": "Distructive ",
+                "title": "Destructive ",
                 "description": "",
                 "content": [
                   {
@@ -876,10 +716,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Active",
@@ -914,7 +751,7 @@
         ]
       },
       {
-        "title": "UX",
+        "title": "UX Guidelines",
         "sections": [
           {
             "type": "list",
@@ -939,7 +776,7 @@
               },
               {
                 "title": "Action text truncation/ellipsis",
-                "description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. 
In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
+                "description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. 
 In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_truncation.png"

package/src/components/button/index.d.ts

@@ -359,7 +359,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
     };
     componentDidUpdate(prevProps: Props): void;
     onLayout: (event: LayoutChangeEvent) => void;
-    get isOutline(): boolean;
     get isLink(): boolean | undefined;
     get isFilled(): boolean;
     get isIconButton(): boolean | "" | 0 | null | undefined;

package/src/components/button/index.js

@@ -46,13 +46,6 @@ class Button extends PureComponent {
       });
     }
   };
-  get isOutline() {
-    const {
-      outline,
-      outlineColor
-    } = this.props;
-    return Boolean(outline || outlineColor);
-  }
   get isLink() {
     const {
       link,
@@ -61,7 +54,7 @@ class Button extends PureComponent {
     return link || hyperlink;
   }
   get isFilled() {
-    return !this.isOutline && !this.isLink;
+    return this.getBackgroundColor() !== 'transparent';
   }
   get isIconButton() {
     const {
@@ -119,7 +112,7 @@ class Button extends PureComponent {
     } else if (this.isIconButton) {
       color = backgroundColor === 'transparent' ? undefined : Colors.$iconDefaultLight;
     }
-    if (disabled && (isLink || outline)) {
+    if (disabled && !this.isFilled) {
       return Colors.$textDisabled;
     }
     color = propsColor || modifiersColor || color;

package/src/components/button/types.d.ts

@@ -113,7 +113,7 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
      */
     round?: boolean;
     /**
-     * Control shadow visibility (iOS-only)
+     * Control shadow visibility
      */
     enableShadow?: boolean;
     /**

package/src/components/card/index.js

@@ -22,7 +22,7 @@ const DEFAULT_SELECTION_PROPS = {
   borderWidth: 2,
   color: Colors.$backgroundPrimaryHeavy,
   indicatorSize: 20,
-  icon: Assets.icons.checkSmall,
+  icon: Assets.internal.icons.checkSmall,
   iconColor: Colors.$iconDefaultLight,
   hideIndicator: false
 };

package/src/components/checkbox/index.d.ts

@@ -103,7 +103,10 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
         accessible: boolean;
         accessibilityLabel: string;
         accessibilityRole: string;
-        accessibilityStates: string[] | undefined;
+        accessibilityState: {
+            disabled: boolean | undefined;
+            checked: boolean | undefined;
+        };
     };
     animateCheckbox(value: CheckboxProps['value']): void;
     setValidation(newValue: boolean): void;
@@ -120,7 +123,7 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
-    validate: () => void;
+    validate: () => boolean;
     isValid: () => boolean | undefined;
 }
 declare const _default: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<any>>;

package/src/components/checkbox/index.js

@@ -60,16 +60,18 @@ class Checkbox extends Component {
   }
   getAccessibilityProps() {
     const {
-      accessibilityLabel,
+      accessibilityLabel = 'checkbox',
       disabled,
       value
     } = this.props;
-    const checkedState = value ? 'checked' : 'unchecked';
     return {
       accessible: true,
-      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel} ${checkedState}` : `${checkedState}`,
+      accessibilityLabel,
       accessibilityRole: 'checkbox',
-      accessibilityStates: disabled ? ['disabled'] : undefined
+      accessibilityState: {
+        disabled,
+        checked: value
+      }
     };
   }
   animateCheckbox(value) {
@@ -167,7 +169,7 @@ class Checkbox extends Component {
         }]}>
             <AnimatedIcon style={[this.styles.selectedIcon, {
             transform: this.animationStyle.transform
-          }]} source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
+          }]} source={indeterminate ? Assets.internal.icons.minusSmall : selectedIcon || Assets.internal.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
           </Animated.View>}
       </TouchableOpacity>
     );
@@ -192,12 +194,13 @@ class Checkbox extends Component {
       value,
       required
     } = this.props;
-    const error = required && !value;
+    const isValid = !(required && !value);
     this.validationState = true;
     this.setState({
-      showError: error,
-      isValid: !error
+      showError: !isValid,
+      isValid
     });
+    return isValid;
   };
   isValid = () => {
     return this.state.isValid;

package/src/components/chip/index.js

@@ -27,7 +27,7 @@ const Chip = ({
   containerStyle,
   onDismiss,
   dismissColor = Colors.$iconDefault,
-  dismissIcon = Assets.icons.x,
+  dismissIcon = Assets.internal.icons.x,
   dismissIconStyle,
   dismissContainerStyle,
   iconProps,

package/src/components/chipsInput/index.js

@@ -5,8 +5,8 @@ import { StyleSheet } from 'react-native';
 import { Constants } from "../../commons/new";
 import { useCombinedRefs, useDidUpdate } from "../../hooks";
 import TextField from "../textField";
+import Assets from "../../assets";
 import Chip from "../chip";
-const removeIcon = require("./assets/xSmall.png");
 export let ChipsInputChangeReason = /*#__PURE__*/function (ChipsInputChangeReason) {
   ChipsInputChangeReason["Added"] = "added";
   ChipsInputChangeReason["Removed"] = "removed";
@@ -85,7 +85,7 @@ const ChipsInput = forwardRef((props, refToForward) => {
     return <Chip key={index} customValue={index}
     // resetSpacings
     // paddingH-s2
-    marginR-s2 marginB-s2 dismissIcon={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorPicker/ColorPickerDialog.js

@@ -116,7 +116,7 @@ const ColorPickerDialog = props => {
       <ColorPickerDialogSliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate} />
     </Dialog>;
 };
-ColorPickerDialog.displayName = 'ColorPicker';
+ColorPickerDialog.displayName = 'ColorPickerDialog';
 export default asBaseComponent(ColorPickerDialog);
 const styles = StyleSheet.create({
   dialog: {

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -16,10 +16,10 @@ const ColorPickerDialogHeader = props => {
     onDonePressed
   } = props;
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
-      <Button link iconSource={Assets.icons.x} iconStyle={{
+      <Button link iconSource={Assets.internal.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
     </View>;
 };
 export default ColorPickerDialogHeader;

package/src/components/colorPicker/ColorPickerPreview.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StyleSheet, TextInput, PixelRatio, I18nManager } from 'react-native';
+import { StyleSheet, TextInput, I18nManager } from 'react-native';
 import { Colors, Typography } from "../../style";
 import { BORDER_RADIUS, getHexString, getTextColor } from "./ColorPickerPresenter";
 import View from "../view";
@@ -19,7 +19,7 @@ const ColorPickerPreview = props => {
   const textInput = useRef(null);
   const hex = getHexString(color);
   const textColor = getTextColor(hex);
-  const fontScale = PixelRatio.getFontScale();
+  const fontScale = Constants.getFontScale();
   const value = Colors.isTransparent(text) ? '000000' : text;
   return <View style={[styles.preview, {
     backgroundColor: hex

package/src/components/colorPicker/index.js

@@ -42,7 +42,7 @@ const ColorPicker = props => {
       <View style={[styles.buttonContainer, {
       backgroundColor
     }]}>
-        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
+        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.internal.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
       </View>
       <ColorPickerDialog {...props} key={initialColor} visible={show} onDismiss={hideDialog} accessibilityLabels={{
       dismissButton: accessibilityLabels?.dismissButton,

package/src/components/colorSwatch/index.js

@@ -6,7 +6,6 @@ import { asBaseComponent, Constants } from "../../commons/new";
 import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
-const transparentImage = require("./assets/transparentSwatch/TransparentSwatch.png");
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
@@ -141,10 +140,10 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={Assets.internal.images.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={Assets.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.internal.icons.check} style={{
         tintColor,
         opacity: isSelected,
         transform: [{

package/src/components/dateTimePicker/index.js

@@ -137,10 +137,10 @@ const DateTimePicker = forwardRef((props, ref) => {
   }, [onDonePressed, toggleExpandableOverlay]);
   const renderHeader = () => {
     return <View row spread bg-$backgroundDefault backgroundColor={backgroundColor} paddingH-20 style={[styles.header, headerStyle]} testID={`${testID}.header`}>
-        <Button link iconSource={Assets.icons.x} iconStyle={{
+        <Button link iconSource={Assets.internal.icons.x} iconStyle={{
         tintColor: Colors.$iconDefault
       }} testID={`${testID}.cancel`} {...cancelButtonProps} onPress={toggleExpandableOverlay} />
-        <Button link iconSource={Assets.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
+        <Button link iconSource={Assets.internal.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
       </View>;
   };
   const renderDateTimePicker = useCallback(() => {