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

package/dist/components/Radio/RadioField.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.RadioField = 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 utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
@@ -35,14 +57,22 @@ var Stack_1 = require("../Stack");
 var RadioField = function (_a) {
     var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     var hasError = !!error;
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { 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)(react_native_1.View, __assign({ accessibilityRole: "radiogroup" }, { children: react_1.Children.map(children, function (child) {
-                        return (0, react_1.cloneElement)(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                            checked: child.props.checked != null
-                                ? child.props.checked
-                                : value && (value === child.props.value ? true : false),
-                            onPress: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
-                        });
-                    }) }))] })) })));
+    return (react_1.default.createElement(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }),
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            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,
+                error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null),
+            react_1.default.createElement(react_native_1.View, { accessibilityRole: "radiogroup" }, react_1.Children.map(children, function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                    checked: child.props.checked != null
+                        ? child.props.checked
+                        : value && (value === child.props.value ? true : false),
+                    onPress: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                });
+            })))));
 };
 exports.RadioField = RadioField;

package/dist/components/SkeletonLoading/Skeleton.d.ts

@@ -4,10 +4,10 @@ export declare const Skeleton: import("styled-components").StyledComponent<typeo
         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;
@@ -23,53 +23,71 @@ export declare const Skeleton: import("styled-components").StyledComponent<typeo
             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: {
@@ -200,29 +218,5 @@ export declare const Skeleton: import("styled-components").StyledComponent<typeo
                 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;
-                };
-            };
-        };
     };
 }, {}, never>;

package/dist/components/SkeletonLoading/SkeletonAnimation.js

@@ -1,19 +1,30 @@
 "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 __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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonAnimation = 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 SkeletonAnimation = function (_a) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
@@ -32,15 +43,15 @@ var SkeletonAnimation = function (_a) {
         animationRef.current.setValue(0);
         react_native_1.Animated.loop(animationLoop.current).start();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, { children: animation === 'pulse' ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, __assign({ style: [
-                {
-                    height: '100%',
-                    width: '100%',
-                    opacity: animationRef.current.interpolate({
-                        inputRange: [0.25, 1, 2],
-                        outputRange: [1, 0.25, 1],
-                    }),
-                },
-            ] }, { children: children }))) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: children })) })));
+    return (react_1.default.createElement(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (react_1.default.createElement(react_native_1.View, null, children))));
 };
 exports.SkeletonAnimation = SkeletonAnimation;

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -26,17 +26,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCTA = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
 var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
+    var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)) }));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest))));
 };
 exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCircle = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Skeleton_1 = require("./Skeleton");
@@ -36,11 +36,13 @@ var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skelet
     return "width: ".concat(size, "; max-width: 100%;");
 });
 var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
 });
 var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircleWrapper, __assign({ size: size }, rest, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircle, { size: size }) })) }));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            react_1.default.createElement(StyledSkeletonCircle, { size: size }))));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -26,17 +26,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeading = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Heading_1 = require("../Heading");
 var Skeleton_1 = require("./Skeleton");
 var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
@@ -34,16 +34,16 @@ var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
 var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
-    var core = _a.theme.core, short = _a.short, breakpoints = _a.breakpoints;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', core.fontSize.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+    var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
     var generatedLines = [];
     for (var i = 1; i <= lines; i++) {
-        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, breakpoints: breakpoints }, "line-".concat(i)));
+        generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return ((0, jsx_runtime_1.jsx)(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
+    return (react_1.default.createElement(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest), generatedLines));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/Stack/Stack.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)
@@ -26,8 +49,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = 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 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
@@ -39,13 +61,13 @@ var Stack = function (_a) {
             filteredChildren.push(child);
         }
     });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({}, rest, { children: react_1.Children.map(filteredChildren, function (child, index) {
-            return index === 0 ? (child) : ((0, jsx_runtime_1.jsx)(StackItem, __assign({ spaceBetween: spaceBetween }, { children: child })));
-        }) })));
+    return (react_1.default.createElement(react_native_1.View, __assign({}, rest), react_1.Children.map(filteredChildren, function (child, index) {
+        return index === 0 ? (child) : (react_1.default.createElement(StackItem, { spaceBetween: spaceBetween }, child));
+    })));
 };
 exports.Stack = Stack;
 var StyledStackItem = styled_native_1.default.View(function (_a) {
-    var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
     var formatter = function (spaceKey) { return space[spaceKey]; };
     var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);

package/dist/components/Stretch/Stretch.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stretch = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var StyledStretch = styled_native_1.default.View(function (_a) {
@@ -26,6 +26,6 @@ var StyledStretch = styled_native_1.default.View(function (_a) {
 });
 var Stretch = function (props) {
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return (0, jsx_runtime_1.jsx)(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+    return react_1.default.createElement(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
 };
 exports.Stretch = Stretch;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -11,10 +11,10 @@ declare const SubLabelText: 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 SubLabelText: 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 SubLabelText: 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/SubLabelText/SubLabelText.js

@@ -29,13 +29,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubLabelText = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
 var utils_1 = require("../../utils");
 var StyledSubLabelText = 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      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, core.lineHeight.body.small, semantic.message.secondary, fontSize);
+    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      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.subLabel.color, fontSize);
 });
 var SubLabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledSubLabelText);
 exports.SubLabelText = SubLabelText;