@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/LazyFlatlist/index.js

@@ -1,2 +1,18 @@
-export * from "./LazyFlatlist";
-export * from "./useHasSeenItem";
+"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("./LazyFlatlist"), exports);
+__exportStar(require("./useHasSeenItem"), exports);

package/dist/elements/LazyFlatlist/useHasSeenItem.js

@@ -1,27 +1,34 @@
-import { useRef, useState } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHasSeenItem = void 0;
+var react_1 = require("react");
 // This is a custom hook that is used to determine if a user has seen an item in a list or not
-export const useHasSeenItem = ({ keyExtractor }) => {
-    const [viewedItems, setViewedItems] = useState(new Set());
-    const viewabilityConfig = useRef({
+var useHasSeenItem = function (_a) {
+    var keyExtractor = _a.keyExtractor;
+    var _b = (0, react_1.useState)(new Set()), viewedItems = _b[0], setViewedItems = _b[1];
+    var viewabilityConfig = (0, react_1.useRef)({
         // Percent of of the item that is visible for a partially occluded item to count as "viewable"
         itemVisiblePercentThreshold: 20,
         minimumViewTime: 300,
         waitForInteraction: false,
     }).current;
-    const viewedItemsRef = useRef(new Set()).current;
-    const onViewableItemsChanged = useRef(({ viewableItems }) => {
-        viewableItems.forEach(({ item }) => {
+    var viewedItemsRef = (0, react_1.useRef)(new Set()).current;
+    var onViewableItemsChanged = (0, react_1.useRef)(function (_a) {
+        var viewableItems = _a.viewableItems;
+        viewableItems.forEach(function (_a) {
+            var item = _a.item;
             viewedItemsRef.add(keyExtractor(item));
         });
         setViewedItems(new Set(viewedItemsRef));
     }).current;
-    const hasSeenItem = (item) => {
+    var hasSeenItem = function (item) {
         return viewedItems.has(keyExtractor(item));
     };
     return {
-        onViewableItemsChanged,
-        viewabilityConfig,
-        hasSeenItem,
-        viewedItems,
+        onViewableItemsChanged: onViewableItemsChanged,
+        viewabilityConfig: viewabilityConfig,
+        hasSeenItem: hasSeenItem,
+        viewedItems: viewedItems,
     };
 };
+exports.useHasSeenItem = useHasSeenItem;

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -1,117 +1,158 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from "react";
-import { getChildByType, getChildrenByType, getChildrenByTypeDeep, removeChildrenByType, } from "react-nanny";
-import { Keyboard, ScrollView, View } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Wrap } from "../../utils/Wrap";
-import { ArtsyKeyboardAvoidingView } from "../ArtsyKeyboardAvoidingView";
-import { BackButton, BackButtonWithBackground } from "../BackButton";
-import { Flex } from "../Flex";
-import { Spacer } from "../Spacer";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-const ScreenContext = createContext(null);
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegacyScreen = exports.FloatingHeader = exports.Header = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_nanny_1 = require("react-nanny");
+var react_native_1 = require("react-native");
+var react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var Wrap_1 = require("../../utils/Wrap");
+var ArtsyKeyboardAvoidingView_1 = require("../ArtsyKeyboardAvoidingView");
+var BackButton_1 = require("../BackButton");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var ScreenContext = (0, react_1.createContext)(null);
 function useScreenContext() {
-    const context = useContext(ScreenContext);
+    var context = (0, react_1.useContext)(ScreenContext);
     if (!context) {
         throw new Error("useScreenContext must be used within a Screen");
     }
     return context;
 }
-const ScreenWrapper = ({ children }) => {
-    const [options, setStateOptions] = useState({
+var ScreenWrapper = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)({
         handleTopSafeArea: true,
         bottomViewHeight: 0,
-    });
-    return (_jsx(ScreenContext.Provider, { value: {
-            options,
-            setOptions: (opts) => setStateOptions((prevOpts) => ({ ...prevOpts, ...opts })),
-        }, children: _jsx(ScreenRoot, { children: children }) }));
+    }), options = _b[0], setStateOptions = _b[1];
+    return ((0, jsx_runtime_1.jsx)(ScreenContext.Provider, { value: {
+            options: options,
+            setOptions: function (opts) { return setStateOptions(function (prevOpts) { return (__assign(__assign({}, prevOpts), opts)); }); },
+        }, children: (0, jsx_runtime_1.jsx)(ScreenRoot, { children: children }) }));
 };
-const ScreenRoot = ({ children }) => {
-    const header = getChildByType(children, LegacyScreen.Header);
-    const headerFloating = getChildByType(children, LegacyScreen.FloatingHeader);
-    const background = getChildByType(children, LegacyScreen.Background);
-    const bodyChildren = getChildrenByTypeDeep(children, LegacyScreen.Body);
-    return (_jsxs(Flex, { flex: 1, backgroundColor: "mono0", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+var ScreenRoot = function (_a) {
+    var children = _a.children;
+    var header = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Header);
+    var headerFloating = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.FloatingHeader);
+    var background = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Background);
+    var bodyChildren = (0, react_nanny_1.getChildrenByTypeDeep)(children, exports.LegacyScreen.Body);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "mono0", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
 };
-const useUpdateScreenContext = ({ header }) => {
-    const { setOptions } = useScreenContext();
-    useEffect(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
+var useUpdateScreenContext = function (_a) {
+    var header = _a.header;
+    var setOptions = useScreenContext().setOptions;
+    (0, react_1.useEffect)(function () { return void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [header]);
 };
-const NAVBAR_HEIGHT = 44;
-export const Header = ({ onBack, title, onSkip }) => {
+var NAVBAR_HEIGHT = 44;
+var Header = function (_a) {
+    var onBack = _a.onBack, title = _a.title, onSkip = _a.onSkip;
     useUpdateScreenContext({ header: "regular" });
-    const insets = useSafeAreaInsets();
-    return (_jsxs(Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [_jsx(Flex, { children: !!onBack && (_jsx(BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && _jsx(Text, { children: title }), !!onSkip && (_jsx(Touchable, { accessibilityRole: "button", haptic: "impactLight", onPress: onSkip, children: _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: "".concat(insets.top, "px"), height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: !!onBack && ((0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && (0, jsx_runtime_1.jsx)(Text_1.Text, { children: title }), !!onSkip && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", haptic: "impactLight", onPress: onSkip, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: "100%", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
 };
+exports.Header = Header;
 /**
  * @deprecated Use `Screen.Header` instead.
  */
-export const FloatingHeader = ({ onBack }) => {
+var FloatingHeader = function (_a) {
+    var onBack = _a.onBack;
     useUpdateScreenContext({ header: "floating" });
-    const insets = useSafeAreaInsets();
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     if (onBack) {
-        return (_jsx(Flex, { position: "absolute", top: insets.top, left: 0, right: 0, height: NAVBAR_HEIGHT, px: 1, flexDirection: "row", alignItems: "center", children: _jsx(BackButtonWithBackground, { onPress: onBack }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: insets.top, left: 0, right: 0, height: NAVBAR_HEIGHT, px: 1, flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }) }));
     }
     return null;
 };
-const SCREEN_HORIZONTAL_PADDING = 2;
-const Body = ({ scroll = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
-    const childrenExceptBottomView = removeChildrenByType(children, LegacyScreen.BottomView);
-    const bottomView = getChildrenByType(children, LegacyScreen.BottomView);
-    const { options } = useScreenContext();
-    const insets = useSafeAreaInsets();
-    const withTopSafeArea = options.handleTopSafeArea && !noTopSafe;
-    const withBottomSafeArea = !noBottomSafe;
-    return (_jsx(_Fragment, { children: _jsx(Flex, { flex: 1, mt: withTopSafeArea ? `${insets.top}px` : undefined, mb: withBottomSafeArea ? `${insets.bottom}px` : undefined, ...restFlexProps, children: _jsx(Wrap, { if: scroll, children: _jsxs(ArtsyKeyboardAvoidingView, { children: [_jsx(ScrollView, { keyboardShouldPersistTaps: "handled", contentInset: { bottom: options.bottomViewHeight - insets.bottom }, children: _jsx(Wrap.Content, { children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: childrenExceptBottomView }) }) }), bottomView] }) }) }) }));
+exports.FloatingHeader = FloatingHeader;
+var SCREEN_HORIZONTAL_PADDING = 2;
+var Body = function (_a) {
+    var _b = _a.scroll, scroll = _b === void 0 ? false : _b, _c = _a.noTopSafe, noTopSafe = _c === void 0 ? false : _c, _d = _a.noBottomSafe, noBottomSafe = _d === void 0 ? false : _d, _e = _a.fullwidth, fullwidth = _e === void 0 ? false : _e, children = _a.children, restFlexProps = __rest(_a, ["scroll", "noTopSafe", "noBottomSafe", "fullwidth", "children"]);
+    var childrenExceptBottomView = (0, react_nanny_1.removeChildrenByType)(children, exports.LegacyScreen.BottomView);
+    var bottomView = (0, react_nanny_1.getChildrenByType)(children, exports.LegacyScreen.BottomView);
+    var options = useScreenContext().options;
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    var withTopSafeArea = options.handleTopSafeArea && !noTopSafe;
+    var withBottomSafeArea = !noBottomSafe;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ flex: 1, mt: withTopSafeArea ? "".concat(insets.top, "px") : undefined, mb: withBottomSafeArea ? "".concat(insets.bottom, "px") : undefined }, restFlexProps, { children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: scroll, children: (0, jsx_runtime_1.jsxs)(ArtsyKeyboardAvoidingView_1.ArtsyKeyboardAvoidingView, { children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { keyboardShouldPersistTaps: "handled", contentInset: { bottom: options.bottomViewHeight - insets.bottom }, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: childrenExceptBottomView }) }) }), bottomView] }) }) })) }));
+};
+var Background = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
 };
-const Background = ({ children }) => (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
-const BottomView = ({ children }) => {
-    const { setOptions } = useScreenContext();
-    const insets = useSafeAreaInsets();
-    const containerRef = useRef(null);
-    const [keyboardShowing, setKeyboardShowing] = useState(false);
-    const [keyboardHeight, setKeyboardHeight] = useState(0);
-    useLayoutEffect(() => {
-        containerRef.current?.measureInWindow((_x, _y, _width, height) => {
+var BottomView = function (_a) {
+    var children = _a.children;
+    var setOptions = useScreenContext().setOptions;
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    var containerRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), keyboardShowing = _b[0], setKeyboardShowing = _b[1];
+    var _c = (0, react_1.useState)(0), keyboardHeight = _c[0], setKeyboardHeight = _c[1];
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
             if (height > 0) {
                 setOptions({ bottomViewHeight: height });
             }
         });
     }, [setOptions]);
-    useEffect(() => {
-        const listeners = [];
-        listeners.push(Keyboard.addListener("keyboardWillShow", // ios only event
-        (e) => {
+    (0, react_1.useEffect)(function () {
+        var listeners = [];
+        listeners.push(react_native_1.Keyboard.addListener("keyboardWillShow", // ios only event
+        function (e) {
             setKeyboardHeight(e.endCoordinates.height);
             setKeyboardShowing(true);
         }));
-        listeners.push(Keyboard.addListener("keyboardDidShow", // android event
-        (e) => {
+        listeners.push(react_native_1.Keyboard.addListener("keyboardDidShow", // android event
+        function (e) {
             setKeyboardHeight(e.endCoordinates.height);
             setKeyboardShowing(true);
         }));
-        listeners.push(Keyboard.addListener("keyboardWillHide", // ios only event
-        () => setKeyboardShowing(false)));
-        listeners.push(Keyboard.addListener("keyboardDidHide", // android event
-        () => setKeyboardShowing(false)));
-        return () => {
-            listeners.map((l) => l.remove());
+        listeners.push(react_native_1.Keyboard.addListener("keyboardWillHide", // ios only event
+        function () { return setKeyboardShowing(false); }));
+        listeners.push(react_native_1.Keyboard.addListener("keyboardDidHide", // android event
+        function () { return setKeyboardShowing(false); }));
+        return function () {
+            listeners.map(function (l) { return l.remove(); });
         };
     }, []);
-    return (_jsxs(View, { ref: containerRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: containerRef, style: {
             position: "absolute",
             bottom: keyboardShowing ? keyboardHeight - insets.bottom : 0,
             left: 0,
             right: 0,
-        }, children: [_jsx(LinearGradient, { colors: ["rgba(255,255,255,0)", "rgba(255,255,255,1)"], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
+        }, children: [(0, jsx_runtime_1.jsx)(react_native_linear_gradient_1.default, { colors: ["rgba(255,255,255,0)", "rgba(255,255,255,1)"], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
                     width: "100%",
                     height: 30,
-                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "mono0", children: children }), keyboardShowing ? null : _jsx(SafeBottomPadding, {})] }));
+                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "mono0", children: children }), keyboardShowing ? null : (0, jsx_runtime_1.jsx)(SafeBottomPadding, {})] }));
 };
 /**
  * Only use with `<Screen.Body fullwidth>`.
@@ -119,7 +160,7 @@ const BottomView = ({ children }) => {
  * One use case might be if you need to put an image background or something in the body,
  * but you also need some content with the right padding.
  */
-const BodyXPadding = (props) => (_jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, ...props }));
+var BodyXPadding = function (props) { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ px: SCREEN_HORIZONTAL_PADDING }, props))); };
 /**
  * If there is a bottom safe area, this will render nothing.
  * If there is no bottom safe area, this will render a small padding.
@@ -127,19 +168,19 @@ const BodyXPadding = (props) => (_jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, ...
  * This is useful for texts/buttons that are at the bottom, and with safe area they seem like they
  * have enough space underneath, but with no safe area they look stuck at the bottom.
  */
-const SafeBottomPadding = () => {
-    const insets = useSafeAreaInsets();
+var SafeBottomPadding = function () {
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     if (insets.bottom > 0) {
         return null;
     }
-    return _jsx(Spacer, { y: 2 });
+    return (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 });
 };
-export const LegacyScreen = Object.assign(ScreenWrapper, {
-    Body,
-    Header,
-    FloatingHeader,
-    Background,
-    BottomView,
-    BodyXPadding,
-    SafeBottomPadding,
+exports.LegacyScreen = Object.assign(ScreenWrapper, {
+    Body: Body,
+    Header: exports.Header,
+    FloatingHeader: exports.FloatingHeader,
+    Background: Background,
+    BottomView: BottomView,
+    BodyXPadding: BodyXPadding,
+    SafeBottomPadding: SafeBottomPadding,
 });

package/dist/elements/LegacyScreen/index.js

@@ -1 +1,17 @@
-export * from "./LegacyScreen";
+"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("./LegacyScreen"), exports);

package/dist/elements/LegacyTabs/ContentTabs.js

@@ -1,22 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TabBarContainer } from "./TabBarContainer";
-import { Tab } from "../LegacyTabs";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TabBarContainer_1 = require("./TabBarContainer");
+var LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
  */
-export const ContentTabs = ({ onTabPress, activeTab, tabs }) => {
-    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
-    return (_jsx(TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label }, index) => {
-            return (_jsx(Tab, { label: label, active: index === activeTab, onLayout: (e) => {
-                    const layout = e.nativeEvent.layout;
-                    setTabLayouts((layouts) => {
-                        const result = layouts.slice(0);
+var ContentTabs = function (_a) {
+    var onTabPress = _a.onTabPress, activeTab = _a.activeTab, tabs = _a.tabs;
+    var _b = (0, react_1.useState)(tabs.map(function () { return null; })), tabLayouts = _b[0], setTabLayouts = _b[1];
+    return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(function (_a, index) {
+            var label = _a.label;
+            return ((0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, active: index === activeTab, onLayout: function (e) {
+                    var layout = e.nativeEvent.layout;
+                    setTabLayouts(function (layouts) {
+                        var result = layouts.slice(0);
                         result[index] = layout;
                         return result;
                     });
-                }, onPress: () => {
+                }, onPress: function () {
                     onTabPress(label, index);
                 } }, index));
         }) }));
 };
+exports.ContentTabs = ContentTabs;

package/dist/elements/LegacyTabs/NavigationalTabs.js

@@ -1,25 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TabBarContainer } from "./TabBarContainer";
-import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
-import { Box } from "../Box";
-import { Tab } from "../LegacyTabs";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationalTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TabBarContainer_1 = require("./TabBarContainer");
+var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+var Box_1 = require("../Box");
+var LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label centered on the tab
  */
-export const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
-    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
-    const screenWidth = useScreenDimensions().width;
-    const tabWidth = screenWidth / tabs.length;
-    return (_jsx(TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, superscript }, index) => {
-            return (_jsx(Box, { minWidth: tabWidth, children: _jsx(Tab, { label: label, superscript: superscript, onPress: () => onTabPress(label, index), active: activeTab === index, onLayout: (e) => {
-                        const layout = e.nativeEvent.layout;
-                        setTabLayouts((layouts) => {
-                            const result = layouts.slice(0);
+var NavigationalTabs = function (_a) {
+    var onTabPress = _a.onTabPress, activeTab = _a.activeTab, tabs = _a.tabs;
+    var _b = (0, react_1.useState)(tabs.map(function () { return null; })), tabLayouts = _b[0], setTabLayouts = _b[1];
+    var screenWidth = (0, useScreenDimensions_1.useScreenDimensions)().width;
+    var tabWidth = screenWidth / tabs.length;
+    return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(function (_a, index) {
+            var label = _a.label, superscript = _a.superscript;
+            return ((0, jsx_runtime_1.jsx)(Box_1.Box, { minWidth: tabWidth, children: (0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, superscript: superscript, onPress: function () { return onTabPress(label, index); }, active: activeTab === index, onLayout: function (e) {
+                        var layout = e.nativeEvent.layout;
+                        setTabLayouts(function (layouts) {
+                            var result = layouts.slice(0);
                             result[index] = layout;
                             return result;
                         });
                     } }) }, label + index));
         }) }));
 };
+exports.NavigationalTabs = NavigationalTabs;

package/dist/elements/LegacyTabs/StepTabs.js

@@ -1,34 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckmarkIcon, ChevronSmallRightIcon } from "@artsy/icons/native";
-import { useState } from "react";
-import { TouchableOpacity } from "react-native";
-import { TabBarContainer } from "./TabBarContainer";
-import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
-import { Box } from "../Box";
-import { Tab } from "../LegacyTabs";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var TabBarContainer_1 = require("./TabBarContainer");
+var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
+var Box_1 = require("../Box");
+var LegacyTabs_1 = require("../LegacyTabs");
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label and chevron evenly spaced
  */
-export const StepTabs = ({ onTabPress, activeTab, tabs }) => {
-    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
-    const tabWidth = useScreenDimensions().width / tabs.length;
-    const onTabSelect = (label, index) => {
+var StepTabs = function (_a) {
+    var onTabPress = _a.onTabPress, activeTab = _a.activeTab, tabs = _a.tabs;
+    var _b = (0, react_1.useState)(tabs.map(function () { return null; })), tabLayouts = _b[0], setTabLayouts = _b[1];
+    var tabWidth = (0, useScreenDimensions_1.useScreenDimensions)().width / tabs.length;
+    var onTabSelect = function (label, index) {
         if (index > 0 && !tabs[index - 1].completed) {
             return;
         }
         onTabPress(label, index);
     };
-    return (_jsx(TabBarContainer, { scrollEnabled: false, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, completed }, index) => {
-            return (_jsx(TouchableOpacity, { accessibilityRole: "button", onPress: () => onTabSelect(label, index), children: _jsxs(Box, { width: tabWidth, justifyContent: "space-between", flexDirection: "row", alignItems: "center", onLayout: (e) => {
-                        const layout = e.nativeEvent.layout;
-                        setTabLayouts((layouts) => {
-                            const result = layouts.slice(0);
+    return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: false, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(function (_a, index) {
+            var label = _a.label, completed = _a.completed;
+            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityRole: "button", onPress: function () { return onTabSelect(label, index); }, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { width: tabWidth, justifyContent: "space-between", flexDirection: "row", alignItems: "center", onLayout: function (e) {
+                        var layout = e.nativeEvent.layout;
+                        setTabLayouts(function (layouts) {
+                            var result = layouts.slice(0);
                             result[index] = layout;
                             return result;
                         });
-                    }, children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
+                    }, children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, onPress: function () { return onTabSelect(label, index); }, active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: function () {
                                         // noop
-                                    } }), !!completed && _jsx(CheckmarkIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronSmallRightIcon, { fill: "mono60", height: 10, width: 10 })] }) }, label + index));
+                                    } }), !!completed && (0, jsx_runtime_1.jsx)(native_1.CheckmarkIcon, { fill: "green100", height: 15, width: 15 })] }), (0, jsx_runtime_1.jsx)(native_1.ChevronSmallRightIcon, { fill: "mono60", height: 10, width: 10 })] }) }, label + index));
         }) }));
 };
+exports.StepTabs = StepTabs;

package/dist/elements/LegacyTabs/Tab.js

@@ -1,20 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, View } from "react-native";
-import { useColor } from "../../utils/hooks";
-import { Text } from "../Text";
-export const TabV3 = ({ label, superscript, active, onLayout, onPress, style }) => {
-    const color = useColor();
-    return (_jsx(Pressable, { accessibilityRole: "button", onPress: onPress, children: ({ pressed }) => (_jsxs(View, { onLayout: onLayout, style: {
-                alignItems: "center",
-                justifyContent: "center",
-                paddingHorizontal: 15,
-                paddingVertical: 10,
-                flexDirection: "row",
-                ...style,
-            }, children: [_jsx(Text, { fontSize: 16, color: active ? color("mono100") : pressed ? color("blue100") : color("mono60"), style: {
-                        textDecorationLine: pressed ? "underline" : "none",
-                    }, children: label }), !!superscript && (_jsx(Text, { fontSize: 12, color: color("blue100"), style: {
-                        textDecorationLine: pressed ? "underline" : "none",
-                        top: -3,
-                    }, children: superscript }))] })) }));
+"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.TabV3 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../utils/hooks");
+var Text_1 = require("../Text");
+var TabV3 = function (_a) {
+    var label = _a.label, superscript = _a.superscript, active = _a.active, onLayout = _a.onLayout, onPress = _a.onPress, style = _a.style;
+    var color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", onPress: onPress, children: function (_a) {
+            var pressed = _a.pressed;
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: onLayout, style: __assign({ alignItems: "center", justifyContent: "center", paddingHorizontal: 15, paddingVertical: 10, flexDirection: "row" }, style), children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: 16, color: active ? color("mono100") : pressed ? color("blue100") : color("mono60"), style: {
+                            textDecorationLine: pressed ? "underline" : "none",
+                        }, children: label }), !!superscript && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: 12, color: color("blue100"), style: {
+                            textDecorationLine: pressed ? "underline" : "none",
+                            top: -3,
+                        }, children: superscript }))] }));
+        } }));
+};
+exports.TabV3 = TabV3;