@artsy/palette-mobile 11.0.22 → 11.0.24

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# 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
+
+- fix: no more implicit returns in reanimated hooks [#97](https://github.com/artsy/palette-mobile/pull/97) ([@brainbicycle](https://github.com/brainbicycle))
+
+#### Authors: 1
+
+- Brian Beckerle ([@brainbicycle](https://github.com/brainbicycle))
+
+---
+
 # v11.0.22 (Wed May 03 2023)
 
 :tada: This release contains work from a new contributor! :tada:

package/dist/elements/ButtonNew/Button.js

@@ -45,8 +45,12 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
     const [loading, setLoading, loadingV] = useStateWithProp(!!loadingProp);
     const [pressed, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
     const pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => pressedV.value, (pressedVal) => {
-        pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, { duration: ANIMATION_DURATION });
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        return pressedV.value;
+    }, (pressedVal) => {
+        return (pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, {
+            duration: ANIMATION_DURATION,
+        }));
     });
     const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
     const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({

package/dist/elements/{Screen/Screen.d.ts → LegacyScreen/LegacyScreen.d.ts}

@@ -7,7 +7,7 @@ interface RawHeaderProps {
     children: ReactNode;
     nosafe?: boolean;
 }
-interface BodyProps extends Partial<Pick<FlexProps, "backgroundColor">> {
+interface LegacyBodyProps extends Partial<Pick<FlexProps, "backgroundColor">> {
     children?: ReactNode;
     scroll?: boolean;
     nosafe?: boolean;
@@ -15,10 +15,10 @@ interface BodyProps extends Partial<Pick<FlexProps, "backgroundColor">> {
     noBottomSafe?: boolean;
     fullwidth?: boolean;
 }
-export declare const Screen: (({ children }: {
+export declare const LegacyScreen: (({ children }: {
     children?: ReactNode;
 }) => JSX.Element) & {
-    Body: ({ scroll, nosafe, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: BodyProps) => JSX.Element;
+    Body: ({ scroll, nosafe, noTopSafe, noBottomSafe, fullwidth, children, ...restFlexProps }: LegacyBodyProps) => JSX.Element;
     Header: ({ onBack }: HeaderProps) => JSX.Element;
     FloatingHeader: FC<HeaderProps>;
     RawHeader: ({ children, nosafe }: RawHeaderProps) => JSX.Element;

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 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_nanny_1 = require("react-nanny");
@@ -36,18 +36,20 @@ 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);
+    const header = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.Header);
+    const headerFloating = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.FloatingHeader);
+    const rawHeader = (0, react_nanny_1.getChildByType)(children, exports.LegacyScreen.RawHeader);
+    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: "background", children: [background /* fullscreen */, header, rawHeader, 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" || header === "raw-safe",
-    }), [header]);
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [header]);
 };
 const NAVBAR_HEIGHT = 44;
 const Header = ({ onBack }) => {
@@ -76,8 +78,8 @@ const RawHeader = ({ children, nosafe = false }) => {
 };
 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 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;
@@ -136,7 +138,7 @@ 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,

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/ProgressBar/ProgressBar.js

@@ -34,7 +34,9 @@ const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", hei
     const color = (0, useColor_1.useColor)();
     const width = (0, react_native_reanimated_1.useSharedValue)("0%");
     const progress = clamp(unclampedProgress, 0, 100);
-    const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({ width: width.value }));
+    const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return { width: width.value };
+    });
     const [onCompletionCalled, setOnCompletionCalled] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         width.value = (0, react_native_reanimated_1.withTiming)(`${progress}%`, { duration: animationDuration });

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/Skeleton/Skeleton.js

@@ -42,7 +42,9 @@ const Text_1 = require("../Text");
 const Skeleton = ({ children }) => {
     const opacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
     opacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000, easing: react_native_reanimated_1.Easing.ease }), -1, true);
-    const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({ opacity: opacity.value }), []);
+    const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return { opacity: opacity.value };
+    }, []);
     return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: fadeLoopAnim, children: children });
 };
 exports.Skeleton = Skeleton;

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.22",
+  "version": "11.0.24",
   "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",