@ovotech/element-native 5.4.2 → 5.4.3-canary-faec600-428

package/dist/{src/components → components}/Cards/IconDataCard/IconDataCard.styles.d.ts

@@ -510,7 +510,9 @@ export declare const CardWithIconData: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1085,7 +1087,9 @@ export declare const HeadingContainer: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1658,7 +1662,9 @@ export declare const ValuesWrapper: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2231,7 +2237,9 @@ export declare const ValueContainer: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2806,7 +2814,584 @@ export declare const MetricsContainer: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
+        "300": number;
+        "350": number;
+        "400": number;
+        "450": number;
+        "500": number;
+        "550": number;
+        "600": number;
+        "700": number;
+        "800": number;
+        "900": number;
+        "1000": number;
+        "1100": number;
+        "1200": number;
+        "1300": number;
+        "1400": number;
+        "1500": number;
+        "1600": number;
+        "1800": number;
+        "2000": number;
+        "2400": number;
+        "3000": number;
+        "3500": number;
+        base: number;
+    };
+    button: {
+        color: {
+            focus: {
+                blue: string;
+                white: string;
+            };
+        };
+        surface: {
+            color: {
+                fg: string;
+                bg: string;
+                bgVariant: string;
+                bgHover: string;
+                fgInverted: string;
+                bgInverted: string;
+                bgInvertedHover: string;
+            };
+        };
+        destructive: {
+            color: {
+                fg: string;
+                bg: string;
+                bgHover: string;
+            };
+        };
+    };
+    input: {
+        color: {
+            label: string;
+            border: string;
+            borderError: string;
+            hint: string;
+            selected: string;
+            selectedTint: string;
+        };
+    };
+}, {}, never>;
+export declare const SubMetricsContainer: import("styled-components").StyledComponent<typeof View, {
+    color: {
+        neutral: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+            "80": string;
+            white: string;
+            black: string;
+        };
+        red: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+            "80": string;
+        };
+        orange: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+        };
+        yellow: {
+            "70": string;
+            "80": string;
+        };
+        green: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "56": string;
+            "60": string;
+            "70": string;
+            "80": string;
+            "90": string;
+        };
+        blue: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+        };
+        alert: {
+            success: string;
+            successTint: string;
+            warning: string;
+            warningTint: string;
+            error: string;
+            errorTint: string;
+            info: string;
+            infoTint: string;
+            neutral: string;
+            neutralTint: string;
+            border: string;
+        };
+        input: {
+            borderDim: string;
+        };
+        brand: {
+            brand: string;
+            dark: string;
+            dim: string;
+            bold: string;
+            bright: string;
+            gradientFrom: string;
+            gradientTo: string;
+            onBrand: string;
+            onBrandVariant: string;
+            aiGradientFrom: string;
+            aiGradientTo: string;
+            fixed: {
+                brand: string;
+                dark: string;
+                dim: string;
+                bold: string;
+                bright: string;
+                onBrand: string;
+                onBrandVariant: string;
+            };
+        };
+        outline: {
+            outer: string;
+            inner: string;
+        };
+        surface: {
+            surface: string;
+            bright: string;
+            dim: string;
+            onSurface: string;
+            onSurfaceVariant: string;
+            border: string;
+            borderDim: string;
+            link: string;
+            electricity: string;
+            gas: string;
+            fadeFrom: string;
+            fadeTo: string;
+            fixed: {
+                onSurface: string;
+                bright: string;
+            };
+        };
+    };
+    transition: {
+        duration: {
+            fast: number;
+            medium: number;
+            slow: number;
+        };
+    };
+    unit: {
+        "0": number;
+        "25": number;
+        "50": number;
+        "100": number;
+        "200": number;
+        "300": number;
+        "350": number;
+        "400": number;
+        "450": number;
+        "500": number;
+        "550": number;
+        "600": number;
+        "700": number;
+        "800": number;
+        "900": number;
+        "1000": number;
+        "1100": number;
+        "1200": number;
+        "1300": number;
+        "1400": number;
+        "1500": number;
+        "1600": number;
+        "1800": number;
+        "2000": number;
+        "2400": number;
+        "3000": number;
+        "3500": number;
+    };
+    border: {
+        radius: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            "2xl": number;
+            "3xl": number;
+        };
+        width: {
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    breakpoint: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+    };
+    native: {
+        font: {
+            family: {
+                black: string;
+                book: string;
+                bold: string;
+            };
+        };
+    };
+    web: {
+        font: {
+            family: string;
+        };
+    };
+    font: {
+        letterSpacing: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        lineHeight: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        paragraphSpace: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        size: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        weight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+    };
+    mediaQuery: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+    };
+    customMediaQuery: {
+        "xsmall-and-up": number;
+        "small-and-up": number;
+        "medium-and-up": number;
+        "large-and-up": number;
+    };
+    opacity: {
+        solid: number;
+        translucent: number;
+        transparent: number;
+    };
+    space: {
+        "0": number;
+        "25": number;
+        "50": number;
+        "100": number;
+        "150": number;
+        "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3379,7 +3964,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3956,7 +4543,9 @@ export declare const Metric: import("styled-components").StyledComponent<(props:
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4533,7 +5122,9 @@ export declare const SubMetric: import("styled-components").StyledComponent<(pro
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5110,7 +5701,9 @@ export declare const StyledP: import("styled-components").StyledComponent<(props
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{esm/src/components → components}/Cards/IconDataCard/IconDataCard.styles.js

@@ -1,20 +1,20 @@
-import { theme } from '@ovotech/element-core';
 import { View } from 'react-native';
 import styled from '../../../styled.native';
 import { Card } from '../../Card';
 import { Heading2, Heading4 } from '../../Heading';
 import { P } from '../../P';
+import { SmallCardHeight } from '../shared';
 export const CardWithIconData = styled(Card)(({ isSmall }) => ({
-    minHeight: isSmall ? 172 : undefined,
+    minHeight: isSmall ? SmallCardHeight : undefined,
 }));
-export const HeadingContainer = styled(View)({
+export const HeadingContainer = styled(View)(({ theme }) => ({
     marginBottom: theme.space[350],
-});
+}));
 export const ValuesWrapper = styled(View)(({ theme }) => ({
     flexDirection: 'row',
     gap: theme.space[300],
 }));
-export const ValueContainer = styled(View)(({ isSmall }) => ({
+export const ValueContainer = styled(View)(({ isSmall, theme }) => ({
     width: isSmall ? undefined : '50%',
     gap: theme.space[100],
 }));
@@ -23,6 +23,12 @@ export const MetricsContainer = styled(View)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.space[100],
 }));
+export const SubMetricsContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[25],
+    gap: theme.space[100],
+}));
 export const IconContainer = styled(View)(({ theme }) => ({
     borderRadius: theme.border.radius['2xl'],
     backgroundColor: theme.color.surface.surface,

package/dist/{src/components → components}/Cards/IconTextCard/IconTextCard.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 import { IconNameExtended } from '../../../providers';
-export type TitleSegment = {
-    color?: 'default' | 'onSurface' | string;
-    text: string;
-};
-export type Props = {
+import { TitleSegment } from '../types';
+type Props = {
     icon: IconNameExtended;
     title?: string | TitleSegment[];
     subTitle?: string;
     size?: 'default' | 'small';
 };
 export declare const IconTextCard: React.FC<Props>;
+export {};