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

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './Disclosure';
 export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';
+export * from './NavHeader';
 export * from './Heading';
 export * from './Icon';
 export * from './Input';

package/dist/components/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./Disclosure"), exports);
 __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);
+__exportStar(require("./NavHeader"), exports);
 __exportStar(require("./Heading"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Input"), exports);

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

@@ -1,7 +1,18 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13,66 +24,88 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useState, forwardRef, useContext, Children, } from 'react';
-import { View, Text, } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import styled, { css, ThemeContext } from '../../styled.native';
-import { Card } from '../Card';
+import React, { useCallback, useMemo, useEffect } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, interpolateColor, } from 'react-native-reanimated';
+import { theme } from '../../theme';
 import { Heading3 } from '../Heading';
-import { Icon } from '../Icon';
-var AccordionHeader = styled.TouchableOpacity(function (_a) {
-    var _b = _a.theme, accordion = _b.accordion, card = _b.card, smallAndUp = _a.smallAndUp;
-    return "\n    flex-direction: row;\n    padding: ".concat(smallAndUp
-        ? accordion.header.paddingVertical[1]
-        : accordion.header.paddingVertical[0], " ").concat(smallAndUp ? card.padding[1] : card.padding[0], ";\n");
-});
-var AccordionHeading = styled.Text(function (_a) {
-    var accordion = _a.theme.accordion;
-    return "\n    color: ".concat(accordion.header.color, ";\n    margin: 0;\n    flex: 1;\n  ");
-});
-var AccordionContent = styled.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp;
-    return "\n    padding: ".concat(smallAndUp ? card.padding[1] : card.padding[0], ";\n    padding-top: 0;\n  ");
-});
-var AccordionIcon = styled(Icon)(function (_a) {
-    var accordion = _a.theme.accordion;
-    return "\n    margin-right: ".concat(accordion.header.iconGap, ";\n    align-self: center;\n    flex-shrink: 0;\n  ");
-});
-export var Accordion = forwardRef(function (_a, ref) {
-    var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["children", "title", "expanded", "onToggle", "headingComponent"]);
-    var breakpoints = useBreakpoint();
-    var accordion = useContext(ThemeContext).accordion;
-    var _d = useState(expanded), isExpanded = _d[0], setIsExpanded = _d[1];
-    return (React.createElement(View, __assign({}, rest),
-        React.createElement(AccordionHeader, __assign({}, breakpoints, { ref: ref, accessibilityState: { expanded: isExpanded }, onPress: function () {
-                setIsExpanded(!isExpanded);
-                onToggle && onToggle(!isExpanded);
-            } }),
-            React.createElement(AccordionIcon, { name: isExpanded ? 'minus' : 'plus', size: accordion.header.iconSize, color: accordion.header.color }),
-            React.createElement(AccordionHeading, { as: Heading },
-                React.createElement(Text, { style: { flex: 1 } }, title))),
-        isExpanded ? (React.createElement(AccordionContent, __assign({}, breakpoints), children)) : null));
-});
-var StyledAccordionGroup = styled(Card)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
-var Border = styled.View(function (_a) {
-    var card = _a.theme.card;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: 0 solid ", ";\n    border-top-width: ", ";\n  "], ["\n    border: 0 solid ", ";\n    border-top-width: ", ";\n  "])), card.borderColor, card.borderWidth);
-});
-export var AccordionGroup = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement(StyledAccordionGroup, __assign({}, rest), Children.map(children, function (child, index) {
-        return index === 0 ? child : React.createElement(Border, null, child);
-    })));
+import { AccordionIcon } from './Icon';
+import { useLayout } from './hooks';
+import { styles } from './styles';
+var _a = theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
+export function withAnimated(WrappedComponent) {
+    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // eslint-disable-next-line react/prefer-stateless-function
+    var WithAnimated = /** @class */ (function (_super) {
+        __extends(WithAnimated, _super);
+        function WithAnimated() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        WithAnimated.prototype.render = function () {
+            return React.createElement(WrappedComponent, __assign({}, this.props));
+        };
+        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
+        return WithAnimated;
+    }(React.Component));
+    return Animated.createAnimatedComponent(WithAnimated);
+}
+export var Accordion = function (_a) {
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var AnimatedHeading = useMemo(function () { return withAnimated(headingComponent); }, [
+        headingComponent,
+    ]);
+    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
+    var open = useSharedValue(expanded);
+    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
+        layout.height,
+    ]);
+    var size = useSharedValue(handleHeightContent);
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            if (expanded && handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [handleHeightContent, expanded, size]);
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            if (handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [handleHeightContent, size]);
+    var progress = useDerivedValue(function () { return withTiming(open.value ? 1 : 0); });
+    var style = useAnimatedStyle(function () { return ({
+        height: size.value * progress.value + 1,
+    }); });
+    var toggleOpen = useCallback(function () {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        if (size.value === 0) {
+            runOnUI(function () {
+                'worklet';
+                size.value = handleHeightContent;
+            })();
+        }
+        open.value = !open.value;
+    }, [handleHeightContent, open, size]);
+    var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
+    var headerStyle = useAnimatedStyle(function () { return ({
+        color: interpolateColor(progress.value, [0, 1], [greyDarker, primary]),
+    }); });
+    var backgroundStyle = useAnimatedStyle(function () { return ({
+        backgroundColor: interpolateColor(progress.value, [0, 1], [canvas, canvasMuted]),
+    }); });
+    return (React.createElement(Animated.View, { style: [
+            backgroundStyle,
+            styles.accordion,
+            first ? styles.topItem : null,
+            last ? styles.bottomItem : null,
+        ] },
+        React.createElement(TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles.accordionHeader },
+            React.createElement(AnimatedHeading, { style: [headerStyle, styles.accordionHeaderText] }, title),
+            React.createElement(AccordionIcon, { animationTiming: progress })),
+        React.createElement(Animated.View, { style: containerAnimatedStyle },
+            React.createElement(View, { onLayout: onLayout, style: styles.container }, children))));
 };
-var templateObject_1, templateObject_2;

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

@@ -0,0 +1,14 @@
+import React, { Children, cloneElement, isValidElement, } from 'react';
+import { View } from 'react-native';
+export var AccordionGroup = function (_a) {
+    var children = _a.children;
+    var childCount = Children.count(children);
+    return (React.createElement(View, null, Children.map(children, function (child, i) {
+        return isValidElement(child)
+            ? cloneElement(child, {
+                first: i === 0,
+                last: i === childCount - 1,
+            })
+            : child;
+    })));
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import Animated, { useAnimatedStyle, interpolateColor, useAnimatedProps, } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { theme } from '../../theme';
+var _a = theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+var OVO_LOGO_ANGLE = 105;
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon(_a) {
+    var animationTiming = _a.animationTiming;
+    var outerAnimatedStyles = useAnimatedStyle(function () { return ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [primaryMuted, primary]),
+        height: 36 - animationTiming.value * 4,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }); });
+    var innerAnimatedStyles = useAnimatedStyle(function () { return ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }); });
+    var plusAnimatedProps = useAnimatedProps(function () { return ({
+        opacity: 1 - animationTiming.value,
+    }); });
+    var minusAnimatedProps = useAnimatedProps(function () { return ({
+        opacity: animationTiming.value,
+    }); });
+    return (React.createElement(Animated.View, { style: [
+            {
+                backgroundColor: primaryMuted,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ] },
+        React.createElement(Animated.View, { style: innerAnimatedStyles },
+            React.createElement(Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
+                React.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
+                React.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
+}

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+export var useLayout = function (defaultHeight) {
+    var _a = useState({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
+    var onLayout = React.useCallback(function (e) {
+        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
+        if (height === layout.height && width === layout.width) {
+            return;
+        }
+        setLayout({
+            height: height,
+            width: width,
+            measured: true
+        });
+    }, [layout.height, layout.width]);
+    return [layout, onLayout];
+};

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

@@ -1 +1,3 @@
-export { Accordion, AccordionGroup } from './Accordion';
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';

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

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+import { theme } from '../../theme';
+var greyBase = theme.colors.brand.grey.base;
+var styles = StyleSheet.create({
+    accordion: {
+        width: '100%',
+        borderWidth: parseInt(theme.borderWidths.standard),
+        borderBottomWidth: 0,
+        borderColor: greyBase,
+    },
+    topItem: {
+        borderTopLeftRadius: parseInt(theme.radii.small),
+        borderTopRightRadius: parseInt(theme.radii.small),
+    },
+    bottomItem: {
+        borderBottomLeftRadius: parseInt(theme.radii.small),
+        borderBottomRightRadius: parseInt(theme.radii.small),
+        borderBottomWidth: parseInt(theme.borderWidths.standard),
+    },
+    accordionHeader: {
+        paddingTop: parseInt(theme.space[5]),
+        paddingRight: 18,
+        paddingBottom: 18,
+        paddingLeft: parseInt(theme.space[3]),
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    accordionHeaderText: {
+        paddingRight: parseInt(theme.space[3]),
+        marginTop: 0,
+        marginBottom: 0,
+        flexShrink: 1,
+    },
+    content: {
+        overflow: 'hidden',
+    },
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        paddingTop: 0,
+        paddingRight: parseInt(theme.space[12]),
+        paddingBottom: parseInt(theme.space[6]),
+        paddingLeft: parseInt(theme.space[3]),
+    },
+});
+export { styles };

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Badge/Badge.js

@@ -32,15 +32,13 @@ var StyledBadge = styled.View(function (_a) {
     var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
     // @ts-ignore to support additional palettes.
     var currentVariant = badge.variants[variant];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    border: ", " solid ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    border: ", " solid ", ";\n    align-self: flex-start;\n  "])), badge.paddingVertical, badge.paddingHorizontal, badge.borderRadius, currentVariant.background, badge.borderWidth, currentVariant.borderColor);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), badge.paddingHorizontal, badge.borderRadius, currentVariant.background);
 });
 var StyledBadgeText = styled.Text(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, smallAndUp = _a.smallAndUp;
+    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
     // @ts-ignore to support additional palettes.
     var currentVariant = badge.variants[variant];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontWeight, smallAndUp
-        ? calculateLineHeight(badge.fontSize[1], badge.lineHeight)
-        : calculateLineHeight(badge.fontSize[0], badge.lineHeight), currentVariant.foreground, smallAndUp ? badge.fontSize[1] : badge.fontSize[0]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontFamily, badge.fontWeight, calculateLineHeight(badge.fontSize[1], badge.lineHeight), currentVariant.foreground, badge.fontSize[1]);
 });
 export var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);

package/dist/esm/components/CTAButton/CTAButton.js

@@ -54,7 +54,7 @@ var StyledCTAButtonText = styled.Text(function (_a) {
     var fontSize = smallAndUp ? cta.fontSize[1] : cta.fontSize[0];
     // @ts-ignore to support additional palettes.
     var currentVariant = cta.variants[variant];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "])), currentVariant.foreground, cta.font, fontSize, cta.fontWeight, calculateLineHeight(fontSize, cta.lineHeight));
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "])), currentVariant.foreground, cta.fontFamily, fontSize, cta.fontWeight, calculateLineHeight(fontSize, cta.lineHeight));
 });
 var CTAButton = function (_a) {
     var _b = _a.iconLeft, iconLeft = _b === void 0 ? 'off' : _b, _c = _a.iconRight, iconRight = _c === void 0 ? 'off' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'small' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant"]);

package/dist/esm/components/CTALink/CTALink.js

@@ -9,29 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { forwardRef } from 'react';
 import { CTAButton } from '../CTAButton';
-var CTALink = forwardRef(function (_a, ref) {
-    var iconRight = _a.iconRight, opensInNewWindow = _a.opensInNewWindow, rest = __rest(_a, ["iconRight", "opensInNewWindow"]);
-    if (!iconRight && opensInNewWindow) {
-        iconRight = 'new-window';
-    }
-    else if (!iconRight) {
-        iconRight = 'chevron-right';
-    }
-    return React.createElement(CTAButton, __assign({ iconRight: iconRight }, rest, { ref: ref }));
-});
+var CTALink = forwardRef(function (props, ref) { return React.createElement(CTAButton, __assign({}, props, { ref: ref })); });
 var PrimaryCTALink = forwardRef(function (props, ref) { return React.createElement(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
 var SecondaryCTALink = forwardRef(function (props, ref) { return (React.createElement(CTALink, __assign({ variant: "secondary", ref: ref }, props))); });
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

package/dist/esm/components/Card/Card.js

@@ -13,11 +13,12 @@ import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 var StyledCard = styled.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp, _b = _a.inline, inline = _b === void 0 ? false : _b;
-    var padding = smallAndUp ? card.padding[1] : card.padding[0];
-    return "\n      background: ".concat(card.background, ";\n      border-radius: ").concat(card.borderRadius, ";\n      border: ").concat(card.borderWidth, " solid ").concat(card.borderColor, ";\n      padding: ").concat(padding, ";\n      ").concat(inline
-        ? ''
-        : "\n              shadow-color: ".concat(card.shadow.color, ";\n              shadow-opacity: ").concat(card.shadow.opacity, ";\n              shadow-offset: ").concat(card.shadow.offset, ";\n              shadow-radius: ").concat(card.shadow.radius, ";\n              elevation: ").concat(card.shadow.elevation, ";\n            "), "\n    ");
+    var _b = _a.theme, card = _b.card, radii = _b.radii, smallAndUp = _a.smallAndUp, _c = _a.inline, inline = _c === void 0 ? false : _c;
+    var padding = smallAndUp
+        ? "".concat(card.padding[2], " ").concat(card.padding[1])
+        : "".concat(card.padding[1], " ").concat(card.padding[0]);
+    var borderRadius = smallAndUp ? radii.medium : radii.small;
+    return "\n      background: ".concat(card.background, ";\n      border: ").concat(inline ? "".concat(card.borderWidth, " solid ").concat(card.borderColor) : 'none', ";\n      padding: ").concat(padding, ";\n      border-radius: ").concat(borderRadius, ";\n    ");
 });
 var Card = function (props) {
     var breakpoints = useBreakpoint();

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

@@ -32,8 +32,8 @@ import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
 import { Icon } from '../Icon/Icon';
+import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
-import { SubLabelText } from '../SubLabelText';
 var StyledCheckboxInputWrapper = styled.View(function (_a) {
     var checkbox = _a.theme.checkbox;
     var checkboxSize = pxToNumber(checkbox.size);
@@ -41,11 +41,15 @@ var StyledCheckboxInputWrapper = styled.View(function (_a) {
     return "\n      width: ".concat(checkboxSize + gap, "px;\n      height: ").concat(checkbox.touchSize, ";\n    ");
 });
 var StyledCheckboxInput = styled.View(function (_a) {
-    var checkbox = _a.theme.checkbox, invalid = _a.invalid;
+    var checkbox = _a.theme.checkbox, invalid = _a.invalid, checked = _a.checked;
     var touchSize = pxToNumber(checkbox.touchSize);
     var checkboxSize = pxToNumber(checkbox.size);
     var checkboxDistance = (touchSize - checkboxSize) / 2;
-    return "\n      width: ".concat(checkbox.size, ";\n      height: ").concat(checkbox.size, ";\n      border: ").concat(checkbox.borderWidth, " solid;\n      margin-top: ").concat(checkboxDistance, "px;\n      border-radius: ").concat(checkbox.borderRadius, ";\n      border-color: ").concat(invalid ? checkbox.errorColor : checkbox.borderColor, ";\n      background: ").concat(checkbox.background, ";\n    ");
+    return "\n      width: ".concat(checkbox.size, ";\n      height: ").concat(checkbox.size, ";\n      border: ").concat(checkbox.borderWidth, " solid;\n      margin-top: ").concat(checkboxDistance, "px;\n      border-radius: ").concat(checkbox.borderRadius, ";\n      border-color: ").concat(invalid
+        ? checkbox.errorColor
+        : checked
+            ? checkbox.checkColor
+            : checkbox.borderColor, ";\n      background: ").concat(checked ? checkbox.checkedBackground : checkbox.background, ";\n    ");
 });
 var CheckboxCheck = function (props) {
     var checkbox = useContext(ThemeContext).checkbox;
@@ -62,10 +66,10 @@ var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
     return (React.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
-        React.createElement(StyledCheckboxInput, { invalid: invalid },
+        React.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked },
             React.createElement(StyledCheckboxInputCheck, { checked: checked }))));
 };
-var LabelText = styled(SubLabelText)(function (_a) {
+var CheckLabelText = styled(LabelText)(function (_a) {
     var checkbox = _a.theme.checkbox;
     return "\n    padding-top: ".concat(checkbox.paddingTop, ";\n  ");
 });
@@ -82,7 +86,7 @@ var Checkbox = forwardRef(function (_a, ref) {
                 React.createElement(StyledWrapper, null,
                     React.createElement(Input, { checked: checked, invalid: hasError || invalid }),
                     React.createElement(View, { style: { flexShrink: 1 } },
-                        React.createElement(LabelText, null,
+                        React.createElement(CheckLabelText, null,
                             label,
                             optional ? ' (optional)' : null),
                         hint ? React.createElement(HintText, null, hint) : null))))));

package/dist/esm/components/DataTable/DataTable.js

@@ -31,68 +31,66 @@ import styled, { css } from '../../styled.native';
 import { getText } from '../../utils';
 export var DataTable = forwardRef(function (_a, ref) {
     var items = _a.items, columnHeadings = _a.columnHeadings, caption = _a.caption, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths, _b = _a.striped, striped = _b === void 0 ? true : _b, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped"]);
+    var breakpoints = useBreakpoint();
     var columnLabel = columnHeadings
         ? " ".concat(columnHeadings.length, " columns,")
         : '';
     var captionLabel = caption ? caption : '';
     var accessibilityLabelText = getText(captionLabel);
     var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
-    return (React.createElement(ScrollView, { horizontal: true, alwaysBounceHorizontal: false },
+    return (React.createElement(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 } },
         React.createElement(StyledTableContainer, __assign({}, rest, { ref: ref }),
-            caption ? (React.createElement(TableCaption, null,
-                React.createElement(TableCaptionText, { accessibilityLabel: accessibilityLabel }, caption))) : null,
-            columnHeadings ? (React.createElement(TableRowHeading, null, columnHeadings.map(function (columnHeading, index) { return (React.createElement(TableHeader, { key: index, cellWidth: columnWidths[index] },
-                React.createElement(TableHeaderText, null, columnHeading))); }))) : null,
+            caption ? (React.createElement(TableCaption, __assign({}, breakpoints),
+                React.createElement(TableCaptionText, __assign({}, breakpoints, { accessibilityLabel: accessibilityLabel }), caption))) : null,
+            columnHeadings ? (React.createElement(TableRowHeading, null, columnHeadings.map(function (columnHeading, index) { return (React.createElement(TableHeader, __assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }),
+                React.createElement(TableHeaderText, __assign({}, breakpoints), columnHeading))); }))) : null,
             React.createElement(TableBody, null, items.map(function (rowData, p) { return (React.createElement(TableRow, { key: p, stripe: striped && p % 2 === 0 }, rowData.map(function (cellData, i) {
-                return rowHeadings && i < 1 ? (React.createElement(RowHeading, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] },
-                    React.createElement(TableHeaderText, null, cellData))) : (React.createElement(TableCell, { key: i, testID: "cell", cellWidth: columnWidths[i] },
-                    React.createElement(CellText, null, cellData)));
+                return rowHeadings && i < 1 ? (React.createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }),
+                    React.createElement(TableHeaderText, __assign({}, breakpoints), cellData))) : (React.createElement(TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }),
+                    React.createElement(CellText, __assign({}, breakpoints), cellData)));
             }))); })))));
 });
-var StyledTableContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledTableContainer = styled.View(function (_a) {
+    var dataTable = _a.theme.dataTable;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), dataTable.borderWidth, dataTable.borderColor);
+});
 var TableHeader = styled.View(function (_a) {
-    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "], ["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "])), tableCell.paddingVertical, tableCell.paddingHorizontal, cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "], ["\n    padding: ", " ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n    flex: ", ";\n  "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
-var StyledTableHeaderText = styled.Text(function (_a) {
-    var _b = _a.theme, tableHeader = _b.dataTable.tableHeader, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    font-size: ", ";\n  "])), tableHeader.fontWeight, tableHeader.color, smallAndUp
+var TableHeaderText = styled.Text(function (_a) {
+    var _b = _a.theme, tableHeader = _b.dataTable.tableHeader, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n\n    line-height: ", ";\n    font-size: ", ";\n  "])), tableHeader.fontFamily, tableHeader.fontWeight, tableHeader.color, smallAndUp
+        ? responsiveLineHeights.body[1]
+        : responsiveLineHeights.body[0], smallAndUp
         ? responsiveFontSizes.body[1]
         : responsiveFontSizes.body[0]);
 });
-var TableHeaderText = function (props) {
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledTableHeaderText, __assign({}, breakpoints, props));
-};
-var StyledTableCaptionText = styled.Text(function (_a) {
-    var _b = _a.theme, tableCaption = _b.dataTable.tableCaption, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    font-size: ", ";\n  "])), tableCaption.fontWeight, tableCaption.color, smallAndUp
-        ? responsiveFontSizes.body[1]
-        : responsiveFontSizes.body[0]);
+var TableCaptionText = styled.Text(function (_a) {
+    var _b = _a.theme, tableCaption = _b.dataTable.tableCaption, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    text-align: left;\n    color: ", ";\n    flex-wrap: wrap;\n    line-height: ", ";\n    font-size: ", ";\n  "])), tableCaption.fontFamily, tableCaption.fontWeight, tableCaption.color, smallAndUp
+        ? responsiveLineHeights.level4[1]
+        : responsiveLineHeights.level4[0], smallAndUp
+        ? responsiveFontSizes.level4[1]
+        : responsiveFontSizes.level4[0]);
 });
-var TableCaptionText = function (props) {
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledTableCaptionText, __assign({}, breakpoints, props));
-};
-var StyledCellText = styled.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, responsiveFontSizes = _b.responsiveFontSizes, smallAndUp = _a.smallAndUp;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "])), text.fontWeight, text.fontFamily, smallAndUp
+var CellText = styled.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, responsiveFontSizes = _b.responsiveFontSizes, responsiveLineHeights = _b.responsiveLineHeights, smallAndUp = _a.smallAndUp;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), text.fontWeight, text.fontFamily, smallAndUp
+        ? responsiveLineHeights.body[1]
+        : responsiveLineHeights.body[0], smallAndUp
         ? responsiveFontSizes.body[1]
         : responsiveFontSizes.body[0]);
 });
-var CellText = function (props) {
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledCellText, __assign({}, breakpoints, props));
-};
 var TableCaption = styled.View(function (_a) {
-    var tableCaption = _a.theme.dataTable.tableCaption;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), tableCaption.paddingVertical, tableCaption.paddingHorizontal);
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, smallAndUp = _a.smallAndUp;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0]);
 });
 var TableRow = styled.View(function (_a) {
     var dataTable = _a.theme.dataTable, stripe = _a.stripe;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), stripe
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), stripe
         ? dataTable.tableRow.stripeColor
-        : dataTable.tableRow.backgroundColor);
+        : dataTable.tableRow.backgroundColor, stripe ? 'none' : "".concat(dataTable.borderWidth), stripe ? 'none' : "".concat(dataTable.borderColor));
 });
 var TableRowHeading = styled.View(function (_a) {
     var dataTable = _a.theme.dataTable;
@@ -100,11 +98,11 @@ var TableRowHeading = styled.View(function (_a) {
 });
 var TableBody = styled.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 var TableCell = styled.View(function (_a) {
-    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), tableCell.paddingVertical, tableCell.paddingHorizontal, tableCell.borderWidth, tableCell.borderColor, cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 var RowHeading = styled.View(function (_a) {
-    var tableCell = _a.theme.dataTable.tableCell, cellWidth = _a.cellWidth;
-    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), tableCell.paddingVertical, tableCell.paddingHorizontal, tableCell.borderWidth, tableCell.borderColor, cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var _b = _a.theme.dataTable.responsivePadding, vertical = _b.vertical, horizontal = _b.horizontal, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), vertical[smallAndUp ? 1 : 0], horizontal[smallAndUp ? 1 : 0], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/esm/components/DateField/DateField.js

@@ -64,8 +64,7 @@ export var DateField = 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(InlineFields, { stretch: stretch },
                 React.createElement(DayField, { spaceBetween: 1 },
                     React.createElement(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false },
@@ -78,6 +77,7 @@ export var DateField = forwardRef(function (_a, ref) {
                 React.createElement(YearField, { spaceBetween: 1 },
                     React.createElement(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false },
                         React.createElement(SubLabelText, null, "Year")),
-                    React.createElement(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable }))))));
+                    React.createElement(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable }))),
+            error ? React.createElement(ErrorText, null, error) : null)));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;