@artsy/palette-mobile 18.0.0--canary.368.4016.0 → 18.0.0

package/dist/animation/CssTransition.d.ts

@@ -11,7 +11,7 @@ export declare class CssTransition extends Component<CssTransitionProps, CssTran
     private animatedValue;
     constructor(props: any);
     UNSAFE_componentWillReceiveProps(nextProps: CssTransitionProps): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     private mergeStyles;
 }
 export {};

package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.d.ts

@@ -10,4 +10,4 @@ export declare const ArtsyKeyboardAvoidingViewContext: import("react").Context<{
 }>;
 export declare const ArtsyKeyboardAvoidingView: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Avatar/Avatar.d.ts

@@ -9,4 +9,4 @@ export interface AvatarProps extends ImgHTMLAttributes<any> {
     src?: string;
 }
 /** A circular Avatar component containing an image or initials */
-export declare const Avatar: ({ src, initials, size, blurhash }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ src, initials, size, blurhash }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Avatar/Avatar.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { AvatarProps } from "./Avatar";
 declare const _default: {
     title: string;
-    component: ({ src, initials, size, blurhash }: AvatarProps) => JSX.Element;
+    component: ({ src, initials, size, blurhash }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare function Variants(): JSX.Element;
+export declare function Variants(): import("react/jsx-runtime").JSX.Element;

package/dist/elements/BackButton/BackButton.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: import("react").FC<import("./BackButton").BackButtonProps>;
 };
 export default _default;
-export declare const Styled: () => JSX.Element;
+export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Banner/Banner.d.ts

@@ -15,7 +15,7 @@ type BannerWithChildren = CommonBannerProps & {
     children: React.ReactNode;
 };
 export type BannerProps = BannerWithText | BannerWithChildren;
-export declare const Banner: ({ text, onClose, dismissable, variant, children, ...restProps }: BannerProps) => JSX.Element;
+export declare const Banner: ({ text, onClose, dismissable, variant, children, ...restProps }: BannerProps) => import("react/jsx-runtime").JSX.Element;
 declare const BANNER_VARIANTS: {
     defaultLight: {
         backgroundColor: string;

package/dist/elements/Banner/Banner.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ text, onClose, dismissable, variant, children, ...restProps }: import("./Banner").BannerProps) => JSX.Element;
+    component: ({ text, onClose, dismissable, variant, children, ...restProps }: import("./Banner").BannerProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const States: () => JSX.Element;
+export declare const States: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Box/Box.stories.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { View } from "react-native";
 declare const _default: {
     title: string;
     component: import("styled-components").StyledComponent<typeof View, any, import("./Box").BoxProps, never>;
 };
 export default _default;
-export declare const Styled: () => JSX.Element;
-export declare const RegularViewProps: () => JSX.Element;
-export declare const GapProps: () => JSX.Element;
+export declare const Styled: () => import("react/jsx-runtime").JSX.Element;
+export declare const RegularViewProps: () => import("react/jsx-runtime").JSX.Element;
+export declare const GapProps: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Button/Button.stories.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
     component: import("react").FC<ButtonProps>;
 };
 export default _default;
-export declare const Sizes: () => JSX.Element;
-export declare const States: () => JSX.Element;
-export declare const Variants: () => JSX.Element;
-export declare const VariantsLoading: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const States: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantsLoading: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Button/CTAButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
-export declare const CTAButton: (props: ButtonProps) => JSX.Element;
+export declare const CTAButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Button/FollowButton.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
     followCount?: number;
     longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Button/LinkButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TextProps } from "../Text";
-export declare const LinkButton: (props: TextProps) => JSX.Element;
+export declare const LinkButton: (props: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/ButtonNew/Button.d.ts

@@ -30,5 +30,5 @@ export interface ButtonProps extends BoxProps {
     /** Used only for tests and stories */
     testOnly_pressed?: PressableProps["testOnly_pressed"];
 }
-export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/ButtonNew/Button.stories.d.ts

@@ -1,18 +1,17 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
 declare const _default: {
     title: string;
-    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const Sizes: () => JSX.Element;
-export declare const States: () => JSX.Element;
-export declare const Variants: () => JSX.Element;
-export declare const VariantsLoading: () => JSX.Element;
-export declare const VariantsDisabled: () => JSX.Element;
-export declare const TheFollowButton: () => JSX.Element;
-export declare const TheCTAButton: () => JSX.Element;
-export declare const TheLinkButton: () => JSX.Element;
-export declare const Miscellaneous: () => JSX.Element;
-export declare const Playground: () => JSX.Element;
-export declare const SpacingAround: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const States: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantsLoading: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantsDisabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const TheFollowButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TheCTAButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TheLinkButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const Miscellaneous: () => import("react/jsx-runtime").JSX.Element;
+export declare const Playground: () => import("react/jsx-runtime").JSX.Element;
+export declare const SpacingAround: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/ButtonNew/CTAButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
-export declare const CTAButton: (props: ButtonProps) => JSX.Element;
+export declare const CTAButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/ButtonNew/FollowButton.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
     followCount?: number;
     longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/ButtonNew/LinkButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TextProps } from "../Text";
-export declare const LinkButton: (props: TextProps) => JSX.Element;
+export declare const LinkButton: (props: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -16,6 +16,6 @@ export declare const Checkbox: React.FC<CheckboxProps>;
 interface CheckMarkProps {
     size: number;
 }
-export declare const CheckMark: ({ size }: CheckMarkProps) => JSX.Element;
-export declare const DisabledMark: import("styled-components").StyledComponent<({ size }: CheckMarkProps) => JSX.Element, any, {}, never>;
+export declare const CheckMark: ({ size }: CheckMarkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledMark: import("styled-components").StyledComponent<({ size }: CheckMarkProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export {};

package/dist/elements/Checkbox/Checkbox.stories.d.ts

@@ -14,4 +14,4 @@ declare const _default: {
     }>;
 };
 export default _default;
-export declare function Variants(): JSX.Element;
+export declare function Variants(): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Chip/Chip.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: import("react").FC<import("./Chip").ChipProps>;
 };
 export default _default;
-export declare const Variations: () => JSX.Element;
+export declare const Variations: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/ClassTheme/ClassTheme.d.ts

@@ -3,4 +3,4 @@ import { useTheme } from "../../";
 export declare const ClassTheme: ({ theme, children, }: {
     theme?: "v3" | undefined;
     children: import("react").ReactNode | ((helpers: ReturnType<typeof useTheme>) => React.ReactNode);
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Collapse/Collapse.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: import("react").FC<import("./Collapse").CollapseProps>;
 };
 export default _default;
-export declare const Something: () => JSX.Element;
+export declare const Something: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 export declare const ArtworkDetails: ({ handlePress }: {
     handlePress: () => void;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const UploadPhotos: ({ handlePress }: {
     handlePress: () => void;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ContactInformation: ({ handlePress }: {
     handlePress: () => void;
-}) => JSX.Element;
-export declare const DisplayContent: () => JSX.Element;
-export declare const ComponentWithCollapsibleMenu: () => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DisplayContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComponentWithCollapsibleMenu: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Dialog/Dialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DialogAction {
     text: string;
     onPress: () => void;
@@ -11,5 +10,5 @@ export interface DialogProps {
     secondaryCta?: DialogAction;
     onBackgroundPress?: () => void;
 }
-export declare const Dialog: (props: DialogProps) => JSX.Element;
+export declare const Dialog: (props: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/EntityHeader/EntityHeader.d.ts

@@ -16,4 +16,4 @@ export interface EntityHeaderProps extends FlexProps {
     displayPrivateIcon?: boolean;
     theme?: "dark" | "light";
 }
-export declare const EntityHeader: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: EntityHeaderProps) => JSX.Element;
+export declare const EntityHeader: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: EntityHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/EntityHeader/EntityHeader.stories.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: import("./EntityHeader").EntityHeaderProps) => JSX.Element;
+    component: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, theme, ...restProps }: import("./EntityHeader").EntityHeaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const Initials: () => JSX.Element;
-export declare const Image: () => JSX.Element;
-export declare const VariantSmall: () => JSX.Element;
-export declare const WithRightButton: () => JSX.Element;
-export declare const WithPrivateIcon: () => JSX.Element;
+export declare const Initials: () => import("react/jsx-runtime").JSX.Element;
+export declare const Image: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantSmall: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRightButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithPrivateIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Header/ArtsyLogoHeader.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface Props {
     shadow?: boolean;
 }
-export declare const ArtsyLogoHeader: ({ shadow }: Props) => JSX.Element;
+export declare const ArtsyLogoHeader: ({ shadow }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Histogram/Histogram.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Range = [number, number];
 export interface HistogramBarEntity {
     count: number;
@@ -8,5 +7,5 @@ interface HistogramProps {
     selectedRange: Range;
     bars: HistogramBarEntity[];
 }
-export declare const Histogram: ({ bars, selectedRange }: HistogramProps) => JSX.Element;
+export declare const Histogram: ({ bars, selectedRange }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Image/Image.js

@@ -1,29 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FastImage from "@d11/react-native-fast-image";
-import { memo, useCallback } from "react";
-import { PixelRatio, View } from "react-native";
+import { memo, useRef } from "react";
+import { PixelRatio, View, Animated } from "react-native";
 import { Blurhash } from "react-native-blurhash";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
 import { createGeminiUrl } from "../../utils/createGeminiUrl";
 import { useColor } from "../../utils/hooks";
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
 import { Flex } from "../Flex";
 import { Skeleton, SkeletonBox } from "../Skeleton";
 export const Image = memo(({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, blurhash, ...flexProps }) => {
-    const loading = useSharedValue(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = useColor();
-    const animatedStyles = useAnimatedStyle(() => {
-        return {
-            opacity: withTiming(loading.get() ? 0 : 1, { duration: 200, easing: Easing.sin }),
-        };
-    }, []);
-    const onAnimationEnd = useCallback(() => {
-        "worklet";
-        loading.set(() => false);
-        // No need to get the js thread involved here
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const opacity = useRef(new Animated.Value(0)).current;
+    const onLoadEnd = () => {
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
+    };
     if (showLoadingState) {
         return (_jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }));
     }
@@ -36,16 +31,16 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
             resizeMode: geminiResizeMode,
         });
     }
-    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(Animated.View, { style: animatedStyles, children: _jsx(FastImage, { style: [
-                        dimensions,
-                        style,
-                        // If we have a blurhash, we don't want to show a background color
-                        // That might flash before the image loads
-                        { backgroundColor: blurhash ? "transparent" : color("mono30") },
-                    ], resizeMode: resizeMode, onLoadEnd: onAnimationEnd, source: {
-                        priority: FastImage.priority.normal,
-                        uri,
-                    } }) })] }));
+    return (_jsxs(Flex, { position: "relative", ...flexProps, style: { ...dimensions }, children: [_jsx(View, { style: [dimensions, { position: "absolute" }], children: _jsx(ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }), _jsx(FastImage, { style: [
+                    dimensions,
+                    style,
+                    // If we have a blurhash, we don't want to show a background color
+                    // That might flash before the image loads
+                    { backgroundColor: blurhash ? "transparent" : color("mono30") },
+                ], resizeMode: resizeMode, onLoadEnd: onLoadEnd, source: {
+                    priority: FastImage.priority.normal,
+                    uri,
+                } })] }));
 });
 const useImageDimensions = (props) => {
     const screenDimensions = useScreenDimensions();

package/dist/elements/LegacyScreen/LegacyScreen.d.ts

@@ -19,8 +19,8 @@ interface BodyProps extends Pick<FlexProps, "backgroundColor"> {
 }
 export declare const LegacyScreen: (({ children }: {
     children?: React.ReactNode;
-}) => JSX.Element) & {
-    Body: ({ scroll, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Body: ({ scroll, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
     Header: import("react").FC<HeaderProps>;
     FloatingHeader: import("react").FC<HeaderProps>;
     Background: import("react").FC<{
@@ -30,6 +30,6 @@ export declare const LegacyScreen: (({ children }: {
         children?: import("react").ReactNode;
     }>;
     BodyXPadding: import("react").FC<import("..").BoxProps>;
-    SafeBottomPadding: () => JSX.Element | null;
+    SafeBottomPadding: () => import("react/jsx-runtime").JSX.Element | null;
 };
 export {};

package/dist/elements/LegacyTabs/ContentTabs.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { TabsProps } from "../LegacyTabs";
 /**
  * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
  */
-export declare const ContentTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => JSX.Element;
+export declare const ContentTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/LegacyTabs/NavigationalTabs.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { TabsProps } from "../LegacyTabs";
 /**
  * Renders a list of tabs. Evenly-spaces them across the screen with
  * each tab label centered on the tab
  */
-export declare const NavigationalTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => JSX.Element;
+export declare const NavigationalTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/LegacyTabs/Tab.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ViewProps, ViewStyle } from "react-native";
 export interface TabV3Props {
     label: string;
@@ -8,4 +7,4 @@ export interface TabV3Props {
     onPress: () => void;
     onLayout: ViewProps["onLayout"];
 }
-export declare const TabV3: ({ label, superscript, active, onLayout, onPress, style }: TabV3Props) => JSX.Element;
+export declare const TabV3: ({ label, superscript, active, onLayout, onPress, style }: TabV3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/LegacyTabs/TabBarContainer.d.ts

@@ -13,7 +13,7 @@ export interface TabBarContainerProps {
  * <TabBarContainer>{props.tabs.map((tab) => <Tab {...tab} />)}</TabContainer>
  * ```
  */
-export declare const TabBarContainer: ({ children, activeTabIndex, scrollEnabled, tabLayouts, }: TabBarContainerProps) => JSX.Element;
+export declare const TabBarContainer: ({ children, activeTabIndex, scrollEnabled, tabLayouts, }: TabBarContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare function spring(node: Animated.Value, toValue: number): Animated.CompositeAnimation;
 /**
  * Underlines the Active Tab. Same implementation in StickyTabPageTabBar
@@ -21,4 +21,4 @@ export declare function spring(node: Animated.Value, toValue: number): Animated.
 export declare const ActiveTabBorder: ({ tabLayouts, activeTabIndex, }: {
     tabLayouts: LayoutRectangle[];
     activeTabIndex: number;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/LegacyTabs/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { ContentTabs } from "./ContentTabs";
 import { NavigationalTabs } from "./NavigationalTabs";
 import { StepTabs } from "./StepTabs";
 import { TabV3Props } from "./Tab";
 export { NavigationalTabs, ContentTabs, StepTabs };
-export declare const Tab: ({ ...props }: TabV3Props) => JSX.Element;
+export declare const Tab: ({ ...props }: TabV3Props) => import("react/jsx-runtime").JSX.Element;
 export declare const TAB_BAR_HEIGHT = 44;
 export type TabsType = Array<{
     label: string;

package/dist/elements/List/BulletedItem.d.ts

@@ -4,5 +4,5 @@ interface BulletedItemProps extends FlexProps {
     children: React.ReactNode;
     color?: string;
 }
-export declare const BulletedItem: ({ children, color, ...otherFlexProps }: BulletedItemProps) => JSX.Element;
+export declare const BulletedItem: ({ children, color, ...otherFlexProps }: BulletedItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/MeasuredView/MeasuredView.d.ts

@@ -14,6 +14,6 @@ interface Props {
  * A view that renders off-screen, measures the width and height of the view, and reports it back.
  * Note: it is rendering just null when in test mode.
  */
-export declare const MeasuredView: ({ children, setMeasuredState, show }: Props) => JSX.Element | null;
+export declare const MeasuredView: ({ children, setMeasuredState, show }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export declare const useOffscreenStyle: (notOffscreen?: boolean) => ViewStyle;
 export {};

package/dist/elements/MenuItem/MenuItem.d.ts

@@ -8,4 +8,4 @@ export interface MenuItemProps {
     chevron?: React.ReactNode;
     rightView?: React.ReactNode;
 }
-export declare const MenuItem: ({ title, text, value, onPress, disabled, chevron, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ title, text, value, onPress, disabled, chevron, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/MenuItem/MenuItem.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ title, text, value, onPress, disabled, chevron, }: import("./MenuItem").MenuItemProps) => JSX.Element;
+    component: ({ title, text, value, onPress, disabled, chevron, }: import("./MenuItem").MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const Variations: () => JSX.Element;
+export declare const Variations: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Message/Message.d.ts

@@ -15,5 +15,5 @@ export interface MessageProps {
     titleStyle?: TextProps;
     variant?: MessageVariant;
 }
-export declare const Message: React.FC<MessageProps>;
+export declare const Message: React.FC<React.PropsWithChildren<MessageProps>>;
 export {};

package/dist/elements/PopIn/PopIn.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const PopIn: ({ children, xOffset, yOffset, }: {
     children: React.ReactNode;
     xOffset?: number | undefined;
     yOffset?: number | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Popover/Popover.d.ts

@@ -14,6 +14,6 @@ interface PopoverProps extends Omit<RNPopoverProps, "placement"> {
     noCloseIcon?: boolean;
     visible?: boolean;
 }
-export declare const Popover: ({ variant, children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, ...rest }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ variant, children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, ...rest }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export type PopoverVariant = "light" | "dark";
 export {};

package/dist/elements/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ViewStyle } from "react-native";
 import { Color } from "../../types";
 export interface ProgressBarProps {
@@ -11,4 +10,4 @@ export interface ProgressBarProps {
     style?: ViewStyle;
     progressBarStyle?: ViewStyle;
 }
-export declare const ProgressBar: ({ animationDuration, backgroundColor, height, onCompletion, progress: unclampedProgress, trackColor, style, progressBarStyle, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ animationDuration, backgroundColor, height, onCompletion, progress: unclampedProgress, trackColor, style, progressBarStyle, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Radio/RadioButton.d.ts

@@ -22,6 +22,6 @@ export declare const RadioButton: React.FC<RadioButtonProps>;
 interface RadioDotProps {
     size: number;
 }
-export declare const RadioDot: ({ size }: RadioDotProps) => JSX.Element;
-export declare const DisabledDot: import("styled-components").StyledComponent<({ size }: RadioDotProps) => JSX.Element, any, {}, never>;
+export declare const RadioDot: ({ size }: RadioDotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledDot: import("styled-components").StyledComponent<({ size }: RadioDotProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export {};

package/dist/elements/Radio/RadioDot.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FlexProps } from "../Flex";
 type RadioDotMode = "default" | "disabled" | "error" | "hover";
 export declare const RADIO_DOT_MODES: Record<RadioDotMode, {
@@ -11,5 +10,5 @@ interface RadioDotProps {
     hover?: boolean;
     selected?: boolean;
 }
-export declare const RadioDot: (props: RadioDotProps) => JSX.Element;
+export declare const RadioDot: (props: RadioDotProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Screen/Body.d.ts

@@ -1,8 +1,19 @@
 /// <reference types="react" />
+import { type ScrollViewProps } from "react-native";
 import { FlexProps } from "../Flex";
-export interface BodyProps extends FlexProps {
+interface BodyBaseProps extends FlexProps {
     fullwidth?: boolean;
-    scroll?: boolean;
     disableKeyboardAvoidance?: boolean;
+    children?: React.ReactNode;
 }
+interface BodyScrollableProps extends BodyBaseProps {
+    scroll: true;
+    scrollViewProps?: ScrollViewProps;
+}
+interface BodyNonScrollableProps extends BodyBaseProps {
+    scroll?: false | undefined;
+    scrollViewProps?: never;
+}
+export type BodyProps = BodyScrollableProps | BodyNonScrollableProps;
 export declare const Body: React.FC<BodyProps>;
+export {};

package/dist/elements/Screen/Body.js

@@ -3,9 +3,9 @@ import { Fragment } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView } from "react-native";
 import { SCREEN_HORIZONTAL_PADDING } from "./constants";
 import { Flex } from "../Flex";
-export const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = false, ...flexProps }) => {
+export const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = false, scrollViewProps, ...flexProps }) => {
     const Wrapper = disableKeyboardAvoidance ? Fragment : KeyboardAvoidingView;
     return (_jsx(Wrapper, { ...(disableKeyboardAvoidance
             ? {}
-            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { children: children }) : children }) }) }));
+            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { ...scrollViewProps, children: children }) : children }) }) }));
 };

package/dist/elements/Screen/ScreenFlatList.d.ts

@@ -3,4 +3,4 @@ import { FlatList, FlatListProps } from "react-native";
 export type ScreenFlatListProps<T> = Omit<FlatListProps<T>, "CellRendererComponent"> & {
     innerRef?: React.ForwardedRef<FlatList<T>>;
 };
-export declare function ScreenFlatList<T>(props: ScreenFlatListProps<T>): JSX.Element;
+export declare function ScreenFlatList<T>(props: ScreenFlatListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Screen/StickySubHeader.d.ts

@@ -10,6 +10,6 @@ export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
     Component?: React.ReactNode;
 }
 export declare const STICKY_BAR_HEIGHT = 42;
-export declare const DEFAULT_SEPARATOR_COMPONENT: JSX.Element;
+export declare const DEFAULT_SEPARATOR_COMPONENT: import("react/jsx-runtime").JSX.Element;
 export declare const BOTTOM_TABS_HEIGHT = 65;
 export declare const StickySubHeader: React.FC<StickySubHeaderProps>;

package/dist/elements/SearchInput/SearchInput.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { type InputProps } from "../Input";
 export interface SearchInputProps extends InputProps {
     enableCancelButton?: boolean;
 }
-export declare const SearchInput: ({ enableCancelButton, onChangeText, onClear, ...props }: SearchInputProps) => JSX.Element;
+export declare const SearchInput: ({ enableCancelButton, onChangeText, onClear, ...props }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Separator/Separator.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("styled-components").StyledComponent<typeof import("react-native/types").View, import("styled-components").DefaultTheme, import("./Separator").SeparatorProps, never>;
 };
 export default _default;
-export declare const Styled: () => JSX.Element;
+export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Skeleton/Skeleton.stories.d.ts

@@ -6,4 +6,4 @@ declare const _default: {
     }>;
 };
 export default _default;
-export declare const SkeletonLoaders: () => JSX.Element;
+export declare const SkeletonLoaders: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Spacer/Spacer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpacingUnit } from "../../types";
 export interface SpacerProps {
     x?: SpacingUnit;
@@ -7,4 +6,4 @@ export interface SpacerProps {
 /**
  * Used to inject space where it's needed.
  */
-export declare const Spacer: ({ x, y, ...props }: SpacerProps) => JSX.Element;
+export declare const Spacer: ({ x, y, ...props }: SpacerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Spacer/Spacer.stories.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { SpacerProps } from "./Spacer";
 declare const _default: {
     title: string;
-    component: ({ x, y, ...props }: SpacerProps) => JSX.Element;
+    component: ({ x, y, ...props }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const Horizontal: () => JSX.Element;
-export declare const Vertical: () => JSX.Element;
+export declare const Horizontal: () => import("react/jsx-runtime").JSX.Element;
+export declare const Vertical: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Switch/Switch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color } from "@artsy/palette-tokens";
 import { SwitchProps as RNSwitchProps } from "react-native";
 type CustomSwitchProps = Omit<RNSwitchProps, "trackColor" | "thumbColor" | "ios_backgroundColor" | "thumbTintColor" | "tintColor" | "onTintColor">;
@@ -20,5 +19,5 @@ export interface SwitchProps extends CustomSwitchProps {
      */
     trackColorInactive?: Color;
 }
-export declare const Switch: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: SwitchProps) => JSX.Element;
+export declare const Switch: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Switch/Switch.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: import("./Switch").SwitchProps) => JSX.Element;
+    component: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: import("./Switch").SwitchProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export declare const Variants: () => JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Tabs/TabFlashList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FlashListProps } from "@shopify/flash-list";
-export declare function TabFlashList<T>(props: FlashListProps<T>): JSX.Element;
+export declare function TabFlashList<T>(props: FlashListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Tabs/TabFlatList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FlatListProps } from "react-native";
-export declare function TabFlatList<T>(props: FlatListProps<T>): JSX.Element;
+export declare function TabFlatList<T>(props: FlatListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Tabs/TabMasonry.d.ts

@@ -2,4 +2,4 @@ import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list"
 import { RefObject } from "react";
 export declare function TabMasonry<T>(props: MasonryFlashListProps<T> & {
     innerRef?: RefObject<MasonryFlashListRef<T>> | null;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/elements/Text/LinkText.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TextProps } from "./Text";
-export declare const LinkText: ({ style, ...props }: TextProps) => JSX.Element;
+export declare const LinkText: ({ style, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Touchable/Touchable.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: import("react").FC<import("./Touchable").TouchableProps>;
 };
 export default _default;
-export declare const Examples: () => JSX.Element;
+export declare const Examples: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Touchable/TouchableHighlightColor.d.ts

@@ -10,5 +10,5 @@ interface TouchableHighlightColorProps extends TouchableProps {
     normalColor?: Color;
     render: (state: TouchableHighlightState) => React.ReactNode;
 }
-export declare const TouchableHighlightColor: (props: TouchableHighlightColorProps) => JSX.Element;
+export declare const TouchableHighlightColor: (props: TouchableHighlightColorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Touchable/TouchableWithScale.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { TouchableWithoutFeedbackProps } from "react-native";
 export interface TouchableWithScaleProps extends TouchableWithoutFeedbackProps {
     defaultScale?: number;
     activeScale?: number;
 }
-export declare const TouchableWithScale: ({ defaultScale, activeScale, onPressIn, onPressOut, style, children, ...restProps }: TouchableWithScaleProps) => JSX.Element;
+export declare const TouchableWithScale: ({ defaultScale, activeScale, onPressIn, onPressOut, style, children, ...restProps }: TouchableWithScaleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/storybook/helpers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyleProp, ViewStyle } from "react-native";
 export declare const DataList: <ItemT>({ data, keyExtractor, renderItem, contentContainerStyle, }: {
     data: ItemT[];
@@ -8,13 +7,13 @@ export declare const DataList: <ItemT>({ data, keyExtractor, renderItem, content
         index: number;
     }) => React.ReactElement | null;
     contentContainerStyle?: StyleProp<ViewStyle>;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const List: ({ children, contentContainerStyle, style, horizontal, }: {
     children: React.ReactElement[] | React.ReactElement;
     contentContainerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     horizontal?: boolean | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Row: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/Wrap.d.ts

@@ -4,9 +4,9 @@ interface WrapProps {
     children?: React.ReactNode;
 }
 export declare const Wrap: {
-    ({ if: condition, children }: WrapProps): JSX.Element;
+    ({ if: condition, children }: WrapProps): import("react/jsx-runtime").JSX.Element;
     Content({ children }: {
         children?: React.ReactNode;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/utils/colors.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const All: () => JSX.Element;
+export declare const All: () => import("react/jsx-runtime").JSX.Element;

package/dist/utils/hooks/useScreenDimensions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ScaledSize } from "react-native";
 import { EdgeInsets } from "react-native-safe-area-context";
 export type ScreenOrientation = "landscape" | "portrait";
@@ -11,7 +10,7 @@ export interface ScreenDimensions extends ScaledSize {
 }
 export declare const ScreenDimensionsProvider: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare function useScreenDimensions(): ScreenDimensions;
 /**
  * The following components have slightly different sizing dimensions based on the iPhone model

package/dist/utils/space.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SpacingUnits: () => JSX.Element;
+export declare const SpacingUnits: () => import("react/jsx-runtime").JSX.Element;

package/dist/utils/tests/renderWithWrappers.d.ts

@@ -7,4 +7,4 @@ import { ReactElement } from "react";
 export declare const renderWithWrappers: (component: ReactElement) => any;
 export declare const Providers: ({ children }: {
     children?: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "18.0.0--canary.368.4016.0",
+  "version": "18.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -89,7 +89,7 @@
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
     "@types/lodash": "4.14.191",
-    "@types/react": "^17.0.39",
+    "@types/react": "18.3.12",
     "@types/react-test-renderer": "18.3.0",
     "@types/styled-components": "^5.1.26",
     "@types/styled-components-react-native": "^5.2.1",
@@ -126,7 +126,7 @@
     "prettier": "^2.8.8",
     "pull-lock": "1.0.0",
     "react": "18.3.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-native": "0.76.9",
     "react-native-device-info": "14.0.4",
     "react-native-haptic-feedback": "1.14.0",
@@ -140,7 +140,7 @@
     "typescript": "5.0.4"
   },
   "resolutions": {
-    "@types/react": "^17.0.39"
+    "@types/react": "18.3.12"
   },
   "engines": {
     "yarn": "1.x"