@ovotech/element-native 2.0.0 → 2.0.2

package/dist/components/Radio/Radio.js

@@ -0,0 +1,114 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var HintText_1 = require("../HintText");
+var LabelText_1 = require("../LabelText");
+var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio;
+    var radioSize = (0, utils_1.pxToNumber)(radio.size);
+    var gap = (0, utils_1.pxToNumber)(radio.gap);
+    return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
+});
+var StyledRadioInput = styled_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio, invalid = _a.invalid, checked = _a.checked;
+    var touchSize = (0, utils_1.pxToNumber)(radio.touchSize);
+    var radioSize = (0, utils_1.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_native_1.default.View(function (_a) {
+    var radio = _a.theme.radio, checked = _a.checked;
+    var radioSize = (0, utils_1.pxToNumber)(radio.size);
+    var dotSize = (0, utils_1.pxToNumber)(radio.dotSize);
+    var borderWidth = (0, utils_1.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_1.default.createElement(StyledRadioInputWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledRadioInput, { invalid: invalid, checked: checked },
+            react_1.default.createElement(StyledRadioInputDot, { checked: checked }))));
+};
+var RadioLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
+    var space = _a.theme.space;
+    return "\n    padding-top: ".concat(space[3], ";\n  ");
+});
+var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var Radio = (0, react_1.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_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
+        // @ts-ignore
+        invalid: invalid }, rest),
+        react_1.default.createElement(StyledWrapper, null,
+            react_1.default.createElement(Input, { checked: checked, invalid: invalid }),
+            react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
+                react_1.default.createElement(RadioLabelText, null, label),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))));
+});
+exports.Radio = Radio;
+var templateObject_1;

package/dist/components/Radio/RadioField.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactNode } from 'react';
+declare type Props = PropsWithChildren<{
+    label: ReactNode;
+    value: string;
+    onValueChange: (newValue: string | undefined) => void;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+}>;
+declare const RadioField: ({ label, hint, error, children, optional, value, onValueChange, ...rest }: Props) => JSX.Element;
+export { RadioField };

package/dist/components/Radio/RadioField.js

@@ -0,0 +1,78 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var utils_1 = require("../../utils");
+var ErrorText_1 = require("../ErrorText");
+var FormGroup_1 = require("../FormGroup");
+var HintText_1 = require("../HintText");
+var LabelText_1 = require("../LabelText");
+var Stack_1 = require("../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_1.default.createElement(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError }),
+        react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
+            react_1.default.createElement(react_native_1.View, null,
+                react_1.default.createElement(LabelText_1.LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null,
+                error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null),
+            react_1.default.createElement(react_native_1.View, { accessibilityRole: "radiogroup" }, react_1.Children.map(children, function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                    checked: child.props.checked != null
+                        ? child.props.checked
+                        : value && (value === child.props.value ? true : false),
+                    onPress: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                });
+            })))));
+};
+exports.RadioField = RadioField;

package/dist/components/Radio/index.d.ts

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

package/dist/components/Radio/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = exports.Radio = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var RadioField_1 = require("./RadioField");
+Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });

package/dist/components/SkeletonLoading/Skeleton.d.ts

@@ -0,0 +1 @@
+export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, {}, never>;

package/dist/components/SkeletonLoading/Skeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var styled_native_1 = __importDefault(require("../../styled.native"));
+exports.Skeleton = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/dist/components/SkeletonLoading/SkeletonCTA.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+};
+export declare const SkeletonCTA: ({ size, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonCTA = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.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  ");
+});
+var SkeletonCTA = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
+    return (react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)));
+};
+exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+};
+export declare const SkeletonCircle: ({ size, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -0,0 +1,46 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonCircle = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var size = _a.size;
+    return "width: ".concat(size, "; max-width: 100%;");
+});
+var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.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((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
+});
+var SkeletonCircle = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
+    return (react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+        react_1.default.createElement(StyledSkeletonCircle, { size: size })));
+};
+exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    size?: string;
+    headingComponent?: ComponentType<any>;
+};
+export declare const SkeletonHeading: ({ size, headingComponent: Heading, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonHeading = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var Heading_1 = require("../Heading");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
+});
+var SkeletonHeading = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
+    return (react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+};
+exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare type Props = ViewProps & {
+    lines?: number;
+};
+export declare const SkeletonText: ({ lines, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonText = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.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((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+});
+var SkeletonText = function (_a) {
+    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var generatedLines = [];
+    for (var i = 1; i <= lines; i++) {
+        generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
+    }
+    return (react_1.default.createElement(Text_1.P, __assign({ as: react_native_1.View }, rest), generatedLines));
+};
+exports.SkeletonText = SkeletonText;

package/dist/components/SkeletonLoading/index.d.ts

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

package/dist/components/SkeletonLoading/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Skeleton"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { Theme } from '../../theme';
+declare type SpaceKey = keyof Theme['space'];
+declare type Props = ViewProps & {
+    spaceBetween: SpaceKey | SpaceKey[];
+    children: ReactNode;
+};
+declare const Stack: ({ children, spaceBetween, ...rest }: Props) => JSX.Element;
+export { Stack };

package/dist/components/Stack/Stack.js

@@ -0,0 +1,75 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Stack = function (_a) {
+    var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
+    var filteredChildren = [];
+    react_1.Children.forEach(children, function (child) {
+        if (child != null) {
+            filteredChildren.push(child);
+        }
+    });
+    return (react_1.default.createElement(react_native_1.View, __assign({}, rest), react_1.Children.map(filteredChildren, function (child, index) {
+        return index === 0 ? (child) : (react_1.default.createElement(StackItem, { spaceBetween: spaceBetween }, child));
+    })));
+};
+exports.Stack = Stack;
+var StyledStackItem = styled_native_1.default.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 (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);
+});
+var StackItem = (0, utils_1.styledComponentWithBreakpoints)(StyledStackItem);

package/dist/components/Stack/index.d.ts

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

package/dist/components/Stack/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });

package/dist/components/Stretch/Stretch.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export declare const Stretch: (props: ViewProps & {
+    fullWidth: 'always' | 'never' | 'small';
+    defaultWidth: string;
+    children: ReactNode;
+}) => JSX.Element;

package/dist/components/Stretch/Stretch.js

@@ -0,0 +1,31 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stretch = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var StyledStretch = styled_native_1.default.View(function (_a) {
+    var smallAndUp = _a.smallAndUp, fullWidth = _a.fullWidth, defaultWidth = _a.defaultWidth;
+    return (smallAndUp && fullWidth === 'small') || fullWidth === 'never'
+        ? "width: ".concat(defaultWidth, ";")
+        : "width: 100%;";
+});
+var Stretch = function (props) {
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    return react_1.default.createElement(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+};
+exports.Stretch = Stretch;

package/dist/components/Stretch/index.d.ts

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

package/dist/components/Stretch/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Stretch"), exports);