@trilogy-ds/react 0.0.1-beta-112 → 0.0.1-beta-115

package/lib/components/button/ButtonPropsDefaults.js

@@ -0,0 +1,380 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "a",
+      "button",
+      "input",
+      "button",
+      "input",
+      "a"
+    ]
+  },
+  "href": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "to": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "loading": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "routerLink": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "symbol",
+      "object",
+      "text",
+      "search",
+      "a",
+      "abbr",
+      "address",
+      "area",
+      "article",
+      "aside",
+      "audio",
+      "b",
+      "base",
+      "bdi",
+      "bdo",
+      "big",
+      "blockquote",
+      "body",
+      "br",
+      "button",
+      "canvas",
+      "caption",
+      "center",
+      "cite",
+      "code",
+      "col",
+      "colgroup",
+      "data",
+      "datalist",
+      "dd",
+      "del",
+      "details",
+      "dfn",
+      "dialog",
+      "div",
+      "dl",
+      "dt",
+      "em",
+      "embed",
+      "fieldset",
+      "figcaption",
+      "figure",
+      "footer",
+      "form",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "head",
+      "header",
+      "hgroup",
+      "hr",
+      "html",
+      "i",
+      "iframe",
+      "img",
+      "input",
+      "ins",
+      "kbd",
+      "keygen",
+      "label",
+      "legend",
+      "li",
+      "link",
+      "main",
+      "map",
+      "mark",
+      "menu",
+      "menuitem",
+      "meta",
+      "meter",
+      "nav",
+      "noindex",
+      "noscript",
+      "ol",
+      "optgroup",
+      "option",
+      "output",
+      "p",
+      "param",
+      "picture",
+      "pre",
+      "progress",
+      "q",
+      "rp",
+      "rt",
+      "ruby",
+      "s",
+      "samp",
+      "slot",
+      "script",
+      "section",
+      "select",
+      "small",
+      "source",
+      "span",
+      "strong",
+      "style",
+      "sub",
+      "summary",
+      "sup",
+      "table",
+      "template",
+      "tbody",
+      "td",
+      "textarea",
+      "tfoot",
+      "th",
+      "thead",
+      "time",
+      "title",
+      "tr",
+      "track",
+      "u",
+      "ul",
+      "var",
+      "video",
+      "wbr",
+      "webview",
+      "svg",
+      "animate",
+      "animateMotion",
+      "animateTransform",
+      "circle",
+      "clipPath",
+      "defs",
+      "desc",
+      "ellipse",
+      "feBlend",
+      "feColorMatrix",
+      "feComponentTransfer",
+      "feComposite",
+      "feConvolveMatrix",
+      "feDiffuseLighting",
+      "feDisplacementMap",
+      "feDistantLight",
+      "feDropShadow",
+      "feFlood",
+      "feFuncA",
+      "feFuncB",
+      "feFuncG",
+      "feFuncR",
+      "feGaussianBlur",
+      "feImage",
+      "feMerge",
+      "feMergeNode",
+      "feMorphology",
+      "feOffset",
+      "fePointLight",
+      "feSpecularLighting",
+      "feSpotLight",
+      "feTile",
+      "feTurbulence",
+      "filter",
+      "foreignObject",
+      "g",
+      "image",
+      "line",
+      "linearGradient",
+      "marker",
+      "mask",
+      "metadata",
+      "mpath",
+      "path",
+      "pattern",
+      "polygon",
+      "polyline",
+      "radialGradient",
+      "rect",
+      "set",
+      "stop",
+      "switch",
+      "textPath",
+      "tspan",
+      "use",
+      "view",
+      "ComponentClass<any, any>",
+      "FunctionComponent<any>"
+    ]
+  },
+  "type": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "button",
+      "button",
+      "reset",
+      "submit",
+      "reset",
+      "submit"
+    ]
+  },
+  "iconName": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa"
+    ]
+  },
+  "variant": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "CONVERSION",
+      "PRIMARY",
+      "SECONDARY",
+      "GHOST",
+      "CONVERSION",
+      "PRIMARY",
+      "SECONDARY",
+      "GHOST"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "accessibilityActivate": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "fullwidth": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  }
+};

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

@@ -1,5 +1,4 @@
 import Button from './Button';
 import { ButtonList } from './list';
-import ButtonExample from './Button.example';
 export * from './ButtonEnum';
-export { Button, ButtonList, ButtonExample };
+export { Button, ButtonList };

package/lib/components/button/index.js

@@ -1,6 +1,5 @@
 import Button from './Button';
 import { ButtonList } from './list';
-import ButtonExample from './Button.example';
 export * from './ButtonEnum';
-export { Button, ButtonList, ButtonExample };
+export { Button, ButtonList };
 //# sourceMappingURL=index.js.map

package/lib/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEnC,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAA"}

package/lib/components/button/list/ButtonList.native.js

@@ -3,12 +3,12 @@ import { AutoLayoutWrapper } from "../../../components/autolayout";
 import { SpacerSize } from "../../../components/spacer";
 import { SpacingMatrixMode } from "../../../components/autolayout/SpacingMatrix";
 import { ComponentName } from "../../../components/enumsComponentsName";
-const { MEDIUM, SMALL } = SpacerSize;
+const { THREE, TWO } = SpacerSize;
 const { INSERT_SPACE_BETWEEN } = SpacingMatrixMode;
 const SPACING_MATRIX = [
-    [INSERT_SPACE_BETWEEN, "Button", "Divider", SMALL],
-    [INSERT_SPACE_BETWEEN, "Divider", "Button", SMALL],
-    [INSERT_SPACE_BETWEEN, "Button", "Button", MEDIUM],
+    [INSERT_SPACE_BETWEEN, "Button", "Divider", TWO],
+    [INSERT_SPACE_BETWEEN, "Divider", "Button", TWO],
+    [INSERT_SPACE_BETWEEN, "Button", "Button", THREE],
 ];
 /**
  * ButtonList Native Component

package/lib/components/button/list/ButtonList.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonList.native.js","sourceRoot":"","sources":["../../../../components/button/list/ButtonList.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAKzE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;AACpC,MAAM,EAAE,oBAAoB,EAAE,GAAG,iBAAiB,CAAA;AAElD,MAAM,cAAc,GAAkB;IACpC,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC;IAClD,CAAC,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC;IAClD,CAAC,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;CACnD,CAAA;AAED;;;;GAIG;AAEH;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,UAAU,GAAG,cAAc,EAC3B,QAAQ,GACQ,EAAe,EAAE;IACjC,OAAO,oBAAC,iBAAiB,OAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAI,CAAA;AAC5D,CAAC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,aAAa,CAAC,UAAU,CAAA;AAEjD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ButtonList.native.js","sourceRoot":"","sources":["../../../../components/button/list/ButtonList.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAKzE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,UAAU,CAAA;AACjC,MAAM,EAAE,oBAAoB,EAAE,GAAG,iBAAiB,CAAA;AAElD,MAAM,cAAc,GAAkB;IACpC,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC;IAChD,CAAC,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC;IAChD,CAAC,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;CAClD,CAAA;AAED;;;;GAIG;AAEH;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,UAAU,GAAG,cAAc,EAC3B,QAAQ,GACQ,EAAe,EAAE;IACjC,OAAO,oBAAC,iBAAiB,OAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAI,CAAA;AAC5D,CAAC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,aAAa,CAAC,UAAU,CAAA;AAEjD,eAAe,UAAU,CAAA"}

package/lib/components/button/list/ButtonListPropsDefaults.js

@@ -0,0 +1,19 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "JSXElementConstructor<any>>",
+      "ButtonListChildrenTypes[]"
+    ]
+  },
+  "autolayout": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "SpacingMatrix"
+    ]
+  }
+};

package/lib/components/button/list/ButtonListWebPropsDefaults.js

@@ -0,0 +1,50 @@
+export default {
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "isMobile": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "vertical": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "JSXElementConstructor<any>>",
+      "ButtonListChildrenTypes[]"
+    ]
+  },
+  "autolayout": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "SpacingMatrix"
+    ]
+  },
+  "centered": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  }
+};

package/lib/components/card/Card.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import { CardProps } from "./CardProps";
+export declare const CardContext: React.Context<{
+    horizontal: boolean;
+}>;
 /**
  * Card Component
  * @param flat {boolean} Adding border for Card content
  * @param horizontal {boolean} Horizontal Card orientation
- * @param background {TrilogyColor} Card Background Color
+ * @param backgroundColor {TrilogyColor} Card Background Color
  * @param inverted {boolean} Inverted Card Color
  * @param floating {boolean} Floating card
  * @param onClick {Function} onClick Event
@@ -17,6 +20,10 @@ import { CardProps } from "./CardProps";
  * @param to {string} Card link
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
+ * @param backgroundSrc {string} Source of background Image
+ * @param align { Alignable | AlignableValues} align content
+ * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
+ * @param testId {string} Test Id for Test Integration
  */
-declare const Card: ({ className, background, backgroundSrc, inverted, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }: CardProps) => JSX.Element;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
 export default Card;

package/lib/components/card/Card.js

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, createContext } from "react";
 import clsx from "clsx";
 import { CardMarkup } from "./CardProps";
 import { has, is } from "../../services/classify";
 import { getAlignClassName, getBackgroundClassName } from "../../objects";
 import { hashClass } from "../../helpers";
 import { useTrilogyContext } from "../../context";
+export const CardContext = createContext({ horizontal: false });
 /**
  * Card Component
  * @param flat {boolean} Adding border for Card content
  * @param horizontal {boolean} Horizontal Card orientation
- * @param background {TrilogyColor} Card Background Color
+ * @param backgroundColor {TrilogyColor} Card Background Color
  * @param inverted {boolean} Inverted Card Color
  * @param floating {boolean} Floating card
  * @param onClick {Function} onClick Event
@@ -22,8 +23,13 @@ import { useTrilogyContext } from "../../context";
  * @param to {string} Card link
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
+ * @param backgroundSrc {string} Source of background Image
+ * @param align { Alignable | AlignableValues} align content
+ * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
+ * @param testId {string} Test Id for Test Integration
  */
-const Card = ({ className, background, backgroundSrc, inverted, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }) => {
+const Card = React.forwardRef((props, ref) => {
+    const { className, backgroundColor, backgroundSrc, inverted, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others } = props;
     const [isLoading, setIsLoading] = useState(skeleton || false);
     const { styled } = useTrilogyContext();
     useEffect(() => {
@@ -32,15 +38,15 @@ const Card = ({ className, background, backgroundSrc, inverted, flat, horizontal
     const hoverStyle = {
         cursor: "pointer",
     };
-    const classes = hashClass(styled, clsx("card", background && has(getBackgroundClassName(background)), backgroundSrc && has("background"), (inverted && is("inverted")) || is("base"), flat && is("flat"), horizontal && [is("horizontal"), is("vcentered")], floating && is("floating"), align && is(getAlignClassName(align)), justify && is(justify), isLoading ? is("loading") : is("loaded"), reversed && is("reversed"), className, fullheight && is("fullheight"), active && is("active")));
+    const classes = hashClass(styled, clsx("card", backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has("background"), (inverted && is("inverted")) || is("base"), flat && !floating && is("flat"), horizontal && [is("horizontal"), is("vcentered")], floating && !flat && is("floating"), align && is(getAlignClassName(align)), justify && is(justify), isLoading ? is("loading") : is("loaded"), reversed && is("reversed"), className, fullheight && is("fullheight"), active && is("active")));
     if (markup === CardMarkup.A) {
         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);
                 e.stopPropagation();
-            }, ...others, className: classes }));
+            }, ...others, className: classes, ref: ref }));
     }
-    return (React.createElement("div", { "data-testid": testId, onClick: onClick && onClick, className: classes, ...others, style: onClick && { ...hoverStyle } }));
-};
+    return (React.createElement("div", { "data-testid": testId, onClick: onClick && onClick, className: classes, style: onClick && { ...hoverStyle }, ...others, ref: ref }));
+});
 export default Card;
 //# sourceMappingURL=Card.js.map

package/lib/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../components/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,UAAU,EAAa,MAAM,aAAa,CAAA;AACnD,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,SAAS,EACT,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,EAAE,EACF,UAAU,EACV,MAAM,EACN,GAAG,MAAM,EACC,EAAe,EAAE;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,QAAQ,IAAI,KAAK,CAAC,CAAA;IACtE,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,UAAU,GAAwB;QACtC,MAAM,EAAE,SAAS;KAClB,CAAA;IAED,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CACF,MAAM,EACN,UAAU,IAAI,GAAG,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,EACrD,aAAa,IAAI,GAAG,CAAC,YAAY,CAAC,EAClC,CAAC,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,EAE1C,IAAI,IAAI,EAAE,CAAC,MAAM,CAAC,EAClB,UAAU,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EACjD,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,EAC1B,KAAK,IAAI,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EACrC,OAAO,IAAI,EAAE,CAAC,OAAO,CAAC,EACtB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EACxC,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,EAC1B,SAAS,EACT,UAAU,IAAI,EAAE,CAAC,YAAY,CAAC,EAC9B,MAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,CACvB,CACF,CAAA;IAED,IAAI,MAAM,KAAK,UAAU,CAAC,CAAC,EAAE;QAC3B,OAAO,CACL,0CACe,MAAM,EACnB,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,iDAAiD;gBACjD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;gBACZ,CAAC,CAAC,eAAe,EAAE,CAAA;YACrB,CAAC,KACG,MAAM,EACV,SAAS,EAAE,OAAO,GAClB,CACH,CAAA;KACF;IAED,OAAO,CACL,4CACe,MAAM,EACnB,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,SAAS,EAAE,OAAO,KACd,MAAM,EACV,KAAK,EAAE,OAAO,IAAI,EAAE,GAAG,UAAU,EAAE,GACnC,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../components/card/Card.tsx"],"names":[],"mappings":"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"}

package/lib/components/card/Card.native.d.ts

@@ -17,15 +17,14 @@ export declare const CardContext: React.Context<{
  * @param onClick {Function} onClick Event
  * @param skeleton {boolean} Loading card
  * @param reversed {boolean} Reversed card
- * @param background {TrilogyColor} Card Background Color
+ * @param backgroundColor {TrilogyColor} Card Background Color
  * @param inverted {boolean} Inverted Card Color
- * @param backgroundColor
  * @param fullheight {boolean}
  * @param active {boolean} Activated box
  * @param others
  */
 declare const Card: {
-    ({ children, flat, horizontal, floating, onClick, skeleton, background, reversed, fullheight, active, inverted, ...others }: CardProps): JSX.Element;
+    ({ children, flat, horizontal, floating, onClick, skeleton, backgroundColor, reversed, fullheight, active, inverted, ...others }: CardProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Card;

package/lib/components/card/Card.native.js

@@ -3,7 +3,6 @@ import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
 import ContentLoader, { Rect } from "react-content-loader/native";
 import { ComponentName } from "../../components/enumsComponentsName";
-import { getBackgroundStyle } from "../../objects/atoms/Background";
 import { StatesContext } from "../../context/providerStates";
 export const CardContext = createContext({
     floating: false,
@@ -21,14 +20,13 @@ export const CardContext = createContext({
  * @param onClick {Function} onClick Event
  * @param skeleton {boolean} Loading card
  * @param reversed {boolean} Reversed card
- * @param background {TrilogyColor} Card Background Color
+ * @param backgroundColor {TrilogyColor} Card Background Color
  * @param inverted {boolean} Inverted Card Color
- * @param backgroundColor
  * @param fullheight {boolean}
  * @param active {boolean} Activated box
  * @param others
  */
-const Card = ({ children, flat, horizontal, floating, onClick, skeleton, background, reversed, fullheight, active, inverted, ...others }) => {
+const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgroundColor, reversed, fullheight, active, inverted, ...others }) => {
     const borderColor = "#ccc";
     const cardRadius = 6;
     const colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
@@ -39,9 +37,10 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
             borderWidth: (flat && 1) || (active && 2) || 0,
             borderColor: (flat && borderColor) ||
                 (active && getColorStyle(TrilogyColor.MAIN)) ||
+                (active === false && getColorStyle(TrilogyColor.NEUTRAL)) ||
                 "transparent",
             borderRadius: cardRadius,
-            backgroundColor: background ? getBackgroundStyle(background) : colorBgc,
+            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
             flex: fullheight ? 1 : 0,
         },
         horizontal: {
@@ -64,7 +63,7 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
         skeleton: {
             width: "100%",
             minHeight: 50,
-            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
             overflow: "hidden",
             borderRadius: cardRadius,
         },
@@ -92,7 +91,7 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
     return onClick ? (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
         React.createElement(CardContext.Provider, { value: {
                 floating: floating || false,
-                backgroundColor: background || "white",
+                backgroundColor: backgroundColor || "white",
                 horizontal: horizontal || false,
                 reversed: reversed || false,
                 active: active || false,
@@ -101,7 +100,7 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
                 React.createElement(TouchableOpacity, { testID: 'card-click-test', style: { width: "100%" }, onPress: onClick, activeOpacity: 0.85 }, cardView))))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
         React.createElement(CardContext.Provider, { value: {
                 floating: floating || false,
-                backgroundColor: background || "white",
+                backgroundColor: backgroundColor || "white",
                 horizontal: horizontal || false,
                 reversed: reversed || false,
                 active: active || false,