@trilogy-ds/react 0.0.5-beta-v4 → 0.0.6-alpha-prompt

package/lib/components/box/footer/BoxFooterProps.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-import { Accessibility, Dev, TrilogyColor, TrilogyColorValues } from '../../../objects';
+import { Accessibility } from '../../../objects/facets/Accessibility';
+import { TrilogyColor, TrilogyColorValues } from '../../../objects/facets/Color';
+import { Dev } from '../../../objects/facets/Dev';
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Box Footer Interface
@@ -8,3 +11,5 @@ export interface BoxFooterProps extends Accessibility, Dev, CommonProps {
     children?: React.ReactNode;
     backgroundColor?: TrilogyColor | TrilogyColorValues;
 }
+export type BoxFooterRef = HTMLDivElement;
+export type BoxFooterNativeRef = View;

package/lib/components/box/footer/BoxFooterPropsDefaults.js

@@ -27,7 +27,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -40,9 +42,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -50,7 +55,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "accessibilityLabel": {

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

@@ -1,13 +1,14 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxHeaderProps } from './BoxHeaderProps';
 /**
  * Box Header Component
  * @param children {React.ReactNode} Children
  * @param help {string} Box Header Help Sticker
  * @param variant {TrilogyColor} Box Header backgroundColor
- * @param others
+ * @param align
+ * @param id
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-declare const BoxHeader: ({ children, className, id, align, variant, ...others }: BoxHeaderProps) => JSX.Element;
+declare const BoxHeader: React.ForwardRefExoticComponent<BoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default BoxHeader;

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

@@ -1,20 +1,23 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
-import { has, is } from '../../../services';
-import { getAlignClassName, getBackgroundClassName } from '../../../objects';
+import { hashClass } from '../../../helpers';
+import { getBackgroundClassName } from '../../../objects/atoms/Background';
+import { getAlignClassName } from '../../../objects/facets/Alignable';
+import { has, is } from '../../../services/classify';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * Box Header Component
  * @param children {React.ReactNode} Children
  * @param help {string} Box Header Help Sticker
  * @param variant {TrilogyColor} Box Header backgroundColor
- * @param others
+ * @param align
+ * @param id
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-var BoxHeader = function (_a) {
+var BoxHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, id = _a.id, align = _a.align, variant = _a.variant, others = __rest(_a, ["children", "className", "id", "align", "variant"]);
     var styled = useTrilogyContext().styled;
     var alignClass = null;
@@ -26,7 +29,8 @@ var BoxHeader = function (_a) {
                 null;
     }
     var classes = hashClass(styled, clsx('box-header', className, variant && has(getBackgroundClassName(variant)), align && alignClass));
-    return (React.createElement("div", __assign({ id: id, className: classes }, others), children && typeof children.valueOf() === 'string' ? React.createElement("p", null, children) : children));
-};
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others), children && typeof children.valueOf() === 'string' ? React.createElement("p", null, children) : children));
+});
+BoxHeader.displayName = ComponentName.BoxHeader;
 export default BoxHeader;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvaGVhZGVyL0JveEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUNwQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFckU7Ozs7Ozs7O0dBUUc7QUFFSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBQXNFO0lBQXBFLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUssTUFBTSxjQUFwRCxtREFBc0QsQ0FBRjtJQUM3RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFDckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZ0JBQWdCLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQ3pFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssYUFBYSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDbkUsSUFBSSxDQUFBO0tBQ1A7SUFDRCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsS0FBSyxJQUFJLFVBQVUsQ0FBQyxDQUNwRyxDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ3hDLFFBQVEsSUFBSSxPQUFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLCtCQUFJLFFBQVEsQ0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQzlFLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvaGVhZGVyL0JveEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUc5Qjs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQXNELEVBQUUsR0FBRztJQUF6RCxJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFLLE1BQU0sY0FBcEQsbURBQXNELENBQUY7SUFDM0MsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBSSxVQUFVLEdBQUcsSUFBSSxDQUFBO0lBQ3JCLElBQUksS0FBSyxFQUFFO1FBQ1QsVUFBVTtZQUNSLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZUFBZSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO2dCQUN2RSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO2dCQUN6RSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQ25FLElBQUksQ0FBQTtLQUNQO0lBQ0QsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUFFLEtBQUssSUFBSSxVQUFVLENBQUMsQ0FDcEcsQ0FBQTtJQUVELE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ2xELFFBQVEsSUFBSSxPQUFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLCtCQUFJLFFBQVEsQ0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQzlFLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBQ0QsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBQy9DLGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/box/header/BoxHeader.native.d.ts

@@ -1,18 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { BoxHeaderProps } from './BoxHeaderProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * 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 children {React.ReactNode} Children
  * @param variant {TrilogyColor} Box Header backgroundColor
- * @param others
  */
-declare const BoxHeader: {
-    ({ children, variant, ...others }: BoxHeaderProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const BoxHeader: React.ForwardRefExoticComponent<BoxHeaderProps & React.RefAttributes<View>>;
 export default BoxHeader;

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

@@ -1,21 +1,16 @@
 import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { StatesContext } from '../../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 import * as React from 'react';
 import { 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';
 /**
  * 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 children {React.ReactNode} Children
  * @param variant {TrilogyColor} Box Header backgroundColor
- * @param others
  */
-var BoxHeader = function (_a) {
+var BoxHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, variant = _a.variant, others = __rest(_a, ["children", "variant"]);
     var statesContext = useContext(StatesContext);
     var centered = false;
@@ -52,11 +47,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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2hlYWRlci9Cb3hIZWFkZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDbEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR3JEOzs7O0dBSUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQWdDLEVBQUUsR0FBRztJQUFuQyxJQUFBLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFLLE1BQU0sY0FBOUIsdUJBQWdDLENBQUY7SUFDN0IsSUFBTSxhQUFhLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFBO0lBQy9DLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQTtJQUN0QixJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUE7SUFDeEIsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFBO0lBQ3pCLElBQU0sSUFBSSxHQUFHLEVBQUUsQ0FBQTtJQUVmLElBQU0sU0FBUyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFBO0lBQ3JGLElBQU0sU0FBUyxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUE7SUFFeEQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxLQUFLLEVBQUUsTUFBTTtZQUNiLGVBQWUsRUFBRSxTQUFTO1lBQzFCLE9BQU8sRUFBRSxFQUFFO1lBQ1gsV0FBVyxFQUFFLEVBQUU7WUFDZixtQkFBbUIsRUFBRSxDQUFDO1lBQ3RCLG9CQUFvQixFQUFFLENBQUM7WUFDdkIsU0FBUyxFQUFFLENBQUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDMUUsY0FBYyxFQUFFLGVBQWU7WUFDL0IsVUFBVSxFQUNSLENBQUMsUUFBUSxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLFlBQVksQ0FBQyxJQUFJLFlBQVk7WUFDdkcsYUFBYSxFQUFFLEtBQUs7U0FDckI7UUFDRCxJQUFJLEVBQUU7WUFDSixLQUFLLEVBQUUsU0FBUztZQUNoQixRQUFRLEVBQUUsRUFBRTtZQUNaLFVBQVUsRUFBRSxLQUFLO1NBQ2xCO1FBQ0QsYUFBYSxFQUFFO1lBQ2IsU0FBUyxFQUFFLFFBQVE7U0FDcEI7UUFDRCxJQUFJLEVBQUU7WUFDSixRQUFRLEVBQUUsRUFBRTtZQUNaLEtBQUssRUFBRSxTQUFTO1lBQ2hCLFVBQVUsRUFBRSxLQUFLO1lBQ2pCLFVBQVUsRUFBRSxFQUFFO1NBQ2Y7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFNLE1BQU07UUFDbEQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FDcEQsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxJQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBUSxDQUNwRCxDQUFDLENBQUMsQ0FBQyxDQUNGLFFBQVEsQ0FDVDtRQUVBLElBQUksSUFBSSxDQUNQLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLGFBQWE7WUFDL0Isb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxJQUFHLElBQUksQ0FBUSxDQUNsQyxDQUNSLENBQ0ksQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==

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

@@ -2,9 +2,14 @@
 /**
  * Box Header Interface
  */
-import { Accessibility, AlignableProps, TrilogyColor, TrilogyColorValues } from '../../../objects';
+import { Accessibility } from '../../../objects/facets/Accessibility';
+import { AlignableProps } from '../../../objects/facets/Alignable';
+import { TrilogyColor, TrilogyColorValues } from '../../../objects/facets/Color';
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 export interface BoxHeaderProps extends AlignableProps, Accessibility, CommonProps {
     children?: React.ReactNode;
     variant?: TrilogyColor | TrilogyColorValues;
 }
+export type BoxHeaderRef = HTMLDivElement;
+export type BoxHeaderNativeRef = View;

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

@@ -27,7 +27,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -40,9 +42,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -50,7 +55,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "align": {
@@ -60,9 +66,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "verticalAlign": {
@@ -72,9 +88,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "accessibilityLabel": {

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxItemProps } from './BoxItemProps';
 /**
  * Box Item Component
  * @param children {React.ReactNode} Children
  * @param size {BoxItemSize} SMALL|MEDIUM|LARGE|HUGE
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional 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,19 +1,21 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * Box Item Component
  * @param children {React.ReactNode} Children
  * @param size {BoxItemSize} SMALL|MEDIUM|LARGE|HUGE
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-var BoxItem = function (_a) {
+var BoxItem = React.forwardRef(function (_a, ref) {
     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));
-};
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: hashClass(styled, clsx('box-item', className)) }, others), children));
+});
+BoxItem.displayName = ComponentName.BoxItem;
 export default BoxItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2l0ZW0vQm94SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQW9EO0lBQWxELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFwQywrQkFBc0MsQ0FBRjtJQUMzQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQU0sTUFBTSxHQUMvRSxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2l0ZW0vQm94SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUc5Qjs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUFDLEVBQXNDLEVBQUUsR0FBRztJQUF6QyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBcEMsK0JBQXNDLENBQUY7SUFDM0IsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQU0sTUFBTSxHQUN6RixRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==

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 * as React from 'react';
+import { View } from 'react-native';
+import { BoxItemProps } from './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 { ComponentName } from '../../../components/enumsComponentsName';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 /**
  * 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SXRlbS5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9pdGVtL0JveEl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRy9DOzs7O0dBSUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFpQyxVQUFDLEVBQTZCLEVBQUUsR0FBRztJQUFoQyxJQUFBLFFBQVEsY0FBQSxFQUFFLElBQUksVUFBQSxFQUFLLE1BQU0sY0FBM0Isb0JBQTZCLENBQUY7SUFDM0YsSUFBTSxNQUFNLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQTtJQUNqQyxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE9BQU8sRUFBRTtZQUNQLE1BQU0sRUFBRSxNQUFNO1lBQ2QsVUFBVSxFQUFFLFFBQVE7WUFDcEIsWUFBWSxFQUFFLFFBQVE7WUFDdEIsUUFBUSxFQUFFLE1BQU07WUFDaEIsSUFBSSxFQUFFLENBQUM7U0FDUjtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLElBQU0sTUFBTSxHQUNoRCxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFFM0MsZUFBZSxPQUFPLENBQUEifQ==

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import { BoxItemSize, BoxItemSizeValues } from './BoxItemEnum';
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { BoxItemSize, BoxItemSizeValues } from './BoxItemEnum';
 export interface BoxItemProps extends CommonProps {
     children?: React.ReactNode;
     size?: BoxItemSize | BoxItemSizeValues;
 }
+export type BoxItemRef = HTMLDivElement;
+export type BoxItemNativeRef = View;

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { BoxTableContainerProps } from "./BoxTableContainerProps";
+import * as React from 'react';
+import { BoxTableContainerProps } from './BoxTableContainerProps';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Children
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional 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,19 +1,21 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import clsx from "clsx";
-import { hashClass } from "../../../helpers";
-import { useTrilogyContext } from "../../../context";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Children
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional 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({ ref: ref, "data-testid": testId, className: hashClass(styled, clsx('box table-container', className)) }, others)));
+});
+BoxTableContainer.displayName = ComponentName.BoxTableContainer;
 export default BoxTableContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvQm94VGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7OztHQU1HO0FBQ0gsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEVBSUY7SUFIdkIsSUFBQSxTQUFTLGVBQUEsRUFDVCxNQUFNLFlBQUEsRUFDSCxNQUFNLGNBSGdCLHVCQUkxQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHFEQUNlLE1BQU0sRUFDbkIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLHFCQUFxQixFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQ2hFLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLGlCQUFpQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC90YWJsZS1jb250YWluZXIvQm94VGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7OztHQU1HO0FBQ0gsSUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUN4QyxVQUFDLEVBQWdDLEVBQUUsR0FBRztJQUFuQyxJQUFBLFNBQVMsZUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBOUIsdUJBQWdDLENBQUY7SUFDckIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEdBQUcsRUFBRSxHQUFHLGlCQUNLLE1BQU0sRUFDbkIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLHFCQUFxQixFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQ2hFLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUNELGlCQUFpQixDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsaUJBQWlCLENBQUE7QUFDL0QsZUFBZSxpQkFBaUIsQ0FBQSJ9

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 * as React from 'react';
+import { View } from 'react-native';
+import { BoxTableContainerProps } from './BoxTableContainerProps';
 /**
  * Box Table Component
  * @param children {React.ReactNode} Childrens
  */
-declare const boxTableContainer: {
-    ({ children, ...others }: BoxTableContainerProps): JSX.Element;
-    displayName: ComponentName;
-};
+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 { ComponentName } from '../../../components/enumsComponentsName';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 /**
  * 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;
+    return (React.createElement(View, __assign({ ref: ref, style: [styles.boxTableContainer] }, others), children));
+});
+boxTableContainer.displayName = ComponentName.BoxTableContainer;
 export default boxTableContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvdGFibGUtY29udGFpbmVyL0JveFRhYmxlQ29udGFpbmVyLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7O0dBR0c7QUFDSCxJQUFNLGlCQUFpQixHQUFHLFVBQUMsRUFHRjtJQUZ2QixJQUFBLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FGZ0IsWUFHMUIsQ0FEVTtJQUVULElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsaUJBQWlCLEVBQUUsRUFBRTtLQUN0QixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxJQUFNLE1BQU0sR0FDaEQsUUFBUSxDQUNKLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGlCQUFpQixDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRXZELGVBQWUsaUJBQWlCLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94VGFibGVDb250YWluZXIubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvdGFibGUtY29udGFpbmVyL0JveFRhYmxlQ29udGFpbmVyLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUcvQzs7O0dBR0c7QUFDSCxJQUFNLGlCQUFpQixHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3hDLFVBQUMsRUFBdUIsRUFBRSxHQUFHO0lBQTFCLElBQUEsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFyQixZQUF1QixDQUFGO0lBQ3BCLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsaUJBQWlCLEVBQUUsRUFBRTtLQUN0QixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLElBQU0sTUFBTSxHQUMxRCxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxpQkFBaUIsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLGlCQUFpQixDQUFBO0FBRS9ELGVBQWUsaUJBQWlCLENBQUEifQ==

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Accessibility, Dev } from '../../../objects';
+import { View } from 'react-native';
 /**
  * Box Table Container Interface
  */
@@ -7,3 +8,5 @@ export interface BoxTableContainerProps extends Accessibility, Dev {
     children?: string | React.ReactNode;
     className?: string;
 }
+export type BoxTableContainerRef = HTMLDivElement;
+export type BoxTableContainerNativeRef = View;

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

@@ -5,8 +5,8 @@ import { BreadcrumbWebProps } from './BreadcrumbProps';
  * @param children {React.ReactNode} Breadcrumb Children
  * @param testId {string} Test id
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional 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,21 +1,24 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import translation from '@trilogy-ds/locales/lib/breadcrumb';
+import clsx from 'clsx';
+import * as React from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Breadcrumb Component
  * @param children {React.ReactNode} Breadcrumb Children
  * @param testId {string} Test id
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional 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 Breadcrumb = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, id = _a.id, others = __rest(_a, ["children", "className", "id"]);
     var styled = useTrilogyContext().styled;
-    return (React.createElement("nav", __assign({ id: id, role: "navigation", className: hashClass(styled, clsx('breadcrumb', className)), "aria-label": accessibilityLabel }, others),
+    return (React.createElement("nav", __assign({ ref: ref, id: id, role: 'navigation', className: hashClass(styled, clsx('breadcrumb', className)), "aria-label": translation.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9CcmVhZGNydW1iLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLFdBQVcsTUFBTSxvQ0FBb0MsQ0FBQTtBQUM1RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBR3REOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUFDLEVBQXNDLEVBQUUsR0FBRztJQUF6QyxJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFLLE1BQU0sY0FBcEMsK0JBQXNDLENBQUY7SUFDM0IsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEdBQUcsRUFBRSxHQUFHLEVBQ1IsRUFBRSxFQUFFLEVBQUUsRUFDTixJQUFJLEVBQUMsWUFBWSxFQUNqQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLGdCQUMvQyxXQUFXLENBQUMsa0JBQWtCLElBQ3RDLE1BQU07UUFFVixnQ0FBSyxRQUFRLENBQU0sQ0FDZixDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUNELFVBQVUsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFVBQVUsQ0FBQTtBQUNqRCxlQUFlLFVBQVUsQ0FBQSJ9

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 * as React from 'react';
+import { View } from 'react-native';
+import { BreadcrumbProps } from './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;