@trilogy-ds/react 0.0.1-beta.14 → 0.0.1-beta.16

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { BoxProps } from './BoxProps';
+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 inverted {boolean} Inverted Box Color
  * @param leftBorder {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
@@ -20,5 +21,5 @@ import { BoxProps } from './BoxProps';
  * @param fullheight
  * @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: ({ inverted, children, className, onClick, markup, skeleton, to, background, leftBorder, shadowless, backgroundSrc, testId, flat, hat, fullheight, active, ...others }: BoxProps) => JSX.Element;
 export default Box;

package/lib/components/box/Box.js

@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import { BoxMarkup } from './BoxProps';
-import { has, is } from '../../services/classify';
-import { getBackgroundClassName } from '../../objects/atoms/Background';
-import { getColorClassName } from '../../objects';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React, { useEffect, useState } from "react";
+import { BoxMarkup } from "./BoxProps";
+import { has, is } from "../../services/classify";
+import { getBackgroundClassName } from "../../objects/atoms/Background";
+import { getColorClassName } from "../../objects";
+import clsx from "clsx";
+import { hashClass } from "../../helpers";
+import { useTrilogyContext } from "../../context";
 /**
  * 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 inverted {boolean} Inverted Box Color
  * @param leftBorder {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
@@ -26,10 +27,10 @@ import { useTrilogyContext } from '../../context';
  * @param fullheight
  * @param others
  */
-const Box = ({ children, className, onClick, markup, skeleton, to, background, leftBorder, shadowless, backgroundSrc, testId, flat, hat, fullheight, active, ...others }) => {
+const Box = ({ inverted, 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')));
+    const classes = hashClass(styled, clsx("box", shadowless && is("shadowless"), className, background && has(getBackgroundClassName(background)), backgroundSrc && has("background"), (inverted && is("inverted")) || is("base"), isLoading ? is("loading") : is("loaded"), leftBorder && `${is("highlighted")} ${is(getColorClassName(leftBorder))}`, flat && is("flat"), hat && has("hat"), fullheight && is("fullheight"), active && is("active")));
     useEffect(() => {
         setIsLoading(skeleton || false);
     }, [skeleton]);
@@ -40,13 +41,17 @@ const Box = ({ children, className, onClick, markup, skeleton, to, background, l
             }, className: classes, ...others }, children));
     }
     const hoverStyle = {
-        cursor: 'pointer',
+        cursor: "pointer",
     };
     return (React.createElement("div", { style: onClick && { ...hoverStyle }, "data-testid": testId, onClick: (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%' },
+            style: {
+                backgroundImage: `url(${backgroundSrc})`,
+                backgroundSize: "cover",
+                backgroundPosition: "50%",
+            },
         }) }, children));
 };
 export default Box;

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../components/box/Box.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../components/box/Box.tsx"],"names":[],"mappings":"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"}

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

@@ -11,6 +11,7 @@ import { ComponentName } from "../enumsComponentsName";
  * @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
@@ -19,7 +20,7 @@ import { ComponentName } from "../enumsComponentsName";
  * @param others
  */
 declare const Box: {
-    ({ children, onClick, skeleton, background, leftBorder, testId, shadowless, backgroundSrc, flat, hat, fullheight, active, ...others }: BoxProps): JSX.Element;
+    ({ children, onClick, skeleton, leftBorder, testId, shadowless, background, backgroundSrc, inverted, flat, hat, fullheight, active, ...others }: BoxProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Box;

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

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View, } from "react-native";
-import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
+import { getColorStyle, TrilogyColor, } from "../../objects/facets/Color";
 import ContentLoader, { Rect } from "react-content-loader/native";
 import { getBackgroundStyle } from "../../objects/atoms/Background";
 import { ComponentName } from "../enumsComponentsName";
+import { StatesContext } from "../../context/providerStates";
 /**
  * Box Component
  * @param children {React.ReactNode} Childrens
@@ -14,6 +15,7 @@ import { ComponentName } from "../enumsComponentsName";
  * @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
@@ -21,10 +23,10 @@ import { ComponentName } from "../enumsComponentsName";
  * @param active {boolean} Activated box
  * @param others
  */
-const Box = ({ children, onClick, skeleton, background, leftBorder, testId, shadowless, backgroundSrc, flat, hat, fullheight, active, ...others }) => {
+const Box = ({ children, onClick, skeleton, leftBorder, testId, shadowless, background, backgroundSrc, inverted, flat, hat, fullheight, active, ...others }) => {
     const colorBgc = getColorStyle(TrilogyColor.WHITE);
-    const boxRadius = 6;
     const [boxHeight, setBoxHeight] = useState(0);
+    const boxRadius = 6;
     const styles = StyleSheet.create({
         box: {
             width: "100%",
@@ -102,9 +104,11 @@ const Box = ({ children, onClick, skeleton, background, leftBorder, testId, shad
                 ? backgroundSrc
                 : { uri: backgroundSrc } },
             Boolean(leftBorder) && React.createElement(View, { style: styles.leftBorder }),
-            React.createElement(View, { style: styles.column }, children))) : (React.createElement(React.Fragment, null,
+            React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
+                React.createElement(View, { style: styles.column }, children)))) : (React.createElement(React.Fragment, null,
             Boolean(leftBorder) && React.createElement(View, { style: styles.leftBorder }),
-            React.createElement(View, { style: styles.column }, children)))));
+            React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
+                React.createElement(View, { style: styles.column }, children))))));
     }
     return (React.createElement(View, { onLayout: (event) => {
             const { height } = event.nativeEvent.layout;
@@ -115,7 +119,8 @@ const Box = ({ children, onClick, skeleton, background, leftBorder, testId, shad
             ? backgroundSrc
             : { uri: backgroundSrc } },
         Boolean(leftBorder) && React.createElement(View, { style: styles.leftBorder }),
-        React.createElement(View, { style: styles.column }, children))) : (React.createElement(React.Fragment, null,
+        React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
+            React.createElement(View, { style: styles.column }, children)))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
         Boolean(leftBorder) && React.createElement(View, { style: styles.leftBorder }),
         React.createElement(View, { style: styles.column }, children)))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Box.native.js","sourceRoot":"","sources":["../../../components/box/Box.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.native.js","sourceRoot":"","sources":["../../../components/box/Box.native.tsx"],"names":[],"mappings":"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"}

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

@@ -18,7 +18,6 @@ export interface BoxProps extends BackgroundProps, Clickable, Fullheight, Access
     to?: string;
     leftBorder?: TrilogyColor | TrilogyColorValues;
     shadowless?: boolean;
-    background?: TrilogyColor | TrilogyColorValues;
     backgroundSrc?: string;
     hat?: boolean;
     flat?: boolean;

package/lib/components/box/header/BoxHeader.native.js

@@ -1,7 +1,9 @@
 import * as React from "react";
+import { useContext } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { getColorStyle, TrilogyColor } from "../../../objects/facets/Color";
 import { ComponentName } from "../../enumsComponentsName";
+import { StatesContext } from "../../../context/providerStates";
 /**
  * Box Header Component
  * @param children {React.ReactNode} Childrens
@@ -13,6 +15,7 @@ import { ComponentName } from "../../enumsComponentsName";
  * @param others
  */
 const BoxHeader = ({ children, variant, pulledRight, pulledLeft, centered, help, ...others }) => {
+    const statesContext = useContext(StatesContext);
     const headerBgc = variant
         ? getColorStyle(variant)
         : getColorStyle(TrilogyColor.MAIN);
@@ -25,6 +28,7 @@ const BoxHeader = ({ children, variant, pulledRight, pulledLeft, centered, help,
             paddingLeft: 16,
             borderTopLeftRadius: 6,
             borderTopRightRadius: 6,
+            marginTop: (statesContext.active && -2) || (statesContext.flat && -1) || 0,
             justifyContent: "space-between",
             alignItems: (centered && "center") ||
                 (pulledRight && "flex-end") ||

package/lib/components/box/header/BoxHeader.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxHeader.native.js","sourceRoot":"","sources":["../../../../components/box/header/BoxHeader.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;;;;;;;;GASG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,GAAG,MAAM,EACM,EAAe,EAAE;IAChC,MAAM,SAAS,GAAG,OAAO;QACvB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;QACxB,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IACpC,MAAM,SAAS,GAAG,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAEnD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,SAAS;YAC1B,OAAO,EAAE,EAAE;YACX,WAAW,EAAE,EAAE;YACf,mBAAmB,EAAE,CAAC;YACtB,oBAAoB,EAAE,CAAC;YACvB,cAAc,EAAE,eAAe;YAC/B,UAAU,EACR,CAAC,QAAQ,IAAI,QAAQ,CAAC;gBACtB,CAAC,WAAW,IAAI,UAAU,CAAC;gBAC3B,CAAC,UAAU,IAAI,YAAY,CAAC;gBAC5B,YAAY;YACd,aAAa,EAAE,KAAK;SACrB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,KAAK;SAClB;QACD,aAAa,EAAE;YACb,SAAS,EAAE,QAAQ;SACpB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,KAAK;YACjB,UAAU,EAAE,EAAE;SACf;KACF,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAM,MAAM;QACxC,QAAQ,IAAI,OAAO,QAAQ,CAAC,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpD,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAQ,CACpD,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;QAEA,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa;YAC/B,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CAClC,CACR,CACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAA;AAE/C,eAAe,SAAS,CAAA"}
+{"version":3,"file":"BoxHeader.native.js","sourceRoot":"","sources":["../../../../components/box/header/BoxHeader.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAA;AAE/D;;;;;;;;;GASG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,GAAG,MAAM,EACM,EAAe,EAAE;IAChC,MAAM,aAAa,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAE/C,MAAM,SAAS,GAAG,OAAO;QACvB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;QACxB,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IACpC,MAAM,SAAS,GAAG,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAEnD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,SAAS;YAC1B,OAAO,EAAE,EAAE;YACX,WAAW,EAAE,EAAE;YACf,mBAAmB,EAAE,CAAC;YACtB,oBAAoB,EAAE,CAAC;YACvB,SAAS,EACP,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YACjE,cAAc,EAAE,eAAe;YAC/B,UAAU,EACR,CAAC,QAAQ,IAAI,QAAQ,CAAC;gBACtB,CAAC,WAAW,IAAI,UAAU,CAAC;gBAC3B,CAAC,UAAU,IAAI,YAAY,CAAC;gBAC5B,YAAY;YACd,aAAa,EAAE,KAAK;SACrB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,KAAK;SAClB;QACD,aAAa,EAAE;YACb,SAAS,EAAE,QAAQ;SACpB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,KAAK;YACjB,UAAU,EAAE,EAAE;SACf;KACF,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAM,MAAM;QACxC,QAAQ,IAAI,OAAO,QAAQ,CAAC,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpD,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAQ,CACpD,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;QAEA,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa;YAC/B,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CAClC,CACR,CACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAA;AAE/C,eAAe,SAAS,CAAA"}

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { CardProps } from './CardProps';
+import { CardProps } from "./CardProps";
 /**
  * Card Component
  * @param flat {boolean} Adding border for Card content
  * @param horizontal {boolean} Horizontal Card orientation
+ * @param background {TrilogyColor} Card Background Color
+ * @param inverted {boolean} Inverted Card Color
  * @param floating {boolean} Floating card
  * @param onClick {Function} onClick Event
  * @param children {React.ReactNode}
@@ -16,5 +18,5 @@ import { CardProps } from './CardProps';
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
  */
-declare const Card: ({ className, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }: CardProps) => JSX.Element;
+declare const Card: ({ className, background, backgroundSrc, inverted, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }: CardProps) => JSX.Element;
 export default Card;

package/lib/components/card/Card.js

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { CardMarkup } from './CardProps';
-import { is } from '../../services/classify';
-import { getAlignClassName } from '../../objects';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React, { useEffect, useState } 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";
 /**
  * Card Component
  * @param flat {boolean} Adding border for Card content
  * @param horizontal {boolean} Horizontal Card orientation
+ * @param background {TrilogyColor} Card Background Color
+ * @param inverted {boolean} Inverted Card Color
  * @param floating {boolean} Floating card
  * @param onClick {Function} onClick Event
  * @param children {React.ReactNode}
@@ -21,16 +23,16 @@ import { useTrilogyContext } from '../../context';
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
  */
-const Card = ({ className, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }) => {
+const Card = ({ className, background, backgroundSrc, inverted, flat, horizontal, floating, align, justify, skeleton, onClick, reversed, testId, markup, to, fullheight, active, ...others }) => {
     const [isLoading, setIsLoading] = useState(skeleton || false);
     const { styled } = useTrilogyContext();
     useEffect(() => {
         setIsLoading(skeleton || false);
     }, [skeleton]);
     const hoverStyle = {
-        cursor: 'pointer',
+        cursor: "pointer",
     };
-    const classes = hashClass(styled, clsx('card', 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", 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")));
     if (markup === CardMarkup.A) {
         return (React.createElement("a", { "data-testid": testId, href: to, onClick: (e) => {
                 // eslint-disable-next-line no-unused-expressions

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,EAAE,EAAE,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,SAAS,EACT,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,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":"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,yBAAyB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;;;;;;;;;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"}

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

@@ -3,7 +3,7 @@ import { CardProps } from "./CardProps";
 import { ComponentName } from "../enumsComponentsName";
 export declare const CardContext: React.Context<{
     floating: boolean;
-    backgroundColor: string;
+    backgroundColor: {};
     horizontal: boolean;
     reversed: boolean;
     active: boolean;
@@ -17,13 +17,15 @@ 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 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, backgroundColor, reversed, fullheight, active, ...others }: CardProps): JSX.Element;
+    ({ children, flat, horizontal, floating, onClick, skeleton, background, reversed, fullheight, active, inverted, ...others }: CardProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Card;

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

@@ -3,9 +3,11 @@ 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 "../enumsComponentsName";
+import { getBackgroundStyle } from "../../objects/atoms/Background";
+import { StatesContext } from "../../context/providerStates";
 export const CardContext = createContext({
     floating: false,
-    backgroundColor: "",
+    backgroundColor: "" || {},
     horizontal: false,
     reversed: false,
     active: false,
@@ -19,14 +21,17 @@ 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 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, backgroundColor = TrilogyColor.BACKGROUND, reversed, fullheight, active, ...others }) => {
+const Card = ({ children, flat, horizontal, floating, onClick, skeleton, background, reversed, fullheight, active, inverted, ...others }) => {
     const borderColor = "#ccc";
     const cardRadius = 6;
+    const colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
     const styles = StyleSheet.create({
         card: {
             width: "100%",
@@ -36,9 +41,7 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
                 (active && getColorStyle(TrilogyColor.MAIN)) ||
                 "transparent",
             borderRadius: cardRadius,
-            backgroundColor: backgroundColor === "transparent"
-                ? "rgba(0, 0, 0, 0.0)"
-                : getColorStyle(TrilogyColor.WHITE),
+            backgroundColor: background ? getBackgroundStyle(background) : colorBgc,
             flex: fullheight ? 1 : 0,
         },
         horizontal: {
@@ -53,7 +56,6 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
             elevation: 5,
         },
         contentHorizontal: {
-            backgroundColor: "red",
             borderWidth: 2,
             margin: 2,
             padding: 10,
@@ -87,21 +89,23 @@ const Card = ({ children, flat, horizontal, floating, onClick, skeleton, backgro
     else {
         cardView = (React.createElement(View, { style: [styles.card], ...others }, children));
     }
-    return onClick ? (React.createElement(CardContext.Provider, { value: {
-            floating: floating || false,
-            backgroundColor: backgroundColor || "white",
-            horizontal: horizontal || false,
-            reversed: reversed || false,
-            active: active || false,
-        } },
-        React.createElement(View, { style: { width: "100%" } },
-            React.createElement(TouchableOpacity, { style: { width: "100%" }, onPress: onClick, activeOpacity: 0.85 }, cardView)))) : (React.createElement(CardContext.Provider, { value: {
-            floating: floating || false,
-            backgroundColor: backgroundColor || "white",
-            horizontal: horizontal || false,
-            reversed: reversed || false,
-            active: active || false,
-        } }, cardView));
+    return onClick ? (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
+        React.createElement(CardContext.Provider, { value: {
+                floating: floating || false,
+                backgroundColor: background || "white",
+                horizontal: horizontal || false,
+                reversed: reversed || false,
+                active: active || false,
+            } },
+            React.createElement(View, { style: { width: "100%" } },
+                React.createElement(TouchableOpacity, { 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",
+                horizontal: horizontal || false,
+                reversed: reversed || false,
+                active: active || false,
+            } }, cardView)));
 };
 Card.displayName = ComponentName.Card;
 export default Card;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.native.js","sourceRoot":"","sources":["../../../components/card/Card.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.native.js","sourceRoot":"","sources":["../../../components/card/Card.native.tsx"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility, Clickable, Fullheight, TrilogyColor } from '../../objects';
+import { Accessibility, BackgroundProps, Clickable, Fullheight } from '../../objects';
 import { AlignableProps } from '../../objects/facets/Alignable';
 import { JustifiableProps } from '../../objects/facets/Justifiable';
 /**
@@ -11,7 +11,7 @@ export declare enum CardMarkup {
     A = "a"
 }
 export type CardMarkupValues = keyof typeof CardMarkup;
-export interface CardProps extends AlignableProps, Fullheight, JustifiableProps, Clickable, Accessibility {
+export interface CardProps extends AlignableProps, Fullheight, JustifiableProps, Clickable, Accessibility, BackgroundProps {
     children?: React.ReactNode;
     flat?: boolean;
     horizontal?: boolean;
@@ -20,7 +20,6 @@ export interface CardProps extends AlignableProps, Fullheight, JustifiableProps,
     className?: string;
     onClick?: ClickEvent;
     markup?: CardMarkup | CardMarkupValues;
-    backgroundColor?: TrilogyColor.BACKGROUND | "transparent";
     reversed?: boolean;
     to?: string;
     active?: boolean;

package/lib/components/card/content/CardContent.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CardContentProps } from './CardContentProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { CardContentProps } from "./CardContentProps";
+import { ComponentName } from "../../enumsComponentsName";
 /**
  * Card Content Component
  * @param children {ReactNode} Card Content Children

package/lib/components/card/content/CardContent.native.js

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Title, TitleLevels } from '../../title';
-import { Button } from '../../button';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
-import { CardContext } from '../Card.native';
-import { ComponentName } from '../../enumsComponentsName';
+import React, { useContext } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Title, TitleLevels } from "../../title";
+import { Button } from "../../button";
+import { getColorStyle, TrilogyColor } from "../../../objects/facets/Color";
+import { CardContext } from "../Card.native";
+import { ComponentName } from "../../enumsComponentsName";
 /**
  * Card Content Component
  * @param children {ReactNode} Card Content Children
@@ -27,13 +27,10 @@ const CardContent = ({ children, titleSup, title, text, buttonText, buttonClick,
             paddingRight: 16,
             paddingBottom: 16,
             minHeight: 10,
-            backgroundColor: cardContextValues.backgroundColor === 'transparent' ? 'rgba(0, 0, 0, 0)' : getColorStyle(TrilogyColor.WHITE),
-            borderBottomEndRadius: 6,
-            borderBottomStartRadius: 6,
             flex: cardContextValues.horizontal ? 1 : 0,
         },
         view: {
-            width: '100%',
+            width: "100%",
         },
         text: {
             color: getColorStyle(TrilogyColor.MAIN),
@@ -46,7 +43,7 @@ const CardContent = ({ children, titleSup, title, text, buttonText, buttonClick,
     if (children) {
         if (onClick) {
             return (React.createElement(View, { style: styles.card },
-                React.createElement(TouchableOpacity, { style: { width: '100%', paddingBottom: 16 }, onPress: onClick }, children)));
+                React.createElement(TouchableOpacity, { style: { width: "100%", paddingBottom: 16 }, onPress: onClick }, children)));
         }
         return (React.createElement(View, { style: styles.card, ...others }, children));
     }
@@ -60,7 +57,7 @@ const CardContent = ({ children, titleSup, title, text, buttonText, buttonClick,
             React.createElement(View, { style: { marginBottom: 16 } }),
             React.createElement(Button, { variant: buttonVariant, onClick: buttonClick }, buttonText)))));
     return onClick ? (React.createElement(View, { style: styles.view },
-        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85 }, cardContent))) : (cardContent);
+        React.createElement(TouchableOpacity, { style: { width: "100%" }, onPress: onClick, activeOpacity: 0.85 }, cardContent))) : (cardContent);
 };
 CardContent.displayName = ComponentName.CardContent;
 export default CardContent;

package/lib/components/card/content/CardContent.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.native.js","sourceRoot":"","sources":["../../../../components/card/content/CardContent.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEvE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,GAAG,CAAC,EACE,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,aAAa,EACb,OAAO,EACP,GAAG,MAAM,EACQ,EAAe,EAAE;IACvD,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEjD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,IAAI,EAAE;YACJ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,EAAE;YACf,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,EAAE;YACjB,SAAS,EAAE,EAAE;YACb,eAAe,EACb,iBAAiB,CAAC,eAAe,KAAK,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC;YAC9G,qBAAqB,EAAE,CAAC;YACxB,uBAAuB,EAAE,CAAC;YAC1B,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3C;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC;YACvC,QAAQ,EAAE,EAAE;SACb;QACD,OAAO,EAAE;YACP,YAAY,EAAE,EAAE;SACjB;KACF,CAAC,CAAA;IAEF,IAAI,QAAQ,EAAE;QACZ,IAAI,OAAO,EAAE;YACX,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI;gBACtB,oBAAC,gBAAgB,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,IAC5E,QAAQ,CACQ,CACd,CACR,CAAA;SACF;QACD,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,KAAM,MAAM,IACjC,QAAQ,CACJ,CACR,CAAA;KACF;IAED,MAAM,WAAW,GAAG,CAClB,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,KAAM,MAAM;QACjC,QAAQ,IAAI,oBAAC,KAAK,IAAC,QAAQ,UAAE,QAAQ,CAAS;QAC9C,KAAK,IAAI,oBAAC,KAAK,IAAC,KAAK,EAAE,WAAW,CAAC,GAAG,IAAG,KAAK,CAAS;QACvD,IAAI,IAAI,CACP;YACE,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG;YACpC,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CACtC,CACJ;QACA,UAAU,IAAI,CACb;YACE,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG;YACpC,oBAAC,MAAM,IAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,IACjD,UAAU,CACJ,CACR,CACJ,CACI,CACR,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI;QACtB,oBAAC,gBAAgB,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,IAC9E,WAAW,CACK,CACd,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,CAAA;AAEnD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"CardContent.native.js","sourceRoot":"","sources":["../../../../components/card/content/CardContent.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/chips/Chips.native.js

@@ -33,16 +33,18 @@ const Chips = ({ children, onClick, disabled, active, inverted, ...others }) =>
             paddingTop: 6,
             paddingBottom: 6,
             margin: 6,
-            borderColor: "#dce1e5",
+            borderColor: getColorStyle(TrilogyColor.FONT, 1),
             borderWidth: !active ? 1 : 0,
             flexDirection: "row",
         },
         text: {
-            fontWeight: active ? "bold" : "normal",
+            alignSelf: "center",
+            fontWeight: active ? "600" : "normal",
             fontSize: 16,
             color: (disabled && getColorStyle(TrilogyColor.NEUTRAL_DARK)) ||
                 (active && getColorStyle(TrilogyColor.WHITE)) ||
                 getColorStyle(TrilogyColor.MAIN),
+            paddingTop: (chipsContext.isMultiple && active && 3) || 0,
         },
         icon: {
             top: 3,

package/lib/components/chips/Chips.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.native.js","sourceRoot":"","sources":["../../../components/chips/Chips.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chips.native.js","sourceRoot":"","sources":["../../../components/chips/Chips.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/columns/Columns.native.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { ColumnsProps } from './ColumnsProps';
-import { ComponentName } from '../enumsComponentsName';
+import React from "react";
+import { ColumnsProps } from "./ColumnsProps";
+import { ComponentName } from "../enumsComponentsName";
 /**
  * Columns Native Component
  * @param children {React.ReactNode}