@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Tabs/Tab.js

@@ -1,79 +1,67 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var TabText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.fontSize.body.small), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]));
-});
-var TabTouchable = styled_native_1.default.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 = (0, element_core_1.numToPx)(core.borderWidth.small);
-    var borderColor = semantic.border.differentiated;
-    return (0, styled_native_1.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
-        ? (0, styled_native_1.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, (0, element_core_1.numToPx)(core.borderWidth.medium)) : '', !inline
-        ? (0, styled_native_1.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
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+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
         ? ''
-        : (0, styled_native_1.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
         ? ''
-        : (0, styled_native_1.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          "]))));
+        : css `
+            border-left-color: transparent;
+            border-left-width: 0;
+          `}
+    `;
 });
-exports.Tab = (0, react_1.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 = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(TabTouchable, __assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: (0, jsx_runtime_1.jsx)(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
-});
-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/components/Tabs/TabList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ViewProps } from 'react-native';
 type TabListProps = ViewProps & {
     fullWidth?: boolean;

package/dist/components/Tabs/TabList.js

@@ -1,78 +1,21 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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 __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabList = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledTabList = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small));
-});
-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 = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(StyledTabList, __assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: react_1.Children.map(validChildren, function (child, i) {
-            return (0, react_1.cloneElement)(child, {
-                onPress: (0, utils_1.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: react_1.Children.count(validChildren) - 1 === i,
-                inline: inline,
-            });
-        }) })));
-};
-exports.TabList = TabList;
-var templateObject_1;

package/dist/components/Tabs/TabPanel.js

@@ -1,65 +1,13 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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 __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var StyledView = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated);
-});
-var TabPanel = function (_a) {
-    var rest = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(StyledView, __assign({}, rest));
-};
-exports.TabPanel = TabPanel;
-var templateObject_1;

package/dist/components/Tabs/Tabs.js

@@ -1,77 +1,26 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var Card_1 = require("../Card");
-var TabList_1 = require("./TabList");
-var TabPanel_1 = require("./TabPanel");
-var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
-});
-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 = (0, react_1.useState)(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
+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';
+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 = (0, utils_1.filterChildrenByType)(children, TabList_1.TabList);
-    var tabPanels = (0, utils_1.filterChildrenByType)(children, TabPanel_1.TabPanel);
-    var tabRefs = tabPanels.map(function () { return (0, react_1.createRef)(); });
-    var loaded = (0, react_1.useRef)(false);
-    (0, react_1.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);
         }
@@ -79,21 +28,15 @@ var Tabs = function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return ((0, jsx_runtime_1.jsxs)(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
-                return (0, react_1.cloneElement)(child, {
-                    setActiveTab: setActiveTab,
-                    activeTab: activeTab,
-                    tabRefs: tabRefs,
-                    fullWidth: fullWidth,
-                    inline: inline,
-                });
-            }), tabPanels
-                .filter(function (_, index) { return index === activeTab; })
-                .map(function (child, index) {
-                return (0, react_1.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,
+            }))] }));
 };
-exports.Tabs = Tabs;
-var templateObject_1;

package/dist/components/Tabs/index.js

@@ -1,11 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = void 0;
-var Tabs_1 = require("./Tabs");
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
-var Tab_1 = require("./Tab");
-Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
-var TabList_1 = require("./TabList");
-Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
-var TabPanel_1 = require("./TabPanel");
-Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabPanel_1.TabPanel; } });
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/dist/components/TextField/TextField.d.ts

@@ -1,10 +1,5 @@
-/// <reference types="react" />
-import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TextField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & import("react").RefAttributes<NativeTextInput>>;
+import { InputProps } from '../Input/Input';
+type Props = Omit<FieldProps, 'children'> & InputProps;
+export declare const TextField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextField/TextField.js

@@ -1,33 +1,6 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { TextInput } from '../TextInput';
+export const TextField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextInput, { ref: ref }) }));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Field_1 = require("../Field");
-var TextInput_1 = require("../TextInput");
-exports.TextField = (0, react_1.forwardRef)(function (_a, ref) {
-    var rest = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref, children: (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, {}) })));
-});

package/dist/components/TextField/index.js

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

package/dist/components/TextGroup/TextGroup.js

@@ -1,43 +1,20 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextGroup = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var utils_1 = require("../../utils");
-var TextGroup = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    var validChildren = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({}, rest, { children: react_1.Children.map(validChildren, function (child, index) {
-            if (!(0, react_1.isValidElement)(child)) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+export const TextGroup = ({ children, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => {
+            if (!isValidElement(child)) {
                 return;
             }
-            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
-            return (0, react_1.cloneElement)(child, {
-                style: style,
+            const typedChild = child;
+            const newStyles = {
+                ...(index === 0 ? { marginTop: 0 } : {}),
+                marginBottom: 0,
+            };
+            return cloneElement(typedChild, {
+                style: [typedChild.props.style, newStyles],
             });
-        }) })));
+        }) }));
 };
-exports.TextGroup = TextGroup;

package/dist/components/TextGroup/index.js

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

package/dist/components/TextInput/TextInput.d.ts

@@ -1,10 +1,8 @@
-/// <reference types="react" />
+import { Ref } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const TextInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & import("react").RefAttributes<RNTextInput>>;
+import { InputProps } from '../Input/Input';
+type Props = InputProps & {
+    ref?: Ref<RNTextInput>;
+};
+declare const TextInput: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { TextInput };