@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

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

@@ -1,12 +1,38 @@
+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 { pxToNumber } from '@ovotech/element-core';
 import styled from '../../styled.native';
 import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonCircleWrapper = styled.View(({ size }) => `width: ${size}; max-width: 100%;`);
-const StyledSkeletonCircle = styled.View(({ theme: { core }, size }) => `
-    background-color: ${core.color.neutral.light};
-    height: 0;
-    padding-bottom: 100%;
-    border-radius: ${pxToNumber(size) / 2}px;
-  `);
-export const SkeletonCircle = ({ size = '120px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, { size: size, ...rest, children: _jsx(StyledSkeletonCircle, { size: size }) }) }));
+var StyledSkeletonCircleWrapper = styled.View(function (_a) {
+    var width = _a.width;
+    return "width: ".concat(width, "; max-width: 100%;");
+});
+var StyledSkeletonCircle = styled.View(function (_a) {
+    var theme = _a.theme, width = _a.width;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(width) / 2, "px;\n  ");
+});
+export var SkeletonCircle = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["width"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, __assign({ width: width }, rest, { children: _jsx(StyledSkeletonCircle, { width: width }) })) }));
+};

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

@@ -1,9 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
-import { Heading3 } from '../Heading3';
+import { Heading3 } from '../Heading';
 import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonHeading = styled.View(({ theme: { core }, size }) => `
-    background-color: ${core.color.neutral.light};
-    width: ${size};
-  `);
-export const SkeletonHeading = ({ size = '70%', headingComponent: Heading = Heading3, ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, { "aria-hidden": "true", size: size, as: Heading, ...rest, children: "\u00A0" }) }));
+var StyledSkeletonHeading = styled.View(function (_a) {
+    var theme = _a.theme, size = _a.size;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\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 (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
+};

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

@@ -1,27 +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';
-const StyledSkeletonText = styled.View(({ theme: { core }, aboveSmallBreakpoint, short }) => {
-    return `
-    background-color: ${core.color.neutral.light};
-    margin-bottom: ${numToPx(core.space[2])};
-    height: ${aboveSmallBreakpoint
-        ? numToPx(core.fontSize.body.large)
-        : numToPx(core.fontSize.body.small)};
-
-    ${short ? 'width: 50%' : ''};
-  `;
+var StyledSkeletonText = styled.View(function (_a) {
+    var theme = _a.theme, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    margin-bottom: ").concat(numToPx(theme.space[200]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? numToPx(theme.font.size.md.mediaQuery.lg)
+        : numToPx(theme.font.size.md.mediaQuery.sm), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
-export const SkeletonText = ({ lines = 1, ...rest }) => {
-    const generatedLines = [];
-    const { smallAndUp } = useBreakpoint();
-    for (let i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, `line-${i}`));
+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, { as: SkeletonAnimation, ...rest, children: generatedLines }));
+    _jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
 };

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

@@ -1,43 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { View } from 'react-native';
+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';
-const semanticSizes = {
+var semanticSizes = {
     large: 65,
     small: 32,
 };
-export const Spinner = ({ inverted = false, size = 'small', accessibilityLabel = 'Loading', }) => {
-    const { core } = useContext(ThemeContext);
-    const rotation = useSharedValue(0);
-    const rectSize = size in semanticSizes
-        ? semanticSizes[size]
-        : size;
-    const halfRectSize = rectSize / 2;
-    const containerStyle = useMemo(() => ({
-        width: rectSize,
-        height: rectSize,
-    }), [rectSize]);
-    const rectStyles = useMemo(() => ({
-        width: rectSize,
-        height: rectSize,
-        backgroundColor: core.color.brand[inverted ? 'white' : 'ovo'],
-        transform: [{ rotate: '-15deg' }],
-    }), [rectSize]);
-    const animatedStyles = useAnimatedStyle(() => ({
-        transform: [{ rotateY: `${rotation.value}deg` }],
-        transformOrigin: [halfRectSize, halfRectSize, 0],
-    }));
-    useEffect(() => {
-        cancelAnimation(rotation);
+// 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 theme = useContext(ThemeContext);
+    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, // number of repeats, don't want to set infinite cause it might affect performance
-        false);
+        }), 200);
         // cancel animation if component is unmounted
-        return () => cancelAnimation(rotation);
+        return function () { return cancelAnimation(rotation); };
     }, []);
-    return (_jsx(View, { style: [containerStyle], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Animated.View, { style: animatedStyles, children: _jsx(View, { style: rectStyles }) }) }));
+    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: theme.color.brand[inverted ? 'onBrand' : 'brand'] }) }) }));
 };

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

@@ -1,17 +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 { Children } from 'react';
 import { View } from 'react-native';
 import styled from '../../styled.native';
 import { getValidChildren, responsiveStyle, styledComponentWithBreakpoints, } from '../../utils';
-const Stack = ({ children, spaceBetween, ...rest }) => {
-    const validChildren = getValidChildren(children);
-    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => index === 0 ? (child) : (_jsx(StackItem, { spaceBetween: spaceBetween, children: child }))) }));
+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 }));
+        }) })));
 };
-const StyledStackItem = styled.View(({ theme: { core: { space }, }, spaceBetween, smallAndUp, mediumAndUp, largeAndUp, }) => {
-    const formatter = (spaceKey) => numToPx(space[spaceKey]);
-    const breakpoints = { smallAndUp, mediumAndUp, largeAndUp };
+var StyledStackItem = styled.View(function (_a) {
+    var theme = _a.theme, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) {
+        return numToPx(theme.space[String(spaceKey * 100)]);
+    };
+    var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
 });
-const StackItem = styledComponentWithBreakpoints(StyledStackItem);
+var StackItem = styledComponentWithBreakpoints(StyledStackItem);
 export { Stack };

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

@@ -1,13 +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';
-const StyledStretch = styled.View(
+var StyledStretch = styled.View(
 // full width on small, default width on tablet or if fullWidth is false
-({ smallAndUp, fullWidth = true, defaultWidth }) => css `
-    width: ${!fullWidth || smallAndUp ? defaultWidth : '100%'};
-    ${defaultWidth && !fullWidth ? 'max-width: 100%;' : ''}
-  `);
-export const Stretch = (props) => {
-    const { smallAndUp } = useBreakpoint();
-    return _jsx(StyledStretch, { smallAndUp: smallAndUp, ...props });
+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  "], ["\n    width: ", ";\n    ", "\n  "])), !fullWidth || smallAndUp ? defaultWidth : '100%', defaultWidth && !fullWidth ? 'max-width: 100%;' : '');
+});
+export var Stretch = function (props) {
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return _jsx(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
 };
+var templateObject_1;

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

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

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

@@ -1,16 +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';
-const StyledSubLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
-    const fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return css `
-      font-family: ${core.fontFamily.body.native};
-      line-height: ${numToPx(core.lineHeight.body.small)};
-      color: ${semantic.message.secondary};
-      font-size: ${numToPx(fontSize)};
-    `;
+var StyledSubLabelText = styled.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    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  "])), theme.native.font.family.book, numToPx(theme.font.lineHeight.md.mediaQuery.sm), theme.color.surface.onSurfaceVariant, numToPx(fontSize));
 });
-const SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
+var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
 export { SubLabelText };
+var templateObject_1;

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

@@ -1,67 +1,48 @@
+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';
-const TabText = styled.Text(({ theme: { core, semantic }, active = false }) => css `
-    font-size: ${numToPx(core.fontSize.body.small)};
-    font-family: ${core.fontFamily.bodyBold.native};
-    line-height: ${numToPx(core.lineHeight.body.small)};
-    color: ${active ? semantic.focus.outline : semantic.message.base};
-    text-align: center;
-    padding: ${numToPx(core.space[3])} ${numToPx(core.space[2])};
-  `);
-const TabTouchable = styled.TouchableOpacity(({ active = false, first = false, last = false, stretch = false, theme: { core, semantic }, inline, }) => {
-    const borderWidth = numToPx(core.borderWidth.small);
-    const borderColor = semantic.border.differentiated;
-    return css `
-      flex-grow: ${stretch ? 1 : 0};
-
-      border-bottom-width: ${borderWidth};
-      border-bottom-style: solid;
-      border-bottom-color: ${borderColor};
-
-      border-top-width: ${borderWidth};
-      border-top-style: solid;
-      border-top-color: ${borderColor};
-
-      border-left-width: ${borderWidth};
-      border-left-style: solid;
-      border-left-color: ${borderColor};
-
-      border-right-width: ${borderWidth};
-      border-right-style: solid;
-      border-right-color: ${borderColor};
-
-      ${active
-        ? css `
-            border-bottom-color: ${semantic.focus.outline};
-            border-bottom-width: ${numToPx(core.borderWidth.medium)};
-          `
-        : ''}
-
-      ${!inline
-        ? css `
-            border-top-color: transparent;
-            border-top-width: 0;
-          `
-        : ''}
-    
-      ${last && inline
-        ? ''
-        : css `
-            border-right-color: transparent;
-            border-right-width: 0;
-          `}
-    
-      ${first && inline
-        ? ''
-        : css `
-            border-left-color: transparent;
-            border-left-width: 0;
-          `}
-    `;
+var TabText = styled.Text(function (_a) {
+    var theme = _a.theme, _b = _a.active, active = _b === void 0 ? false : _b;
+    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(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery.sm), active
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurface, numToPx(theme.space[300]), numToPx(theme.space[200]));
 });
-export const Tab = ({ active, fullWidth = false, children, ref, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(TabTouchable, { accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref, ...rest, children: _jsx(TabText, { active: active, ...breakpoints, children: children }) }));
-};
+var TabTouchable = styled.TouchableOpacity(function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.stretch, stretch = _c === void 0 ? false : _c, theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-grow: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n\n    ", "\n  "], ["\n    flex-grow: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n\n    ", "\n  "])), stretch ? 1 : 0, numToPx(theme.border.width.sm), theme.color.surface.border, 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        "])), theme.color.outline.outer, numToPx(theme.border.width.md)) : '');
+});
+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({ accessible: true, 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;

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

@@ -1,21 +1,48 @@
+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';
-const StyledTabList = styled.View(({ theme: { core } }) => css `
-    flex-direction: row;
-    margin: -${numToPx(core.borderWidth.small)};
-  `);
-export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }) => {
-    const validChildren = getValidChildren(children);
-    return (_jsx(StyledTabList, { accessible: true, accessibilityRole: "tablist", ...rest, children: Children.map(validChildren, (child, i) => cloneElement(child, {
-            onPress: callAll(() => setActiveTab && setActiveTab(i), child.props.onPress),
-            active: activeTab === i,
-            fullWidth,
-            ref: tabRefs?.[i],
-            first: i === 0,
-            last: Children.count(validChildren) - 1 === i,
-            inline,
-        })) }));
+var StyledTabList = styled.View(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), numToPx(theme.border.width.sm));
+});
+export var TabList = function (_a) {
+    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth"]);
+    var validChildren = getValidChildren(children);
+    return (_jsx(StyledTabList, __assign({ accessible: true, 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],
+            });
+        }) })));
 };
+var templateObject_1;

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

@@ -1,13 +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';
-const StyledView = styled.View(({ theme: { core, semantic } }) => css `
-    padding: ${numToPx(core.space[4])};
-    border-top-width: ${numToPx(core.borderWidth.small)};
-    border-style: solid;
-    border-color: ${semantic.border.differentiated};
-    z-index: -1;
-  `);
-export const TabPanel = ({ ...rest }) => {
-    return _jsx(StyledView, { ...rest });
+var StyledView = styled.View(function (_a) {
+    var theme = _a.theme;
+    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(theme.space[400]), numToPx(theme.border.width.sm), theme.color.input.borderDim);
+});
+export var TabPanel = function (_a) {
+    var rest = __rest(_a, []);
+    return _jsx(StyledView, __assign({}, rest));
 };
+var templateObject_1;