@trilogy-ds/react 0.0.1-beta.9 → 0.0.2-calendar

package/lib/components/icon/Icon.native.js

@@ -1,15 +1,15 @@
-import React, { useContext } from 'react';
-import { View, StyleSheet, Platform, TouchableOpacity } from 'react-native';
-import { WithLocalSvg } from 'react-native-svg/css';
-import ContentLoader, { Circle } from 'react-content-loader/native';
-import { IconSize } from './IconEnum';
-import CircleIcon from './circle/CircleIcon.native';
-import StatusIcon from './status/StatusIcon.native';
-import TextIcon from './text/TextIcon.native';
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { IconSize } from '../../components/icon/IconEnum';
+import { StatesContext } from '../../context/providerStates';
+import { TrilogyThemeContext } from '../../context/providerTheme.native';
+import { isAndroid, isIOS } from '../../helpers/device.native';
 import { getAlignStyle } from '../../objects/facets/Alignable';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
-import { TrilogyThemeContext } from '../../context/providerTheme.native';
+import React, { useContext } from 'react';
+import ContentLoader, { Circle } from 'react-content-loader/native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { WithLocalSvg } from 'react-native-svg/css';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -18,39 +18,43 @@ import { TrilogyThemeContext } from '../../context/providerTheme.native';
  * @param status SUCCESS|ERROR|WARNING|PRIMARY|TERTIARY|WHITE|GREY If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
- * @param position UP|DOWN|LEFT|RIGHT
  * @param stacked {boolean} Stacked icon
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param color {IconColor} Custom Icon Color
  * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
- * @param style {Object} Additional styles
  * @param onClick {Function} onClick Event Icon
- * @param align {Alignable} Progress Radial Alignement
+ * @param align { Alignable | AlignableValues} align content
  * @param skeleton {boolean} Icon Skeleton
  */
-const Icon = ({ size, name, status, circled, content, position, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, style, testId, ...others }) => {
-    const { theme: { icons }, } = useContext(TrilogyThemeContext);
-    const defaultSize = (size === IconSize.HUGE && 66) ||
+var Icon = React.forwardRef(function (_a, ref) {
+    var size = _a.size, name = _a.name, circled = _a.circled, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, align = _a.align, skeleton = _a.skeleton, testId = _a.testId, others = __rest(_a, ["size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "align", "skeleton", "testId"]);
+    var icons = useContext(TrilogyThemeContext).theme.icons;
+    var statesContext = useContext(StatesContext);
+    var style = {};
+    var defaultSize = (size === IconSize.HUGE && 66) ||
         (size === IconSize.LARGE && 44) ||
         (size === IconSize.MEDIUM && 30) ||
         (size === IconSize.SMALL && 20) ||
         (size === IconSize.SMALLER && 16) ||
         20;
-    const iconColor = (color && getColorStyle(color)) || (status && getColorStyle(status)) || getColorStyle(TrilogyColor.TERTIARY);
-    const iconSkeletonRadius = (size === IconSize.HUGE && 50) ||
+    var iconColor = (color && getColorStyle(color)) ||
+        (statesContext.inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
+        getColorStyle(TrilogyColor.MAIN);
+    var background = (backgroundColor && getColorStyle(backgroundColor)) || (circled && getColorStyle(TrilogyColor.MAIN)) || '';
+    var iconSkeletonRadius = (size === IconSize.HUGE && 50) ||
         (size === IconSize.LARGE && 35) ||
         (size === IconSize.MEDIUM && 25) ||
         (size === IconSize.SMALL && 15) ||
         (size === IconSize.SMALLER && 10) ||
         15;
-    const circledWidth = (size === IconSize.HUGE && 99) ||
+    var circledWidth = (size === IconSize.HUGE && 99) ||
         (size === IconSize.LARGE && 66) ||
         (size === IconSize.MEDIUM && 48) ||
         (size === IconSize.SMALL && 32) ||
         (size === IconSize.SMALLER && 38) ||
         32;
-    const styles = StyleSheet.create({
+    var styles = StyleSheet.create({
         rootView: {
             alignSelf: getAlignStyle(align),
         },
@@ -60,7 +64,13 @@ const Icon = ({ size, name, status, circled, content, position, stacked, badgeCo
             alignItems: 'center',
         },
         icon: {
-            transform: Platform.OS === 'ios' ? (stretched && [{ skewX: '20deg' }]) || [{ skewX: '0deg' }] : [],
+            transform: isIOS ? (stretched && [{ skewX: '20deg' }]) || [{ skewX: '0deg' }] : [],
+        },
+        iconContainer: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: defaultSize,
+            height: defaultSize
         },
         stretched: {
             justifyContent: 'center',
@@ -69,49 +79,51 @@ const Icon = ({ size, name, status, circled, content, position, stacked, badgeCo
             height: circledWidth,
             backgroundColor: iconColor,
             borderTopRightRadius: 10,
-            transform: Platform.OS === 'ios' ? (stretched && [{ skewX: '-20deg' }]) || [{ skewX: '0deg' }] : [],
+            transform: isIOS ? (stretched && [{ skewX: '-20deg' }]) || [{ skewX: '0deg' }] : [],
         },
         skeleton: {
             width: circledWidth,
             height: circledWidth,
             borderRadius: iconSkeletonRadius,
-            backgroundColor: getColorStyle(TrilogyColor.GREY_LIGHTER),
+            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
             overflow: 'hidden',
         },
+        circled: {
+            width: circledWidth,
+            height: circledWidth,
+            borderRadius: circledWidth,
+            backgroundColor: background,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
     });
-    const IconSkeleton = () => (React.createElement(ContentLoader, { style: styles.skeleton, ...others },
+    var IconSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others),
         React.createElement(View, { style: { opacity: 0 } }),
-        Platform.OS === 'android' && (React.createElement(View, null, (size === IconSize.HUGE && React.createElement(Circle, { cx: '50', cy: '50', r: '50' })) ||
+        isAndroid && (React.createElement(View, null, (size === IconSize.HUGE && React.createElement(Circle, { cx: '50', cy: '50', r: '50' })) ||
             (size === IconSize.LARGE && React.createElement(Circle, { cx: '33', cy: '33', r: '33' })) ||
             (size === IconSize.MEDIUM && React.createElement(Circle, { cx: '23', cy: '23', r: '23' })) ||
-            (size === IconSize.SMALL && React.createElement(Circle, { cx: '15', cy: '15', r: '15' })) || React.createElement(Circle, { cx: '15', cy: '15', r: '15' })))));
+            (size === IconSize.SMALL && React.createElement(Circle, { cx: '15', cy: '15', r: '15' })) || React.createElement(Circle, { cx: '15', cy: '15', r: '15' }))))); };
     if (skeleton) {
         return React.createElement(IconSkeleton, null);
     }
-    let iconView = React.createElement(View, null);
+    var iconView = React.createElement(View, null);
     if (name && icons) {
         if (stretched && !circled) {
-            iconView = (React.createElement(View, { style: styles.stretched },
-                React.createElement(WithLocalSvg, { style: [styles.iconCircled, styles.icon], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: getColorStyle(TrilogyColor.WHITE) })));
-        } /* status icon */
-        else if (status && !circled && !stretched) {
-            // TODO: fix status icon
-            iconView = (React.createElement(StatusIcon, { name: name, status: status, statusPosition: statusPosition, size: defaultSize, stretched: stretched, color: iconColor }));
+            iconView = (React.createElement(View, { style: styles.stretched, testID: "".concat(testId, "-stretched") },
+                React.createElement(WithLocalSvg, { style: [styles.iconCircled, styles.icon], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: getColorStyle(TrilogyColor.BACKGROUND) })));
         }
         else if (circled) {
-            iconView = (React.createElement(CircleIcon, { name: name, size: defaultSize, color: iconColor, content: content, circledWidth: circledWidth, position: position, stacked: stacked, backgroundColor: backgroundColor }));
-        } /* Text icon */
-        else if (content && !badgeContent) {
-            iconView = (React.createElement(TextIcon, { name: name, content: content, size: defaultSize, position: position, stretched: stretched, color: iconColor, stacked: stacked }));
+            iconView = (React.createElement(View, { style: styles.circled, testID: "".concat(testId, "-circled") },
+                React.createElement(WithLocalSvg, { style: [styles.iconCircled, styles.icon], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: iconColor })));
         }
         else {
-            iconView = (React.createElement(View, { ...others },
+            iconView = (React.createElement(View, __assign({ style: styles.iconContainer }, others),
                 React.createElement(WithLocalSvg, { style: [styles.icon, style], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: iconColor })));
         }
     }
-    return onClick ? (React.createElement(View, { style: styles.rootView, testID: testId },
-        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85 }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId }, iconView));
-};
+    return onClick ? (React.createElement(View, { style: styles.rootView, testID: testId, ref: ref },
+        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85, testID: "".concat(testId, "-pressable") }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId, ref: ref }, iconView));
+});
 Icon.displayName = ComponentName.Icon;
 export default Icon;
-//# sourceMappingURL=Icon.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBRXJELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBc0IsTUFBTSx3QkFBd0IsQ0FBQTtBQUN4RixPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6QyxPQUFPLGFBQWEsRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ25FLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ2pFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUVuRDs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQUNILElBQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzNCLFVBQ0UsRUFBdUcsRUFDdkcsR0FBRztJQURELElBQUEsSUFBSSxVQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFF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

package/lib/components/icon/IconEnum.d.ts

@@ -16,14 +16,11 @@ export type IconSizeValues = `${IconSize}`;
  * Icon Status
  */
 export declare enum IconStatus {
-    SUCCESS = "success",
-    ERROR = "error",
-    WARNING = "warning",
-    TERTIARY = "tertiary",
-    PRIMARY = "primary",
-    INFO = "info",
-    WHITE = "white",
-    GREY = "grey"
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR",
+    WARNING = "WARNING",
+    INFO = "INFO",
+    WHITE = "WHITE"
 }
 /**
  * Icon Status values
@@ -37,10 +34,12 @@ export declare enum IconColor {
     ERROR = "ERROR",
     INFO = "INFO",
     WARNING = "WARNING",
-    TERTIARY = "TERTIARY",
+    MAIN = "MAIN",
+    BACKGROUND = "BACKGROUND",
+    ACCENT = "ACCENT",
+    NEUTRAL = "NEUTRAL",
     WHITE = "WHITE",
-    GREY = "GREY",
-    PRIMARY = "PRIMARY"
+    GREY = "NEUTRAL"
 }
 /**
  * Icon Color values

package/lib/components/icon/IconEnum.js

@@ -14,14 +14,11 @@ export var IconSize;
  */
 export var IconStatus;
 (function (IconStatus) {
-    IconStatus["SUCCESS"] = "success";
-    IconStatus["ERROR"] = "error";
-    IconStatus["WARNING"] = "warning";
-    IconStatus["TERTIARY"] = "tertiary";
-    IconStatus["PRIMARY"] = "primary";
-    IconStatus["INFO"] = "info";
-    IconStatus["WHITE"] = "white";
-    IconStatus["GREY"] = "grey";
+    IconStatus["SUCCESS"] = "SUCCESS";
+    IconStatus["ERROR"] = "ERROR";
+    IconStatus["WARNING"] = "WARNING";
+    IconStatus["INFO"] = "INFO";
+    IconStatus["WHITE"] = "WHITE";
 })(IconStatus || (IconStatus = {}));
 /**
  * Icon Color
@@ -32,10 +29,12 @@ export var IconColor;
     IconColor["ERROR"] = "ERROR";
     IconColor["INFO"] = "INFO";
     IconColor["WARNING"] = "WARNING";
-    IconColor["TERTIARY"] = "TERTIARY";
+    IconColor["MAIN"] = "MAIN";
+    IconColor["BACKGROUND"] = "BACKGROUND";
+    IconColor["ACCENT"] = "ACCENT";
+    IconColor["NEUTRAL"] = "NEUTRAL";
     IconColor["WHITE"] = "WHITE";
-    IconColor["GREY"] = "GREY";
-    IconColor["PRIMARY"] = "PRIMARY";
+    IconColor["GREY"] = "NEUTRAL";
 })(IconColor || (IconColor = {}));
 /**
  * Text Icon Direction
@@ -59,4 +58,4 @@ export var IconStatusPosition;
     IconStatusPosition["TOP"] = "top";
     IconStatusPosition["BOTTOM"] = "bottom";
 })(IconStatusPosition || (IconStatusPosition = {}));
-//# sourceMappingURL=IconEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkVudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbkVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxRQU1YO0FBTkQsV0FBWSxRQUFRO0lBQ2xCLDJCQUFlLENBQUE7SUFDZiw2QkFBaUIsQ0FBQTtJQUNqQiwyQkFBZSxDQUFBO0lBQ2YseUJBQWEsQ0FBQTtJQUNiLCtCQUFtQixDQUFBO0FBQ3JCLENBQUMsRUFOVyxRQUFRLEtBQVIsUUFBUSxRQU1uQjtBQU9EOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksVUFNWDtBQU5ELFdBQVksVUFBVTtJQUNwQixpQ0FBbUIsQ0FBQTtJQUNuQiw2QkFBZSxDQUFBO0lBQ2YsaUNBQW1CLENBQUE7SUFDbkIsMkJBQWEsQ0FBQTtJQUNiLDZCQUFlLENBQUE7QUFDakIsQ0FBQyxFQU5XLFVBQVUsS0FBVixVQUFVLFFBTXJCO0FBT0Q7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxTQVdYO0FBWEQsV0FBWSxTQUFTO0lBQ25CLGdDQUFtQixDQUFBO0lBQ25CLDRCQUFlLENBQUE7SUFDZiwwQkFBYSxDQUFBO0lBQ2IsZ0NBQW1CLENBQUE7SUFDbkIsMEJBQWEsQ0FBQTtJQUNiLHNDQUF5QixDQUFBO0lBQ3pCLDhCQUFpQixDQUFBO0lBQ2pCLGdDQUFtQixDQUFBO0lBQ25CLDRCQUFlLENBQUE7SUFDZiw2QkFBZ0IsQ0FBQTtBQUNsQixDQUFDLEVBWFcsU0FBUyxLQUFULFNBQVMsUUFXcEI7QUFPRDs7R0FFRztBQUVILE1BQU0sQ0FBTixJQUFZLFlBS1g7QUFMRCxXQUFZLFlBQVk7SUFDdEIseUJBQVMsQ0FBQTtJQUNULDZCQUFhLENBQUE7SUFDYiw2QkFBYSxDQUFBO0lBQ2IsK0JBQWUsQ0FBQTtBQUNqQixDQUFDLEVBTFcsWUFBWSxLQUFaLFlBQVksUUFLdkI7QUFPRCxNQUFNLENBQU4sSUFBWSxjQUtYO0FBTEQsV0FBWSxjQUFjO0lBQ3hCLDZCQUFXLENBQUE7SUFDWCx5QkFBTyxDQUFBO0lBQ1AseUJBQU8sQ0FBQTtJQUNQLCtCQUFhLENBQUE7QUFDZixDQUFDLEVBTFcsY0FBYyxLQUFkLGNBQWMsUUFLekI7QUFJRCxNQUFNLENBQU4sSUFBWSxrQkFHWDtBQUhELFdBQVksa0JBQWtCO0lBQzVCLGlDQUFXLENBQUE7SUFDWCx1Q0FBaUIsQ0FBQTtBQUNuQixDQUFDLEVBSFcsa0JBQWtCLEtBQWxCLGtCQUFrQixRQUc3QiJ9

package/lib/components/icon/IconNameEnum.js

@@ -25,4 +25,4 @@ export var IconName;
     IconName["PICTO_PAYMENT_PAYPAL"] = "tri-picto-payment-paypal";
     IconName["PICTO_PAYMENT_VISA"] = "tri-picto-payment-visa";
 })(IconName || (IconName = {}));
-//# sourceMappingURL=IconNameEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbk5hbWVFbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9pY29uL0ljb25OYW1lRW51bS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQU4sSUFBWSxRQXlCWDtBQXpCRCxXQUFZLFFBQVE7SUFDbEIsK0JBQW1CLENBQUE7SUFDbkIseUNBQTZCLENBQUE7SUFDN0IseUNBQTZCLENBQUE7SUFDN0IsMkNBQStCLENBQUE7SUFDL0IscUNBQXlCLENBQUE7SUFDekIsNkJBQWlCLENBQUE7SUFDakIsNkNBQWlDLENBQUE7SUFDakMsK0JBQW1CLENBQUE7SUFDbkIseURBQTZDLENBQUE7SUFDN0MsdUNBQTJCLENBQUE7SUFDM0IsMkJBQWUsQ0FBQTtJQUNmLDZDQUFpQyxDQUFBO0lBQ2pDLGlDQUFxQixDQUFBO0lBQ3JCLCtCQUFtQixDQUFBO0lBQ25CLHNDQUEwQixDQUFBO0lBQzFCLCtCQUFtQixDQUFBO0lBQ25CLGlEQUFxQyxDQUFBO0lBQ3JDLHlEQUE2QyxDQUFBO0lBQzdDLGlEQUFxQyxDQUFBO0lBQ3JDLCtFQUFtRSxDQUFBO0lBQ25FLHFEQUF5QyxDQUFBO0lBQ3pDLHFFQUF5RCxDQUFBO0lBQ3pELDZEQUFpRCxDQUFBO0lBQ2pELHlEQUE2QyxDQUFBO0FBQy9DLENBQUMsRUF6QlcsUUFBUSxLQUFSLFFBQVEsUUF5Qm5CIn0=

package/lib/components/icon/IconProps.d.ts

@@ -1,32 +1,19 @@
-/// <reference types="react" />
-import { IconSize, IconStatus, IconPosition, TextIconMarkup, IconStatusPosition, IconColor, IconStatusValues, IconSizeValues, IconPositionValues, IconStatusPositionValues, IconColorValues, TextIconMarkupValues } from './IconEnum';
+import { View } from 'react-native';
+import { Accessibility, AlignableProps, Clickable, Dev, Stacked, TrilogyColor, TrilogyColorValues } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { IconColor, IconColorValues, IconSize, IconSizeValues } from './IconEnum';
 import { IconName, IconNameValues } from './IconNameEnum';
-import { Stacked } from '../../objects/facets/Stacked';
-import { AlignableProps } from '../../objects/facets/Alignable';
-import { Accessibility, Clickable, TrilogyColor, TrilogyColorValues } from '../../objects';
-type Styles = {
-    [key: string]: unknown;
-};
 /**
  * Icon Interface
  */
-export interface IconProps extends Stacked, AlignableProps, Clickable, Accessibility {
+export interface IconProps extends Stacked, Omit<AlignableProps, 'verticalAlign'>, Clickable, Accessibility, Dev, CommonProps {
     name: IconName | IconNameValues;
-    status?: IconStatus | IconStatusValues;
-    badgeContent?: string;
     size?: IconSize | IconSizeValues;
     circled?: boolean;
-    content?: string | React.ReactNode;
-    position?: IconPosition | IconPositionValues;
-    markup?: TextIconMarkup | TextIconMarkupValues;
-    statusPosition?: IconStatusPosition | IconStatusPositionValues;
     stretched?: boolean;
     color?: IconColor | IconColorValues | TrilogyColorValues | TrilogyColor | string;
     backgroundColor?: TrilogyColor | TrilogyColorValues;
-    className?: string;
-    textClassName?: string;
-    style?: Styles;
     skeleton?: boolean;
-    marginless?: boolean;
 }
-export {};
+export type IconRef = HTMLSpanElement;
+export type IconNativeRef = View;

package/lib/components/icon/IconProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=IconProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9pY29uL0ljb25Qcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/icon/IconPropsDefaults.js

@@ -0,0 +1,189 @@
+export default {
+  "name": {
+    "type": "enum",
+    "values": [
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa"
+    ]
+  },
+  "size": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "small",
+      "small",
+      "medium",
+      "large",
+      "huge",
+      "smaller",
+      "medium",
+      "large",
+      "huge",
+      "smaller"
+    ]
+  },
+  "circled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "stretched": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "color": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "backgroundColor": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "MAIN",
+      "ACCENT",
+      "WHITE",
+      "MAIN",
+      "MAIN_FADE",
+      "ACCENT",
+      "ACCENT_FADE",
+      "FONT",
+      "FONT_PLACEHOLDER",
+      "SUCCESS",
+      "SUCCESS_FADE",
+      "INFO",
+      "INFO_FADE",
+      "WARNING",
+      "WARNING_FADE",
+      "ERROR",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE",
+      "STROKE",
+      "WHITE",
+      "MAIN_FADE",
+      "ACCENT_FADE",
+      "FONT",
+      "FONT_PLACEHOLDER",
+      "SUCCESS_FADE",
+      "INFO_FADE",
+      "WARNING_FADE",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE",
+      "STROKE"
+    ]
+  },
+  "skeleton": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "stacked": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/icon/index.js

@@ -2,4 +2,4 @@ import Icon from './Icon';
 export * from './IconEnum';
 export * from './IconNameEnum';
 export { Icon };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sUUFBUSxDQUFBO0FBQ3pCLGNBQWMsWUFBWSxDQUFBO0FBQzFCLGNBQWMsZ0JBQWdCLENBQUE7QUFFOUIsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFBIn0=

package/lib/components/image/Image.d.ts

@@ -1,15 +1,17 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ImageProps } from './ImageProps';
 /**
  * Image Component
  * @param src {string} Image source
  * @param alt {string} Image alt
- * @param rounded {boolean} Image rounded
+ * @param radius {RadiusValues} Image border radius size
  * @param width {number|string} Image width (Number if not percent else string)
  * @param height {number|string} Image height (Number if not percent else string)
  * @param onClick {Function} onClick Event
+ * @param align {Alignable} Align Image
+ * @param circled {boolean} Circled Image
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes (ONLY FOR WEB)
+ * @param className {string} Additional CSS Classes (ONLY FOR WEB)
  */
-declare const Image: ({ src, alt, className, rounded, width, height, onClick, ...others }: ImageProps) => JSX.Element;
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
 export default Image;

package/lib/components/image/Image.js

@@ -1,34 +1,41 @@
-import React from 'react';
-import { is } from '../../services';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
+import { __assign, __rest } from "tslib";
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers';
+import { getJustifiedClassName } from '../../objects';
+import { has, is } from '../../services';
+import clsx from 'clsx';
+import * as React from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Image Component
  * @param src {string} Image source
  * @param alt {string} Image alt
- * @param rounded {boolean} Image rounded
+ * @param radius {RadiusValues} Image border radius size
  * @param width {number|string} Image width (Number if not percent else string)
  * @param height {number|string} Image height (Number if not percent else string)
  * @param onClick {Function} onClick Event
+ * @param align {Alignable} Align Image
+ * @param circled {boolean} Circled Image
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes (ONLY FOR WEB)
+ * @param className {string} Additional CSS Classes (ONLY FOR WEB)
  */
-const Image = ({ src, alt, className, rounded, width, height, onClick, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('image', className));
+var Image = React.forwardRef(function (_a, ref) {
+    var src = _a.src, _b = _a.alt, alt = _b === void 0 ? '' : _b, className = _a.className, id = _a.id, circled = _a.circled, width = _a.width, height = _a.height, onClick = _a.onClick, radius = _a.radius, align = _a.align, others = __rest(_a, ["src", "alt", "className", "id", "circled", "width", "height", "onClick", "radius", "align"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('image', className, align && is(getJustifiedClassName(align))));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const styles = {
+    var styles = {
         image: {
             width: width,
             height: height,
         },
     };
-    return (React.createElement("figure", { onClick: (e) => {
+    return (React.createElement("figure", __assign({ ref: ref, id: id, onClick: function (e) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             e.stopPropagation();
-        }, className: classes, ...others },
-        React.createElement("img", { style: styles.image, className: hashClass(styled, clsx(rounded ? is('rounded') : '')), src: typeof src === 'string' ? src : '', alt: alt })));
-};
+        }, className: classes }, others),
+        React.createElement("img", { style: styles.image, className: hashClass(styled, clsx(radius && has("border-radius-".concat(radius)), circled ? is('circled') : '')), src: typeof src === 'string' ? src : '', alt: alt })));
+});
+Image.displayName = ComponentName.Image;
 export default Image;
-//# sourceMappingURL=Image.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW1hZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ltYWdlL0ltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ2pELE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7Ozs7Ozs7OztHQVlHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBdUIsVUFBQyxFQVlyRCxFQUFFLEdBQUc7SUFYSixJQUFBLEdBQUcsU0FBQSxFQUNILFdBQVEsRUFBUixHQUFHLG1CQUFHLEVBQUUsS0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FYMkMsNkZBWXJELENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssSUFBSSxFQUFFLENBQUMscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFFdEcsOERBQThEO0lBQzlELElBQU0sTUFBTSxHQUE4QjtRQUN4QyxLQUFLLEVBQUU7WUFDTCxLQUFLLEVBQUUsS0FBSztZQUNaLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7S0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLHlDQUNFLEdBQUcsRUFBRSxHQUFHLEVBQ1IsRUFBRSxFQUFFLEVBQUUsRUFDTixPQUFPLEVBQUUsVUFBQyxDQUFDO1lBQ1QsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBO1lBQ1osQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFBO1FBQ3JCLENBQUMsRUFDRCxTQUFTLEVBQUUsT0FBTyxJQUNkLE1BQU07UUFFViw2QkFDRSxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFDbkIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sSUFBSSxHQUFHLENBQUMsd0JBQWlCLE1BQU0sQ0FBRSxDQUFDLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQzFHLEdBQUcsRUFBRSxPQUFPLEdBQUcsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUN2QyxHQUFHLEVBQUUsR0FBRyxHQUNSLENBQ0ssQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixLQUFLLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUE7QUFDdkMsZUFBZSxLQUFLLENBQUEifQ==

package/lib/components/image/Image.native.d.ts

@@ -1,19 +1,15 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { Image as ImageNative } from 'react-native';
 import { ImageProps } from './ImageProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
  * Image Component
  * @param src {string} Image source
  * @param alt {string} Image alt
- * @param rounded {boolean} Image rounded
+ * @param radius {RadiusValues} Image border radius size
  * @param width {number|string} Image width (Number if not percent else string)
  * @param height {number|string} Image height (Number if not percent else string)
  * @param onClick {Function} onClick Event
- * @param style {Object} Additional styles
- * @param flex {boolean} add Flex : 1
+ * @param circled {boolean} Circled Image
  */
-declare const Image: {
-    ({ src, alt, rounded, width, height, onClick, flex, ...others }: ImageProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<ImageNative>>;
 export default Image;