@ovotech/element-native 1.0.0 → 2.0.0-beta.0

package/dist/esm/components/Disclosure/Disclosure.js

@@ -36,20 +36,11 @@ var DisclosureButtonIcon = styled(Icon)(function (_a) {
 });
 var DisclosureButtonText = styled.Text(function (_a) {
     var _b = _a.theme, text = _b.text, textLink = _b.textLink, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), text.fontFamily, text.p.fontSize[smallAndUp ? 1 : 0], text.lineHeight *
-        pxToNumber(text.p.fontSize[smallAndUp ? 1 : 0]), textLink.fontWeight, textLink.color, textLink.color);
-});
-var LineIndent = styled.View(function (_a) {
-    var _b = _a.theme, disclosure = _b.disclosure, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
-    var lineOffset = function (fontSize) {
-        return "".concat(pxToNumber(fontSize) / 2 -
-            pxToNumber(disclosure.lineIndent.width) / 2, "px");
-    };
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      border-radius: ", ";\n      left: ", ";\n      background-color: ", ";\n      position: absolute;\n      top: 0;\n      bottom: 0;\n    "], ["\n      width: ", ";\n      border-radius: ", ";\n      left: ", ";\n      background-color: ", ";\n      position: absolute;\n      top: 0;\n      bottom: 0;\n    "])), disclosure.lineIndent.width, disclosure.lineIndent.borderRadius, lineOffset(responsiveFontSizes.body[smallAndUp ? 1 : 0]), disclosure.lineIndent.backgroundColor);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), text.fontFamily, text.p.fontSize[smallAndUp ? 1 : 0], text.p.lineHeight[smallAndUp ? 1 : 0], textLink.fontWeight, textLink.color, textLink.color);
 });
 var DisclosurePanel = styled.View(function (_a) {
     var _b = _a.theme, disclosure = _b.disclosure, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "], ["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "])), disclosure.panelGap[smallAndUp ? 1 : 0], pxToNumber(responsiveFontSizes.body[smallAndUp ? 1 : 0]) +
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "], ["\n    margin-top: ", ";\n    padding-left: ", "px;\n  "])), disclosure.panelGap[smallAndUp ? 1 : 0], pxToNumber(responsiveFontSizes.body[smallAndUp ? 1 : 0]) +
         pxToNumber(disclosure.iconGap[smallAndUp ? 1 : 0]));
 });
 export var Disclosure = forwardRef(function (_a, ref) {
@@ -64,8 +55,6 @@ export var Disclosure = forwardRef(function (_a, ref) {
             }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest),
             React.createElement(DisclosureButtonIcon, __assign({ name: "caret-down" }, breakpoints, { size: 14, expanded: isExpanded, color: textLink.color })),
             React.createElement(DisclosureButtonText, __assign({}, breakpoints), title)),
-        isExpanded && (React.createElement(DisclosurePanel, __assign({}, breakpoints),
-            React.createElement(LineIndent, __assign({}, breakpoints)),
-            children))));
+        isExpanded && (React.createElement(DisclosurePanel, __assign({}, breakpoints), children))));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/esm/components/ErrorText/ErrorText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledErrorText = styled.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), fontSize, field.error.fontWeight, field.error.color);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "])), field.error.fontFamily, calculateLineHeight(fontSize, field.lineHeight), fontSize, field.error.fontWeight, field.error.color);
 });
 var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
 export { ErrorText };

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

@@ -58,11 +58,11 @@ export var Field = forwardRef(function (_a, ref) {
                     React.createElement(LabelText, null,
                         label,
                         optional ? ' (optional)' : null),
-                    hint ? React.createElement(HintText, null, hint) : null,
-                    error ? React.createElement(ErrorText, null, error) : null)),
+                    hint ? React.createElement(HintText, null, hint) : null)),
             React.createElement(Stretch, { defaultWidth: "".concat(Math.ceil(characters * 0.8 * parseInt(field.fontSize[0])) + affixWidth, "px"), fullWidth: fullWidth }, Children.map(children, function (child) {
                 return isValidElement(child)
                     ? cloneElement(child, __assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
                     : child;
-            })))));
+            })),
+            error ? React.createElement(ErrorText, null, error) : null)));
 });

package/dist/esm/components/FormGroup/FormGroup.js

@@ -26,17 +26,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { View } from 'react-native';
-import styled, { css } from '../../styled.native';
-var Line = styled.View(function (_a) {
-    var field = _a.theme.field;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n    background-color: ", ";\n    border-radius: ", ";\n    margin-right: ", ";\n  "], ["\n    width: ", ";\n    height: 100%;\n    background-color: ", ";\n    border-radius: ", ";\n    margin-right: ", ";\n  "])), field.errorIndent.borderWidth, field.error.color, field.errorIndent.borderRadius, field.gap);
-});
-var FormGroupWrapper = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+import styled from '../../styled.native';
+var FormGroupWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var FormGroup = function (_a) {
     var children = _a.children, error = _a.error, rest = __rest(_a, ["children", "error"]);
     return (React.createElement(FormGroupWrapper, __assign({}, rest),
-        error ? React.createElement(Line, null) : null,
         React.createElement(View, { style: { flex: 1 } }, children)));
 };
 export { FormGroup };
-var templateObject_1, templateObject_2;
+var templateObject_1;

package/dist/esm/components/Heading/Heading.js

@@ -27,13 +27,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
 var StyledHeading1 = styled.Text(function (_a) {
     var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? heading.heading1.fontSize[1]
-        : heading.heading1.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading1.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading1.fontWeight || heading.fontWeight, heading.color, heading.heading1.fontSize[smallAndUp ? 1 : 0], heading.heading1.lineHeight[smallAndUp ? 1 : 0], smallAndUp
         ? heading.heading1.marginTop[1]
         : heading.heading1.marginTop[0], smallAndUp
         ? heading.heading1.marginBottom[1]
@@ -46,10 +42,7 @@ export var Heading1 = function (_a) {
 };
 var StyledHeading2 = styled.Text(function (_a) {
     var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? heading.heading2.fontSize[1]
-        : heading.heading2.fontSize[0];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading2.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading2.fontSize[smallAndUp ? 1 : 0], heading.heading2.lineHeight[smallAndUp ? 1 : 0], heading.heading2.fontWeight || heading.fontWeight, heading.color, smallAndUp
         ? heading.heading2.marginTop[1]
         : heading.heading2.marginTop[0], smallAndUp
         ? heading.heading2.marginBottom[1]
@@ -62,10 +55,7 @@ export var Heading2 = function (_a) {
 };
 var StyledHeading3 = styled.Text(function (_a) {
     var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? heading.heading3.fontSize[1]
-        : heading.heading3.fontSize[0];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading3.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.heading3.fontWeight || heading.fontWeight, heading.color, smallAndUp
         ? heading.heading3.marginTop[1]
         : heading.heading3.marginTop[0], smallAndUp
         ? heading.heading3.marginBottom[1]
@@ -78,10 +68,7 @@ export var Heading3 = function (_a) {
 };
 var StyledHeading4 = styled.Text(function (_a) {
     var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? heading.heading4.fontSize[1]
-        : heading.heading4.fontSize[0];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading4.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.heading4.fontWeight || heading.fontWeight, heading.color, smallAndUp
         ? heading.heading4.marginTop[1]
         : heading.heading4.marginTop[0], smallAndUp
         ? heading.heading4.marginBottom[1]

package/dist/esm/components/HintText/HintText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledHintText = styled.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.hint.fontWeight, field.hint.color, fontSize);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), field.fontFamily, field.hint.fontWeight, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
 });
 var HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

package/dist/esm/components/Icon/Icon.js

@@ -29,7 +29,7 @@ export var Icon = function (_a) {
     var colors = useContext(ThemeContext).colors;
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
-    return Svg ? (React.createElement(Svg, __assign({ testID: testID ? testID : "nebula-icon".concat(name ? "-".concat(name) : ''), 
+    return Svg ? (React.createElement(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
         // @ts-ignore this is valid.
         color: color !== null && color !== void 0 ? color : colors.body, width: size, height: size }, rest))) : null;
 };

package/dist/esm/components/LabelText/LabelText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabelText = styled.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.fontWeight, field.label.color, fontSize);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.fontWeight, field.label.color, fontSize);
 });
 var LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };

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

@@ -31,18 +31,23 @@ import styled, { css, ThemeContext } from '../../styled.native';
 import { calculateLineHeight } from '../../theme';
 import { styledComponentWithBreakpoints } from '../../utils';
 import { Stack } from '../Stack';
+var UlBullet = styled.View(function (_a) {
+    var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-right: ", ";\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n  "], ["\n    margin-right: ", ";\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n  "])), list.listItem.bulletGap, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
+});
 var StyledBullet = styled.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
         ? list.listItem.fontSize[1]
         : list.listItem.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, list.listItem.bulletGap, list.listItem.bulletWidth);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
 });
+var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  "]))); });
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
 var ListBulletItem = function (_a) {
-    var children = _a.children;
-    return (React.createElement(View, { style: { flexDirection: 'row' } },
-        React.createElement(Bullet, null, "\u2022"),
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
+    return (React.createElement(StyledUlItem, null,
+        React.createElement(UlBullet, { visible: showBullets }),
         children));
 };
 var ListNumberedItem = function (_a) {
@@ -53,14 +58,14 @@ var ListNumberedItem = function (_a) {
 };
 var StyledList = styled.View(function (_a) {
     var list = _a.theme.list, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
 });
 var ListWrapper = styledComponentWithBreakpoints(StyledList);
 var Ul = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
     var list = useContext(ThemeContext).list;
     return (React.createElement(ListWrapper, __assign({}, rest),
-        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child) { return (React.createElement(ListBulletItem, null, child)); }))));
+        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child) { return (React.createElement(ListBulletItem, { showBullets: showBullets }, child)); }))));
 };
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
@@ -73,7 +78,7 @@ var StyledLi = styled.Text(function (_a) {
     var fontSize = smallAndUp
         ? list.listItem.fontSize[1]
         : list.listItem.fontSize[0];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
 });
 var Li = styledComponentWithBreakpoints(StyledLi);
 var Dl = ListWrapper;
@@ -82,7 +87,7 @@ var StyledDtText = styled.Text(function (_a) {
     var fontSize = smallAndUp
         ? list.listItem.fontSize[1]
         : list.listItem.fontSize[0];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), list.descriptionTerm.fontWeight, list.descriptionTerm.color, fontSize);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, calculateLineHeight(fontSize, text.lineHeight), list.descriptionTerm.color, fontSize);
 });
 var DtText = styledComponentWithBreakpoints(StyledDtText);
 var StyledDtItem = styled.View(function (_a) {
@@ -93,7 +98,7 @@ var StyledDtItem = styled.View(function (_a) {
     var marginBottom = smallAndUp
         ? list.descriptionTerm.marginBottom[1]
         : list.descriptionTerm.marginBottom[0];
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, marginBottom);
+    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, marginBottom);
 });
 var DtItem = styledComponentWithBreakpoints(StyledDtItem);
 var Dt = function (_a) {
@@ -106,7 +111,7 @@ var StyledDdText = styled.Text(function (_a) {
     var fontSize = smallAndUp
         ? list.listItem.fontSize[1]
         : list.listItem.fontSize[0];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
 });
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
@@ -115,4 +120,4 @@ var Dd = function (_a) {
         React.createElement(StyledDdText, __assign({}, breakpoints), children)));
 };
 export { Ul, Ol, Li, Dl, Dt, Dd };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/Margin/Margin.js

@@ -26,7 +26,9 @@ import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 var StyledMargin = styled.View(function (_a) {
     var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
-    var formatter = function (spaceKey) { return space[spaceKey]; };
+    var formatter = function (spaceKey) {
+        return spaceKey === 0 ? '0' : space[spaceKey];
+    };
     return "\n    ".concat(horizontal
         ? "\n            ".concat(responsiveStyle('margin-left', horizontal, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-right', horizontal, breakpoints, formatter), "\n          ")
         : '', "\n    ").concat(vertical

package/dist/esm/components/NavHeader/NavHeader.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import styled, { css } from '../../styled.native';
+import { Heading3, Heading4 } from '../Heading';
+var BackIcon = function () {
+    return (React.createElement(Svg, { width: "10", height: "16", viewBox: "0 0 10 16" },
+        React.createElement(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" })));
+};
+var StyledText = styled.Text(function (_a) {
+    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontWeights = _b.fontWeights, fontSizes = _b.fontSizes;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fontWeights.normal, fonts.body);
+});
+var LeftHeaderText = styled(StyledText)(function (_a) {
+    var space = _a.theme.space;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
+});
+var FeedbackText = styled(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
+var HeadlineView = styled(Animated.View)(function (_a) {
+    var space = _a.theme.space;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+});
+var RootView = styled.View(function (_a) {
+    var colors = _a.theme.colors;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+});
+var StyledView = styled(Animated.View)(function (_a) {
+    var space = _a.theme.space, marginTop = _a.marginTop;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+});
+var StyledHeading4 = styled(Heading4)(function (_a) {
+    var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
+});
+var StyledHeading3 = styled(Heading3)(function (_a) {
+    var colors = _a.theme.colors;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
+});
+export var NavHeader = function (_a) {
+    var options = _a.options, headline = _a.headline;
+    return (React.createElement(RootView, { layout: Layout.duration(150) },
+        React.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
+            (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (React.createElement(TouchableOpacity, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flex: 1,
+                    flexGrow: 1,
+                    flexShrink: 1,
+                }, onPress: options === null || options === void 0 ? void 0 : options.goBack },
+                React.createElement(BackIcon, null),
+                React.createElement(LeftHeaderText, null, "Back"))) : null,
+            React.createElement(Animated.View, { entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
+                React.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
+            React.createElement(TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
+                React.createElement(FeedbackText, null, "Feedback"))),
+        headline ? (React.createElement(HeadlineView, { entering: FadeIn, exiting: FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (React.createElement(StyledHeading3, null, options.title)) : null)) : null));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1 @@
+export { NavHeader } from './NavHeader';

package/dist/esm/components/Notification/Notification.js

@@ -28,37 +28,70 @@ import React, { forwardRef, useContext, useState, } from 'react';
 import { View } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import styled, { css, ThemeContext } from '../../styled.native';
-import { Heading2 } from '../Heading';
 import { Icon } from '../Icon';
+var pxToNumber = function (value) { return parseInt(value.replace('px', '')); };
+var numberToPx = function (value) { return "".concat(value, "px"); };
 var NotificationBox = styled.View(function (_a) {
-    var _b = _a.theme, notification = _b.notification, space = _b.space, smallAndUp = _a.smallAndUp, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, noMargin = _a.noMargin;
+    var _b = _a.theme, notification = _b.notification, space = _b.space, variant = _a.variant, noMargin = _a.noMargin;
+    // @ts-ignore
+    var currentVariant = notification.variants[variant];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n  "], ["\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n  "])), notification.borderWidth, currentVariant.borderColor, notification.borderRadius, noMargin ? 0 : space[4]);
+});
+export var NotificationContentBox = styled.View(function (_a) {
+    var _b = _a.theme, colors = _b.colors, _c = _b.notification, paddingX = _c.paddingX, paddingY = _c.paddingY, variants = _c.variants, smallAndUp = _a.smallAndUp, variant = _a.variant;
+    // @ts-ignore
+    var currentVariant = variants[variant];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", " ", ";\n\n      a {\n        color: ", ";\n        :hover {\n          color: ", ";\n        }\n      }\n      ul {\n        list-style-type: square;\n      }\n      li {\n        color: ", ";\n      }\n    "], ["\n      padding: ", " ", ";\n\n      a {\n        color: ", ";\n        :hover {\n          color: ", ";\n        }\n      }\n      ul {\n        list-style-type: square;\n      }\n      li {\n        color: ", ";\n      }\n    "])), paddingX[smallAndUp ? 1 : 0], paddingY[smallAndUp ? 1 : 0], currentVariant.textColor, colors.body, currentVariant.textColor);
+});
+export var NotificationTitleBox = styled.View(function (_a) {
+    var notification = _a.theme.notification, variant = _a.variant, dismissable = _a.dismissable, smallAndUp = _a.smallAndUp;
     // @ts-ignore to support additional palettes.
     var currentVariant = notification.variants[variant];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      border: ", " solid ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      ", "\n    "], ["\n      position: relative;\n      border: ", " solid ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      ", "\n    "])), notification.borderWidth, currentVariant.borderColor, currentVariant.background, notification.borderRadius, notification.padding[smallAndUp ? 1 : 0], noMargin ? null : "margin-bottom: ".concat(space[4], ";"));
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.background, notification.paddingX[smallAndUp ? 1 : 0], notification.paddingX[smallAndUp ? 1 : 0], notification.paddingY[smallAndUp ? 1 : 0], dismissable
+        ? numberToPx(pxToNumber(notification.dismiss.touchSize) -
+            pxToNumber(notification.dismiss.size))
+        : notification.paddingY[smallAndUp ? 1 : 0]);
+});
+var NotificationTitle = styled.Text(function (_a) {
+    var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, responsiveFontSizes = _b.responsiveFontSizes, notification = _b.notification, variant = _a.variant;
+    // @ts-ignore
+    var currentVariant = notification.variants[variant];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n    "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
 });
-var NotificationTitle = styled(Heading2)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0;\n"], ["\n  margin-top: 0;\n"])));
 var DismissButton = styled.TouchableOpacity(function (_a) {
     var notification = _a.theme.notification;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    position: absolute;\n    color: ", ";\n    top: 0;\n    right: 0;\n    align-items: center;\n    justify-content: center;\n  "], ["\n    width: ", ";\n    height: ", ";\n    position: absolute;\n    color: ", ";\n    top: 0;\n    right: 0;\n    align-items: center;\n    justify-content: center;\n  "])), notification.dismiss.touchSize, notification.dismiss.touchSize, notification.dismiss.color);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    width: ", ";\n    height: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
 });
 export var Notification = forwardRef(function (_a, ref) {
-    var variant = _a.variant, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, _c = _a.title, title = _c === void 0 ? 'Info' : _c, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
     var breakpoints = useBreakpoint();
     var theme = useContext(ThemeContext);
-    var _b = useState(false), dismissed = _b[0], setDismissed = _b[1];
-    return dismissed ? null : (React.createElement(View, __assign({ ref: ref }, rest), children ? (React.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
-        dismissable && (React.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+    var _d = useState(false), dismissed = _d[0], setDismissed = _d[1];
+    if (dismissed) {
+        return null;
+    }
+    var renderDismissButton = function () {
+        if (!dismissable)
+            return null;
+        return (React.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                 setDismissed(true);
                 if (onDismiss) {
                     onDismiss();
                 }
             } },
-            React.createElement(Icon, { name: theme.notification.dismiss.icon, size: theme.notification.dismiss.size }))),
-        title && React.createElement(NotificationTitle, null, title),
-        children)) : null));
+            React.createElement(Icon, { name: theme.notification.dismiss.icon, size: theme.notification.dismiss.size, 
+                // @ts-ignore
+                color: theme.notification.variants[variant].textColor })));
+    };
+    return (React.createElement(View, __assign({ ref: ref }, rest),
+        React.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
+            React.createElement(NotificationTitleBox, __assign({ variant: variant, "data-testid": "nb-notification-box", dismissable: dismissable }, breakpoints),
+                React.createElement(NotificationTitle, { variant: variant }, title),
+                renderDismissButton()),
+            children ? (React.createElement(NotificationContentBox, __assign({ variant: variant }, breakpoints), children)) : null)));
 });
-export var ErrorNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "error", title: React.createElement(React.Fragment, null, "Oops, there\u2019s a problem\u2026") }, props))); });
-export var SuccessNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "success" }, props))); });
+export var ErrorNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "error", title: "Oops, there\u2019s a problem\u2026" }, props))); });
+export var SuccessNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ title: "Success", ref: ref, variant: "success" }, props))); });
 export var InfoNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "info" }, props)); });
-export var WarningNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "warning" }, props)); });
-var templateObject_1, templateObject_2, templateObject_3;
+export var WarningNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ title: "Warning", ref: ref, variant: "warning" }, props))); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/Radio/Radio.js

@@ -29,7 +29,7 @@ import { TouchableOpacity, View, } from 'react-native';
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { HintText } from '../HintText';
-import { SubLabelText } from '../SubLabelText';
+import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
     var radio = _a.theme.radio;
     var radioSize = pxToNumber(radio.size);
@@ -37,11 +37,15 @@ var StyledRadioInputWrapper = styled.View(function (_a) {
     return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
 });
 var StyledRadioInput = styled.View(function (_a) {
-    var radio = _a.theme.radio, invalid = _a.invalid;
+    var radio = _a.theme.radio, invalid = _a.invalid, checked = _a.checked;
     var touchSize = pxToNumber(radio.touchSize);
     var radioSize = pxToNumber(radio.size);
     var radioDistance = (touchSize - radioSize) / 2;
-    return "\n      width: ".concat(radio.size, ";\n      height: ").concat(radio.size, ";\n      border: ").concat(radio.borderWidth, " solid;\n      margin-top: ").concat(radioDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      border-color: ").concat(invalid ? radio.errorColor : radio.borderColor, ";\n      background: ").concat(radio.background, ";\n    ");
+    return "\n      width: ".concat(radio.size, ";\n      height: ").concat(radio.size, ";\n      border: ").concat(radio.borderWidth, " solid;\n      margin-top: ").concat(radioDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      border-color: ").concat(invalid
+        ? radio.errorColor
+        : checked
+            ? radio.dotColor
+            : radio.borderColor, ";\n      background: ").concat(radio.background, ";\n      background: ").concat(checked ? radio.checkedBackground : radio.background, ";\n    ");
 });
 var StyledRadioInputDot = styled.View(function (_a) {
     var radio = _a.theme.radio, checked = _a.checked;
@@ -54,10 +58,10 @@ var StyledRadioInputDot = styled.View(function (_a) {
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
     return (React.createElement(StyledRadioInputWrapper, __assign({}, rest),
-        React.createElement(StyledRadioInput, { invalid: invalid },
+        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked },
             React.createElement(StyledRadioInputDot, { checked: checked }))));
 };
-var LabelText = styled(SubLabelText)(function (_a) {
+var RadioLabelText = styled(LabelText)(function (_a) {
     var space = _a.theme.space;
     return "\n    padding-top: ".concat(space[3], ";\n  ");
 });
@@ -74,7 +78,7 @@ var Radio = forwardRef(function (_a, ref) {
         React.createElement(StyledWrapper, null,
             React.createElement(Input, { checked: checked, invalid: invalid }),
             React.createElement(View, { style: { flexShrink: 1 } },
-                React.createElement(LabelText, null, label),
+                React.createElement(RadioLabelText, null, label),
                 hint ? React.createElement(HintText, null, hint) : null))));
 });
 export { Radio };

package/dist/esm/components/Tabs/Tab.js

@@ -29,8 +29,8 @@ var StyledText = styled.Text(function (_a) {
     return "\n  font-size: ".concat(tabs.tab.fontSize[smallAndUp ? 1 : 0], ";\n  font-family: ").concat(tabs.tab.fontFamily, ";\n  font-weight: ").concat(tabs.tab.fontWeight, ";\n  background-color: ").concat(active ? tabs.tab.active.backgroundColor : tabs.tab.inactive.backgroundColor, ";\n  line-height: ").concat("".concat(tabs.tab.lineHeight * 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 StyledTouchableOpacity = styled.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;
-    return "flex-grow: ".concat(stretch ? 1 : 0, ";\n  border: ").concat(card.borderWidth, " solid ").concat(card.borderColor, ";\n  border-bottom-color: ").concat(active ? tabs.tab.active.backgroundColor : card.borderColor, ";\n  border-top-left-radius: ").concat(first ? card.borderRadius : 0, ";\n  border-top-right-radius: ").concat(first ? card.borderRadius : 0, ";\n  border-right-width: ").concat(card.borderWidth, ";\n  border-left-width: ").concat(first ? card.borderWidth : 0, ";\n  background-color: ").concat(active ? tabs.tab.active.borderTopColor : tabs.tab.inactive.backgroundColor, ";\n  padding-top: ").concat(tabs.tab.borderTopWidth, ";\n  border-top-left-radius: ").concat(first ? card.borderRadius : 0, ";\n  border-top-right-radius: ").concat(last && stretch ? card.borderRadius : 0, ";\n");
+    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");
 });
 export var Tab = forwardRef(function (
 // eslint-disable-next-line

package/dist/esm/components/Tabs/TabList.js

@@ -29,7 +29,7 @@ import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { callAll } from '../../utils';
 export var TabList = styled(function (_a) {
-    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth"]);
+    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
     return (React.createElement(View, __assign({ accessibilityRole: "tablist" }, rest), Children.map(children, function (child, i) {
         return cloneElement(child, {
             onPress: callAll(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
@@ -38,6 +38,7 @@ export var TabList = styled(function (_a) {
             ref: tabRefs[i],
             first: i === 0,
             last: Children.count(children) - 1 === i,
+            inline: inline,
         });
     })));
 })(function (_a) {

package/dist/esm/components/Tabs/Tabs.js

@@ -31,7 +31,7 @@ import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
 export var Tabs = styled(function (_a) {
-    var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth"]);
+    var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
     var _c = useState(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
     var tabList = filterChildrenByType(children, TabList);
     var tabPanels = filterChildrenByType(children, TabPanel);
@@ -52,6 +52,7 @@ export var Tabs = styled(function (_a) {
                 activeTab: activeTab,
                 tabRefs: tabRefs,
                 fullWidth: fullWidth,
+                inline: inline,
             });
         }),
         tabPanels
@@ -61,7 +62,8 @@ export var Tabs = styled(function (_a) {
                 hidden: activeTab !== index,
             });
         })));
-})(function () {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+})(function (_a) {
+    var _b = _a.theme, card = _b.card, tabs = _b.tabs, inline = _a.inline;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), card.borderWidth, inline ? card.borderColor : tabs.tab.borderColor);
 });
 var templateObject_1;

package/dist/esm/components/Text/Text.js

@@ -27,12 +27,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, isValidElement, cloneElement, } from 'react';
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledP = styled.Text(function (_a) {
     var text = _a.theme.text, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? text.p.fontSize[1] : text.p.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, smallAndUp ? text.p.marginTop[1] : text.p.marginTop[0], smallAndUp
+    var lineHeight = smallAndUp ? text.p.lineHeight[1] : text.p.lineHeight[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), text.fontFamily, text.fontWeight, fontSize, lineHeight, text.color, smallAndUp ? text.p.marginTop[1] : text.p.marginTop[0], smallAndUp
         ? text.p.marginBottom[1]
         : text.p.marginBottom[0]);
 });
@@ -44,7 +44,7 @@ var StyledSmall = styled.Text(function (_a) {
 export var Small = styledComponentWithBreakpoints(StyledSmall);
 export var Strong = styled.Text(function (_a) {
     var text = _a.theme.text;
-    return "\n    font-weight: ".concat(text.strong.fontWeight, ";\n  ");
+    return "\n    font-family: ".concat(text.strong.fontFamily, ";\n    font-weight: ").concat(text.strong.fontWeight, ";\n  ");
 });
 export var Em = styled.Text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-style: italic;\n"], ["\n  font-style: italic;\n"])));
 export var LineThrough = styled.Text(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));