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

package/dist/components/Text/Text.d.ts

@@ -5,13 +5,13 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: (import("../../theme/theme").Theme & {
+    theme?: {
         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", {
@@ -25,16 +25,16 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
             }> & {
                 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;
             }>;
@@ -42,10 +42,10 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
         };
         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: {
@@ -76,7 +76,7 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 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: {
@@ -232,7 +232,7 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    } & object) | undefined;
+    } | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -242,13 +242,13 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: (import("../../theme/theme").Theme & {
+    theme?: {
         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", {
@@ -262,16 +262,16 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
             }> & {
                 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;
             }>;
@@ -279,10 +279,10 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
         };
         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: {
@@ -313,7 +313,7 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                 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: {
@@ -469,18 +469,18 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                 };
             };
         };
-    } & object) | undefined;
+    } | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 }, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
-export declare const Strong: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
+export declare const Strong: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     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", {
@@ -494,16 +494,16 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
         }> & {
             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;
         }>;
@@ -511,10 +511,10 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
     };
     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: {
@@ -545,7 +545,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             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: {
@@ -701,14 +701,14 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             };
         };
     };
-} & object, {}, never>;
-export declare const Em: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
+}, {}, never>;
+export declare const Em: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     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", {
@@ -722,16 +722,16 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
         }> & {
             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;
         }>;
@@ -739,10 +739,10 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
     };
     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: {
@@ -773,7 +773,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             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: {
@@ -929,14 +929,14 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             };
         };
     };
-} & object, {}, never>;
-export declare const LineThrough: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
+}, {}, never>;
+export declare const LineThrough: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     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", {
@@ -950,16 +950,16 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
         }> & {
             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;
         }>;
@@ -967,10 +967,10 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
     };
     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: {
@@ -1001,7 +1001,7 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             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: {
@@ -1157,5 +1157,5 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             };
         };
     };
-} & object, {}, never>;
+}, {}, never>;
 export declare const TextGroup: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;

package/dist/components/TextLink/TextLink.js

@@ -60,13 +60,16 @@ var StyledText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
 });
+var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), semantic.message.branded);
+});
 var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
-    var textLink = (0, react_1.useContext)(styled_native_1.ThemeContext).textLink;
     var updatedAccessibilityLabel = opensInNewWindow
         ? "".concat(accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children), " (opens in new window)")
         : accessibilityLabel;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: textLink.color, size: 12, name: "new-window" })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 });
 exports.TextLink = TextLink;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/components/index.d.ts

@@ -20,7 +20,6 @@ export * from './List';
 export * from './Margin';
 export * from './Notification';
 export * from './Radio';
-export * from './SummaryList';
 export * from './Stack';
 export * from './Tabs';
 export * from './Text';

package/dist/components/index.js

@@ -36,7 +36,6 @@ __exportStar(require("./List"), exports);
 __exportStar(require("./Margin"), exports);
 __exportStar(require("./Notification"), exports);
 __exportStar(require("./Radio"), exports);
-__exportStar(require("./SummaryList"), exports);
 __exportStar(require("./Stack"), exports);
 __exportStar(require("./Tabs"), exports);
 __exportStar(require("./Text"), exports);

package/dist/esm/components/Accordion/styles.js

@@ -21,7 +21,7 @@ export var StyledAccordion = styled(Animated.View)(function (_a) {
 });
 export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "], ["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "])), core.space[5], core.space[3]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), core.space[5], core.space[3]);
 });
 export var StyledContainer = styled.View(function (_a) {
     var core = _a.theme.core;

package/dist/esm/components/ActionList/ActionList.js

@@ -40,13 +40,14 @@ var ActionList = function (_a) {
                 fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
-                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted,
+                inList: true,
             });
         }) })));
 };
 var ActionWrapper = function (_a) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth }, { children: children })) })) })));
+    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })) })) })));
 };
 var Action = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "onPress", "testID"]);
@@ -59,6 +60,6 @@ var Action = function (_a) {
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
 };
 export { ActionList, Action };

package/dist/esm/components/ActionList/styled.js

@@ -15,11 +15,13 @@ export var StyledActionInner = styled.View(function (_a) {
     return "\n  display: flex;\n  flex-direction: row;\n  justify-content: ".concat(fullWidth === 'always' ? 'space-between' : 'flex-start', ";\n  align-items: center;\n  min-height: 44px;\n");
 });
 export var StyledActionText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
+        ? semantic.inverted.message.base
+        : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small, inList ? 1 : 'none');
 });
 export var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;

package/dist/esm/components/Checkbox/Checkbox.js

@@ -28,7 +28,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
 import styled from '../../styled.native';
-import { pxToNumber } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
@@ -36,10 +35,10 @@ import { Icon } from '../Icon/Icon';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 var StyledCheckboxInputWrapper = styled.View(function (_a) {
-    var checkbox = _a.theme.checkbox;
-    var checkboxSize = pxToNumber(checkbox.size);
-    var gap = 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.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;

package/dist/esm/components/Field/Field.js

@@ -21,9 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, createRef, useContext, forwardRef, } from 'react';
+import { Children, cloneElement, isValidElement, createRef, forwardRef, } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { ThemeContext } from '../../styled.native';
 import { getText, mergeRefs } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
@@ -33,7 +32,6 @@ import { Stack } from '../Stack';
 import { Stretch } from '../Stretch';
 export var Field = forwardRef(function (_a, ref) {
     var children = _a.children, label = _a.label, _b = _a.optional, optional = _b === void 0 ? false : _b, hint = _a.hint, error = _a.error, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'small' : _c, _d = _a.characters, characters = _d === void 0 ? 25 : _d, _e = _a.affixWidth, affixWidth = _e === void 0 ? 0 : _e, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth"]);
-    var field = useContext(ThemeContext).field;
     var hasError = !!error;
     var inputRef = createRef();
     var labelText = optional ? "".concat(label, " (optional)") : label;
@@ -52,7 +50,7 @@ export var Field = forwardRef(function (_a, ref) {
                                 inputRef.current.focus();
                             }
                         }
-                    } }, { children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) })), _jsx(Stretch, __assign({ defaultWidth: "".concat(Math.ceil(characters * 0.8 * parseInt(field.fontSize[0])) + affixWidth, "px"), fullWidth: fullWidth }, { children: Children.map(children, function (child) {
+                    } }, { children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) })), _jsx(Stretch, __assign({ defaultWidth: "".concat(Math.ceil(characters * 0.8 * 16) + affixWidth, "px"), fullWidth: fullWidth }, { children: Children.map(children, function (child) {
                         return isValidElement(child)
                             ? cloneElement(child, __assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
                             : child;

package/dist/esm/components/List/List.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
 import { View } from 'react-native';
-import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
 import { Stack } from '../Stack';
@@ -83,54 +82,5 @@ var StyledLi = styled.Text(function (_a) {
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
 });
 var Li = styledComponentWithBreakpoints(StyledLi);
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dl = ListWrapper;
-var StyledDtText = styled.Text(function (_a) {
-    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
-    var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, lineHeight, list.descriptionTerm.color, fontSize);
-});
-var DtText = styledComponentWithBreakpoints(StyledDtText);
-var StyledDtItem = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    var marginTop = smallAndUp ? core.space[4] : core.space[3];
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, core.space[1]);
-});
-var DtItem = styledComponentWithBreakpoints(StyledDtItem);
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dt = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(DtItem, __assign({}, rest, { children: _jsx(DtText, { children: children }) })));
-};
-var StyledDdText = styled.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
-    var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.color, fontSize);
-});
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dd = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    var breakpoints = useBreakpoint();
-    return (_jsx(View, __assign({ style: { flexDirection: 'row' } }, rest, { children: _jsx(StyledDdText, __assign({}, breakpoints, { children: children })) })));
-};
-export { Ul, Ol, Li, Dl, Dt, Dd, ListWrapper };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+export { Ul, Ol, Li, ListWrapper };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/List/index.js

@@ -1 +1 @@
-export { Ol, Ul, Li, Dl, Dt, Dd } from './List';
+export { Ol, Ul, Li } from './List';

package/dist/esm/components/TextLink/TextLink.js

@@ -25,22 +25,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { Text } from 'react-native';
-import styled, { css, ThemeContext } from '../../styled.native';
+import styled, { css } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Icon } from '../Icon';
 var StyledText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
 });
+var StyledIcon = styled(Icon)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), semantic.message.branded);
+});
 var TextLink = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
-    var textLink = useContext(ThemeContext).textLink;
     var updatedAccessibilityLabel = opensInNewWindow
         ? "".concat(accessibilityLabel ? accessibilityLabel : getText(children), " (opens in new window)")
         : accessibilityLabel;
-    return (_jsxs(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Icon, { color: textLink.color, size: 12, name: "new-window" })] }))] })));
+    return (_jsxs(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 });
 export { TextLink };
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/esm/components/index.js

@@ -20,7 +20,6 @@ export * from './List';
 export * from './Margin';
 export * from './Notification';
 export * from './Radio';
-export * from './SummaryList';
 export * from './Stack';
 export * from './Tabs';
 export * from './Text';

package/dist/esm/index.js

@@ -1,3 +1,2 @@
 export * from './components';
-export * from './theme';
 export * from './utils';