@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/components/SkeletonLoading/SkeletonAnimation.js

@@ -1,30 +1,19 @@
 "use strict";
-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 __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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonAnimation = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = 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;
@@ -43,15 +32,15 @@ var SkeletonAnimation = function (_a) {
         animationRef.current.setValue(0);
         react_native_1.Animated.loop(animationLoop.current).start();
     }, []);
-    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))));
+    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 })) })));
 };
 exports.SkeletonAnimation = SkeletonAnimation;

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -26,18 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCTA = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 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 _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 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 SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
-        react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest))));
+    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Skeleton_1 = require("./Skeleton");
@@ -36,13 +36,11 @@ 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 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 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 SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["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 }))));
+    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 }) })) }));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -26,18 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeading = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 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 colors = _a.theme.colors, size = _a.size;
-    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
+    var core = _a.theme.core, size = _a.size;
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\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 (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
-        react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
+    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" })) }));
 };
 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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 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 _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 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 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(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
+        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, breakpoints: breakpoints }, "line-".concat(i)));
     }
-    return (react_1.default.createElement(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest), generatedLines));
+    return ((0, jsx_runtime_1.jsx)(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/Stack/Stack.js

@@ -10,29 +10,6 @@ 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)
@@ -49,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
-var react_1 = __importStar(require("react"));
+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");
@@ -61,13 +39,13 @@ var Stack = function (_a) {
             filteredChildren.push(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));
-    })));
+    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 })));
+        }) })));
 };
 exports.Stack = Stack;
 var StyledStackItem = styled_native_1.default.View(function (_a) {
-    var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var space = _a.theme.core.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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 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 react_1.default.createElement(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+    return (0, jsx_runtime_1.jsx)(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 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -30,71 +30,53 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 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<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: 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;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -225,6 +207,30 @@ 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,12 +29,13 @@ 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 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 _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 SubLabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledSubLabelText);
 exports.SubLabelText = SubLabelText;

package/dist/components/SummaryList/SummaryList.js

@@ -10,29 +10,6 @@ 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)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SummaryItem = exports.SummaryList = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var List_1 = require("../List");
 /**
  * @deprecated This component has been deprecated and will be removed in a future release.
@@ -55,17 +33,15 @@ var List_1 = require("../List");
 var SummaryList = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
-    return (react_1.default.createElement(List_1.Dl, __assign({}, rest), react_1.Children.map(children, function (child, index) {
-        return (0, react_1.cloneElement)(child, {
-            index: index,
-        });
-    })));
+    return ((0, jsx_runtime_1.jsx)(List_1.Dl, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
+            return (0, react_1.cloneElement)(child, {
+                index: index,
+            });
+        }) })));
 };
 exports.SummaryList = SummaryList;
 var SummaryItem = function (_a) {
     var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(List_1.Dt, { style: index === 0 ? { marginTop: 0 } : undefined }, label),
-        react_1.default.createElement(List_1.Dd, __assign({}, rest), children)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.Dt, __assign({ style: index === 0 ? { marginTop: 0 } : undefined }, { children: label })), (0, jsx_runtime_1.jsx)(List_1.Dd, __assign({}, rest, { children: children }))] }));
 };
 exports.SummaryItem = SummaryItem;

package/dist/components/Tabs/Tab.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+/// <reference types="react" />
 import { TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { FullWidthOptions } from '../../hooks';
-export declare const Tab: React.ForwardRefExoticComponent<{
+export declare const Tab: import("react").ForwardRefExoticComponent<{
     active?: boolean | undefined;
     fullWidth?: FullWidthOptions | undefined;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
     testID?: string | undefined;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<TouchableOpacity>>;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/Tabs/Tab.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -44,31 +48,30 @@ 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.Tab = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var hooks_1 = require("../../hooks");
-var styled_native_1 = __importDefault(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledText = styled_native_1.default.Text(function (_a) {
-    var tabs = _a.theme.tabs, smallAndUp = _a.smallAndUp, active = _a.active;
-    return "\n  font-size: ".concat(tabs.tab.fontSize[smallAndUp ? 1 : 0], ";\n  font-family: ").concat(tabs.tab.fontFamily, ";\n  background-color: ").concat(active ? tabs.tab.active.backgroundColor : tabs.tab.inactive.backgroundColor, ";\n  line-height: ").concat("".concat(tabs.tab.lineHeight * (0, utils_1.pxToNumber)(tabs.tab.fontSize[0]), "px"), ";\n  color: ").concat(active ? tabs.tab.active.foregroundColor : tabs.tab.inactive.foregroundColor, ";\n  text-align: center;\n  padding: ").concat("".concat(tabs.tab.paddingVertical[smallAndUp ? 1 : 0], " ").concat(tabs.tab.paddingHorizontal[smallAndUp ? 1 : 0]), ";\n");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var TabText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
 });
-var StyledTouchableOpacity = styled_native_1.default.TouchableOpacity(function (_a) {
-    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, card = _f.card, tabs = _f.tabs, inline = _a.inline;
-    return "flex-grow: ".concat(stretch ? 1 : 0, ";\n  border: ").concat(card.borderWidth, " solid ").concat(tabs.tab.borderColor, ";\n  border-bottom-color: ").concat(active ? tabs.tab.active.backgroundColor : card.borderColor, ";\n  border-top-color: ").concat(inline ? card.borderColor : tabs.tab.borderColor, ";\n  border-right-color: ").concat(last && inline ? card.borderColor : tabs.tab.borderColor, "};\n  border-left-color: ").concat(first && inline ? card.borderColor : tabs.tab.borderColor, "};\n  border-right-width: ").concat(card.borderWidth, ";\n  border-left-width: ").concat(first ? card.borderWidth : 0, ";\n  background-color: ").concat(active ? tabs.tab.active.borderColor : tabs.tab.inactive.backgroundColor, ";\n  padding-bottom: ").concat(tabs.tab.borderBottomWidth, ";\n");
+var TabTouchable = styled_native_1.default.TouchableOpacity(function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
+        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
+        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+        ? ''
+        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        ? ''
+        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
 });
-exports.Tab = (0, react_1.forwardRef)(function (
-// eslint-disable-next-line
-_a, ref) {
-    var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, 
-    // eslint-disable-next-line
-    ["active", "fullWidth", "children"]);
+exports.Tab = (0, react_1.forwardRef)(function (_a, ref) {
+    var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
     var stretch = (0, hooks_1.useFullWidth)(fullWidth);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledTouchableOpacity, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: stretch, ref: ref }, rest),
-        react_1.default.createElement(StyledText, __assign({ active: active }, breakpoints), children)));
+    return ((0, jsx_runtime_1.jsx)(TabTouchable, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: stretch, ref: ref }, rest, { children: (0, jsx_runtime_1.jsx)(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;