@trilogy-ds/react 0.0.3-beta-v4 → 0.0.3-fix-timepicker

package/lib/components/flex-box/flex-item/FlexItem.js

@@ -0,0 +1,42 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../../objects/facets/Alignable';
+import { is } from '../../../services/classify';
+import clsx from 'clsx';
+import React from 'react';
+/**
+ * FlexItem Component - FlexBox Child
+ * @param size {FlexItemSize} Size 1-12
+ * @param verticalCentered {boolean} Vertical center item
+ * @param centered {boolean} center item
+ * @param children {React.ReactNode}
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param narrow {boolean} Narrow item
+ * @param className {string} Additional CSS Classes
+ * @param mobileSize {FlexItemSize} Apply => is-size-mobile
+ * @param tabletSize {FlexItemSize} Apply => is-size-tablet
+ * @param touchSize {FlexItemSize} Apply => is-size-touch
+ * @param desktopSize {FlexItemSize} Apply => is-size-desktop
+ * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
+ * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
+ * @param offset {FlexItemSize} Apply => is-offset
+ * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
+ * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
+ * @param touchOffset {FlexItemSize} Apply => is-offset-touch
+ * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
+ * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
+ * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
+ * @param align { Alignable | AlignableValues} align content
+ */
+var FlexItem = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, size = _a.size, narrow = _a.narrow, verticalAlign = _a.verticalAlign, testId = _a.testId, others = __rest(_a, ["className", "id", "size", "narrow", "verticalAlign", "testId"]);
+    var styled = useTrilogyContext().styled;
+    var isNumber = typeof size === 'number';
+    var classes = hashClass(styled, clsx('flex-item', size && isNumber && is("".concat(size)), size && !isNumber && (size === null || size === void 0 ? void 0 : size.desktop) && is("".concat(size.desktop, "-desktop")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.mobile) && is("".concat(size.mobile, "-mobile")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.tablet) && is("".concat(size.tablet, "-tablet")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.touch) && is("".concat(size.touch, "-touch")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.widescreen) && is("".concat(size.widescreen, "-widescreen")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.fullhd) && is("".concat(size.fullhd, "-fullhd")), narrow && is('narrow'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-testid": testId }, others));
+});
+FlexItem.displayName = ComponentName.FlexItem;
+export default FlexItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2ZsZXgtaXRlbS9GbGV4SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUVILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQy9CLFVBQUMsRUFBaUUsRUFBRSxHQUFHO0lBQXBFLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBL0QsZ0VBQWlFLENBQUY7SUFDdEQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxJQUFJLEtBQUssUUFBUSxDQUFBO0lBQ3pDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixXQUFXLEVBQ1gsSUFBSSxJQUFJLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxFQUNqQyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE9BQU8sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxPQUFPLGFBQVUsQ0FBQyxFQUNuRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLEtBQUssQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxLQUFLLFdBQVEsQ0FBQyxFQUM3RCxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFVBQVUsQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxVQUFVLGdCQUFhLENBQUMsRUFDNUUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxNQUFNLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8saUJBQWUsTUFBTSxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ3ZGLENBQUMsQ0FDRixDQUFBO0FBQ0QsUUFBUSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsUUFBUSxDQUFBO0FBQzdDLGVBQWUsUUFBUSxDQUFBIn0=

package/lib/components/flex-box/flex-item/FlexItem.native.d.ts

@@ -0,0 +1,29 @@
+import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemProps';
+import React from 'react';
+import { View } from 'react-native';
+/**
+ * FlexItem Component - FlexBox Child
+ * @param size {FlexItemSize} Size 1-12
+ * @param verticalCentered {boolean} Vertical center item
+ * @param centered {boolean} center item
+ * @param children {React.ReactNode}
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param narrow {boolean} Narrow item
+ * @param className {string} Additional CSS Classes
+ * @param mobileSize {FlexItemSize} Apply => is-size-mobile
+ * @param tabletSize {FlexItemSize} Apply => is-size-tablet
+ * @param touchSize {FlexItemSize} Apply => is-size-touch
+ * @param desktopSize {FlexItemSize} Apply => is-size-desktop
+ * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
+ * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
+ * @param offset {FlexItemSize} Apply => is-offset
+ * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
+ * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
+ * @param touchOffset {FlexItemSize} Apply => is-offset-touch
+ * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
+ * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
+ * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
+ * @param align { Alignable | AlignableValues} align content
+ */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<View>>;
+export default FlexItem;

package/lib/components/flex-box/flex-item/FlexItem.native.js

@@ -0,0 +1,56 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { getAlignStyle } from '../../../objects/facets/Alignable';
+import React from 'react';
+import { View } from 'react-native';
+import { FlexBoxContext } from '../context';
+/**
+ * FlexItem Component - FlexBox Child
+ * @param size {FlexItemSize} Size 1-12
+ * @param verticalCentered {boolean} Vertical center item
+ * @param centered {boolean} center item
+ * @param children {React.ReactNode}
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param narrow {boolean} Narrow item
+ * @param className {string} Additional CSS Classes
+ * @param mobileSize {FlexItemSize} Apply => is-size-mobile
+ * @param tabletSize {FlexItemSize} Apply => is-size-tablet
+ * @param touchSize {FlexItemSize} Apply => is-size-touch
+ * @param desktopSize {FlexItemSize} Apply => is-size-desktop
+ * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
+ * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
+ * @param offset {FlexItemSize} Apply => is-offset
+ * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
+ * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
+ * @param touchOffset {FlexItemSize} Apply => is-offset-touch
+ * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
+ * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
+ * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
+ * @param align { Alignable | AlignableValues} align content
+ */
+var FlexItem = React.forwardRef(function (_a, ref) {
+    var id = _a.id, size = _a.size, narrow = _a.narrow, verticalAlign = _a.verticalAlign, children = _a.children, others = __rest(_a, ["id", "size", "narrow", "verticalAlign", "children"]);
+    var _b = React.useContext(FlexBoxContext), width = _b.width, realGap = _b.realGap, scrollable = _b.scrollable, childrenLength = _b.childrenLength;
+    var realSize = (size && typeof size === 'number' && size) || (size && (size === null || size === void 0 ? void 0 : size.mobile)) || 0;
+    var scrollableStyle = React.useMemo(function () { return ({
+        width: realSize
+            ? (realSize / 12) * width - realGap * ((childrenLength - 1) / childrenLength)
+            : narrow
+                ? 'auto'
+                : width - 2 * realGap,
+    }); }, [realSize, narrow, width, realGap, childrenLength, realSize]);
+    var noScrollableStyle = React.useMemo(function () { return ({
+        flex: narrow ? 0 : 1,
+        flexGrow: realSize || narrow ? 0 : 1,
+        flexShrink: narrow ? 1 : 0,
+        flexBasis: realSize ? (realSize / 12) * width - realGap * ((childrenLength - 1) / childrenLength) : 'auto',
+    }); }, [realSize, narrow, width, realGap, childrenLength, realSize]);
+    return (React.createElement(View, __assign({ id: id, ref: ref, style: [
+            scrollable && scrollableStyle,
+            !scrollable && noScrollableStyle,
+            { justifyContent: getAlignStyle(verticalAlign) },
+        ] }, others), children));
+});
+FlexItem.displayName = ComponentName.FlexItem;
+export default FlexItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9mbGV4LWJveC9mbGV4LWl0ZW0vRmxleEl0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUMxRCxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLGNBQWMsQ0FBQTtBQUM5QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBRTNDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUVILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQy9CLFVBQUMsRUFBd0QsRUFBRSxHQUFHO0lBQTNELElBQUEsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBdEQscURBQXdELENBQUY7SUFDL0MsSUFBQSxLQUFpRCxLQUFLLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxFQUEvRSxLQUFLLFdBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsY0FBYyxvQkFBcUMsQ0FBQTtJQUN2RixJQUFNLFFBQVEsR0FBRyxDQUFDLElBQUksSUFBSSxPQUFPLElBQUksS0FBSyxRQUFRLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxDQUFDLElBQUksQ0FBQyxDQUFBO0lBRTFGLElBQU0sZUFBZSxHQUFjLEtBQUssQ0FBQyxPQUFPLENBQzlDLGNBQU0sT0FBQSxDQUFDO1FBQ0wsS0FBSyxFQUFFLFFBQVE7WUFDYixDQUFDLENBQUMsQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLEdBQUcsS0FBSyxHQUFHLE9BQU8sR0FBRyxDQUFDLENBQUMsY0FBYyxHQUFHLENBQUMsQ0FBQyxHQUFHLGNBQWMsQ0FBQztZQUM3RSxDQUFDLENBQUMsTUFBTTtnQkFDUixDQUFDLENBQUMsTUFBTTtnQkFDUixDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsR0FBRyxPQUFPO0tBQ3hCLENBQUMsRUFOSSxDQU1KLEVBQ0YsQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUM3RCxDQUFBO0lBRUQsSUFBTSxpQkFBaUIsR0FBYyxLQUFLLENBQUMsT0FBTyxDQUNoRCxjQUFNLE9BQUEsQ0FBQztRQUNMLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNwQixRQUFRLEVBQUUsUUFBUSxJQUFJLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3BDLFVBQVUsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMxQixTQUFTLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUMsR0FBRyxLQUFLLEdBQUcsT0FBTyxHQUFHLENBQUMsQ0FBQyxjQUFjLEdBQUcsQ0FBQyxDQUFDLEdBQUcsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU07S0FDM0csQ0FBQyxFQUxJLENBS0osRUFDRixDQUFDLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxjQUFjLEVBQUUsUUFBUSxDQUFDLENBQzdELENBQUE7SUFFRCxPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUNILEVBQUUsRUFBRSxFQUFFLEVBQ04sR0FBRyxFQUFFLEdBQUcsRUFDUixLQUFLLEVBQUU7WUFDTCxVQUFVLElBQUksZUFBZTtZQUM3QixDQUFDLFVBQVUsSUFBSSxpQkFBaUI7WUFDaEMsRUFBRSxjQUFjLEVBQUUsYUFBYSxDQUFDLGFBQWEsQ0FBQyxFQUFFO1NBQ2pELElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUNELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9

package/lib/components/flex-box/flex-item/FlexItemProps.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Dev } from '../../../objects/facets/Dev';
+import { AlignableProps } from '../../../objects/facets/Alignable';
+import { CommonProps } from '../../../objects/facets/CommonProps';
+import { View } from 'react-native';
+export interface FlexSize {
+    mobile?: FlexItemSize;
+    tablet?: FlexItemSize;
+    touch?: FlexItemSize;
+    desktop?: FlexItemSize;
+    widescreen?: FlexItemSize;
+    fullhd?: FlexItemSize;
+}
+/**
+ * FlexItem Interface
+ */
+export interface FlexItemProps extends AlignableProps, CommonProps, Dev {
+    children?: React.ReactNode;
+    size?: FlexSize | FlexItemSize;
+    narrow?: boolean;
+}
+export type FlexItemRef = HTMLDivElement;
+export type FlexItemNativeRef = View;
+export type FlexItemSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

package/lib/components/flex-box/flex-item/FlexItemProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW1Qcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvZmxleC1pdGVtL0ZsZXhJdGVtUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/flex-box/flex-item/FlexItemPropsDefaults.js

@@ -0,0 +1,108 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "size": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "FlexSize"
+    ]
+  },
+  "narrow": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
+    ]
+  },
+  "verticalAlign": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/flex-box/flex-item/FlexSizeDefaults.js

@@ -0,0 +1,110 @@
+export default {
+  "mobile": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "tablet": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "touch": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "desktop": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "widescreen": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "fullhd": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  }
+};

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

@@ -0,0 +1,3 @@
+import FlexBox from './FlexBox';
+import FlexItem from './flex-item/FlexItem';
+export { FlexBox, FlexItem };

package/lib/components/flex-box/index.js

@@ -0,0 +1,4 @@
+import FlexBox from './FlexBox';
+import FlexItem from './flex-item/FlexItem';
+export { FlexBox, FlexItem };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sT0FBTyxNQUFNLFdBQVcsQ0FBQTtBQUMvQixPQUFPLFFBQVEsTUFBTSxzQkFBc0IsQ0FBQTtBQUUzQyxPQUFPLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxDQUFBIn0=

package/lib/components/hero/Hero.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { View } from 'react-native';
 import { HeroProps } from '../../components/hero/HeroProps';
 /**
  * Hero Component
@@ -12,8 +11,8 @@ import { HeroProps } from '../../components/hero/HeroProps';
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement | View>>;
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
 export default Hero;

package/lib/components/hero/Hero.js

@@ -17,18 +17,18 @@ import { has, is } from '../../services/classify';
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
 var Hero = React.forwardRef(function (_a, ref) {
-    var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, className = _a.className, id = _a.id, onClick = _a.onClick, overlap = _a.overlap, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc", "inverted", "className", "id", "onClick", "overlap"]);
+    var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, className = _a.className, id = _a.id, onClick = _a.onClick, overlap = _a.overlap, testId = _a.testId, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc", "inverted", "className", "id", "onClick", "overlap", "testId"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx('hero', backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), (inverted && is('inverted')) || is('base'), overlap && is('overlapped'), className));
-    return (React.createElement("section", __assign({ ref: ref, id: id, onClick: onClick && onClick, className: classes }, (backgroundSrc && {
+    return (React.createElement("section", __assign({ "data-testid": testId, ref: ref, id: id, onClick: onClick && onClick, className: classes }, (backgroundSrc && {
         style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
     }), others),
         React.createElement("div", { className: hashClass(styled, clsx('hero-body')) }, children)));
 });
 Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaGVyby9IZXJvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRTdDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixVQUNFLEVBQTZHLEVBQzdHLEdBQXFDO0lBRG5DLElBQUEsUUFBUSxjQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBSyxNQUFNLGNBQWhHLHFHQUFrRyxDQUFGO0lBR3hGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixNQUFNLEVBQ04sZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxDQUFDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQzFDLE9BQU8sSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzNCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsR0FBRyxFQUFFLEdBQXNDLEVBQzNDLEVBQUUsRUFBRSxFQUFFLEVBQ04sT0FBTyxFQUFFLE9BQU8sSUFBSSxPQUFPLEVBQzNCLFNBQVMsRUFBRSxPQUFPLElBQ2QsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHLEVBQUU7S0FDcEQsQ0FBQyxFQUNFLE1BQU07UUFFViw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsSUFBRyxRQUFRLENBQU8sQ0FDOUQsQ0FDWCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaGVyby9IZXJvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRTdDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixVQUNFLEVBQTBHLEVBQzFHLEdBQUc7SUFERCxJQUFBLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUF4RywrR0FBMEcsQ0FBRjtJQUdoRyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsTUFBTSxFQUNOLGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFDL0QsYUFBYSxJQUFJLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFDbEMsQ0FBQyxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUMxQyxPQUFPLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUMzQixTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLHlEQUNlLE1BQU0sRUFDbkIsR0FBRyxFQUFFLEdBQUcsRUFDUixFQUFFLEVBQUUsRUFBRSxFQUNOLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUMzQixTQUFTLEVBQUUsT0FBTyxJQUNkLENBQUMsYUFBYSxJQUFJO1FBQ3BCLEtBQUssRUFBRSxFQUFFLGVBQWUsRUFBRSxjQUFPLGFBQWEsTUFBRyxFQUFFO0tBQ3BELENBQUMsRUFDRSxNQUFNO1FBRVYsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLElBQUcsUUFBUSxDQUFPLENBQzlELENBQ1gsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsSUFBSSxDQUFBO0FBQ3JDLGVBQWUsSUFBSSxDQUFBIn0=

package/lib/components/hero/Hero.native.js

@@ -17,27 +17,31 @@ import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
 var Hero = React.forwardRef(function (_a, ref) {
-    var children = _a.children, backgroundSrc = _a.backgroundSrc, onClick = _a.onClick, overlap = _a.overlap, inverted = _a.inverted, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "backgroundSrc", "onClick", "overlap", "inverted", "backgroundColor"]);
+    var children = _a.children, backgroundSrc = _a.backgroundSrc, onClick = _a.onClick, overlap = _a.overlap, inverted = _a.inverted, backgroundColor = _a.backgroundColor, backgroundHeight = _a.backgroundHeight, others = __rest(_a, ["children", "backgroundSrc", "onClick", "overlap", "inverted", "backgroundColor", "backgroundHeight"]);
     var _b = __read(useState(0), 2), overlapHeight = _b[0], setOverlapHeight = _b[1];
     var _c = __read(useState(0), 2), secondOverlapHeight = _c[0], setSecondOverlapHeight = _c[1];
     var isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap === null || overlap === void 0 ? void 0 : overlap.length) > 1 : false;
     var isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
+    var overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
+    var marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
     var styles = StyleSheet.create({
         hero: {
             width: '100%',
-            minHeight: 100,
-            maxHeight: 300,
-            height: 'auto',
+            minHeight: 150,
+            maxHeight: 350,
+            height: backgroundHeight ? backgroundHeight : 'auto',
         },
         content: {
             paddingLeft: 15,
+            marginBottom: overlap ? marginBottomOverlap : 0,
         },
         background: {
             backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : getColorStyle(TrilogyColor.BACKGROUND),
         },
         overlap: {
+            width: '100%',
             position: 'absolute',
-            top: isSecondOverlapNotEmpty ? -40 : -60,
+            top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60,
         },
         secondOverlap: {
             position: 'absolute',
@@ -46,7 +50,7 @@ var Hero = React.forwardRef(function (_a, ref) {
             width: '100%',
         },
         subOverlap: {
-            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapHeight,
+            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin,
         },
     });
     var heroView;
@@ -88,4 +92,4 @@ var Hero = React.forwardRef(function (_a, ref) {
 });
 Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFbEYsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRTs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFDRSxFQUE4RixFQUM5RixHQUFvQjtJQURsQixJQUFBLFFBQVEsY0FBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUssTUFBTSxjQUFqRixrRkFBbUYsQ0FBRjtJQUczRSxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQXRELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUF1QixDQUFBO0lBQ3ZELElBQUEsS0FBQSxPQUFnRCxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBbEUsbUJBQW1CLFFBQUEsRUFBRSxzQkFBc0IsUUFBdUIsQ0FBQTtJQUV6RSxJQUFNLGVBQWUsR0FBRyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDbEYsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRTs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFDRSxFQUFxRyxFQUNyRyxHQUFHO0lBREQsSUFBQSxRQUFRLGNBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGdCQUFnQixzQkFBQSxFQUFLLE1BQU0sY0FBbkcsc0dBQXFHLENBQUY7SUFHN0YsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBUyxDQUFDLENBQUMsSUFBQSxFQUF0RCxhQUFhLFFBQUEsRUFBRSxnQkFBZ0IsUUFBdUIsQ0FBQTtJQUN2RCxJQUFBLEtBQUEsT0FBZ0QsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQWxFLG1CQUFtQixRQUFBLEVBQUUsc0JBQXNCLFFBQXVCLENBQUE7SUFFekUsSUFBTSxlQUFlLEdBQUcsT0FBTyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENB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

package/lib/components/hero/HeroProps.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
 import { BackgroundProps } from '../../objects/atoms/Background';
-import { Clickable } from '../../objects/facets';
+import { Clickable, Dev } from '../../objects/facets';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { BackgroundHeight } from './heroEnum';
+import { View } from 'react-native';
 /**
  * Hero Interface
  */
-export interface HeroProps extends Clickable, BackgroundProps, CommonProps {
+export interface HeroProps extends Clickable, BackgroundProps, CommonProps, Dev {
     children?: React.ReactNode;
     overlap?: React.ReactNode[] | boolean;
+    backgroundHeight?: BackgroundHeight;
 }
+export type HeroRef = HTMLElement;
+export type HeroNativeRef = View;

package/lib/components/hero/HeroPropsDefaults.js

@@ -22,6 +22,16 @@ export default {
       "ReactNode[]"
     ]
   },
+  "backgroundHeight": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      100,
+      150,
+      200,
+      300
+    ]
+  },
   "onClick": {
     "type": "function",
     "values": [
@@ -43,7 +53,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -56,9 +68,13 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
+      "STROKE_FADE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -66,7 +82,9 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE",
+      "STROKE_FADE"
     ]
   },
   "backgroundSrc": {
@@ -97,5 +115,12 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/icon/Icon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IconProps } from './IconProps';
 /**
  * Icon Component
@@ -14,8 +14,8 @@ import { IconProps } from './IconProps';
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additionnal css classes
+ * @param className Additional css classes
  * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-declare const Icon: ({ className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, ...others }: IconProps) => JSX.Element;
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;