@trilogy-ds/react 0.0.1-beta.9 → 0.0.2-calendar

package/lib/components/badge/Badge.native.d.ts

@@ -1,17 +1,18 @@
-/// <reference types="react" />
-import { BadgeProps } from './BadgeProps';
-import { ComponentName } from '../enumsComponentsName';
+import { BadgeProps } from '../../components/badge/BadgeProps';
+import React from 'react';
+import { View } from 'react-native';
 /**
- * Badge Native Component
+ * Badge Component
  * @param children {React.ReactNode} If no content add children (Icon for example)
- * @param textContent {string} Content text for badge with text, if textContent props, it will display badge with text
- * @param content content {string|number} Badge content text
- * @param direction {BadgeTextDirection} Text direction for Badge (LEFT|RIGHT)
+ * @param id
+ * @param label {string|number} Badge content text
+ * @param inverted {boolean} Inverted style for Badge
  * @param onClick {Function} onClick Event for Badge
- * @param color {BadgeColor} Change color for Badge
+ * @param variant
+ * @param position
+ * @param others
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes (ONLY FOR WEB)
  */
-declare const Badge: {
-    ({ children, textContent, content, direction, color, onClick, ...others }: BadgeProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
 export default Badge;

package/lib/components/badge/Badge.native.js

@@ -1,60 +1,118 @@
+import { __assign, __rest } from "tslib";
+import { BadgePositionEnum } from '../../components/badge/BadgeEnum';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
+import { StatusState } from '../../objects';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { BadgeTextDirection, BadgeColor } from './BadgeEnum';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
 /**
- * Badge Native Component
+ * Badge Component
  * @param children {React.ReactNode} If no content add children (Icon for example)
- * @param textContent {string} Content text for badge with text, if textContent props, it will display badge with text
- * @param content content {string|number} Badge content text
- * @param direction {BadgeTextDirection} Text direction for Badge (LEFT|RIGHT)
+ * @param id
+ * @param label {string|number} Badge content text
+ * @param inverted {boolean} Inverted style for Badge
  * @param onClick {Function} onClick Event for Badge
- * @param color {BadgeColor} Change color for Badge
+ * @param variant
+ * @param position
+ * @param others
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes (ONLY FOR WEB)
  */
-const Badge = ({ children, textContent, content, direction, color, onClick, ...others }) => {
-    const badgeColor = color ? getColorStyle(color) : getColorStyle(BadgeColor.SECONDARY);
-    const textColor = getColorStyle(TrilogyColor.WHITE);
-    const styles = StyleSheet.create({
+var Badge = React.forwardRef(function (_a, ref) {
+    var children = _a.children, label = _a.label, onClick = _a.onClick, testId = _a.testId, variant = _a.variant, inverted = _a.inverted, position = _a.position, status = _a.status, others = __rest(_a, ["children", "label", "onClick", "testId", "variant", "inverted", "position", "status"]);
+    var badgeColor = getColorStyle(variant || TrilogyColor.MAIN);
+    var textColor = getColorStyle(TrilogyColor.BACKGROUND);
+    var styles = StyleSheet.create({
         container: {
             flexDirection: 'row',
         },
         badge: {
             alignSelf: 'baseline',
-            minWidth: 20,
-            height: 20,
-            backgroundColor: badgeColor,
+            minWidth: label ? 20 : 10,
+            height: label ? 20 : 10,
+            backgroundColor: !inverted ? badgeColor : getColorStyle(TrilogyColor.BACKGROUND),
             borderRadius: 30,
             justifyContent: 'center',
             alignItems: 'center',
         },
         text: {
-            color: textColor,
+            color: !inverted ? textColor : getColorStyle(variant || TrilogyColor.MAIN),
             fontSize: 10,
         },
         textContent: {
             fontSize: 15,
             marginRight: 5,
             marginLeft: 5,
-            color: getColorStyle(TrilogyColor.TERTIARY),
+            color: getColorStyle(TrilogyColor.MAIN),
+        },
+        iconStatus: {
+            position: 'absolute',
+            zIndex: 1000,
+            backgroundColor: 'white',
+            width: 16,
+            minHeight: 16,
+            borderRadius: 15,
+        },
+        iconStatusPositionTopLeft: {
+            top: -4,
+            left: -4,
+        },
+        iconStatusPositionTopRight: {
+            top: -4,
+            left: 17,
+        },
+        iconStatusPositionBottomLeft: {
+            top: 17,
+            left: -4,
+        },
+        iconStatusPositionBottomRight: {
+            top: 17,
+            left: 17,
         },
     });
-    let badgeView;
-    if (textContent) {
-        badgeView = (React.createElement(View, { style: styles.container },
-            !direction && React.createElement(Text, { style: styles.textContent }, textContent),
-            direction && direction === BadgeTextDirection.LEFT && React.createElement(Text, { style: styles.textContent }, textContent),
-            React.createElement(View, { style: styles.badge },
-                React.createElement(Text, { style: styles.text }, content)),
-            direction && direction === BadgeTextDirection.RIGHT && React.createElement(Text, { style: styles.textContent }, textContent)));
+    var iconName = null;
+    var iconColor = null;
+    switch (status) {
+        case StatusState.SUCCESS:
+            iconName = IconName.CHECK_CIRCLE;
+            iconColor = IconColor.SUCCESS;
+            break;
+        case StatusState.WARNING:
+            iconName = IconName.EXCLAMATION_CIRCLE;
+            iconColor = IconColor.WARNING;
+            break;
+        case StatusState.ERROR:
+            iconName = IconName.TIMES_CIRCLE;
+            iconColor = IconColor.ERROR;
+            break;
+        case StatusState.INFO:
+            iconName = IconName.INFOS_CIRCLE;
+            iconColor = IconColor.INFO;
+            break;
+        default:
+            break;
     }
-    else {
-        badgeView = (React.createElement(View, null, content ? (React.createElement(View, { style: styles.badge, ...others },
-            React.createElement(Text, { style: styles.text }, content))) : (React.createElement(View, { style: styles.badge, ...others }, children))));
+    if (status) {
+        return (React.createElement(View, __assign({}, others, { ref: ref }), iconName && iconColor && (React.createElement(View, null,
+            React.createElement(View, { style: [
+                    styles.iconStatus,
+                    (position === BadgePositionEnum.TOP_LEFT && styles.iconStatusPositionTopLeft) ||
+                        (position === BadgePositionEnum.TOP_RIGHT && styles.iconStatusPositionTopRight) ||
+                        (position === BadgePositionEnum.BOTTOM_LEFT && styles.iconStatusPositionBottomLeft) ||
+                        (position === BadgePositionEnum.BOTTOM_RIGHT && styles.iconStatusPositionBottomRight) ||
+                        styles.iconStatusPositionTopLeft,
+                ] },
+                React.createElement(Icon, { name: iconName, size: IconSize.SMALLER, color: iconColor })),
+            React.createElement(View, null, children)))));
     }
-    return onClick ? (React.createElement(View, null,
-        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, badgeView))) : (badgeView);
-};
+    return onClick ? (React.createElement(View, __assign({}, others, { ref: ref }),
+        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85, testID: testId },
+            React.createElement(View, __assign({ style: styles.badge }, others),
+                React.createElement(Text, { style: styles.text }, label))))) : (React.createElement(View, __assign({ style: styles.badge }, others, { ref: ref }),
+        React.createElement(Text, { style: styles.text }, label),
+        !label && children && children));
+});
 Badge.displayName = ComponentName.Badge;
 export default Badge;
-//# sourceMappingURL=Badge.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2UubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9iYWRnZS9CYWRnZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXZFOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzVCLFVBQUMsRUFBb0YsRUFBRSxHQUFHO0lBQXZGLElBQUEsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUFsRix1RkFBb0YsQ0FBRjtJQUNqRixJQUFNLFVBQVUsR0FBRyxhQUFhLENBQUMsT0FBTyxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUM5RCxJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXhELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0Is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

package/lib/components/badge/BadgeEnum.d.ts

@@ -1,10 +1,10 @@
-export declare enum BadgeTextDirection {
-    LEFT = "left",
-    RIGHT = "right"
+/**
+ * Badge Enum
+ */
+export declare enum BadgePositionEnum {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right"
 }
-export type BadgeTextDirectionValues = `${BadgeTextDirection}`;
-export declare enum BadgeColor {
-    TERTIARY = "TERTIARY",
-    SECONDARY = "SECONDARY"
-}
-export type BadgeColorValues = `${BadgeColor}`;
+export type BadgePositionValues = `${BadgePositionEnum}`;

package/lib/components/badge/BadgeEnum.js

@@ -1,11 +1,11 @@
-export var BadgeTextDirection;
-(function (BadgeTextDirection) {
-    BadgeTextDirection["LEFT"] = "left";
-    BadgeTextDirection["RIGHT"] = "right";
-})(BadgeTextDirection || (BadgeTextDirection = {}));
-export var BadgeColor;
-(function (BadgeColor) {
-    BadgeColor["TERTIARY"] = "TERTIARY";
-    BadgeColor["SECONDARY"] = "SECONDARY";
-})(BadgeColor || (BadgeColor = {}));
-//# sourceMappingURL=BadgeEnum.js.map
+/**
+ * Badge Enum
+ */
+export var BadgePositionEnum;
+(function (BadgePositionEnum) {
+    BadgePositionEnum["TOP_LEFT"] = "top-left";
+    BadgePositionEnum["TOP_RIGHT"] = "top-right";
+    BadgePositionEnum["BOTTOM_LEFT"] = "bottom-left";
+    BadgePositionEnum["BOTTOM_RIGHT"] = "bottom-right";
+})(BadgePositionEnum || (BadgePositionEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2VFbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9iYWRnZS9CYWRnZUVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxpQkFLWDtBQUxELFdBQVksaUJBQWlCO0lBQzNCLDBDQUFxQixDQUFBO0lBQ3JCLDRDQUF1QixDQUFBO0lBQ3ZCLGdEQUEyQixDQUFBO0lBQzNCLGtEQUE2QixDQUFBO0FBQy9CLENBQUMsRUFMVyxpQkFBaUIsS0FBakIsaUJBQWlCLFFBSzVCIn0=

package/lib/components/badge/BadgeProps.d.ts

@@ -1,15 +1,25 @@
 /// <reference types="react" />
-import { Clickable } from './../../objects/facets/Clickable';
-import { BadgeColor, BadgeColorValues, BadgeTextDirection, BadgeTextDirectionValues } from './BadgeEnum';
-import { Accessibility } from '../../objects';
-/**
- * Badge Interface
- */
-export interface BadgeProps extends Clickable, Accessibility {
+import { BadgePositionEnum, BadgePositionValues } from '../../components/badge/BadgeEnum';
+import { View } from 'react-native';
+import { Accessibility, Dev, StatusState, StatusStateValues } from '../../objects';
+import { Clickable } from '../../objects/facets/Clickable';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { Invertable } from '../../objects/facets/Invertable';
+export interface BadgeProps extends Clickable, Accessibility, Invertable, Dev, CommonProps {
     children?: React.ReactNode;
-    content?: string | number;
-    textContent?: string;
-    direction?: BadgeTextDirection | BadgeTextDirectionValues;
-    className?: string;
-    color?: BadgeColor | BadgeColorValues;
+    label?: string | number;
+    position?: BadgePositionEnum | BadgePositionValues;
+    status?: StatusState | StatusStateValues;
+    variant?: BadgeVariant | BadgeVariantValues;
 }
+export type BadgeRef = HTMLSpanElement;
+export type BadgeNativeRef = View;
+export declare enum BadgeVariant {
+    SUCCESS = "SUCCESS",
+    INFO = "INFO",
+    WARNING = "WARNING",
+    ERROR = "ERROR",
+    MAIN = "MAIN",
+    ACCENT = "ACCENT"
+}
+export type BadgeVariantValues = `${BadgeVariant}`;

package/lib/components/badge/BadgeProps.js

@@ -1,2 +1,10 @@
-export {};
-//# sourceMappingURL=BadgeProps.js.map
+export var BadgeVariant;
+(function (BadgeVariant) {
+    BadgeVariant["SUCCESS"] = "SUCCESS";
+    BadgeVariant["INFO"] = "INFO";
+    BadgeVariant["WARNING"] = "WARNING";
+    BadgeVariant["ERROR"] = "ERROR";
+    BadgeVariant["MAIN"] = "MAIN";
+    BadgeVariant["ACCENT"] = "ACCENT";
+})(BadgeVariant || (BadgeVariant = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2VQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYmFkZ2UvQmFkZ2VQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQkEsTUFBTSxDQUFOLElBQVksWUFPWDtBQVBELFdBQVksWUFBWTtJQUN0QixtQ0FBbUIsQ0FBQTtJQUNuQiw2QkFBYSxDQUFBO0lBQ2IsbUNBQW1CLENBQUE7SUFDbkIsK0JBQWUsQ0FBQTtJQUNmLDZCQUFhLENBQUE7SUFDYixpQ0FBaUIsQ0FBQTtBQUNuQixDQUFDLEVBUFcsWUFBWSxLQUFaLFlBQVksUUFPdkIifQ==

package/lib/components/badge/BadgePropsDefaults.js

@@ -0,0 +1,113 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string",
+      "number"
+    ]
+  },
+  "position": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right",
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right"
+    ]
+  },
+  "status": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR"
+    ]
+  },
+  "variant": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "MAIN",
+      "ACCENT",
+      "MAIN",
+      "ACCENT"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

@@ -1,3 +1,3 @@
 import Badge from './Badge';
-export * from './BadgeEnum';
+export * from './BadgeProps';
 export { Badge };

package/lib/components/badge/index.js

@@ -1,4 +1,4 @@
 import Badge from './Badge';
-export * from './BadgeEnum';
+export * from './BadgeProps';
 export { Badge };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2JhZGdlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUUzQixjQUFjLGNBQWMsQ0FBQTtBQUM1QixPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUEifQ==

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

@@ -1,24 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
 import { BoxProps } from './BoxProps';
 /**
  * Box Component
  * @param children {React.ReactNode} Box child
  * @param onClick {Function} onClick Event
  * @param skeleton {boolean} Box skeleton
- * @param background {TrilogyColor} Box Content Background Color
- * @param leftBorder {TrilogyColor} Add Left Highlight Border With Semantic Color
+ * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param inverted {boolean} Inverted Box Color
+ * @param highlighted {TrilogyColor} Add Left Highlight Border With Semantic Color
  * @param shadowless {boolean} Remove box shadow
  * @param flat {boolean} Flat box remove shadow and add plain border
  * @param backgroundSrc {string} Source of background Image
  * @param testId {string} Test id
- * @param hat {boolean} Box with a component Sticker props:hat
  * @param active {boolean} Activated box
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
- * @param markup {BoxMarkup} Clickable Box => BoxMarkup.A Not clickable box => BoxMarkup.DIV || null
- * @param to {string} Box link
+ * @param className {string} Additional css classes
  * @param fullheight
+ * @param blank If href && blank : target Blank
  * @param others
  */
-declare const Box: ({ children, className, onClick, markup, skeleton, to, background, leftBorder, shadowless, backgroundSrc, testId, flat, hat, fullheight, active, ...others }: BoxProps) => JSX.Element;
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/box/Box.js

@@ -1,53 +1,50 @@
-import React, { useEffect, useState } from 'react';
-import { BoxMarkup } from './BoxProps';
-import { has, is } from '../../services/classify';
+import { __assign, __rest } from "tslib";
+import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 import { getBackgroundClassName } from '../../objects/atoms/Background';
-import { getColorClassName } from '../../objects';
+import { getColorClassName } from '../../objects/facets/Color';
+import { has, is } from '../../services/classify';
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Box Component
  * @param children {React.ReactNode} Box child
  * @param onClick {Function} onClick Event
  * @param skeleton {boolean} Box skeleton
- * @param background {TrilogyColor} Box Content Background Color
- * @param leftBorder {TrilogyColor} Add Left Highlight Border With Semantic Color
+ * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param inverted {boolean} Inverted Box Color
+ * @param highlighted {TrilogyColor} Add Left Highlight Border With Semantic Color
  * @param shadowless {boolean} Remove box shadow
  * @param flat {boolean} Flat box remove shadow and add plain border
  * @param backgroundSrc {string} Source of background Image
  * @param testId {string} Test id
- * @param hat {boolean} Box with a component Sticker props:hat
  * @param active {boolean} Activated box
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
- * @param markup {BoxMarkup} Clickable Box => BoxMarkup.A Not clickable box => BoxMarkup.DIV || null
- * @param to {string} Box link
+ * @param className {string} Additional css classes
  * @param fullheight
+ * @param blank If href && blank : target Blank
  * @param others
  */
-const Box = ({ children, className, onClick, markup, skeleton, to, background, leftBorder, shadowless, backgroundSrc, testId, flat, hat, fullheight, active, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const [isLoading, setIsLoading] = useState(skeleton || false);
-    const classes = hashClass(styled, clsx('box', shadowless && is('shadowless'), className, background && has(getBackgroundClassName(background)), isLoading ? is('loading') : is('loaded'), backgroundSrc && has('background'), leftBorder && `${is('highlighted')} ${is(getColorClassName(leftBorder))}`, flat && is('flat'), hat && has('hat'), fullheight && is('fullheight'), active && is('active')));
-    useEffect(() => {
-        setIsLoading(skeleton || false);
-    }, [skeleton]);
-    if (markup === BoxMarkup.A || to) {
-        return (React.createElement("a", { "data-testid": testId, href: to, onClick: (e) => {
-                // eslint-disable-next-line no-unused-expressions
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: classes, ...others }, children));
-    }
-    const hoverStyle = {
+var Box = React.forwardRef(function (_a, ref) {
+    var inverted = _a.inverted, children = _a.children, className = _a.className, id = _a.id, onClick = _a.onClick, skeleton = _a.skeleton, href = _a.href, blank = _a.blank, backgroundColor = _a.backgroundColor, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundSrc = _a.backgroundSrc, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, others = __rest(_a, ["inverted", "children", "className", "id", "onClick", "skeleton", "href", "blank", "backgroundColor", "highlighted", "shadowless", "backgroundSrc", "flat", "headerOffset", "fullheight", "active"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('box', shadowless && is('shadowless'), className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading'), highlighted && "".concat(is('highlighted'), " ").concat(is(getColorClassName(highlighted))), flat && is('flat'), headerOffset && is('offset-header'), fullheight && is('fullheight'), active && is('active')));
+    var Tag = href ? 'a' : 'div';
+    var hoverStyle = {
         cursor: 'pointer',
     };
-    return (React.createElement("div", { style: onClick && { ...hoverStyle }, "data-testid": testId, onClick: (e) => {
+    return (React.createElement(Tag, __assign({ ref: ref, id: id, style: onClick && __assign({}, hoverStyle), href: href }, (href && blank && {
+        target: '_blank',
+    }), { onClick: function (e) {
             // eslint-disable-next-line no-unused-expressions
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, className: classes, ...others, ...(backgroundSrc && {
-            style: { backgroundImage: `url(${backgroundSrc})`, backgroundSize: 'cover', backgroundPosition: '50%' },
-        }) }, children));
-};
+        }, className: classes }, others, (backgroundSrc && {
+        style: {
+            backgroundImage: "url(".concat(backgroundSrc, ")"),
+        },
+    })), children));
+});
+Box.displayName = ComponentName.Box;
 export default Box;
-//# sourceMappingURL=Box.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBR3REOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQkc7QUFDSCxJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMxQixVQUNFLEVBa0JDLEVBQ0QsR0FBRztJQWxCRCxJQUFBLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLGVBQWUscUJBQUEsRUFDZixXQUFXLGlCQUFBLEVBQ1gsVUFBVSxnQkFBQSxFQUNWLGFBQWEsbUJBQUEsRUFDYixJQUFJLFVBQUEsRUFDSixZQUFZLGtCQUFBLEVBQ1osVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FqQlgsb01Ba0JDLENBRFU7SUFJSCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsS0FBSyxFQUNMLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLFNBQVMsRUFDVCxlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLEVBQy9ELGFBQWEsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ2xDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQzFCLFFBQVEsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3pCLFdBQVcsSUFBSSxVQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsY0FBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBRSxFQUMzRSxJQUFJLElBQUksRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUNsQixZQUFZLElBQUksRUFBRSxDQUFDLGVBQWUsQ0FBQyxFQUNuQyxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUN2QixDQUNGLENBQUE7SUFFRCxJQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFBO0lBRTlCLElBQU0sVUFBVSxHQUF3QjtRQUN0QyxNQUFNLEVBQUUsU0FBUztLQUNsQixDQUFBO0lBRUQsT0FBTyxDQUNMLG9CQUFDLEdBQUcsYUFDRixHQUFHLEVBQUUsR0FBMkUsRUFDaEYsRUFBRSxFQUFFLEVBQUUsRUFDTixLQUFLLEVBQUUsT0FBTyxpQkFBUyxVQUFVLENBQUUsRUFDbkMsSUFBSSxFQUFFLElBQUksSUFDTixDQUFDLElBQUksSUFBSSxLQUFLLElBQUk7UUFDcEIsTUFBTSxFQUFFLFFBQVE7S0FDakIsQ0FBQyxJQUNGLE9BQU8sRUFBRSxVQUFDLENBQUM7WUFDVCxpREFBaUQ7WUFDakQsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBO1FBQ2QsQ0FBQyxFQUNELFNBQVMsRUFBRSxPQUFPLElBQ2QsTUFBTSxFQUNOLENBQUMsYUFBYSxJQUFJO1FBQ3BCLEtBQUssRUFBRTtZQUNMLGVBQWUsRUFBRSxjQUFPLGFBQWEsTUFBRztTQUN6QztLQUNGLENBQUMsR0FFRCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFDRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxHQUFHLENBQUE7QUFDbkMsZUFBZSxHQUFHLENBQUEifQ==

package/lib/components/box/Box.native.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { BoxProps } from './BoxProps';
-import { ComponentName } from '../enumsComponentsName';
+import { BoxNativeRef, BoxProps } from '../../components/box/BoxProps';
+import React from 'react';
 /**
  * Box Component
  * @param children {React.ReactNode} Childrens
  * @param onClick {Function} onClick Event
  * @param skeleton {boolean} Box skeleton
- * @param background {TrilogyColor} Box Content Background Color
- * @param leftBorder {TrilogyColor} Add Left Highlight Border With Semantic Color
+ * @param backgroundColor {TrilogyColor} Box Content Background Color
+ * @param highlighted {TrilogyColor} Add Left Highlight Border With Semantic Color
  * @param testId {string} Test id
  * @param shadowless {boolean} Remove box shadow
  * @param backgroundSrc {string} Source of background Image
+ * @param inverted {boolean} Inverted Box Color
  * @param flat {boolean} Flat box remove shadow and add plain border
  * @param hat {boolean} Box with a component Sticker props:hat
  * @param flex {boolean} Flex: 1 to the box if usage of Image for Example
@@ -18,8 +18,5 @@ import { ComponentName } from '../enumsComponentsName';
  * @param active {boolean} Activated box
  * @param others
  */
-declare const Box: {
-    ({ children, onClick, skeleton, background, leftBorder, testId, shadowless, backgroundSrc, flat, hat, fullheight, active, ...others }: BoxProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<BoxNativeRef>>;
 export default Box;