@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -1,112 +1,104 @@
-"use strict";
-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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_nanny_1 = require("react-nanny");
-const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const Wrap_1 = require("../../utils/Wrap");
-const ArtsyKeyboardAvoidingView_1 = require("../ArtsyKeyboardAvoidingView");
-const BackButton_1 = require("../BackButton");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const ScreenContext = (0, react_1.createContext)(null);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { getChildByType, getChildrenByType, getChildrenByTypeDeep, removeChildrenByType, } from "react-nanny";
+import { Keyboard, ScrollView } 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);
 function useScreenContext() {
-    const context = (0, react_1.useContext)(ScreenContext);
+    const context = useContext(ScreenContext);
     if (!context) {
         throw new Error("useScreenContext must be used within a Screen");
     }
     return context;
 }
 const ScreenWrapper = ({ children }) => {
-    const [options, setStateOptions] = (0, react_1.useState)({
+    const [options, setStateOptions] = useState({
         handleTopSafeArea: true,
         bottomViewHeight: 0,
     });
-    return ((0, jsx_runtime_1.jsx)(ScreenContext.Provider, { value: {
+    return (_jsx(ScreenContext.Provider, { value: {
             options,
             setOptions: (opts) => setStateOptions((prevOpts) => ({ ...prevOpts, ...opts })),
-        }, children: (0, jsx_runtime_1.jsx)(ScreenRoot, { children: children }) }));
+        }, children: _jsx(ScreenRoot, { children: children }) }));
 };
 const ScreenRoot = ({ children }) => {
-    const header = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Header);
-    const headerFloating = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.FloatingHeader);
-    const background = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Background);
-    const bodyChildren = (0, react_nanny_1.getChildrenByTypeDeep)(children, exports.LegacyScreen.Body);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "white100", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+    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: "white100", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
 };
 const useUpdateScreenContext = ({ header }) => {
     const { setOptions } = useScreenContext();
-    (0, react_1.useEffect)(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
+    useEffect(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [header]);
 };
 const NAVBAR_HEIGHT = 44;
-const Header = ({ onBack, title, onSkip }) => {
+export const Header = ({ onBack, title, onSkip }) => {
     useUpdateScreenContext({ header: "regular" });
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: `${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, { 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" }) }) }))] }));
+    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, { haptic: "impactLight", onPress: onSkip, children: _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
 };
-exports.Header = Header;
 /**
  * @deprecated Use `Screen.Header` instead.
  */
-const FloatingHeader = ({ onBack }) => {
+export const FloatingHeader = ({ onBack }) => {
     useUpdateScreenContext({ header: "floating" });
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const insets = useSafeAreaInsets();
     if (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 (_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 null;
 };
-exports.FloatingHeader = FloatingHeader;
 const SCREEN_HORIZONTAL_PADDING = 2;
 const Body = ({ scroll = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
-    const childrenExceptBottomView = (0, react_nanny_1.removeChildrenByType)(children, exports.LegacyScreen.BottomView);
-    const bottomView = (0, react_nanny_1.getChildrenByType)(children, exports.LegacyScreen.BottomView);
+    const childrenExceptBottomView = removeChildrenByType(children, LegacyScreen.BottomView);
+    const bottomView = getChildrenByType(children, LegacyScreen.BottomView);
     const { options } = useScreenContext();
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const insets = useSafeAreaInsets();
     const withTopSafeArea = options.handleTopSafeArea && !noTopSafe;
     const withBottomSafeArea = !noBottomSafe;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, mt: withTopSafeArea ? `${insets.top}px` : undefined, mb: withBottomSafeArea ? `${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] }) }) }) }));
+    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] }) }) }) }));
 };
-const Background = ({ children }) => ((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 = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const [keyboardShowing, setKeyboardShowing] = (0, react_1.useState)(false);
-    const [keyboardHeight, setKeyboardHeight] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
+    const insets = useSafeAreaInsets();
+    const [keyboardShowing, setKeyboardShowing] = useState(false);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(() => {
         const listeners = [];
-        listeners.push(react_native_1.Keyboard.addListener("keyboardWillShow", // ios only event
+        listeners.push(Keyboard.addListener("keyboardWillShow", // ios only event
         (e) => {
             setKeyboardHeight(e.endCoordinates.height);
             setKeyboardShowing(true);
         }));
-        listeners.push(react_native_1.Keyboard.addListener("keyboardDidShow", // android event
+        listeners.push(Keyboard.addListener("keyboardDidShow", // android event
         (e) => {
             setKeyboardHeight(e.endCoordinates.height);
             setKeyboardShowing(true);
         }));
-        listeners.push(react_native_1.Keyboard.addListener("keyboardWillHide", // ios only event
+        listeners.push(Keyboard.addListener("keyboardWillHide", // ios only event
         () => setKeyboardShowing(false)));
-        listeners.push(react_native_1.Keyboard.addListener("keyboardDidHide", // android event
+        listeners.push(Keyboard.addListener("keyboardDidHide", // android event
         () => setKeyboardShowing(false)));
         return () => {
             listeners.map((l) => l.remove());
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", bottom: keyboardShowing ? keyboardHeight - insets.bottom : 0, left: 0, right: 0, onLayout: (evt) => void setOptions({ bottomViewHeight: evt.nativeEvent.layout.height }), 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: {
+    return (_jsxs(Flex, { position: "absolute", bottom: keyboardShowing ? keyboardHeight - insets.bottom : 0, left: 0, right: 0, onLayout: (evt) => void setOptions({ bottomViewHeight: evt.nativeEvent.layout.height }), 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: {
                     width: "100%",
                     height: 30,
-                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "white100", children: children }), keyboardShowing ? null : (0, jsx_runtime_1.jsx)(SafeBottomPadding, {})] }));
+                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "white100", children: children }), keyboardShowing ? null : _jsx(SafeBottomPadding, {})] }));
 };
 /**
  * Only use with `<Screen.Body fullwidth>`.
@@ -114,7 +106,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) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREEN_HORIZONTAL_PADDING, ...props }));
+const BodyXPadding = (props) => (_jsx(Flex, { 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.
@@ -123,16 +115,16 @@ const BodyXPadding = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: SCREE
  * have enough space underneath, but with no safe area they look stuck at the bottom.
  */
 const SafeBottomPadding = () => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const insets = useSafeAreaInsets();
     if (insets.bottom > 0) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 });
+    return _jsx(Spacer, { y: 2 });
 };
-exports.LegacyScreen = Object.assign(ScreenWrapper, {
+export const LegacyScreen = Object.assign(ScreenWrapper, {
     Body,
-    Header: exports.Header,
-    FloatingHeader: exports.FloatingHeader,
+    Header,
+    FloatingHeader,
     Background,
     BottomView,
     BodyXPadding,

package/dist/elements/LegacyScreen/index.js

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

package/dist/elements/LegacyTabs/ContentTabs.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TabBarContainer_1 = require("./TabBarContainer");
-const LegacyTabs_1 = require("../LegacyTabs");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TabBarContainer } from "./TabBarContainer";
+import { Tab } from "../LegacyTabs";
 /**
  * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
  */
-const ContentTabs = ({ onTabPress, activeTab, tabs }) => {
-    const [tabLayouts, setTabLayouts] = (0, react_1.useState)(tabs.map(() => null));
-    return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label }, index) => {
-            return ((0, jsx_runtime_1.jsx)(LegacyTabs_1.Tab, { label: label, active: index === activeTab, onLayout: (e) => {
+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);
@@ -23,4 +20,3 @@ const ContentTabs = ({ onTabPress, activeTab, tabs }) => {
                 } }, index));
         }) }));
 };
-exports.ContentTabs = ContentTabs;

package/dist/elements/LegacyTabs/NavigationalTabs.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationalTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TabBarContainer_1 = require("./TabBarContainer");
-const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
-const Box_1 = require("../Box");
-const LegacyTabs_1 = require("../LegacyTabs");
+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";
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label centered on the tab
  */
-const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
-    const [tabLayouts, setTabLayouts] = (0, react_1.useState)(tabs.map(() => null));
-    const screenWidth = (0, useScreenDimensions_1.useScreenDimensions)().width;
+export const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
+    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
+    const screenWidth = useScreenDimensions().width;
     const tabWidth = screenWidth / tabs.length;
-    return ((0, jsx_runtime_1.jsx)(TabBarContainer_1.TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, superscript }, index) => {
-            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: () => onTabPress(label, index), active: activeTab === index, onLayout: (e) => {
+    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);
@@ -26,4 +23,3 @@ const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
                     } }) }, label + index));
         }) }));
 };
-exports.NavigationalTabs = NavigationalTabs;

package/dist/elements/LegacyTabs/StepTabs.js

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

package/dist/elements/LegacyTabs/Tab.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabV3 = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const hooks_1 = require("../../utils/hooks");
-const Text_1 = require("../Text");
-const TabV3 = ({ label, superscript, active, onLayout, onPress, style }) => {
-    const color = (0, hooks_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: onLayout, style: {
+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, { onPress: onPress, children: ({ pressed }) => (_jsxs(View, { onLayout: onLayout, style: {
                 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("black100") : pressed ? color("blue100") : color("black60"), style: {
+            }, children: [_jsx(Text, { fontSize: 16, color: active ? color("black100") : pressed ? color("blue100") : color("black60"), style: {
                         textDecorationLine: pressed ? "underline" : "none",
-                    }, children: label }), !!superscript && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: 12, color: color("blue100"), style: {
+                    }, children: label }), !!superscript && (_jsx(Text, { fontSize: 12, color: color("blue100"), style: {
                         textDecorationLine: pressed ? "underline" : "none",
                         top: -3,
                     }, children: superscript }))] })) }));
 };
-exports.TabV3 = TabV3;

package/dist/elements/LegacyTabs/TabBarContainer.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveTabBorder = exports.spring = exports.TabBarContainer = exports.TAB_BAR_HEIGHT = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const hooks_1 = require("../../utils/hooks");
-const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
-const Box_1 = require("../Box");
-exports.TAB_BAR_HEIGHT = 48;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compact } from "lodash";
+import { useEffect, useRef } from "react";
+import { Animated, ScrollView, View } from "react-native";
+import { useColor } from "../../utils/hooks";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Box } from "../Box";
+export const TAB_BAR_HEIGHT = 48;
 /**
  * Wraps the respective tabs. Based on StickyTabPageTabBar
  * Usage: ```
  * <TabBarContainer>{props.tabs.map((tab) => <Tab {...tab} />)}</TabContainer>
  * ```
  */
-const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLayouts, }) => {
-    const color = (0, hooks_1.useColor)();
-    const screen = (0, useScreenDimensions_1.useScreenDimensions)();
+export const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLayouts, }) => {
+    const color = useColor();
+    const screen = useScreenDimensions();
     const allTabLayoutsArePresent = tabLayouts.every((l) => l);
-    const scrollViewRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const scrollViewRef = useRef(null);
+    useEffect(() => {
         if (allTabLayoutsArePresent) {
             // attempt to center the active tab
             let left = 0;
@@ -32,30 +29,28 @@ const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLayouts,
             scrollViewRef.current?.scrollTo({ x: scrollLeft });
         }
     }, [activeTabIndex]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { scrollEnabled: scrollEnabled, ref: scrollViewRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { minWidth: "100%" }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+    return (_jsx(Box, { children: _jsxs(ScrollView, { scrollEnabled: scrollEnabled, ref: scrollViewRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { minWidth: "100%" }, children: [_jsx(View, { style: {
                         position: "absolute",
                         bottom: 0,
                         left: 0,
                         right: 0,
                         borderBottomWidth: 1,
                         borderBottomColor: color("black30"),
-                    } }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    } }), _jsxs(View, { style: {
                         flex: 1,
                         minWidth: "100%",
-                        height: exports.TAB_BAR_HEIGHT,
+                        height: TAB_BAR_HEIGHT,
                         flexDirection: "row",
-                    }, children: [children, !!allTabLayoutsArePresent && ((0, jsx_runtime_1.jsx)(exports.ActiveTabBorder, { tabLayouts: (0, lodash_1.compact)(tabLayouts), activeTabIndex: activeTabIndex }))] })] }) }));
+                    }, children: [children, !!allTabLayoutsArePresent && (_jsx(ActiveTabBorder, { tabLayouts: compact(tabLayouts), activeTabIndex: activeTabIndex }))] })] }) }));
 };
-exports.TabBarContainer = TabBarContainer;
-function spring(node, toValue) {
-    return react_native_1.Animated.spring(node, { toValue, useNativeDriver: true, bounciness: -7, speed: 13 });
+export function spring(node, toValue) {
+    return Animated.spring(node, { toValue, useNativeDriver: true, bounciness: -7, speed: 13 });
 }
-exports.spring = spring;
 /**
  * Underlines the Active Tab. Same implementation in StickyTabPageTabBar
  */
-const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
-    const color = (0, hooks_1.useColor)();
+export const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
+    const color = useColor();
     // We resize this border using the `scaleX` transform property rather than the `width` property, to avoid running
     // animations on the JS thread, so we need to set an initial, pre-transform span for the border.
     const preTransformSpan = 100;
@@ -64,13 +59,13 @@ const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
     for (let i = 0; i < activeTabIndex; i++) {
         left += tabLayouts[i].width;
     }
-    const translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(left)).current;
-    const scaleX = (0, react_1.useRef)(new react_native_1.Animated.Value(span / preTransformSpan)).current;
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.parallel([spring(translateX, left), spring(scaleX, span / preTransformSpan)]).start();
+    const translateX = useRef(new Animated.Value(left)).current;
+    const scaleX = useRef(new Animated.Value(span / preTransformSpan)).current;
+    useEffect(() => {
+        Animated.parallel([spring(translateX, left), spring(scaleX, span / preTransformSpan)]).start();
     }, [left, span]);
-    const scaleXOffset = react_native_1.Animated.divide(react_native_1.Animated.subtract(preTransformSpan, react_native_1.Animated.multiply(scaleX, preTransformSpan)), 2);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+    const scaleXOffset = Animated.divide(Animated.subtract(preTransformSpan, Animated.multiply(scaleX, preTransformSpan)), 2);
+    return (_jsx(Animated.View, { style: {
             height: 1,
             width: preTransformSpan,
             backgroundColor: color("black100"),
@@ -78,7 +73,7 @@ const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
             bottom: 0,
             transform: [
                 {
-                    translateX: react_native_1.Animated.subtract(translateX, scaleXOffset),
+                    translateX: Animated.subtract(translateX, scaleXOffset),
                 },
                 {
                     scaleX,
@@ -86,4 +81,3 @@ const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
             ],
         } }));
 };
-exports.ActiveTabBorder = ActiveTabBorder;

package/dist/elements/LegacyTabs/index.js

@@ -1,16 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAB_BAR_HEIGHT = exports.Tab = exports.StepTabs = exports.ContentTabs = exports.NavigationalTabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentTabs_1 = require("./ContentTabs");
-Object.defineProperty(exports, "ContentTabs", { enumerable: true, get: function () { return ContentTabs_1.ContentTabs; } });
-const NavigationalTabs_1 = require("./NavigationalTabs");
-Object.defineProperty(exports, "NavigationalTabs", { enumerable: true, get: function () { return NavigationalTabs_1.NavigationalTabs; } });
-const StepTabs_1 = require("./StepTabs");
-Object.defineProperty(exports, "StepTabs", { enumerable: true, get: function () { return StepTabs_1.StepTabs; } });
-const Tab_1 = require("./Tab");
-const Tab = ({ ...props }) => {
-    return (0, jsx_runtime_1.jsx)(Tab_1.TabV3, { ...props });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContentTabs } from "./ContentTabs";
+import { NavigationalTabs } from "./NavigationalTabs";
+import { StepTabs } from "./StepTabs";
+import { TabV3 } from "./Tab";
+export { NavigationalTabs, ContentTabs, StepTabs };
+export const Tab = ({ ...props }) => {
+    return _jsx(TabV3, { ...props });
 };
-exports.Tab = Tab;
-exports.TAB_BAR_HEIGHT = 44;
+export const TAB_BAR_HEIGHT = 44;

package/dist/elements/List/BulletedItem.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BulletedItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const text_1 = require("../../utils/text");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
-const BulletedItem = ({ children, color = "black60", ...otherFlexProps }) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", px: 1, ...otherFlexProps, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: color, children: text_1.bullet }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: color, children: children })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bullet } from "../../utils/text";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+export const BulletedItem = ({ children, color = "black60", ...otherFlexProps }) => {
+    return (_jsxs(Flex, { flexDirection: "row", px: 1, ...otherFlexProps, children: [_jsx(Text, { variant: "sm", color: color, children: bullet }), _jsx(Spacer, { x: 1 }), _jsx(Text, { variant: "sm", color: color, children: children })] }));
 };
-exports.BulletedItem = BulletedItem;

package/dist/elements/List/List.stories.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const BulletedItem_1 = require("./BulletedItem");
-const helpers_1 = require("../../storybook/helpers");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("List", module).add("Bulleted Item", () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(BulletedItem_1.BulletedItem, { children: "Bulleted Item text" }), (0, jsx_runtime_1.jsx)(BulletedItem_1.BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { BulletedItem } from "./BulletedItem";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+storiesOf("List", module).add("Bulleted Item", () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })));

package/dist/elements/List/index.js

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