@ovotech/element-native 4.0.0 → 4.0.1-canary-5d78799-250

package/dist/components/ActionCard/ActionCard.js

@@ -48,7 +48,7 @@ var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
 });
 var ActionCard = function (_a) {
-    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? true : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
+    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _e.core, semantic = _e.semantic;
     (0, react_1.useEffect)(function () {
         if (onMount) {
@@ -65,7 +65,7 @@ var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading"), children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small", children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
+                                        }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small", inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

package/dist/components/Card/Card.d.ts

@@ -1,489 +1,7 @@
-import { Breakpoints } from '../../hooks';
-export declare const Card: 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: {
-            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: {
-            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;
-            };
-        };
-        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 & {
-    inline?: boolean | undefined;
-    inverted?: boolean | undefined;
-}, never>;
+import { ViewProps } from 'react-native';
+type CardProps = ViewProps & {
+    inline?: boolean;
+    inverted?: boolean;
+};
+export declare const Card: ({ children, inline, inverted, ...rest }: CardProps) => JSX.Element;
+export {};

package/dist/components/Card/Card.js

@@ -1,14 +1,44 @@
 "use strict";
+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 __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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var element_core_1 = require("@ovotech/element-core");
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.Card = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, smallAndUp = _a.smallAndUp;
+var CardWrapper = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.smallAndUp, smallAndUp = _e === void 0 ? false : _e;
     return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline
         ? (0, element_core_1.numToPx)(core.space[smallAndUp ? 6 : 4])
         : (0, element_core_1.numToPx)(core.space[smallAndUp ? 9 : 6]), ";\n      border-radius: ").concat(inline ? (0, element_core_1.numToPx)(core.radius.max) : 0, ";\n    ");
 });
+var Card = function (_a) {
+    var children = _a.children, inline = _a.inline, inverted = _a.inverted, rest = __rest(_a, ["children", "inline", "inverted"]);
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    return ((0, jsx_runtime_1.jsx)(CardWrapper, __assign({ inline: inline, inverted: inverted, smallAndUp: smallAndUp }, rest, { children: children })));
+};
+exports.Card = Card;

package/dist/esm/components/ActionCard/ActionCard.js

@@ -19,7 +19,7 @@ var StyledP = styled(P)(function (_a) {
     return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
 });
 export var ActionCard = function (_a) {
-    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? true : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
+    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = useContext(ThemeContext), core = _e.core, semantic = _e.semantic;
     useEffect(function () {
         if (onMount) {
@@ -36,7 +36,7 @@ export var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small", children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                                        }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small", inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

package/dist/esm/components/Card/Card.js

@@ -1,8 +1,37 @@
+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 __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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
-export var Card = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, smallAndUp = _a.smallAndUp;
+var CardWrapper = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.smallAndUp, smallAndUp = _e === void 0 ? false : _e;
     return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline
         ? numToPx(core.space[smallAndUp ? 6 : 4])
         : numToPx(core.space[smallAndUp ? 9 : 6]), ";\n      border-radius: ").concat(inline ? numToPx(core.radius.max) : 0, ";\n    ");
 });
+export var Card = function (_a) {
+    var children = _a.children, inline = _a.inline, inverted = _a.inverted, rest = __rest(_a, ["children", "inline", "inverted"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsx(CardWrapper, __assign({ inline: inline, inverted: inverted, smallAndUp: smallAndUp }, rest, { children: children })));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.0",
+  "version": "4.0.1-canary-5d78799-250",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "3.0.1-canary-5d78799-250",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.0.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",