@trilogy-ds/react 0.0.1-beta-147 → 0.0.1-beta-sc-2

package/lib/components/timeline/item/TimelineItem.native.js

@@ -1,8 +1,8 @@
 import React, { createContext, useContext } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { TimelineHeightContext } from '../../../components/timeline/Timeline.native';
 import { ComponentName } from '../../../components/enumsComponentsName';
-export var TimelineItemContext = createContext({ done: false, active: false, cancel: false });
+import { TimelineHeightContext } from '../../../components/timeline/Timeline.native';
+export var TimelineItemContext = createContext({ done: false, active: false, undone: false, cancel: false });
 /**
  * Timeline Item Component
  * @param children {ReactNode}
@@ -11,8 +11,8 @@ export var TimelineItemContext = createContext({ done: false, active: false, can
  * @param undone {boolean} Undone Timeline Item
  * @param cancel {boolean} Cancel Timeline Item
  */
-var TimelineItem = function (_a) {
-    var children = _a.children, done = _a.done, active = _a.active, cancel = _a.cancel;
+var TimelineItem = React.forwardRef(function (_a, ref) {
+    var children = _a.children, done = _a.done, active = _a.active, undone = _a.undone, cancel = _a.cancel;
     var _b = useContext(TimelineHeightContext), height = _b.height, setHeight = _b.setHeight;
     var styles = StyleSheet.create({
         item: {
@@ -23,8 +23,8 @@ var TimelineItem = function (_a) {
             marginBottom: 8,
         },
     });
-    return (React.createElement(TimelineItemContext.Provider, { value: { done: done || false, active: active || false, cancel: cancel || false } },
-        React.createElement(View, { onLayout: function (event) {
+    return (React.createElement(TimelineItemContext.Provider, { value: { done: done || false, active: active || false, undone: undone || false, cancel: cancel || false } },
+        React.createElement(View, { ref: ref, onLayout: function (event) {
                 var heightView = event.nativeEvent.layout.height;
                 setHeight(function (prev) {
                     if (prev < heightView)
@@ -32,7 +32,7 @@ var TimelineItem = function (_a) {
                     return prev;
                 });
             }, style: styles.item }, children)));
-};
+});
 TimelineItem.displayName = ComponentName.TimelineItem;
 export default TimelineItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGltZWxpbmUvaXRlbS9UaW1lbGluZUl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDeEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDL0MsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUNBQXVDLENBQUE7QUFFN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFLE1BQU0sQ0FBQyxJQUFNLG1CQUFtQixHQUFHLGFBQWEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQTtBQUUvRjs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxZQUFZLEdBQUcsVUFBQyxFQUFxRDtRQUFuRCxRQUFRLGNBQUEsRUFBRSxJQUFJLFVBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxNQUFNLFlBQUE7SUFDOUMsSUFBQSxLQUF3QixVQUFVLENBQUMscUJBQXFCLENBQUMsRUFBdkQsTUFBTSxZQUFBLEVBQUUsU0FBUyxlQUFzQyxDQUFBO0lBRS9ELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsSUFBSSxFQUFFO1lBQ0osS0FBSyxFQUFFLE1BQU07WUFDYixhQUFhLEVBQUUsS0FBSztZQUNwQixjQUFjLEVBQUUsY0FBYztZQUM5QixNQUFNLEVBQUUsTUFBTSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUztZQUM1QyxZQUFZLEVBQUUsQ0FBQztTQUNoQjtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxtQkFBbUIsQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksSUFBSSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sSUFBSSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sSUFBSSxLQUFLLEVBQUU7UUFDNUcsb0JBQUMsSUFBSSxJQUNILFFBQVEsRUFBRSxVQUFDLEtBQUs7Z0JBQ04sSUFBUSxVQUFVLEdBQUssS0FBSyxDQUFDLFdBQVcsQ0FBQyxNQUFNLE9BQTdCLENBQTZCO2dCQUN2RCxTQUFTLENBQUMsVUFBQyxJQUFJO29CQUNiLElBQUksSUFBSSxHQUFHLFVBQVU7d0JBQUUsT0FBTyxVQUFVLENBQUE7b0JBQ3hDLE9BQU8sSUFBSSxDQUFBO2dCQUNiLENBQUMsQ0FBQyxDQUFBO1lBQ0osQ0FBQyxFQUNELEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxJQUVqQixRQUFRLENBQ0osQ0FDc0IsQ0FDaEMsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELFlBQVksQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQTtBQUVyRCxlQUFlLFlBQVksQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGltZWxpbmUvaXRlbS9UaW1lbGluZUl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDeEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBRzdFLE1BQU0sQ0FBQyxJQUFNLG1CQUFtQixHQUFHLGFBQWEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFBO0FBRTlHOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNuQyxVQUFDLEVBQTZELEVBQUUsR0FBb0I7UUFBakYsUUFBUSxjQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsTUFBTSxZQUFBO0lBQ2pDLElBQUEsS0FBd0IsVUFBVSxDQUFDLHFCQUFxQixDQUFDLEVBQXZELE1BQU0sWUFBQSxFQUFFLFNBQVMsZUFBc0MsQ0FBQTtJQUUvRCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLElBQUksRUFBRTtZQUNKLEtBQUssRUFBRSxNQUFNO1lBQ2IsYUFBYSxFQUFFLEtBQUs7WUFDcEIsY0FBYyxFQUFFLGNBQWM7WUFDOUIsTUFBTSxFQUFFLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDNUMsWUFBWSxFQUFFLENBQUM7U0FDaEI7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsbUJBQW1CLENBQUMsUUFBUSxJQUMzQixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxJQUFJLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxJQUFJLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxJQUFJLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxJQUFJLEtBQUssRUFBRTtRQUV6RyxvQkFBQyxJQUFJLElBQ0gsR0FBRyxFQUFFLEdBQUcsRUFDUixRQUFRLEVBQUUsVUFBQyxLQUFLO2dCQUNOLElBQVEsVUFBVSxHQUFLLEtBQUssQ0FBQyxXQUFXLENBQUMsTUFBTSxPQUE3QixDQUE2QjtnQkFDdkQsU0FBUyxDQUFDLFVBQUMsSUFBSTtvQkFDYixJQUFJLElBQUksR0FBRyxVQUFVO3dCQUFFLE9BQU8sVUFBVSxDQUFBO29CQUN4QyxPQUFPLElBQUksQ0FBQTtnQkFDYixDQUFDLENBQUMsQ0FBQTtZQUNKLENBQUMsRUFDRCxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksSUFFakIsUUFBUSxDQUNKLENBQ3NCLENBQ2hDLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFlBQVksQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQTtBQUNyRCxlQUFlLFlBQVksQ0FBQSJ9

package/lib/components/timeline/item/TimelineItemProps.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Timeline Item Interface
  */
@@ -7,13 +6,16 @@ export interface TimelineItemProps {
     children: React.ReactNode;
     done?: boolean;
     active?: boolean;
+    undone?: boolean;
     cancel?: boolean;
 }
 /**
  * Timeline Item Web Interface
  */
-export interface TimelineItemWebProps extends TimelineItemProps, CommonProps {
+export interface TimelineItemWebProps extends TimelineItemProps {
+    className?: string;
     done?: boolean;
     active?: boolean;
+    undone?: boolean;
     cancel?: boolean;
 }

package/lib/components/timeline/item/TimelineItemPropsDefaults.js

@@ -29,6 +29,14 @@ export default {
       "true"
     ]
   },
+  "undone": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "cancel": {
     "type": "boolean",
     "values": [

package/lib/components/timeline/item/TimelineItemWebPropsDefaults.js

@@ -1,4 +1,11 @@
 export default {
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "done": {
     "type": "boolean",
     "values": [
@@ -15,6 +22,14 @@ export default {
       "true"
     ]
   },
+  "undone": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "cancel": {
     "type": "boolean",
     "values": [
@@ -36,19 +51,5 @@ export default {
       "ReactNode>",
       "ReactPortal"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

package/lib/components/timeline/item/index.d.ts

@@ -1,2 +1,2 @@
-import TimelineItem from './TimelineItem';
+import TimelineItem from '../../../components/timeline/item/TimelineItem';
 export default TimelineItem;

package/lib/components/timeline/item/index.js

@@ -1,3 +1,3 @@
-import TimelineItem from './TimelineItem';
+import TimelineItem from '../../../components/timeline/item/TimelineItem';
 export default TimelineItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL2l0ZW0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0sZ0JBQWdCLENBQUE7QUFFekMsZUFBZSxZQUFZLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL2l0ZW0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0seUNBQXlDLENBQUE7QUFFbEUsZUFBZSxZQUFZLENBQUEifQ==

package/lib/components/timeline/marker/TimelineMarker.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TimelineMarkerWebProps } from './TimelineMarkerProps';
+import React from 'react';
+import { TimelineMarkerWebProps } from '../../../components/timeline/marker/TimelineMarkerProps';
 /**
  * Timeline Marker Component
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
@@ -9,5 +9,5 @@ import { TimelineMarkerWebProps } from './TimelineMarkerProps';
  * @param className {string} Additionnal CSS Classes
  * @param iconClassname {string} Additionnal CSS Classes for icon
  */
-declare const TimelineMarker: ({ className, id, iconClassname, iconName, ...others }: TimelineMarkerWebProps) => JSX.Element;
+declare const TimelineMarker: React.ForwardRefExoticComponent<TimelineMarkerWebProps & React.RefAttributes<HTMLDivElement>>;
 export default TimelineMarker;

package/lib/components/timeline/marker/TimelineMarker.js

@@ -1,10 +1,10 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import clsx from 'clsx';
-import { is } from '../../../services/classify';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon, IconSize } from '../../../components/icon';
-import { useTrilogyContext } from '../../../context';
-import { hashClass } from '../../../helpers';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { is } from '../../../services/classify';
 /**
  * Timeline Marker Component
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
@@ -14,14 +14,14 @@ import { hashClass } from '../../../helpers';
  * @param className {string} Additionnal CSS Classes
  * @param iconClassname {string} Additionnal CSS Classes for icon
  */
-var TimelineMarker = function (_a) {
-    var className = _a.className, id = _a.id, iconClassname = _a.iconClassname, iconName = _a.iconName, others = __rest(_a, ["className", "id", "iconClassname", "iconName"]);
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('timeline-marker', is('icon'), className));
+var TimelineMarker = React.forwardRef(function (_a, ref) {
+    var className = _a.className, iconClassname = _a.iconClassname, iconName = _a.iconName, iconColor = _a.iconColor, testId = _a.testId, others = __rest(_a, ["className", "iconClassname", "iconName", "iconColor", "testId"]);
+    var classes = hashClass(clsx('timeline-marker', is('icon'), className));
     var iconClasses = clsx(iconClassname);
-    return (React.createElement("div", __assign({ id: id, className: classes }, others),
+    return (React.createElement("div", __assign({ className: classes }, others, { "data-testid": testId, ref: ref }),
         React.createElement("div", { className: 'card-header-icon' },
-            React.createElement(Icon, { className: iconClasses, name: iconName, size: IconSize.SMALL }))));
-};
+            React.createElement(Icon, { color: iconColor, className: iconClasses, name: iconName, size: IconSize.SMALL }))));
+});
+TimelineMarker.displayName = ComponentName.TimelineMarker;
 export default TimelineMarker;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9UaW1lbGluZU1hcmtlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVyQzs7Ozs7Ozs7R0FRRztBQUNILElBQU0sY0FBYyxHQUFHLFVBQUMsRUFNQztJQUx2QixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLGFBQWEsbUJBQUEsRUFDYixRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTGEsZ0RBTXZCLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUNqRixJQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUE7SUFFdkMsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNO1FBQ3pDLDZCQUFLLFNBQVMsRUFBQyxrQkFBa0I7WUFDL0Isb0JBQUMsSUFBSSxJQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssR0FBSSxDQUNsRSxDQUNGLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsY0FBYyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9UaW1lbGluZU1hcmtlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7R0FRRztBQUNILElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3JDLFVBQ0UsRUFBNEYsRUFDNUYsR0FBOEI7SUFENUIsSUFBQSxTQUFTLGVBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUFsRSxpRUFBb0UsQ0FBRjtJQUdsRSxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3pFLElBQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUV2QyxPQUFPLENBQ0wsc0NBQUssU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLG1CQUFlLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRztRQUNoRSw2QkFBSyxTQUFTLEVBQUMsa0JBQWtCO1lBQy9CLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssR0FBSSxDQUNwRixDQUNGLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsY0FBYyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsY0FBYyxDQUFBO0FBQ3pELGVBQWUsY0FBYyxDQUFBIn0=

package/lib/components/timeline/marker/TimelineMarker.native.d.ts

@@ -1,14 +1,11 @@
-/// <reference types="react" />
-import { TimelineMarkerProps } from './TimelineMarkerProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import React from 'react';
+import { View } from 'react-native';
+import { TimelineMarkerProps } from '../../../components/timeline/marker/TimelineMarkerProps';
 /**
  * TimelineMarker Native Component
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
  * @param iconColor {IconColor} Icon Color
  * @param testId {string} Test Id for Test Integration
  */
-declare const TimelineMarker: {
-    ({ iconName }: TimelineMarkerProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const TimelineMarker: React.ForwardRefExoticComponent<TimelineMarkerProps & React.RefAttributes<View>>;
 export default TimelineMarker;

package/lib/components/timeline/marker/TimelineMarker.native.js

@@ -1,20 +1,20 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon, IconSize } from '../../../components/icon';
-import { TimelineItemContext } from '../item/TimelineItem.native';
-import { getColorStyle, TrilogyColor } from '../../../objects';
+import { TimelineItemContext } from '../../../components/timeline/item/TimelineItem.native';
 import { TimelineHeightContext } from '../../../components/timeline/Timeline.native';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 /**
  * TimelineMarker Native Component
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
  * @param iconColor {IconColor} Icon Color
  * @param testId {string} Test Id for Test Integration
  */
-var TimelineMarker = function (_a) {
-    var iconName = _a.iconName;
-    var _b = useContext(TimelineItemContext), active = _b.active, done = _b.done, cancel = _b.cancel;
-    var height = useContext(TimelineHeightContext).height;
+var TimelineMarker = React.forwardRef(function (_a, ref) {
+    var iconName = _a.iconName, iconColor = _a.iconColor, testId = _a.testId;
+    var _b = React.useContext(TimelineItemContext), active = _b.active, undone = _b.undone, done = _b.done, cancel = _b.cancel;
+    var height = React.useContext(TimelineHeightContext).height;
     var styles = StyleSheet.create({
         marker: {
             flex: 1,
@@ -28,6 +28,7 @@ var TimelineMarker = function (_a) {
             marginLeft: 'auto',
             marginRight: 'auto',
             borderColor: (active && getColorStyle(TrilogyColor.MAIN)) ||
+                (undone && getColorStyle(TrilogyColor.NEUTRAL_FADE)) ||
                 (cancel && getColorStyle(TrilogyColor.NEUTRAL)) ||
                 (done && getColorStyle(TrilogyColor.MAIN)) ||
                 getColorStyle(TrilogyColor.NEUTRAL_FADE),
@@ -36,17 +37,21 @@ var TimelineMarker = function (_a) {
             alignSelf: 'center',
         },
     });
-    return (React.createElement(View, { style: styles.marker },
+    return (React.createElement(View, { style: styles.marker, testID: testId, ref: ref },
         React.createElement(View, { style: styles.icon },
-            React.createElement(Icon, { name: iconName, circled: true, color: (active && TrilogyColor.BACKGROUND) ||
-                    (cancel && TrilogyColor.NEUTRAL_FADE) ||
-                    (done && TrilogyColor.BACKGROUND) ||
-                    TrilogyColor.BACKGROUND, backgroundColor: (active && TrilogyColor.MAIN) ||
+            React.createElement(Icon, { name: iconName, circled: true, color: !iconColor
+                    ? (active && TrilogyColor.BACKGROUND) ||
+                        (undone && TrilogyColor.MAIN) ||
+                        (cancel && TrilogyColor.NEUTRAL_FADE) ||
+                        (done && TrilogyColor.BACKGROUND) ||
+                        TrilogyColor.BACKGROUND
+                    : iconColor, backgroundColor: (active && TrilogyColor.MAIN) ||
+                    (undone && TrilogyColor.NEUTRAL_FADE) ||
                     (cancel && TrilogyColor.NEUTRAL) ||
                     (done && TrilogyColor.MAIN) ||
                     TrilogyColor.NEUTRAL_FADE, size: IconSize.SMALL })),
         React.createElement(View, { style: styles.divider })));
-};
+});
 TimelineMarker.displayName = ComponentName.TimelineMarker;
 export default TimelineMarker;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90aW1lbGluZS9tYXJrZXIvVGltZWxpbmVNYXJrZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6QyxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ2xELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ2pFLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQzdFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7R0FLRztBQUNILElBQU0sY0FBYyxHQUFHLFVBQUMsRUFBaUM7UUFBL0IsUUFBUSxjQUFBO0lBQzFCLElBQUEsS0FBMkIsVUFBVSxDQUFDLG1CQUFtQixDQUFDLEVBQXhELE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE1BQU0sWUFBb0MsQ0FBQTtJQUN4RCxJQUFBLE1BQU0sR0FBSyxVQUFVLENBQUMscUJBQXFCLENBQUMsT0FBdEMsQ0FBc0M7SUFFcEQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixNQUFNLEVBQUU7WUFDTixJQUFJLEVBQUUsQ0FBQztZQUNQLFNBQVMsRUFBRSxZQUFZO1lBQ3ZCLGFBQWEsRUFBRSxRQUFRO1NBQ3hCO1FBQ0QsT0FBTyxFQUFFO1lBQ1AsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNqQyxXQUFXLEVBQUUsT0FBTztZQUNwQixlQUFlLEVBQUUsQ0FBQztZQUNsQixVQUFVLEVBQUUsTUFBTTtZQUNsQixXQUFXLEVBQUUsTUFBTTtZQUNuQixXQUFXLEVBQ1QsQ0FBQyxNQUFNLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDNUMsQ0FBQyxNQUFNLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztnQkFDL0MsQ0FBQyxJQUFJLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDMUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUM7U0FDM0M7UUFDRCxJQUFJLEVBQUU7WUFDSixTQUFTLEVBQUUsUUFBUTtTQUNwQjtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxNQUFNO1FBQ3hCLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUk7WUFDdEIsb0JBQUMsSUFBSSxJQUNILElBQUksRUFBRSxRQUFRLEVBQ2QsT0FBTyxRQUNQLEtBQUssRUFDSCxDQUFDLE1BQU0sSUFBSSxZQUFZLENBQUMsVUFBVSxDQUFDO29CQUNuQyxDQUFDLE1BQU0sSUFBSSxZQUFZLENBQUMsWUFBWSxDQUFDO29CQUNyQyxDQUFDLElBQUksSUFBSSxZQUFZLENBQUMsVUFBVSxDQUFDO29CQUNqQyxZQUFZLENBQUMsVUFBVSxFQUV6QixlQUFlLEVBQ2IsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQztvQkFDN0IsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLE9BQU8sQ0FBQztvQkFDaEMsQ0FBQyxJQUFJLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQztvQkFDM0IsWUFBWSxDQUFDLFlBQVksRUFFM0IsSUFBSSxFQUFFLFFBQVEsQ0FBQyxLQUFLLEdBQ3BCLENBQ0c7UUFFUCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxPQUFPLEdBQVMsQ0FDL0IsQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsY0FBYyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsY0FBYyxDQUFBO0FBRXpELGVBQWUsY0FBYyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90aW1lbGluZS9tYXJrZXIvVGltZWxpbmVNYXJrZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDbEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0RBQWdELENBQUE7QUFFcEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUNBQXVDLENBQUE7QUFDN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7R0FLRztBQUNILElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3JDLFVBQUMsRUFBb0QsRUFBRSxHQUFvQjtRQUF4RSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxNQUFNLFlBQUE7SUFDdEIsSUFBQSxLQUFtQyxLQUFLLENBQUMsVUFBVSxDQUFDLG1CQUFtQixDQUFDLEVBQXRFLE1BQU0sWUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE1BQU0sWUFBMEMsQ0FBQTtJQUN0RSxJQUFBLE1BQU0sR0FBSyxLQUFLLENBQUMsVUFBVSxDQUFDLHFCQUFxQixDQUFDLE9BQTVDLENBQTRDO0lBRTFELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsTUFBTSxFQUFFO1lBQ04sSUFBSSxFQUFFLENBQUM7WUFDUCxTQUFTLEVBQUUsWUFBWTtZQUN2QixhQUFhLEVBQUUsUUFBUTtTQUN4QjtRQUNELE9BQU8sRUFBRTtZQUNQLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDakMsV0FBVyxFQUFFLE9BQU87WUFDcEIsZUFBZSxFQUFFLENBQUM7WUFDbEIsVUFBVSxFQUFFLE1BQU07WUFDbEIsV0FBVyxFQUFFLE1BQU07WUFDbkIsV0FBVyxFQUNULENBQUMsTUFBTSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzVDLENBQUMsTUFBTSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLENBQUM7Z0JBQ3BELENBQUMsTUFBTSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7Z0JBQy9DLENBQUMsSUFBSSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osU0FBUyxFQUFFLFFBQVE7U0FDcEI7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEdBQUc7UUFDbEQsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSTtZQUN0QixvQkFBQyxJQUFJLElBQ0gsSUFBSSxFQUFFLFFBQVEsRUFDZCxPQUFPLFFBQ1AsS0FBSyxFQUNILENBQUMsU0FBUztvQkFDUixDQUFDLENBQUMsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLFVBQVUsQ0FBQzt3QkFDbkMsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQzt3QkFDN0IsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLFlBQVksQ0FBQzt3QkFDckMsQ0FBQyxJQUFJLElBQUksWUFBWSxDQUFDLFVBQVUsQ0FBQzt3QkFDakMsWUFBWSxDQUFDLFVBQVU7b0JBQ3pCLENBQUMsQ0FBQyxTQUFTLEVBRWYsZUFBZSxFQUNiLENBQUMsTUFBTSxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUM7b0JBQzdCLENBQUMsTUFBTSxJQUFJLFlBQVksQ0FBQyxZQUFZLENBQUM7b0JBQ3JDLENBQUMsTUFBTSxJQUFJLFlBQVksQ0FBQyxPQUFPLENBQUM7b0JBQ2hDLENBQUMsSUFBSSxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUM7b0JBQzNCLFlBQVksQ0FBQyxZQUFZLEVBRTNCLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxHQUNwQixDQUNHO1FBRVAsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxHQUFTLENBQy9CLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsY0FBYyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsY0FBYyxDQUFBO0FBQ3pELGVBQWUsY0FBYyxDQUFBIn0=

package/lib/components/timeline/marker/TimelineMarkerProps.d.ts

@@ -1,15 +1,18 @@
-import { IconName, IconNameValues } from '../../../components/icon';
+/// <reference types="react" />
+import { IconColor, IconColorValues, IconName, IconNameValues } from '../../../components/icon';
 import { Accessibility, Dev } from '../../../objects';
-import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Timeline Marker Interface
  */
 export interface TimelineMarkerProps extends Accessibility, Dev {
+    children?: React.ReactNode;
     iconName: IconName | IconNameValues;
+    iconColor?: IconColor | IconColorValues;
 }
 /**
  * Timeline Marker Web Interface
  */
-export interface TimelineMarkerWebProps extends TimelineMarkerProps, Accessibility, CommonProps {
+export interface TimelineMarkerWebProps extends TimelineMarkerProps, Accessibility {
+    className?: string;
     iconClassname?: string;
 }

package/lib/components/timeline/marker/TimelineMarkerPropsDefaults.js

@@ -1,4 +1,18 @@
 export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
   "iconName": {
     "type": "enum",
     "values": [
@@ -50,6 +64,30 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
+  "iconColor": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "WHITE",
+      "MAIN",
+      "ACCENT",
+      "NEUTRAL",
+      "SUCCESS",
+      "ERROR",
+      "INFO",
+      "WARNING",
+      "MAIN",
+      "BACKGROUND",
+      "ACCENT",
+      "NEUTRAL",
+      "WHITE",
+      "BACKGROUND"
+    ]
+  },
   "accessibilityLabel": {
     "type": "string",
     "values": [

package/lib/components/timeline/marker/TimelineMarkerWebPropsDefaults.js

@@ -1,4 +1,11 @@
 export default {
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "iconClassname": {
     "type": "string",
     "values": [
@@ -6,6 +13,20 @@ export default {
       "string"
     ]
   },
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
   "iconName": {
     "type": "enum",
     "values": [
@@ -57,28 +78,38 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "testId": {
-    "type": "string",
+  "iconColor": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "WHITE",
+      "MAIN",
+      "ACCENT",
+      "NEUTRAL",
+      "SUCCESS",
+      "ERROR",
+      "INFO",
+      "WARNING",
+      "MAIN",
+      "BACKGROUND",
+      "ACCENT",
+      "NEUTRAL",
+      "WHITE",
+      "BACKGROUND"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/timeline/marker/index.d.ts

@@ -1,2 +1,2 @@
-import TimelineMarker from './TimelineMarker';
+import TimelineMarker from '../../../components/timeline/marker/TimelineMarker';
 export default TimelineMarker;

package/lib/components/timeline/marker/index.js

@@ -1,3 +1,3 @@
-import TimelineMarker from './TimelineMarker';
+import TimelineMarker from '../../../components/timeline/marker/TimelineMarker';
 export default TimelineMarker;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUU3QyxlQUFlLGNBQWMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSw2Q0FBNkMsQ0FBQTtBQUV4RSxlQUFlLGNBQWMsQ0FBQSJ9

package/lib/components/title/Title.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TitleProps } from './TitleProps';
+import React from 'react';
+import { TitleProps } from '../../components/title/TitleProps';
 /**
  * Title component
  * @param children {ReactNode} Title child
@@ -20,5 +20,5 @@ import { TitleProps } from './TitleProps';
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-declare const Title: ({ level, markup, children, className, id, typo, skeleton, inverted, onClick, accessibilityLabel, subtitle, overline, marginless, ...others }: TitleProps) => JSX.Element;
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Title;

package/lib/components/title/Title.js

@@ -1,10 +1,10 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
 import clsx from 'clsx';
-import { is } from '../../services';
-import { TitleLevels, TitleMarkup } from './TitleEnum';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { TitleLevels, TitleMarkup } from '../../components/title/TitleEnum';
 import { hashClass } from '../../helpers/hashClassesHelpers';
-import { useTrilogyContext } from '../../context/index';
+import { is } from '../../services/classify';
 var getTitleLevel = function (level) {
     if (level) {
         switch (level) {
@@ -54,13 +54,12 @@ var isCorrectMarkup = function (stringMarkup) {
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-var Title = function (_a) {
-    var _b = _a.level, level = _b === void 0 ? TitleLevels.ONE : _b, markup = _a.markup, children = _a.children, className = _a.className, id = _a.id, typo = _a.typo, skeleton = _a.skeleton, inverted = _a.inverted, onClick = _a.onClick, accessibilityLabel = _a.accessibilityLabel, subtitle = _a.subtitle, overline = _a.overline, marginless = _a.marginless, others = __rest(_a, ["level", "markup", "children", "className", "id", "typo", "skeleton", "inverted", "onClick", "accessibilityLabel", "subtitle", "overline", "marginless"]);
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('title', level && getTitleLevel(level), typo, skeleton && is('loading'), inverted && is('inverted'), marginless && is('marginless'), className));
-    var subtitleClasses = hashClass(styled, clsx('subtitle', typo, className));
-    var overlineClasses = hashClass(styled, clsx('overline', typo, className));
-    var Tag = markup && isCorrectMarkup(markup) ? markup : 'p';
+var Title = React.forwardRef(function (_a, ref) {
+    var _b = _a.level, level = _b === void 0 ? TitleLevels.ONE : _b, markup = _a.markup, children = _a.children, className = _a.className, typo = _a.typo, inverted = _a.inverted, onClick = _a.onClick, testId = _a.testId, accessibilityLabel = _a.accessibilityLabel, subtitle = _a.subtitle, overline = _a.overline, marginless = _a.marginless, htmlContent = _a.htmlContent, skeleton = _a.skeleton, others = __rest(_a, ["level", "markup", "children", "className", "typo", "inverted", "onClick", "testId", "accessibilityLabel", "subtitle", "overline", "marginless", "htmlContent", "skeleton"]);
+    var classes = hashClass(clsx('title', level && getTitleLevel(level), typo, inverted && is('inverted'), marginless && is('marginless'), skeleton ? is('loading') : is('loaded'), className));
+    var subtitleClasses = hashClass(clsx('subtitle', typo, className));
+    var overlineClasses = hashClass(clsx('overline', typo, className));
+    var Tag = markup && isCorrectMarkup(markup) ? markup : 'div';
     var getClassname = function () {
         if (subtitle)
             return subtitleClasses;
@@ -68,7 +67,8 @@ var Title = function (_a) {
             return overlineClasses;
         return classes;
     };
-    return (React.createElement(Tag, __assign({ id: id, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname() }, others), children));
-};
+    return (React.createElement(Tag, __assign({ ref: ref, "data-testid": testId, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname() }, (htmlContent && { dangerouslySetInnerHTML: { __html: htmlContent } }), others), children));
+});
+Title.displayName = ComponentName.Title;
 export default Title;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL1RpdGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sRUFBRSxXQUFXLEVBQW9CLFdBQVcsRUFBcUIsTUFBTSxhQUFhLENBQUE7QUFDM0YsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRW5ELElBQU0sYUFBYSxHQUFHLFVBQUMsS0FBcUM7SUFDMUQsSUFBSSxLQUFLLEVBQUU7UUFDVCxRQUFRLEtBQUssRUFBRTtZQUNiLEtBQUssV0FBVyxDQUFDLEdBQUc7Z0JBQ2xCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCLEtBQUssV0FBVyxDQUFDLEdBQUc7Z0JBQ2xCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCLEtBQUssV0FBVyxDQUFDLEtBQUs7Z0JBQ3BCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCLEtBQUssV0FBVyxDQUFDLElBQUk7Z0JBQ25CLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCLEtBQUssV0FBVyxDQUFDLElBQUk7Z0JBQ25CLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCLEtBQUssV0FBVyxDQUFDLEdBQUc7Z0JBQ2xCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3RCO2dCQUNFLE9BQU8sRUFBRSxDQUFDLGdCQUFTLEtBQUssQ0FBRSxDQUFDLENBQUE7U0FDOUI7S0FDRjtBQUNILENBQUMsQ0FBQTtBQUVEOzs7OztHQUtHO0FBQ0gsSUFBTSxlQUFlLEdBQUcsVUFBQyxZQUE2QztJQUNwRSxPQUFPLFlBQVksSUFBSSxXQUFXLElBQUksTUFBTSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxRQUFRLENBQUMsWUFBMkIsQ0FBQyxDQUFBO0FBQ3hHLENBQUMsQ0FBQTtBQUVEOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQWVGO0lBZFgsSUFBQSxhQUF1QixFQUF2QixLQUFLLG1CQUFHLFdBQVcsQ0FBQyxHQUFHLEtBQUEsRUFDdkIsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1Asa0JBQWtCLHdCQUFBLEVBQ2xCLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFVBQVUsZ0JBQUEsRUFDUCxNQUFNLGNBZEkseUpBZWQsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixPQUFPLEVBQ1AsS0FBSyxJQUFJLGFBQWEsQ0FBQyxLQUFLLENBQUMsRUFDN0IsSUFBSSxFQUNKLFFBQVEsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3pCLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQzFCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxJQUFNLGVBQWUsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDNUUsSUFBTSxlQUFlLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRTVFLElBQU0sR0FBRyxHQUFHLE1BQU0sSUFBSSxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFBO0lBRTVELElBQU0sWUFBWSxHQUFHO1FBQ25CLElBQUksUUFBUTtZQUFFLE9BQU8sZUFBZSxDQUFBO1FBQ3BDLElBQUksUUFBUTtZQUFFLE9BQU8sZUFBZSxDQUFBO1FBQ3BDLE9BQU8sT0FBTyxDQUFBO0lBQ2hCLENBQUMsQ0FBQTtJQUVELE9BQU8sQ0FDTCxvQkFBQyxHQUFHLGFBQUMsRUFBRSxFQUFFLEVBQUUsZ0JBQWMsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLElBQU0sTUFBTSxHQUNqRyxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL1RpdGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBb0IsV0FBVyxFQUFxQixNQUFNLDhCQUE4QixDQUFBO0FBRTVHLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFeEMsSUFBTSxhQUFhLEdBQUcsVUFBQyxLQUFxQztJQUMxRCxJQUFJLEtBQUssRUFBRTtRQUNULFFBQVEsS0FBSyxFQUFFO1lBQ2IsS0FBSyxXQUFXLENBQUMsR0FBRztnQkFDbEIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEIsS0FBSyxXQUFXLENBQUMsR0FBRztnQkFDbEIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEIsS0FBSyxXQUFXLENBQUMsS0FBSztnQkFDcEIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEIsS0FBSyxXQUFXLENBQUMsSUFBSTtnQkFDbkIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEIsS0FBSyxXQUFXLENBQUMsSUFBSTtnQkFDbkIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEIsS0FBSyxXQUFXLENBQUMsR0FBRztnQkFDbEIsT0FBTyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUE7WUFDdEI7Z0JBQ0UsT0FBTyxFQUFFLENBQUMsZ0JBQVMsS0FBSyxDQUFFLENBQUMsQ0FBQTtTQUM5QjtLQUNGO0FBQ0gsQ0FBQyxDQUFBO0FBRUQ7Ozs7O0dBS0c7QUFDSCxJQUFNLGVBQWUsR0FBRyxVQUFDLFlBQTZDO0lBQ3BFLE9BQU8sWUFBWSxJQUFJLFdBQVcsSUFBSSxNQUFNLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxZQUEyQixDQUFDLENBQUE7QUFDeEcsQ0FBQyxDQUFBO0FBRUQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQkc7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUNFLEVBZ0JhLEVBQ2IsR0FBa0M7SUFoQmhDLElBQUEsYUFBdUIsRUFBdkIsS0FBSyxtQkFBRyxXQUFXLENBQUMsR0FBRyxLQUFBLEVBQ3ZCLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULElBQUksVUFBQSxFQUNKLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLGtCQUFrQix3QkFBQSxFQUNsQixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixVQUFVLGdCQUFBLEVBQ1YsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FmWCw0S0FnQkMsQ0FEVTtJQUlYLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsSUFBSSxDQUNGLE9BQU8sRUFDUCxLQUFLLElBQUksYUFBYSxDQUFDLEtBQUssQ0FBQyxFQUM3QixJQUFJLEVBQ0osUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdkMsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELElBQU0sZUFBZSxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3BFLElBQU0sZUFBZSxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3BFLElBQU0sR0FBRyxHQUFHLE1BQU0sSUFBSSxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFBO0lBRTlELElBQU0sWUFBWSxHQUFHO1FBQ25CLElBQUksUUFBUTtZQUFFLE9BQU8sZUFBZSxDQUFBO1FBQ3BDLElBQUksUUFBUTtZQUFFLE9BQU8sZUFBZSxDQUFBO1FBQ3BDLE9BQU8sT0FBTyxDQUFBO0lBQ2hCLENBQUMsQ0FBQTtJQUVELE9BQU8sQ0FDTCxvQkFBQyxHQUFHLGFBQ0YsR0FBRyxFQUFFLEdBQUcsaUJBQ0ssTUFBTSxnQkFDUCxrQkFBa0IsRUFDOUIsT0FBTyxFQUFFLE9BQU8sRUFDaEIsU0FBUyxFQUFFLFlBQVksRUFBRSxJQUNyQixDQUFDLFdBQVcsSUFBSSxFQUFFLHVCQUF1QixFQUFFLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxFQUFFLENBQUMsRUFDckUsTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELEtBQUssQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLEtBQUssQ0FBQTtBQUN2QyxlQUFlLEtBQUssQ0FBQSJ9

package/lib/components/title/Title.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { TitleProps } from "./TitleProps";
-import { ComponentName } from "../../components/enumsComponentsName";
+import React from 'react';
+import { Text as TextNative, TouchableOpacity } from 'react-native';
+import { TitleProps } from '../../components/title/TitleProps';
 /**
  * Title component
  * @param children {ReactNode} Title child
@@ -15,8 +15,5 @@ import { ComponentName } from "../../components/enumsComponentsName";
  * @param subtitle {boolean} Subtitle below title
  * @param overline {boolean} Overline above title
  */
-declare const Title: {
-    ({ children, level, style, inverted, typo, onClick, skeleton, accessibilityLabel, subtitle, overline, ...others }: TitleProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<TouchableOpacity | TextNative>>;
 export default Title;