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

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

@@ -1,97 +0,0 @@
-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 { 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, 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_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 DismissButton = styled.TouchableOpacity(function (_a) {
-    var notification = _a.theme.notification;
-    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 _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 _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, 
-                // @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: "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({ title: "Warning", ref: ref, variant: "warning" }, props))); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

@@ -1,85 +0,0 @@
-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 { LabelText } from '../LabelText';
-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, 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
-        : 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;
-    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, checked: checked },
-            React.createElement(StyledRadioInputDot, { checked: checked }))));
-};
-var RadioLabelText = styled(LabelText)(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(RadioLabelText, null, label),
-                hint ? React.createElement(HintText, null, hint) : null))));
-});
-export { Radio };
-var templateObject_1;

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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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, 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
-_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)));
-});