@trilogy-ds/react 0.0.1-beta.8 → 0.0.1-calendar

package/lib/components/hero/Hero.native.js

@@ -1,40 +1,45 @@
+import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
-import { StyleSheet, ImageBackground, TouchableOpacity, View } from 'react-native';
-import { getVariantStyle, TrilogyColor } from '../../objects';
-import { Box } from '../box';
-import { ComponentName } from '../enumsComponentsName';
+import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Box } from '../../components/box';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { StatesContext } from '../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Hero Component
  * @param children {ReactNode} Hero Children
  * @param backgroundSrc {string} If source, it will display background option
- * @param variant {VariantState} Hero background color : primary|secondary|tertiary
+ * @param backgroundColor {TrilogyColor} Background Color
+ * @param inverted {Boolean} Inverted Hero
  * @param onClick {Function} onClick Event
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-const Hero = ({ children, backgroundSrc, variant, onClick, overlap, backgroundHeight, ...others }) => {
-    const [overlapHeight, setOverlapHeight] = useState(0);
-    const [secondOverlapHeight, setSecondOverlapHeight] = useState(0);
-    const isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap === null || overlap === void 0 ? void 0 : overlap.length) > 1 : false;
-    const isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
-    const overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
-    const marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
-    const styles = StyleSheet.create({
+var Hero = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundSrc = _a.backgroundSrc, onClick = _a.onClick, overlap = _a.overlap, inverted = _a.inverted, backgroundColor = _a.backgroundColor, backgroundHeight = _a.backgroundHeight, others = __rest(_a, ["children", "backgroundSrc", "onClick", "overlap", "inverted", "backgroundColor", "backgroundHeight"]);
+    var _b = __read(useState(0), 2), overlapHeight = _b[0], setOverlapHeight = _b[1];
+    var _c = __read(useState(0), 2), secondOverlapHeight = _c[0], setSecondOverlapHeight = _c[1];
+    var isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap === null || overlap === void 0 ? void 0 : overlap.length) > 1 : false;
+    var isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
+    var overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
+    var marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
+    var styles = StyleSheet.create({
         hero: {
             width: '100%',
-            minHeight: 100,
-            maxHeight: 300,
+            minHeight: 150,
+            maxHeight: 350,
             height: backgroundHeight ? backgroundHeight : 'auto',
         },
         content: {
-            padding: 15,
+            paddingLeft: 15,
             marginBottom: overlap ? marginBottomOverlap : 0,
         },
-        variant: {
-            backgroundColor: variant && getVariantStyle(variant),
+        background: {
+            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : getColorStyle(TrilogyColor.BACKGROUND),
         },
         overlap: {
+            width: '100%',
             position: 'absolute',
             top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60,
         },
@@ -48,42 +53,43 @@ const Hero = ({ children, backgroundSrc, variant, onClick, overlap, backgroundHe
             height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin,
         },
     });
-    let heroView;
-    if (variant) {
-        heroView = (React.createElement(View, { style: [styles.variant, styles.hero] },
-            React.createElement(View, { style: styles.content }, children)));
+    var heroView;
+    if (backgroundColor) {
+        heroView = (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: false, flat: false } },
+            React.createElement(View, { style: [styles.background, styles.hero], testID: 'background-id' },
+                React.createElement(View, { style: styles.content }, children))));
     }
     else {
-        heroView = (React.createElement(ImageBackground, { source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: styles.hero, ...others },
-            React.createElement(View, { style: styles.content }, children)));
+        heroView = (React.createElement(ImageBackground, __assign({ source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: styles.hero }, others),
+            React.createElement(View, { style: styles.content, testID: 'no-background-id' }, children)));
     }
-    let overlapView;
+    var overlapView;
     if (isSecondOverlap) {
         overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.overlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setOverlapHeight(height);
                 } },
-                React.createElement(Box, { background: TrilogyColor.GREY_LIGHTER },
+                React.createElement(Box, { backgroundColor: TrilogyColor.NEUTRAL_FADE },
                     React.createElement(View, { style: { marginBottom: secondOverlapHeight / 2 } }),
                     overlap && typeof overlap !== 'boolean' ? overlap[0] : null)),
-            React.createElement(View, { style: styles.secondOverlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.secondOverlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setSecondOverlapHeight(height);
                 } }, overlap && typeof overlap !== 'boolean' ? overlap[1] : null)));
     }
     else {
         overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.overlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setOverlapHeight(height);
                 } }, overlap && typeof overlap !== 'boolean' ? overlap[0] : null)));
     }
-    return onClick ? (React.createElement(View, null,
-        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { style: { width: '100%' } },
+    return onClick ? (React.createElement(View, { ref: ref },
+        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { ref: ref, style: { width: '100%' } },
         heroView,
         overlapView));
-};
+});
 Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=Hero.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDbEYsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRTs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFDRSxFQUFxRyxFQUNyRyxHQUFHO0lBREQsSUFBQSxRQUFRLGNBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGdCQUFnQixzQkFBQSxFQUFLLE1BQU0sY0FBbkcsc0dBQXFHLENBQUY7SUFHN0YsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBUyxDQUFDLENBQUMsSUFBQSxFQUF0RCxhQUFhLFFBQUEsRUFBRSxnQkFBZ0IsUUFBdUIsQ0FBQTtJQUN2RCxJQUFBLEtBQUEsT0FBZ0QsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQWxFLG1CQUFtQixRQUFBLEVBQUUsc0JBQXNCLFFBQXVCLENBQUE7SUFFekUsSUFBTSxlQUFlLEdBQUcsT0FBTyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENB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

package/lib/components/hero/HeroProps.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
-import { Clickable, VariantProps } from '../../objects/facets';
-import { AlignableProps } from '../../objects/facets/Alignable';
-import { JustifiableProps } from '../../objects/facets/Justifiable';
+import { BackgroundProps } from '../../objects/atoms/Background';
+import { Clickable } from '../../objects/facets';
+import { CommonProps } from '../../objects/facets/CommonProps';
 import { BackgroundHeight } from './heroEnum';
+import { View } from 'react-native';
 /**
  * Hero Interface
  */
-export interface HeroProps extends VariantProps, AlignableProps, JustifiableProps, Clickable {
+export interface HeroProps extends Clickable, BackgroundProps, CommonProps {
     children?: React.ReactNode;
-    backgroundSrc?: string | number;
-    className?: string;
     overlap?: React.ReactNode[] | boolean;
     backgroundHeight?: BackgroundHeight;
 }
+export type HeroRef = HTMLElement;
+export type HeroNativeRef = View;

package/lib/components/hero/HeroProps.js

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

package/lib/components/hero/HeroPropsDefaults.js

@@ -0,0 +1,117 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "overlap": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "ReactNode[]"
+    ]
+  },
+  "backgroundHeight": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      100,
+      150,
+      200,
+      300
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "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"
+    ]
+  },
+  "backgroundSrc": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/hero/heroEnum.js

@@ -5,4 +5,4 @@ export var BackgroundHeight;
     BackgroundHeight[BackgroundHeight["LARGE"] = 200] = "LARGE";
     BackgroundHeight[BackgroundHeight["HUGE"] = 300] = "HUGE";
 })(BackgroundHeight || (BackgroundHeight = {}));
-//# sourceMappingURL=heroEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVyb0VudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaGVyb0VudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksZ0JBS1g7QUFMRCxXQUFZLGdCQUFnQjtJQUMxQiwyREFBVyxDQUFBO0lBQ1gsNkRBQVksQ0FBQTtJQUNaLDJEQUFXLENBQUE7SUFDWCx5REFBVSxDQUFBO0FBQ1osQ0FBQyxFQUxXLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFLM0IifQ==

package/lib/components/hero/index.d.ts

@@ -1,2 +1 @@
-import Hero from './Hero';
-export { Hero };
+export { default as Hero } from '../../components/hero/Hero';

package/lib/components/hero/index.js

@@ -1,3 +1,2 @@
-import Hero from './Hero';
-export { Hero };
-//# sourceMappingURL=index.js.map
+export { default as Hero } from '../../components/hero/Hero';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxJQUFJLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQSJ9

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IconProps } from './IconProps';
 /**
  * Icon Component
@@ -7,22 +7,15 @@ import { IconProps } from './IconProps';
  * @param status SUCCESS|ERROR 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 badgeContent {string} Icon with bage content
- * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
  * @param color {IconColor} Custom Icon Color
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
- * @param marginless {boolean}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param textClassName {string} Text's className
- * @param className Additionnal css classes
- * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param style {object} Additional styles
+ * @param className Additional css classes
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-declare const Icon: ({ className, textClassName, size, name, status, circled, content, position, markup, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, verticalAlign, testId, marginless, ...others }: IconProps) => JSX.Element;
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/lib/components/icon/Icon.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import clsx from 'clsx';
-import StatusIcon from './status/index';
-import CircleIcon from './circle/index';
-import TextIcon from './text/index';
-import { has, is } from '../../services/index';
-import { getColorClassName } from '../../objects/facets/Color';
-import { getAlignClassName } from '../../objects/facets/Alignable';
-import { hashClass } from '../../helpers';
+import { __assign, __rest } from "tslib";
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers';
+import { getBackgroundClassName } from '../../objects/atoms/Background';
+import { getColorClassName, TrilogyColor } from '../../objects/facets/Color';
+import { has, is } from '../../services/classify';
+import clsx from 'clsx';
+import * as React from 'react';
+import { ComponentName } from '../enumsComponentsName';
+import { getJustifySelfClassName } from '../../objects/facets/Justifiable';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -15,98 +15,26 @@ import { useTrilogyContext } from '../../context';
  * @param status SUCCESS|ERROR 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 badgeContent {string} Icon with bage content
- * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
  * @param color {IconColor} Custom Icon Color
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
- * @param marginless {boolean}
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param textClassName {string} Text's className
- * @param className Additionnal css classes
- * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param style {object} Additional styles
+ * @param className Additional css classes
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-const Icon = ({ className, textClassName, size, name, status, circled, content, position, markup, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, verticalAlign, testId, marginless, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('icon', stretched && is('stretched'), size && is(size), stacked && is('stacked'), color && is(`${getColorClassName(color)}`), skeleton && is('loading'), badgeContent && is('stacked'), marginless && is('marginless'), className));
-    // TextIcon uses className instead of classes, verticalAlignment only affect TextIcon
-    className = clsx(content && verticalAlign && is(`${getAlignClassName(verticalAlign)}`), className);
-    const alignClasses = hashClass(styled, clsx((align && getAlignClassName(align) === 'aligned-start' && has('text-left')) ||
-        (getAlignClassName(align) === 'aligned-center' && has('text-centered')) ||
-        (getAlignClassName(align) === 'aligned-end' && has('text-right'))));
-    // circled icons
-    if (circled || (circled && status)) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(CircleIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, status: status, size: size, color: color, backgroundColor: backgroundColor, ...others })));
-        }
-        return (React.createElement(CircleIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, status: status, size: size, color: color, backgroundColor: backgroundColor, ...others }));
-    }
-    // status icons
-    if (status) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(StatusIcon, { testId: testId, onClick: onClick && onClick, statusPosition: statusPosition, className: className, name: name, size: size, status: status, ...others })));
-        }
-        return (React.createElement(StatusIcon, { testId: testId, onClick: onClick && onClick, statusPosition: statusPosition, className: className, name: name, size: size, status: status, ...others }));
-    }
-    // Text icon
-    if (content && !badgeContent) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(TextIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, content: content, position: position, textClassName: textClassName, size: size, markup: markup, status: status, color: color, ...others })));
-        }
-        return (React.createElement(TextIcon, { onClick: onClick && onClick, className: className, name: name, content: content, position: position, textClassName: textClassName, size: size, markup: markup, status: status, color: color, ...others }));
-    }
-    // Icon with badge + badge content
-    if (badgeContent) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }),
-                    React.createElement("span", { className: hashClass(styled, clsx('badge', is('up'))) }, badgeContent)),
-                content && React.createElement("span", { className: hashClass(styled, clsx(textClassName)) }, content)));
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }),
-                React.createElement("span", { className: hashClass(styled, clsx('badge', is('up'))) }, badgeContent)),
-            content && React.createElement("span", { className: hashClass(styled, clsx(textClassName)) }, content)));
-    }
-    // Stretched icon
-    if (stretched) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-        }
-        return (React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-            React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
-    }
-    // Custom Colored Icon
-    if (color) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-        }
-        return (React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-            React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
-    }
-    if (align) {
-        return (React.createElement("div", { className: alignClasses },
-            React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-    }
-    // Static default Icon
-    return (React.createElement("span", { "data-testid": testId, onClick: onClick && onClick, className: classes, ...others },
+var Icon = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, size = _a.size, name = _a.name, circled = _a.circled, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, skeleton = _a.skeleton, align = _a.align, others = __rest(_a, ["className", "id", "size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "skeleton", "align"]);
+    var styled = useTrilogyContext().styled;
+    var background = (backgroundColor && has(getBackgroundClassName(backgroundColor))) ||
+        (circled && has(getBackgroundClassName(TrilogyColor.MAIN))) ||
+        '';
+    var classes = hashClass(styled, clsx('icon', stretched && is('stretched'), size && is(size), circled && is('circled'), circled && !color && has('text-white'), color && is("".concat(getColorClassName(color))), skeleton && is('loading'), align && clsx(is('flex'), is(getJustifySelfClassName(align))), background, className));
+    return (React.createElement("span", __assign({ id: id, onClick: onClick && onClick, className: classes }, others, { ref: ref }),
         React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
-};
+});
+Icon.displayName = ComponentName.Icon;
 export default Icon;
-//# sourceMappingURL=Icon.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDbkUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFlBQVksRUFBc0IsTUFBTSx3QkFBd0IsQ0FBQTtBQUM1RixPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFFdEU7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUFFSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixVQUNFLEVBQThHLEVBQzlHLEdBQUc7SUFERCxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBSyxNQUFNLGNBQTVHLHVIQUE4RyxDQUFGO0lBR3BHLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sVUFBVSxHQUNkLENBQUMsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLENBQUMsT0FBTyxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUMzRCxFQUFFLENBQUE7SUFFSixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsTUFBTSxFQUNOLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLElBQUksSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQ2hCLE9BQU8sSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hCLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ3RDLEtBQUssSUFBSSxFQUFFLENBQUMsVUFBRyxpQkFBaUIsQ0FBQyxLQUEwQyxDQUFDLENBQUUsQ0FBQyxFQUMvRSxRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN6QixLQUFLLElBQUksSUFBSSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLENBQUMsdUJBQXVCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUM3RCxVQUFVLEVBQ1YsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCx1Q0FBTSxFQUFFLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxJQUFFLEdBQUcsRUFBRSxHQUFHO1FBQ2pGLDJCQUFHLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxpQkFBYyxNQUFNLEdBQUcsQ0FDN0QsQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==

package/lib/components/icon/Icon.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { IconProps } from './IconProps';
-import { ComponentName } from '../enumsComponentsName';
+import { IconProps } from '../../components/icon/IconProps';
+import React from 'react';
+import { View } from 'react-native';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -9,19 +9,14 @@ import { ComponentName } from '../enumsComponentsName';
  * @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
  */
-declare const Icon: {
-    ({ size, name, status, circled, content, position, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, style, testId, ...others }: IconProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<View>>;
 export default Icon;