@artsy/palette-mobile 11.0.23 → 11.0.25

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.0.25 (Thu May 04 2023)
+
+#### 🐛 Bug Fix
+
+- fix(legacy-screen): use legacy screen code from Eigen [#99](https://github.com/artsy/palette-mobile/pull/99) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
+# v11.0.24 (Thu May 04 2023)
+
+#### 🐛 Bug Fix
+
+- feat(screen): Add screen component from energy [#98](https://github.com/artsy/palette-mobile/pull/98) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.23 (Thu May 04 2023)
 
 #### 🐛 Bug Fix

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+interface HeaderProps {
+    onBack?: () => void;
+    title?: string;
+    onSkip?: () => void;
+}
+export declare const Header: React.FC<HeaderProps>;
+/**
+ * @deprecated Use `Screen.Header` instead.
+ */
+export declare const FloatingHeader: React.FC<HeaderProps>;
+interface BodyProps extends Pick<FlexProps, "backgroundColor"> {
+    children?: React.ReactNode;
+    scroll?: boolean;
+    noTopSafe?: boolean;
+    noBottomSafe?: boolean;
+    fullwidth?: boolean;
+}
+export declare const LegacyScreen: (({ children }: {
+    children?: React.ReactNode;
+}) => JSX.Element) & {
+    Body: ({ scroll, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
+    Header: import("react").FC<HeaderProps>;
+    FloatingHeader: import("react").FC<HeaderProps>;
+    Background: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BottomView: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    BodyXPadding: import("react").FC<import("..").BoxProps>;
+    SafeBottomPadding: () => JSX.Element | null;
+};
+export {};

package/dist/elements/{Screen/Screen.js → LegacyScreen/LegacyScreen.js}

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Screen = void 0;
+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");
@@ -15,11 +15,11 @@ const ArtsyKeyboardAvoidingView_1 = require("../ArtsyKeyboardAvoidingView");
 const BackButton_1 = require("../BackButton");
 const Flex_1 = require("../Flex");
 const Spacer_1 = require("../Spacer");
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const Text_1 = require("../Text");
+const Touchable_1 = require("../Touchable");
 const ScreenContext = (0, react_1.createContext)(null);
 function useScreenContext() {
     const context = (0, react_1.useContext)(ScreenContext);
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!context) {
         throw new Error("useScreenContext must be used within a Screen");
     }
@@ -36,25 +36,25 @@ const ScreenWrapper = ({ children }) => {
         }, children: (0, jsx_runtime_1.jsx)(ScreenRoot, { children: children }) }));
 };
 const ScreenRoot = ({ children }) => {
-    const header = (0, react_nanny_1.getChildByType)(children, exports.Screen.Header);
-    const headerFloating = (0, react_nanny_1.getChildByType)(children, exports.Screen.FloatingHeader);
-    const rawHeader = (0, react_nanny_1.getChildByType)(children, exports.Screen.RawHeader);
-    const background = (0, react_nanny_1.getChildByType)(children, exports.Screen.Background);
-    const bodyChildren = (0, react_nanny_1.getChildrenByTypeDeep)(children, exports.Screen.Body);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [background /* fullscreen */, header, rawHeader, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+    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 useUpdateScreenContext = ({ header, }) => {
+const useUpdateScreenContext = ({ header }) => {
     const { setOptions } = useScreenContext();
-    (0, react_1.useEffect)(() => void setOptions({
-        handleTopSafeArea: header === "none" || header === "floating" || header === "raw-safe",
-    }), [header]);
+    (0, react_1.useEffect)(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [header]);
 };
 const NAVBAR_HEIGHT = 44;
-const Header = ({ onBack }) => {
+const Header = ({ onBack, title, onSkip }) => {
     useUpdateScreenContext({ header: "regular" });
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, px: SCREEN_HORIZONTAL_PADDING, flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { onPress: onBack }) }));
+    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" }) }) }))] }));
 };
+exports.Header = Header;
 /**
  * @deprecated Use `Screen.Header` instead.
  */
@@ -66,23 +66,16 @@ const FloatingHeader = ({ onBack }) => {
     }
     return null;
 };
-/**
- * Use `RawHeader` when you need to make a custom header that we have no support for yet.
- */
-const RawHeader = ({ children, nosafe = false }) => {
-    useUpdateScreenContext({ header: nosafe ? "raw-nosafe" : "raw-safe" });
-    const saInsets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: !nosafe, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { top: saInsets.top, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: children }) }) }));
-};
+exports.FloatingHeader = FloatingHeader;
 const SCREEN_HORIZONTAL_PADDING = 2;
-const Body = ({ scroll = false, nosafe = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
-    const childrenExceptBottomView = (0, react_nanny_1.removeChildrenByType)(children, exports.Screen.BottomView);
-    const bottomView = (0, react_nanny_1.getChildrenByType)(children, exports.Screen.BottomView);
+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 { options } = useScreenContext();
     const insets = (0, react_native_safe_area_context_1.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: nosafe || withTopSafeArea ? `${insets.top}px` : undefined, mb: nosafe || 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 ((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] }) }) }) }));
 };
 const Background = ({ children }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
 const BottomView = ({ children }) => {
@@ -121,7 +114,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) => ((0, jsx_runtime_1.jsx)(Flex_1.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.
@@ -136,11 +129,10 @@ const SafeBottomPadding = () => {
     }
     return (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 });
 };
-exports.Screen = Object.assign(ScreenWrapper, {
+exports.LegacyScreen = Object.assign(ScreenWrapper, {
     Body,
-    Header,
-    FloatingHeader,
-    RawHeader,
+    Header: exports.Header,
+    FloatingHeader: exports.FloatingHeader,
     Background,
     BottomView,
     BodyXPadding,

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

@@ -0,0 +1 @@
+export * from "./LegacyScreen";

package/dist/elements/LegacyScreen/index.js

@@ -0,0 +1,17 @@
+"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/Screen/Background.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Background: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/elements/Screen/Background.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Background = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../Flex");
+const Background = ({ children }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
+exports.Background = Background;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface BodyProps extends FlexProps {
+    fullwidth?: boolean;
+    safeArea?: boolean;
+    scroll?: boolean;
+}
+export declare const Body: React.FC<BodyProps>;

package/dist/elements/Screen/Body.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const constants_1 = require("./constants");
+const Flex_1 = require("../Flex");
+const Body = ({ children, fullwidth, safeArea = true, scroll, ...flexProps }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, mt: `${insets.top}px`, pb: safeArea ? `${insets.bottom}px` : undefined, ...flexProps, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : constants_1.SCREEN_HORIZONTAL_PADDING, children: scroll ? (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { children: children }) : children }) }) }));
+};
+exports.Body = Body;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface BottomViewProps {
+    children: React.ReactNode;
+    darkMode?: boolean;
+}
+export declare const BottomView: React.FC<BottomViewProps>;

package/dist/elements/Screen/BottomView.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const constants_1 = require("./constants");
+const useColor_1 = require("../../utils/hooks/useColor");
+const Flex_1 = require("../Flex");
+const BottomView = ({ children, darkMode }) => {
+    const color = (0, useColor_1.useColor)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_linear_gradient_1.default, { colors: [darkMode ? "rgba(0,0,0,0)" : "rgba(255,255,255,0)", color("background")], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
+                    width: "100%",
+                    height: 20,
+                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 1, backgroundColor: "background", children: children })] }));
+};
+exports.BottomView = BottomView;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface FloatingHeaderProps {
+    onBack?: () => void;
+    rightElements?: React.ReactNode;
+}
+export declare const FloatingHeader: ({ onBack, rightElements }: FloatingHeaderProps) => JSX.Element;

package/dist/elements/Screen/FloatingHeader.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const constants_1 = require("./constants");
+const BackButton_1 = require("../BackButton");
+const Flex_1 = require("../Flex");
+const Spacer_1 = require("../Spacer");
+const FloatingHeader = ({ onBack, rightElements }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, height: constants_1.NAVBAR_HEIGHT, px: 1, flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1 }), rightElements && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }))] }));
+};
+exports.FloatingHeader = FloatingHeader;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export declare const FullWidthDivider: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthDivider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWidthDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Screen_1 = require("../Screen");
+const Separator_1 = require("../Separator");
+const FullWidthDivider = (flexProps) => {
+    return ((0, jsx_runtime_1.jsx)(Screen_1.Screen.FullWidthItem, { children: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, ...flexProps }) }));
+};
+exports.FullWidthDivider = FullWidthDivider;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export declare const FullWidthItem: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthItem.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWidthItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+const Flex_1 = require("../Flex");
+const FullWidthItem = (props) => {
+    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, mx: -constants_1.SCREEN_HORIZONTAL_PADDING });
+};
+exports.FullWidthItem = FullWidthItem;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface HeaderProps {
+    animated?: boolean;
+    hideLeftElements?: boolean;
+    hideRightElements?: boolean;
+    hideTitle?: boolean;
+    leftElements?: React.ReactNode;
+    onBack?: () => void;
+    rightElements?: React.ReactNode;
+    scrollY?: number;
+    title?: string;
+    titleShown?: boolean;
+}
+export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_device_info_1 = require("react-native-device-info");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const constants_1 = require("./constants");
+const constants_2 = require("../../constants");
+const ArrowLeftIcon_1 = require("../../svgs/ArrowLeftIcon");
+const Flex_1 = require("../Flex");
+const Spacer_1 = require("../Spacer");
+const Text_1 = require("../Text");
+const Touchable_1 = require("../Touchable");
+const Header = ({ hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const Left = () => {
+        if (hideLeftElements) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftElements ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements })) : (
+                // If no left elements passed, show back button
+                (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh", marginLeft: "-4px", top: "1px" }) })), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }));
+    };
+    const Center = () => {
+        if (hideTitle) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: (0, react_native_device_info_1.isTablet)() ? "100%" : "70%", flex: 1, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }));
+    };
+    const Right = () => {
+        if (hideRightElements) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, top: insets.top, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Left, {}), (0, jsx_runtime_1.jsx)(Center, {}), (0, jsx_runtime_1.jsx)(Right, {})] }));
+};
+exports.Header = Header;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ScreenBase: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/elements/Screen/ScreenBase.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const Flex_1 = require("../Flex");
+const ScreenBase = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, {})] }));
+};
+exports.ScreenBase = ScreenBase;
+const SafeAreaCover = () => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", left: 0, right: 0, top: 0, height: insets.top, backgroundColor: "background" }));
+};

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

@@ -0,0 +1,12 @@
+import { SpacingUnitDSValueNumber } from "../../types";
+export declare const LARGE_TITLE_HEIGHT = 64;
+export declare const NAVBAR_HEIGHT = 44;
+export declare const SCREEN_HORIZONTAL_PADDING: SpacingUnitDSValueNumber;
+export declare const SCREEN_TRANSITION_TIME = 400;
+export declare const ZINDEX: {
+    artworkContent: number;
+    bottomSheetModalView: number;
+    floatingHeader: number;
+    header: number;
+    selectMode: number;
+};

package/dist/elements/Screen/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZINDEX = exports.SCREEN_TRANSITION_TIME = exports.SCREEN_HORIZONTAL_PADDING = exports.NAVBAR_HEIGHT = exports.LARGE_TITLE_HEIGHT = void 0;
+exports.LARGE_TITLE_HEIGHT = 64;
+exports.NAVBAR_HEIGHT = 44;
+exports.SCREEN_HORIZONTAL_PADDING = 2;
+exports.SCREEN_TRANSITION_TIME = 400;
+exports.ZINDEX = {
+    artworkContent: 10,
+    bottomSheetModalView: 1,
+    floatingHeader: 2,
+    header: 1,
+    selectMode: 1,
+};

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

@@ -1 +1,14 @@
-export * from "./Screen";
+/// <reference types="react" />
+export declare const Screen: import("react").FC<{
+    children: import("react").ReactNode;
+}> & {
+    Background: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    Body: import("react").FC<import("./Body").BodyProps>;
+    BottomView: import("react").FC<import("./BottomView").BottomViewProps>;
+    FloatingHeader: ({ onBack, rightElements }: import("./FloatingHeader").FloatingHeaderProps) => JSX.Element;
+    FullWidthDivider: import("react").FC<import("..").BoxProps>;
+    FullWidthItem: import("react").FC<import("..").BoxProps>;
+    Header: import("react").FC<import("./Header").HeaderProps>;
+};

package/dist/elements/Screen/index.js

@@ -1,17 +1,20 @@
 "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("./Screen"), exports);
+exports.Screen = void 0;
+const Background_1 = require("./Background");
+const Body_1 = require("./Body");
+const BottomView_1 = require("./BottomView");
+const FloatingHeader_1 = require("./FloatingHeader");
+const FullWidthDivider_1 = require("./FullWidthDivider");
+const FullWidthItem_1 = require("./FullWidthItem");
+const Header_1 = require("./Header");
+const ScreenBase_1 = require("./ScreenBase");
+exports.Screen = Object.assign(ScreenBase_1.ScreenBase, {
+    Background: Background_1.Background,
+    Body: Body_1.Body,
+    BottomView: BottomView_1.BottomView,
+    FloatingHeader: FloatingHeader_1.FloatingHeader,
+    FullWidthDivider: FullWidthDivider_1.FullWidthDivider,
+    FullWidthItem: FullWidthItem_1.FullWidthItem,
+    Header: Header_1.Header,
+});

package/dist/elements/index.d.ts

@@ -17,6 +17,7 @@ export * from "./Header";
 export * from "./Histogram";
 export * from "./Input";
 export * from "./Join";
+export * from "./LegacyScreen";
 export * from "./List";
 export * from "./Message";
 export * from "./MeasuredView";

package/dist/elements/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./Header"), exports);
 __exportStar(require("./Histogram"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./Join"), exports);
+__exportStar(require("./LegacyScreen"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Message"), exports);
 __exportStar(require("./MeasuredView"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.23",
+  "version": "11.0.25",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -108,6 +108,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.70.8",
+    "react-native-device-info": "10.3.0",
     "react-native-flipper": "0.178.1",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",

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

@@ -1,34 +0,0 @@
-import { FC, ReactNode } from "react";
-import { FlexProps } from "../Flex";
-interface HeaderProps {
-    onBack?: () => void;
-}
-interface RawHeaderProps {
-    children: ReactNode;
-    nosafe?: boolean;
-}
-interface BodyProps extends Partial<Pick<FlexProps, "backgroundColor">> {
-    children?: ReactNode;
-    scroll?: boolean;
-    nosafe?: boolean;
-    noTopSafe?: boolean;
-    noBottomSafe?: boolean;
-    fullwidth?: boolean;
-}
-export declare const Screen: (({ children }: {
-    children?: ReactNode;
-}) => JSX.Element) & {
-    Body: ({ scroll, nosafe, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
-    Header: ({ onBack }: HeaderProps) => JSX.Element;
-    FloatingHeader: FC<HeaderProps>;
-    RawHeader: ({ children, nosafe }: RawHeaderProps) => JSX.Element;
-    Background: ({ children }: {
-        children?: ReactNode;
-    }) => JSX.Element;
-    BottomView: ({ children }: {
-        children?: ReactNode;
-    }) => JSX.Element;
-    BodyXPadding: FC<import("..").BoxProps>;
-    SafeBottomPadding: () => JSX.Element | null;
-};
-export {};