@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

package/dist/components/DescriptionList/styled.d.ts

@@ -1,570 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { ViewProps } from 'react-native';
-import { Breakpoints } from '../../hooks';
-export declare const Dl: import("styled-components").StyledComponent<typeof import("react-native").View, {
-    core: {
-        color: {
-            brand: {
-                midnight: string;
-                midnightTint: string;
-                forest: string;
-                forestTint: string;
-                ovo: string;
-                ovoTint: string;
-                leaf: string;
-                leafTint: string;
-                energised: string;
-                energisedTint: string;
-                offwhite: string;
-                white: string;
-                black: string;
-            };
-            neutral: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            red: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            orange: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            yellow: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            green: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            blue: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-        };
-        fontFamily: {
-            mono: {
-                native: string;
-                web: string;
-            };
-            heading: {
-                native: string;
-                web: string;
-            };
-            body: {
-                native: string;
-                web: string;
-            };
-            bodyBold: {
-                native: string;
-                web: string;
-            };
-        };
-        fontWeight: {
-            book: number;
-            bold: number;
-            black: number;
-        };
-        fontSize: {
-            display0: {
-                small: number;
-                large: number;
-            };
-            display1: {
-                small: number;
-                large: number;
-            };
-            display2: {
-                small: number;
-                large: number;
-            };
-            display3: {
-                small: number;
-                large: number;
-            };
-            heading1: {
-                small: number;
-                large: number;
-            };
-            heading2: {
-                small: number;
-                large: number;
-            };
-            heading3: {
-                small: number;
-                large: number;
-            };
-            heading4: {
-                small: number;
-                large: number;
-            };
-            lead: {
-                small: number;
-                large: number;
-            };
-            body: {
-                small: number;
-                large: number;
-            };
-            small: {
-                small: number;
-                large: number;
-            };
-            label: {
-                small: number;
-                large: number;
-            };
-        };
-        letterSpacing: {
-            base: number;
-            compressed: number;
-            extraCompressed: number;
-        };
-        lineHeight: {
-            display0: {
-                small: number;
-                large: number;
-            };
-            display1: {
-                small: number;
-                large: number;
-            };
-            display2: {
-                small: number;
-                large: number;
-            };
-            display3: {
-                small: number;
-                large: number;
-            };
-            heading1: {
-                small: number;
-                large: number;
-            };
-            heading2: {
-                small: number;
-                large: number;
-            };
-            heading3: {
-                small: number;
-                large: number;
-            };
-            heading4: {
-                small: number;
-                large: number;
-            };
-            lead: {
-                small: number;
-                large: number;
-            };
-            body: {
-                small: number;
-                large: number;
-            };
-            small: {
-                small: number;
-                large: number;
-            };
-            label: {
-                small: number;
-                large: number;
-            };
-        };
-        borderWidth: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        breakpoint: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        mediaQuery: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        customMediaQuery: {
-            "small-and-up": number;
-            "medium-and-up": number;
-            "large-and-up": number;
-        };
-        opacity: {
-            solid: number;
-            translucent: number;
-            transparent: number;
-        };
-        radius: {
-            small: number;
-            medium: number;
-            large: number;
-            max: number;
-        };
-        space: {
-            "0": number;
-            "1": number;
-            "2": number;
-            "3": number;
-            "4": number;
-            "5": number;
-            "6": number;
-            "7": number;
-            "8": number;
-            "9": number;
-            "10": number;
-            "11": number;
-            "12": number;
-            "13": number;
-            "14": number;
-            "15": number;
-        };
-        transition: {
-            slow: number;
-            medium: number;
-            fast: number;
-        };
-    };
-    semantic: {
-        border: {
-            graphic: string;
-            differentiated: string;
-            functional: string;
-        };
-        branded: {
-            surface: string;
-            message: string;
-            heading: string;
-        };
-        neutral: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        success: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        warning: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        error: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        info: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        data: {
-            branded: {
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-            };
-            electric: {
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-            };
-            gas: {
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-            };
-        };
-        focus: {
-            outline: string;
-            hover: string;
-            surface: string;
-        };
-        inverted: {
-            surface: string;
-            surfaceAlt: string;
-            border: string;
-            borderAlt: string;
-            message: {
-                branded: string;
-                base: string;
-                secondary: string;
-                link: string;
-            };
-        };
-        message: {
-            base: string;
-            secondary: string;
-            link: string;
-            error: string;
-            branded: string;
-        };
-        surface: {
-            base: string;
-            cutout: string;
-            elevated: string;
-        };
-    };
-    component: {
-        badge: {
-            variants: {
-                neutral: {
-                    background: string;
-                    foreground: string;
-                };
-                red: {
-                    background: string;
-                    foreground: string;
-                };
-                orange: {
-                    background: string;
-                    foreground: string;
-                };
-                yellow: {
-                    background: string;
-                    foreground: string;
-                };
-                green: {
-                    background: string;
-                    foreground: string;
-                };
-                blue: {
-                    background: string;
-                    foreground: string;
-                };
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-        };
-        display0: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        display1: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        display2: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        display3: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading1: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        body: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        small: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        label: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-    };
-}, Breakpoints, never>;
-export declare const Dt: ({ children, ...rest }: PropsWithChildren<ViewProps>) => import("react/jsx-runtime").JSX.Element;
-export declare const Dd: ({ children, ...rest }: PropsWithChildren<ViewProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DescriptionList/styled.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { View } from 'react-native';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-export const Dl = styled.View(({ theme: { core }, smallAndUp }) => `
-  flex-direction: column;
-  flex: 1;
-  margin-top: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
-  margin-bottom: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
-`);
-const StyledDtText = styled.Text(({ theme: { core, semantic } }) => css `
-    font-family: ${core.fontFamily.bodyBold.native};
-    line-height: ${numToPx(core.lineHeight.body.small)};
-    font-size: ${numToPx(core.fontSize.body.small)};
-    color: ${semantic.message.base};
-    flex: 1;
-  `);
-const DtText = styledComponentWithBreakpoints(StyledDtText);
-const StyledDtItem = styled.View(({ theme: { core }, smallAndUp }) => css `
-    margin-top: ${numToPx(core.space[smallAndUp ? 4 : 3])};
-    flex-direction: row;
-  `);
-const DtItem = styledComponentWithBreakpoints(StyledDtItem);
-export const Dt = ({ children, ...rest }) => (_jsx(DtItem, { ...rest, children: _jsx(DtText, { children: children }) }));
-const StyledDdText = styled.Text(({ theme: { core, semantic } }) => css `
-    font-family: ${core.fontFamily.body.native};
-    line-height: ${numToPx(core.lineHeight.body.small)};
-    color: ${semantic.message.secondary};
-    font-size: ${numToPx(core.fontSize.body.small)};
-    flex: 1;
-  `);
-export const Dd = ({ children, ...rest }) => {
-    return (_jsx(View, { style: { flexDirection: 'row' }, ...rest, children: _jsx(StyledDdText, { children: children }) }));
-};

package/dist/components/Display0/Display0.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TextProps } from 'react-native';
-export declare const Display0: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
-    inverted?: boolean;
-}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Display0/Display0.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { pxToNumber, numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const calculateLetterSpacing = (fontSize, letterSpacing) => {
-    return numToPx(pxToNumber(fontSize) * letterSpacing);
-};
-const StyledDisplay0 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
-    const fontSize = component.display0.fontSize[smallAndUp ? 'large' : 'small'];
-    return css `
-      font-family: ${component.display0.fontFamily};
-      font-size: ${numToPx(fontSize)};
-      line-height: ${numToPx(component.display0.lineHeight[smallAndUp ? 'large' : 'small'])};
-      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
-      color: ${inverted
-        ? semantic.inverted.message.link
-        : semantic.message.branded};
-    `;
-});
-export const Display0 = ({ accessibilityRole = 'header', ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledDisplay0, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
-};

package/dist/components/Display0/index.d.ts

@@ -1 +0,0 @@
-export { Display0 } from './Display0';

package/dist/components/Display0/index.js

@@ -1 +0,0 @@
-export { Display0 } from './Display0';

package/dist/components/Display1/Display1.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TextProps } from 'react-native';
-export declare const Display1: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
-    inverted?: boolean;
-}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Display1/Display1.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { pxToNumber, numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const calculateLetterSpacing = (fontSize, letterSpacing) => {
-    return numToPx(pxToNumber(fontSize) * letterSpacing);
-};
-const StyledDisplay1 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
-    const fontSize = component.display1.fontSize[smallAndUp ? 'large' : 'small'];
-    return css `
-      font-family: ${component.display1.fontFamily};
-      font-size: ${numToPx(fontSize)};
-      line-height: ${numToPx(component.display1.lineHeight[smallAndUp ? 'large' : 'small'])};
-      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
-      color: ${inverted
-        ? semantic.inverted.message.link
-        : semantic.message.branded};
-    `;
-});
-export const Display1 = ({ accessibilityRole = 'header', ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledDisplay1, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
-};

package/dist/components/Display1/index.d.ts

@@ -1 +0,0 @@
-export { Display1 } from './Display1';

package/dist/components/Display1/index.js

@@ -1 +0,0 @@
-export { Display1 } from './Display1';

package/dist/components/Display2/Display2.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TextProps } from 'react-native';
-export declare const Display2: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
-    inverted?: boolean;
-}>) => import("react/jsx-runtime").JSX.Element;