@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Tabs/TabScrollView.js

@@ -1,19 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs } from "react-native-collapsible-tab-view";
-import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
-import { useSpace } from "../../utils/hooks/useSpace";
-export const TabScrollView = (props) => {
-    useListenForTabContentScroll();
-    const space = useSpace();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.ScrollView
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabScrollView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+var TabScrollView = function (props) {
+    var _a;
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    var space = (0, useSpace_1.useSpace)();
+    var contentContainerStyle = ((_a = props.contentContainerStyle) !== null && _a !== void 0 ? _a : {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.ScrollView
     // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
     // @ts-ignore
-    , { 
+    , __assign({ 
         // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
         // @ts-ignore
-        accessibilityComponentType: undefined, accessibilityTraits: undefined, contentContainerStyle: {
-            marginHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...props }));
+        accessibilityComponentType: undefined, accessibilityTraits: undefined, contentContainerStyle: __assign({ marginHorizontal: space(2) }, contentContainerStyle) }, props)));
 };
+exports.TabScrollView = TabScrollView;

package/dist/elements/Tabs/Tabs.js

@@ -1,26 +1,29 @@
-import { Tabs as BaseTabs, useAnimatedTabIndex, useCurrentTabScrollY, useFocusedTab, useHeaderMeasurements, } from "react-native-collapsible-tab-view";
-import { SubTabBar } from "./SubTabBar";
-import { TabFlashList } from "./TabFlashList";
-import { TabFlatList } from "./TabFlatList";
-import { TabMasonry } from "./TabMasonry";
-import { TabScrollView } from "./TabScrollView";
-import { TabsContainer } from "./TabsContainer";
-import { TabsWithHeader } from "./TabsWithHeader";
-import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
-export const Tabs = Object.assign(TabsContainer, {
-    FlatList: TabFlatList,
-    FlashList: TabFlashList,
-    Masonry: TabMasonry,
-    Lazy: BaseTabs.Lazy,
-    ScrollView: TabScrollView,
-    SectionList: BaseTabs.SectionList,
-    SubTabBar,
-    Tab: BaseTabs.Tab,
-    TabsWithHeader,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var SubTabBar_1 = require("./SubTabBar");
+var TabFlashList_1 = require("./TabFlashList");
+var TabFlatList_1 = require("./TabFlatList");
+var TabMasonry_1 = require("./TabMasonry");
+var TabScrollView_1 = require("./TabScrollView");
+var TabsContainer_1 = require("./TabsContainer");
+var TabsWithHeader_1 = require("./TabsWithHeader");
+var useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
+exports.Tabs = Object.assign(TabsContainer_1.TabsContainer, {
+    FlatList: TabFlatList_1.TabFlatList,
+    FlashList: TabFlashList_1.TabFlashList,
+    Masonry: TabMasonry_1.TabMasonry,
+    Lazy: react_native_collapsible_tab_view_1.Tabs.Lazy,
+    ScrollView: TabScrollView_1.TabScrollView,
+    SectionList: react_native_collapsible_tab_view_1.Tabs.SectionList,
+    SubTabBar: SubTabBar_1.SubTabBar,
+    Tab: react_native_collapsible_tab_view_1.Tabs.Tab,
+    TabsWithHeader: TabsWithHeader_1.TabsWithHeader,
     // Hooks
-    useAnimatedTabIndex,
-    useCurrentTabScrollY,
-    useListenForTabContentScroll,
-    useFocusedTab,
-    useHeaderMeasurements,
+    useAnimatedTabIndex: react_native_collapsible_tab_view_1.useAnimatedTabIndex,
+    useCurrentTabScrollY: react_native_collapsible_tab_view_1.useCurrentTabScrollY,
+    useListenForTabContentScroll: useListenForTabContentScroll_1.useListenForTabContentScroll,
+    useFocusedTab: react_native_collapsible_tab_view_1.useFocusedTab,
+    useHeaderMeasurements: react_native_collapsible_tab_view_1.useHeaderMeasurements,
 });

package/dist/elements/Tabs/Tabs.stories.js

@@ -1,74 +1,121 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, } from "react-native-reanimated";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { SubTabBar } from "./SubTabBar";
-import { Tabs } from "./Tabs";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { Screen } from "../Screen";
-import { Text } from "../Text";
-export default {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Playground = exports.MasonryTabsWithHeader = exports.TabsWithHeader = exports.TabsWithAnimatedHeader = exports.TabsWithIndicator = exports.SimpleTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var SubTabBar_1 = require("./SubTabBar");
+var Tabs_1 = require("./Tabs");
+var Button_1 = require("../Button");
+var Flex_1 = require("../Flex");
+var Screen_1 = require("../Screen");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Tabs",
 };
-export const SimpleTabs = () => (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] }));
-export const TabsWithIndicator = () => (_jsxs(Tabs, { indicators: [{ tabName: "tab1", Component: () => _jsx(Text, { textAlign: "right", children: "hi" }) }], children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] }));
-TabsWithIndicator.story = {
+var SimpleTabs = function () { return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })); };
+exports.SimpleTabs = SimpleTabs;
+var TabsWithIndicator = function () { return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: function () { return (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }); } }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })); };
+exports.TabsWithIndicator = TabsWithIndicator;
+exports.TabsWithIndicator.story = {
     name: "Tabs with Indicator",
 };
-export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] }));
-TabsWithAnimatedHeader.story = {
+var TabsWithAnimatedHeader = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) }) })] }) })] })); };
+exports.TabsWithAnimatedHeader = TabsWithAnimatedHeader;
+exports.TabsWithAnimatedHeader.story = {
     name: "Tabs with AnimatedHeader",
 };
-export const TabsWithHeader = () => {
-    return (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
+var TabsWithHeader = function () {
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: function () { return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pointerEvents: "none", p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Info" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "More Info" })] })); }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) })] }));
 };
-TabsWithHeader.story = {
+exports.TabsWithHeader = TabsWithHeader;
+exports.TabsWithHeader.story = {
     name: "Tabs with header",
 };
-export const MasonryTabsWithHeader = () => {
-    return (_jsxs(Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.Masonry, { data: Array.from({ length: 20 }), numColumns: 2, contentContainerStyle: {
+var MasonryTabsWithHeader = function () {
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Masonry, { data: Array.from({ length: 20 }), numColumns: 2, contentContainerStyle: {
                         paddingVertical: 10,
                     }, ListHeaderComponentStyle: {
                         zIndex: 1000,
-                    }, ListHeaderComponent: ListHeaderComponent, renderItem: ({ index }) => _jsx(MasonryArtworkItem, { index: index }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.FlatList, { contentContainerStyle: {
+                    }, ListHeaderComponent: ListHeaderComponent, renderItem: function (_a) {
+                        var index = _a.index;
+                        return (0, jsx_runtime_1.jsx)(MasonryArtworkItem, { index: index });
+                    } }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.FlatList, { contentContainerStyle: {
                         paddingHorizontal: 0,
-                    }, data: Array.from({ length: 20 }), renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) })] }));
+                    }, data: Array.from({ length: 20 }), renderItem: function () { return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }); } }) })] }));
 };
-const ListHeaderComponent = () => {
-    return (_jsx(SubTabBar, { children: _jsx(ListHeaderComponentContent, {}) }));
+exports.MasonryTabsWithHeader = MasonryTabsWithHeader;
+var ListHeaderComponent = function () {
+    return ((0, jsx_runtime_1.jsx)(SubTabBar_1.SubTabBar, { children: (0, jsx_runtime_1.jsx)(ListHeaderComponentContent, {}) }));
 };
-const ListHeaderComponentContent = () => {
-    return (_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", mx: 2, px: 2, py: 1, backgroundColor: "mono10", children: [_jsx(Flex, { children: _jsx(Text, { children: "Create Alert" }) }), _jsx(Flex, { children: _jsx(Button, { children: "Sort & Filter" }) })] }));
+var ListHeaderComponentContent = function () {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", mx: 2, px: 2, py: 1, backgroundColor: "mono10", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Create Alert" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Sort & Filter" }) })] }));
 };
-const MasonryArtworkItem = ({ index }) => {
-    return (_jsxs(Flex, { px: 1, children: [_jsx(Flex, { style: {
+var MasonryArtworkItem = function (_a) {
+    var index = _a.index;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
                     height: 200 + Math.random() * 200,
                     backgroundColor: randomHexColor(),
                     width: "100%",
-                } }), _jsx(Flex, { py: 1, backgroundColor: "mono0", mb: 2, children: _jsxs(Text, { variant: "sm-display", fontWeight: "medium", children: ["Artwork ", index + 1] }) })] }));
+                } }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { py: 1, backgroundColor: "mono0", mb: 2, children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: "sm-display", fontWeight: "medium", children: ["Artwork ", index + 1] }) })] }));
 };
-const randomHexColor = () => {
-    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+var randomHexColor = function () {
+    return "#".concat(Math.floor(Math.random() * 16777215).toString(16));
 };
-MasonryTabsWithHeader.story = {
+exports.MasonryTabsWithHeader.story = {
     name: "Masonry Tabs with header",
 };
-export const Playground = () => {
-    const scrollY = useSharedValue(0);
-    const scrollHandler = useAnimatedScrollHandler({
-        onScroll: (event) => {
+var Playground = function () {
+    var scrollY = (0, react_native_reanimated_1.useSharedValue)(0);
+    var scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: function (event) {
             scrollY.value = event.contentOffset.y;
         },
     });
-    return (_jsx(Flex, { flex: 1, children: _jsx(SafeAreaView, { edges: ["top"], children: _jsxs(Animated.ScrollView, { onScroll: scrollHandler, scrollEventThrottle: 16, children: [_jsx(LongContent, {}), _jsx(StickyView, { scrollY: scrollY })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { edges: ["top"], children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.ScrollView, { onScroll: scrollHandler, scrollEventThrottle: 16, children: [(0, jsx_runtime_1.jsx)(LongContent, {}), (0, jsx_runtime_1.jsx)(StickyView, { scrollY: scrollY })] }) }) }));
 };
-const StickyView = ({ scrollY }) => {
-    const animatedStyle = useAnimatedStyle(() => {
+exports.Playground = Playground;
+var StickyView = function (_a) {
+    var scrollY = _a.scrollY;
+    var animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
             transform: [{ translateY: scrollY.value }],
         };
     });
-    return (_jsx(Animated.View, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
             {
                 height: 50,
                 width: "100%",
@@ -78,14 +125,14 @@ const StickyView = ({ scrollY }) => {
                 alignItems: "center",
             },
             animatedStyle,
-        ], children: _jsx(Text, { children: "Sticky View" }) }));
+        ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Sticky View" }) }));
 };
-const randomColor = (index) => {
-    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+var randomColor = function () {
+    return "#".concat(Math.floor(Math.random() * 16777215).toString(16));
 };
-const LongContent = () => {
-    return (_jsx(Flex, { children: Array.from({ length: 20 }).map((_, index) => (_jsx(Flex, { style: { height: 100, backgroundColor: randomColor(index) } }, index))) }));
+var LongContent = function () {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: Array.from({ length: 20 }).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { height: 100, backgroundColor: randomColor() } }, index)); }) }));
 };
-Playground.story = {
+exports.Playground.story = {
     name: "Playground",
 };

package/dist/elements/Tabs/TabsContainer.js

@@ -1,66 +1,90 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { Platform } from "react-native";
-import { Tabs as BaseTabs, MaterialTabBar, MaterialTabItem, } from "react-native-collapsible-tab-view";
-import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
-import { useColor } from "../../utils/hooks/useColor";
-import { useSpace } from "../../utils/hooks/useSpace";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Pill } from "../Pill";
-const TAB_BAR_HEIGHT = 50;
-const PillTabItem = ({ focusedTab, ...props }) => {
-    return (_jsx(Pill, { selected: props.name === focusedTab, onPress: () => {
-            props.onTabPress?.(props.name);
+"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.TabsContainer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var constants_1 = require("../../constants");
+var useColor_1 = require("../../utils/hooks/useColor");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Pill_1 = require("../Pill");
+var TAB_BAR_HEIGHT = 50;
+var PillTabItem = function (_a) {
+    var focusedTab = _a.focusedTab, props = __rest(_a, ["focusedTab"]);
+    return ((0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: props.name === focusedTab, onPress: function () {
+            var _a;
+            (_a = props.onTabPress) === null || _a === void 0 ? void 0 : _a.call(props, props.name);
         }, variant: "link", children: props.name }, props.name));
 };
-const DefaultTabItem = (props) => {
-    const Indicator = props.indicators.find((indicator) => {
+var DefaultTabItem = function (props) {
+    var Indicator = props.indicators.find(function (indicator) {
         return indicator.tabName === props.name;
     });
-    return (_jsxs(Box, { flex: 1, children: [_jsx(Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && _jsx(Indicator.Component, { ...props }) }), _jsx(MaterialTabItem, { pressOpacity: DEFAULT_ACTIVE_OPACITY, ...props })] }));
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", width: "100%", children: !!(Indicator === null || Indicator === void 0 ? void 0 : Indicator.Component) && (0, jsx_runtime_1.jsx)(Indicator.Component, __assign({}, props)) }), (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabItem, __assign({ pressOpacity: constants_1.DEFAULT_ACTIVE_OPACITY }, props))] }));
 };
-export const TabsContainer = ({ children, indicators = [], initialTabName, onTabPress, renderHeader, stickyTabBarComponent, tabScrollEnabled = false, variant = "tabs", ...tabContainerProps }) => {
-    const space = useSpace();
-    const color = useColor();
-    const [focusedTabState, setFocusedTabState] = useState(initialTabName);
-    const isIOS = Platform.OS === "ios";
-    return (_jsx(BaseTabs.Container, { renderHeader: renderHeader, headerContainerStyle: {
+var TabsContainer = function (_a) {
+    var children = _a.children, _b = _a.indicators, indicators = _b === void 0 ? [] : _b, initialTabName = _a.initialTabName, onTabPress = _a.onTabPress, renderHeader = _a.renderHeader, stickyTabBarComponent = _a.stickyTabBarComponent, _c = _a.tabScrollEnabled, tabScrollEnabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "tabs" : _d, tabContainerProps = __rest(_a, ["children", "indicators", "initialTabName", "onTabPress", "renderHeader", "stickyTabBarComponent", "tabScrollEnabled", "variant"]);
+    var space = (0, useSpace_1.useSpace)();
+    var color = (0, useColor_1.useColor)();
+    var _e = (0, react_1.useState)(initialTabName), focusedTabState = _e[0], setFocusedTabState = _e[1];
+    var isIOS = react_native_1.Platform.OS === "ios";
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, __assign({ renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
             shadowRadius: 0,
             elevation: 0,
             backgroundColor: color("background"),
         }, initialTabName: initialTabName, containerStyle: {
             paddingTop: space(2),
-        }, renderTabBar: (tabBarProps) => {
+        }, renderTabBar: function (tabBarProps) {
             if (variant === "pills") {
-                return (_jsxs(Flex, { flexDirection: "row", gap: 2, alignItems: "center", py: 1, children: [_jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: true, TabItemComponent: (props) => (_jsx(PillTabItem, { ...props, onTabPress: (tab) => {
-                                    onTabPress?.(tab);
+                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 2, alignItems: "center", py: 1, children: [(0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabBar, __assign({}, tabBarProps, { scrollEnabled: true, TabItemComponent: function (props) { return ((0, jsx_runtime_1.jsx)(PillTabItem, __assign({}, props, { onTabPress: function (tab) {
+                                    onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(tab);
                                     tabBarProps.onTabPress(tab);
                                     setFocusedTabState(tab);
-                                }, focusedTab: focusedTabState || tabBarProps.focusedTab.value })), indicatorStyle: {
+                                }, focusedTab: focusedTabState || tabBarProps.focusedTab.value }))); }, indicatorStyle: {
                                 backgroundColor: "transparent",
                             }, contentContainerStyle: {
                                 gap: space(1),
                                 paddingHorizontal: space(2),
-                            } }), stickyTabBarComponent] }));
+                            } })), stickyTabBarComponent] }));
             }
-            return (_jsx(_Fragment, { children: _jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabBar, __assign({}, tabBarProps, { scrollEnabled: tabScrollEnabled, onTabPress: function (tab) {
                         tabBarProps.onTabPress(tab);
-                        onTabPress?.(tab);
+                        onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(tab);
                     }, style: {
                         height: TAB_BAR_HEIGHT,
                         borderBottomWidth: 1,
                         borderColor: color("mono30"),
-                    }, TabItemComponent: (props) => _jsx(DefaultTabItem, { ...props, indicators: indicators }), contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: {
-                        backgroundColor: color("onBackground"),
-                        height: 1,
-                        // on android this line breaks the active indicator and it is not visible
-                        ...(isIOS && { bottom: -1 }),
-                    }, tabStyle: {
+                    }, TabItemComponent: function (props) { return (0, jsx_runtime_1.jsx)(DefaultTabItem, __assign({}, props, { indicators: indicators })); }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: __assign({ backgroundColor: color("onBackground"), height: 1 }, (isIOS && { bottom: -1 })), tabStyle: {
                         // resets the default padding 10 from the lib
                         // to prevent linebreaks on the tab titles
                         paddingHorizontal: 0,
-                    } }) }));
-        }, ...tabContainerProps, children: children }));
+                    } })) }));
+        } }, tabContainerProps, { children: children })));
 };
+exports.TabsContainer = TabsContainer;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -1,17 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TabsContainer } from "./TabsContainer";
-import { Flex } from "../Flex";
-import { Screen } from "../Screen";
-import { Text } from "../Text";
-export const TabsWithHeader = ({ headerProps = {}, hideScreen = false, disableKeyboardAvoidance = false, title, ...rest }) => {
+"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.TabsWithHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TabsContainer_1 = require("./TabsContainer");
+var Flex_1 = require("../Flex");
+var Screen_1 = require("../Screen");
+var Text_1 = require("../Text");
+var TabsWithHeader = function (_a) {
+    var _b = _a.headerProps, headerProps = _b === void 0 ? {} : _b, _c = _a.hideScreen, hideScreen = _c === void 0 ? false : _c, _d = _a.disableKeyboardAvoidance, disableKeyboardAvoidance = _d === void 0 ? false : _d, title = _a.title, rest = __rest(_a, ["headerProps", "hideScreen", "disableKeyboardAvoidance", "title"]);
     if (hideScreen) {
-        return _jsx(Content, { title: title, ...rest });
+        return (0, jsx_runtime_1.jsx)(Content, __assign({ title: title }, rest));
     }
-    return (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: title, ...headerProps }), _jsx(Screen.Body, { fullwidth: true, disableKeyboardAvoidance: disableKeyboardAvoidance, children: _jsx(Content, { title: title, ...rest }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, __assign({ title: title }, headerProps)), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, disableKeyboardAvoidance: disableKeyboardAvoidance, children: (0, jsx_runtime_1.jsx)(Content, __assign({ title: title }, rest)) })] }));
 };
-const Content = ({ BelowTitleHeaderComponent, children, showLargeHeaderText = true, title, ...rest }) => {
-    const showTitle = showLargeHeaderText && !!title;
-    return (_jsx(TabsContainer, { ...rest, renderHeader: () => {
-            return (_jsxs(_Fragment, { children: [!!showTitle && (_jsx(Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: _jsx(Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && _jsx(BelowTitleHeaderComponent, {})] }));
-        }, children: children }));
+exports.TabsWithHeader = TabsWithHeader;
+var Content = function (_a) {
+    var BelowTitleHeaderComponent = _a.BelowTitleHeaderComponent, children = _a.children, _b = _a.showLargeHeaderText, showLargeHeaderText = _b === void 0 ? true : _b, title = _a.title, rest = __rest(_a, ["BelowTitleHeaderComponent", "children", "showLargeHeaderText", "title"]);
+    var showTitle = showLargeHeaderText && !!title;
+    return ((0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, __assign({}, rest, { renderHeader: function () {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
+        }, children: children })));
 };

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -1,12 +1,16 @@
-import { useCurrentTabScrollY } from "react-native-collapsible-tab-view";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { useScreenScrollContext } from "../../Screen/ScreenScrollContext";
-export const useListenForTabContentScroll = () => {
-    const { currentScrollYAnimated } = useScreenScrollContext();
-    const currentTabScrollY = useCurrentTabScrollY();
-    useAnimatedReaction(() => currentTabScrollY.value, 
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListenForTabContentScroll = void 0;
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var react_native_reanimated_1 = require("react-native-reanimated");
+var ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
+var useListenForTabContentScroll = function () {
+    var currentScrollYAnimated = (0, ScreenScrollContext_1.useScreenScrollContext)().currentScrollYAnimated;
+    var currentTabScrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
+    (0, react_native_reanimated_1.useAnimatedReaction)(function () { return currentTabScrollY.value; }, 
     // TODO: improve the conditions here
-    (current) => {
-        currentScrollYAnimated?.set(current);
+    function (current) {
+        currentScrollYAnimated === null || currentScrollYAnimated === void 0 ? void 0 : currentScrollYAnimated.set(current);
     });
 };
+exports.useListenForTabContentScroll = useListenForTabContentScroll;

package/dist/elements/Tabs/index.js

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

package/dist/elements/Text/LinkText.js

@@ -1,3 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from "./Text";
-export const LinkText = ({ style, ...props }) => (_jsx(Text, { accessibilityRole: "link", color: "mono100", ...props, style: [style, { textDecorationLine: "underline" }] }));
+"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.LinkText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("./Text");
+var LinkText = function (_a) {
+    var style = _a.style, props = __rest(_a, ["style"]);
+    return ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ accessibilityRole: "link", color: "mono100" }, props, { style: [style, { textDecorationLine: "underline" }] })));
+};
+exports.LinkText = LinkText;