@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Grid/Row.d.ts

@@ -1,573 +1,7 @@
-import { ComponentProps } from 'react';
-import { Breakpoints } from '../../hooks';
-declare const StyledRow: 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;
-            };
-        };
-    };
-}, {
-    isNested?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & Breakpoints, never>;
-declare const Row: ({ children, ...rest }: ComponentProps<typeof StyledRow>) => import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+type Props = PropsWithChildren<{
+    isNested?: boolean;
+}>;
+declare const Row: ({ children, ...rest }: Props & ViewProps) => import("react/jsx-runtime").JSX.Element;
 export { Row };

package/dist/components/Grid/Row.js

@@ -1,73 +1,35 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledRow = styled.View(({ theme: { core }, isNested, smallAndUp }) => {
+    const gutter = [core.space[4], core.space[8]];
+    const halfGutter = gutter.map(g => g / 2);
+    const smallScreen = !smallAndUp;
+    return css `
+      padding-left: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      padding-right: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      margin: 0 auto;
+      width: ${core.breakpoint.large}px;
+      max-width: 100%;
+      margin-bottom: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+
+      ${isNested
+        ? `
+      margin-left: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      margin-right: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      width: auto;
+      max-width: 200%; /* max width none not supported in RN */
+    `
+        : null}
+    `;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Row = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledRow = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
-    var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return g / 2; });
-    var smallScreen = !smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), (0, element_core_1.numToPx)(smallScreen ? halfGutter[0] : halfGutter[1]), (0, element_core_1.numToPx)(smallScreen ? halfGutter[0] : halfGutter[1]), core.breakpoint.large, (0, element_core_1.numToPx)(smallScreen ? gutter[0] : gutter[1]), isNested
-        ? "\n      margin-left: -".concat((0, element_core_1.numToPx)(smallScreen ? gutter[0] : gutter[1]), ";\n      margin-right: -").concat((0, element_core_1.numToPx)(smallScreen ? gutter[0] : gutter[1]), ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
-        : null);
-});
-var WidthRow = (0, utils_1.styledComponentWithBreakpoints)(StyledRow);
-var RowInner = styled_native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
-var Row = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(WidthRow, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(RowInner, { children: children }) })));
-};
-exports.Row = Row;
-var templateObject_1, templateObject_2;
+const WidthRow = styledComponentWithBreakpoints(StyledRow);
+const RowInner = styled.View `
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+const Row = ({ children, ...rest }) => (_jsx(WidthRow, { ...rest, children: _jsx(RowInner, { children: children }) }));
+export { Row };

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

@@ -1,2 +1,2 @@
-export { Row } from './Row';
 export { Col } from './Col';
+export { Row } from './Row';

package/dist/components/Grid/index.js

@@ -1,7 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Col = exports.Row = void 0;
-var Row_1 = require("./Row");
-Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Row_1.Row; } });
-var Col_1 = require("./Col");
-Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return Col_1.Col; } });
+export { Col } from './Col';
+export { Row } from './Row';