@proximus/lavender-styling-native 0.1.0-alpha.0 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-styling-native@0.1.0-alpha.1...@proximus/lavender-styling-native@0.1.0-alpha.2) (2025-09-05)
+
+### Features
+
+- **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
+
+# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-styling-native@0.1.0-alpha.0...@proximus/lavender-styling-native@0.1.0-alpha.1) (2025-08-13)
+
+### Bug Fixes
+
+- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
+
 # 0.1.0-alpha.0 (2025-08-13)
 
 ### Features

package/dist/ProximusTheme.d.ts

@@ -1,3 +1,3 @@
-import { ITheme } from './themes';
+import { type ITheme } from './themes';
 export declare const myProximusTheme: ITheme;
 //# sourceMappingURL=ProximusTheme.d.ts.map

package/dist/ProximusTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProximusTheme.d.ts","sourceRoot":"","sources":["../src/ProximusTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,EAAE,MAK7B,CAAC"}
+{"version":3,"file":"ProximusTheme.d.ts","sourceRoot":"","sources":["../src/ProximusTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,MAAM,EAAa,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,MAG7B,CAAC"}

package/dist/ScarletTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScarletTheme.d.ts","sourceRoot":"","sources":["../src/ScarletTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAa,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,YAAY,EAAE,MAK1B,CAAC"}
+{"version":3,"file":"ScarletTheme.d.ts","sourceRoot":"","sources":["../src/ScarletTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,YAAY,EAAE,MAG1B,CAAC"}

package/dist/ThemeContext.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 import { type IThemeContext } from './themes';
 export declare const ThemeContext: React.Context<IThemeContext>;
 export declare function useTheme(): IThemeContext;
-export declare function useIsThemeScarlet(): boolean;
 //# sourceMappingURL=ThemeContext.d.ts.map

package/dist/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,UAAU,CAAC;AAGzD,eAAO,MAAM,YAAY,8BAEvB,CAAC;AAEH,wBAAgB,QAAQ,kBAGvB;AAED,wBAAgB,iBAAiB,YAGhC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,eAAO,MAAM,YAAY,8BAEvB,CAAC;AAEH,wBAAgB,QAAQ,kBAGvB"}

package/dist/ThemeProvider.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentType, ReactElement } from 'react';
+import React, { ComponentType, ReactNode } from 'react';
 import { ITheme } from './themes';
 export declare function ThemeProvider({ theme, children, }: {
     theme: ITheme;
-    children: ReactElement<any> | ReactElement<any>[];
+    children: ReactNode;
 }): React.JSX.Element;
 export declare function withTheme<T>(WrappedComponent: ComponentType<T>): (props: T) => React.JSX.Element;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CACnD,qBAaA;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,IACrD,OAAO,CAAC,uBAMjB"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,qBAaA;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,IACrD,OAAO,CAAC,uBAMjB"}

package/dist/index.d.ts

@@ -1,8 +1,5 @@
-export * from './colors';
 export * from './breakpoints';
-export * from './sizes';
 export * from './ThemeContext';
 export * from './ThemeProvider';
 export * from './themes';
-export * from './AssetContainer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

package/dist/themes.d.ts

@@ -1,19 +1,27 @@
+import * as proximusTokens from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
+import * as scarletTokens from '@proximus/lavender-styling/dist/js/scarlet/themesTokens.js';
 export declare enum ThemeName {
     MYPROXIMUS = "myproximus",
     SCARLET = "scarlet"
 }
-export declare enum StatusType {
-    SUCCESS = "success",
-    ERROR = "error",
-    WARNING = "warning",
-    INFO = "info"
-}
-export interface ITheme {
+type TokenValuesTypes = string | {
+    color: string;
+    position: number;
+}[] | number | {
+    original: string | number;
+    number: number;
+    decimal: number;
+    scale: number;
+};
+export interface IAbstractTheme<TOKENS extends Record<string, TokenValuesTypes> = Record<string, TokenValuesTypes>> {
     name: ThemeName;
-    t: (key: string) => any;
+    t<K extends keyof TOKENS>(key: K): TOKENS[K];
+}
+export interface ITheme extends IAbstractTheme<typeof proximusTokens | typeof scarletTokens> {
 }
 export interface IThemeContext {
     theme: ITheme;
     setTheme?: (theme: ITheme) => void;
 }
+export {};
 //# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,GAAG,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,6DAA6D,CAAC;AAC9F,OAAO,KAAK,aAAa,MAAM,4DAA4D,CAAC;AAE5F,oBAAY,SAAS;IACnB,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED,KAAK,gBAAgB,GACjB,MAAM,GACN;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAAE,GACrC,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,cAAc,CAC7B,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,MAAM,CACtD,MAAM,EACN,gBAAgB,CACjB;IAED,IAAI,EAAE,SAAS,CAAC;IAEhB,CAAC,CAAC,CAAC,SAAS,MAAM,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,MACf,SAAQ,cAAc,CAAC,OAAO,cAAc,GAAG,OAAO,aAAa,CAAC;CAAG;AAEzE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@proximus/lavender-styling-native",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Commmon styling constants",
   "main": "src/index.ts",
   "type": "module",
-  "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -13,9 +12,6 @@
     "build": "npx tsc -p tsconfig.json",
     "prepublish": "yarn clean && yarn build"
   },
-  "dependencies": {
-    "@proximus/lavender-styling": "^1.1.0-alpha.14"
-  },
   "lerna": {
     "command": {
       "publish": {
@@ -27,5 +23,5 @@
       }
     }
   },
-  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+  "gitHead": "38a67765befa2567a3f5f57976b7933cf5b85a24"
 }

package/src/ProximusTheme.ts

@@ -1,9 +1,7 @@
 import * as proximusTokens from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
-import { ITheme, ThemeName } from './themes';
+import { type ITheme, ThemeName } from './themes';
 
 export const myProximusTheme: ITheme = {
   name: ThemeName.MYPROXIMUS,
-  t: (key: string) => {
-    return proximusTokens[key as keyof typeof proximusTokens];
-  },
+  t: (key) => proximusTokens[key],
 };

package/src/ScarletTheme.ts

@@ -1,11 +1,7 @@
 import * as scarletTokens from '@proximus/lavender-styling/dist/js/scarlet/themesTokens.js';
-
-//Added Proximus styles for scarlet also as most of the styles are inherited from proximus
 import { ITheme, ThemeName } from './themes';
 
 export const scarletTheme: ITheme = {
   name: ThemeName.SCARLET,
-  t: (key: string) => {
-    return scarletTokens[key as keyof typeof scarletTokens];
-  },
+  t: (key) => scarletTokens[key],
 };

package/src/ThemeContext.ts

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 
-import { type IThemeContext, ThemeName } from './themes';
+import { type IThemeContext } from './themes';
 import { myProximusTheme } from './ProximusTheme';
 
 export const ThemeContext = React.createContext<IThemeContext>({
@@ -11,8 +11,3 @@ export function useTheme() {
   const theme = useContext(ThemeContext);
   return theme || {};
 }
-
-export function useIsThemeScarlet() {
-  const { theme } = useTheme();
-  return theme.name === ThemeName.SCARLET;
-}

package/src/ThemeProvider.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { ComponentType, ReactElement, useState } from 'react';
+import React, { ComponentType, ReactNode, useState } from 'react';
 
 import { ThemeContext, useTheme } from './ThemeContext';
 import { ITheme } from './themes';
@@ -9,7 +8,7 @@ export function ThemeProvider({
   children,
 }: {
   theme: ITheme;
-  children: ReactElement<any> | ReactElement<any>[];
+  children: ReactNode;
 }) {
   const [themeValue, setTheme] = useState<ITheme>(theme);
 

package/src/index.ts

@@ -1,7 +1,4 @@
-export * from './colors';
 export * from './breakpoints';
-export * from './sizes';
 export * from './ThemeContext';
 export * from './ThemeProvider';
 export * from './themes';
-export * from './AssetContainer';

package/src/themes.ts

@@ -1,20 +1,36 @@
+import * as proximusTokens from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
+import * as scarletTokens from '@proximus/lavender-styling/dist/js/scarlet/themesTokens.js';
+
 export enum ThemeName {
   MYPROXIMUS = 'myproximus',
   SCARLET = 'scarlet',
 }
 
-export enum StatusType {
-  SUCCESS = 'success',
-  ERROR = 'error',
-  WARNING = 'warning',
-  INFO = 'info',
-}
+type TokenValuesTypes =
+  | string
+  | { color: string; position: number }[]
+  | number
+  | {
+      original: string | number;
+      number: number;
+      decimal: number;
+      scale: number;
+    };
 
-export interface ITheme {
+export interface IAbstractTheme<
+  TOKENS extends Record<string, TokenValuesTypes> = Record<
+    string,
+    TokenValuesTypes
+  >,
+> {
   name: ThemeName;
-  t: (key: string) => any;
+
+  t<K extends keyof TOKENS>(key: K): TOKENS[K];
 }
 
+export interface ITheme
+  extends IAbstractTheme<typeof proximusTokens | typeof scarletTokens> {}
+
 export interface IThemeContext {
   theme: ITheme;
   setTheme?: (theme: ITheme) => void;

package/dist/AssetContainer.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-export declare const AssetContainerContext: React.Context<{
-    size?: number;
-    id?: string;
-}>;
-export declare function useAssetContainer(): {
-    size?: number;
-    id?: string;
-};
-export declare function AssetProvider({ children, size, id, }: {
-    children: React.ReactNode;
-    size?: number;
-    id?: string;
-}): React.JSX.Element;
-//# sourceMappingURL=AssetContainer.d.ts.map

package/dist/AssetContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AssetContainer.d.ts","sourceRoot":"","sources":["../src/AssetContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,qBAAqB;WACzB,MAAM;SACR,MAAM;EACP,CAAC;AAEP,wBAAgB,iBAAiB;WAJxB,MAAM;SACR,MAAM;EAWZ;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,IAAI,EACJ,EAAE,GACH,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,qBAMA"}

package/dist/colors.d.ts

@@ -1,514 +0,0 @@
-export declare const Colors: {
-    aquaBlue: string;
-    barbiePink: string;
-    black: string;
-    blackTwo: string;
-    blackTwo80: string;
-    blueberry: string;
-    purple: string;
-    blueberryLight: string;
-    blueberryTransparent: string;
-    brightSkyBlue: string;
-    cerulean: string;
-    cloudyBlue: string;
-    cobalt: string;
-    darkPurple: string;
-    frogGreen: string;
-    grey: string;
-    indigo: string;
-    marigold: string;
-    nastyGreen: string;
-    freshGreen: string;
-    pumpkinOrange: string;
-    red: string;
-    redTwo: string;
-    redPink: string;
-    sandy: string;
-    topaz: string;
-    unnamedBlue: string;
-    unnamedGreen: string;
-    unnamedOrange: string;
-    veryLightPink: string;
-    veryLightPinkTwo: string;
-    warmBlue: string;
-    white: string;
-    whitePure: string;
-    whitePureTransparent: string;
-    unnamedGrey: string;
-    greyLight: string;
-    greyLightTwo: string;
-    whiteThree: string;
-    green: string;
-    blackThree: string;
-    purpleLight: string;
-    greyTwo: string;
-    brand: {
-        purple: string;
-        purple70: string;
-        red: string;
-        pink: string;
-        orange: string;
-        yellow: string;
-        green: string;
-        turquoise: string;
-        blue: string;
-        darkBlue: string;
-        scarletRed: string;
-    };
-    shadesOfGrey: {
-        grey1: string;
-        grey2: string;
-        grey3: string;
-        grey4: string;
-        grey5: string;
-        grey6: string;
-        grey7: string;
-        grey8: string;
-        grey9: string;
-        grey: string;
-        black: string;
-        black4: string;
-        black5: string;
-        black6: string;
-        black7: string;
-        black8: string;
-        black9: string;
-        whiteOpacity8: string;
-        whiteOpacity16: string;
-        blackOpacity6: string;
-        black9Opacity6: string;
-        white: string;
-    };
-    status: {
-        validGreenPos: string;
-        validGreenNeg: string;
-        warningOrangePos: string;
-        warningRedPos: string;
-        success: string;
-        order: string;
-        warning: string;
-        warningText: string;
-        error: string;
-        toastError: string;
-        scarletOrderColor: string;
-    };
-    v7: {
-        promo: string;
-        epicPromo: string;
-        pink: string;
-        status: {
-            info: string;
-            success: string;
-            epicSuccess: string;
-            error: string;
-            epicError: string;
-            warning: string;
-            epicWarning: string;
-        };
-        shadesOfPurple: {
-            purple1: string;
-            purple2: string;
-            purple3: string;
-        };
-        shadesOfRed: {
-            red1: string;
-            red2: string;
-            red3: string;
-        };
-        shadesOfGrey: {
-            black0Opacity4: string;
-            black0Opacity12: string;
-            blackOpacity2: string;
-            blackOpacity44: string;
-            black0Opacity8: string;
-            black0Opacity56: string;
-            black0Opacity16: string;
-            whiteOpacity8: string;
-            whiteOpacity12: string;
-            whiteOpacity16: string;
-            whiteOpacity4: string;
-            whiteOpacity52: string;
-            whiteOpacity64: string;
-            whiteOpacity24: string;
-        };
-    };
-    v8_1: {
-        shadesOfPurple: {
-            purple: string;
-            purpleLight: string;
-        };
-        shadesOfGrey: {
-            dark4: string;
-            dark40: string;
-            dark120: string;
-            dark160: string;
-            dark280: string;
-            dark320: string;
-        };
-        text: {
-            black: string;
-            details: string;
-        };
-        success: string;
-        strokeBlack: string;
-        white: string;
-        black: string;
-    };
-    v8: {
-        shadesOfPurple: {
-            purple: string;
-            purple1: string;
-            purple2: string;
-            purple3: string;
-            purple4: string;
-            purple5: string;
-            purple6: string;
-            purple7: string;
-            purple8: string;
-            purple9: string;
-        };
-        shadesOfGrey: {
-            black: string;
-            black6: string;
-            black7: string;
-            black8: string;
-            black9: string;
-            grey: string;
-            grey1: string;
-            grey2: string;
-            grey4: string;
-            grey6: string;
-        };
-        res: {
-            red: string;
-            magenta: string;
-            orange: string;
-            blue: string;
-            turquoise: string;
-            green: string;
-            red2: string;
-            red1: string;
-            green1: string;
-            green2: string;
-            green4: string;
-        };
-        ebu: {
-            blue: string;
-            blue1: string;
-            blue2: string;
-            blue4: string;
-            turquoise: string;
-            turquoise1: string;
-            turquoise2: string;
-            turquoise4: string;
-        };
-        promo: {
-            backgroundMypx: string;
-            textMypx: string;
-            backgroundEpic: string;
-            textEpic: string;
-        };
-        status: {
-            success: string;
-            epicSuccess: string;
-            error: string;
-            epicError: string;
-            warning: string;
-            epicWarning: string;
-            warningText: string;
-            epicWarningText: string;
-        };
-        theme: {
-            mypxBackground: string;
-            mypxBackground1: string;
-            mypxBackground2: string;
-            mypxBackground3: string;
-            mypxIconBackground: string;
-            mypxIconColor: string;
-            mypxTextDetails: string;
-            mypxTransparentBlurBackground: string;
-            epicBackground: string;
-            epicBackgroundDarkGrey3: string;
-            epicBackground1: string;
-            epicBackground2: string;
-            epicBackground3: string;
-            epicIconBackground: string;
-            epicIconColor: string;
-            epicTextDetails: string;
-            epicTransparentBlurBackground: string;
-            scarletIconBackground: string;
-            scarletIconColor: string;
-            scarletTransparentBlurBackground: string;
-            scarletTextDetails: string;
-            scarletBackground1: string;
-            scarletBackground2: string;
-            scarletBackground3: string;
-        };
-        yellow: string;
-        almond: string;
-        white: string;
-    };
-};
-export declare const ScarletColors: {
-    white: string;
-    shadesOfGrey: {
-        black5: string;
-        black6: string;
-        black7: string;
-        black8: string;
-        black85: string;
-        grey1: string;
-        grey2: string;
-        grey3: string;
-        grey4: string;
-        grey5: string;
-        grey6: string;
-        grey7: string;
-        grey8: string;
-        grey9: string;
-        grey: string;
-        black: string;
-        black4: string;
-        black9: string;
-        whiteOpacity8: string;
-        whiteOpacity16: string;
-        blackOpacity6: string;
-        black9Opacity6: string;
-        white: string;
-    };
-    status: {
-        validGreenNeg: string;
-        warningOrangeNeg: string;
-        warningRedNeg: string;
-        success: string;
-        warning: string;
-        warningText: string;
-        error: string;
-        toastError: string;
-        validGreenPos: string;
-        warningOrangePos: string;
-        warningRedPos: string;
-        order: string;
-        scarletOrderColor: string;
-    };
-    aquaBlue: string;
-    barbiePink: string;
-    black: string;
-    blackTwo: string;
-    blackTwo80: string;
-    blueberry: string;
-    purple: string;
-    blueberryLight: string;
-    blueberryTransparent: string;
-    brightSkyBlue: string;
-    cerulean: string;
-    cloudyBlue: string;
-    cobalt: string;
-    darkPurple: string;
-    frogGreen: string;
-    grey: string;
-    indigo: string;
-    marigold: string;
-    nastyGreen: string;
-    freshGreen: string;
-    pumpkinOrange: string;
-    red: string;
-    redTwo: string;
-    redPink: string;
-    sandy: string;
-    topaz: string;
-    unnamedBlue: string;
-    unnamedGreen: string;
-    unnamedOrange: string;
-    veryLightPink: string;
-    veryLightPinkTwo: string;
-    warmBlue: string;
-    whitePure: string;
-    whitePureTransparent: string;
-    unnamedGrey: string;
-    greyLight: string;
-    greyLightTwo: string;
-    whiteThree: string;
-    green: string;
-    blackThree: string;
-    purpleLight: string;
-    greyTwo: string;
-    brand: {
-        purple: string;
-        purple70: string;
-        red: string;
-        pink: string;
-        orange: string;
-        yellow: string;
-        green: string;
-        turquoise: string;
-        blue: string;
-        darkBlue: string;
-        scarletRed: string;
-    };
-    v7: {
-        promo: string;
-        epicPromo: string;
-        pink: string;
-        status: {
-            info: string;
-            success: string;
-            epicSuccess: string;
-            error: string;
-            epicError: string;
-            warning: string;
-            epicWarning: string;
-        };
-        shadesOfPurple: {
-            purple1: string;
-            purple2: string;
-            purple3: string;
-        };
-        shadesOfRed: {
-            red1: string;
-            red2: string;
-            red3: string;
-        };
-        shadesOfGrey: {
-            black0Opacity4: string;
-            black0Opacity12: string;
-            blackOpacity2: string;
-            blackOpacity44: string;
-            black0Opacity8: string;
-            black0Opacity56: string;
-            black0Opacity16: string;
-            whiteOpacity8: string;
-            whiteOpacity12: string;
-            whiteOpacity16: string;
-            whiteOpacity4: string;
-            whiteOpacity52: string;
-            whiteOpacity64: string;
-            whiteOpacity24: string;
-        };
-    };
-    v8_1: {
-        shadesOfPurple: {
-            purple: string;
-            purpleLight: string;
-        };
-        shadesOfGrey: {
-            dark4: string;
-            dark40: string;
-            dark120: string;
-            dark160: string;
-            dark280: string;
-            dark320: string;
-        };
-        text: {
-            black: string;
-            details: string;
-        };
-        success: string;
-        strokeBlack: string;
-        white: string;
-        black: string;
-    };
-    v8: {
-        shadesOfPurple: {
-            purple: string;
-            purple1: string;
-            purple2: string;
-            purple3: string;
-            purple4: string;
-            purple5: string;
-            purple6: string;
-            purple7: string;
-            purple8: string;
-            purple9: string;
-        };
-        shadesOfGrey: {
-            black: string;
-            black6: string;
-            black7: string;
-            black8: string;
-            black9: string;
-            grey: string;
-            grey1: string;
-            grey2: string;
-            grey4: string;
-            grey6: string;
-        };
-        res: {
-            red: string;
-            magenta: string;
-            orange: string;
-            blue: string;
-            turquoise: string;
-            green: string;
-            red2: string;
-            red1: string;
-            green1: string;
-            green2: string;
-            green4: string;
-        };
-        ebu: {
-            blue: string;
-            blue1: string;
-            blue2: string;
-            blue4: string;
-            turquoise: string;
-            turquoise1: string;
-            turquoise2: string;
-            turquoise4: string;
-        };
-        promo: {
-            backgroundMypx: string;
-            textMypx: string;
-            backgroundEpic: string;
-            textEpic: string;
-        };
-        status: {
-            success: string;
-            epicSuccess: string;
-            error: string;
-            epicError: string;
-            warning: string;
-            epicWarning: string;
-            warningText: string;
-            epicWarningText: string;
-        };
-        theme: {
-            mypxBackground: string;
-            mypxBackground1: string;
-            mypxBackground2: string;
-            mypxBackground3: string;
-            mypxIconBackground: string;
-            mypxIconColor: string;
-            mypxTextDetails: string;
-            mypxTransparentBlurBackground: string;
-            epicBackground: string;
-            epicBackgroundDarkGrey3: string;
-            epicBackground1: string;
-            epicBackground2: string;
-            epicBackground3: string;
-            epicIconBackground: string;
-            epicIconColor: string;
-            epicTextDetails: string;
-            epicTransparentBlurBackground: string;
-            scarletIconBackground: string;
-            scarletIconColor: string;
-            scarletTransparentBlurBackground: string;
-            scarletTextDetails: string;
-            scarletBackground1: string;
-            scarletBackground2: string;
-            scarletBackground3: string;
-        };
-        yellow: string;
-        almond: string;
-        white: string;
-    };
-};
-export declare const Gradients: {
-    red: string[];
-    magenta: string[];
-    orange: string[];
-    blue: string[];
-    turquoise: string[];
-    green: string[];
-};
-//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+PlB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBzB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}

package/dist/sizes.d.ts

@@ -1,69 +0,0 @@
-export declare const CommonSizes: {
-    AbsoluteBiggest: number;
-    Big: number;
-    Bigger: number;
-    Biggest: number;
-    Medium: number;
-    Small: number;
-    Smaller: number;
-    Smallest: number;
-};
-export declare const Sizes: {
-    NavigationBarHeight: number;
-    StatusHeight: number;
-    AlertPopupButton: number;
-    AlertPopupText: number;
-    AlertPopupTitle: number;
-    BubbleTitleSize: number;
-    ButtonTitleSize: number;
-    CardText: number;
-    CharLimitTextInput: number;
-    ContentMaxWidth: number;
-    ContentWidth: number;
-    CounterIconTextSize: number;
-    HeaderHeight: number;
-    HeaderSubtitleFontSize: number;
-    HeaderTitleFontSize: number;
-    IconSize: number;
-    InfoViewSize: number;
-    ListHeaderAndroid: number;
-    ListHeaderIOS: number;
-    ListItemInfoSubtitle: number;
-    ListItemInfoTitle: number;
-    ListItemNotificationTitle: number;
-    ListItemSecondSubtitle: number;
-    ListItemSubtitle: number;
-    ListItemSubtitleIOS: number;
-    ListItemTime: number;
-    ListItemTitle: number;
-    ListWithAvatarExplicitText: number;
-    NotificationMessage: number;
-    PromptPopupText: number;
-    PromptPopupTitle: number;
-    PxCompactPriceTextCurrencySize: number;
-    PxCompactPriceTextDigitsSize: number;
-    PxCompactPriceTextDurationSize: number;
-    PxCompactPriceTextUnitsSize: number;
-    PxMobilePricingPlanCardFirstLine: number;
-    PxMobilePricingPlanCardLine: number;
-    PxMobilePricingPlanCardTitle: number;
-    PxPriceButtonTextSize: number;
-    PxPriceTextSize: number;
-    PxPriceTextSizeMultiLine: number;
-    PxTextIconRightIconSize: number;
-    PxTextIconRightTextSize: number;
-    PxOptionCardIcon: number;
-    PxOptionCardSubtitle: number;
-    PxOptionCardTitle: number;
-    PxProgressBarText: number;
-    SmallInformativeSubtitleText: number;
-    SmallInformativeText: number;
-    TabBarIcon: number;
-    TextBodySize: number;
-    TextDisclaimerSize: number;
-    TextHeader2Size: number;
-    TextHeaderSize: number;
-    TopNotification: number;
-    UsageCardHeight: number;
-};
-//# sourceMappingURL=sizes.d.ts.map

package/dist/sizes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../src/sizes.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDjB,CAAC"}

package/src/AssetContainer.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-export const AssetContainerContext = React.createContext<{
-  size?: number;
-  id?: string;
-}>({});
-
-export function useAssetContainer() {
-  const context = React.useContext(AssetContainerContext);
-
-  if (!context) {
-    throw new Error('useAssetContainer must be used within an AssetContainer');
-  }
-
-  return context;
-}
-
-export function AssetProvider({
-  children,
-  size,
-  id,
-}: {
-  children: React.ReactNode;
-  size?: number;
-  id?: string;
-}) {
-  return (
-    <AssetContainerContext.Provider value={{ size, id }}>
-      {children}
-    </AssetContainerContext.Provider>
-  );
-}

package/src/colors.ts

@@ -1,289 +0,0 @@
-export const Colors = {
-  aquaBlue: 'rgb(10, 216, 220)',
-  barbiePink: 'rgb(255, 65, 140)',
-  black: 'rgb(51, 51, 51)',
-  blackTwo: 'rgb(0, 0, 0)',
-  blackTwo80: 'rgba(0, 0, 0, 0.8)',
-  blueberry: 'rgb(92, 45, 145)',
-  purple: 'rgb(92, 45, 145)',
-  blueberryLight: 'rgb(141, 108, 178)',
-  blueberryTransparent: 'rgba(92, 45, 145, 0.3)',
-  brightSkyBlue: 'rgb(0, 188, 238)',
-  cerulean: 'rgb(0, 115, 207)',
-  cloudyBlue: 'rgb(193, 193, 195)',
-  cobalt: 'rgb(62, 33, 128)',
-  darkPurple: 'rgb(30, 6, 59)',
-  frogGreen: 'rgb(108, 208, 9)',
-  grey: 'rgb(112, 112, 112)', // named 707070 on zeplin's styleguide
-  indigo: 'rgb(75, 12, 146)',
-  marigold: 'rgb(255, 202, 0)',
-  nastyGreen: 'rgb(116, 187, 57)',
-  freshGreen: 'rgb(125,210,81)',
-  pumpkinOrange: 'rgb(252, 127, 4)',
-  red: 'rgb(237, 0, 0)',
-  redTwo: 'rgb(255, 0, 0)',
-  redPink: 'rgb(238, 46, 93)',
-  sandy: 'rgb(234, 200, 131)',
-  topaz: 'rgb(21, 195, 211)',
-  unnamedBlue: 'rgb(70, 70, 246)', // Used in zeplin but absent from styleguide
-  unnamedGreen: 'rgb(125, 210, 81)', // Used in zeplin but absent from styleguide
-  unnamedOrange: 'rgb(255, 172, 45)', // Used in zeplin but absent from styleguide
-  veryLightPink: 'rgb(242, 242, 242)',
-  veryLightPinkTwo: 'rgb(221, 221, 221)',
-  warmBlue: 'rgb(88, 86, 214)',
-  white: 'rgb(246, 246, 246)',
-  whitePure: 'rgb(255, 255, 255)', // Also called white in zeplin
-  whitePureTransparent: 'rgba(255, 255, 255, 0.5)',
-  unnamedGrey: 'rgb(237, 237, 237)', // Used in zeplin but absent from styleguide
-  greyLight: 'rgb(233, 233, 233)', // unnamed in zeplin
-  greyLightTwo: 'rgb(146, 146, 146)', // unnamed in zeplin
-  whiteThree: 'rgb(245, 245, 245)',
-  green: 'rgb(0, 128, 0)', // unnamed in zeplin
-  blackThree: 'rgb(58,58,58)',
-  purpleLight: 'rgb(205,191,221)', // unnamed in zeplin
-  greyTwo: 'rgb(157, 157, 157)', // unnamed in zeplin
-  // New Theme colors
-  brand: {
-    purple: 'rgb(92, 45, 145)',
-    purple70: 'rgb(141, 108, 145)',
-    red: 'rgba(238, 46, 93, 1)',
-    pink: 'rgba(255, 65, 140, 1)',
-    orange: 'rgba(243, 146, 0, 1)',
-    yellow: 'rgba(255, 202, 0, 1)',
-    green: 'rgba(129, 199, 71, 1)',
-    turquoise: 'rgba(102, 210, 204, 1)',
-    blue: 'rgba(0, 188, 238, 1)',
-    darkBlue: 'rgba(0, 115, 207, 1)',
-    scarletRed: '#E61F13',
-  },
-  // Shades of grey
-  shadesOfGrey: {
-    grey1: 'rgba(249, 249, 249, 1)',
-    grey2: 'rgba(243, 243, 243, 1)',
-    grey3: 'rgba(236, 236, 237, 1)',
-    grey4: 'rgba(230, 230, 231, 1)',
-    grey5: 'rgba(224, 224, 225, 1)',
-    grey6: 'rgba(218, 218, 219, 1)',
-    grey7: 'rgba(211, 211, 213, 1)',
-    grey8: 'rgba(205, 205, 207, 1)',
-    grey9: 'rgba(199, 199, 201, 1)',
-    grey: 'rgba(193, 193, 195, 1)',
-    black: 'rgba(10, 10, 10, 1)',
-    black4: 'rgba(125, 125, 125, 1)',
-    black5: 'rgba(99, 99, 99, 1)',
-    black6: 'rgba(85, 85, 85, 1)',
-    black7: 'rgba(70, 70, 70, 1)',
-    black8: 'rgba(58, 58, 58, 1)',
-    black9: 'rgba(37, 37, 37, 1)',
-    whiteOpacity8: 'rgba(255, 255, 255, 0.08)',
-    whiteOpacity16: 'rgba(255, 255, 255, 0.16)',
-    blackOpacity6: 'rgba(10, 10, 10, 0.6)',
-    black9Opacity6: 'rgba(37, 37, 37, 0.6)',
-    white: 'rgba(255, 255, 255, 1)',
-  },
-  status: {
-    validGreenPos: 'rgba(0, 128, 0, 1)', // TODO: To be deleted
-    validGreenNeg: 'rgba(41, 219, 41, 1)',
-    warningOrangePos: 'rgba(255, 137, 0, 1)', // TODO: To be deleted
-    warningRedPos: 'rgba(179, 0, 0, 1)', // TODO: To be deleted
-    success: 'rgb(0,128,0)',
-    order: 'rgba(42, 209, 42, 1)',
-    warning: 'rgba(255, 137, 0, 1)',
-    warningText: 'rgba(170, 93, 0, 1)',
-    error: 'rgba(179, 0, 0, 1)',
-    toastError: 'rgba(242, 38, 19, 1)',
-    scarletOrderColor: '#008000',
-  },
-  // v7 colors
-  v7: {
-    promo: 'rgba(222, 0, 55, 1)',
-    epicPromo: 'rgba(255, 67, 113, 1)',
-    pink: 'rgba(255, 67, 113, 1)',
-    status: {
-      info: 'rgba(92, 45, 145, 1)',
-      success: '#008000',
-      epicSuccess: '#2AD12A',
-      error: '#B30000',
-      epicError: '#F22613',
-      warning: '#A55D00',
-      epicWarning: '#F5AB35',
-    },
-    shadesOfPurple: {
-      purple1: 'rgba(92, 45, 145, 0.16)',
-      purple2: 'rgba(92, 45, 145, 1)',
-      purple3: 'rgba(125, 87, 167, 1)',
-    },
-    shadesOfRed: {
-      red1: '#E61F13',
-      red2: '#EC574E',
-      red3: 'rgba(230, 31, 19, 0.16)',
-    },
-    shadesOfGrey: {
-      black0Opacity4: 'rgba(0, 0, 0, 0.04)',
-      black0Opacity12: 'rgba(0, 0, 0, 0.12)',
-      blackOpacity2: 'rgba(0, 0, 0, 0.2)',
-      blackOpacity44: 'rgba(0, 0, 0, 0.44)',
-      black0Opacity8: 'rgba(0,0,0,0.08)',
-      black0Opacity56: 'rgba(0, 0, 0, 0.56)',
-      black0Opacity16: 'rgba(0, 0, 0, 0.16)',
-      whiteOpacity8: 'rgba(255, 255, 255, 0.08)',
-      whiteOpacity12: 'rgba(255, 255, 255, 0.12)',
-      whiteOpacity16: 'rgba(255, 255, 255, 0.16)',
-      whiteOpacity4: 'rgba(255, 255, 255, 0.4)',
-      whiteOpacity52: 'rgba(255, 255, 255, 0.52)',
-      whiteOpacity64: 'rgba(255,255,255,0.64)',
-      whiteOpacity24: 'rgba(255, 255, 255, 0.24)',
-    },
-  },
-  // v8 is already used for unknown reason... so we use v8_1
-  v8_1: {
-    shadesOfPurple: {
-      purple: '#5C2D91',
-      purpleLight: '#DED5E9',
-    },
-    shadesOfGrey: {
-      dark4: 'rgba(0, 0, 0, 0.04)',
-      dark40: 'rgba(0, 0, 0, 0.4)',
-      dark120: 'rgba(0, 0, 0, 0.12)',
-      dark160: 'rgba(0, 0, 0, 0.16)',
-      dark280: 'rgba(0, 0, 0, 0.28)',
-      dark320: 'rgba(0, 0, 0, 0.32)',
-    },
-    text: {
-      black: '#252525',
-      details: '#707070',
-    },
-    success: '#008000',
-    strokeBlack: '#707070',
-    white: '#FFFFFF',
-    black: '#252525',
-  },
-  v8: {
-    shadesOfPurple: {
-      purple: '#5C2D91',
-      purple1: '#EEEAF4',
-      purple2: '#DED5E9',
-      purple3: '#CEC0DE',
-      purple4: '#BEABD3',
-      purple5: '#AD96C8',
-      purple6: '#9D81BD',
-      purple7: '#8D6CB2',
-      purple8: '#7D57A7',
-      purple9: '#6C429C',
-    },
-    shadesOfGrey: {
-      black: '#000000',
-      black6: '#7D7D7D',
-      black7: '#636363',
-      black8: '#464646',
-      black9: '#252525',
-      grey: '#C1C1C3',
-      grey1: '#F9F9F9',
-      grey2: '#F3F3F3',
-      grey4: '#E6E6E7',
-      grey6: '#DADADB',
-    },
-    res: {
-      red: '#EE2E5D',
-      magenta: '#FF418C',
-      orange: '#F39200',
-      blue: '#00BCEE',
-      turquoise: '#66D2CC',
-      green: '#81C747',
-      red2: '#FCD5DF',
-      red1: '#FDEAEE',
-      green1: '#F2F9EC',
-      green2: '#E6F4DA',
-      green4: '#CDE9B5',
-    },
-    ebu: {
-      blue: '#00BCEE',
-      blue1: '#E5F8FD',
-      blue2: '#CCF2FC',
-      blue4: '#99E4F8',
-      turquoise: '#66D2CC',
-      turquoise1: '#EFFAFA',
-      turquoise2: '#E0F6F5',
-      turquoise4: '#C2EDEB',
-    },
-    promo: {
-      backgroundMypx: '#DE2A56',
-      textMypx: '#DE0037',
-      backgroundEpic: '#DE2A56',
-      textEpic: '#FF4371',
-    },
-    status: {
-      success: '#008000',
-      epicSuccess: '#2AD12A',
-      error: '#B30000',
-      epicError: '#F22613',
-      warning: '#F58221',
-      epicWarning: '#F5AB35',
-      warningText: '#A55D00',
-      epicWarningText: '#F5AB35',
-    },
-    //TODO : Need to clean up epic styles once all the epic references are removed from rn-proximus
-    theme: {
-      mypxBackground: 'rgba(255, 255, 255, 1)',
-      mypxBackground1: 'rgba(0, 0, 0, 0.04)',
-      mypxBackground2: 'rgba(0, 0, 0, 0.08)',
-      mypxBackground3: 'rgba(0, 0, 0, 0.12)',
-      mypxIconBackground: 'rgba(92, 45, 145, 0.16)',
-      mypxIconColor: 'rgba(92, 45, 145, 1.0)',
-      mypxTextDetails: 'rgba(0, 0, 0, 0.56)',
-      mypxTransparentBlurBackground: 'rgba(70, 70, 70, 0.8)',
-      epicBackground: 'rgba(0, 0, 0, 1)',
-      epicBackgroundDarkGrey3: 'rgba(54, 54, 54, 1)',
-      epicBackground1: 'rgba(255, 255, 255, 0.08)',
-      epicBackground2: 'rgba(255, 255, 255, 0.12)',
-      epicBackground3: 'rgba(255, 255, 255, 0.16)',
-      epicIconBackground: 'rgba(255, 255, 255, 0.24)',
-      epicIconColor: 'rgba(255, 255, 255, 1.0)',
-      epicTextDetails: 'rgba(255, 255, 255, 0.64)',
-      epicTransparentBlurBackground: 'rgba(255, 255, 255, 0.8)',
-      scarletIconBackground: 'rgba(230, 31, 19, 0.16)',
-      scarletIconColor: '#E61F13',
-      scarletTransparentBlurBackground: 'rgba(70, 70, 70, 0.8)',
-      scarletTextDetails: 'rgba(0, 0, 0, 0.56)',
-      scarletBackground1: 'rgba(0, 0, 0, 0.04)',
-      scarletBackground2: 'rgba(0, 0, 0, 0.08)',
-      scarletBackground3: 'rgba(0, 0, 0, 0.12)',
-    },
-    yellow: '#FFCA00',
-    almond: '#EAC883',
-    white: '#FFFFFF',
-  },
-};
-
-export const ScarletColors = {
-  ...Colors,
-  white: 'rgba(255, 255, 255, 1)',
-  shadesOfGrey: {
-    ...Colors.shadesOfGrey,
-    black5: 'rgba(215, 215, 215, 1)',
-    black6: 'rgba(125, 125, 125, 1)',
-    black7: 'rgba(99, 99, 99, 1)',
-    black8: 'rgba(70, 70, 70, 1)',
-    black85: 'rgba(58, 58, 58, 1)',
-  },
-  status: {
-    ...Colors.status,
-    validGreenNeg: 'rgba(41, 219, 41, 1)', // TODO: To be deleted
-    warningOrangeNeg: 'rgba(255, 137, 0, 1)', // TODO: To be deleted
-    warningRedNeg: 'rgba(179, 0, 0, 1)', // TODO: To be deleted
-    success: 'rgba(41, 219, 41, 1)',
-    warning: 'rgba(255, 137, 0, 1)',
-    warningText: 'rgba(245, 171, 53, 1)',
-    error: 'rgba(242, 38, 19, 1)',
-    toastError: 'rgba(242, 38, 19, 1)',
-  },
-};
-
-export const Gradients = {
-  red: [Colors.brand.red, Colors.brand.purple],
-  magenta: [Colors.brand.pink, Colors.brand.purple],
-  orange: [Colors.brand.orange, Colors.brand.purple],
-  blue: [Colors.brand.blue, Colors.brand.purple],
-  turquoise: [Colors.brand.turquoise, Colors.brand.purple],
-  green: [Colors.brand.green, Colors.brand.purple],
-};

package/src/sizes.ts

@@ -1,78 +0,0 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
-
-const { width, height } = Dimensions.get('window');
-
-const NavigationBarHeight = 44;
-const StatusHeight =
-  Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0;
-const DefaultContentWidth = 448;
-
-export const CommonSizes = {
-  AbsoluteBiggest: 36,
-  Big: 18,
-  Bigger: 20,
-  Biggest: 24,
-  Medium: 16,
-  Small: 14,
-  Smaller: 12,
-  Smallest: 10,
-};
-
-export const Sizes = {
-  NavigationBarHeight,
-  StatusHeight,
-  AlertPopupButton: CommonSizes.Smaller,
-  AlertPopupText: CommonSizes.Small,
-  AlertPopupTitle: CommonSizes.Bigger,
-  BubbleTitleSize: CommonSizes.Small,
-  ButtonTitleSize: CommonSizes.Bigger,
-  CardText: CommonSizes.Small,
-  CharLimitTextInput: CommonSizes.Smaller,
-  ContentMaxWidth: 468,
-  ContentWidth: Math.min(Math.min(width, height), DefaultContentWidth),
-  CounterIconTextSize: CommonSizes.Smallest,
-  HeaderHeight: StatusHeight + NavigationBarHeight,
-  HeaderSubtitleFontSize: CommonSizes.Smallest,
-  HeaderTitleFontSize: CommonSizes.Big,
-  IconSize: CommonSizes.Medium,
-  InfoViewSize: CommonSizes.Small,
-  ListHeaderAndroid: CommonSizes.Small,
-  ListHeaderIOS: CommonSizes.Big,
-  ListItemInfoSubtitle: CommonSizes.Smaller,
-  ListItemInfoTitle: CommonSizes.Medium,
-  ListItemNotificationTitle: CommonSizes.Medium,
-  ListItemSecondSubtitle: CommonSizes.Smallest,
-  ListItemSubtitle: CommonSizes.Smaller,
-  ListItemSubtitleIOS: CommonSizes.Smaller,
-  ListItemTime: CommonSizes.Smallest,
-  ListItemTitle: CommonSizes.Medium,
-  ListWithAvatarExplicitText: CommonSizes.Smallest,
-  NotificationMessage: CommonSizes.Small,
-  PromptPopupText: CommonSizes.Small,
-  PromptPopupTitle: CommonSizes.Biggest,
-  PxCompactPriceTextCurrencySize: CommonSizes.Biggest,
-  PxCompactPriceTextDigitsSize: CommonSizes.Small,
-  PxCompactPriceTextDurationSize: CommonSizes.Smaller,
-  PxCompactPriceTextUnitsSize: CommonSizes.AbsoluteBiggest,
-  PxMobilePricingPlanCardFirstLine: CommonSizes.Big,
-  PxMobilePricingPlanCardLine: CommonSizes.Small,
-  PxMobilePricingPlanCardTitle: CommonSizes.Big,
-  PxPriceButtonTextSize: CommonSizes.Small,
-  PxPriceTextSize: CommonSizes.Small,
-  PxPriceTextSizeMultiLine: CommonSizes.Smaller,
-  PxTextIconRightIconSize: CommonSizes.Biggest,
-  PxTextIconRightTextSize: CommonSizes.Small,
-  PxOptionCardIcon: CommonSizes.Biggest,
-  PxOptionCardSubtitle: CommonSizes.Small,
-  PxOptionCardTitle: CommonSizes.Small,
-  PxProgressBarText: CommonSizes.Small,
-  SmallInformativeSubtitleText: CommonSizes.Smallest,
-  SmallInformativeText: CommonSizes.Smaller,
-  TabBarIcon: CommonSizes.Biggest,
-  TextBodySize: CommonSizes.Smaller,
-  TextDisclaimerSize: CommonSizes.Smallest,
-  TextHeader2Size: CommonSizes.Biggest,
-  TextHeaderSize: CommonSizes.Big,
-  TopNotification: CommonSizes.Medium,
-  UsageCardHeight: height,
-};