@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

package/dist/components/ErrorText/ErrorText.d.ts

@@ -11,10 +11,10 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -30,53 +30,71 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"border" | "surface", string> & {
+            focus: Record<"outline" | "surface", string>;
+            inverted: Record<"surface" | "border", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             warning: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             error: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             info: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
+            };
+            electricity: {
+                border: string;
+                surface: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
+            };
+            gas: {
+                border: string;
+                surface: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
-            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -207,30 +225,6 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
-            badge: {
-                variants: {
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
         };
     }) | undefined;
 } & {

package/dist/components/ErrorText/ErrorText.js

@@ -29,15 +29,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorText = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
 var utils_1 = require("../../utils");
 var StyledErrorText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small, fontSize, semantic.error.message);
+    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])), field.error.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), fontSize, field.error.color);
 });
 var ErrorText = (0, utils_1.styledComponentWithBreakpoints)(StyledErrorText);
 exports.ErrorText = ErrorText;

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TextInput } from 'react-native';
 export declare type FieldProps = {
     label: string;
@@ -10,4 +10,4 @@ export declare type FieldProps = {
     affixWidth?: number;
     children: ReactNode;
 };
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<TextInput>>;
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<TextInput>>;

package/dist/components/Field/Field.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+});
+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)
@@ -23,8 +46,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Field = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var styled_native_1 = require("../../styled.native");
 var utils_1 = require("../../utils");
@@ -43,21 +65,30 @@ exports.Field = (0, react_1.forwardRef)(function (_a, ref) {
     var accessibilityLabel = [labelText, (0, utils_1.getText)(hint), (0, utils_1.getText)(error)]
         .filter(Boolean)
         .join(', ');
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({ error: hasError || undefined, testID: "nb-field-form-group" }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: function () {
-                        if (inputRef.current) {
-                            // @ts-ignore. Toggle picker if this is a select menu.
-                            if (inputRef.current.togglePicker) {
-                                // @ts-ignore
-                                inputRef.current.togglePicker();
-                            }
-                            else {
-                                // @ts-ignore
-                                inputRef.current.focus();
-                            }
+    return (react_1.default.createElement(FormGroup_1.FormGroup, { error: hasError || undefined, testID: "nb-field-form-group" },
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: function () {
+                    if (inputRef.current) {
+                        // @ts-ignore. Toggle picker if this is a select menu.
+                        if (inputRef.current.togglePicker) {
+                            // @ts-ignore
+                            inputRef.current.togglePicker();
+                        }
+                        else {
+                            // @ts-ignore
+                            inputRef.current.focus();
                         }
-                    } }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }) })), (0, jsx_runtime_1.jsx)(Stretch_1.Stretch, __assign({ defaultWidth: "".concat(Math.ceil(characters * 0.8 * parseInt(field.fontSize[0])) + affixWidth, "px"), fullWidth: fullWidth }, { children: react_1.Children.map(children, function (child) {
-                        return (0, react_1.isValidElement)(child)
-                            ? (0, react_1.cloneElement)(child, __assign({ invalid: hasError || undefined, ref: (0, utils_1.mergeRefs)(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
-                            : child;
-                    }) }))] })) })));
+                    }
+                } },
+                react_1.default.createElement(react_native_1.View, null,
+                    react_1.default.createElement(LabelText_1.LabelText, null,
+                        label,
+                        optional ? ' (optional)' : null),
+                    hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null)),
+            react_1.default.createElement(Stretch_1.Stretch, { defaultWidth: "".concat(Math.ceil(characters * 0.8 * parseInt(field.fontSize[0])) + affixWidth, "px"), fullWidth: fullWidth }, react_1.Children.map(children, function (child) {
+                return (0, react_1.isValidElement)(child)
+                    ? (0, react_1.cloneElement)(child, __assign({ invalid: hasError || undefined, ref: (0, utils_1.mergeRefs)(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
+                    : child;
+            })),
+            error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null)));
 });

package/dist/components/FormGroup/FormGroup.js

@@ -30,13 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGroup = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var FormGroupWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var FormGroup = function (_a) {
     var children = _a.children, error = _a.error, rest = __rest(_a, ["children", "error"]);
-    return ((0, jsx_runtime_1.jsx)(FormGroupWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1 } }, { children: children })) })));
+    return (react_1.default.createElement(FormGroupWrapper, __assign({}, rest),
+        react_1.default.createElement(react_native_1.View, { style: { flex: 1 } }, children)));
 };
 exports.FormGroup = FormGroup;
 var templateObject_1;

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

@@ -10,10 +10,10 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -29,53 +29,71 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"border" | "surface", string> & {
+            focus: Record<"outline" | "surface", string>;
+            inverted: Record<"surface" | "border", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             warning: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             error: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
             info: {
                 border: string;
                 surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
+            };
+            electricity: {
+                border: string;
+                surface: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
+            };
+            gas: {
+                border: string;
+                surface: string;
+                message: {
+                    base: string;
+                    secondary: string;
+                };
             };
-            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -206,30 +224,6 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
-            badge: {
-                variants: {
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
         };
     }) | undefined;
 } & {

package/dist/components/Grid/Col.js

@@ -32,9 +32,8 @@ var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var utils_2 = require("../../utils/utils");
 var StyledCol = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
-    var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
+    var grid = _a.theme.grid, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var halfGutter = grid.gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
     var smallScreen = !smallAndUp;
     var percentage = (span / 12) * 100;
     var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -52,7 +51,7 @@ var StyledCol = styled_native_1.default.View(function (_a) {
             ? mediumPercentage
             : smallAndUp
                 ? smallPercentage
-                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
+                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? grid.gutter[0] : grid.gutter[1]);
 });
 var Col = (0, utils_1.styledComponentWithBreakpoints)(StyledCol);
 exports.Col = Col;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 import { Breakpoints } from '../../hooks';
 declare const StyledRow: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
@@ -6,10 +6,10 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -25,53 +25,71 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -202,35 +220,11 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
 }, {
     isNested?: boolean | undefined;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
 } & Breakpoints, never>;
 declare const Row: ({ children, ...rest }: ComponentProps<typeof StyledRow>) => JSX.Element;
 export { Row };

package/dist/components/Grid/Row.js

@@ -48,26 +48,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var utils_2 = require("../../utils/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 (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
+    var grid = _a.theme.grid, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
+    var halfGutter = grid.gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
     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    "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], core.breakpoint.large, smallScreen ? gutter[0] : gutter[1], isNested
-        ? "\n      margin-left: -".concat(smallScreen ? gutter[0] : gutter[1], ";\n      margin-right: -").concat(smallScreen ? gutter[0] : gutter[1], ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", ";\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", ";\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], grid.maxWidth, smallScreen ? grid.gutter[0] : grid.gutter[1], isNested
+        ? "\n      margin-left: -".concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n      margin-right: -").concat(smallScreen ? grid.gutter[0] : grid.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 }) })));
+    return (react_1.default.createElement(WidthRow, __assign({}, rest),
+        react_1.default.createElement(RowInner, null, children)));
 };
 exports.Row = Row;
 var templateObject_1, templateObject_2;