@trilogy-ds/react 0.0.1-beta-103 → 0.0.1-beta-105

package/lib/context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAkB;IAC1D,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS;CAC3B,CAAC,CAAA;AAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;IAChD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAA;KAC3E;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAkB;IAC1D,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS;CAC3B,CAAC,CAAA;AAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;IAChD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAA;KAC3E;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}

package/lib/context/provider.native.d.ts

@@ -1 +1,4 @@
-export declare const TrilogyProvider: () => void;
+import { ReactNode } from 'react';
+export declare const TrilogyProvider: ({ children }: {
+    children: ReactNode;
+}) => ReactNode;

package/lib/context/provider.native.js

@@ -1,4 +1,4 @@
-export const TrilogyProvider = () => {
-    return;
+export const TrilogyProvider = ({ children }) => {
+    return children;
 };
 //# sourceMappingURL=provider.native.js.map

package/lib/context/provider.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.native.js","sourceRoot":"","sources":["../../context/provider.native.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAM;AACR,CAAC,CAAA"}
+{"version":3,"file":"provider.native.js","sourceRoot":"","sources":["../../context/provider.native.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACvE,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/lib/context/providerStyled.d.ts

@@ -1,12 +1,14 @@
-import * as React from "react";
+import * as React from 'react';
 interface TrilogyProviderStyledProps {
     children: React.ReactNode;
-    theme?: string;
+    theme?: 'default' | 'mangled' | 'none';
+    hash?: string;
 }
 /**
  * Trilogy Provider With Style
  * @param children App
- * @param theme (optionnal) Url of stylesheet customisation
+ * @param theme (optionnal) 'default'| 'mangled' |'none' style
+ * @param hash (optionnal) hash for html class
  */
-declare const TrilogyProviderStyled: ({ children, theme, }: TrilogyProviderStyledProps) => JSX.Element;
+declare const TrilogyProviderStyled: ({ children, theme, hash: HASH, }: TrilogyProviderStyledProps) => JSX.Element;
 export { TrilogyProviderStyled };

package/lib/context/providerStyled.js

@@ -1,29 +1,32 @@
-"use client";
-import * as React from "react";
-import { TrilogyContext } from "./index";
+'use client';
+import * as React from 'react';
+import hashJSON from '../hash.json';
+import { TrilogyContext } from './index';
 /**
  * Trilogy Provider With Style
  * @param children App
- * @param theme (optionnal) Url of stylesheet customisation
+ * @param theme (optionnal) 'default'| 'mangled' |'none' style
+ * @param hash (optionnal) hash for html class
  */
-const TrilogyProviderStyled = ({ children, theme, }) => {
+const TrilogyProviderStyled = ({ children, theme = 'default', hash: HASH = hashJSON.HASH, }) => {
     const [styled, setStyled] = React.useState(false);
-    React.useEffect(() => {
-        if (theme) {
-            const link = document.createElement("link");
-            link.href = theme;
-            link.rel = "stylesheet";
-            link.type = "text/css";
-            document.head.appendChild(link);
-            return () => {
-                document.head.removeChild(link);
-            };
+    const [hash, setHash] = React.useState(HASH);
+    const StyleComponent = React.useMemo(() => {
+        switch (true) {
+            case theme === 'mangled' && hash === hashJSON.HASH:
+                setStyled(true);
+                return React.lazy(() => import('../components/styleComponent/mangled/styleComponentMangled'));
+            case theme === 'mangled' && hash !== hashJSON.HASH:
+                setStyled(true);
+                return undefined;
+            case theme === 'default':
+                return React.lazy(() => import('../components/styleComponent/default/styleComponent'));
+            default:
+                return undefined;
         }
-        else if (!theme) {
-            import("@trilogy-ds/styles/dist/default/trilogy.css");
-        }
-    }, [theme]);
-    return (React.createElement(TrilogyContext.Provider, { value: { styled, setStyled } }, children));
+    }, [theme, hash]);
+    return (React.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, StyleComponent ? (React.createElement(React.Suspense, { fallback: null },
+        React.createElement(StyleComponent, null, children))) : (children)));
 };
 export { TrilogyProviderStyled };
 //# sourceMappingURL=providerStyled.js.map

package/lib/context/providerStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"providerStyled.js","sourceRoot":"","sources":["../../context/providerStyled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAOxC;;;;GAIG;AACH,MAAM,qBAAqB,GAAG,CAAC,EAC7B,QAAQ,EACR,KAAK,GACsB,EAAe,EAAE;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE;YACT,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YAC3C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;YACjB,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;YACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAA;YAEtB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YAE/B,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YACjC,CAAC,CAAA;SACF;aAAM,IAAI,CAAC,KAAK,EAAE;YACjB,MAAM,CAAC,6CAA6C,CAAC,CAAA;SACtD;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAClD,QAAQ,CACe,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}
+{"version":3,"file":"providerStyled.js","sourceRoot":"","sources":["../../context/providerStyled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,QAAQ,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAQxC;;;;;GAKG;AACH,MAAM,qBAAqB,GAAG,CAAC,EAC7B,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,IAAI,EAAE,IAAI,GAAG,QAAQ,CAAC,IAAI,GACC,EAAe,EAAE;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,IAAI,CAAC,CAAA;IAEpD,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,QAAQ,IAAI,EAAE;YACZ,KAAK,KAAK,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,CAAC,IAAI;gBAChD,SAAS,CAAC,IAAI,CAAC,CAAA;gBACf,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,2DAA2D,CAAC,CAAC,CAAA;YAE9F,KAAK,KAAK,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,CAAC,IAAI;gBAChD,SAAS,CAAC,IAAI,CAAC,CAAA;gBACf,OAAO,SAAS,CAAA;YAElB,KAAK,KAAK,KAAK,SAAS;gBACtB,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,oDAAoD,CAAC,CAAC,CAAA;YAEvF;gBACE,OAAO,SAAS,CAAA;SACnB;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IACjE,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI;QAC5B,oBAAC,cAAc,QAAE,QAAQ,CAAkB,CAC5B,CAClB,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACuB,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/lib/context/providerStyled.native.d.ts

@@ -1 +1,4 @@
-export declare const TrilogyProviderStyled: () => void;
+import { ReactNode } from 'react';
+export declare const TrilogyProviderStyled: ({ children }: {
+    children: ReactNode;
+}) => ReactNode;

package/lib/context/providerStyled.native.js

@@ -1,4 +1,4 @@
-export const TrilogyProviderStyled = () => {
-    return;
+export const TrilogyProviderStyled = ({ children }) => {
+    return children;
 };
 //# sourceMappingURL=providerStyled.native.js.map

package/lib/context/providerStyled.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"providerStyled.native.js","sourceRoot":"","sources":["../../context/providerStyled.native.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,OAAM;AACR,CAAC,CAAA"}
+{"version":3,"file":"providerStyled.native.js","sourceRoot":"","sources":["../../context/providerStyled.native.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC7E,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/lib/context/providerTheme.d.ts

@@ -1,10 +1,12 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { ITrilogyTheme } from "./interfaces";
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ITrilogyTheme } from './interfaces';
 export declare const defaultTheme: ITrilogyTheme;
 interface ITrilogyThemeContext {
     theme: ITrilogyTheme;
     setTheme: Dispatch<SetStateAction<ITrilogyTheme>>;
 }
 export declare const TrilogyThemeContext: React.Context<ITrilogyThemeContext>;
-export declare const TrilogyThemeProvider: () => React.JSX.Element;
+export declare const TrilogyThemeProvider: ({ children }: {
+    children: ReactNode;
+}) => React.ReactNode;
 export {};

package/lib/context/providerTheme.js

@@ -1,16 +1,15 @@
-import React from "react";
+import React from 'react';
 export const defaultTheme = {
     icons: {},
     colors: {},
-    fontFamily: {}
+    fontFamily: {},
 };
 const defaultContextValue = {
     theme: defaultTheme,
     setTheme: () => undefined,
 };
 export const TrilogyThemeContext = React.createContext(defaultContextValue);
-export const TrilogyThemeProvider = () => {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return React.createElement(React.Fragment, null);
+export const TrilogyThemeProvider = ({ children }) => {
+    return children;
 };
 //# sourceMappingURL=providerTheme.js.map

package/lib/context/providerTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"providerTheme.js","sourceRoot":"","sources":["../../context/providerTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAGvD,MAAM,CAAC,MAAM,YAAY,GAAkB;IACzC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,EAAE;CACf,CAAA;AAOD,MAAM,mBAAmB,GAAG;IAC1B,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAuB,mBAAmB,CAAC,CAAA;AAEjG,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,yDAAyD;IACzD,OAAO,yCAAK,CAAA;AACd,CAAC,CAAA"}
+{"version":3,"file":"providerTheme.js","sourceRoot":"","sources":["../../context/providerTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAGlE,MAAM,CAAC,MAAM,YAAY,GAAkB;IACzC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,EAAE;CACf,CAAA;AAOD,MAAM,mBAAmB,GAAG;IAC1B,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAuB,mBAAmB,CAAC,CAAA;AAEjG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC5E,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/lib/hash.json

@@ -1,3 +1,3 @@
 {
-    "HASH": "1010aab"
+    "HASH": "160b3e3"
 }

package/lib/helpers/hashClassesHelpers.js

@@ -1,16 +1,17 @@
-import hash from '../hash.json';
+import { useTrilogyContext } from '../context';
 /**
  * Used to hash classes if styled components
  * @param styled Apply only if styled props
  * @param classes String classes
  */
 export const hashClass = (styled = false, classes) => {
+    const { hash } = useTrilogyContext();
     if (classes.trim().length < 1)
         return '';
     if (styled) {
         return classes
             .split(' ')
-            .map((classe) => (classe = `${classe}__${hash.HASH}`))
+            .map((classe) => (classe = `${classe}__${hash}`))
             .join(' ');
     }
     return classes;

package/lib/helpers/hashClassesHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"hashClassesHelpers.js","sourceRoot":"","sources":["../../helpers/hashClassesHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,cAAc,CAAA;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,OAAe,EAAU,EAAE;IACnE,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,CAAA;IACxC,IAAI,MAAM,EAAE;QACV,OAAO,OAAO;aACX,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,GAAG,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aAC7D,IAAI,CAAC,GAAG,CAAC,CAAA;KACb;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
+{"version":3,"file":"hashClassesHelpers.js","sourceRoot":"","sources":["../../helpers/hashClassesHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,OAAe,EAAU,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEpC,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,CAAA;IACxC,IAAI,MAAM,EAAE;QACV,OAAO,OAAO;aACX,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,GAAG,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;aACxD,IAAI,CAAC,GAAG,CAAC,CAAA;KACb;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/lib/objects/Typography/TypographyColor.d.ts

@@ -9,7 +9,6 @@ export declare enum TypographyColor {
     TEXT_WARNING = "has-text-warning",
     TEXT_ERROR = "has-text-error",
     TEXT_NEUTRAL = "has-text-grey",
-    TEXT_NEUTRAL_DARK = "has-text-grey-dark",
     TEXT_WHITE = "has-text-white",
     TEXT_DISABLED = "has-text-disabled"
 }

package/lib/objects/Typography/TypographyColor.js

@@ -11,7 +11,6 @@ export var TypographyColor;
     TypographyColor["TEXT_WARNING"] = "has-text-warning";
     TypographyColor["TEXT_ERROR"] = "has-text-error";
     TypographyColor["TEXT_NEUTRAL"] = "has-text-grey";
-    TypographyColor["TEXT_NEUTRAL_DARK"] = "has-text-grey-dark";
     TypographyColor["TEXT_WHITE"] = "has-text-white";
     TypographyColor["TEXT_DISABLED"] = "has-text-disabled";
 })(TypographyColor || (TypographyColor = {}));
@@ -22,42 +21,38 @@ export var TypographyColor;
  */
 export const setTypographyColor = (typo = "", inverted = false) => {
     return ((Array.isArray(typo) && typo.includes(TypographyColor.TEXT_ACCENT)
-        ? getColorStyle(TrilogyColor.ACCENT, 0)
+        ? getColorStyle(TrilogyColor.ACCENT)
         : typo === TypographyColor.TEXT_ACCENT &&
-            getColorStyle(TrilogyColor.ACCENT, 0)) ||
+            getColorStyle(TrilogyColor.ACCENT)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_MAIN)
-            ? getColorStyle(TrilogyColor.MAIN, 0)
+            ? getColorStyle(TrilogyColor.MAIN)
             : typo === TypographyColor.TEXT_MAIN &&
-                getColorStyle(TrilogyColor.MAIN, 0)) ||
+                getColorStyle(TrilogyColor.MAIN)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_INFO)
-            ? getColorStyle(TrilogyColor.INFO, 0)
+            ? getColorStyle(TrilogyColor.INFO)
             : typo === TypographyColor.TEXT_INFO &&
-                getColorStyle(TrilogyColor.INFO, 0)) ||
+                getColorStyle(TrilogyColor.INFO)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_SUCCESS)
-            ? getColorStyle(TrilogyColor.SUCCESS, 0)
+            ? getColorStyle(TrilogyColor.SUCCESS)
             : typo === TypographyColor.TEXT_SUCCESS &&
-                getColorStyle(TrilogyColor.SUCCESS, 0)) ||
+                getColorStyle(TrilogyColor.SUCCESS)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_WARNING)
-            ? getColorStyle(TrilogyColor.WARNING, 0)
+            ? getColorStyle(TrilogyColor.WARNING)
             : typo === TypographyColor.TEXT_WARNING &&
-                getColorStyle(TrilogyColor.WARNING, 0)) ||
+                getColorStyle(TrilogyColor.WARNING)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_ERROR)
-            ? getColorStyle(TrilogyColor.ERROR, 0)
+            ? getColorStyle(TrilogyColor.ERROR)
             : typo === TypographyColor.TEXT_ERROR &&
-                getColorStyle(TrilogyColor.ERROR, 0)) ||
-        (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL_DARK)
-            ? getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)
-            : typo === TypographyColor.TEXT_NEUTRAL_DARK &&
-                getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)) ||
+                getColorStyle(TrilogyColor.ERROR)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL)
-            ? getColorStyle(TrilogyColor.NEUTRAL, 0)
+            ? getColorStyle(TrilogyColor.NEUTRAL)
             : typo === TypographyColor.TEXT_NEUTRAL &&
-                getColorStyle(TrilogyColor.NEUTRAL, 0)) ||
+                getColorStyle(TrilogyColor.NEUTRAL)) ||
         (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_WHITE)
-            ? getColorStyle(TrilogyColor.BACKGROUND, 0)
+            ? getColorStyle(TrilogyColor.BACKGROUND)
             : typo === TypographyColor.TEXT_WHITE &&
-                getColorStyle(TrilogyColor.BACKGROUND, 0)) ||
-        (inverted && !typo && getColorStyle(TrilogyColor.BACKGROUND, 0)) ||
-        getColorStyle(TrilogyColor.MAIN, 0));
+                getColorStyle(TrilogyColor.BACKGROUND)) ||
+        (inverted && !typo && getColorStyle(TrilogyColor.BACKGROUND)) ||
+        getColorStyle(TrilogyColor.MAIN));
 };
 //# sourceMappingURL=TypographyColor.js.map

package/lib/objects/Typography/TypographyColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyColor.js","sourceRoot":"","sources":["../../../objects/Typography/TypographyColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEpE;;GAEG;AACH,MAAM,CAAN,IAAY,eAWX;AAXD,WAAY,eAAe;IACzB,8CAA2B,CAAA;IAC3B,kDAA+B,CAAA;IAC/B,8CAA2B,CAAA;IAC3B,oDAAiC,CAAA;IACjC,oDAAiC,CAAA;IACjC,gDAA6B,CAAA;IAC7B,iDAA8B,CAAA;IAC9B,2DAAwC,CAAA;IACxC,gDAA6B,CAAA;IAC7B,sDAAmC,CAAA;AACrC,CAAC,EAXW,eAAe,KAAf,eAAe,QAW1B;AAOD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAA+B,EAAE,EACjC,QAAQ,GAAG,KAAK,EACR,EAAE;IACV,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QAChE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,WAAW;YACpC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC1C,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;YAC9D,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,SAAS;gBAClC,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACxC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;YAC9D,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,SAAS;gBAClC,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACxC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YACjE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC;YACxC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,YAAY;gBACrC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YACjE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC;YACxC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,YAAY;gBACrC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,UAAU;gBACnC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,iBAAiB,CAAC;YACtE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC;YAC7C,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,iBAAiB;gBAC1C,aAAa,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAChD,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YACjE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC;YACxC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,YAAY;gBACrC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,CAAC;YAC3C,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,UAAU;gBACnC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QAC9C,CAAC,QAAQ,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QAChE,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CACpC,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TypographyColor.js","sourceRoot":"","sources":["../../../objects/Typography/TypographyColor.ts"],"names":[],"mappings":"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"}

package/lib/objects/atoms/Background.d.ts

@@ -4,10 +4,7 @@ import { Invertable } from "../../objects/facets";
  * Background props
  */
 export interface BackgroundProps extends Invertable {
-    background?: TrilogyColor | TrilogyColorValues | {
-        color: TrilogyColor;
-        fade: boolean;
-    };
+    backgroundColor?: TrilogyColor | TrilogyColorValues;
     backgroundSrc?: string;
 }
 /**
@@ -15,16 +12,4 @@ export interface BackgroundProps extends Invertable {
  * @param backgroundType {string} - BackgroundType
  * @returns {string} - Background Color value
  */
-export declare const getBackgroundClassName: (backgroundType: TrilogyColor | TrilogyColorValues | {
-    color: TrilogyColor;
-    fade: boolean;
-}) => string;
-/**
- * Returns background's style depending on background type
- * @param backgroundType {string} - BackgroundType
- * @returns {string} - Background Color value
- */
-export declare const getBackgroundStyle: (backgroundType: TrilogyColor | TrilogyColorValues | {
-    color: TrilogyColor;
-    fade: boolean;
-}) => string;
+export declare const getBackgroundClassName: (backgroundType: TrilogyColor | TrilogyColorValues) => string;

package/lib/objects/atoms/Background.js

@@ -1,23 +1,10 @@
-import { getColorClassName, getColorStyle, } from "../../objects/facets/Color";
+import { getColorClassName, } from "../../objects/facets/Color";
 /**
  * Returns background's classname depending on background type
  * @param backgroundType {string} - BackgroundType
  * @returns {string} - Background Color value
  */
 export const getBackgroundClassName = (backgroundType) => {
-    if (backgroundType && typeof backgroundType === 'object') {
-        return `background-${getColorClassName(backgroundType.color)}${backgroundType.fade ? '-fade' : ''}`;
-    }
     return `background-${getColorClassName(backgroundType)}`;
 };
-/**
- * Returns background's style depending on background type
- * @param backgroundType {string} - BackgroundType
- * @returns {string} - Background Color value
- */
-export const getBackgroundStyle = (backgroundType) => {
-    const color = (backgroundType && typeof backgroundType === 'object') ? backgroundType.color : backgroundType;
-    const fade = (backgroundType && typeof backgroundType === 'object') ? backgroundType.fade : false;
-    return getColorStyle(color, fade ? 1 : 0);
-};
 //# sourceMappingURL=Background.js.map

package/lib/objects/atoms/Background.js.map

@@ -1 +1 @@
-{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../../objects/atoms/Background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,GAAqC,MAAM,wBAAwB,CAAA;AAW5G;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,cAAuF,EAC/E,EAAE;IACV,IAAI,cAAc,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACxD,OAAO,cAAc,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;KACpG;IACD,OAAO,cAAc,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAA;AAC1D,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,cAAsF,EAC9E,EAAE;IACV,MAAM,KAAK,GAAG,CAAC,cAAc,IAAI,OAAO,cAAc,KAAK,QAAQ,CAAC,CAAA,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAA;IAC3G,MAAM,IAAI,GAAE,CAAC,cAAc,IAAI,OAAO,cAAc,KAAK,QAAQ,CAAC,CAAA,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAC/F,OAAO,aAAa,CAAC,KAAK,EAAE,IAAI,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAA,CAAC,CAAC,CAAA;AACvC,CAAC,CAAA"}
+{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../../objects/atoms/Background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,GAAqC,MAAM,wBAAwB,CAAA;AAW7F;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,cAAkD,EAC1C,EAAE;IACV,OAAO,cAAc,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAA;AAC1D,CAAC,CAAA"}

package/lib/objects/atoms/Text.js

@@ -23,9 +23,7 @@ export const getTextClassName = (textType) => {
         case "WHITE":
             return "text-white";
         case "NEUTRAL":
-            return "text-neutral-light";
-        case "NEUTRAL_DARK":
-            return "text-neutral-dark";
+            return "text-neutral";
         case "SUCCESS":
             return "text-success";
         case "WARNING":

package/lib/objects/atoms/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../objects/atoms/Text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,IAAK,SAIJ;AAJD,WAAK,SAAS;IACZ,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,0BAAa,CAAA;AACf,CAAC,EAJI,SAAS,KAAT,SAAS,QAIb;AASD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAU,EAAE;IAC5D,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAA;QACtB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,OAAO;YACV,OAAO,YAAY,CAAA;QACrB,KAAK,SAAS;YACZ,OAAO,oBAAoB,CAAA;QAC7B,KAAK,cAAc;YACjB,OAAO,mBAAmB,CAAA;QAC5B,KAAK,SAAS;YACZ,OAAO,cAAc,CAAA;QACvB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAA;QACvB,KAAK,OAAO;YACV,OAAO,YAAY,CAAA;QACrB;YACE,OAAO,EAAE,CAAA;KACZ;AACH,CAAC,CAAA"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../objects/atoms/Text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,IAAK,SAIJ;AAJD,WAAK,SAAS;IACZ,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,0BAAa,CAAA;AACf,CAAC,EAJI,SAAS,KAAT,SAAS,QAIb;AASD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAU,EAAE;IAC5D,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAA;QACtB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,OAAO;YACV,OAAO,YAAY,CAAA;QACrB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAA;QACvB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAA;QACvB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAA;QACvB,KAAK,OAAO;YACV,OAAO,YAAY,CAAA;QACrB;YACE,OAAO,EAAE,CAAA;KACZ;AACH,CAAC,CAAA"}

package/lib/objects/facets/Color.d.ts

@@ -4,23 +4,28 @@
 export declare enum TrilogyColor {
     BACKGROUND = "WHITE",
     MAIN = "MAIN",
+    MAIN_FADE = "MAIN_FADE",
     ACCENT = "ACCENT",
     FONT = "FONT",
+    FONT_PLACEHOLDER = "FONT_PLACEHOLDER",
     SUCCESS = "SUCCESS",
+    SUCCESS_FADE = "SUCCESS_FADE",
     INFO = "INFO",
+    INFO_FADE = "INFO_FADE",
     WARNING = "WARNING",
+    WARNING_FADE = "WARNING_FADE",
     ERROR = "ERROR",
+    ERROR_FADE = "ERROR_FADE",
     DISABLED = "DISABLED",
-    HOVERED = "HOVERED",
+    DISABLED_FADE = "DISABLED_FADE",
     NEUTRAL = "NEUTRAL",
-    NEUTRAL_DARK = "NEUTRAL_DARK",
-    NEUTRAL_LIGHT = "NEUTRAL_LIGHT"
+    NEUTRAL_FADE = "NEUTRAL_FADE"
 }
 export type TrilogyColorValues = `${TrilogyColor}`;
 /**
  * Trilogy color values
  */
-export declare const colors: Record<TrilogyColor, string[]>;
+export declare const colors: Record<any, string[]>;
 /**
  * Returns color's className depending on Trilogy Color
  * @param trilogyColor {string} - Trilogy Color
@@ -40,4 +45,4 @@ export declare const getButtonColorStyle: (buttonVariant?: string) => string;
  * @param index {number} - Index of color ( 1 for BG )
  * @returns {string} - Color style value
  */
-export declare const getColorStyle: (trilogyColor: TrilogyColor | TrilogyColorValues, index?: number) => string;
+export declare const getColorStyle: (trilogyColor: TrilogyColor | TrilogyColorValues) => string;

package/lib/objects/facets/Color.js

@@ -1,5 +1,5 @@
-import { useContext } from "react";
-import { TrilogyThemeContext } from "../../context/providerTheme";
+import { TrilogyThemeContext } from '../../context/providerTheme';
+import { useContext } from 'react';
 /**
  * Trilogy color
  */
@@ -7,35 +7,45 @@ export var TrilogyColor;
 (function (TrilogyColor) {
     TrilogyColor["BACKGROUND"] = "WHITE";
     TrilogyColor["MAIN"] = "MAIN";
+    TrilogyColor["MAIN_FADE"] = "MAIN_FADE";
     TrilogyColor["ACCENT"] = "ACCENT";
     TrilogyColor["FONT"] = "FONT";
+    TrilogyColor["FONT_PLACEHOLDER"] = "FONT_PLACEHOLDER";
     TrilogyColor["SUCCESS"] = "SUCCESS";
+    TrilogyColor["SUCCESS_FADE"] = "SUCCESS_FADE";
     TrilogyColor["INFO"] = "INFO";
+    TrilogyColor["INFO_FADE"] = "INFO_FADE";
     TrilogyColor["WARNING"] = "WARNING";
+    TrilogyColor["WARNING_FADE"] = "WARNING_FADE";
     TrilogyColor["ERROR"] = "ERROR";
+    TrilogyColor["ERROR_FADE"] = "ERROR_FADE";
     TrilogyColor["DISABLED"] = "DISABLED";
-    TrilogyColor["HOVERED"] = "HOVERED";
+    TrilogyColor["DISABLED_FADE"] = "DISABLED_FADE";
     TrilogyColor["NEUTRAL"] = "NEUTRAL";
-    TrilogyColor["NEUTRAL_DARK"] = "NEUTRAL_DARK";
-    TrilogyColor["NEUTRAL_LIGHT"] = "NEUTRAL_LIGHT";
+    TrilogyColor["NEUTRAL_FADE"] = "NEUTRAL_FADE";
 })(TrilogyColor || (TrilogyColor = {}));
 /**
  * Trilogy color values
  */
 export const colors = {
-    [TrilogyColor.BACKGROUND]: ["#fff", "#E9E9E9", "white", "main"],
-    [TrilogyColor.MAIN]: ["#3d5d7e", "#eff2f8", "main", "white"],
-    [TrilogyColor.ACCENT]: ["#da641b", "#bb5118", "accent", "white"],
-    [TrilogyColor.FONT]: ["#3d5d7e", "#BBC6CD", "main", "white"],
-    [TrilogyColor.SUCCESS]: ["#007B52", "#cae8ca", "success", "white"],
-    [TrilogyColor.INFO]: ["#1A688A", "#c8dbec", "info", "white"],
-    [TrilogyColor.WARNING]: ["#FFBB33", "#ecdbc6", "warning", "white"],
-    [TrilogyColor.ERROR]: ["#D42D02", "#eecccc", "error", "white"],
-    [TrilogyColor.DISABLED]: ["#646464", "#D1D1D1", "disabled", "white"],
-    [TrilogyColor.NEUTRAL]: ["#707070", "#F4F4F4", "grey", "white"],
-    [TrilogyColor.NEUTRAL_DARK]: ["#646464", "#E9E9E9", "grey-dark", "white"],
-    [TrilogyColor.NEUTRAL_LIGHT]: ["#E9E9E9", "#E9E9E9", "grey-light", "grey"],
-    [TrilogyColor.HOVERED]: ["#F4F4F4", "#F4F4F4", "hovered", "white"],
+    [TrilogyColor.BACKGROUND]: ['#fff', 'white', 'main'],
+    [TrilogyColor.MAIN]: ['#3d5d7e', 'main', 'white'],
+    [TrilogyColor.MAIN_FADE]: ['#BBC6CD', 'main', 'white'],
+    [TrilogyColor.ACCENT]: ['#da641b', 'accent', 'white'],
+    [TrilogyColor.FONT]: ['#3d5d7e', 'main', 'white'],
+    [TrilogyColor.FONT_PLACEHOLDER]: ['#818283', 'font-placeholder', 'white'],
+    [TrilogyColor.SUCCESS]: ['#007B52', 'success', 'white'],
+    [TrilogyColor.SUCCESS_FADE]: ['#cae8ca', 'success-fade', 'white'],
+    [TrilogyColor.INFO]: ['#1A688A', 'info', 'white'],
+    [TrilogyColor.INFO_FADE]: ['#c8dbec', 'info-fade', 'white'],
+    [TrilogyColor.WARNING]: ['#FFBB33', 'warning', 'white'],
+    [TrilogyColor.WARNING_FADE]: ['#ecdbc6', 'warning-fade', 'white'],
+    [TrilogyColor.ERROR]: ['#D42D02', 'error', 'white'],
+    [TrilogyColor.ERROR_FADE]: ['#eecccc', 'error-fade', 'white'],
+    [TrilogyColor.DISABLED]: ['#646464', 'disabled', 'white'],
+    [TrilogyColor.DISABLED_FADE]: ['#D1D1D1', 'disabled-fade', 'white'],
+    [TrilogyColor.NEUTRAL]: ['#707070', 'grey', 'white'],
+    [TrilogyColor.NEUTRAL_FADE]: ['#F4F4F4', 'grey-fade', 'white'],
 };
 /**
  * Returns color's className depending on Trilogy Color
@@ -44,7 +54,7 @@ export const colors = {
  */
 export const getColorClassName = (trilogyColor) => {
     const color = colors[trilogyColor];
-    return color[2];
+    return color[1];
 };
 /**
  * Returns color button's className depending on Trilogy Color
@@ -53,37 +63,37 @@ export const getColorClassName = (trilogyColor) => {
  */
 export const getButtonVariantClassName = (trilogyColor) => {
     switch (trilogyColor) {
-        case "CONVERSION":
-            return "conversion";
-        case "PRIMARY":
-            return "primary";
-        case "SECONDARY":
-            return "secondary";
-        case "GHOST":
-            return "ghost";
-        case "SUCCESS":
-            return "success";
-        case "INFO":
-            return "info";
-        case "WARNING":
-            return "warning";
-        case "ERROR":
-            return "error";
-        case "DISABLED":
-            return "disabled";
+        case 'CONVERSION':
+            return 'conversion';
+        case 'PRIMARY':
+            return 'primary';
+        case 'SECONDARY':
+            return 'secondary';
+        case 'GHOST':
+            return 'ghost';
+        case 'SUCCESS':
+            return 'success';
+        case 'INFO':
+            return 'info';
+        case 'WARNING':
+            return 'warning';
+        case 'ERROR':
+            return 'error';
+        case 'DISABLED':
+            return 'disabled';
         default:
-            return "primary";
+            return 'primary';
     }
 };
 export const getButtonColorStyle = (buttonVariant) => {
     switch (buttonVariant) {
-        case "ACCENT":
+        case 'ACCENT':
             return TrilogyColor.ACCENT;
-        case "PRIMARY":
+        case 'PRIMARY':
             return TrilogyColor.MAIN;
-        case "SECONDARY":
-            return TrilogyColor.HOVERED;
-        case "GHOST":
+        case 'SECONDARY':
+            return TrilogyColor.MAIN_FADE;
+        case 'GHOST':
             return TrilogyColor.BACKGROUND;
         default:
             return TrilogyColor.MAIN;
@@ -95,25 +105,18 @@ export const getButtonColorStyle = (buttonVariant) => {
  * @param index {number} - Index of color ( 1 for BG )
  * @returns {string} - Color style value
  */
-export const getColorStyle = (trilogyColor, index) => {
+export const getColorStyle = (trilogyColor) => {
     if (typeof navigator !== 'undefined' && navigator.userAgent === undefined) {
         const { theme } = useContext(TrilogyThemeContext);
         const colorsStyle = (theme === null || theme === void 0 ? void 0 : theme.colors) || colors;
         const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
-        const colorIndex = index && index !== undefined && index >= 0 && index < colorArray.length
-            ? index
-            : 0;
         if (!trilogyColor || !colors[trilogyColor]) {
             return colorsStyle.default;
         }
-        return colorArray[colorIndex];
+        return colorArray[0];
     }
     else {
-        const colorArray = colors[trilogyColor];
-        const colorIndex = index !== undefined && index >= 0 && index < colorArray.length
-            ? index
-            : 0;
-        return colorArray[colorIndex];
+        return colors[trilogyColor][0] || colors['main'][0];
     }
 };
 //# sourceMappingURL=Color.js.map