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

package/lib/components/fab/Fab.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { FabProps } from "./FabProps";
-import { ComponentName } from "../../components/enumsComponentsName";
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { FabProps } from '../../components/fab/FabProps';
 /**
  * Fab Native Component
  * @param children {string} label fab button
@@ -14,8 +14,5 @@ import { ComponentName } from "../../components/enumsComponentsName";
  * @param right {number} position right
  * @param disabled {boolean} disabled button
  */
-declare const Fab: {
-    ({ children, accessibilityLabel, iconName, extended, onClick, top, bottom, left, right, disabled, testId }: FabProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<TouchableOpacity>>;
 export default Fab;

package/lib/components/fab/Fab.native.js

@@ -1,9 +1,11 @@
-import * as React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
-import { Alignable, getColorStyle, TrilogyColor, TypographyBold, TypographyColor } from "../../objects";
-import { Icon, IconColor, IconSize } from "../../components/icon";
-import { ComponentName } from "../../components/enumsComponentsName";
-import { Text } from "../../components/text";
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconColor, IconSize } from '../../components/icon';
+import { Text } from '../../components/text';
+import { TypographyBold, TypographyColor } from '../../objects/Typography';
+import { Alignable } from '../../objects/facets/Alignable';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Fab Native Component
  * @param children {string} label fab button
@@ -17,33 +19,33 @@ import { Text } from "../../components/text";
  * @param right {number} position right
  * @param disabled {boolean} disabled button
  */
-var Fab = function (_a) {
+var Fab = React.forwardRef(function (_a, ref) {
     var children = _a.children, accessibilityLabel = _a.accessibilityLabel, iconName = _a.iconName, extended = _a.extended, onClick = _a.onClick, top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, disabled = _a.disabled, testId = _a.testId;
     var styles = StyleSheet.create({
         button: {
             backgroundColor: getColorStyle(TrilogyColor.MAIN),
-            justifyContent: "center",
-            alignItems: "center",
+            justifyContent: 'center',
+            alignItems: 'center',
             borderRadius: 16,
             minHeight: 56,
-            height: "auto",
-            shadowColor: "#000",
+            height: 'auto',
+            shadowColor: '#000',
             shadowOffset: { width: 0, height: 3 },
             shadowOpacity: 0.2,
             shadowRadius: 6,
             elevation: 3,
-            position: top || bottom || left || right ? "absolute" : "relative",
-            top: top ? top : "auto",
-            right: right ? right : "auto",
-            left: left ? left : "auto",
-            bottom: bottom ? bottom : "auto",
-            width: extended ? "auto" : 60,
-            flexDirection: "row",
+            position: top || bottom || left || right ? 'absolute' : 'relative',
+            top: top ? top : 'auto',
+            right: right ? right : 'auto',
+            left: left ? left : 'auto',
+            bottom: bottom ? bottom : 'auto',
+            width: extended ? 'auto' : 60,
+            flexDirection: 'row',
             zIndex: 999,
         },
         label: {
-            marginTop: "auto",
-            marginBottom: "auto",
+            marginTop: 'auto',
+            marginBottom: 'auto',
             marginLeft: 10,
             marginRight: 16,
         },
@@ -55,10 +57,10 @@ var Fab = function (_a) {
             height: 56,
         },
     });
-    return (React.createElement(TouchableOpacity, { style: [styles.button, extended && styles.extended], accessibilityLabel: accessibilityLabel, onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, disabled: disabled, testID: testId }, extended ? (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }),
-        React.createElement(Text, { style: styles.label, typo: [TypographyColor.TEXT_WHITE, TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, children))) : (React.createElement(Icon, { name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }))));
-};
+    return (React.createElement(TouchableOpacity, { ref: ref, style: [styles.button, extended && styles.extended], accessibilityLabel: accessibilityLabel, onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, disabled: disabled, testID: testId }, extended ? (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { style: styles.icon, name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }),
+        React.createElement(Text, { style: styles.label, typo: [TypographyColor.TEXT_WHITE, TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, children))) : (React.createElement(Icon, { style: styles.icon, name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }))));
+});
 Fab.displayName = ComponentName.Fab;
 export default Fab;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmFiL0ZhYi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0QsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbkcsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUFDLEVBWVc7UUFYVCxRQUFRLGNBQUEsRUFDUixrQkFBa0Isd0JBQUEsRUFDbEIsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsR0FBRyxTQUFBLEVBQ0gsTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBO0lBRW5CLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsTUFBTSxFQUFFO1lBQ04sZUFBZSxFQUFFLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ2pELGNBQWMsRUFBRSxRQUFRO1lBQ3hCLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFlBQVksRUFBRSxFQUFFO1lBQ2hCLFNBQVMsRUFBRSxFQUFFO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxXQUFXLEVBQUUsTUFBTTtZQUNuQixZ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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmFiL0ZhYi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRTNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBWSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN2RSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDdEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMxQixVQUNFLEVBQW1ILEVBQ25ILEdBQWdDO1FBRDlCLFFBQVEsY0FBQSxFQUFFLGtCQUFrQix3QkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQTtJQUd2RyxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE1BQU0sRUFBRTtZQUNOLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNqRCxjQUFjLEVBQUUsUUFBUTtZQUN4QixVQUFVLEVBQUUsUUFBUTtZQUNwQixZQUFZLEVBQUUsRUFBRTtZQUNoQixTQUFTLEVBQUUsRUFBRTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsV0FBVyxFQUFFLE1BQU07WUFDbkIsWUFBWSxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFO1lBQ3JDLGFBQWEsRUFBRSxHQUFHO1lBQ2xCLFlBQVksRUFBRSxDQUFDO1lBQ2YsU0FBUyxFQUFFLENBQUM7WUFDWixRQUFRLEVBQUUsR0FBRyxJQUFJLE1BQU0sSUFBSSxJQUFJLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQVU7WUFDbEUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxNQUFNO1lBQ3ZCLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsTUFBTTtZQUM3QixJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU07WUFDMUIsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO1lBQ2hDLEtBQUssRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUM3QixhQUFhLEVBQUUsS0FBSztZQUNwQixNQUFNLEVBQUUsR0FBRztTQUNaO1FBQ0QsS0FBSyxFQUFFO1lBQ0wsU0FBUyxFQUFFLE1BQU07WUFDakIsWUFBWSxFQUFFLE1BQU07WUFDcEIsVUFBVSxFQUFFLEVBQUU7WUFDZCxXQUFXLEVBQUUsRUFBRTtTQUNoQjtRQUNELElBQUksRUFBRTtZQUNKLFVBQVUsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM3QixXQUFXLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDOUI7UUFDRCxRQUFRLEVBQUU7WUFDUixNQUFNLEVBQUUsRUFBRTtTQUNYO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLGdCQUFnQixJQUNmLEdBQUcsRUFBRSxHQUFHLEVBQ1IsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLE1BQU0sRUFBRSxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxFQUNuRCxrQkFBa0IsRUFBRSxrQkFBa0IsRUFDdEMsT0FBTyxFQUFFLFVBQUMsQ0FBVyxJQUFLLE9BQUEsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxFQUFaLENBQVksRUFDdEMsUUFBUSxFQUFFLFFBQVEsRUFDbEIsTUFBTSxFQUFFLE1BQU0sSUFFYixRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ1Y7UUFDRSxvQkFBQyxJQUFJLElBQ0gsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQ2xCLElBQUksRUFBRSxRQUFvQixFQUMxQixLQUFLLEVBQUUsU0FBUyxDQUFDLEtBQUssRUFDdEIsSUFBSSxFQUFFLFFBQVEsQ0FBQyxNQUFNLEVBQ3JCLEtBQUssRUFBRSxTQUFTLENBQUMsY0FBYyxHQUMvQjtRQUNGLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsVUFBVSxFQUFFLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxJQUMvRixRQUFRLENBQ0osQ0FDTixDQUNKLENBQUMsQ0FBQyxDQUFDLENBQ0Ysb0JBQUMsSUFBSSxJQUNILEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxFQUNsQixJQUFJLEVBQUUsUUFBb0IsRUFDMUIsS0FBSyxFQUFFLFNBQVMsQ0FBQyxLQUFLLEVBQ3RCLElBQUksRUFBRSxRQUFRLENBQUMsTUFBTSxFQUNyQixLQUFLLEVBQUUsU0FBUyxDQUFDLGNBQWMsR0FDL0IsQ0FDSCxDQUNnQixDQUNwQixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxHQUFHLENBQUE7QUFDbkMsZUFBZSxHQUFHLENBQUEifQ==

package/lib/components/fab/FabProps.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
-import { IconName, IconNameValues } from "../../components/icon";
-import { Accessibility, Clickable, Dev } from "../../objects";
-import { DimensionValue } from "react-native";
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { DimensionValue } from 'react-native';
+import { IconName, IconNameValues } from '../../components/icon';
+import { Accessibility } from '../../objects/facets/Accessibility';
+import { Clickable } from '../../objects/facets/Clickable';
+import { Dev } from '../../objects/facets/Dev';
 /**
  * Fab Interface
  */
-export interface FabProps extends Accessibility, Clickable, Dev, CommonProps {
+export interface FabProps extends Accessibility, Clickable, Dev {
     children: string | React.ReactNode;
     extended?: boolean;
     iconName: IconName | IconNameValues;
+    className?: string;
     fixed?: boolean;
     top?: DimensionValue | number | undefined;
     bottom?: DimensionValue | number | undefined;

package/lib/components/fab/FabPropsDefaults.js

@@ -72,6 +72,13 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "fixed": {
     "type": "boolean",
     "values": [
@@ -152,19 +159,5 @@ export default {
       "undefined",
       "string"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

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

@@ -1,2 +1 @@
-import Fab from "./Fab";
-export { Fab };
+export { default as Fab } from '../../components/fab/Fab';

package/lib/components/fab/index.js

@@ -1,3 +1,2 @@
-import Fab from "./Fab";
-export { Fab };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZhYi9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=
+export { default as Fab } from '../../components/fab/Fab';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZhYi9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLEdBQUcsRUFBRSxNQUFNLHNCQUFzQixDQUFBIn0=

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { HeroProps } from './HeroProps';
+import React from 'react';
+import { HeroProps } from '../../components/hero/HeroProps';
 /**
  * Hero Component
  * @param children {React.ReactNode} Hero Children
@@ -12,7 +12,10 @@ import { HeroProps } from './HeroProps';
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
+ * @param align { Alignable | AlignableValues} align content
+ * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-declare const Hero: ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }: HeroProps) => JSX.Element;
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
 export default Hero;

package/lib/components/hero/Hero.js

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
+import clsx from 'clsx';
 import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getBackgroundClassName } from '../../objects/atoms/Background';
+import { getAlignClassName } from '../../objects/facets/Alignable';
 import { has, is } from '../../services/classify';
-import { getBackgroundClassName } from '../../objects';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
 /**
  * Hero Component
  * @param children {React.ReactNode} Hero Children
@@ -17,16 +18,19 @@ import { useTrilogyContext } from '../../context';
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
+ * @param align { Alignable | AlignableValues} align content
+ * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-var Hero = function (_a) {
-    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 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({ id: id, onClick: onClick && onClick }, (backgroundSrc && {
+var Hero = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, className = _a.className, align = _a.align, justify = _a.justify, onClick = _a.onClick, overlap = _a.overlap, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc", "inverted", "className", "align", "justify", "onClick", "overlap"]);
+    var classes = hashClass(clsx('hero', backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), (inverted && is('inverted')) || is('base'), align && is(getAlignClassName(align)), justify && is(justify), overlap && is('overlapped'), className));
+    return (React.createElement("section", __assign({ ref: ref, onClick: onClick && onClick }, (backgroundSrc && {
         style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
     }), { className: classes }, others),
-        React.createElement("div", { className: hashClass(styled, clsx('hero-body')) }, children)));
-};
+        React.createElement("div", { className: hashClass(clsx('hero-body')) }, children)));
+});
+Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaGVyby9IZXJvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ2xELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7Ozs7Ozs7OztHQWFHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQVVGO0lBVFYsSUFBQSxRQUFRLGNBQUEsRUFDUixlQUFlLHFCQUFBLEVBQ2YsYUFBYSxtQkFBQSxFQUNiLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE9BQU8sYUFBQSxFQUNQLE9BQU8sYUFBQSxFQUNKLE1BQU0sY0FURyxxR0FVYixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLE1BQU0sRUFDTixlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLEVBQy9ELGFBQWEsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ2xDLENBQUMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFDMUMsT0FBTyxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDM0IsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwwQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxJQUN2QixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLE9BQU8sSUFDZCxNQUFNO1FBRVYsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLElBQUcsUUFBUSxDQUFPLENBQzlELENBQ1gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsSUFBSSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaGVyby9IZXJvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ25FLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixVQUNFLEVBV1ksRUFDWixHQUEyQjtJQVh6QixJQUFBLFFBQVEsY0FBQSxFQUNSLGVBQWUscUJBQUEsRUFDZixhQUFhLG1CQUFBLEVBQ2IsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ0osTUFBTSxjQVZYLG1IQVdDLENBRFU7SUFJWCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLElBQUksQ0FDRixNQUFNLEVBQ04sZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxDQUFDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQzFDLEtBQUssSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFDckMsT0FBTyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFDdEIsT0FBTyxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDM0IsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwwQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxJQUN2QixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLE9BQU8sSUFDZCxNQUFNO1FBRVYsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsSUFBRyxRQUFRLENBQU8sQ0FDdEQsQ0FDWCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { HeroProps } from './HeroProps';
-import { ComponentName } from '../../components/enumsComponentsName';
+import React from 'react';
+import { View } from 'react-native';
+import { HeroProps } from '../../components/hero/HeroProps';
 /**
  * Hero Component
  * @param children {ReactNode} Hero Children
@@ -12,8 +12,5 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-declare const Hero: {
-    ({ children, backgroundSrc, onClick, overlap, inverted, backgroundColor, ...others }: HeroProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<View>>;
 export default Hero;

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

@@ -1,10 +1,10 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
 import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../objects';
-import { Box } from '../box';
+import { Box } from '../../components/box';
 import { ComponentName } from '../../components/enumsComponentsName';
 import { StatesContext } from '../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Hero Component
  * @param children {ReactNode} Hero Children
@@ -16,18 +16,19 @@ import { StatesContext } from '../../context/providerStates';
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-var Hero = function (_a) {
-    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 Hero = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundSrc = _a.backgroundSrc, onClick = _a.onClick, overlap = _a.overlap, backgroundHeight = _a.backgroundHeight, inverted = _a.inverted, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "backgroundSrc", "onClick", "overlap", "backgroundHeight", "inverted", "backgroundColor"]);
     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 styles = StyleSheet.create({
         hero: {
             width: '100%',
             minHeight: 100,
             maxHeight: 300,
-            height: 'auto',
+            height: backgroundHeight ? backgroundHeight : 'auto',
         },
         content: {
             paddingLeft: 15,
@@ -37,7 +38,7 @@ var Hero = function (_a) {
         },
         overlap: {
             position: 'absolute',
-            top: isSecondOverlapNotEmpty ? -40 : -60,
+            top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60,
         },
         secondOverlap: {
             position: 'absolute',
@@ -46,7 +47,7 @@ var Hero = function (_a) {
             width: '100%',
         },
         subOverlap: {
-            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : 'auto',
+            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin,
         },
     });
     var heroView;
@@ -81,11 +82,11 @@ var Hero = function (_a) {
                     setOverlapHeight(height);
                 } }, overlap && typeof overlap !== 'boolean' ? overlap[0] : null)));
     }
-    return onClick ? (React.createElement(View, null,
-        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { style: { width: '100%' } },
+    return onClick ? (React.createElement(View, { ref: ref },
+        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { style: { width: '100%' }, ref: ref },
         heroView,
         overlapView));
-};
+});
 Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFbEYsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLFFBQVEsQ0FBQTtBQUM1QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXhEOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBUUY7SUFQVixJQUFBLFFBQVEsY0FBQSxFQUNSLGFBQWEsbUJBQUEsRUFDYixPQUFPLGFBQUEsRUFDUCxPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQVBHLGtGQVFiLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQXRELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUF1QixDQUFBO0lBQ3ZELElBQUEsS0FBQSxPQUFnRCxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBbEUsbUJBQW1CLFFBQUEsRUFBRSxzQkFBc0IsUUFBdUIsQ0FBQTtJQUV6RSxJQUFNLGVBQWUsR0FBRyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsTUFBTSxJQUFH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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFbEYsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFDRSxFQUFnSCxFQUNoSCxHQUFvQjtJQURsQixJQUFBLFFBQVEsY0FBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxnQkFBZ0Isc0JBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUssTUFBTSxjQUFuRyxzR0FBcUcsQ0FBRjtJQUc3RixJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQXRELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUF1QixDQUFBO0lBQ3ZELElBQUEsS0FBQSxPQUFnRCxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBbEUsbUJBQW1CLFFBQUEsRUFBRSxzQkFBc0IsUUFBdUIsQ0FBQTtJQUV6RSxJQUFNLGVBQWUsR0FBRyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMs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

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

@@ -1,11 +1,15 @@
 /// <reference types="react" />
-import { Clickable } from '../../objects/facets';
+import { BackgroundHeight } from '../../components/hero/heroEnum';
 import { BackgroundProps } from '../../objects/atoms/Background';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { AlignableProps } from '../../objects/facets/Alignable';
+import { Clickable } from '../../objects/facets/Clickable';
+import { JustifiableProps } from '../../objects/facets/Justifiable';
 /**
  * Hero Interface
  */
-export interface HeroProps extends Clickable, BackgroundProps, CommonProps {
+export interface HeroProps extends AlignableProps, JustifiableProps, Clickable, BackgroundProps {
     children?: React.ReactNode;
+    className?: string;
     overlap?: React.ReactNode[] | boolean;
+    backgroundHeight?: BackgroundHeight;
 }

package/lib/components/hero/HeroPropsDefaults.js

@@ -13,6 +13,13 @@ export default {
       "ReactPortal"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "overlap": {
     "type": "boolean",
     "values": [
@@ -22,6 +29,54 @@ export default {
       "ReactNode[]"
     ]
   },
+  "backgroundHeight": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      100,
+      150,
+      200,
+      300
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "verticalAlign": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "justify": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "justified-center",
+      "justified-start",
+      "justified-end",
+      "space-between",
+      "JUSTIFIED_CENTER",
+      "JUSTIFIED_START",
+      "JUSTIFIED_END",
+      "SPACE_BETWEEN"
+    ]
+  },
   "onClick": {
     "type": "function",
     "values": [
@@ -37,8 +92,6 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
-      "MAIN",
-      "ACCENT",
       "WHITE",
       "MAIN",
       "MAIN_FADE",
@@ -57,7 +110,9 @@ export default {
       "NEUTRAL",
       "NEUTRAL_FADE",
       "WHITE",
+      "MAIN",
       "MAIN_FADE",
+      "ACCENT",
       "FONT",
       "SUCCESS_FADE",
       "INFO_FADE",
@@ -83,19 +138,5 @@ export default {
       "false",
       "true"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

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

@@ -1,2 +1 @@
-import Hero from './Hero';
-export { Hero };
+export { default as Hero } from '../../components/hero/Hero';

package/lib/components/hero/index.js

@@ -1,3 +1,2 @@
-import Hero from './Hero';
-export { Hero };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sUUFBUSxDQUFBO0FBRXpCLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQSJ9
+export { default as Hero } from '../../components/hero/Hero';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxJQUFJLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQSJ9

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IconProps } from './IconProps';
+import React from 'react';
+import { IconProps } from '../../components/icon/IconProps';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -7,15 +7,24 @@ import { IconProps } from './IconProps';
  * @param status SUCCESS|ERROR If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
+ * @param position UP|DOWN|LEFT|RIGHT
+ * @param stacked {boolean} Stacked icon
  * @param badgeContent {string} Icon with bage content
+ * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
  * @param color {IconColor} Custom Icon Color
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
+ * @param marginless {boolean} delete margin
+ * @param align { Alignable | AlignableValues} align content
  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param textClassName {string} Text's className
  * @param className Additionnal css classes
+ * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
+ * @param verticalAlign {Alignable | AlignableValues} align vertical content
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param style {object} Additional styles
  */
-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<HTMLDivElement>>;
 export default Icon;