@ovotech/element-native 3.2.3 → 3.3.0-canary-8dfcb66-130

package/dist/components/Badge/Badge.d.ts

@@ -2,13 +2,13 @@ import { Theme, BadgeColors } from '@ovotech/element-core';
 import { ComponentProps } from 'react';
 export declare type SemanticVariants = Exclude<keyof Theme['semantic'], 'surface' | 'message' | 'border' | 'focus' | 'inverted' | 'data'>;
 export declare type BadgeVariantName = BadgeColors | SemanticVariants;
-declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         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 | 3 | 4 | 10 | 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", {
@@ -22,16 +22,16 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         }> & {
             brand: Record<string, string>;
         };
-        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
             native: string;
             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;
         }>;
@@ -39,10 +39,10 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
@@ -73,7 +73,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             message: string;
             messageOnEmphasis: string;
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -229,7 +229,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             };
         };
     };
-} & object, {
+}, {
     customVariant?: {
         backgroundColor: string;
         foregroundColor: string;

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

@@ -1,10 +1,10 @@
-export declare const Card: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+export declare const Card: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         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 | 3 | 4 | 10 | 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", {
@@ -18,16 +18,16 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
         }> & {
             brand: Record<string, string>;
         };
-        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
             native: string;
             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;
         }>;
@@ -35,10 +35,10 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
@@ -69,7 +69,7 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
             message: string;
             messageOnEmphasis: string;
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -225,6 +225,6 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
             };
         };
     };
-} & object, {
+}, {
     inline?: boolean | undefined;
 }, never>;

package/dist/components/Checkbox/Checkbox.js

@@ -34,7 +34,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
 var HintText_1 = require("../HintText");
@@ -42,10 +41,10 @@ var Icon_1 = require("../Icon/Icon");
 var LabelText_1 = require("../LabelText");
 var Stack_1 = require("../Stack");
 var StyledCheckboxInputWrapper = styled_native_1.default.View(function (_a) {
-    var checkbox = _a.theme.checkbox;
-    var checkboxSize = (0, utils_1.pxToNumber)(checkbox.size);
-    var gap = (0, utils_1.pxToNumber)(checkbox.gap);
-    return "\n      width: ".concat(checkboxSize + gap, "px;\n      height: ").concat(checkbox.touchSize, ";\n    ");
+    var core = _a.theme.core;
+    var checkboxSize = core.space[6];
+    var gap = core.space[2];
+    return "\n      width: ".concat(parseInt(checkboxSize) + parseInt(gap), "px;\n      height: ").concat(core.space[11], ";\n    ");
 });
 var StyledCheckboxInput = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;