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

package/lib/components/box/header/BoxHeader.native.js

@@ -1,27 +1,19 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 import { ComponentName } from '../../../components/enumsComponentsName';
 import { StatesContext } from '../../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 /**
  * Box Header Component
  * @param children {React.ReactNode} Childrens
- * @param centered {boolean} Center content box header
- * @param pulledLeft {boolean} Pulled-left content box header
- * @param pulledRight {boolean} Pulled-right content box header
  * @param help {string} Box Header Help Sticker
  * @param variant {TrilogyColor} Box Header backgroundColor
  * @param others
  */
-var BoxHeader = function (_a) {
-    var children = _a.children, variant = _a.variant, others = __rest(_a, ["children", "variant"]);
+var BoxHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, variant = _a.variant, help = _a.help, others = __rest(_a, ["children", "variant", "help"]);
     var statesContext = useContext(StatesContext);
-    var centered = false;
-    var pulledLeft = false;
-    var pulledRight = false;
-    var help = '';
     var headerBgc = variant ? getColorStyle(variant) : getColorStyle(TrilogyColor.MAIN);
     var textColor = getColorStyle(TrilogyColor.BACKGROUND);
     var styles = StyleSheet.create({
@@ -34,13 +26,14 @@ var BoxHeader = function (_a) {
             borderTopRightRadius: 6,
             marginTop: (statesContext.active && -2) || (statesContext.flat && -1) || 0,
             justifyContent: 'space-between',
-            alignItems: (centered && 'center') || (pulledRight && 'flex-end') || (pulledLeft && 'flex-start') || 'flex-start',
+            alignItems: 'center',
             flexDirection: 'row',
         },
         text: {
             color: textColor,
             fontSize: 15,
             fontWeight: '600',
+            textAlign: 'center',
         },
         helpContainer: {
             alignSelf: 'center',
@@ -52,11 +45,11 @@ var BoxHeader = function (_a) {
             lineHeight: 15,
         },
     });
-    return (React.createElement(View, __assign({ style: [styles.boxHeader] }, others),
+    return (React.createElement(View, __assign({ style: [styles.boxHeader], ref: ref }, others),
         children && typeof children.valueOf() === 'string' ? (React.createElement(Text, { style: styles.text }, String(children))) : (children),
         help && (React.createElement(View, { style: styles.helpContainer },
             React.createElement(Text, { style: styles.help }, help)))));
-};
+});
 BoxHeader.displayName = ComponentName.BoxHeader;
 export default BoxHeader;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2hlYWRlci9Cb3hIZWFkZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsQyxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFckQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXhEOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFBZ0Q7SUFBOUMsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBSyxNQUFNLGNBQTlCLHVCQUFnQyxDQUFGO0lBQy9DLElBQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUMvQyxJQUFNLFFBQVEsR0FBRyxLQUFLLENBQUE7SUFDdEIsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFBO0lBQ3hCLElBQU0sV0FBVyxHQUFHLEtBQUssQ0FBQTtJQUN6QixJQUFNLElBQUksR0FBRyxFQUFFLENBQUE7SUFFZixJQUFNLFNBQVMsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUNyRixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXhELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsU0FBUyxFQUFFO1lBQ1QsS0FBSyxFQUFFLE1BQU07WUFDYixlQUFlLEVBQUUsU0FBUztZQUMxQixPQUFPLEVBQUUsRUFBRTtZQUNYLFdBQVcsRUFBRSxFQUFFO1lBQ2YsbUJBQW1CLEVBQUUsQ0FBQztZQUN0QixvQkFBb0IsRUFBRSxDQUFDO1lBQ3ZCLFNBQVMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzFFLGNBQWMsRUFBRSxlQUFlO1lBQy9CLFVBQVUsRUFBRSxDQUFDLFFBQVEsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsSUFBSSxVQUFVLENBQUMsSUFBSSxDQUFDLFVBQVUsSUFBSSxZQUFZLENBQUMsSUFBSSxZQUFZO1lBQ2pILGFBQWEsRUFBRSxLQUFLO1NBQ3JCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osS0FBSyxFQUFFLFNBQVM7WUFDaEIsUUFBUSxFQUFFLEVBQUU7WUFDWixVQUFVLEVBQUUsS0FBSztTQUNsQjtRQUNELGFBQWEsRUFBRTtZQUNiLFNBQVMsRUFBRSxRQUFRO1NBQ3BCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osUUFBUSxFQUFFLEVBQUU7WUFDWixLQUFLLEVBQUUsU0FBUztZQUNoQixVQUFVLEVBQUUsS0FBSztZQUNqQixVQUFVLEVBQUUsRUFBRTtTQUNmO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQU0sTUFBTTtRQUN4QyxRQUFRLElBQUksT0FBTyxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUNwRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFRLENBQ3BELENBQUMsQ0FBQyxDQUFDLENBQ0YsUUFBUSxDQUNUO1FBRUEsSUFBSSxJQUFJLENBQ1Asb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsYUFBYTtZQUMvQixvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQUcsSUFBSSxDQUFRLENBQ2xDLENBQ1IsQ0FDSSxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2hlYWRlci9Cb3hIZWFkZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR3JELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQXNELEVBQUUsR0FBb0I7SUFBMUUsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxJQUFJLFVBQUEsRUFBSyxNQUFNLGNBQXBDLCtCQUFzQyxDQUFGO0lBQ25DLElBQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUUvQyxJQUFNLFNBQVMsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUNyRixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXhELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsU0FBUyxFQUFFO1lBQ1QsS0FBSyxFQUFFLE1BQU07WUFDYixlQUFlLEVBQUUsU0FBUztZQUMxQixPQUFPLEVBQUUsRUFBRTtZQUNYLFdBQVcsRUFBRSxFQUFFO1lBQ2YsbUJBQW1CLEVBQUUsQ0FBQztZQUN0QixvQkFBb0IsRUFBRSxDQUFDO1lBQ3ZCLFNBQVMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzFFLGNBQWMsRUFBRSxlQUFlO1lBQy9CLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLGFBQWEsRUFBRSxLQUFLO1NBQ3JCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osS0FBSyxFQUFFLFNBQVM7WUFDaEIsUUFBUSxFQUFFLEVBQUU7WUFDWixVQUFVLEVBQUUsS0FBSztZQUNqQixTQUFTLEVBQUUsUUFBUTtTQUNwQjtRQUNELGFBQWEsRUFBRTtZQUNiLFNBQVMsRUFBRSxRQUFRO1NBQ3BCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osUUFBUSxFQUFFLEVBQUU7WUFDWixLQUFLLEVBQUUsU0FBUztZQUNoQixVQUFVLEVBQUUsS0FBSztZQUNqQixVQUFVLEVBQUUsRUFBRTtTQUNmO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBTSxNQUFNO1FBQ2xELFFBQVEsSUFBSSxPQUFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksSUFBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQVEsQ0FDcEQsQ0FBQyxDQUFDLENBQUMsQ0FDRixRQUFRLENBQ1Q7UUFFQSxJQUFJLElBQUksQ0FDUCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxhQUFhO1lBQy9CLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksSUFBRyxJQUFJLENBQVEsQ0FDbEMsQ0FDUixDQUNJLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBQy9DLGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/box/header/BoxHeaderProps.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-/**
- * Box Header Interface
- */
-import { Accessibility, AlignableProps, TrilogyColor, TrilogyColorValues } from '../../../objects';
-import { CommonProps } from '../../../objects/facets/CommonProps';
-export interface BoxHeaderProps extends AlignableProps, Accessibility, CommonProps {
+import { Accessibility, Centerable, Dev, Position, StatusState, VariantState } from '../../../objects/facets';
+export interface BoxHeaderProps extends Position, Centerable, Accessibility, Dev {
     children?: React.ReactNode;
-    variant?: TrilogyColor | TrilogyColorValues;
+    help?: string;
+    className?: string;
+    variant?: VariantState | StatusState;
 }

package/lib/components/box/header/BoxHeaderPropsDefaults.js

@@ -13,6 +13,20 @@ export default {
       "ReactPortal"
     ]
   },
+  "help": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "variant": {
     "type": "enum",
     "values": [
@@ -23,75 +37,41 @@ export default {
       "ERROR",
       "MAIN",
       "ACCENT",
-      "WHITE",
-      "MAIN",
-      "MAIN_FADE",
-      "ACCENT",
-      "FONT",
-      "SUCCESS",
-      "SUCCESS_FADE",
-      "INFO",
-      "INFO_FADE",
-      "WARNING",
-      "WARNING_FADE",
-      "ERROR",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE",
-      "WHITE",
-      "MAIN_FADE",
-      "FONT",
-      "SUCCESS_FADE",
-      "INFO_FADE",
-      "WARNING_FADE",
-      "ERROR_FADE",
-      "DISABLED",
-      "DISABLED_FADE",
-      "NEUTRAL",
-      "NEUTRAL_FADE"
+      "INFO"
     ]
   },
-  "align": {
-    "type": "enum",
+  "pulledLeft": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
     ]
   },
-  "verticalAlign": {
-    "type": "enum",
+  "pulledRight": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
+  "centered": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/box/header/index.d.ts

@@ -1,2 +1,2 @@
-import BoxHeader from './BoxHeader';
+import BoxHeader from '../../../components/box/header/BoxHeader';
 export default BoxHeader;

package/lib/components/box/header/index.js

@@ -1,3 +1,3 @@
-import BoxHeader from './BoxHeader';
+import BoxHeader from '../../../components/box/header/BoxHeader';
 export default BoxHeader;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9oZWFkZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sYUFBYSxDQUFBO0FBRW5DLGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9oZWFkZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sbUNBQW1DLENBQUE7QUFFekQsZUFBZSxTQUFTLENBQUEifQ==

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

@@ -1,9 +1,8 @@
-import Box from './Box';
-import BoxContent from './content';
-import BoxFooter from './footer';
-import BoxHeader from './header';
-import BoxTableContainer from './table-container';
-import BoxItem from './item';
-import { BoxItemSize } from './item/BoxItemEnum';
-export * from './BoxProps';
-export { Box, BoxItem, BoxItemSize, BoxHeader, BoxContent, BoxFooter, BoxTableContainer };
+export { default as Box } from '../../components/box/Box';
+export * from '../../components/box/BoxProps';
+export { default as BoxContent } from '../../components/box/content';
+export { default as BoxFooter } from '../../components/box/footer';
+export { default as BoxHeader } from '../../components/box/header';
+export { default as BoxItem } from '../../components/box/item';
+export * from '../../components/box/item/BoxItemEnum';
+export { default as BoxTableContainer } from '../../components/box/table-container';

package/lib/components/box/index.js

@@ -1,10 +1,9 @@
-import Box from './Box';
-import BoxContent from './content';
-import BoxFooter from './footer';
-import BoxHeader from './header';
-import BoxTableContainer from './table-container';
-import BoxItem from './item';
-import { BoxItemSize } from './item/BoxItemEnum';
-export * from './BoxProps';
-export { Box, BoxItem, BoxItemSize, BoxHeader, BoxContent, BoxFooter, BoxTableContainer };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2JveC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFDdkIsT0FBTyxVQUFVLE1BQU0sV0FBVyxDQUFBO0FBQ2xDLE9BQU8sU0FBUyxNQUFNLFVBQVUsQ0FBQTtBQUNoQyxPQUFPLFNBQVMsTUFBTSxVQUFVLENBQUE7QUFDaEMsT0FBTyxpQkFBaUIsTUFBTSxtQkFBbUIsQ0FBQTtBQUNqRCxPQUFPLE9BQU8sTUFBTSxRQUFRLENBQUE7QUFDNUIsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBRWhELGNBQWMsWUFBWSxDQUFBO0FBRTFCLE9BQU8sRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxDQUFBIn0=
+export { default as Box } from '../../components/box/Box';
+export * from '../../components/box/BoxProps';
+export { default as BoxContent } from '../../components/box/content';
+export { default as BoxFooter } from '../../components/box/footer';
+export { default as BoxHeader } from '../../components/box/header';
+export { default as BoxItem } from '../../components/box/item';
+export * from '../../components/box/item/BoxItemEnum';
+export { default as BoxTableContainer } from '../../components/box/table-container';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2JveC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLEdBQUcsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3JELGNBQWMsMkJBQTJCLENBQUE7QUFDekMsT0FBTyxFQUFFLE9BQU8sSUFBSSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsT0FBTyxJQUFJLFNBQVMsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQzlELE9BQU8sRUFBRSxPQUFPLElBQUksU0FBUyxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFDOUQsT0FBTyxFQUFFLE9BQU8sSUFBSSxPQUFPLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQTtBQUMxRCxjQUFjLG1DQUFtQyxDQUFBO0FBQ2pELE9BQU8sRUFBRSxPQUFPLElBQUksaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQSJ9

package/lib/components/box/item/BoxItem.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { BoxItemProps } from './BoxItemProps';
+import React from 'react';
+import { BoxItemProps } from '../../../components/box/item/BoxItemProps';
 /**
  * Box Item Component
  * @param children {React.ReactNode} Children
@@ -7,5 +7,5 @@ import { BoxItemProps } from './BoxItemProps';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-declare const BoxItem: ({ className, id, children, ...others }: BoxItemProps) => JSX.Element;
+declare const BoxItem: React.ForwardRefExoticComponent<BoxItemProps & React.RefAttributes<HTMLDivElement>>;
 export default BoxItem;

package/lib/components/box/item/BoxItem.js

@@ -1,8 +1,8 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
 /**
  * Box Item Component
  * @param children {React.ReactNode} Children
@@ -10,10 +10,10 @@ import { useTrilogyContext } from '../../../context';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-var BoxItem = function (_a) {
-    var className = _a.className, id = _a.id, children = _a.children, others = __rest(_a, ["className", "id", "children"]);
-    var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('box-item', className)) }, others), children));
-};
+var BoxItem = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, others = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", __assign({ className: hashClass(clsx('box-item', className)), ref: ref }, others), children));
+});
+BoxItem.displayName = ComponentName.BoxItem;
 export default BoxItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2l0ZW0vQm94SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQW9EO0lBQWxELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFwQywrQkFBc0MsQ0FBRjtJQUMzQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQU0sTUFBTSxHQUMvRSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2l0ZW0vQm94SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUV4RDs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUFDLEVBQWdELEVBQUUsR0FBOEI7SUFBOUUsSUFBQSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQWhDLHlCQUFrQyxDQUFGO0lBQy9CLE9BQU8sQ0FDTCxzQ0FBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsU0FBUyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFNLE1BQU0sR0FDekUsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=

package/lib/components/box/item/BoxItem.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
-import { BoxItemProps } from "./BoxItemProps";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import React from 'react';
+import { View } from 'react-native';
+import { BoxItemProps } from '../../../components/box/item/BoxItemProps';
 /**
  * Box item Component
  * @param children {React.ReactNode} BoxItem Children
  * @param size {BoxItemSize} SMALL|MEDIUM|LARGE|HUGE
  */
-declare const BoxItem: {
-    ({ children, size, ...others }: BoxItemProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const BoxItem: React.ForwardRefExoticComponent<BoxItemProps & React.RefAttributes<View>>;
 export default BoxItem;

package/lib/components/box/item/BoxItem.native.js

@@ -1,26 +1,26 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Box item Component
  * @param children {React.ReactNode} BoxItem Children
  * @param size {BoxItemSize} SMALL|MEDIUM|LARGE|HUGE
  */
-var BoxItem = function (_a) {
+var BoxItem = React.forwardRef(function (_a, ref) {
     var children = _a.children, size = _a.size, others = __rest(_a, ["children", "size"]);
     var height = Number(size) || 48;
     var styles = StyleSheet.create({
         boxItem: {
             height: height,
-            alignItems: "center",
-            alignContent: "center",
-            flexWrap: "wrap",
+            alignItems: 'center',
+            alignContent: 'center',
+            flexWrap: 'wrap',
             flex: 1,
         },
     });
-    return (React.createElement(View, __assign({ style: [styles.boxItem] }, others), children));
-};
+    return (React.createElement(View, __assign({ ref: ref, style: [styles.boxItem] }, others), children));
+});
 BoxItem.displayName = ComponentName.BoxItem;
 export default BoxItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9pdGVtL0JveEl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFOzs7O0dBSUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQTJDO0lBQXpDLElBQUEsUUFBUSxjQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUssTUFBTSxjQUEzQixvQkFBNkIsQ0FBRjtJQUMxQyxJQUFNLE1BQU0sR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFBO0lBQ2pDLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsT0FBTyxFQUFFO1lBQ1AsTUFBTSxFQUFFLE1BQU07WUFDZCxVQUFVLEVBQUUsUUFBUTtZQUNwQixZQUFZLEVBQUUsUUFBUTtZQUN0QixRQUFRLEVBQUUsTUFBTTtZQUNoQixJQUFJLEVBQUUsQ0FBQztTQUNSO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLElBQU0sTUFBTSxHQUN0QyxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBRTNDLGVBQWUsT0FBTyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9pdGVtL0JveEl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7OztHQUlHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxVQUFDLEVBQTJDLEVBQUUsR0FBb0I7SUFBL0QsSUFBQSxRQUFRLGNBQUEsRUFBRSxJQUFJLFVBQUEsRUFBSyxNQUFNLGNBQTNCLG9CQUE2QixDQUFGO0lBQzNELElBQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUE7SUFDakMsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixPQUFPLEVBQUU7WUFDUCxNQUFNLEVBQUUsTUFBTTtZQUNkLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFlBQVksRUFBRSxRQUFRO1lBQ3RCLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLElBQUksRUFBRSxDQUFDO1NBQ1I7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFNLE1BQU0sR0FDaEQsUUFBUSxDQUNKLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQyxDQUFBO0FBRUYsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=

package/lib/components/box/item/BoxItemProps.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { BoxItemSize, BoxItemSizeValues } from './BoxItemEnum';
-import { CommonProps } from '../../../objects/facets/CommonProps';
-export interface BoxItemProps extends CommonProps {
+import { BoxItemSize, BoxItemSizeValues } from '../../../components/box/item/BoxItemEnum';
+export interface BoxItemProps {
     children?: React.ReactNode;
+    className?: string;
     size?: BoxItemSize | BoxItemSizeValues;
 }

package/lib/components/box/item/BoxItemPropsDefaults.js

@@ -13,6 +13,13 @@ export default {
       "ReactPortal"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "size": {
     "type": "enum",
     "values": [
@@ -24,19 +31,5 @@ export default {
       "LARGE",
       "HUGE"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

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

@@ -1,3 +1,3 @@
-import BoxItem from './BoxItem';
-export * from './BoxItemEnum';
+import BoxItem from '../../../components/box/item/BoxItem';
+export * from '../../../components/box/item/BoxItemEnum';
 export default BoxItem;

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

@@ -1,4 +1,4 @@
-import BoxItem from './BoxItem';
-export * from './BoxItemEnum';
+import BoxItem from '../../../components/box/item/BoxItem';
+export * from '../../../components/box/item/BoxItemEnum';
 export default BoxItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9pdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sT0FBTyxNQUFNLFdBQVcsQ0FBQTtBQUUvQixjQUFjLGVBQWUsQ0FBQTtBQUU3QixlQUFlLE9BQU8sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9pdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sT0FBTyxNQUFNLCtCQUErQixDQUFBO0FBRW5ELGNBQWMsbUNBQW1DLENBQUE7QUFDakQsZUFBZSxPQUFPLENBQUEifQ==

package/lib/components/box/table-container/BoxTableContainer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { BoxTableContainerProps } from "./BoxTableContainerProps";
+import React from 'react';
+import { BoxTableContainerProps } from '../../../components/box/table-container/BoxTableContainerProps';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Children
@@ -7,5 +7,5 @@ import { BoxTableContainerProps } from "./BoxTableContainerProps";
  * @param className {string} Additionnal CSS Classes
  * @param testId {string} Test Id for Test Integration
  */
-declare const BoxTableContainer: ({ className, testId, ...others }: BoxTableContainerProps) => JSX.Element;
+declare const BoxTableContainer: React.ForwardRefExoticComponent<BoxTableContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default BoxTableContainer;

package/lib/components/box/table-container/BoxTableContainer.js

@@ -1,8 +1,8 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import clsx from "clsx";
-import { hashClass } from "../../../helpers";
-import { useTrilogyContext } from "../../../context";
+import clsx from 'clsx';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Children
@@ -10,10 +10,10 @@ import { useTrilogyContext } from "../../../context";
  * @param className {string} Additionnal CSS Classes
  * @param testId {string} Test Id for Test Integration
  */
-var BoxTableContainer = function (_a) {
+var BoxTableContainer = React.forwardRef(function (_a, ref) {
     var className = _a.className, testId = _a.testId, others = __rest(_a, ["className", "testId"]);
-    var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ "data-testid": testId, className: hashClass(styled, clsx("box table-container", className)) }, others)));
-};
+    return (React.createElement("div", __assign({ "data-testid": testId, className: hashClass(clsx('box table-container', className)), ref: ref }, others)));
+});
+BoxTableContainer.displayName = ComponentName.BoxTableContainer;
 export default BoxTableContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvQm94VGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7OztHQU1HO0FBQ0gsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEVBSUY7SUFIdkIsSUFBQSxTQUFTLGVBQUEsRUFDVCxNQUFNLFlBQUEsRUFDSCxNQUFNLGNBSGdCLHVCQUkxQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHFEQUNlLE1BQU0sRUFDbkIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLHFCQUFxQixFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQ2hFLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLGlCQUFpQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvQm94VGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFFeEQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUN4QyxVQUFDLEVBQXdELEVBQUUsR0FBOEI7SUFBdEYsSUFBQSxTQUFTLGVBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQTlCLHVCQUFnQyxDQUFGO0lBQzdCLE9BQU8sQ0FDTCxxREFBa0IsTUFBTSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLHFCQUFxQixFQUFFLFNBQVMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBTSxNQUFNLEVBQUksQ0FDakgsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsaUJBQWlCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQTtBQUMvRCxlQUFlLGlCQUFpQixDQUFBIn0=

package/lib/components/box/table-container/BoxTableContainer.native.d.ts

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import { BoxTableContainerProps } from "./BoxTableContainerProps";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import React from 'react';
+import { View } from 'react-native';
+import { BoxTableContainerProps } from '../../../components/box/table-container/BoxTableContainerProps';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Childrens
  */
-declare const boxTableContainer: {
-    ({ children, ...others }: BoxTableContainerProps): JSX.Element;
-    displayName: ComponentName;
-};
-export default boxTableContainer;
+declare const BoxTableContainer: React.ForwardRefExoticComponent<BoxTableContainerProps & React.RefAttributes<View>>;
+export default BoxTableContainer;

package/lib/components/box/table-container/BoxTableContainer.native.js

@@ -1,18 +1,18 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Childrens
  */
-var boxTableContainer = function (_a) {
+var BoxTableContainer = React.forwardRef(function (_a, ref) {
     var children = _a.children, others = __rest(_a, ["children"]);
     var styles = StyleSheet.create({
         boxTableContainer: {},
     });
-    return (React.createElement(View, __assign({ style: [styles.boxTableContainer] }, others), children));
-};
-boxTableContainer.displayName = ComponentName.BoxFooter;
-export default boxTableContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvdGFibGUtY29udGFpbmVyL0JveFRhYmxlQ29udGFpbmVyLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7O0dBR0c7QUFDSCxJQUFNLGlCQUFpQixHQUFHLFVBQUMsRUFHRjtJQUZ2QixJQUFBLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FGZ0IsWUFHMUIsQ0FEVTtJQUVULElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsaUJBQWlCLEVBQUUsRUFBRTtLQUN0QixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxJQUFNLE1BQU0sR0FDaEQsUUFBUSxDQUNKLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGlCQUFpQixDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRXZELGVBQWUsaUJBQWlCLENBQUEifQ==
+    return (React.createElement(View, __assign({ style: [styles.boxTableContainer], ref: ref }, others), children));
+});
+BoxTableContainer.displayName = ComponentName.BoxTableContainer;
+export default BoxTableContainer;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvdGFibGUtY29udGFpbmVyL0JveFRhYmxlQ29udGFpbmVyLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUcvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7OztHQUdHO0FBQ0gsSUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUN4QyxVQUFDLEVBQStDLEVBQUUsR0FBb0I7SUFBbkUsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDcEIsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixpQkFBaUIsRUFBRSxFQUFFO0tBQ3RCLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBTSxNQUFNLEdBQzFELFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELGlCQUFpQixDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsaUJBQWlCLENBQUE7QUFDL0QsZUFBZSxpQkFBaUIsQ0FBQSJ9

package/lib/components/box/table-container/BoxTableContainerProps.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Accessibility, Dev } from '../../../objects';
+import { Accessibility } from '../../../objects/facets/Accessibility';
+import { Dev } from '../../../objects/facets/Dev';
 /**
  * Box Table Container Interface
  */

package/lib/components/box/table-container/index.d.ts

@@ -1,2 +1,2 @@
-import BoxTableContainer from './BoxTableContainer';
+import BoxTableContainer from '../../../components/box/table-container/BoxTableContainer';
 export default BoxTableContainer;

package/lib/components/box/table-container/index.js

@@ -1,3 +1,3 @@
-import BoxTableContainer from './BoxTableContainer';
+import BoxTableContainer from '../../../components/box/table-container/BoxTableContainer';
 export default BoxTableContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxpQkFBaUIsTUFBTSxxQkFBcUIsQ0FBQTtBQUVuRCxlQUFlLGlCQUFpQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxpQkFBaUIsTUFBTSxvREFBb0QsQ0FBQTtBQUVsRixlQUFlLGlCQUFpQixDQUFBIn0=

package/lib/components/breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { BreadcrumbWebProps } from './BreadcrumbProps';
+import React from 'react';
+import { BreadcrumbWebProps } from '../../components/breadcrumb/BreadcrumbProps';
 /**
  * Breadcrumb Component
  * @param children {React.ReactNode} Breadcrumb Children
@@ -8,5 +8,5 @@ import { BreadcrumbWebProps } from './BreadcrumbProps';
  * @param className {string} Additionnal CSS Classes
  * @param accessibilityLabel {string} Accessibility label
  */
-declare const Breadcrumb: ({ children, className, id, accessibilityLabel, ...others }: BreadcrumbWebProps) => React.JSX.Element;
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbWebProps & React.RefAttributes<HTMLElement>>;
 export default Breadcrumb;

package/lib/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 /**
  * Breadcrumb Component
  * @param children {React.ReactNode} Breadcrumb Children
@@ -11,11 +11,11 @@ import { useTrilogyContext } from '../../context';
  * @param className {string} Additionnal CSS Classes
  * @param accessibilityLabel {string} Accessibility label
  */
-var Breadcrumb = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, accessibilityLabel = _a.accessibilityLabel, others = __rest(_a, ["children", "className", "id", "accessibilityLabel"]);
-    var styled = useTrilogyContext().styled;
-    return (React.createElement("nav", __assign({ id: id, role: "navigation", className: hashClass(styled, clsx('breadcrumb', className)), "aria-label": accessibilityLabel }, others),
+var Breadcrumb = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, testId = _a.testId, accessibilityLabel = _a.accessibilityLabel, others = __rest(_a, ["children", "className", "testId", "accessibilityLabel"]);
+    return (React.createElement("nav", __assign({ ref: ref, role: 'navigation', "data-testid": testId, className: hashClass(clsx('breadcrumb', className)), "aria-label": accessibilityLabel }, others),
         React.createElement("ul", null, children)));
-};
+});
+Breadcrumb.displayName = ComponentName.Breadcrumb;
 export default Breadcrumb;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9CcmVhZGNydW1iLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxVQUFDLEVBQThFO0lBQTVFLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsa0JBQWtCLHdCQUFBLEVBQUssTUFBTSxjQUF4RCxxREFBMEQsQ0FBRjtJQUNsRSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxPQUFPLENBQ0wsc0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixJQUFJLEVBQUMsWUFBWSxFQUNqQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLGdCQUMvQyxrQkFBa0IsSUFDMUIsTUFBTTtRQUVWLGdDQUFLLFFBQVEsQ0FBTSxDQUNmLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsVUFBVSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9CcmVhZGNydW1iLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBRXhEOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUFDLEVBQWtGLEVBQUUsR0FBMkI7SUFBN0csSUFBQSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxrQkFBa0Isd0JBQUEsRUFBSyxNQUFNLGNBQTVELHlEQUE4RCxDQUFGO0lBQzNELE9BQU8sQ0FDTCxzQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxZQUFZLGlCQUNKLE1BQU0sRUFDbkIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLGdCQUN2QyxrQkFBa0IsSUFDMUIsTUFBTTtRQUVWLGdDQUFLLFFBQVEsQ0FBTSxDQUNmLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsVUFBVSxDQUFBO0FBQ2pELGVBQWUsVUFBVSxDQUFBIn0=

package/lib/components/breadcrumb/Breadcrumb.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
-import { BreadcrumbProps } from "./BreadcrumbProps";
-import { ComponentName } from "../../components/enumsComponentsName";
+import React from 'react';
+import { View } from 'react-native';
+import { BreadcrumbProps } from '../../components/breadcrumb/BreadcrumbProps';
 /**
  * Breadcrumb Native Component
  * @param children {React.ReactNode} Breadcrumb Children
  * @param testId {string} Test id
  */
-declare const Breadcrumb: {
-    ({ children, testId, ...others }: BreadcrumbProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<View>>;
 export default Breadcrumb;