@ovotech/element-native 0.0.1 → 0.0.2

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

@@ -0,0 +1,64 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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, 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 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;
+    // @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], ";"));
+});
+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);
+});
+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 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 () {
+                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));
+});
+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 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;

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

@@ -0,0 +1 @@
+export { Notification, ErrorNotification, InfoNotification, WarningNotification, SuccessNotification, } from './Notification';

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

@@ -0,0 +1,81 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 { TouchableOpacity, View, } from 'react-native';
+import styled from '../../styled.native';
+import { pxToNumber } from '../../utils';
+import { HintText } from '../HintText';
+import { SubLabelText } from '../SubLabelText';
+var StyledRadioInputWrapper = styled.View(function (_a) {
+    var radio = _a.theme.radio;
+    var radioSize = pxToNumber(radio.size);
+    var gap = pxToNumber(radio.gap);
+    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 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    ");
+});
+var StyledRadioInputDot = styled.View(function (_a) {
+    var radio = _a.theme.radio, checked = _a.checked;
+    var radioSize = pxToNumber(radio.size);
+    var dotSize = pxToNumber(radio.dotSize);
+    var borderWidth = pxToNumber(radio.borderWidth);
+    var dotDistance = (radioSize - dotSize) / 2 - borderWidth;
+    return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+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(StyledRadioInputDot, { checked: checked }))));
+};
+var LabelText = styled(SubLabelText)(function (_a) {
+    var space = _a.theme.space;
+    return "\n    padding-top: ".concat(space[3], ";\n  ");
+});
+var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var Radio = forwardRef(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity"]);
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
+        // @ts-ignore
+        invalid: invalid }, rest),
+        React.createElement(StyledWrapper, null,
+            React.createElement(Input, { checked: checked, invalid: invalid }),
+            React.createElement(View, { style: { flexShrink: 1 } },
+                React.createElement(LabelText, null, label),
+                hint ? React.createElement(HintText, null, hint) : null))));
+});
+export { Radio };
+var templateObject_1;

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

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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, { Children, cloneElement, } from 'react';
+import { View } from 'react-native';
+import { callAll } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+var RadioField = function (_a) {
+    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
+    var hasError = !!error;
+    return (React.createElement(FormGroup, __assign({}, rest, { error: hasError }),
+        React.createElement(Stack, { spaceBetween: 1 },
+            React.createElement(View, null,
+                React.createElement(LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? React.createElement(HintText, null, hint) : null,
+                error ? React.createElement(ErrorText, null, error) : null),
+            React.createElement(View, { accessibilityRole: "radiogroup" }, Children.map(children, function (child) {
+                return cloneElement(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                    checked: child.props.checked != null
+                        ? child.props.checked
+                        : value && (value === child.props.value ? true : false),
+                    onPress: callAll(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                });
+            })))));
+};
+export { RadioField };

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

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export { RadioField } from './RadioField';

package/dist/esm/components/SkeletonLoading/Skeleton.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from '../../styled.native';
+export var Skeleton = styled.View(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    overflow: hidden;\n    display: flex;\n\n    &:after {\n      content: '';\n      position: absolute;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background-size: 100px;\n      background-repeat: no-repeat;\n    }\n  "], ["\n    position: relative;\n    overflow: hidden;\n    display: flex;\n\n    &:after {\n      content: '';\n      position: absolute;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 50%,\n        rgba(255, 255, 255, 0) 100%\n      );\n      background-size: 100px;\n      background-repeat: no-repeat;\n    }\n  "]))); });
+var templateObject_1;

package/dist/esm/components/SkeletonLoading/SkeletonCTA.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 from 'react';
+import styled from '../../styled.native';
+import { P } from '../Text';
+import { Skeleton } from './Skeleton';
+var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
+});
+export var SkeletonCTA = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
+    return (React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest)));
+};

package/dist/esm/components/SkeletonLoading/SkeletonCircle.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 from 'react';
+import styled from '../../styled.native';
+import { pxToNumber } from '../../utils';
+import { Skeleton } from './Skeleton';
+var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
+    var size = _a.size;
+    return "width: ".concat(size, "; max-width: 100%;");
+});
+var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(size) / 2, "px;\n  ");
+});
+export var SkeletonCircle = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
+    return (React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+        React.createElement(StyledSkeletonCircle, { size: size })));
+};

package/dist/esm/components/SkeletonLoading/SkeletonHeading.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 from 'react';
+import styled from '../../styled.native';
+import { Heading3 } from '../Heading';
+import { Skeleton } from './Skeleton';
+var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
+});
+export var SkeletonHeading = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
+    return (React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+};

package/dist/esm/components/SkeletonLoading/SkeletonText.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 from 'react';
+import { View } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+import { P } from '../Text';
+import { Skeleton } from './Skeleton';
+var StyledSkeletonText = styled(Skeleton)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+});
+export var SkeletonText = function (_a) {
+    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
+    var breakpoints = useBreakpoint();
+    var generatedLines = [];
+    for (var i = 1; i <= lines; i++) {
+        generatedLines.push(React.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
+    }
+    return (React.createElement(P, __assign({ as: View }, rest), generatedLines));
+};

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

@@ -0,0 +1,5 @@
+export * from './Skeleton';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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, { Children } from 'react';
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { responsiveStyle, styledComponentWithBreakpoints } from '../../utils';
+var Stack = function (_a) {
+    var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
+    var filteredChildren = [];
+    Children.forEach(children, function (child) {
+        if (child != null) {
+            filteredChildren.push(child);
+        }
+    });
+    return (React.createElement(View, __assign({}, rest), Children.map(filteredChildren, function (child, index) {
+        return index === 0 ? (child) : (React.createElement(StackItem, { spaceBetween: spaceBetween }, child));
+    })));
+};
+var StyledStackItem = styled.View(function (_a) {
+    var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) { return space[spaceKey]; };
+    var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
+    return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
+});
+var StackItem = styledComponentWithBreakpoints(StyledStackItem);
+export { Stack };

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

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

package/dist/esm/components/Stretch/Stretch.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+var StyledStretch = styled.View(function (_a) {
+    var smallAndUp = _a.smallAndUp, fullWidth = _a.fullWidth, defaultWidth = _a.defaultWidth;
+    return (smallAndUp && fullWidth === 'small') || fullWidth === 'never'
+        ? "width: ".concat(defaultWidth, ";")
+        : "width: 100%;";
+});
+export var Stretch = function (props) {
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return React.createElement(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+};

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

@@ -0,0 +1 @@
+export * from './Stretch';

package/dist/esm/components/SubLabelText/SubLabelText.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledSubLabelText = 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.subLabel.fontWeight, field.subLabel.color, fontSize);
+});
+var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
+export { SubLabelText };
+var templateObject_1;

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

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

package/dist/esm/components/SummaryList/SummaryList.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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, { Children, cloneElement, } from 'react';
+import { Dd, Dl, Dt } from '../List';
+var SummaryList = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(Dl, __assign({}, rest), Children.map(children, function (child, index) {
+        return cloneElement(child, {
+            index: index,
+        });
+    })));
+};
+var SummaryItem = function (_a) {
+    var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dt, { style: index === 0 ? { marginTop: 0 } : undefined }, label),
+        React.createElement(Dd, __assign({}, rest), children)));
+};
+export { SummaryList, SummaryItem };

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

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

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

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 { useBreakpoint, useFullWidth, } from '../../hooks';
+import styled from '../../styled.native';
+import { pxToNumber } from '../../utils';
+var StyledText = styled.Text(function (_a) {
+    var tabs = _a.theme.tabs, smallAndUp = _a.smallAndUp, active = _a.active;
+    return "\n  font-size: ".concat(tabs.tab.fontSize[smallAndUp ? 1 : 0], ";\n  font-family: ").concat(tabs.tab.fontFamily, ";\n  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");
+});
+export var Tab = forwardRef(function (
+// eslint-disable-next-line
+_a, ref) {
+    var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, 
+    // eslint-disable-next-line
+    ["active", "fullWidth", "children"]);
+    var stretch = useFullWidth(fullWidth);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledTouchableOpacity, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: stretch, ref: ref }, rest),
+        React.createElement(StyledText, __assign({ active: active }, breakpoints), children)));
+});

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

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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, { Children, cloneElement } from 'react';
+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"]);
+    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),
+            active: activeTab === i,
+            fullWidth: fullWidth,
+            ref: tabRefs[i],
+            first: i === 0,
+            last: Children.count(children) - 1 === i,
+        });
+    })));
+})(function (_a) {
+    var card = _a.theme.card;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), card.borderWidth);
+});
+var templateObject_1;