react-native-ui-lib 7.39.0-snapshot.6599 → 7.39.0-snapshot.6618

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6599",
+  "version": "7.39.0-snapshot.6618",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -32,15 +32,13 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/docs/deployDocs.sh",
     "docs:build": "node scripts/docs/buildDocs.js",
-    "docs:start": "(cd docuilib && yarn start)",
     "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "release": "node ./scripts/release/release.js",
     "releaseDemo": "./scripts/release/releaseDemo.sh",
     "releaseDocs": "./scripts/release/releaseDocs.sh",
     "releaseEslint": "./scripts/release/releaseEslint.sh",
-    "releaseNative": "./scripts/release/releaseNative.sh",
-    "updateWebAssets": "node scripts/assets/extractDimensions.js"
+    "releaseNative": "./scripts/release/releaseNative.sh"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

package/scripts/docs/buildDocsCommon.js

@@ -7,7 +7,6 @@ const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 const SERVICES_DOCS_DIR = './docs/services';
-const FOUNDATION_DOCS_DIR = './docs/foundation';
 
 const VALID_COMPONENTS_CATEGORIES = [
   'foundation',
@@ -31,9 +30,6 @@ const VALID_COMPONENTS_CATEGORIES = [
 
 function buildDocs(apiFolders, componentsPreProcess) {
   let components = readComponentsFromApiFiles(apiFolders);
-
-  logStatistics(components);
-
   components = componentsPreProcess?.(components) ?? components;
   resetDocsDir();
   processComponents(components);
@@ -88,26 +84,22 @@ function processComponents(components) {
     content += `sidebar_label: ${componentName}\n`;
     content += '---\n\n';
 
-    content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
-    const componentObject = JSON.stringify(component);
-    content += `<ComponentPage component={${componentObject}}/>\n`;
+    if (component.docs) {
+      content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
+      const componentObject = JSON.stringify(component);
+      content += `<ComponentPage component={${componentObject}}/>\n`;
+    } else {
+      content += `${buildOldDocs(component)}\n`;
+    }
+
 
     let dirPath;
-    switch (component.category) {
-      case 'services': {
-        dirPath = `${SERVICES_DOCS_DIR}`;
-        break;
-      }
-      case 'foundation': {
-        dirPath = `${FOUNDATION_DOCS_DIR}`;
-        break;
-      }
-      default: {
-        const componentParentDir =
-          componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
-        dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
-        break;
-      }
+    if (component.category === 'services') {
+      dirPath = `${SERVICES_DOCS_DIR}`;
+    } else {
+      const componentParentDir =
+        componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
+      dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
     }
 
     if (!fs.existsSync(dirPath)) {
@@ -133,20 +125,86 @@ function generateExtendsLink(extendsLink) {
   return extendsText;
 }
 
-function logStatistics(components) {
-  const groupedComponents = _.countBy(components, 'name');
-  const duplicateComponents = Object.entries(groupedComponents)
-    .filter(([_, count]) => count > 1)
-    .map(([name, count]) => `${name} (${count} times)`);
+function buildOldDocs(component) {
+  let content = '';
+  content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
+
+  /* General Info */
+  content += `${component.description}  \n`;
+  if (typeof component.example === 'string') {
+    content += `[(code example)](${component.example})\n`;
+  } else if (Array.isArray(component.example)) {
+    content += '(code examples: ';
+    component.example.forEach((example, index) => {
+      const slashIndex = example.lastIndexOf('/');
+      const dotIndex = example.lastIndexOf('.');
+      content += `${index > 0 ? ', ' : ''}[${example.slice(slashIndex + 1, dotIndex)}](${example})`;
+    });
+    content += ')\n';
+  }
+
+  if (component.extends) {
+    let extendsText = component.extends?.join(', ');
+    if (component.extendsLink) {
+      extendsText = `[${extendsText}](${component.extendsLink})`;
+    } else {
+      extendsText = _.map(component.extends, generateExtendsLink).join(', ');
+    }
+    content += ':::info\n';
+    content += `This component extends **${extendsText}** props.\n`;
+    content += ':::\n';
+  }
+
+  if (component.modifiers) {
+    content += ':::tip\n';
+    content += `This component support **${component.modifiers?.join(', ')}** modifiers.\n`;
+    content += ':::\n';
+  }
+
+  if (component.caution) {
+    content += ':::caution\n';
+    content += `${component.caution}\n`;
+    content += ':::\n';
+  }
 
-  if (duplicateComponents.length > 0) {
-    console.log('Components with multiple occurrences:\n-', duplicateComponents.join('\n- '));
+  if (component.note) {
+    content += ':::note\n';
+    content += `${component.note}\n`;
+    content += ':::\n';
   }
 
-  const componentsWithoutSnippet = components.filter(c => !c.snippet).map(c => c.name);
-  if (componentsWithoutSnippet.length > 0) {
-    console.log('Components missing snippet:\n-', componentsWithoutSnippet.join('\n- '));
+  /* Images */
+  content += `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
+  component.images?.forEach(image => {
+    content += `<img style={{maxHeight: '420px'}} src={'${image}'}/>`;
+    content += '\n\n';
+  });
+  content += '</div>\n\n';
+
+  /* Snippet */
+  if (component.snippet) {
+    content += `### Usage\n`;
+    content += `<UILivePreview code={\`${component.snippet
+      ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
+      .join('\n')
+      .toString()}\`}/>\n\n`;
+  } else {
+    console.warn(`${component.name} does not have a snippet`);
   }
+
+  /* Props */
+  content += '## API\n';
+  _.sortBy(component.props, p => p.name)?.forEach(prop => {
+    content += `### ${prop.name}\n`;
+    if (prop.note) {
+      content += `#### ${prop.note}\n`;
+    }
+    content += `${prop.description}\n`;
+    // content += `<span style={{color: 'grey'}}>${_.escape(prop.type)}</span>\n\n`;
+    content += `\`${prop.type} \` \n\n`;
+  });
+
+  return content;
 }
 
 module.exports = {buildDocs};

package/src/assets/icons/index.js

@@ -0,0 +1,26 @@
+export const icons = {
+  get check() {
+    return require('./check.png');
+  },
+  get checkSmall() {
+    return require('./check-small.png');
+  },
+  get minusSmall() {
+    return require('./minusSmall.png');
+  },
+  get plusSmall() {
+    return require('./plusSmall.png');
+  },
+  get search() {
+    return require('./search.png');
+  },
+  get x() {
+    return require('./x.png');
+  },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
+  get xFlat() {
+    return require('./xFlat.png');
+  }
+};

package/src/assets/images/index.js

@@ -0,0 +1,5 @@
+export const images = {
+  get gradient() {
+    return require('./gradient.png');
+  }
+};

package/src/assets/index.js

@@ -1,9 +1,12 @@
 import { Assets } from "./Assets";
 export default new Assets().loadAssetsGroup('', {
+  get icons() {
+    return require("./icons").icons;
+  },
   get emojis() {
     return require("./emojis").emojis;
   },
-  get internal() {
-    return require("./internal").internal;
+  get images() {
+    return require("./images").images;
   }
 });

package/src/commons/Constants.d.ts

@@ -47,7 +47,6 @@ declare const constants: {
     };
     backspaceKey: string;
     enterKey: string;
-    getFontScale: () => number;
 };
 export default constants;
 export declare const _reset: () => void;

package/src/commons/Constants.js

@@ -1,4 +1,4 @@
-import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar, PixelRatio } from 'react-native';
+import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar } from 'react-native';
 export let orientations = /*#__PURE__*/function (orientations) {
   orientations["PORTRAIT"] = "portrait";
   orientations["LANDSCAPE"] = "landscape";
@@ -166,9 +166,7 @@ const constants = {
   },
   /* Keyboard */
   backspaceKey: 'Backspace',
-  enterKey: 'Enter',
-  /* Font scale */
-  getFontScale: PixelRatio.getFontScale
+  enterKey: 'Enter'
 };
 setStatusBarHeight();
 Dimensions.addEventListener('change', updateConstants);

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -95,7 +95,6 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Props
      * The label color
      */
     labelColor?: string;
-    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -163,14 +162,21 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -224,7 +230,6 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * The label color
      */
     labelColor?: string | undefined;
-    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -286,14 +291,21 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -347,7 +359,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * The label color
      */
     labelColor?: string | undefined;
-    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
     /**
      * ribbon label to display on the avatar
      */

package/src/components/avatar/index.js

@@ -56,7 +56,6 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
-    labelEllipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -179,7 +178,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -195,8 +194,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100,
-    overflow: 'hidden'
+    borderRadius: BorderRadiuses.br100
   },
   initialsContainerWithInset: {
     top: 1,

package/src/components/card/index.js

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

package/src/components/checkbox/index.js

@@ -167,7 +167,7 @@ class Checkbox extends Component {
         }]}>
             <AnimatedIcon style={[this.styles.selectedIcon, {
             transform: this.animationStyle.transform
-          }]} source={indeterminate ? Assets.internal.icons.minusSmall : selectedIcon || Assets.internal.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
+          }]} source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
           </Animated.View>}
       </TouchableOpacity>
     );

package/src/components/chip/index.js

@@ -27,7 +27,7 @@ const Chip = ({
   containerStyle,
   onDismiss,
   dismissColor = Colors.$iconDefault,
-  dismissIcon = Assets.internal.icons.x,
+  dismissIcon = Assets.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={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

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.internal.icons.x} iconStyle={{
+      <Button link iconSource={Assets.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.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, I18nManager } from 'react-native';
+import { StyleSheet, TextInput, PixelRatio, 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 = Constants.getFontScale();
+  const fontScale = PixelRatio.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.internal.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
+        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.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,6 +6,7 @@ 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;
@@ -140,10 +141,10 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={Assets.internal.images.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={Assets.internal.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.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.internal.icons.x} iconStyle={{
+        <Button link iconSource={Assets.icons.x} iconStyle={{
         tintColor: Colors.$iconDefault
       }} testID={`${testID}.cancel`} {...cancelButtonProps} onPress={toggleExpandableOverlay} />
-        <Button link iconSource={Assets.internal.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
+        <Button link iconSource={Assets.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
       </View>;
   };
   const renderDateTimePicker = useCallback(() => {

package/src/components/hint/hint.api.json

@@ -159,37 +159,13 @@
             ],
             "items": [
               {
-                "title": "Left",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_top.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_bottom.png"
-                  }
-                ]
+                "title": "Left"
               },
               {
-                "title": "Center",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_top.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_bottom.png"
-                  }
-                ]
+                "title": "Center"
               },
               {
-                "title": "Right",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_top.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_bottom.png"
-                  }
-                ]
+                "title": "Right"
               }
             ],
             "title": "Alignment",
@@ -203,20 +179,10 @@
             ],
             "items": [
               {
-                "title": "None",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_none.png"
-                  }
-                ]
+                "title": "None"
               },
               {
-                "title": "Icon",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_icon.png"
-                  }
-                ]
+                "title": "Icon"
               }
             ],
             "title": "Accessories"

package/src/components/hint/index.js

@@ -6,7 +6,6 @@ import View from "../view";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
-import Assets from "../../assets";
 import { HintPositions, HintProps, TargetAlignments } from "./types";
 import useHintVisibility from "./hooks/useHintVisibility";
 import useHintLayout from "./hooks/useHintLayout";
@@ -15,6 +14,8 @@ import useHintPosition from "./hooks/useHintPosition";
 import HintMockChildren from "./HintMockChildren";
 import HintAnchor from "./HintAnchor";
 import HintBubble from "./HintBubble";
+const sideTip = require("./assets/hintTipSide.png");
+const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -124,7 +125,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? Assets.internal.images.hintTipSide : Assets.internal.images.hintTipMiddle;
+    const source = useSideTip ? sideTip : middleTip;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

package/src/components/icon/index.js

@@ -12,9 +12,10 @@ import SvgImage from "../svgImage";
  * @extendsLink: https://reactnative.dev/docs/image
  */
 
+const DEFAULT_WEB_ICON_SIZE = 16;
 const Icon = forwardRef((props, ref) => {
   const {
-    size,
+    size = Constants.isWeb ? DEFAULT_WEB_ICON_SIZE : undefined,
     tintColor,
     style,
     supportRTL,
@@ -51,11 +52,9 @@ const Icon = forwardRef((props, ref) => {
     }
     return source;
   }, [source, assetGroup, assetName]);
-  const renderImage = () => {
-    return <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
-      tintColor
-    }, style]} />;
-  };
+  const renderImage = () => <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
+    tintColor
+  }, style]} />;
   const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props} />;
   if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
     return renderImage();

package/src/components/modal/TopBar.js

@@ -21,7 +21,7 @@ class TopBar extends Component {
   static displayName = 'Modal.TopBar';
   static defaultProps = {
     doneLabel: 'Save',
-    cancelIcon: Assets.internal.icons.x,
+    cancelIcon: Assets.icons.x,
     doneButtonProps: {},
     cancelButtonProps: {},
     includeStatusBar: Constants.isIOS

package/src/components/modal/api/modalTopBar.api.json

@@ -29,7 +29,7 @@
       "name": "cancelIcon",
       "type": "ImageSource",
       "description": "Cancel action icon",
-      "default": "Assets.internal.icons.x"
+      "default": "Assets.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
     {