@ovotech/element-native 4.4.9 → 4.5.0

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

@@ -1,13 +1,8 @@
-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;
+const StyledSmall = styled.Text(({ theme: { core }, smallAndUp }) => css `
+    font-size: ${numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small'])};
+  `);
+export const Small = styledComponentWithBreakpoints(StyledSmall);

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

@@ -1,44 +1,43 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
 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 = {
+const 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 () {
+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);
         // 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);
+        }), 200, // number of repeats, don't want to set infinite cause it might affect performance
+        false);
         // cancel animation if component is unmounted
-        return function () { return cancelAnimation(rotation); };
+        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'] }) }) }));
+    return (_jsx(View, { style: [containerStyle], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Animated.View, { style: animatedStyles, children: _jsx(View, { style: rectStyles }) }) }));
 };

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

@@ -1,43 +1,17 @@
-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 }));
-        }) })));
+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 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 };
+const StyledStackItem = styled.View(({ theme: { core: { space }, }, spaceBetween, smallAndUp, mediumAndUp, largeAndUp, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    const breakpoints = { smallAndUp, mediumAndUp, largeAndUp };
     return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
 });
-var StackItem = styledComponentWithBreakpoints(StyledStackItem);
+const StackItem = styledComponentWithBreakpoints(StyledStackItem);
 export { Stack };

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

@@ -1,29 +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;
-};
-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(
+const 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  "], ["\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));
+({ 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 });
 };
-var templateObject_1;

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

@@ -1,5 +1,4 @@
 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  ");
-});
+export const Strong = styled.Text(({ theme: { core } }) => `
+    font-family: ${core.fontFamily.bodyBold.native};
+  `);

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

@@ -1,17 +1,16 @@
-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
+const StyledSubLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const 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));
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${semantic.message.secondary};
+      font-size: ${numToPx(fontSize)};
+    `;
 });
-var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
+const SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
 export { SubLabelText };
-var templateObject_1;

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

@@ -1,53 +1,67 @@
-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
+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(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 `
+            border-right-color: transparent;
+            border-right-width: 0;
+          `}
+    
+      ${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({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _jsx(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
+        : css `
+            border-left-color: transparent;
+            border-left-width: 0;
+          `}
+    `;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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 }) }));
+};

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

@@ -1,51 +1,21 @@
-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({ 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],
-                first: i === 0,
-                last: Children.count(validChildren) - 1 === i,
-                inline: inline,
-            });
-        }) })));
+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 templateObject_1;

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

@@ -1,38 +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;
-};
-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));
+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 templateObject_1;

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

@@ -1,29 +1,3 @@
-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';
@@ -32,20 +6,21 @@ 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];
+const TabsCard = styled(Card)(({ theme: { core, semantic }, inline }) => css `
+    padding: 0;
+    border: ${numToPx(core.borderWidth.small)} solid
+      ${inline ? semantic.border.differentiated : 'transparent'};
+    background: transparent;
+  `);
+export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inline, ...rest }) => {
+    const [activeTab, setActiveTab] = useState(defaultSelected);
     // 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 () {
+    const tabList = filterChildrenByType(children, TabList);
+    const tabPanels = filterChildrenByType(children, TabPanel);
+    const tabRefs = tabPanels.map(() => createRef());
+    const loaded = useRef(false);
+    useEffect(() => {
         if (loaded.current) {
             onSelected && onSelected(activeTab);
         }
@@ -53,20 +28,15 @@ export var Tabs = function (_a) {
             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,
-                });
-            })] })));
+    return (_jsxs(TabsCard, { inline: inline, ...rest, children: [tabList.map((child) => cloneElement(child, {
+                setActiveTab,
+                activeTab,
+                tabRefs,
+                fullWidth,
+                inline,
+            })), tabPanels
+                .filter((_, index) => index === activeTab)
+                .map((child, index) => cloneElement(child, {
+                hidden: activeTab !== index,
+            }))] }));
 };
-var templateObject_1;

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

@@ -1,30 +1,6 @@
-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, {}) })));
-});
+export const TextField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextInput, { ref: ref }) }));
+};