@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/esm/components/SkeletonText/SkeletonText.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 { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { P } from '../P';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+var StyledSkeletonText = styled.View(function (_a) {
+    var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(numToPx(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? numToPx(core.fontSize.body.large)
+        : numToPx(core.fontSize.body.small), ";\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 generatedLines = [];
+    var smallAndUp = useBreakpoint().smallAndUp;
+    for (var i = 1; i <= lines; i++) {
+        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
+    }
+    return (
+    // @ts-ignore styled components stuff
+    _jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
+};

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

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

package/dist/esm/components/Small/Small.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledSmall = styled.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small']));
+});
+export var Small = styledComponentWithBreakpoints(StyledSmall);
+var templateObject_1;

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

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

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+import { ThemeContext } from '../../styled.native';
+var semanticSizes = {
+    large: 65,
+    small: 32,
+};
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+export var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = useContext(ThemeContext).core;
+    var rotation = useSharedValue(0);
+    var animatedStyles = useAnimatedStyle(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = withRepeat(withTiming(-360, {
+            duration: 2000,
+            easing: Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return cancelAnimation(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return (_jsx(Animated.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Svg, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: _jsx(Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) }) }));
+};

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

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

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

@@ -0,0 +1,43 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children } from 'react';
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { getValidChildren, responsiveStyle, styledComponentWithBreakpoints, } from '../../utils';
+var Stack = function (_a) {
+    var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
+    var validChildren = getValidChildren(children);
+    return (_jsx(View, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
+            return index === 0 ? (child) : (_jsx(StackItem, { spaceBetween: spaceBetween, children: child }));
+        }) })));
+};
+var StyledStackItem = styled.View(function (_a) {
+    var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) { return numToPx(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,29 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var StyledStretch = styled.View(
+// full width on small, default width on tablet or if fullWidth is false
+function (_a) {
+    var smallAndUp = _a.smallAndUp, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, defaultWidth = _a.defaultWidth;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), !fullWidth || smallAndUp ? defaultWidth : '100%');
+});
+export var Stretch = function (props) {
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return _jsx(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+};
+var templateObject_1;

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

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

package/dist/esm/components/Strong/Strong.js

@@ -0,0 +1,5 @@
+import styled from '../../styled.native';
+export var Strong = styled.Text(function (_a) {
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+});

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

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

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

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledSubLabelText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.small), semantic.message.secondary, numToPx(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/Tabs/Tab.js

@@ -0,0 +1,53 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var TabText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, numToPx(core.space[3]), numToPx(core.space[2]));
+});
+var TabTouchable = 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, core = _f.core, semantic = _f.semantic, inline = _a.inline;
+    var borderWidth = numToPx(core.borderWidth.small);
+    var borderColor = semantic.border.differentiated;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      flex-grow: ", ";\n\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-bottom-color: ", ";\n\n      border-top-width: ", ";\n      border-top-style: solid;\n      border-top-color: ", ";\n\n      border-left-width: ", ";\n      border-left-style: solid;\n      border-left-color: ", ";\n\n      border-right-width: ", ";\n      border-right-style: solid;\n      border-right-color: ", ";\n\n      ", "\n\n      ", "\n    \n      ", "\n    \n      ", "\n    "], ["\n      flex-grow: ", ";\n\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-bottom-color: ", ";\n\n      border-top-width: ", ";\n      border-top-style: solid;\n      border-top-color: ", ";\n\n      border-left-width: ", ";\n      border-left-style: solid;\n      border-left-color: ", ";\n\n      border-right-width: ", ";\n      border-right-style: solid;\n      border-right-color: ", ";\n\n      ", "\n\n      ", "\n    \n      ", "\n    \n      ", "\n    "])), stretch ? 1 : 0, borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor, active
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.focus.outline, numToPx(core.borderWidth.medium)) : '', !inline
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+        ? ''
+        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        ? ''
+        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+});
+export var Tab = forwardRef(function (_a, ref) {
+    var active = _a.active, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(TabTouchable, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _jsx(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,51 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children, cloneElement } from 'react';
+import styled, { css } from '../../styled.native';
+import { callAll, getValidChildren } from '../../utils';
+var StyledTabList = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), numToPx(core.borderWidth.small));
+});
+export var TabList = function (_a) {
+    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
+    var validChildren = getValidChildren(children);
+    return (_jsx(StyledTabList, __assign({ accessibilityRole: "tablist" }, rest, { children: Children.map(validChildren, function (child, i) {
+            return cloneElement(child, {
+                onPress: callAll(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
+                active: activeTab === i,
+                fullWidth: fullWidth,
+                ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
+                first: i === 0,
+                last: Children.count(validChildren) - 1 === i,
+                inline: inline,
+            });
+        }) })));
+};
+var templateObject_1;

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

@@ -0,0 +1,38 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+var StyledView = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.border.differentiated);
+});
+export var TabPanel = function (_a) {
+    var rest = __rest(_a, []);
+    return _jsx(StyledView, __assign({}, rest));
+};
+var templateObject_1;

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

@@ -0,0 +1,72 @@
+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 { jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
+import styled, { css } from '../../styled.native';
+import { filterChildrenByType } from '../../utils';
+import { Card } from '../Card';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+var TabsCard = styled(Card)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), numToPx(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
+});
+export var Tabs = function (_a) {
+    var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
+    var _c = useState(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore there is no way to properly type it
+    var tabList = filterChildrenByType(children, TabList);
+    var tabPanels = filterChildrenByType(children, TabPanel);
+    var tabRefs = tabPanels.map(function () { return createRef(); });
+    var loaded = useRef(false);
+    useEffect(function () {
+        if (loaded.current) {
+            onSelected && onSelected(activeTab);
+        }
+        else {
+            loaded.current = true;
+        }
+    }, [onSelected, activeTab]);
+    return (_jsxs(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
+                return cloneElement(child, {
+                    setActiveTab: setActiveTab,
+                    activeTab: activeTab,
+                    tabRefs: tabRefs,
+                    fullWidth: fullWidth,
+                    inline: inline,
+                });
+            }), tabPanels
+                .filter(function (_, index) { return index === activeTab; })
+                .map(function (child, index) {
+                return cloneElement(child, {
+                    hidden: activeTab !== index,
+                });
+            })] })));
+};
+var templateObject_1;

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

@@ -0,0 +1,4 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/dist/esm/components/TextField/TextField.js

@@ -0,0 +1,30 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { TextInput } from '../TextInput';
+export var TextField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(TextInput, {}) })));
+});

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

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

package/dist/esm/components/TextGroup/TextGroup.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 { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+export var TextGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var validChildren = getValidChildren(children);
+    return (_jsx(View, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
+            if (!isValidElement(child)) {
+                return;
+            }
+            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
+            return cloneElement(child, {
+                style: style,
+            });
+        }) })));
+};

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

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

package/dist/esm/components/TextInput/TextInput.js

@@ -0,0 +1,16 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input';
+var TextInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
+export { TextInput };

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

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

package/dist/esm/components/TextLink/TextLink.js

@@ -0,0 +1,49 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { getText } from '../../utils/utils';
+import { Icon } from '../Icon';
+var StyledText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
+});
+var StyledIcon = styled(Icon)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), semantic.message.branded);
+});
+var TextLink = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
+    var updatedAccessibilityLabel = opensInNewWindow
+        ? "".concat(accessibilityLabel ? accessibilityLabel : getText(children), " (opens in new window)")
+        : accessibilityLabel;
+    return (_jsxs(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
+});
+export { TextLink };
+var templateObject_1, templateObject_2;

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

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

package/dist/esm/components/TextareaField/TextareaField.js

@@ -0,0 +1,30 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { TextareaInput } from '../TextareaInput';
+export var TextareaField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(TextareaInput, {}) })));
+});