@trilogy-ds/react 0.0.7-beta-v4 → 0.0.8-alpha-prompt

package/lib/components/box/Box.native.js

@@ -1,10 +1,11 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { useState } from "react";
-import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View, } from "react-native";
-import { getColorStyle, TrilogyColor, } from "../../objects/facets/Color";
-import ContentLoader, { Rect } from "react-content-loader/native";
-import { ComponentName } from "../../components/enumsComponentsName";
-import { StatesContext } from "../../context/providerStates";
+import { __read, __rest } from "tslib";
+import { BoxContext } from '../../components/box/context/boxContext';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { StatesContext } from '../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import React, { useState } from 'react';
+import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Skeleton } from '../skeleton';
 /**
  * Box Component
  * @param children {React.ReactNode} Childrens
@@ -23,31 +24,28 @@ import { StatesContext } from "../../context/providerStates";
  * @param active {boolean} Activated box
  * @param others
  */
-var Box = function (_a) {
+var Box = React.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick, skeleton = _a.skeleton, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, others = __rest(_a, ["children", "onClick", "skeleton", "highlighted", "shadowless", "backgroundColor", "backgroundSrc", "inverted", "flat", "headerOffset", "fullheight", "active"]);
     var colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
     var _b = __read(useState(0), 2), boxHeight = _b[0], setBoxHeight = _b[1];
     var boxRadius = 6;
     var styles = StyleSheet.create({
         box: {
-            width: "100%",
+            width: '100%',
             backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
             borderRadius: boxRadius,
-            flexDirection: "row",
-            justifyContent: "flex-start",
-            position: "relative",
-            borderStyle: flat ? "solid" : undefined,
+            justifyContent: 'flex-start',
+            position: 'relative',
+            borderStyle: flat ? 'solid' : undefined,
             borderWidth: (flat && 1) || (active && 2) || 0,
-            borderColor: active
-                ? getColorStyle(TrilogyColor.MAIN)
-                : getColorStyle(TrilogyColor.NEUTRAL),
+            borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL),
             marginTop: headerOffset ? 35 : 0,
             flex: fullheight ? 1 : 0,
         },
         shadow: shadowless
             ? {}
             : {
-                shadowColor: "#000",
+                shadowColor: '#000',
                 shadowOffset: {
                     width: 0,
                     height: 1,
@@ -57,73 +55,60 @@ var Box = function (_a) {
                 elevation: 1,
             },
         skeleton: {
-            width: "100%",
+            width: '100%',
             minHeight: 50,
             backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
-            overflow: "hidden",
+            overflow: 'hidden',
             borderRadius: boxRadius,
         },
         highlighted: {
-            position: "absolute",
+            position: 'absolute',
             width: 8,
             borderTopStartRadius: boxRadius,
             borderBottomStartRadius: boxRadius,
             height: boxHeight,
             backgroundColor: highlighted ? getColorStyle(highlighted) : 'transparent',
         },
-        column: {
-            flexDirection: "column",
-            width: "100%",
-        },
         boxImage: {
-            width: "100%",
+            width: '100%',
             minHeight: 100,
             maxHeight: 300,
-            height: "auto",
+            height: 'auto',
         },
-        boxImageProps: {},
         content: {
             padding: 16,
         },
     });
-    var boxTestId = "NotSpecified";
-    var BoxSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others, { testID: 'skeleton' }),
-        React.createElement(View, { style: { opacity: 0 } }, children),
-        Platform.OS === "android" && (React.createElement(View, null,
-            React.createElement(Rect, { rx: '10', ry: '10', width: '100%', height: '100%' }))))); };
+    var boxTestId = 'NotSpecified';
+    var BoxSkeleton = function () { return (React.createElement(Skeleton, { style: styles.skeleton, width: '100%', height: 50, borderRadius: boxRadius, testID: 'skeleton' }, children)); };
     if (skeleton) {
         return React.createElement(BoxSkeleton, null);
     }
     if (onClick) {
-        return (React.createElement(TouchableOpacity, { onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], onLayout: function (event) {
+        return (React.createElement(BoxContext.Provider, { value: { fullHeight: fullheight || false } },
+            React.createElement(TouchableOpacity, { ref: ref, onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
+                    setBoxHeight(height);
+                }, testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
+                Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
+                React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))) : (React.createElement(React.Fragment, null,
+                Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
+                React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))))));
+    }
+    return (React.createElement(BoxContext.Provider, { value: { fullHeight: fullheight || false } },
+        React.createElement(View, { ref: ref, onLayout: function (event) {
                 var height = event.nativeEvent.layout.height;
                 setBoxHeight(height);
-            }, testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === "number"
-                ? backgroundSrc
-                : { uri: backgroundSrc } },
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
             Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
-            React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
-                React.createElement(View, { style: styles.column }, children)))) : (React.createElement(React.Fragment, null,
+            React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
             Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
-            React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
-                React.createElement(View, { style: styles.column }, children))))));
-    }
-    return (React.createElement(View, { onLayout: function (event) {
-            var height = event.nativeEvent.layout.height;
-            setBoxHeight(height);
-        }, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === "number"
-            ? backgroundSrc
-            : { uri: backgroundSrc } },
-        Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
-        React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
-            React.createElement(View, { style: styles.column }, children)))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
-        Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
-        React.createElement(View, { style: styles.column }, children)))));
-};
+            children)))));
+});
 Box.displayName = ComponentName.Box;
 export default Box;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYm94L0JveC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxHQUFHLE1BQU0sY0FBYyxDQUFBO0FBRTdGLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxHQUF1QixNQUFNLHdCQUF3QixDQUFBO0FBQ3pGLE9BQU8sYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUV4RDs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUFDLEVBY0Y7SUFiVCxJQUFBLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxVQUFVLGdCQUFBLEVBQ1YsZUFBZSxxQkFBQSxFQUNmLGFBQWEsbUJBQUEsRUFDYixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixZQUFZLGtCQUFBLEVBQ1osVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FiRSxnS0FjWixDQURVO0lBRVQsSUFBTSxRQUFRLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUNqRCxJQUFBLEtBQUEsT0FBNEIsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLFNBQVMsUUFBQSxFQUFFLFlBQVksUUFBZSxDQUFBO0lBQzdDLElBQU0sU0FBUyxHQUFHLENBQUMsQ0FBQTtJ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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYm94L0JveC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBc0IsTUFBTSx3QkFBd0IsQ0FBQTtBQUN4RixPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDbEYsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQTtBQUV0Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMxQixVQUNFLEVBY0MsRUFDRCxHQUFHO0lBZEQsSUFBQSxRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixXQUFXLGlCQUFBLEVBQ1gsVUFBVSxnQkFBQSxFQUNWLGVBQWUscUJBQUEsRUFDZixhQUFhLG1CQUFBLEVBQ2IsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osWUFBWSxrQkFBQSxFQUNaLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDSCxNQUFNLGNBYlgsZ0tBY0MsQ0FEVTtJQUlYLElBQU0sUUFBUSxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUE7SUFDakQsSUFBQSxLQUFBLE9BQTRCLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUF0QyxTQUFTLFFBQUEs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

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import { Accessibility, Clickable, Fullheight, Dev } from '../../objects';
+import { TouchableOpacity, type View } from 'react-native';
 import { BackgroundProps } from '../../objects/atoms/Background';
+import { Accessibility } from '../../objects/facets/Accessibility';
+import { Clickable } from '../../objects/facets/Clickable';
 import { TrilogyColor, TrilogyColorValues } from '../../objects/facets/Color';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { Dev } from '../../objects/facets/Dev';
+import { Fullheight } from '../../objects/facets/Fullheight';
 /**
  * Box Interface
  */
@@ -17,4 +21,7 @@ export interface BoxProps extends BackgroundProps, Clickable, Fullheight, Access
     flat?: boolean;
     active?: boolean;
     inverted?: boolean;
+    blank?: boolean;
 }
+export type BoxRef = HTMLDivElement;
+export type BoxNativeRef = View | TouchableOpacity;

package/lib/components/box/BoxPropsDefaults.js

@@ -42,7 +42,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -55,9 +57,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -65,7 +70,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "shadowless": {
@@ -115,6 +121,14 @@ export default {
       "true"
     ]
   },
+  "blank": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "backgroundColor": {
     "type": "enum",
     "values": [
@@ -129,7 +143,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -142,9 +158,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -152,7 +171,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "onClick": {

package/lib/components/box/content/BoxContent.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxContentProps } from './BoxContentProps';
 /**
  * Box Content
  * @param children {React.ReactNode} Box Content Children
  * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param backgroundSrc {string} Source of background Image
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param testId test id
  */
-declare const BoxContent: ({ children, className, id, backgroundColor, ...others }: BoxContentProps) => JSX.Element;
+declare const BoxContent: React.ForwardRefExoticComponent<BoxContentProps & React.RefAttributes<HTMLDivElement>>;
 export default BoxContent;

package/lib/components/box/content/BoxContent.js

@@ -1,23 +1,30 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { has } from '../../../services/classify';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
 import { getBackgroundClassName } from '../../../objects/atoms/Background';
+import { has } from '../../../services/classify';
 import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from 'react';
 /**
  * Box Content
  * @param children {React.ReactNode} Box Content Children
  * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param backgroundSrc {string} Source of background Image
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param testId test id
  */
-var BoxContent = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "className", "id", "backgroundColor"]);
+var BoxContent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, id = _a.id, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, others = __rest(_a, ["children", "className", "id", "backgroundColor", "backgroundSrc"]);
     var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('box-content', backgroundColor && has(getBackgroundClassName(backgroundColor)), className));
-    return (React.createElement("div", __assign({ id: id, className: classes }, others), children));
-};
+    var classes = hashClass(styled, clsx('box-content', backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), className));
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, (backgroundSrc && {
+        style: {
+            backgroundImage: "url(".concat(backgroundSrc, ")"),
+        },
+    }), others), children));
+});
+BoxContent.displayName = ComponentName.BoxContent;
 export default BoxContent;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Q29udGVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2NvbnRlbnQvQm94Q29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7R0FPRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBd0U7SUFBdEUsSUFBQSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUssTUFBTSxjQUFyRCxrREFBdUQsQ0FBRjtJQUMvRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQUMsYUFBYSxFQUFFLGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDaEcsQ0FBQTtJQUNELE9BQU8sQ0FDTCxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxHQUN4QyxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Q29udGVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2NvbnRlbnQvQm94Q29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDekMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDakMsVUFBQyxFQUFzRSxFQUFFLEdBQUc7SUFBekUsSUFBQSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sY0FBcEUsbUVBQXNFLENBQUY7SUFDM0QsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLGFBQWEsRUFDYixlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLEVBQy9ELGFBQWEsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ2xDLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFDRCxPQUFPLENBQ0wsc0NBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxPQUFPLElBQ2QsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFO1lBQ0wsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHO1NBQ3pDO0tBQ0YsQ0FBQyxFQUNFLE1BQU0sR0FFVCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxVQUFVLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUE7QUFDakQsZUFBZSxVQUFVLENBQUEifQ==

package/lib/components/box/content/BoxContent.native.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
-import { BoxContentProps } from "./BoxContentProps";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import { BoxContentProps } from '../../../components/box/content/BoxContentProps';
+import * as React from 'react';
+import { View } from 'react-native';
 /**
  * Box Content Component
  * @param children {React.ReactNode} Childrens
  * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param backgroundSrc {string} Source of background Image
  */
-declare const BoxContent: {
-    ({ children, backgroundColor, ...others }: BoxContentProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const BoxContent: React.ForwardRefExoticComponent<BoxContentProps & React.RefAttributes<View>>;
 export default BoxContent;

package/lib/components/box/content/BoxContent.native.js

@@ -1,25 +1,34 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { ComponentName } from "../../../components/enumsComponentsName";
-import { getColorStyle } from "../../../objects";
+import { BoxContext } from '../../../components/box/context/boxContext';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle } from '../../../objects/facets/Color';
+import * as React from 'react';
+import { StyleSheet, Text, View, ImageBackground } from 'react-native';
 /**
  * Box Content Component
  * @param children {React.ReactNode} Childrens
  * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param backgroundSrc {string} Source of background Image
  */
-var BoxContent = function (_a) {
-    var children = _a.children, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "backgroundColor"]);
+var BoxContent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc"]);
+    var fullHeight = React.useContext(BoxContext).fullHeight;
     var styles = StyleSheet.create({
         boxContent: {
             padding: 16,
-            justifyContent: "center",
-            backgroundColor: backgroundColor && getColorStyle(backgroundColor) || "transparent",
+            backgroundColor: (backgroundColor && getColorStyle(backgroundColor)) || 'transparent',
             borderRadius: 6,
+            flex: fullHeight ? 1 : undefined,
         },
     });
-    return (React.createElement(View, __assign({ style: [styles.boxContent] }, others), children && typeof children.valueOf() === "string" ? (React.createElement(Text, null, children)) : (children)));
-};
+    var content = (React.createElement(View, __assign({ ref: ref, style: [styles.boxContent] }, others), children && typeof children.valueOf() === 'string' ? React.createElement(Text, null, children) : children));
+    if (backgroundSrc) {
+        return (React.createElement(ImageBackground, { source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: { flex: 1 }, imageStyle: { borderRadius: 6 } }, content));
+    }
+    else {
+        return content;
+    }
+});
 BoxContent.displayName = ComponentName.BoxContent;
 export default BoxContent;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Q29udGVudC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9jb250ZW50L0JveENvbnRlbnQubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXJELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXpDOzs7O0dBSUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxVQUFDLEVBSUY7SUFIaEIsSUFBQSxRQUFRLGNBQUEsRUFDUixlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQUhTLCtCQUluQixDQURVO0lBRVQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixVQUFVLEVBQUU7WUFDVixPQUFPLEVBQUUsRUFBRTtZQUNYLGNBQWMsRUFBRSxRQUFRO1lBQ3hCLGVBQWUsRUFBRSxlQUFlLElBQUksYUFBYSxDQUFDLGVBQWUsQ0FBQyxJQUFJLGFBQWE7WUFDbkYsWUFBWSxFQUFFLENBQUM7U0FDaEI7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBTSxNQUFNLEdBQ3pDLFFBQVEsSUFBSSxPQUFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLElBQUksUUFBRSxRQUFRLENBQVEsQ0FDeEIsQ0FBQyxDQUFDLENBQUMsQ0FDRixRQUFRLENBQ1QsQ0FDSSxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxVQUFVLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUE7QUFFakQsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Q29udGVudC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9jb250ZW50L0JveENvbnRlbnQubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDdEQsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLGVBQWUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV0RTs7Ozs7R0FLRztBQUNILElBQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ2pDLFVBQUMsRUFBdUQsRUFBRSxHQUFHO0lBQTFELElBQUEsUUFBUSxjQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBSyxNQUFNLGNBQXJELGdEQUF1RCxDQUFGO0lBQzVDLElBQUEsVUFBVSxHQUFLLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLFdBQWpDLENBQWlDO0lBRW5ELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsVUFBVSxFQUFFO1lBQ1YsT0FBTyxFQUFFLEVBQUU7WUFDWCxlQUFlLEVBQUUsQ0FBQyxlQUFlLElBQUksYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLElBQUksYUFBYTtZQUNyRixZQUFZLEVBQUUsQ0FBQztZQUNmLElBQUksRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUztTQUNqQztLQUNGLENBQUMsQ0FBQTtJQUVGLElBQU0sT0FBTyxHQUFHLENBQ2Qsb0JBQUMsSUFBSSxhQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFNLE1BQU0sR0FDbkQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsb0JBQUMsSUFBSSxRQUFFLFFBQVEsQ0FBUSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQ25GLENBQ1IsQ0FBQTtJQUVELElBQUksYUFBYSxFQUFFO1FBQ2pCLE9BQU8sQ0FDTCxvQkFBQyxlQUFlLElBQUMsTUFBTSxFQUFFLE9BQU8sYUFBYSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxhQUFhLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUUsVUFBVSxFQUFFLEVBQUUsWUFBWSxFQUFFLENBQUMsRUFBRSxJQUNySixPQUFPLENBQ1EsQ0FDbkIsQ0FBQTtLQUNGO1NBQU07UUFDTCxPQUFPLE9BQU8sQ0FBQTtLQUNmO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxVQUFVLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUE7QUFFakQsZUFBZSxVQUFVLENBQUEifQ==

package/lib/components/box/content/BoxContentProps.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { Accessibility, Dev } from '../../../objects';
+import { View } from 'react-native';
 import { BackgroundProps } from '../../../objects/atoms/Background';
+import { Accessibility } from '../../../objects/facets/Accessibility';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { Dev } from '../../../objects/facets/Dev';
 /**
  * Box Content Interface
  */
 export interface BoxContentProps extends BackgroundProps, Accessibility, Dev, CommonProps {
     children?: React.ReactNode;
 }
+export type BoxContentRef = HTMLDivElement;
+export type BoxContentNativeRef = View;

package/lib/components/box/content/BoxContentPropsDefaults.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"
     ]
   },
   "backgroundSrc": {

package/lib/components/box/context/boxContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const BoxContext: React.Context<{
+    fullHeight: boolean;
+}>;

package/lib/components/box/context/boxContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var BoxContext = React.createContext({ fullHeight: false });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94Q29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2NvbnRleHQvYm94Q29udGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE1BQU0sQ0FBQyxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUEifQ==

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

@@ -1,13 +1,12 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxFooterProps } from './BoxFooterProps';
 /**
  * Box Footer Component
  * @param children {React.ReactNode} Children
  * @param backgroundColor {TrilogyColor} Background for BoxFooter
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param id
- * @param others
  */
-declare const BoxFooter: ({ className, children, backgroundColor, id, ...others }: BoxFooterProps) => JSX.Element;
+declare const BoxFooter: React.ForwardRefExoticComponent<BoxFooterProps & React.RefAttributes<HTMLDivElement>>;
 export default BoxFooter;

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

@@ -1,23 +1,24 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { getBackgroundClassName } from '../../../objects';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
+import { getBackgroundClassName } from '../../../objects/atoms/Background';
 import { has } from '../../../services/classify';
 import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from 'react';
 /**
  * Box Footer Component
  * @param children {React.ReactNode} Children
  * @param backgroundColor {TrilogyColor} Background for BoxFooter
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param id
- * @param others
  */
-var BoxFooter = function (_a) {
+var BoxFooter = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, backgroundColor = _a.backgroundColor, id = _a.id, others = __rest(_a, ["className", "children", "backgroundColor", "id"]);
     var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('box-footer', backgroundColor && has(getBackgroundClassName(backgroundColor)), className)) }, others), children));
-};
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: hashClass(styled, clsx('box-footer', backgroundColor && has(getBackgroundClassName(backgroundColor)), className)) }, others), children));
+});
+BoxFooter.displayName = ComponentName.BoxFooter;
 export default BoxFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Rm9vdGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvZm9vdGVyL0JveEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDekMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsVUFBQyxFQUF1RTtJQUFyRSxJQUFBLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxFQUFFLFFBQUEsRUFBSyxNQUFNLGNBQXJELGtEQUF1RCxDQUFGO0lBQzlELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLE9BQU8sQ0FDTCxzQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxTQUFTLENBQ2xCLE1BQU0sRUFDTixJQUFJLENBQUMsWUFBWSxFQUFFLGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDL0YsSUFDRyxNQUFNLEdBRVQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Rm9vdGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvZm9vdGVyL0JveEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDekMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQXVELEVBQUUsR0FBRztJQUExRCxJQUFBLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxFQUFFLFFBQUEsRUFBSyxNQUFNLGNBQXJELGtEQUF1RCxDQUFGO0lBQzVDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLE9BQU8sQ0FDTCxzQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxZQUFZLEVBQUUsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUMvRixJQUNHLE1BQU0sR0FFVCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFDL0MsZUFBZSxTQUFTLENBQUEifQ==

package/lib/components/box/footer/BoxFooter.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
-import { BoxFooterProps } from "./BoxFooterProps";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import * as React from 'react';
+import { View } from 'react-native';
+import { BoxFooterProps } from './BoxFooterProps';
 /**
  * Box Footer Component
  * @param children {React.ReactNode} Childrens
  * @param backgroundColor {TrilogyColor} Background for BoxFooter
  */
-declare const BoxFooter: {
-    ({ children, backgroundColor, ...others }: BoxFooterProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const BoxFooter: React.ForwardRefExoticComponent<BoxFooterProps & React.RefAttributes<View>>;
 export default BoxFooter;

package/lib/components/box/footer/BoxFooter.native.js

@@ -1,29 +1,27 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { getColorStyle } from "../../../objects";
-import { ComponentName } from "../../../components/enumsComponentsName";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle } from '../../../objects';
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 /**
  * Box Footer Component
  * @param children {React.ReactNode} Childrens
  * @param backgroundColor {TrilogyColor} Background for BoxFooter
  */
-var BoxFooter = function (_a) {
+var BoxFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "backgroundColor"]);
     var boxRadius = 6;
     var styles = StyleSheet.create({
         boxFooter: {
             padding: 12,
-            justifyContent: "center",
-            backgroundColor: backgroundColor
-                ? getColorStyle(backgroundColor)
-                : "transparent",
+            justifyContent: 'center',
+            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : 'transparent',
             borderBottomLeftRadius: boxRadius,
             borderBottomRightRadius: boxRadius,
         },
     });
-    return (React.createElement(View, __assign({ style: [styles.boxFooter] }, others), children && typeof children.valueOf() === "string" ? (React.createElement(Text, null, String(children))) : (children)));
-};
+    return (React.createElement(View, __assign({ ref: ref, style: [styles.boxFooter] }, others), children && typeof children.valueOf() === 'string' ? React.createElement(Text, null, String(children)) : children));
+});
 BoxFooter.displayName = ComponentName.BoxFooter;
 export default BoxFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Rm9vdGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2Zvb3Rlci9Cb3hGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ3JELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFekMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFOzs7O0dBSUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBSUY7SUFIZixJQUFBLFFBQVEsY0FBQSxFQUNSLGVBQWUscUJBQUEsRUFDWixNQUFNLGNBSFEsK0JBSWxCLENBRFU7SUFFVCxJQUFNLFNBQVMsR0FBRyxDQUFDLENBQUE7SUFFbkIsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxPQUFPLEVBQUUsRUFBRTtZQUNYLGNBQWMsRUFBRSxRQUFRO1lBQ3hCLGVBQWUsRUFBRSxlQUFlO2dCQUM5QixDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQztnQkFDaEMsQ0FBQyxDQUFDLGFBQWE7WUFDakIsc0JBQXNCLEVBQUUsU0FBUztZQUNqQyx1QkFBdUIsRUFBRSxTQUFTO1NBQ25DO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQU0sTUFBTSxHQUN4QyxRQUFRLElBQUksT0FBTyxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUNwRCxvQkFBQyxJQUFJLFFBQUUsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFRLENBQ2hDLENBQUMsQ0FBQyxDQUFDLENBQ0YsUUFBUSxDQUNULENBQ0ksQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRS9DLGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Rm9vdGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2Zvb3Rlci9Cb3hGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDekMsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR3JEOzs7O0dBSUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQXdDLEVBQUUsR0FBRztJQUEzQyxJQUFBLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBSyxNQUFNLGNBQXRDLCtCQUF3QyxDQUFGO0lBQ3JDLElBQU0sU0FBUyxHQUFHLENBQUMsQ0FBQTtJQUVuQixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFNBQVMsRUFBRTtZQUNULE9BQU8sRUFBRSxFQUFFO1lBQ1gsY0FBYyxFQUFFLFFBQVE7WUFDeEIsZUFBZSxFQUFFLGVBQWUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhO1lBQ2pGLHNCQUFzQixFQUFFLFNBQVM7WUFDakMsdUJBQXVCLEVBQUUsU0FBUztTQUNuQztLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQU0sTUFBTSxHQUNsRCxRQUFRLElBQUksT0FBTyxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxvQkFBQyxJQUFJLFFBQUUsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FDM0YsQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==