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

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

@@ -1,3 +1,3 @@
 import TimelineItem from './TimelineItem';
 export default TimelineItem;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL2l0ZW0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0sZ0JBQWdCLENBQUE7QUFFekMsZUFBZSxZQUFZLENBQUEifQ==

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

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TimelineMarkerWebProps } from './TimelineMarkerProps';
 /**
  * Timeline Marker Component
- * @param className {string} Additionnal CSS Classes
- * @param iconClassname {string} Additionnal CSS Classes for icon
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
  * @param iconColor {IconColor} Icon Color
- * @param children {ReactNode}
+ * @param testId {string} Test Id for Test Integration
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param iconClassname {string} Additional CSS Classes for icon
  */
-declare const TimelineMarker: ({ className, iconClassname, iconName, iconColor, testId, ...others }: TimelineMarkerWebProps) => JSX.Element;
+declare const TimelineMarker: React.ForwardRefExoticComponent<TimelineMarkerWebProps & React.RefAttributes<HTMLDivElement>>;
 export default TimelineMarker;

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

@@ -1,24 +1,29 @@
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
 import clsx from 'clsx';
 import { is } from '../../../services/classify';
-import { Icon, IconColor, IconSize } from '../../icon';
+import { Icon, IconSize } from '../../../components/icon';
 import { useTrilogyContext } from '../../../context';
 import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Timeline Marker Component
- * @param className {string} Additionnal CSS Classes
- * @param iconClassname {string} Additionnal CSS Classes for icon
  * @param iconName {IconName} Icon Name - sample : IconName.CHECK
  * @param iconColor {IconColor} Icon Color
- * @param children {ReactNode}
+ * @param testId {string} Test Id for Test Integration
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param iconClassname {string} Additional CSS Classes for icon
  */
-const TimelineMarker = ({ className, iconClassname, iconName, iconColor, testId, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('timeline-marker', is('icon'), className));
-    const iconClasses = clsx(iconClassname);
-    return (React.createElement("div", { className: classes, ...others, "data-testid": testId },
+var TimelineMarker = React.forwardRef(function (_a, ref) {
+    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 iconClasses = clsx(iconClassname);
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others),
         React.createElement("div", { className: 'card-header-icon' },
-            React.createElement(Icon, { color: iconColor || IconColor.WHITE, className: iconClasses, name: iconName, size: IconSize.SMALL }))));
-};
+            React.createElement(Icon, { className: iconClasses, name: iconName, size: IconSize.SMALL }))));
+});
+TimelineMarker.displayName = ComponentName.TimelineMarker;
 export default TimelineMarker;
-//# sourceMappingURL=TimelineMarker.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9UaW1lbGluZU1hcmtlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUE0QyxVQUFDLEVBTW5GLEVBQUUsR0FBRztJQUxKLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsYUFBYSxtQkFBQSxFQUNiLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FMeUUsZ0RBTW5GLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUNqRixJQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUE7SUFFdkMsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU07UUFDbkQsNkJBQUssU0FBUyxFQUFDLGtCQUFrQjtZQUMvQixvQkFBQyxJQUFJLElBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxHQUFJLENBQ2xFLENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixjQUFjLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxjQUFjLENBQUE7QUFDekQsZUFBZSxjQUFjLENBQUEifQ==

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import { TimelineMarkerProps } from './TimelineMarkerProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { TimelineMarkerProps } from '../../../components/timeline/marker/TimelineMarkerProps';
+import React from 'react';
+import { View } from 'react-native';
 /**
  * TimelineMarker Native Component
- * @param children {ReactNode} Text child
+ * @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, iconColor }: 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,54 +1,54 @@
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Icon, IconSize } from '../../../components/icon';
+import { SpacerSize } from '../../../components/spacer';
+import { TimelineItemContext } from '../../../components/timeline/item/TimelineItem.native';
+import { TimelineHeightContext } from '../../../components/timeline/Timeline.native';
+import { getColorStyle, TrilogyColor } from '../../../objects';
 import React, { useContext } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Icon, IconSize } from '../../icon';
-import { TimelineItemContext } from '../item/TimelineItem.native';
-import { getColorStyle, TrilogyColor } from '../../../objects';
-import { TimelineHeightContext } from '../Timeline.native';
-import { ComponentName } from '../../enumsComponentsName';
 /**
  * TimelineMarker Native Component
- * @param children {ReactNode} Text child
+ * @param iconName {IconName} Icon Name - sample : IconName.CHECK
+ * @param iconColor {IconColor} Icon Color
+ * @param testId {string} Test Id for Test Integration
  */
-const TimelineMarker = ({ iconName, iconColor }) => {
-    const { active, undone, done, cancel } = useContext(TimelineItemContext);
-    const { height } = useContext(TimelineHeightContext);
-    const styles = StyleSheet.create({
+var TimelineMarker = React.forwardRef(function (_a, ref) {
+    var iconName = _a.iconName;
+    var _b = useContext(TimelineItemContext), active = _b.active, done = _b.done, cancel = _b.cancel;
+    var height = useContext(TimelineHeightContext).height;
+    var styles = StyleSheet.create({
         marker: {
             flex: 1,
             alignSelf: 'flex-start',
             flexDirection: 'column',
         },
         divider: {
+            top: SpacerSize.TWO,
             height: height ? height - 48 : 74,
             borderStyle: 'solid',
             borderLeftWidth: 2,
             marginLeft: 'auto',
             marginRight: 'auto',
-            borderColor: (active && getColorStyle(TrilogyColor.SECONDARY)) ||
-                (undone && getColorStyle(TrilogyColor.GREY_LIGHT)) ||
-                (cancel && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-                (done && getColorStyle(TrilogyColor.TERTIARY)) ||
-                getColorStyle(TrilogyColor.GREY_LIGHT),
+            borderColor: (active && getColorStyle(TrilogyColor.MAIN)) ||
+                (cancel && getColorStyle(TrilogyColor.NEUTRAL)) ||
+                (done && getColorStyle(TrilogyColor.MAIN)) ||
+                getColorStyle(TrilogyColor.NEUTRAL),
         },
         icon: {
             alignSelf: 'center',
         },
     });
-    return (React.createElement(View, { style: styles.marker },
+    return (React.createElement(View, { ref: ref, style: styles.marker },
         React.createElement(View, { style: styles.icon },
-            React.createElement(Icon, { name: iconName, circled: true, color: !iconColor
-                    ? (active && TrilogyColor.WHITE) ||
-                        (undone && TrilogyColor.TERTIARY) ||
-                        (cancel && TrilogyColor.GREY_LIGHT) ||
-                        (done && TrilogyColor.WHITE) ||
-                        TrilogyColor.WHITE
-                    : iconColor, backgroundColor: (active && TrilogyColor.SECONDARY) ||
-                    (undone && TrilogyColor.GREY_LIGHT) ||
-                    (cancel && TrilogyColor.GREY_LIGHT) ||
-                    (done && TrilogyColor.TERTIARY) ||
-                    TrilogyColor.GREY_LIGHT, size: IconSize.SMALL })),
+            React.createElement(Icon, { name: iconName, circled: true, color: (active && TrilogyColor.BACKGROUND) ||
+                    (cancel && TrilogyColor.NEUTRAL_FADE) ||
+                    (done && TrilogyColor.BACKGROUND) ||
+                    TrilogyColor.BACKGROUND, backgroundColor: (active && TrilogyColor.MAIN) ||
+                    (cancel && TrilogyColor.NEUTRAL) ||
+                    (done && TrilogyColor.MAIN) ||
+                    TrilogyColor.NEUTRAL, size: IconSize.SMALL })),
         React.createElement(View, { style: styles.divider })));
-};
+});
 TimelineMarker.displayName = ComponentName.TimelineMarker;
 export default TimelineMarker;
-//# sourceMappingURL=TimelineMarker.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmVNYXJrZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90aW1lbGluZS9tYXJrZXIvVGltZWxpbmVNYXJrZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDaEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0RBQWdELENBQUE7QUFFcEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUNBQXVDLENBQUE7QUFDN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFL0M7Ozs7O0dBS0c7QUFDSCxJQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUErQyxVQUFDLEVBQVksRUFBRSxHQUFHO1FBQWYsUUFBUSxjQUFBO0lBQ3pGLElBQUEsS0FBMkIsVUFBVSxDQUFDLG1CQUFtQixDQUFDLEVBQXhELE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE1BQU0sWUFBb0MsQ0FBQTtJQUN4RCxJQUFBLE1BQU0sR0FBSyxVQUFVLENBQUMscUJBQXFCLENBQUMsT0FBdEMsQ0FBc0M7SUFFcEQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixNQUFNLEVBQUU7WUFDTixJQUFJLEVBQUUsQ0FBQztZQUNQLFNBQVMsRUFBRSxZQUFZO1lBQ3ZCLGFBQWEsRUFBRSxRQUFRO1NBQ3hCO1FBQ0QsT0FBTyxFQUFFO1lBQ1AsR0FBRyxFQUFFLFVBQVUsQ0FBQyxHQUFHO1lBQ25CLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDakMsV0FBVyxFQUFFLE9BQU87WUFDcEIsZUFBZSxFQUFFLENBQUM7WUFDbEIsVUFBVSxFQUFFLE1BQU07WUFDbEIsV0FBVyxFQUFFLE1BQU07WUFDbkIsV0FBVyxFQUNULENBQUMsTUFBTSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzVDLENBQUMsTUFBTSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7Z0JBQy9DLENBQUMsSUFBSSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDO1NBQ3RDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osU0FBUyxFQUFFLFFBQVE7U0FDcEI7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxNQUFNO1FBQ2xDLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUk7WUFDdEIsb0JBQUMsSUFBSSxJQUNILElBQUksRUFBRSxRQUFRLEVBQ2QsT0FBTyxRQUNQLEtBQUssRUFDSCxDQUFDLE1BQU0sSUFBSSxZQUFZLENBQUMsVUFBVSxDQUFDO29CQUNuQyxDQUFDLE1BQU0sSUFBSSxZQUFZLENBQUMsWUFBWSxDQUFDO29CQUNyQyxDQUFDLElBQUksSUFBSSxZQUFZLENBQUMsVUFBVSxDQUFDO29CQUNqQyxZQUFZLENBQUMsVUFBVSxFQUV6QixlQUFlLEVBQ2IsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQztvQkFDN0IsQ0FBQyxNQUFNLElBQUksWUFBWSxDQUFDLE9BQU8sQ0FBQztvQkFDaEMsQ0FBQyxJQUFJLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQztvQkFDM0IsWUFBWSxDQUFDLE9BQU8sRUFFdEIsSUFBSSxFQUFFLFFBQVEsQ0FBQyxLQUFLLEdBQ3BCLENBQ0c7UUFFUCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxPQUFPLEdBQVMsQ0FDL0IsQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixjQUFjLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxjQUFjLENBQUE7QUFFekQsZUFBZSxjQUFjLENBQUEifQ==

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

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

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

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

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

@@ -0,0 +1,67 @@
+export default {
+  "iconName": {
+    "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"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

@@ -0,0 +1,88 @@
+export default {
+  "iconClassname": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "iconName": {
+    "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"
+    ]
+  },
+  "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/timeline/marker/index.js

@@ -1,3 +1,3 @@
 import TimelineMarker from './TimelineMarker';
 export default TimelineMarker;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RpbWVsaW5lL21hcmtlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUU3QyxlQUFlLGNBQWMsQ0FBQSJ9

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TitleProps } from './TitleProps';
+import React from 'react';
+import { TitleProps, TitleRef } from './TitleProps';
 /**
  * Title component
  * @param children {ReactNode} Title child
@@ -10,13 +10,15 @@ import { TitleProps } from './TitleProps';
  * @param skeleton {Boolean} Title Skeleton
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test Id for Test Integration
- * - --------------- WEB PROPERTIES ----------------------------------
- * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
- * @param className {string} Additionnal css classes
  * @param subtitle {boolean} Subtitle below title
  * @param overline {boolean} Overline above title
+ * - --------------- WEB PROPERTIES ----------------------------------
+ * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
+ * @param className {string} Additional css classes
+ * @param marginless {boolean} delete margin
+ * @param htmlContent {string} Content Html In Title Component
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-declare const Title: ({ level, markup, children, className, typo, skeleton, inverted, onClick, testId, accessibilityLabel, subtitle, overline, marginless, htmlContent, ...others }: TitleProps) => JSX.Element;
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<TitleRef>>;
 export default Title;

package/lib/components/title/Title.js

@@ -1,26 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import { __assign, __rest } from "tslib";
+import React from 'react';
 import clsx from 'clsx';
 import { is } from '../../services';
 import { TitleLevels, TitleMarkup } from './TitleEnum';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
-const getTitleLevel = (level) => {
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { useTrilogyContext } from '../../context/index';
+import { ComponentName } from '../enumsComponentsName';
+var getTitleLevel = function (level) {
     if (level) {
         switch (level) {
             case TitleLevels.ONE:
-                return is(`level-1`);
+                return is("level-1");
             case TitleLevels.TWO:
-                return is(`level-2`);
+                return is("level-2");
             case TitleLevels.THREE:
-                return is(`level-3`);
+                return is("level-3");
             case TitleLevels.FOUR:
-                return is(`level-4`);
+                return is("level-4");
             case TitleLevels.FIVE:
-                return is(`level-5`);
+                return is("level-5");
             case TitleLevels.SIX:
-                return is(`level-6`);
+                return is("level-6");
             default:
-                return is(`level-${level}`);
+                return is("level-".concat(level));
         }
     }
 };
@@ -30,7 +32,7 @@ const getTitleLevel = (level) => {
  * for string enum (as in this case) we need to use Object.values.includes for JS usage
  * string enum aren't reverse mapped so the first solution doesn't work
  */
-const isCorrectMarkup = (stringMarkup) => {
+var isCorrectMarkup = function (stringMarkup) {
     return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
 };
 /**
@@ -43,32 +45,32 @@ const isCorrectMarkup = (stringMarkup) => {
  * @param skeleton {Boolean} Title Skeleton
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test Id for Test Integration
- * - --------------- WEB PROPERTIES ----------------------------------
- * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
- * @param className {string} Additionnal css classes
  * @param subtitle {boolean} Subtitle below title
  * @param overline {boolean} Overline above title
+ * - --------------- WEB PROPERTIES ----------------------------------
+ * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
+ * @param className {string} Additional css classes
+ * @param marginless {boolean} delete margin
+ * @param htmlContent {string} Content Html In Title Component
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-const Title = ({ level = TitleLevels.ONE, markup, children, className, typo, skeleton, inverted, onClick, testId, accessibilityLabel, subtitle, overline, marginless, htmlContent, ...others }) => {
-    const [isLoading, setIsLoading] = useState(skeleton || false);
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('title', level && getTitleLevel(level), typo, isLoading ? is('loading') : is('loaded'), inverted && is('inverted'), marginless && is('marginless'), className));
-    const subtitleClasses = hashClass(styled, clsx('subtitle', className));
-    const overlineClasses = hashClass(styled, clsx('overline', className));
-    useEffect(() => {
-        setIsLoading(skeleton || false);
-    }, [skeleton]);
-    const Tag = markup && isCorrectMarkup(markup) ? markup : 'div';
-    const getClassname = () => {
+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, 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 getClassname = function () {
         if (subtitle)
             return subtitleClasses;
         if (overline)
             return overlineClasses;
         return classes;
     };
-    return (React.createElement(Tag, { "data-testid": testId, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname(), ...(htmlContent && { dangerouslySetInnerHTML: { __html: htmlContent } }), ...others }, children));
-};
+    return (React.createElement(Tag, __assign({ ref: ref, id: id, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname() }, others), children));
+});
+Title.displayName = ComponentName.Title;
 export default Title;
-//# sourceMappingURL=Title.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL1RpdGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sRUFBRSxXQUFXLEVBQW9CLFdBQVcsRUFBcUIsTUFBTSxhQUFhLENBQUE7QUFDM0YsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUV0RCxJQUFNLGFBQWEsR0FBRyxVQUFDLEtBQXFDO0lBQzFELElBQUksS0FBSyxFQUFFO1FBQ1QsUUFBUSxLQUFLLEVBQUU7WUFDYixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxLQUFLO2dCQUNwQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QjtnQkFDRSxPQUFPLEVBQUUsQ0FBQyxnQkFBUyxLQUFLLENBQUUsQ0FBQyxDQUFBO1NBQzlCO0tBQ0Y7QUFDSCxDQUFDLENBQUE7QUFFRDs7Ozs7R0FLRztBQUNILElBQU0sZUFBZSxHQUFHLFVBQUMsWUFBNkM7SUFDcEUsT0FBTyxZQUFZLElBQUksV0FBVyxJQUFJLE1BQU0sQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsUUFBUSxDQUFDLFlBQTJCLENBQUMsQ0FBQTtBQUN4RyxDQUFDLENBQUE7QUFFRDs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CRztBQUNILElBQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXVCLFVBQUMsRUFlckQsRUFBRSxHQUFHO0lBZEosSUFBQSxhQUF1QixFQUF2QixLQUFLLG1CQUFHLFdBQVcsQ0FBQyxHQUFHLEtBQUEsRUFDdkIsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1Asa0JBQWtCLHdCQUFBLEVBQ2xCLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFVBQVUsZ0JBQUEsRUFDUCxNQUFNLGNBZDJDLHlKQWVyRCxDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLE9BQU8sRUFDUCxLQUFLLElBQUksYUFBYSxDQUFDLEtBQUssQ0FBQyxFQUM3QixJQUFJLEVBQ0osUUFBUSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFDekIsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELElBQU0sZUFBZSxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUM1RSxJQUFNLGVBQWUsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFNUUsSUFBTSxHQUFHLEdBQUcsTUFBTSxJQUFJLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUE7SUFFNUQsSUFBTSxZQUFZLEdBQUc7UUFDbkIsSUFBSSxRQUFRO1lBQUUsT0FBTyxlQUFlLENBQUE7UUFDcEMsSUFBSSxRQUFRO1lBQUUsT0FBTyxlQUFlLENBQUE7UUFDcEMsT0FBTyxPQUFPLENBQUE7SUFDaEIsQ0FBQyxDQUFBO0lBRUQsT0FBTyxDQUNMLG9CQUFDLEdBQUcsYUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLGdCQUFjLGtCQUFrQixFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxJQUFNLE1BQU0sR0FDM0csUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQyxDQUFBO0FBRUYsS0FBSyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsS0FBSyxDQUFBO0FBQ3ZDLGVBQWUsS0FBSyxDQUFBIn0=

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

@@ -1,20 +1,19 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { Text as TextNative } from 'react-native';
 import { TitleProps } from './TitleProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
- * Title Native Component
- * @param children {ReactNode} Text child
- * @param level {TextLevels|number} Title size : 1-4
+ * Title component
+ * @param children {ReactNode} Title child
+ * @param level {TitleLevels | TitleLevel | number} Title size : 1-3
  * @param inverted {Boolean} Title white color
  * @param typo {TypographyColor | TypographyTransform | TypographyBold | TypographyAlign} Typos
  * @param onClick {Function} onClick Event
- * @param style {Object} Additional styles
  * @param skeleton {Boolean} Title Skeleton
- * @param testId {string} Test Id for Test Integration
  * @param accessibilityLabel {string} Accessibility label
+ * @param testId {string} Test Id for Test Integration
+ * @param style {object} Additional styles
+ * @param subtitle {boolean} Subtitle below title
+ * @param overline {boolean} Overline above title
  */
-declare const Title: {
-    ({ children, level, style, inverted, typo, onClick, skeleton, testId, accessibilityLabel, subtitle, overline, ...others }: TitleProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<TextNative>>;
 export default Title;